/* ============================================================
   Buy Video Modal ΓÇô New Clean Design
   Scoped under #cvp-buy-video-modal.cvp-bv-modal
   ============================================================ */

/* CSS Variables for easy theming */
#cvp-buy-video-modal.cvp-bv-modal {
    --cvp-primary: #EF4444;
    --cvp-primary-hover: #DC2626;
    --cvp-accent: #3B82F6;
    --cvp-accent-light: #EEF4FF;
    --cvp-amber: #F59E0B;
    --cvp-amber-hover: #D97706;
    --cvp-foreground: #1a1a1a;
    --cvp-muted: #1a1a1a;
    --cvp-border: #e5e7eb;
    --cvp-card-bg: #ffffff;
    --cvp-muted-bg: #f3f4f6;
}

#cvp-buy-video-modal.cvp-bv-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow: auto;
    background: var(--cvp-card-bg);
    border-radius: 16px;
    border: 1px solid var(--cvp-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--cvp-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-close:hover {
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-content {
    color: var(--cvp-foreground);
}

/* Header Section */
#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-title {
    margin: 0;
    padding: 10px 10px 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-subtitle {
    margin: 4px 0 0;
    padding: 0 10px 8px;
    font-size: 0.875rem;
    color: var(--cvp-foreground);
}

/* Steps Indicator */
#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0 10px 8px;
    font-size: 0.875rem;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-steps::before {
    display: none;
}

/* Pick Heading Section */
#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-pick-heading {
    margin: 0;
    padding: 8px 10px 6px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cvp-foreground);
    text-align: center;
}

/* Options Container */
#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-options {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
    padding: 0 10px;
}

