/* css/Views/Account/account-base.css */
/* =============================================================================
   ACCOUNT PAGE - BASE STYLES (FIXED)
   Path: /css/views/account/account-base.css
   
   Purpose: Layout, structure, grid, containers, form elements
   Dependencies: /css/shared/_typography.css (load first)
   
   FIX APPLIED: Added max-width constraint to prevent overflow on mobile
   while keeping the two-column desktop layout as the default.
   ========================================================================== */

/* =============================================================================
   CSS VARIABLES - Layout Tokens Only
   (Typography comes from _typography.css, colors from account-theme.css)
   ========================================================================== */

:root {
    /* Layout tokens */
    --radius-sm: 12px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --ring: 6px;
    --logo-max-w: clamp(140px, 32vw, 260px);
    --logo-inner-pad: clamp(8px, 1.2vw, 14px);
}

/* =============================================================================
   GLOBAL BOX-SIZING (Critical for proper sizing)
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =============================================================================
   MOBILE-ONLY ELEMENTS (Hidden on desktop)
   ========================================================================== */

.welcome-card--mobile {
    display: none; /* Hidden by default, shown on mobile via responsive.css */
}

/* =============================================================================
   FORM SECTION RESETS
   ========================================================================== */

#email-gate,
#login-form,
#register-form,
#forgot-form,
#forgot-confirmation,
#reset-password-form,
#reset-confirmation {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* =============================================================================
   PAGE SHELL
   ========================================================================== */

.account-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    min-height: 100dvh;
    overflow-x: hidden; /* CRITICAL: Prevents horizontal scroll on mobile */
    overflow-y: auto;
    padding-top: calc(env(safe-area-inset-top) + clamp(0.5rem, 1.5vw, 1rem));
    width: 100%;
    max-width: 100vw; /* Prevent overflow */
    /* Brief hide to prevent FOUC – revealed by JS on DOMContentLoaded.
       CSS fallback animation reveals after 1s if JS fails. */
    opacity: 0;
    animation: account-page-reveal 0.4s ease forwards;
    animation-delay: 1s;
}

    .account-page.loaded {
        opacity: 1;
        animation: none;
    }

@keyframes account-page-reveal {
    to { opacity: 1; }
}

/* =============================================================================
   STAGGERED CARD ENTRANCE ANIMATION
   Hero card slides from left, auth card slides from right.
   Triggered when .account-page receives .loaded class (window.load).
   ========================================================================== */

.form-card.hero-card,
.form-card.auth-card {
    opacity: 0;
}

