/* Google Places Autocomplete Styling */
        .pac-container {
            font-family: 'Inter', sans-serif;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            margin-top: 4px;
            z-index: 10000 !important;
        }
        
        .pac-item {
            padding: 8px 14px;
            font-size: 13px;
            line-height: 1.4;
            color: #1f2937;
            border-top: 1px solid #f3f4f6;
            cursor: pointer;
            transition: background-color 0.15s ease;
        }
        
        .pac-item:first-child {
            border-top: none;
        }
        
        .pac-item:hover {
            background-color: #f9fafb;
        }
        
        .pac-item-selected {
            background-color: #f3f4f6;
        }
        
        .pac-item-query {
            font-size: 13px;
            color: #111827;
            font-weight: 500;
            display: block;
            white-space: normal;
            line-height: 1.4;
        }
        
        .pac-matched {
            font-weight: 600;
            color: #6B46C1;
        }
        
        .pac-item-query .pac-matched {
            display: inline;
        }
        
        .pac-icon {
            display: none;
        }

        /* FIX: Restore compact form layout by removing excessive padding from .form-group */
        .form-group {
            margin-bottom: 15px; /* Restore default margin */
        }
/* intl-tel-input dropdown z-index fix */
        .iti__dropdown {
            z-index: 5 !important;
        }
        
        /* Ensure error messages appear above dropdown */
        label.error {
            position: relative;
            z-index: 10 !important;
        }
        
        /* Fix flag/dial code alignment when error appears */
        .iti {
            display: block !important;
            width: 100% !important;
            position: relative !important;
            /* FIX: Prevent vertical shift when error message appears */
            vertical-align: top !important;
        }
        
        .iti__selected-flag {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            bottom: 0 !important;
            height: auto !important;
            padding: 0 0 0 8px !important;
            display: flex !important;
            align-items: center !important;
            z-index: 1 !important;
        }
        
        #phone {
            padding-left: 52px !important;  /* ✅ Reduced from 70px to remove white space */
            box-sizing: border-box !important;
            height: 40px !important;
            line-height: 40px !important;
        }
        
        /* Ensure intl-tel-input container matches other fields height */
        .iti {
            height: 40px !important;
        }
        
        .iti__selected-flag {
            height: 48px !important;
        }
        
        /* Ensure error message doesn't affect flag position */
        .form-group .error-message-js {
            display: block;
            margin-top: 6px;
        }
        
        /* FIX: Prevent the error message from causing layout shift */
        .form-group {
            position: relative; /* Ensure error message is positioned relative to this */
        }
        
        label.error {
            /* Keep existing styles */
            position: absolute !important; /* Absolute position to prevent pushing the input */
            bottom: -20px; /* Position it below the input field */
            left: 0;
            z-index: 10 !important;
        }
        
        /* FIX: Ensure the flag container stays aligned when error is present */
        .iti.error .iti__flag-container {
            vertical-align: top !important;
        }
        
        /* FIX: Ensure the input field itself is aligned correctly */
        .iti input#phone.error {
            vertical-align: top !important;
        }
        
        /* FIX: Revert the vertical-align fix from v4.0.10, as absolute positioning of error should fix it */
        .iti {
            vertical-align: middle !important; /* Revert to middle or remove, let's revert to middle */
        }

        /* jQuery Validation Error Styles */
.error-message {
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
    display: block;
    font-weight: 500;
}

.error-input {
    border-color: #ef4444 !important;
    background-color: #fef2f2;
}

.error-input:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

label.error {
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
    display: block;
}

