/* ============================================================
   Beauty & Bliss Auth — Stylesheet v5
   Force override Elementor + WordPress defaults
   100% design match with premium design aesthetics
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&display=swap');

/* ── Hard Reset — override everything Elementor injects ───── */
.bba-auth-wrap,
.bba-auth-wrap *,
.bba-auth-wrap *::before,
.bba-auth-wrap *::after {
    box-sizing: border-box !important;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
}

/* ── Force hide modal on load ── */
#bba-success-modal {
    display: none !important;
}
#bba-success-modal.bba-modal-visible {
    display: flex !important;
}

/* ── Eye icons: only ONE shows at a time, controlled by JS class ── */
/* By default (password hidden): show the OPEN eye (eye-show) */
/* When password visible (.bba-showing-password): show the CLOSED/SLASH eye (eye-hide) */
.bba-toggle-pw svg.bba-eye-show,
.bba-toggle-pw svg.bba-eye-hide {
    display: none !important;
}
.bba-toggle-pw:not(.bba-showing-password) svg.bba-eye-show {
    display: block !important;
}
.bba-toggle-pw.bba-showing-password svg.bba-eye-hide {
    display: block !important;
}

/* Remove Elementor widget container padding */
.elementor-widget-bba_auth_widget,
.elementor-widget-bba_auth_widget .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* ── Immersive Fullscreen and Page Scroll Lock ──
   Only applied on auth pages (body.bba-auth-page)
   so other pages scroll normally
   Desktop only (768px+)
