/* css/Views/Account/account-theme.css */
/* =============================================================================
   ACCOUNT PAGE - THEME STYLES
   Path: /css/views/account/account-theme.css
   
   Purpose: Colors, shadows, visual styling, component appearance, states
   Dependencies: 
   - /css/shared/_typography.css (load first)
   - /css/views/account/account-base.css (load second)
   
   DO NOT include:
   - Media queries (see account-responsive.css)
   - Layout/structure (see account-base.css)
   ========================================================================== */

/* =============================================================================
   CSS VARIABLES - Theme Colors
   (Will be overridden by ThemeManager if present)
   ========================================================================== */

:root {
    /* Theme colors (overridden at runtime by Theme.apply() with event colors) */
    --primary: #667eea;
    --secondary: #764ba2;
    --neutral: #f8f9fa;
    --primary-text: #ffffff;
    --secondary-text: #ffffff;
    --neutral-text: #212529;
    --background: #ffffff;
    --text: #212529;
    --text-muted: #6b7280;
}

/* =============================================================================
   PAGE SHELL - Theme
   ========================================================================== */

.account-page {
    background: #f5f5f5;
    font-family: var(--font-family);
    font-size: var(--font-base);
    line-height: var(--leading-relaxed);
    color: var(--text);
}

/* =============================================================================
   CARDS - Theme
   ========================================================================== */

.form-card {
    background-color: var(--background);
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    font-family: var(--font-family);
}

    /* Hero Card - Theme */
    .form-card.hero-card {
        color: #fff;
        background-color: var(--primary);
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }

        .form-card.hero-card[style*="background-image"]::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.25) 100%);
            border-radius: inherit;
        }

        .form-card.hero-card:not([style*="background-image"]),
        .form-card.hero-card.no-image {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        }

            .form-card.hero-card:not([style*="background-image"])::before,
            .form-card.hero-card.no-image::before {
                display: none;
            }