/* Valid input style */
input.valid, select.valid {
    border-color: #10b981;
}

        /* Stripe Card Element Styling */
        #card-element {
            padding: 12px 14px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: white;
            transition: all 0.2s ease;
        }

        #card-element.StripeElement--focus {
            border-color: #6B46C1;
            box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.1);
        }

        #card-element.StripeElement--invalid {
            border-color: #ef4444;
        }

        #card-errors {
            color: #ef4444;
            font-size: 14px;
            margin-top: 8px;
            min-height: 20px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .error-icon {
            font-size: 16px;
        }

        .card-section {
            margin-bottom: 24px;
        }

        .stripe-card-wrapper {
            margin-top: 12px;
        }

        /* Fix: Prevent phone field error message from overlapping Stripe card box */
        .phone-error-message {
            margin-bottom: 20px !important;
            display: block !important;
        }

        /* Add margin-bottom to phone field form-group when error is present (for browsers with :has() support) */
        .form-group:has(#phone.error-input),
        .form-group:has(#phone-mobile.error-input) {
            margin-bottom: 24px;
        }

        /* Add margin-bottom to error message after phone field elements */
        #phone + .error-message-js,
        #phone-mobile + .error-message-js,
        .phone-mobile-wrapper + .error-message-js,
        .iti + .error-message-js {
            margin-bottom: 20px !important;
            display: block;
        }

        /* Mobile phone field error styling */
        @media (max-width: 768px) {
            .phone-mobile-wrapper .error-message-js,
            .phone-mobile-integrated + .error-message-js {
                display: block !important;
                color: #ef4444 !important;
                font-size: 13px !important;
                margin-top: 6px !important;
                font-weight: 500 !important;
            }
            
            /* Error input border for mobile phone */
            .phone-mobile-input.error-input {
                border-color: #ef4444 !important;
            }
            
            /* Error state for mobile phone container */
            .phone-mobile-integrated.error-input {
                border-color: #ef4444 !important;
            }
        }

        /* Ensure phone field container has enough space before Stripe card */
        .form-group:has(#phone) + .card-section,
        .form-row:has(#phone) + .card-section {
            margin-top: 8px;
        }

        /* Express Checkout Section */
        .express-checkout-section {
            margin-top: 16px;
            margin-bottom: 0;
        }

        #express-checkout-element {
            margin-bottom: 16px;
        }

        .payment-divider {
            position: relative;
            text-align: center;
            margin: 24px 0;
        }

        .payment-divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: #e5e7eb;
        }

        .payment-divider span {
            position: relative;
            background: white;
            padding: 0 16px;
            color: #6b7280;
            font-size: 14px;
            font-weight: 500;
        }

        /* Payment Element Styling */
        #payment-element {
            margin-bottom: 12px;
        }

        #payment-errors {
            color: #ef4444;
            font-size: 14px;
            margin-top: 8px;
            min-height: 20px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* Hide old card inputs */
        #cardNumber, #expiry, #cvc, #cardZip {
            display: none;
        }
        
        /* Select2 Search Input Styling */
        .select2-search__field {
            border-radius: 8px !important;
            border: 1px solid #e5e7eb !important;
            padding: 8px 12px !important;
            font-size: 14px !important;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
            outline: none !important;
        }
        
        .select2-search__field:focus {
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
        }
        
        /* Select2 Dropdown Container */
        .select2-container--default .select2-search--dropdown {
            padding: 8px !important;
        }

        /* Loading spinner for submit button */
        .submit-button {
            position: relative;
            background: #E87722;
            color: white;
            border: none;
            padding: 14px 24px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            transition: background 0.2s ease;
        }
        
        .submit-button:hover {
            background: #D66A1C;
        }

        .submit-button.loading {
            pointer-events: none;
            opacity: 0.7;
        }

        .submit-button .spinner {
            display: none;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        .submit-button.loading .spinner {
            display: block;
        }

        @keyframes spin {
            to { transform: translateY(-50%) rotate(360deg); }
        }

        /* Success message */
        .success-message {
            display: none;
            /* background: #10b981; */
            color: white;
            padding: 16px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 600;
            animation: slideDown 0.3s ease;
        }

        .success-message.show {
            display: none;
        }

        
        .error-message {
            display: none;
            background: #de4217ff;
            color: white;
            padding: 16px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 600;
            animation: slideDown 0.3s ease;
        }

        .error-message.show {
            display: block;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Coupon Applied Success Badge */
        .coupon-applied {
            display: none;
            background: #d1fae5;
            border: 1px solid #10b981;
            color: #065f46;
            padding: 12px 16px;
            border-radius: 8px;
            margin-top: 12px;
            font-size: 14px;
            align-items: center;
            gap: 8px;
        }

        .coupon-applied.show {
            display: flex;
        }

        .coupon-applied .remove-coupon {
            margin-left: auto;
            background: #e5e7eb;
            border: 1px solid #d1d5db;
            color: #6b7280;
            cursor: pointer;
            font-size: 13px;
            padding: 4px 10px;
            border-radius: 4px;
            font-weight: 500;
            line-height: 1;
        }

        .coupon-applied .remove-coupon:hover {
            background: #d1d5db;
            color: #374151;
        }
        
        /* Gray out coupon input when disabled */
        #coupon:disabled {
            background-color: #f3f4f6;
            color: #9ca3af;
            cursor: not-allowed;
            opacity: 0.6;
        }

        /* Apply Button Loading State */
        .apply-button.loading {
            opacity: 0.6;
            pointer-events: none;
        }

        .apply-button.loading::after {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-left: 8px;
            border: 2px solid rgba(107, 70, 193, 0.3);
            border-top-color: #6B46C1;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        /* Pricing Breakdown Section */
        .pricing-breakdown {
            margin-top: 24px;
            padding-top: 20px;
            border-top: 2px solid #e5e7eb;
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-size: 15px;
            color: #6b7280;
        }

        .price-row.subtotal {
            font-size: 14px;
        }

        .price-row.discount {
            color: #10b981;
            font-weight: 500;
        }

        .price-row.discount span:last-child {
            font-weight: 600;
        }

        .price-row.total {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #e5e7eb;
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
        }

        .total-amount {
            color: #6B46C1;
            font-size: 22px;
        }

        /* Coupon Error Message */
        .coupon-error {
            display: none;
            color: #ef4444;
            font-size: 13px;
            margin-top: 6px;
        }

        .coupon-error.show {
            display: block;
        }

        /* Updated Upgrade Section Styles */
.upgrade-section {
    margin-top: 24px;
    padding: 20px;
    background: #fffbeb;
    border: 2px solid #fbbf24;
    border-radius: 12px;
}

.upgrade-title {
    font-size: 15px;
    color: #78350f;
    font-weight: 500;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.upgrade-plan-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
}

.upgrade-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 16px;
}

.upgrade-plan-name {
    font-size: 16px;
    font-weight: 600;
    color: #6B46C1;
    margin: 0 0 4px 0;
}

.upgrade-trial {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.upgrade-pricing {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.upgrade-price {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    display: block;
}

.upgrade-billing {
    font-size: 12px;
    color: #6b7280;
    display: block;
    margin-top: 2px;
}

.upgrade-features {
    margin-bottom: 16px;
}

.upgrade-features-title {
    font-size: 13px;
    color: #4b5563;
    margin: 0 0 8px 0;
}

.upgrade-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.upgrade-features-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 6px;
}

.upgrade-features-list li:last-child {
    margin-bottom: 0;
}

.upgrade-features-list svg {
    flex-shrink: 0;
}

.upgrade-button {
    width: 100%;
    background: #E87722;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s ease;
}

.upgrade-button:hover {
    background: #D66A1C;
}

.upgrade-button svg {
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 640px) {
    .upgrade-plan-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .upgrade-pricing {
        align-items: flex-start;
    }
    
    .upgrade-price {
        font-size: 20px;
    }
}
        /* Select2 Country Dropdown - Match phone number flag dropdown style */
        .select2-container--default .select2-selection--single {
            height: 40px !important;
            border: 1px solid #d1d5db !important;
            border-radius: 8px !important;
            background: white !important;
        }
        
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #1f2937 !important; /* Black text like other fields */
            line-height: 40px !important;
            padding-left: 12px !important;
            padding-right: 30px !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 15px !important;
        }
        
        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #9ca3af !important; /* Gray placeholder */
        }
        
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px !important;
            right: 12px !important;
        }
        
        .select2-container--default.select2-container--open .select2-selection--single,
        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #6B46C1 !important;
            box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.1) !important;
        }
        
        /* Select2 Dropdown - Match phone flag dropdown list style */
        .select2-container--default .select2-dropdown {
            border: 1px solid #e5e7eb !important;
            border-radius: 8px !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
            margin-top: 4px !important;
            font-family: 'Inter', sans-serif !important;
        }
        
        .select2-container--default .select2-results__option {
            padding: 8px 12px !important;
            font-size: 14px !important;
        }
        
        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #f9fafb !important;
            color: #1f2937 !important;
        }
        
        .select2-container--default .select2-results__option[aria-selected=true] {
            background-color: #f3f4f6 !important;
        }
        /* CRITICAL: Two-column layout fix for Desktop, proper mobile order */
