/**
 * Auth modals — mobile / tablet enhancements.
 * Scoped to #loginModal and #signupModal only (loads last on landing page).
 */

/* Above landing nav (1050) and chat widget */
#loginModal.modal.auth-modal,
#signupModal.modal.auth-modal {
    z-index: 1080 !important;
    pointer-events: none;
}

#loginModal.modal.auth-modal.show,
#signupModal.modal.auth-modal.show {
    display: block !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

body.modal-open #loginModal.modal.show,
body.modal-open #signupModal.modal.show {
    display: block !important;
}

body.modal-open .modal-backdrop.show {
    z-index: 1075 !important;
}

/* Defeat 3D fade leaving dialog at opacity:0 on any device */
#loginModal.modal.auth-modal.show .auth-modal-dialog,
#signupModal.modal.auth-modal.show .auth-modal-dialog,
#loginModal.modal.auth-modal.show .modal-content,
#signupModal.modal.auth-modal.show .modal-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

#loginModal.modal.auth-modal.show .auth-lux-field,
#signupModal.modal.auth-modal.show .auth-lux-field,
#loginModal.modal.auth-modal.show .auth-modal-grid,
#signupModal.modal.auth-modal.show .auth-modal-grid,
#loginModal.modal.auth-modal.show .auth-submit,
#signupModal.modal.auth-modal.show .auth-submit,
#loginModal.modal.auth-modal.show .auth-modal-switch,
#signupModal.modal.auth-modal.show .auth-modal-switch,
#loginModal.modal.auth-modal.show .auth-form-alert,
#signupModal.modal.auth-modal.show .auth-form-alert,
#loginModal.modal.auth-modal.show .auth-modal-header-inner,
#signupModal.modal.auth-modal.show .auth-modal-header-inner,
#loginModal.modal.auth-modal.show .auth-modal-body,
#signupModal.modal.auth-modal.show .auth-modal-body,
#loginModal.modal.auth-modal.show .auth-mobile-footer,
#signupModal.modal.auth-modal.show .auth-mobile-footer {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    pointer-events: auto !important;
}

/* Reliable tap targets for auth triggers on touch devices */
a[data-auth-modal],
button[data-auth-modal],
.auth-switch-modal {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    a[data-auth-modal].chakula-nav__link,
    a[data-auth-modal].hero-cta-login,
    .hero-cta-signup[data-auth-modal] {
        min-height: var(--touch-min, 44px);
    }
}

@media (max-width: 767.98px) {
    #loginModal.show .auth-modal-dialog,
    #signupModal.show .auth-modal-dialog {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    #loginModal.show .auth-lux-field,
    #signupModal.show .auth-lux-field,
    #loginModal.show .auth-modal-grid,
    #signupModal.show .auth-modal-grid,
    #loginModal.show .auth-submit,
    #signupModal.show .auth-submit,
    #loginModal.show .auth-modal-switch,
    #signupModal.show .auth-modal-switch,
    #loginModal.show .auth-form-alert,
    #signupModal.show .auth-form-alert,
    #loginModal.show .auth-modal-header-inner,
    #signupModal.show .auth-modal-header-inner,
    #loginModal.show .auth-modal-body,
    #signupModal.show .auth-modal-body {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
    }
}