/* Hero Header - Glassmorphism Theme */
.hero-header {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.form-card.hero-card .hero-header h1,
.form-card.hero-card .hero-header p,
.form-card.hero-card .overlay-text {
    color: #fff !important;
    font-family: var(--font-family);
}

.hero-header h1 {
    font-size: var(--font-2xl);
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: var(--leading-tight);
}

.hero-header p {
    font-size: var(--font-base);
    line-height: var(--leading-relaxed);
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}

/* Gradient background - subtle glassmorphism */
.form-card.hero-card:not([style*="background-image"]) .hero-header,
.form-card.hero-card.no-image .hero-header {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* =============================================================================
   EVENT ELEMENTS - Theme
   ========================================================================== */

.logo-title {
    font-family: var(--font-family);
    font-weight: 700;
    color: var(--text);
    font-size: var(--font-base);
    line-height: var(--leading-snug);
}

.event-chip {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: var(--text-muted);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
}

/* Overlay Card - Theme */
.overlay-card {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.form-card.hero-card:not([style*="background-image"]) .overlay-card,
.form-card.hero-card.no-image .overlay-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.overlay-text {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: var(--font-base);
    line-height: var(--leading-relaxed);
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

    .overlay-text strong,
    .overlay-text em {
        font-weight: 700;
        color: #fff;
    }

/* =============================================================================
   LOGO - Theme
   ========================================================================== */

.logo {
    background: var(--background);
    border: 2px solid var(--neutral);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* =============================================================================
   FORM HEADER - Theme
   ========================================================================== */

.form-header h2 {
    font-family: var(--font-family);
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--text);
    line-height: var(--leading-tight);
}

.form-header p {
    font-family: var(--font-family);
    color: var(--text-muted);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
}

/* =============================================================================
   FORM ELEMENTS - Theme
   ========================================================================== */

label {
    color: var(--text-muted);
    font-family: var(--font-family);
    font-size: var(--font-sm);
    font-weight: 500;
    line-height: var(--leading-normal);
}

input[type="text"],
input[type="email"],
input[type="password"] {
    font-family: var(--font-family);
    font-size: var(--font-base);
    line-height: var(--leading-normal);
    background: var(--background);
    border: 1px solid #d1d5db;
    color: var(--text);
    transition: border-color 0.2s;
}

input::placeholder {
    font-family: var(--font-family);
    color: #9ca3af;
    opacity: 0.7;
}

input:focus::placeholder {
    opacity: 0.4;
}

input:focus {
    outline: none;
    border-color: var(--primary-accessible);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.password-toggle {
    color: var(--text-muted);
}

.checkbox-group {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
}

.forgot-link {
    color: var(--primary-accessible);
    font-family: var(--font-family);
    font-size: var(--font-sm);
    font-weight: 600;
}

/* =============================================================================
   DIVIDER - Theme
   ========================================================================== */

.divider::before {
    background: #e5e7eb;
}

.divider span {
    background: var(--background);
    color: var(--text-muted);
    font-family: var(--font-family);
    font-size: var(--font-xs);
    line-height: var(--leading-normal);
}

/* =============================================================================
   CONFIG ERROR
   ========================================================================== */

.config-error {
    text-align: center;
    padding: 2rem;
}

    .config-error h2 {
        font-family: var(--font-family);
        font-size: var(--font-xl);
        font-weight: 700;
        color: var(--text);
        margin-bottom: 0.5rem;
    }

    .config-error p {
        font-family: var(--font-family);
        color: var(--text-muted);
        font-size: var(--font-sm);
    }

/* =============================================================================
   FOOTER LINK - Theme
   ========================================================================== */

.footer-link {
    color: var(--text-muted);
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
}

    .footer-link a {
        color: var(--primary-accessible);
        font-weight: 600;
    }

.footer-link--secondary {
    margin-top: 0.625rem;
    padding-top: 0;
    border-top: none;
}

.footer-link--spaced {
    margin-top: 1.5rem;
}

/* =============================================================================
   SUBMIT BUTTON - Theme
   ========================================================================== */

.btn-submit,
button.btn-submit {
    color: var(--primary-text, #ffffff) !important;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: var(--font-base);
    line-height: var(--leading-normal);
    transition: background-color 0.2s ease, transform 0.2s ease;
    background: var(--primary);
}

    .btn-submit:hover {
        background: var(--secondary);
        color: var(--secondary-text, #ffffff) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

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

    .btn-submit .spinner {
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #fff;
        animation: buttonSpinner 0.6s linear infinite;
    }

.reset-success-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 12px;
}

    .reset-success-banner .success-check {
        width: 20px;
        height: 20px;
        color: #059669;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .reset-success-banner .success-text {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

        .reset-success-banner .success-text strong {
            font-family: var(--font-family);
            font-size: var(--font-sm);
            font-weight: 600;
            color: #065f46;
        }

        .reset-success-banner .success-text span {
            font-family: var(--font-family);
            font-size: var(--font-xs);
            color: #047857;
        }

/* =============================================================================
   VALIDATION MESSAGES - Theme
   ========================================================================== */

.field-validation-error,
span[data-valmsg-for] {
    display: block;
    min-height: 1rem;
    color: #ef4444;
    font-family: var(--font-family);
    font-size: var(--font-xs);
    line-height: var(--leading-normal);
    margin-top: 0.25rem;
    transition: opacity 0.2s ease;
}

    .field-validation-error:empty,
    span[data-valmsg-for]:empty {
        min-height: 0.5rem;
        visibility: hidden;
    }

    .field-validation-error:not(:empty),
    span[data-valmsg-for]:not(:empty) {
        visibility: visible;
        font-weight: 500;
    }


.validation-summary-errors {
    min-height: 0;
    transition: all 0.2s ease;
    color: #ef4444;
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
    margin-bottom: 0.75rem;
}

    .validation-summary-errors:not(:empty) {
        min-height: 1.5rem;
        padding: 0.5rem 0.75rem;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: var(--radius-sm);
    }

    .validation-summary-errors:empty,
    .validation-summary-valid {
        display: none !important;
    }

    .validation-summary-errors ul {
        margin: 0;
        padding-left: 1rem;
        list-style-type: disc;
    }

    .validation-summary-errors li {
        color: #dc2626;
        margin: 0.125rem 0;
    }

/* Error state for inputs */
input.input-validation-error,
input[aria-invalid="true"] {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

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

/* =============================================================================
   FORGOT CONFIRMATION - Theme
   ========================================================================== */

#forgot-confirmation .success-message {
    background: #fff !important;
    border: 1px solid #e5e7eb;
}

#forgot-confirmation .success-icon {
    color: #16a34a;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

#forgot-confirmation h3 {
    font-family: var(--font-family);
    font-size: var(--font-lg);
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--text);
}

#forgot-confirmation .success-message p {
    font-family: var(--font-family);
    color: var(--text-muted);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
}

#forgot-confirmation .email-display {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--text);
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

#forgot-confirmation .help-text {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}

    #forgot-confirmation .help-text strong {
        font-weight: 600;
        color: var(--text);
    }

#forgot-confirmation .footer-link {
    border-top: 1px solid #e5e7eb;
}

/* =============================================================================
   RESET PASSWORD - Theme
   ========================================================================== */

#reset-password-form .info-message {
    background: #eaf3ff;
    border: 1px solid #cfe2ff;
    color: #1e3a8a;
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
}

/* =============================================================================
   SUCCESS MESSAGES - Theme
   ========================================================================== */

.success-message {
    text-align: center;
    padding: 1.5rem 1rem;
}

.success-icon {
    color: #16a34a;
    margin: 0 auto 1rem;
    width: 56px;
    height: 56px;
    display: block;
    padding: 10px;
    background: #f3f4f6;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
}

.success-message h3 {
    font-family: var(--font-family);
    font-size: var(--font-lg);
    line-height: var(--leading-tight);
    margin-bottom: 0.5rem;
    color: var(--text);
    font-weight: 700;
}

.success-message .success-main-text {
    font-family: var(--font-family);
    color: var(--text);
    margin-bottom: 0.375rem;
    font-size: var(--font-base);
    line-height: var(--leading-normal);
    font-weight: 500;
}

.success-message .success-sub-text {
    font-family: var(--font-family);
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
}

.success-btn {
    background: var(--primary);
    color: var(--primary-text, #ffffff) !important;
    padding: 0.75rem 1.75rem;
    border-radius: 8px;
    border: none;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--font-base);
    line-height: var(--leading-normal);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .success-btn:hover {
        background: var(--secondary);
        color: var(--secondary-text, #ffffff) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.email-display {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
    color: var(--text);
    background: #f9fafb;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    margin: 0.75rem auto;
    display: inline-block;
    border: 1px solid #e5e7eb;
}

.help-text {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
    color: var(--text-muted);
    margin-top: 0.75rem;
}

/* =============================================================================
   INFO MESSAGES - Theme
   ========================================================================== */

.info-message {
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

    .info-message p {
        font-family: var(--font-family);
        color: #075985;
        margin: 0;
        font-size: var(--font-sm);
        line-height: var(--leading-normal);
    }

    .info-message strong {
        font-weight: 600;
        color: var(--text);
    }

/* =============================================================================
   PASSWORD REQUIREMENTS - Theme
   ========================================================================== */

.password-requirements {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
    /* Animation */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.3s ease, margin 0.2s ease, padding 0.2s ease;
    margin-top: 0;
    padding: 0 0.75rem;
}

    .password-requirements.visible {
        opacity: 1;
        max-height: 200px;
        margin-top: 0.5rem;
        padding: 0.75rem;
    }

.form-group:has(input:not(:placeholder-shown)) .password-requirements {
    opacity: 1;
    max-height: 200px;
    margin-top: 0.5rem;
    padding: 0.75rem;
}

.requirements-header {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
    color: #475569;
    margin-bottom: 0.5rem;
}

.requirements-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem 1rem;
}

.requirement-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
    color: #64748b;
    transition: color 0.15s ease;
}

.requirement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .requirement-icon .icon-checked {
        display: none;
        color: #22c55e;
    }

    .requirement-icon .icon-unchecked {
        display: block;
        color: #cbd5e1;
    }

.requirement-item.passed {
    color: #22c55e;
}

    .requirement-item.passed .icon-checked {
        display: block;
    }

    .requirement-item.passed .icon-unchecked {
        display: none;
    }

.requirement-item.failed {
    color: #ef4444;
}

    .requirement-item.failed .icon-unchecked {
        color: #fca5a5;
    }

.requirement-label {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--leading-snug);
}

/* Compact variant */
.password-requirements.compact {
    padding: 0.5rem 0.625rem;
}

    .password-requirements.compact .requirements-header {
        font-size: var(--font-xs);
        margin-bottom: 0.375rem;
    }

    .password-requirements.compact .requirements-list {
        font-size: var(--font-xs);
        gap: 0.25rem 0.75rem;
    }

/* =============================================================================
   PASSWORD MATCH INDICATOR - Theme
   Shown below the confirm password field during typing.
   Mirrors the requirement-item visual style for consistency.
   ========================================================================== */

.password-match-indicator {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
    /* Hidden until the user starts typing in confirm */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.2s ease;
}

    .password-match-indicator.visible {
        opacity: 1;
        max-height: 2rem;
    }

/* Icon container - same flex setup as .requirement-icon */
.match-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    /* Both icons hidden by default */
    .match-icon .icon-match,
    .match-icon .icon-mismatch {
        display: none;
    }

/* Matched state - green check (same palette as .requirement-item.passed) */
.password-match-indicator.matched {
    color: #22c55e;
}

    .password-match-indicator.matched .icon-match {
        display: block;
        color: #22c55e;
    }

/* Mismatched state - red X (same palette as .requirement-item.failed) */
.password-match-indicator.mismatched {
    color: #ef4444;
}

    .password-match-indicator.mismatched .icon-mismatch {
        display: block;
        color: #ef4444;
    }

.match-label {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--leading-snug);
}

/* =============================================================================
   SOCIAL AUTH BUTTONS - Theme (Desktop Default)
   ========================================================================== */

.social-row {
    display: grid;
    gap: 0.625rem;
    grid-template-columns: 1fr;
    margin-top: 1rem;
    max-width: 100%;
}

.social-form {
    display: contents;
}

.social-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: var(--background);
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    min-height: 44px;
}

    .social-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        background: #f9fafb;
    }