/* Option Card */
#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    margin: 0;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
    background: transparent;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-option:hover {
    background: var(--cvp-muted-bg);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Checkbox/Radio Indicator */
#cvp-buy-video-modal.cvp-bv-modal .cvp-option-radio {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border: 2px solid var(--cvp-border);
    border-radius: 6px;
    background: var(--cvp-card-bg);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Selected State */

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-option:has(input:checked) .cvp-option-radio {
    border-color: var(--cvp-accent);
    background-color: var(--cvp-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-option-left {
    flex: 1;
    min-width: 0;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-option-label {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: var(--cvp-foreground);
    margin-bottom: 2px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-option-price {
    font-weight: 600;
    font-size: 1rem;
    color: var(--cvp-foreground);
    white-space: nowrap;
    text-align: right;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-option-desc {
    display: block;
    font-size: 0.875rem;
    color: var(--cvp-muted);
    margin-bottom: 0;
}

/* Member option: description limited width */
#cvp-buy-video-modal.cvp-bv-modal .cvp-option-member .cvp-option-desc {
    max-width: 200px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-option-cancel-anytime {
    display: block;
    font-size: 0.875rem;
    color: var(--cvp-muted);
    margin-top: 2px;
}

/* Right side layout (price + subtext) — shared by PPV and member options */
#cvp-buy-video-modal.cvp-bv-modal .cvp-option-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
}

/* Member option right side layout */
#cvp-buy-video-modal.cvp-bv-modal .cvp-option-member .cvp-option-price {
    text-align: right;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-option-member .cvp-option-right .cvp-option-cancel-anytime {
    margin-top: 2px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-option-member .cvp-option-right .cvp-badge-coming-soon {
    margin-top: 8px;
}

/* Learn More pill — under plan title, left column */
#cvp-buy-video-modal.cvp-bv-modal .cvp-option-plan .cvp-option-learn-more {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
    background: #FBBF59;
    border-radius: 9999px;
    text-decoration: none;
    cursor: pointer;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-learn-more-row {
    margin: 4px 0 0;
    padding: 0;
}

/* Learn More Button */
#cvp-buy-video-modal.cvp-bv-modal .cvp-member-learn-more {
    display: inline-block;
    padding: 8px 20px;
    margin-top: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: #FBBF59;
    border: none;
    border-radius: 9999px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}


/* Coming Soon Badge */
#cvp-buy-video-modal.cvp-bv-modal .cvp-badge-coming-soon {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #38b6ff;
    color: #fff;
    border: none;
    border-radius: 4px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-option-divider {
    display: flex;
    align-items: center;
    margin: 8px 0;
    padding: 0 10px;
    font-size: 0.875rem;
    color: var(--cvp-muted);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-option-divider::before,
#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-option-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cvp-border);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-option-divider span {
    padding: 0 10px;
}

/* Info box (terms & conditions) - Gray background with blue icon */
#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 10px 10px;
    padding: 10px;
    background: var(--cvp-muted-bg);
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-info-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--cvp-accent);
    line-height: 1;
    margin-top: 2px;
}

/* SVG info icon */
#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-info-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-info-text {
    flex: 1;
    line-height: 1.5;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-info-text a,
#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-info-text span {
    color: var(--cvp-accent);
    font-weight: 500;
    text-decoration: none;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-info-text a:hover {
    text-decoration: underline;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border-top: 1px solid var(--cvp-border);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-footer-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-footer-link {
    color: var(--cvp-foreground);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-footer-link:hover {
    text-decoration: underline;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-footer-chat-icon {
    display: none;
}

/* Payment footer - Back link and Secure badge */
#cvp-buy-video-modal.cvp-bv-modal .cvp-payment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px solid var(--cvp-border);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-back-link {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cvp-foreground);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-back-link:hover {
    text-decoration: underline;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-secure-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--cvp-muted);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-secure-badge svg {
    width: 16px;
    height: 16px;
    color: var(--cvp-accent);
}

/* Payment Steps Indicator */
#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--cvp-muted);
    margin: 10px 0;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-step-item {
    color: var(--cvp-muted);
    font-weight: 500;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-step-item.cvp-step-active {
    color: var(--cvp-amber);
    font-weight: 600;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-step-arrow {
    color: var(--cvp-muted);
    font-size: 0.75rem;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-next {
    margin-left: auto;
    padding: 10px 32px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff !important;
    background: var(--cvp-primary) !important;
    border: none !important;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-next:hover {
    background: var(--cvp-primary-hover) !important;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-step {
    margin-top: 0;
}

/* Plan Selection Step */
#cvp-buy-video-modal.cvp-bv-modal .cvp-plan-selection {
    gap: 12px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-plan-selection .cvp-modal-option {
    border: 2px solid var(--cvp-border);
    border-radius: 12px;
    padding: 10px;
    margin: 0;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-plan-selection .cvp-modal-option:hover {
    border-color: var(--cvp-accent);
    background: var(--cvp-muted-bg);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-plan-selection .cvp-modal-option:has(input:checked) {
    border-color: var(--cvp-accent);
    background: var(--cvp-accent-light);
}

/* Plans step subtitle */
#cvp-buy-video-modal.cvp-bv-modal [data-cvp-step="plans"] .cvp-modal-subtitle {
    margin: 0 0 10px;
    padding: 0 10px;
    text-align: center;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-payment-total {
    margin: 0 0 10px;
    padding: 0 10px;
    font-size: 1rem;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-payment-total .cvp-payment-price {
    font-weight: 600;
    color: var(--cvp-primary);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-back {
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cvp-foreground);
    background: var(--cvp-muted-bg);
    border: 1px solid var(--cvp-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-back:hover {
    background: #e5e5e5;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-payment-methods .cvp-modal-option {
    align-items: center;
    border: 2px solid var(--cvp-border);
    border-radius: 12px;
    padding: 14px 16px;
    gap: 16px;
    margin-bottom: 12px;
    background: var(--cvp-card-bg);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-payment-methods .cvp-modal-option:last-child {
    margin-bottom: 0;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-payment-methods .cvp-modal-option:hover {
    background: var(--cvp-muted-bg);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-payment-methods .cvp-modal-option:has(input:checked) {
    border-color: var(--cvp-amber);
    background: #FFF9EB;
}

/* Payment Icon */
#cvp-buy-video-modal.cvp-bv-modal .cvp-payment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--cvp-muted-bg);
    flex-shrink: 0;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-payment-icon svg {
    width: 20px;
    height: 20px;
    color: var(--cvp-muted);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-payment-methods .cvp-modal-option:has(input:checked) .cvp-payment-icon {
    background: #FFF1CC;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-payment-methods .cvp-modal-option:has(input:checked) .cvp-payment-icon svg {
    color: var(--cvp-amber);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-payment-methods .cvp-option-label {
    margin-bottom: 0;
    font-weight: 600;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-details-inline {
    margin: 10px;
    padding: 10px;
    background: var(--cvp-muted-bg);
    border: 1px solid var(--cvp-border);
    border-radius: 12px;
    font-size: 0.875rem;
    color: var(--cvp-foreground);
}

/* Purchasing as text */
#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-purchasing-as {
    margin: 0 0 10px;
    padding: 0 10px;
    font-size: 0.875rem;
    color: var(--cvp-muted) !important;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-not-logged-in {
    color: var(--cvp-amber) !important;
}

/* Buy video button (in workshop-details) ΓÇô unscoped */
.cvp-buy-video-btn {
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: #EF4444;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.cvp-buy-video-btn:hover {
    background: #DC2626;
}

/* Success popup (after Stripe redirect) ΓÇô unscoped, uses .cvp-modal base */
.cvp-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.cvp-modal .cvp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.cvp-modal .cvp-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cvp-modal .cvp-modal-content {
    padding: 5px;
    color: #1a1a1a;
}

.cvp-success-dialog {
    max-width: 360px;
}

.cvp-success-content {
    text-align: center;
}

.cvp-success-title {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a1a;
}

.cvp-success-message {
    margin: 0 0 20px;
    font-size: 1rem;
    color: #6b7280;
}

.cvp-success-ok {
    margin-left: 0;
    margin-right: 0;
    background: #EF4444 !important;
}

.cvp-success-ok:hover {
    background: #DC2626 !important;
}

/* ========================================
   CARD FORM & BANK TRANSFER STEPS
   ======================================== */

/* Total Box */
#cvp-buy-video-modal.cvp-bv-modal .cvp-card-total-box {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 10px 16px;
    padding: 12px 16px;
    background: var(--cvp-muted-bg);
    border-radius: 12px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-total-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cvp-muted);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-total-amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cvp-amber);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-total-type {
    font-size: 0.875rem;
    color: var(--cvp-muted);
}

/* Card Form */
#cvp-buy-video-modal.cvp-bv-modal .cvp-card-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 10px 16px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-form-field {
    display: flex;
    flex-direction: column;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-field-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cvp-foreground);
    margin-bottom: 8px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-field-header .cvp-field-label {
    margin-bottom: 0;
}

/* Card Brands */
#cvp-buy-video-modal.cvp-bv-modal .cvp-card-brands {
    display: flex;
    align-items: center;
    gap: 4px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 20px;
    border-radius: 3px;
    font-size: 7px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-brand-icon.cvp-visa { background: #1A1F71; }
#cvp-buy-video-modal.cvp-bv-modal .cvp-brand-icon.cvp-mc { background: #EB001B; }
#cvp-buy-video-modal.cvp-bv-modal .cvp-brand-icon.cvp-discover { background: #F76F00; }
#cvp-buy-video-modal.cvp-bv-modal .cvp-brand-icon.cvp-amex { background: #2E77BC; }
#cvp-buy-video-modal.cvp-bv-modal .cvp-brand-icon.cvp-jcb { background: #0E4C96; }

/* Input Wrapper */
#cvp-buy-video-modal.cvp-bv-modal .cvp-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--cvp-border);
    border-radius: 8px;
    background: var(--cvp-card-bg);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-input-wrapper:focus-within {
    border-color: var(--cvp-amber);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-input-icon {
    width: 20px;
    height: 20px;
    color: var(--cvp-amber);
    flex-shrink: 0;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-stripe-element {
    flex: 1;
    min-height: 20px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--cvp-border);
    border-radius: 8px;
    background: var(--cvp-card-bg);
    font-size: 0.875rem;
    color: var(--cvp-foreground);
    outline: none;
    transition: border-color 0.2s;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-input::placeholder {
    color: var(--cvp-muted);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-input:focus {
    border-color: var(--cvp-amber);
}

/* Form Row */
#cvp-buy-video-modal.cvp-bv-modal .cvp-form-row {
    display: flex;
    gap: 16px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-form-field.cvp-half {
    flex: 1;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-form-field.cvp-half .cvp-stripe-element {
    padding: 12px 16px;
    border: 1px solid var(--cvp-border);
    border-radius: 8px;
    background: var(--cvp-card-bg);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-form-field.cvp-half .cvp-stripe-element:focus-within {
    border-color: var(--cvp-amber);
}

/* Promo Code */
#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-wrap {
    margin: 0 10px 16px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cvp-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-toggle:hover {
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-toggle svg {
    transition: transform 0.2s;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-toggle.cvp-promo-expanded svg {
    transform: rotate(90deg);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-input-wrap {
    margin-top: 8px;
    padding: 0 12px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-input-row {
    display: flex;
    gap: 8px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-input {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.875rem;
    border: 1px solid var(--cvp-border);
    border-radius: 8px;
    background: var(--cvp-bg);
    color: var(--cvp-foreground);
    text-transform: uppercase;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-input:focus {
    outline: none;
    border-color: var(--cvp-amber);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-apply {
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cvp-foreground);
    background: var(--cvp-amber);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-apply:hover {
    background: var(--cvp-amber-hover);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-apply:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-error {
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 0.8125rem;
    color: var(--cvp-primary);
    background: rgba(239, 68, 68, 0.1);
    border-radius: 6px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-success {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #16a34a;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-discount {
    font-size: 0.8125rem;
    color: #15803d;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-remove {
    margin-left: auto;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--cvp-muted);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-promo-remove:hover {
    color: var(--cvp-primary);
    background: rgba(239, 68, 68, 0.1);
}

/* Card Error */
#cvp-buy-video-modal.cvp-bv-modal .cvp-card-error {
    margin: 0 10px 12px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--cvp-primary);
}

/* Card Footer */
#cvp-buy-video-modal.cvp-bv-modal .cvp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 10px;
    border-top: 1px solid var(--cvp-border);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-pay-now {
    padding: 10px 32px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: var(--cvp-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-pay-now:hover {
    background: var(--cvp-primary-hover);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-pay-now:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   BANK TRANSFER STEP
   ======================================== */

/* Bank Card */
#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-card {
    display: flex;
    gap: 16px;
    margin: 0 10px 16px;
    padding: 16px;
    border: 1px solid var(--cvp-border);
    border-radius: 12px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-qr-wrap {
    flex-shrink: 0;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-qr-img {
    width: 112px;
    height: 112px;
    border-radius: 8px;
    background: var(--cvp-foreground);
    padding: 8px;
    object-fit: contain;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.875rem;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-label {
    color: var(--cvp-muted);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-value {
    font-weight: 600;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cvp-muted);
    transition: color 0.2s;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-copy-btn:hover {
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-copy-btn svg {
    width: 16px;
    height: 16px;
}

/* Bank Verification Box */
#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-verification-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 10px 12px;
    padding: 16px;
    background: #EEF4FF;
    border-radius: 12px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-verify-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--cvp-accent);
    margin-top: 2px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-verify-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-verify-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-verify-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cvp-muted);
}

/* Bank step message boxes */
#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-step-message {
    margin: 0 10px 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-step-success {
    background: rgba(76, 175, 80, 0.15);
    color: #2e7d32;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-step-error {
    background: rgba(244, 67, 54, 0.15);
    color: #c62828;
}

/* ============================================================
   Payment Success Step
   ============================================================ */
#cvp-buy-video-modal.cvp-bv-modal .cvp-success-header {
    padding: 24px 24px 16px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-success-heading {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-success-heading-sub {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--cvp-muted);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 24px 8px;
    text-align: center;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-success-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #DCFCE7;
    border-radius: 50%;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-success-icon {
    width: 36px;
    height: 36px;
    color: #16A34A;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-success-title {
    margin: 16px 0 4px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-success-subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cvp-muted);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-success-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 16px 24px;
    padding: 16px;
    background: var(--cvp-muted-bg);
    border: 1px solid var(--cvp-border);
    border-radius: 12px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-success-product {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-success-total,
#cvp-buy-video-modal.cvp-bv-modal .cvp-success-txn {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cvp-muted);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-success-amount,
#cvp-buy-video-modal.cvp-bv-modal .cvp-success-txn-id {
    font-weight: 600;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-success-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--cvp-border);
    padding: 16px 24px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-done {
    background: var(--cvp-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 32px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-modal-done:hover {
    background: var(--cvp-primary-hover);
}

/* ============================================================
   Bank Transfer Submitted (Pending Verification) Step
   ============================================================ */

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-header {
    padding: 0 0 16px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-heading {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-sub {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--cvp-muted);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-status {
    margin: 0;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-steps {
    justify-content: center;
    margin-top: 8px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-step-pending {
    font-weight: 600;
    color: var(--cvp-amber);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-details {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--cvp-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-product {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-total,
#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-ref {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cvp-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-amount,
#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-ref-code {
    font-weight: 600;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-next-steps {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--cvp-accent-light);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-next-icon {
    flex-shrink: 0;
    color: var(--cvp-accent);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-next-icon svg {
    display: block;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-next-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cvp-foreground);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-next-list {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 0.875rem;
    color: var(--cvp-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--cvp-border);
    padding: 16px 24px;
    margin-top: 16px;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-return {
    background: var(--cvp-amber);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 32px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-bank-submitted-return:hover {
    background: var(--cvp-amber-hover);
}

/* Login Step Styles */
#cvp-buy-video-modal.cvp-bv-modal .cvp-login-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    text-align: center;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-login-notice {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cvp-muted);
    margin: 0;
    max-width: 400px;
}

#cvp-buy-video-modal.cvp-bv-modal [data-cvp-step="login"] .cvp-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--cvp-border);
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-btn-back {
    background: transparent;
    border: 1px solid var(--cvp-border);
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cvp-foreground);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

#cvp-buy-video-modal.cvp-bv-modal .cvp-btn-back:hover {
    background: var(--cvp-background);
    border-color: var(--cvp-muted);
}