@media (max-width: 767.98px) {
    /* Centered luxury card on phones/tablets — same look as desktop reference */
    #loginModal.modal.auth-luxury,
    #signupModal.modal.auth-luxury {
        padding:
            max(0.65rem, env(safe-area-inset-top, 0px))
            max(0.65rem, env(safe-area-inset-right, 0px))
            max(0.65rem, env(safe-area-inset-bottom, 0px))
            max(0.65rem, env(safe-area-inset-left, 0px)) !important;
    }

    #loginModal .modal-dialog,
    #signupModal .modal-dialog {
        width: 100% !important;
        max-width: min(340px, calc(100vw - 1.25rem)) !important;
        margin: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 1.25rem) !important;
        align-items: center !important;
        transform: translateY(calc(-1 * var(--auth-kb-offset, 0px) * 0.35)) !important;
        perspective: none !important;
    }

    #loginModal .auth-modal-dialog--login {
        max-width: min(320px, calc(100vw - 1.25rem)) !important;
    }

    #loginModal .modal-content,
    #signupModal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 1.25rem - var(--auth-kb-offset, 0px)) !important;
        border-radius: 20px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        transform: none !important;
    }

    #loginModal .modal-content > .modal-header,
    #signupModal .modal-content > .modal-header {
        flex-shrink: 0 !important;
        border-radius: 18px 18px 0 0 !important;
    }

    #loginModal .modal-content > form,
    #signupModal .modal-content > form {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Vertical centered header — logo, title, subtitle */
    #loginModal .modal-header.auth-modal-header--brand,
    #signupModal .modal-header.auth-modal-header--brand {
        display: block !important;
        text-align: center !important;
        padding: 1rem 1rem 0.85rem !important;
        border-bottom: none !important;
    }

    #loginModal .auth-modal-header-inner,
    #signupModal .auth-modal-header-inner {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.5rem !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    #loginModal .auth-modal-header-text,
    #signupModal .auth-modal-header-text {
        text-align: center !important;
        width: 100% !important;
    }

    #loginModal .auth-modal-header--brand .modal-title,
    #signupModal .auth-modal-header--brand .modal-title {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }

    #loginModal .auth-modal-subtitle,
    #signupModal .auth-modal-subtitle {
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    #loginModal .auth-modal-close,
    #signupModal .auth-modal-close {
        top: 0.65rem !important;
        right: 0.65rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        padding: 0 !important;
        opacity: 0.92 !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 50% !important;
        touch-action: manipulation;
    }

    #loginModal #loginForm,
    #signupModal #signupForm {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #loginModal .auth-modal-body,
    #signupModal .auth-modal-body {
        flex: 1 1 auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        max-height: none !important;
        padding: 0.5rem 0.75rem 0.35rem !important;
    }

    /* Keep glass form panel + gold frame */
    #loginModal .auth-lux-glass-panel,
    #signupModal .auth-lux-glass-panel {
        margin: 0 0.15rem !important;
        padding: 0.55rem 0.5rem 0.65rem !important;
        border-radius: 14px !important;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.88) 100%
        ) !important;
        box-shadow:
            0 0 0 1px rgba(212, 175, 55, 0.35) inset,
            0 8px 28px rgba(13, 40, 24, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    }

    #loginModal .auth-lux-glass-panel::before,
    #signupModal .auth-lux-glass-panel::before {
        display: block !important;
    }

    #loginModal .form-label,
    #signupModal .form-label {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: #1b4332 !important;
        margin-bottom: 0.35rem !important;
    }

    #loginModal .input-group-auth,
    #signupModal .input-group-auth {
        border-radius: 12px !important;
    }

    #loginModal .input-group-auth .form-control,
    #loginModal .input-group-auth .input-group-text,
    #signupModal .input-group-auth .form-control,
    #signupModal .input-group-auth .input-group-text,
    #signupModal .auth-modal-grid .form-control {
        min-height: 2.85rem !important;
        font-size: 16px !important;
    }

    #loginModal .input-group-auth .input-group-text,
    #signupModal .input-group-auth .input-group-text {
        background: linear-gradient(180deg, #f4faf6 0%, #e8f2eb 100%) !important;
        border-color: rgba(212, 175, 55, 0.4) !important;
        color: #2d6a4f !important;
    }

    #loginModal .input-group-auth .form-control,
    #signupModal .input-group-auth .form-control,
    #signupModal .auth-modal-grid .form-control {
        background: #ffffff !important;
        color: #0f2a1f !important;
        border-color: rgba(212, 175, 55, 0.35) !important;
    }

    #loginModal .auth-mobile-footer,
    #signupModal .auth-mobile-footer {
        flex-shrink: 0 !important;
        padding: 0.45rem 0.85rem 0.85rem !important;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(247, 251, 248, 0.98) 100%
        ) !important;
        border-top: 1px solid rgba(212, 175, 55, 0.22) !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    }

    #loginModal .auth-submit,
    #signupModal .auth-submit {
        min-height: 2.95rem !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        border-radius: 14px !important;
        touch-action: manipulation;
    }

    #loginModal .auth-mobile-footer .auth-modal-switch,
    #signupModal .auth-mobile-footer .auth-modal-switch {
        margin-top: 0.75rem !important;
        margin-bottom: 0 !important;
        font-size: 0.8125rem !important;
        color: #243329 !important;
    }

    #loginModal .auth-link-gold,
    #signupModal .auth-link-gold {
        font-weight: 700 !important;
        text-decoration: underline !important;
        text-underline-offset: 2px !important;
    }

    /* Lighter FX on small screens — keep gold rim + aurora */
    #loginModal .auth-lux-particles,
    #loginModal .auth-modal-bubbles,
    #signupModal .auth-lux-particles,
    #signupModal .auth-modal-bubbles {
        display: none !important;
    }

    #loginModal .auth-luxury-card.auth-modal-3d--live,
    #signupModal .auth-luxury-card.auth-modal-3d--live {
        animation: none !important;
    }

    #loginModal .auth-modal-grid,
    #signupModal .auth-modal-grid {
        grid-template-columns: 1fr !important;
    }

    #loginModal .password-toggle-wrap,
    #signupModal .password-toggle-wrap {
        position: relative !important;
        width: 100% !important;
    }

    #loginModal .password-toggle-wrap .form-control,
    #signupModal .password-toggle-wrap .form-control {
        padding-right: 3.25rem !important;
    }

    #loginModal .password-toggle-btn,
    #signupModal .password-toggle-btn {
        position: absolute !important;
        right: 0.25rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 6 !important;
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        touch-action: manipulation;
    }

    #signupModal .auth-optional-block {
        border: 1px solid rgba(27, 67, 50, 0.14);
        border-radius: 12px;
        background: rgba(45, 106, 79, 0.04);
        padding: 0.35rem 0.65rem;
    }

    #signupModal .auth-optional-summary {
        font-size: 0.8125rem;
        font-weight: 700;
        color: #1b4332;
        cursor: pointer;
        list-style: none;
        min-height: 2.5rem;
        touch-action: manipulation;
    }

    #signupModal .auth-optional-summary::-webkit-details-marker {
        display: none;
    }
}