.social-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* =============================================================================
   SOCIAL BUTTON VARIANTS - Theme
   CRITICAL: Must set both background AND icon colors for visibility
   ========================================================================== */

/* Apple button - white icon on black background */
.social-apple {
    background: #000;
    color: #fff;
    border-color: #000;
}

    .social-apple .social-icon {
        color: #fff;
    }

        .social-apple svg,
        .social-apple .social-icon svg,
        .social-apple svg path {
            fill: #fff;
        }

    .social-apple:hover {
        background: #1a1a1a;
        border-color: #1a1a1a;
    }

/* Google button - colorful icon on white background */
.social-google {
    background: var(--background);
    color: #3c4043;
    border-color: #dadce0;
}

    .social-google:hover {
        background: #f9fafb;
        border-color: #4285f4;
    }

/* Microsoft button - colorful icon on white background */
.social-microsoft {
    background: var(--background);
    color: #5e5e5e;
    border-color: #8c8c8c;
}

    .social-microsoft:hover {
        background: #f9fafb;
        border-color: #5e5e5e;
    }

/* Facebook button - white icon on blue background */
.social-facebook {
    background: #1877f2;
    color: #fff;
    border-color: #1877f2;
}

    .social-facebook .social-icon {
        color: #fff;
    }

        .social-facebook svg,
        .social-facebook .social-icon svg,
        .social-facebook svg path {
            fill: #fff;
        }

    .social-facebook:hover {
        background: #166fe5;
        border-color: #166fe5;
    }

