/* ClubRight auth pages (Login / Register / ForgotPasswordConfirmation / ResetPassword /
   GuidanceOAuth Consent) — the stylesheet for _AuthLayout.cshtml.

   #42911 — extracted verbatim from _AuthLayout's in-page <style> block, which CSS-GUIDE.md
   forbids. #41439 had centralised the auth styles into that block (rather than site.css) so
   the child views could drop their own duplicated blocks; this finishes the job by giving the
   auth layout a real stylesheet. Auth pages load none of site.css / memberarea-custom.css, so
   this file is self-contained and is the only local stylesheet they pull. */

/* Accessibility: Skip Navigation */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10000;
    padding: 12px 24px;
    background: #1a1a2e;
    color: #fff;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: top 0.2s;
}

.skip-nav:focus {
    top: 0;
    color: #fff;
}

/* Accessibility: Global Focus Indicator */
*:focus-visible {
    outline: 2px solid #1a3a3a !important;
    outline-offset: 2px !important;
}

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

body {
    font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Auth page navigation */
.auth-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.auth-nav-logo img {
    height: 44px;
    width: auto;
    border-radius: 10px;
}

.auth-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    color: white;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    transition: all 0.2s;
}

.auth-nav-link:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.auth-nav-link i {
    font-size: 13px;
}

.auth-nav-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.auth-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}

.auth-nav-btn-primary {
    color: #1a3a3a;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.auth-nav-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    color: #1a3a3a;
}

@media (max-width: 480px) {
    .auth-nav {
        padding: 12px 16px;
    }

    .auth-nav-links {
        gap: 8px;
    }

    .auth-nav-link,
    .auth-nav-btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    .auth-nav-link span {
        display: none;
    }

    .auth-nav-logo img {
        height: 36px;
    }
}

.auth-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    position: relative;
    background-color: #1a3a3a;
}

.auth-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 58, 58, 0.85) 0%, rgba(20, 45, 45, 0.9) 100%);
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 48px 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

@media (max-width: 480px) {
    .auth-card {
        padding: 32px 24px;
        border-radius: 20px;
        margin: 10px;
    }
}

.auth-logo {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo img {
    max-height: 80px;
    max-width: 200px;
    object-fit: contain;
}

.auth-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a3a3a;
    text-align: center;
    margin-bottom: 8px;
}

.auth-subtitle {
    font-size: 15px;
    color: #64748b;
    text-align: center;
    margin-bottom: 32px;
}

.auth-subtitle a {
    color: #ea580c;
    text-decoration: none;
    font-weight: 600;
}

.auth-subtitle a:hover {
    text-decoration: underline;
}

.mb-3 {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    transition: all 0.2s ease;
}

.form-control:focus {
    border-color: #1a3a3a;
    box-shadow: 0 0 0 3px rgba(26, 58, 58, 0.1);
}

.form-control::placeholder {
    color: #9ca3af;
}

.btn-primary {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -5px rgba(234, 88, 12, 0.4);
}

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

.auth-links {
    text-align: center;
    margin-top: 24px;
}

.auth-links a {
    color: #64748b;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.auth-links a:hover {
    color: #1a3a3a;
}