/* Small phones — keep logo visible, match reference proportions */
@media (max-width: 380px) {
    #loginModal .auth-modal-header--brand .modal-title,
    #signupModal .auth-modal-header--brand .modal-title {
        font-size: 1rem !important;
    }

    #loginModal .auth-lux-logo-stage,
    #signupModal .auth-lux-logo-stage {
        width: 64px !important;
        height: 64px !important;
        --auth-logo-outer: 64px;
    }

    #loginModal .auth-logo-showcase,
    #signupModal .auth-logo-showcase {
        --auth-logo-size: 52px !important;
        --auth-logo-outer: 64px !important;
    }
}

/* Tablet / small laptop — centered card, still touch-friendly */
@media (min-width: 768px) and (max-width: 991.98px) {
    #loginModal .modal-dialog,
    #signupModal .modal-dialog {
        max-width: min(340px, calc(100vw - 2rem)) !important;
        margin: 1rem auto !important;
    }

    #loginModal .auth-modal-dialog--login {
        max-width: min(320px, calc(100vw - 2rem)) !important;
    }

    #loginModal .input-group-auth .form-control,
    #loginModal .input-group-auth .input-group-text,
    #signupModal .input-group-auth .form-control,
    #signupModal .input-group-auth .input-group-text,
    #signupModal .auth-modal-grid .form-control {
        min-height: 2.85rem !important;
        font-size: 16px !important;
    }
}

@media (min-width: 768px) {
    #signupModal .auth-optional-block {
        border: 0;
        background: transparent;
        padding: 0;
    }

    #signupModal .auth-optional-summary {
        display: none;
    }

    #signupModal .auth-optional-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
    }
}