/* Spinner for social buttons */
.social-btn .spinner {
    display: inline-block;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: buttonSpinner 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* White spinner for dark buttons */
.social-apple .spinner,
.social-facebook .spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

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

/**
 * Overlay visual appearance
 * Semi-transparent white with subtle blur
 */
.form-lock-overlay {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.2s ease;
    opacity: 1;
}

/**
 * Locked form card - cursor feedback
 */
.form-card.is-locked,
.auth-card.is-locked {
    cursor: wait;
}

    /**
 * Locked inputs - reduced opacity for disabled appearance
 */
    .form-card.is-locked input,
    .form-card.is-locked button:not(.btn-submit),
    .form-card.is-locked select,
    .form-card.is-locked textarea,
    .auth-card.is-locked input,
    .auth-card.is-locked button:not(.btn-submit),
    .auth-card.is-locked select,
    .auth-card.is-locked textarea {
        opacity: 0.6;
    }

    /**
 * Submit button remains visible during loading
 * (it shows the spinner via setButtonState)
 */
    .form-card.is-locked .btn-submit,
    .auth-card.is-locked .btn-submit {
        opacity: 1;
        position: relative;
        z-index: 101;
    }

    /**
 * Social buttons during lock
 */
    .form-card.is-locked .social-btn,
    .auth-card.is-locked .social-btn {
        opacity: 0.5;
    }

    /**
 * Links during lock - muted appearance
 */
    .form-card.is-locked a,
    .auth-card.is-locked a {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* =============================================================================
   TURNSTILE WIDGET - Cloudflare CAPTCHA
   ========================================================================== */

.turnstile-container {
    margin: 1rem 0 0.5rem;
    display: flex;
    justify-content: center;
}

#turnstile-widget {
    margin: 0 auto;
}

    #turnstile-widget iframe {
        max-width: 100%;
    }