── */
@media (min-width: 768px) {
    body.bba-auth-page:not(.elementor-editor-active) {
        overflow: hidden !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.bba-auth-page:not(.elementor-editor-active) .bba-auth-wrap {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 99999 !important;
        overflow: hidden !important;
        background: #fffaf5 !important;
    }

    body.bba-auth-page:not(.elementor-editor-active) .bba-panel.bba-active {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }
}

/* ── Wrapper ──────────────────────────────────────────────── */
.bba-auth-wrap {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    background: #fffaf5 !important;
}
/* overflow hidden only on desktop — mobile needs to scroll */
@media (min-width: 768px) {
    .bba-auth-wrap {
        overflow: hidden !important;
    }
}

/* ── Panel ────────────────────────────────────────────────── */
.bba-panel {
    display: none !important;
    width: 100% !important;
}
.bba-panel.bba-active {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}
/* min-height 100vh only on desktop */
@media (min-width: 768px) {
    .bba-panel.bba-active {
        min-height: 100vh !important;
    }
}

/* ══════════════════════════════════════════════════════════
   LEFT SIDE — STICKY IMAGE
   ══════════════════════════════════════════════════════════ */
.bba-image-side {
    position: sticky !important;
    top: 0 !important;
    width: 50% !important;
    height: 100vh !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    align-self: flex-start !important;
}
.bba-image-side img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════
   RIGHT SIDE — FORM WRAPPERS & SCROLL CONTROLS
   ══════════════════════════════════════════════════════════ */
.bba-form-side {
    width: 50% !important;
    background: #fffaf5 !important;
    overflow-x: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 60px 52px !important;

    /* Custom Scrollbar for Firefox */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(211, 104, 139, 0.25) transparent !important;
}

@media (min-width: 768px) {
    .bba-form-side {
        height: 100vh !important;
        max-height: 100vh !important;
    }

    /* Login Page: absolutely NO scrollbar on desktop */
    .bba-login-panel .bba-form-side {
        overflow-y: hidden !important;
    }

    /* Signup Page: Scrollbar ONLY inside the form container on desktop */
    .bba-register-panel .bba-form-side {
        overflow-y: auto !important;
    }
}

@media (max-height: 650px) and (min-width: 768px) {
    .bba-login-panel .bba-form-side {
        overflow-y: auto !important;
    }
}

/* Beautiful Custom Webkit Scrollbar */
.bba-form-side::-webkit-scrollbar {
    width: 6px !important;
}
.bba-form-side::-webkit-scrollbar-track {
    background: transparent !important;
}
.bba-form-side::-webkit-scrollbar-thumb {
    background: rgba(211, 104, 139, 0.25) !important;
    border-radius: 10px !important;
}
.bba-form-side::-webkit-scrollbar-thumb:hover {
    background: rgba(211, 104, 139, 0.6) !important;
}

/* Form inner container */
.bba-form-inner {
    width: 100% !important;
    max-width: 430px !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════════
   BRAND LOGO (Playfair Display, Elegant Serif Italic)
   ══════════════════════════════════════════════════════════ */
.bba-brand {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: #d3688b !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 24px !important;
    display: block !important;
    line-height: 1.1 !important;
}

/* ══════════════════════════════════════════════════════════
   HEADINGS
   ══════════════════════════════════════════════════════════ */
.bba-heading {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: #0b1a30 !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
    display: block !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}
.bba-subheading {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: #64748b !important;
    margin-bottom: 32px !important;
    display: block !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

/* ══════════════════════════════════════════════════════════
   FIELD GROUPS & LABELS
   ══════════════════════════════════════════════════════════ */
.bba-field-group {
    margin-bottom: 22px !important;
    display: block !important;
    width: 100% !important;
}
.bba-field-group label {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.1px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    cursor: default !important;
}

/* ══════════════════════════════════════════════════════════
   INPUT WRAPPER — white box, rounded corners, thin border
   BULLETPROOF ABSOLUTE POSITIONING OF INNER ELEMENTS
   ══════════════════════════════════════════════════════════ */
.bba-input-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 52px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}
.bba-input-wrap:focus-within {
    border-color: #d3688b !important;
    box-shadow: 0 0 0 3px rgba(211, 104, 139, 0.12) !important;
}

/* Left icon inside input - Absolutely positioned so it NEVER overlaps */
.bba-icon {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 44px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 10 !important;
}
.bba-icon svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* The actual inputs - Offset and padded to completely avoid overlaps */
.bba-input-wrap input[type="text"],
.bba-input-wrap input[type="email"],
.bba-input-wrap input[type="password"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: #0f172a !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    z-index: 5 !important;

    /* Push text inside so it never touches left icon or right eye icon */
    padding-left: 44px !important;  
    padding-right: 44px !important; 
}
.bba-input-wrap input::placeholder {
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}
.bba-input-wrap input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Custom paddings when no right eye icon is present */
.bba-input-wrap input[type="email"]:not([name="password"]),
.bba-input-wrap input[type="text"]:not([name="password"]),
.bba-input-wrap input[type="tel"] {
    padding-right: 16px !important;
}

/* ══════════════════════════════════════════════════════════
   SELECT / DROPDOWN
   ══════════════════════════════════════════════════════════ */
.bba-select-wrap select {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 44px 0 16px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: #0f172a !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
}
.bba-select-wrap select:focus {
    outline: none !important;
    box-shadow: none !important;
}
.bba-select-arrow {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #64748b !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
}
.bba-select-arrow svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════════
   EYE / TOGGLE PASSWORD VISIBILITY — FORCED STYLE RESET
   Wipe out any default theme background and border completely
   ══════════════════════════════════════════════════════════ */
.bba-auth-wrap button.bba-toggle-pw,
.bba-auth-wrap button.bba-toggle-pw:hover,
.bba-auth-wrap button.bba-toggle-pw:focus,
.bba-auth-wrap button.bba-toggle-pw:active,
.elementor-widget-bba_auth_widget button.bba-toggle-pw,
.elementor-widget-bba_auth_widget button.bba-toggle-pw:hover,
.elementor-widget-bba_auth_widget button.bba-toggle-pw:focus {
    all: unset !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 100% !important;
    min-height: unset !important;
    cursor: pointer !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #64748b !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important;
}
.bba-auth-wrap button.bba-toggle-pw:hover,
.elementor-widget-bba_auth_widget button.bba-toggle-pw:hover {
    color: #d3688b !important;
    background: transparent !important;
}
.bba-toggle-pw svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   FORGOT PASSWORD ROW & THIN SEPARATOR
   ══════════════════════════════════════════════════════════ */
/* Remember me LEFT — Forgot Password RIGHT */
.bba-remember-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 24px !important;
    border-top: 1px solid #ede8e3 !important;
    padding-top: 16px !important;
    margin-top: 4px !important;
    background: none !important;
    gap: 8px !important;
}
.bba-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    color: #64748b !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    flex-shrink: 0 !important;
}
.bba-checkbox-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    accent-color: #d3688b !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* Destroy any theme-injected border boxes on links, toggles, or text links */
.bba-auth-wrap button.bba-link-btn,
.bba-auth-wrap a,
.bba-auth-wrap button.bba-toggle-pw,
.bba-auth-wrap input[type="checkbox"],
.elementor-widget-bba_auth_widget button.bba-link-btn,
.elementor-widget-bba_auth_widget a,
.elementor-widget-bba_auth_widget button.bba-toggle-pw {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    text-decoration: none !important;
}
.bba-auth-wrap button.bba-link-btn:hover,
.bba-auth-wrap a:hover {
    text-decoration: underline !important;
}