.account-page.loaded .form-card.hero-card {
    animation: cardFromLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.account-page.loaded .form-card.auth-card {
    animation: cardFromRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

@keyframes cardFromLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cardFromRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

    .account-page * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

/* =============================================================================
   GRID LAYOUT
   
   DEFAULT: Two-column layout for desktop (>= 992px implied)
   The responsive.css file overrides this for tablet/mobile with media queries.
   
   KEY FIX: Using clamp() and max() to make columns flexible while maintaining
   the two-column appearance on desktop.
   ========================================================================== */

.auth-container {
    width: 100%;
    max-width: 1200px;
    display: grid;
    /* Two-column default - responsive.css will override for mobile */
    grid-template-columns: minmax(min(480px, 100%), 1fr) minmax(min(380px, 100%), 420px);
    gap: 2rem;
    align-items: stretch;
    margin: 0 auto;
}

/* =============================================================================
   CARDS - Structure Only
   ========================================================================== */

.form-card {
    border-radius: 1.5rem;
    padding: 1.75rem;
    width: 100%;
    max-width: 100%; /* Prevent overflow */
    height: 100%;
    display: flex;
    flex-direction: column;
}

    /* Hero Card (left side) - Structure */
    .form-card.hero-card {
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: cover !important;
        min-height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 3rem;
    }

        .form-card.hero-card .hero {
            position: relative;
            z-index: 1;
            text-align: center;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            max-width: 100%;
        }

/* Hero Header - Glassmorphism Container */
.hero-header {
    border-radius: 1rem;
    padding: 1.75rem 2.25rem;
    max-width: 90%;
    margin: 0 auto;
}

    .hero-header h1 {
        margin-bottom: 0.5rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .hero-header p {
        margin: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

/* =============================================================================
   EVENT ELEMENTS - Structure
   ========================================================================== */

.logo-meta {
    display: none;
    margin-top: 0.25rem;
    text-align: center;
}

.event-chip {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    width: max-content;
    max-width: 100%;
    margin: 0.35rem auto 0.5rem;
}

.chip-icon {
    width: 16px;
    height: 16px;
}

.event-message--form {
    display: none;
}

/* Overlay Card - Structure */
.overlay-card {
    position: relative;
    max-width: 90%;
    width: fit-content;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    text-align: left;
    margin: 2rem auto 0;
}

/* =============================================================================
   LOGO - Structure
   ========================================================================== */

.logo {
    width: min(100%, var(--logo-max-w));
    margin: 0 auto 1rem;
    text-align: center;
    padding: 10px;
    border-radius: var(--radius-sm, 8px);
}

    .logo img {
        max-width: 100%;
        height: auto;
        border-radius: 0;
        display: block;
        margin: 0 auto;
    }

/* =============================================================================
   FORM HEADER - Structure
   ========================================================================== */

.form-header {
    text-align: center;
    margin-bottom: 1.25rem;
}

    .form-header h2 {
        margin-bottom: 0.25rem;
    }

/* =============================================================================
   FORM ELEMENTS - Structure
   ========================================================================== */

.form-group {
    margin-bottom: 0.625rem;
    width: 100%;
}

label {
    display: block;
    margin-bottom: 0.25rem;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    max-width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
}

.password-wrapper {
    position: relative;
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem;
}

.checkbox-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.forgot-link {
    text-decoration: none;
}

    .forgot-link:hover {
        text-decoration: underline;
    }

form {
    width: 100%;
    max-width: 100%;
}

/* =============================================================================
   DIVIDER - Structure
   ========================================================================== */

.divider {
    text-align: center;
    margin: 1rem 0;
    position: relative;
}

    .divider::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
    }

    .divider span {
        position: relative;
        padding: 0 0.875rem;
    }

/* =============================================================================
   FOOTER LINK - Structure
   ========================================================================== */

.footer-link {
    text-align: center;
    margin-top: 0.75rem;
}

    .footer-link a {
        text-decoration: none;
        margin-left: 0.25rem;
    }

        .footer-link a:hover {
            text-decoration: underline;
        }

/* =============================================================================
   SUBMIT BUTTON - Structure
   ========================================================================== */

.btn-submit,
button.btn-submit {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    min-width: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0.75rem !important;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}

    .btn-submit .success-check-inline {
        width: 16px !important;
        height: 16px !important;
        margin-right: 6px !important;
        display: inline-block;
        vertical-align: middle;
        flex-shrink: 0;
    }

    .btn-submit .spinner {
        display: inline-block;
        width: 16px !important;
        height: 16px !important;
        border-radius: 50%;
        margin-right: 6px !important;
        vertical-align: middle;
        flex-shrink: 0;
    }

.reset-success-banner .success-check {
    width: 20px !important;
    height: 20px !important;
}

/* =============================================================================
   FORGOT CONFIRMATION - Structure
   ========================================================================== */

#forgot-confirmation {
    display: none !important;
    width: 100%;
}

    #forgot-confirmation[style*="display: block"] {
        display: block !important;
    }

    #forgot-confirmation .success-message {
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1rem;
        text-align: center;
    }

    #forgot-confirmation .success-icon {
        margin: 0 auto 0.75rem;
        width: 44px;
        height: 44px;
        display: block;
        border-radius: 50%;
        padding: 9px;
    }

    #forgot-confirmation h3 {
        margin-bottom: 0.375rem;
    }

    #forgot-confirmation .success-message p {
        margin-bottom: 0.375rem;
    }

    #forgot-confirmation .email-display {
        padding: 0.625rem 1.25rem;
        border-radius: 8px;
        margin: 0.75rem auto;
        display: inline-block;
        max-width: 100%;
        word-break: break-all;
    }

    #forgot-confirmation .help-text {
        margin-top: 0.75rem;
    }

    #forgot-confirmation .footer-link {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
    }

        #forgot-confirmation .footer-link + .footer-link {
            margin-top: 0.625rem;
            padding-top: 0;
            border-top: none;
        }

/* =============================================================================
   RESET PASSWORD STATE - Structure
   ========================================================================== */

/* Hide social area in reset state (any screen) */
.auth-container.state-reset #social-row,
.auth-container.state-reset #social-divider {
    display: none !important;
}

#reset-password-form .info-message {
    border-radius: 10px;
    padding: 0.75rem 0.875rem;
    margin: -0.25rem 0 0.75rem 0;
}

/* =============================================================================
   FORM LOCK OVERLAY - Structure
   Used by account-ui.js lockForm() to prevent interaction during submission
   ========================================================================== */

/**
 * Overlay container - covers the entire form card
 * Prevents pointer events from reaching form elements
 */
.form-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    border-radius: inherit;
}

/**
 * Form card locked state - needs position context for overlay
 */
.form-card.is-locked,
.auth-card.is-locked {
    position: relative;
    pointer-events: none;
}

    /**
     * Re-enable pointer events on the overlay itself
     * so it can block clicks
     */
    .form-card.is-locked .form-lock-overlay,
    .auth-card.is-locked .form-lock-overlay {
        pointer-events: auto;
    }

    /**
 * Locked form inputs - structural disable
 */
    .form-card.is-locked input,
    .form-card.is-locked button,
    .form-card.is-locked select,
    .form-card.is-locked textarea,
    .form-card.is-locked a,
    .auth-card.is-locked input,
    .auth-card.is-locked button,
    .auth-card.is-locked select,
    .auth-card.is-locked textarea,
    .auth-card.is-locked a {
        pointer-events: none;
        user-select: none;
    }

/* =============================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes buttonSpinner {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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