/* Desktop/tablet: footer wrapper transparent — submit + link flow after form body */
@media (min-width: 768px) {
    #loginModal .auth-mobile-footer,
    #signupModal .auth-mobile-footer {
        display: contents;
    }
}

/* Dark mode — mobile auth surfaces */
@media (max-width: 767.98px) {
    html[data-theme="dark"] #loginModal .form-label,
    html[data-theme="dark"] #signupModal .form-label {
        color: var(--text-primary, #e8ede9) !important;
    }

    html[data-theme="dark"] #loginModal .auth-mobile-footer,
    html[data-theme="dark"] #signupModal .auth-mobile-footer {
        background: var(--surface-card, #1e2420) !important;
        border-top-color: var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;
    }

    html[data-theme="dark"] #signupModal .auth-optional-block {
        background: rgba(45, 106, 79, 0.12);
        border-color: var(--border-subtle, rgba(255, 255, 255, 0.1));
    }

    html[data-theme="dark"] #signupModal .auth-optional-summary {
        color: var(--text-primary, #e8ede9);
    }

    html[data-theme="dark"] #loginModal .auth-modal-switch,
    html[data-theme="dark"] #signupModal .auth-modal-switch {
        color: var(--text-secondary, #b0bdb5) !important;
    }

    html[data-theme="dark"] #loginModal .auth-link-gold,
    html[data-theme="dark"] #signupModal .auth-link-gold {
        color: #8fd4a8 !important;
    }

    html[data-theme="dark"] #loginModal .input-group-auth .form-control,
    html[data-theme="dark"] #signupModal .input-group-auth .form-control,
    html[data-theme="dark"] #signupModal .auth-modal-grid .form-control {
        background: var(--surface-muted, #252b27) !important;
        color: var(--text-primary, #e8ede9) !important;
        -webkit-text-fill-color: var(--text-primary, #e8ede9) !important;
        border-color: var(--border-default, rgba(255, 255, 255, 0.12)) !important;
    }

    html[data-theme="dark"] #loginModal .input-group-auth .input-group-text,
    html[data-theme="dark"] #signupModal .input-group-auth .input-group-text {
        background: var(--surface-card, #1e2420) !important;
        color: #8fd4a8 !important;
        border-color: var(--border-default, rgba(255, 255, 255, 0.12)) !important;
    }
}

/* Short landscape only — compact header, keep card centered */
@media (max-width: 896px) and (max-height: 460px) and (orientation: landscape) {
    #loginModal .auth-lux-brand-stack,
    #signupModal .auth-lux-brand-stack {
        display: none !important;
    }

    #loginModal .auth-modal-subtitle,
    #signupModal .auth-modal-subtitle {
        display: none !important;
    }

    #loginModal .auth-modal-header--brand,
    #signupModal .auth-modal-header--brand {
        padding: max(0.45rem, env(safe-area-inset-top, 0px)) 0.85rem 0.4rem !important;
    }

    #loginModal .auth-modal-header-text,
    #signupModal .auth-modal-header-text {
        margin-top: 0 !important;
    }

    #loginModal .auth-modal-header--brand .modal-title,
    #signupModal .auth-modal-header--brand .modal-title {
        font-size: 0.95rem !important;
    }

    #loginModal .auth-lux-field,
    #signupModal .auth-lux-field {
        margin-bottom: 0.55rem !important;
    }

    #loginModal .input-group-auth .form-control,
    #loginModal .input-group-auth .input-group-text,
    #signupModal .input-group-auth .form-control,
    #signupModal .input-group-auth .input-group-text,
    #signupModal .auth-modal-grid .form-control {
        min-height: 2.65rem !important;
    }
}

body.auth-modal-open .chakula-ai-wrapper {
    pointer-events: none;
}

/* Remove old tablet-only block — covered by 768+768 rules above */
@media (min-width: 576px) and (max-width: 767.98px) {
    #loginModal .auth-modal-grid,
    #signupModal .auth-modal-grid {
        grid-template-columns: 1fr !important;
    }
}