/* AB#230: the widget stays visible in every state, including reset-password. It used to be
   display:none under .state-reset, but the reset form still posts cf-turnstile-response and
   AccountController.ResetPassword still requires a valid token - so the check was mandatory and
   invisible. A challenge that wanted a click had nothing to click, and since AB#212 the submit
   button is held disabled until a token arrives, with no widget on screen to explain the wait.
   Whatever the state, people should be able to see whether the check needs them or already passed. */

/* -----------------------------------------------------------------------------
   Turnstile Error State
   Applied via JS when validation fails
   -------------------------------------------------------------------------- */

.turnstile-container.turnstile-error {
    border-radius: 8px;
    box-shadow: 0 0 0 2px #ef4444, 0 0 12px rgba(239, 68, 68, 0.4);
    animation: turnstile-shake 0.5s ease-in-out;
}

@keyframes turnstile-shake {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-5px);
    }

    40%, 80% {
        transform: translateX(5px);
    }
}

/* =============================================================================
   ACCOUNT FOOTER - Rally4One Platform Branding
   
   Structure: Single line with all elements inline
   Powered by [Logo] | Privacy | Terms | Questions? Contact Support
   ========================================================================== */

.account-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.rally4one-branding {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: var(--font-family);
    font-size: var(--font-xs);
    line-height: var(--leading-normal);
    color: #64748b;
}

.powered-by-text {
    font-family: var(--font-family);
    font-size: var(--font-xs);
    line-height: var(--leading-normal);
    color: #64748b;
    white-space: nowrap;
}

.rally4one-logo {
    height: 18px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    vertical-align: middle;
}

.rally4one-name {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    font-weight: 600;
    line-height: var(--leading-normal);
    color: #0f172a;
}

.rally4one-divider {
    color: #cbd5e1;
    font-family: var(--font-family);
    font-size: var(--font-xs);
    line-height: 1;
    user-select: none;
}

.rally4one-link {
    font-family: var(--font-family);
    font-size: var(--font-xs);
    line-height: var(--leading-normal);
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}

    .rally4one-link:hover {
        color: var(--primary-accessible);
        text-decoration: underline;
    }

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

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-2px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(2px);
    }
}

/* =============================================================================
   DARK MODE
   ========================================================================== */

/* ── Dark Mode ── */
[data-bs-theme="dark"] {
    --neutral: var(--bg-secondary);
    --background: var(--bg-card);
    --text: #e9ecef;
    --text-muted: #9ca3af;
}

[data-bs-theme="dark"] .account-page {
    background: var(--bg);
}

/* Cards */
[data-bs-theme="dark"] .form-card {
    background: var(--bg-card);
    border-color: var(--border);
}

/* Logo — light pill so any logo stays visible on dark backgrounds */
[data-bs-theme="dark"] .logo {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Event chip */
[data-bs-theme="dark"] .event-chip {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text-muted);
}

/* Form inputs */
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"] {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text);
}

[data-bs-theme="dark"] input::placeholder {
    color: var(--text-muted);
}

[data-bs-theme="dark"] input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* Divider */
[data-bs-theme="dark"] .divider::before {
    background: var(--border);
}

[data-bs-theme="dark"] .divider span {
    background: var(--bg-card);
}

/* Social buttons */
[data-bs-theme="dark"] .social-btn {
    border-color: var(--border);
    background: var(--bg-card);
    color: var(--text);
}

[data-bs-theme="dark"] .social-btn:hover {
    background: var(--bg-tertiary);
}

[data-bs-theme="dark"] .social-google {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border);
}

[data-bs-theme="dark"] .social-google:hover {
    background: var(--bg-tertiary);
}

[data-bs-theme="dark"] .social-microsoft {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border);
}

[data-bs-theme="dark"] .social-microsoft:hover {
    background: var(--bg-tertiary);
}

/* Forgot confirmation */
[data-bs-theme="dark"] #forgot-confirmation .success-message {
    background: var(--bg-card) !important;
    border-color: var(--border);
}

[data-bs-theme="dark"] #forgot-confirmation .success-icon {
    background: var(--bg-tertiary);
    border-color: var(--border);
}

[data-bs-theme="dark"] #forgot-confirmation .email-display {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text);
}

[data-bs-theme="dark"] #forgot-confirmation .footer-link {
    border-top-color: var(--border);
}

/* Reset password info message */
[data-bs-theme="dark"] #reset-password-form .info-message {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
    color: #93bbfd;
}