.auth-footer {
    text-align: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.powered-by {
    font-size: 13px;
    color: #9ca3af;
}

.powered-by img {
    height: 20px;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.7;
}

.text-danger {
    color: #dc2626;
    font-size: 13px;
    margin-top: 6px;
}

.alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

/* Modal styling for forgot password */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.show {
    display: flex;
}

.modal-dialog {
    width: 100%;
    max-width: 400px;
}

.modal-content {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-header {
    padding: 20px 24px;
    background: #1a3a3a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.modal-body {
    padding: 24px;
}

.modal-body p {
    color: #64748b;
    margin-bottom: 16px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.btn-secondary {
    flex: 1;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-secondary:hover {
    background: #e5e7eb;
}

.btn-submit {
    flex: 1;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #1a3a3a;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-submit:hover {
    background: #0f2828;
}

.contact-details {
    margin-top: 16px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
    color: #64748b;
    text-align: center;
}

/* QA links styling */
.qa-links {
    margin-bottom: 20px;
    padding: 12px;
    background: #fef3c7;
    border-radius: 8px;
}

.qa-links a {
    display: block;
    padding: 6px 0;
    color: #92400e;
    font-size: 13px;
}

/* Loading spinner */
.loading {
    display: none;
    text-align: center;
    padding: 20px;
}

/* ===========================================
   Club Logo with border
   =========================================== */
.auth-logo-bordered {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px;
    background: #f9fafb;
    max-height: 90px;
}

/* ===========================================
   Club-specific login styles
   =========================================== */
/* #41439 — unscoped from .club-login so the same treatment covers the
   ForgotPasswordConfirmation / ResetPassword pages (which use
   .has-hero-image / .solid-background without .club-login). This lets
   those pages drop their duplicated in-page <style> blocks. */
.has-hero-image .auth-background::after {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.solid-background .auth-background::after {
    display: none;
}

/* Success confirmation icon (ForgotPasswordConfirmation) — was an inline
   fixed-width style; a fixed 64px badge is fine at every width. #41439 */
.auth-success-icon {
    width: 64px;
    height: 64px;
    background: #dcfce7;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-subtitle--spaced {
    margin-bottom: 32px;
}

.auth-btn-link {
    display: inline-block;
    text-decoration: none;
    padding: 14px 32px;
}

/* ===========================================
   Generic login styles
   =========================================== */
.generic-login {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.generic-login .auth-card {
    background: #ffffff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.generic-login .auth-logo img {
    max-height: 48px;
}

.generic-login .auth-title {
    color: #1f2937;
}

.generic-footer {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    text-align: center;
}

.generic-footer a {
    color: #9ca3af;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

/* ===========================================
   ClubRight brand (orange)
   =========================================== */
.clubright-brand .btn-primary {
    background: linear-gradient(135deg, #f06522 0%, #e05a1c 100%);
}

.clubright-brand .btn-primary:hover {
    box-shadow: 0 10px 20px -5px rgba(240, 101, 34, 0.4);
}

.clubright-brand .form-control:focus {
    border-color: #f06522;
    box-shadow: 0 0 0 3px rgba(240, 101, 34, 0.1);
}

.clubright-brand .auth-links a,
.clubright-brand .generic-footer a:hover {
    color: #f06522;
}

.clubright-brand .auth-links a:hover {
    color: #d4551a;
}

/* ===========================================
   Register form styles
   =========================================== */
.auth-card-wide {
    max-width: 520px;
}

.auth-card .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.auth-card .col-sm-6 {
    flex: 0 0 50%;
    padding: 0 8px;
}

.auth-card .col-sm-12,
.auth-card .col-12,
.auth-card .col-md-12 {
    flex: 0 0 100%;
    padding: 0 8px;
}

@media (max-width: 576px) {
    .auth-card .col-sm-6 {
        flex: 0 0 100%;
    }
}

.auth-card .mb-3,
.auth-card .row > div {
    margin-bottom: 16px;
}

.auth-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a3a3a;
    margin: 24px 0 12px;
}

.auth-card p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

.auth-card .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.auth-card .table td {
    padding: 12px;
    vertical-align: middle;
    border: 1px solid #e5e7eb;
}

.auth-card .table tr:hover {
    background: #f8fafc;
}

.auth-card input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.auth-card hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 24px 0;
}

.auth-card .hideThead thead {
    display: none;
}

.auth-card .form-select {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.auth-card .form-select:focus {
    border-color: #1a3a3a;
    box-shadow: 0 0 0 3px rgba(26, 58, 58, 0.1);
}

/* #42735 — three-up date of birth pickers. The auth card only declared col-sm-6/col-12,
   so the day/month/year selects had no column width and stacked full width. */
.auth-card .col-4,
.auth-card .col-sm-4 {
    flex: 0 0 33.3333%;
    padding: 0 4px;
}

.auth-card .nohorizontalmargin {
    margin-left: 0;
    margin-right: 0;
}

.register-dob__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a3a3a;
    text-align: center;
    margin-bottom: 8px;
}

.auth-card .btn-info {
    background: #0891b2;
    border: none;
    border-radius: 8px;
    color: #fff;
    padding: 8px 16px;
    cursor: pointer;
}

/* #42854 — "Adding a child or another family member?" heading and its Add/Remove
   toggle. Both carried inline styles, and the label's padding was reassigned by JS on
   every toggle. Padding sits on the label rather than the button so the whole button
   face is clickable — the label is what actually flips the hidden checkbox. */
.add-member__heading {
    margin-bottom: 4px;
}

.auth-card .add-member__toggle {
    display: block;
    width: fit-content;
    margin: 12px 0 8px;
    padding: 0;
}

.add-member__toggle label {
    display: block;
    margin: 0;
    padding: 8px 16px;
    cursor: pointer;
}

/* OTP digit inputs */
.otp-digits {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px 0 28px;
}

.otp-digit {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    transition: all 0.2s ease;
}

.otp-digit:focus {
    border-color: #f06522;
    box-shadow: 0 0 0 3px rgba(240, 101, 34, 0.1);
}

@media (max-width: 380px) {
    .otp-digits { gap: 6px; }
    .otp-digit { width: 40px; height: 48px; font-size: 20px; }
}

/* Register submit button */
.auth-card .btn-submit-register,
.auth-card .g-recaptcha {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 24px;
    text-align: center;
}

.auth-card .btn-submit-register:hover,
.auth-card .g-recaptcha:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -5px rgba(234, 88, 12, 0.4);
}

/* Add another member section */
#addAnotherMemberSection {
    display: none;
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    margin: 16px 0;
}

/* #42854 — .auth-card .row > div puts 16px under every row child, and at the foot of
   this panel that lands twice (the DOB column, then its day/month/year columns),
   leaving 52px of dead space below the last field against 20px above the first.
   #42911 — was `> .row:last-of-type`, which happened to resolve to the DOB row only
   because it is the last div in the panel; appending a fourth div would have moved the
   rule onto it silently. The row names itself instead. Keep the id in the selector —
   `.auth-card .row > div` is (0,2,1) and the class alone would not outrank it. */
#addAnotherMemberSection .add-member__dob-row > div,
#addAnotherMemberSection .add-member__dob-row .col-4 {
    margin-bottom: 0;
}

/* Legal section (terms & privacy) */
.legal-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-top: 8px;
}

.legal-section .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 16px;
}

.legal-section .checkbox-row:last-child {
    margin-bottom: 0;
}

.legal-section .checkbox-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.legal-section .checkbox-row span {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.legal-section a {
    color: #2563eb;
    text-decoration: underline;
}

.legal-section .privacy-statement {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}

/* ===========================================
   Mobile bottom nav (app context)
   =========================================== */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 48rem) {
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(1.25rem);
        -webkit-backdrop-filter: blur(1.25rem);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0.75rem 0.5rem;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
        z-index: 1040;
        box-shadow: 0 -0.25rem 1.25rem rgba(0, 0, 0, 0.08);
    }

    .mobile-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        padding: 0.625rem 0.5rem;
        color: #64748b;
        text-decoration: none;
        border-radius: 1.25rem;
        margin: 0 0.25rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: none;
        background: none;
        cursor: pointer;
        font-family: inherit;
    }

    .mobile-bottom-nav-item:active {
        transform: scale(0.95);
    }

    .mobile-bottom-nav-item:hover {
        background: var(--mobile-nav-color, #667eea);
        color: #fff;
        box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.15);
    }

    .mobile-bottom-nav-item:hover .nav-icon-svg {
        fill: #fff;
        stroke: #fff;
    }

    .nav-icon-svg {
        width: 1.5rem;
        height: 1.5rem;
        fill: currentColor;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-bottom-nav-item span {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    body.has-mobile-nav {
        padding-bottom: 5rem;
    }

    body.has-mobile-nav .generic-footer {
        bottom: 5.625rem;
    }
}