@media (min-width: 769px) {
    .checkout-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 40px !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }
    
    .checkout-form {
        flex: 0 1 58% !important;
        min-width: 500px !important;
        max-width: 650px !important;
        order: 1;
        background: #ffffff;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    }
    
    /* Right column container for Order Summary + Upgrades */
    .order-summary {
        flex: 0 1 38% !important;
        min-width: 350px !important;
        max-width: 450px !important;
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    /* Upgrades inside the right column */
    .upgrades-wrapper {
        width: 100% !important;
        order: 3;
    }
    
    /* Upgrade section always visible on desktop - no collapse */
    .upgrades-wrapper .accordion-content {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Hide mobile accordion header for upgrades on desktop */
    .upgrades-wrapper .accordion-header {
        display: none !important;
    }
    
    /* Order Summary always visible on desktop */
    .order-summary .accordion-content {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .order-summary .accordion-header {
        display: none !important;
    }
}

/* Mobile layout - proper vertical stacking using Grid */
@media (max-width: 768px) {
    .checkout-wrapper {
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    
    .order-summary {
        grid-row: 1;
        display: contents; /* Make children direct grid items */
    }
    
    .order-summary .summary-card {
        grid-row: 1; /* Order Summary first */
    }
    
    .checkout-form {
        grid-row: 2; /* Form second */
        background: #ffffff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
        margin-bottom: 16px;
    }
    
    .upgrades-wrapper {
        grid-row: 3; /* Upgrades third */
    }
    
    /* Order Summary collapsed by default on mobile */
    .order-summary .accordion-content:not(.open) {
        display: none !important;
    }
    
    /* Upgrades always expanded on mobile - no accordion */
    .upgrades-wrapper .accordion-content {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Hide mobile accordion header for upgrades */
    .upgrades-wrapper .accordion-header {
        display: none !important;
    }
    
    /* Stack Country/ZIP/Phone fields on mobile */
    .form-row[style*="display: flex"] {
        flex-direction: column !important;
    }
    
    .form-row .form-group[style*="flex: 0 0"] {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    /* Make all form fields 100% width on mobile */
    .form-group {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .form-group input,
    .form-group select {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* intl-tel-input mobile styling - show dial code, hide flag/globe icon */
    .iti__selected-dial-code {
        display: inline !important;
        font-size: 16px;
        color: #1f2937;
    }
    
    /* Hide the flag/globe icon on mobile */
    .iti__flag-container {
        display: none !important;
    }
    
    /* Show only the dial code as clickable element */
    .iti--separate-dial-code .iti__selected-dial-code {
        cursor: pointer;
        padding: 12px;
        background: #f9fafb;
        border-right: 1px solid #e5e7eb;
        display: inline-block !important;
    }
    
    /* Adjust phone input padding when dial code is visible */
    .iti--separate-dial-code #phone {
        padding-left: 65px !important;
    }
}

div#payment-errors {
    display: none;
}

/* ============================================
   Processing Overlay Styles
   ============================================ */
.processing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: fadeIn 0.3s ease;
    padding: 20px;
}

.processing-overlay.active {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.processing-content {
    background: white;
    padding: 48px 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.processing-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 24px;
    border: 4px solid #f3f4f6;
    border-top: 4px solid #F47920;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.processing-content h3 {
    color: #1f2937;
    font-size: 24px;
    margin-bottom: 12px;
    font-weight: 600;
}

.processing-content > p {
    color: #6b7280;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.brain-facts {
    margin: 24px 0;
    padding: 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.brain-fact {
    position: absolute;
    width: 100%;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.brain-fact.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
}

.brain-fact-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.brain-fact-text {
    color: #92400e;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
}

.processing-warning {
    color: #9ca3af;
    font-size: 14px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
}

.extended-wait {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 16px;
    display: none;
    animation: slideDown 0.3s ease;
}

.extended-wait.show {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .processing-content {
        padding: 32px 24px;
        max-width: 90%;
    }

    .processing-content h3 {
        font-size: 20px;
    }

    .processing-content > p {
        font-size: 14px;
    }

    .processing-spinner {
        width: 50px;
        height: 50px;
        border-width: 3px;
    }

    .brain-facts {
        padding: 16px;
        min-height: 90px;
    }

    .brain-fact-icon {
        font-size: 28px;
    }

    .brain-fact-text {
        font-size: 14px;
    }

    .processing-warning {
        font-size: 13px;
    }

    .extended-wait {
        font-size: 13px;
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .processing-content {
        padding: 24px 20px;
    }

    .processing-content h3 {
        font-size: 18px;
    }

    .processing-spinner {
        width: 45px;
        height: 45px;
        margin-bottom: 20px;
    }

    .brain-facts {
        padding: 12px;
        min-height: 85px;
    }

    .brain-fact-text {
        font-size: 13px;
    }
}

/* ============================================
   Failsafe Modal Styles
   ============================================ */
.failsafe-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999; /* Higher than processing overlay */
    animation: fadeIn 0.3s ease;
    padding: 20px;
}

.failsafe-modal.active {
    display: flex;
}

.failsafe-content {
    background: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: slideUp 0.3s ease;
}

.failsafe-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.failsafe-content h3 {
    color: #1f2937;
    font-size: 24px;
    margin-bottom: 12px;
    font-weight: 600;
}

.failsafe-content p {
    color: #6b7280;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.failsafe-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.failsafe-btn-primary {
    background: linear-gradient(135deg, #F47920 0%, #e06610 100%);
    color: white;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.failsafe-btn-primary:hover {
    background: linear-gradient(135deg, #e06610 0%, #d05500 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 121, 32, 0.3);
}

.failsafe-btn-primary:active {
    transform: translateY(0);
}

.failsafe-btn-secondary {
    background: white;
    color: #6b7280;
    padding: 14px 24px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.failsafe-btn-secondary:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #1f2937;
}

.failsafe-btn-secondary:active {
    background: #f3f4f6;
}

@media (max-width: 768px) {
    .failsafe-content {
        padding: 32px 24px;
        max-width: 90%;
    }

    .failsafe-content h3 {
        font-size: 20px;
    }

    .failsafe-content p {
        font-size: 15px;
    }

    .failsafe-icon {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }

    .failsafe-btn-primary,
    .failsafe-btn-secondary {
        font-size: 15px;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .failsafe-content {
        padding: 24px 20px;
    }

    .failsafe-content h3 {
        font-size: 18px;
    }

    .failsafe-content p {
        font-size: 14px;
    }

    .failsafe-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
        margin-bottom: 20px;
    }
}

/* Mobile phone field: Hide desktop intl-tel-input, show simple selector */
@media (max-width: 768px) {
        .phone-desktop,
        .iti {
            display: none !important;
        }
        
        .phone-mobile-wrapper {
            display: block !important;
        }
    }
    
/* Desktop phone field: Show intl-tel-input, hide mobile selector */
@media (min-width: 769px) {
    .phone-desktop {
        display: block !important;
    }
    
    .phone-mobile-wrapper {
        display: none !important;
    }

    
}


/* Desktop: Preserve Country/Zip/Phone widths */
@media (min-width: 769px) {
    .country-zip-phone-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
    }
    
    .country-zip-phone-row .form-group:nth-child(1) {
        flex: 0 0 calc(40% - 8px) !important;
        max-width: calc(40% - 8px) !important;
    }
    
    .country-zip-phone-row .form-group:nth-child(2) {
        flex: 0 0 calc(25% - 8px) !important;
        max-width: calc(25% - 8px) !important;
    }
    
    .country-zip-phone-row .form-group:nth-child(3) {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Fix Select2 container width for phone country mobile */
#phone-country-mobile + .select2-container,
#phone-country-mobile + span.select2.select2-container.select2-container--default {
    width: auto !important;
    min-width: 80px !important;
    max-width: 35% !important;
    flex: 0 0 auto !important;
    border: none !important;
}

/* Remove border from Select2 selection - unified border on container only */
#phone-country-mobile + .select2-container .select2-selection--single {
    border: none !important;
    border-right: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    background: white !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
}

#phone-country-mobile + .select2-container .select2-selection__rendered {
    padding: 0 12px !important;
    line-height: 48px !important;
}

#phone-country-mobile + .select2-container .select2-selection__arrow {
    height: 48px !important;
    right: 8px !important;
}

/* Remove focus border from Select2 - container handles it */
#phone-country-mobile + .select2-container.select2-container--focus .select2-selection--single {
    border: none !important;
    border-right: 1px solid #e5e7eb !important;
    outline: none !important;
}

/* Remove focus border from phone input - container handles it */
#phone-mobile:focus {
    border: none !important;
    outline: none !important;
}

/* Ensure phone-mobile-integrated container has the border and matches other fields height */
.phone-mobile-integrated {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    height: 40px !important;
    min-height: 40px !important;
}

.phone-mobile-integrated:focus-within {
    border-color: #6B46C1 !important;
    box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.1) !important;
}

/* Fix Select2 dropdown width for phone country - width set dynamically via JavaScript to match container */
#phone-country-mobile + .select2-container .select2-dropdown.select2-dropdown--below {
    /* Width will be set by JavaScript to match phone-mobile-integrated container */
    min-width: 244px !important; /* Fallback minimum */
    width: auto !important;
}

@media (max-width: 768px) {
    #phone-country-mobile + .select2-container,
    #phone-country-mobile + span.select2.select2-container.select2-container--default {
        width: auto !important;
        min-width: 80px !important;
        max-width: 35% !important;
        flex: 0 0 auto !important;
    }
    
    /* Mobile: Dropdown width set dynamically via JavaScript */
    #phone-country-mobile + .select2-container .select2-dropdown.select2-dropdown--below {
        min-width: 250px !important; /* Fallback minimum */
        width: auto !important;
        max-width: calc(100vw - 32px) !important; /* Prevent overflow on small screens */
    }
}

/* Ensure country Select2 matches country field width (desktop & mobile) */
#country + .select2-container {
    width: 100% !important;
}

#country + .select2-container .select2-dropdown {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

@media (max-width: 768px) {
    #country + .select2-container {
        width: 100% !important;
    }
    
    #country + .select2-container .select2-dropdown {
        width: 100% !important;
    }
}
/* ============================================
   Apply Button Loading Spinner Fix - IMPORTANT
   ============================================ */
/* Apply Button with Absolute Positioning for Perfect Alignment */
.apply-button {
    position: relative !important;
}

.apply-button.loading {
    padding-right: 32px !important; /* ✅ Make space for spinner */
}

.apply-button.loading::after {
    content: '' !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    margin-left: 8px !important;
    border: 2px solid rgba(107, 70, 193, 0.3) !important;
    border-top-color: #6B46C1 !important;
    border-radius: 50% !important;
    animation: spin 0.6s linear infinite !important;
    position: absolute !important;
    right: 12px !important; /* ✅ Position from right */
    top: 30% !important; /* ✅ Center vertically */
    margin-left: 0 !important; 
}

#phone-country-mobile + .select2-container .select2-dropdown.select2-dropdown--below {
        width: 100% !important; 
}

.back-button-link {
    color: #6B7280;
}