/* Success icon */
[data-bs-theme="dark"] .success-icon {
    background: var(--bg-tertiary);
    border-color: var(--border);
}

/* Email display */
[data-bs-theme="dark"] .email-display {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text);
}

/* Info message */
[data-bs-theme="dark"] .info-message {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

[data-bs-theme="dark"] .info-message p {
    color: #93bbfd;
}

/* Password requirements */
[data-bs-theme="dark"] .password-requirements {
    background: var(--bg-tertiary);
    border-color: var(--border);
}

[data-bs-theme="dark"] .requirements-header {
    color: var(--text-secondary);
}

[data-bs-theme="dark"] .requirement-item {
    color: var(--text-muted);
}

[data-bs-theme="dark"] .requirement-icon .icon-unchecked {
    color: var(--border);
}

/* Validation errors */
[data-bs-theme="dark"] .validation-summary-errors:not(:empty) {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.25);
}

[data-bs-theme="dark"] input.input-validation-error,
[data-bs-theme="dark"] input[aria-invalid="true"] {
    border-color: #ef4444 !important;
    background: rgba(220, 38, 38, 0.08) !important;
}

/* Reset success banner */
[data-bs-theme="dark"] .reset-success-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-bs-theme="dark"] .reset-success-banner .success-text strong {
    color: #6ee7b7;
}

[data-bs-theme="dark"] .reset-success-banner .success-text span {
    color: #6ee7b7;
}

/* Form lock overlay */
[data-bs-theme="dark"] .form-lock-overlay {
    background: rgba(33, 37, 41, 0.7);
}

/* Account footer */
[data-bs-theme="dark"] .account-footer {
    border-top-color: var(--border);
}

[data-bs-theme="dark"] .rally4one-branding {
    color: var(--text-muted);
}

[data-bs-theme="dark"] .powered-by-text {
    color: var(--text-muted);
}

[data-bs-theme="dark"] .rally4one-name {
    color: var(--text);
}

[data-bs-theme="dark"] .rally4one-divider {
    color: var(--border);
}

[data-bs-theme="dark"] .rally4one-link {
    color: var(--text-muted);
}

/* =============================================================================
   EVENT CLOSED STATE
   ========================================================================== */

.event-closed {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.75rem;
    flex: 1;
    justify-content: center;
    gap: 1.25rem;
}

/* "Event Ended" pill badge */
.event-closed__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.875rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary, #667eea) 12%, white);
    color: var(--primary, #667eea);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.event-closed__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text, #212529);
    margin: 0;
    line-height: 1.25;
}

.event-closed__subtitle {
    font-size: 0.95rem;
    color: var(--text-muted, #6c757d);
    margin: 0;
    line-height: 1.6;
    max-width: 320px;
}

.event-closed__subtitle strong {
    color: var(--text, #212529);
}

/* Event info card */
.event-closed__card {
    width: 100%;
    max-width: 320px;
    padding: 1.125rem 1.25rem;
    background: color-mix(in srgb, var(--primary, #667eea) 6%, white);
    border-radius: 0.875rem;
    border-left: 3px solid var(--primary, #667eea);
}

.event-closed__org {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary, #667eea);
    margin: 0 0 0.25rem 0;
}

.event-closed__name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text, #212529);
    margin: 0 0 0.625rem 0;
}

.event-closed__dates {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    color: var(--text-muted, #6c757d);
    margin: 0;
}

.event-closed__dates svg {
    flex-shrink: 0;
    opacity: 0.5;
}

/* CTA section */
.event-closed__cta {
    width: 100%;
    max-width: 320px;
    margin-top: 0.25rem;
}

.event-closed__cta-text {
    font-size: 0.9rem;
    color: var(--text-muted, #6c757d);
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

.event-closed__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: var(--primary, #667eea);
    color: var(--primary-text, #ffffff);
    border: none;
    border-radius: 0.625rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.event-closed__cta-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: var(--primary-text, #ffffff);
    text-decoration: none;
}

.event-closed__cta-btn:active {
    transform: translateY(0);
}

/* Dark mode */
[data-bs-theme="dark"] .event-closed__badge {
    background: color-mix(in srgb, var(--primary, #667eea) 20%, var(--background, #1a1a2e));
}

[data-bs-theme="dark"] .event-closed__card {
    background: color-mix(in srgb, var(--primary, #667eea) 10%, var(--background, #1a1a2e));
}

[data-bs-theme="dark"] .event-closed__subtitle strong {
    color: var(--text, #e0e0e0);
}