/* Link Button style (e.g. Forgot password?, Switch tabs) */
.bba-link-btn {
    background: none !important;
    border: none !important;
    outline: none !important;
    color: #d3688b !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    line-height: 1.2 !important;
    transition: color 0.2s !important;
    display: inline-block !important;
}
.bba-link-btn:hover {
    color: #b84a6e !important;
    background: none !important;
    text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════════
   PRIMARY BUTTON — BULLETPROOF OVERRIDES
   Resets backgrounds on hover/active completely for themes
   ══════════════════════════════════════════════════════════ */
.bba-auth-wrap button.bba-btn-primary,
.elementor-widget-bba_auth_widget button.bba-btn-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 32px !important;
    background: #d3688b !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin-bottom: 24px !important;
    margin-top: 4px !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-decoration: none !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-shadow: none !important;
}
.bba-auth-wrap button.bba-btn-primary:hover,
.elementor-widget-bba_auth_widget button.bba-btn-primary:hover {
    background: #c85a7e !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.bba-auth-wrap button.bba-btn-primary:active,
.elementor-widget-bba_auth_widget button.bba-btn-primary:active {
    background: #b84a6e !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.bba-btn-primary:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}
.bba-btn-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

/* Spinner inside button — HIDDEN by default, JS shows it on submit */
.bba-spinner {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid rgba(255,255,255,0.35) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: bba-spin 0.7s linear infinite !important;
    flex-shrink: 0 !important;
    display: none !important;  /* hidden until setLoading(true) is called */
}
@keyframes bba-spin {
    to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════
   SWITCH TEXT
   ══════════════════════════════════════════════════════════ */
.bba-switch-text {
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    color: #0f172a !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    display: block !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
.bba-switch-text .bba-link-btn {
    font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════
   MESSAGES (Success / Error)
   ══════════════════════════════════════════════════════════ */
.bba-message {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
    line-height: 1.4 !important;
    display: block !important;
}
.bba-message.bba-success {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}
.bba-message.bba-error {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
}

/* ══════════════════════════════════════════════════════════
   PASSWORD STRENGTH & MATCH
   ══════════════════════════════════════════════════════════ */
.bba-strength-bar {
    height: 4px !important;
    background: #f1f5f9 !important;
    border-radius: 4px !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    padding: 0 !important;
}
.bba-strength-fill {
    height: 100% !important;
    border-radius: 4px !important;
    transition: width 0.3s, background 0.3s !important;
    width: 0% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.bba-strength-label, .bba-match-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    margin-top: 5px !important;
    display: block !important;
    padding: 0 !important;
}
.bba-strength-fill.strength-1 { width: 25% !important; background: #ef4444 !important; }
.bba-strength-fill.strength-2 { width: 50% !important; background: #f97316 !important; }
.bba-strength-fill.strength-3 { width: 75% !important; background: #eab308 !important; }
.bba-strength-fill.strength-4 { width: 100% !important; background: #22c55e !important; }
.bba-strength-label.strength-1 { color: #ef4444 !important; }
.bba-strength-label.strength-2 { color: #f97316 !important; }
.bba-strength-label.strength-3 { color: #eab308 !important; }
.bba-strength-label.strength-4 { color: #22c55e !important; }
.bba-match-label.match-ok   { color: #22c55e !important; }
.bba-match-label.match-fail { color: #ef4444 !important; }

/* ══════════════════════════════════════════════════════════
   FILE INPUT — hidden but accessible for programmatic click
   ══════════════════════════════════════════════════════════ */
.bba-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    top: 0 !important;
    left: 0 !important;
}

/* License note text */
.bba-license-note {
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin-top: 8px !important;
}

/* ══════════════════════════════════════════════════════════
   UPLOAD AREA (Dashed, Sleek, Matches Screenshot)
   ══════════════════════════════════════════════════════════ */
.bba-upload-area {
    border: 1px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    min-height: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: border-color 0.2s, background 0.2s !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}
.bba-upload-area:hover {
    border-color: #d3688b !important;
    background: #fff8f9 !important;
}
.bba-upload-area.bba-drag-over {
    border-color: #d3688b !important;
    background: #fff0f2 !important;
}
.bba-upload-placeholder {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    color: #64748b !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 20px !important;
    margin: 0 !important;
}
.bba-upload-placeholder svg {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
    flex-shrink: 0 !important;
    stroke: #64748b !important;
}
.bba-upload-preview {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}
.bba-upload-preview img {
    width: 100% !important;
    height: 140px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 6px !important;
}
.bba-remove-img {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.bba-remove-img:hover { background: #e11d48 !important; }
.bba-upload-hint {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-top: 6px !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════════
   BACK TO LOGIN BUTTON
   ══════════════════════════════════════════════════════════ */
.bba-back-btn {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.2s !important;
}
.bba-back-btn:hover { color: #d3688b !important; }

/* ══════════════════════════════════════════════════════════
   SUCCESS MODAL
   ══════════════════════════════════════════════════════════ */
.bba-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    margin: 0 !important;
}
.bba-modal {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 40px 32px 32px !important;
    text-align: center !important;
    max-width: 360px !important;
    width: 100% !important;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
    animation: bba-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin: 0 auto !important;
}
@keyframes bba-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.bba-modal-icon { margin-bottom: 16px !important; }
.bba-modal-icon svg { width: 48px !important; height: 48px !important; display: block !important; margin: 0 auto !important; }
.bba-modal h3 { font-family: 'Playfair Display', serif !important; font-size: 24px !important; font-weight: 700 !important; color: #0b1a30 !important; margin-bottom: 8px !important; }
.bba-modal p  { font-family: 'Inter', sans-serif !important; font-size: 14.5px !important; color: #64748b !important; line-height: 1.5 !important; margin-bottom: 24px !important; }
.bba-modal-loader { height: 4px !important; background: #f1f5f9 !important; border-radius: 4px !important; overflow: hidden !important; }
.bba-modal-progress { height: 100% !important; background: #d3688b !important; border-radius: 4px !important; width: 0% !important; animation: bba-progress 2.5s linear forwards !important; }
@keyframes bba-progress { from { width: 0%; } to { width: 100%; } }

/* ══════════════════════════════════════════════════════════
   TERMS CHECKBOX
   ══════════════════════════════════════════════════════════ */
.bba-terms-group {
    margin-bottom: 20px !important;
}
.bba-terms-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    color: #64748b !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}
.bba-terms-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    accent-color: #d3688b !important;
    cursor: pointer !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}
.bba-terms-link {
    color: #d3688b !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}
.bba-terms-link:hover {
    color: #b84a6e !important;
}

/* Align form sides — desktop only */
@media (min-width: 768px) {
    .bba-register-panel .bba-form-side {
        align-items: flex-start !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    .bba-login-panel .bba-form-side {
        align-items: center !important;
    }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE DESIGN (IMMERSIVE MOBILE FLOWS)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .bba-form-side { padding: 48px 36px !important; }
}

@media (max-width: 767px) {
    /* Image hide on mobile */
    .bba-image-side {
        display: none !important;
    }

    /* Panel: full width single column */
    .bba-panel.bba-active {
        flex-direction: column !important;
        min-height: 100vh !important;
        height: auto !important;
    }

    /* Form side: FORCE scroll container on mobile */
    .bba-form-side {
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        padding: 48px 24px 60px !important;
        align-items: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Custom scrollbar for mobile — visible and styled */
    .bba-form-side::-webkit-scrollbar {
        width: 8px !important;
        display: block !important;
    }
    .bba-form-side::-webkit-scrollbar-track {
        background: rgba(211, 104, 139, 0.1) !important;
        border-radius: 4px !important;
    }
    .bba-form-side::-webkit-scrollbar-thumb {
        background: rgba(211, 104, 139, 0.5) !important;
        border-radius: 4px !important;
    }
    .bba-form-side::-webkit-scrollbar-thumb:active {
        background: rgba(211, 104, 139, 0.8) !important;
    }

    /* Firefox */
    .bba-form-side {
        scrollbar-width: auto !important;
        scrollbar-color: rgba(211, 104, 139, 0.5) rgba(211, 104, 139, 0.1) !important;
    }

    .bba-login-panel .bba-form-side {
        align-items: flex-start !important;
    }

    .bba-register-panel .bba-form-side {
        align-items: flex-start !important;
        padding-top: 48px !important;
        padding-bottom: 60px !important;
    }

    .bba-form-inner {
        width: 100% !important;
        max-width: 100% !important;
    }

    .bba-heading { font-size: 30px !important; }
    .bba-brand   { font-size: 28px !important; }
}

@media (max-width: 480px) {
    .bba-form-side { padding: 36px 18px 56px !important; }
    .bba-modal     { padding: 32px 20px 24px !important; }
}