/* ============================================
   AUTH PAGES STYLESHEET - VSVSV
   For login.html and register.html
   ============================================ */

/* ==========================================
   Auth Section Layout
   ========================================== */

.auth-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 50%, var(--brand-navy) 100%);
    padding: 100px 20px 40px;
    position: relative;
    overflow: hidden;
}

/* Animated Background Pattern */
.auth-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.02) 35px, rgba(255,255,255,.02) 70px),
        repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.02) 35px, rgba(255,255,255,.02) 70px);
    animation: bgMove 20s linear infinite;
    pointer-events: none;
}

@keyframes bgMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(70px, 70px); }
}

.auth-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.auth-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: grid;
    grid-template-columns: 40% 60%;
    min-height: 600px;
    animation: slideUp 0.6s ease-out;
}

.auth-card-wide {
    grid-template-columns: 35% 65%;
}

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

/* ==========================================
   Auth Branding (Left Side)
   ========================================== */

.auth-branding {
    background: linear-gradient(165deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
    color: #fff;
    padding: 50px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.auth-branding::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(106,170,215,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.auth-branding-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.auth-logo {
    /* Side-panel logo on register/login. The ncc-logo.png wordmark renders
       the brand name in NAVY ink with the tri-colour arrow mark above. On
       the navy gradient side-panel, both the navy text and the middle
       navy stroke of the arrow are invisible without a light backdrop.
       Use a solid white badge (not a translucent frosted frame) so every
       colour in the lockup reads cleanly. */
    display: block;
    width: auto;
    height: 160px;
    max-width: 360px;
    margin: 0 auto 26px;
    object-fit: contain;
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.30);
}

.auth-branding h1 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--brand-sky-light);
}

.auth-branding > p,
.auth-branding-content > p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
}

/* Auth Features */
.auth-features {
    margin: 30px 0;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.auth-feature:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.auth-feature i {
    font-size: 1.5rem;
    color: var(--brand-sky-light);
}

.auth-feature span {
    font-size: 0.95rem;
    color: #fff;
}

/* Auth Quote */
.auth-quote {
    margin-top: 40px;
    padding: 20px;
    border-left: 4px solid var(--brand-sky-light);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.auth-quote i {
    color: var(--brand-sky-light);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.auth-quote p {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.1rem;
    font-style: italic;
    margin: 10px 0;
    color: #fff;
}

.auth-quote span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Registration Stats */
.registration-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.stat-item {
    text-align: center;
    padding: 15px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.stat-item strong {
    display: block;
    font-size: 1.5rem;
    color: var(--brand-sky-light);
    font-family: 'Montserrat', system-ui, sans-serif;
    margin-bottom: 5px;
}

.stat-item span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
}

/* ==========================================
   Auth Form Container (Right Side)
   ========================================== */

.auth-form-container {
    padding: 50px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.auth-form-content {
    width: 100%;
    max-width: 500px;
}

.auth-form-content h2 {
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--brand-navy);
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.auth-subtitle {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 30px;
}

/* ==========================================
   Form Styles
   ========================================== */

.auth-form {
    width: 100%;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-group label i {
    color: var(--brand-navy);
    margin-right: 5px;
    width: 16px;
}

.required {
    color: #c0392b;
    margin-left: 2px;
}

/* CHECKBOXES AND RADIOS ARE NOT TEXT FIELDS.
 *
 * This rule used to catch every input, including type=checkbox. A checkbox given
 * `width: 100%` stretches its BOX while the painted tick stays ~13px, so the control
 * renders as a tiny square sitting at the left end of a wide dead area — and the box
 * width then changes with the viewport. Measured on contributor-accept.html 2026-09-16:
 * 40px wide at 320px screen, 66px at 414px, 13px tall at both. The consent checkbox on
 * the contributor agreement is the worst place in the product for an ambiguous control.
 * (The tap area itself is fine wherever the <label> wraps the input, as it does there —
 * this is a rendering defect, not an unclickable one.) */
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    font-family: 'Montserrat', system-ui, sans-serif;
}

.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;   /* never let a flex row shrink it to a sliver */
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--brand-navy);
    cursor: pointer;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select:focus {
    outline: none;
    border-color: var(--brand-navy);
    box-shadow: 0 0 0 4px rgba(0,45,98,0.1);
}

.form-group input:not([type="checkbox"]):not([type="radio"]).error,
.form-group select.error {
    border-color: #c0392b;
}

.form-group input:not([type="checkbox"]):not([type="radio"]).success,
.form-group select.success {
    border-color: var(--success);
}

.error-message {
    display: block;
    color: #c0392b;
    font-size: 0.85rem;
    margin-top: 5px;
    min-height: 20px;
}

/* Password Input Wrapper */
.password-input-wrapper {
    position: relative;
}

.password-input-wrapper input {
    padding-right: 45px;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 8px;
    transition: color 0.3s ease;
}

.password-toggle:hover {
    color: var(--brand-navy);
}

.password-toggle i {
    font-size: 1.1rem;
}

/* Password Strength Indicator */
.password-strength {
    margin-top: 10px;
}

.strength-bar {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.strength-bar-fill {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.strength-bar-fill.weak {
    width: 25%;
    background: #c0392b;
}

.strength-bar-fill.fair {
    width: 50%;
    background: #f39c12;
}

.strength-bar-fill.good {
    width: 75%;
    background: #3498db;
}

.strength-bar-fill.strong {
    width: 100%;
    background: var(--success);
}

.strength-text {
    font-size: 0.85rem;
    color: #666;
}

.strength-text strong {
    color: #333;
}

/* Password Requirements */
.password-requirements {
    list-style: none;
    padding: 10px 0 0;
    margin: 0;
}

.password-requirements li {
    font-size: 0.85rem;
    color: #6e6e6e;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.password-requirements li i {
    font-size: 0.5rem;
    color: #ccc;
}

.password-requirements li.met {
    color: var(--success-ink);
}

.password-requirements li.met i {
    color: var(--success-ink);
}

/* Form Row (Remember Me & Forgot Password) */
.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

/* Checkbox */
.form-group-checkbox {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;          /* allow .error-message to wrap to its own line */
    gap: 10px;
    margin-bottom: 20px;
}

.form-group-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-top: 2px;
    flex-shrink: 0;
}

.form-group-checkbox label {
    font-size: 0.9rem;
    color: #555;
    cursor: pointer;
    margin: 0;
    line-height: 1.5;
    /* flex:1 with min-width:0 -- WITHOUT these the label keeps its intrinsic
       width, and because the row is `flex-wrap: wrap` a long one wrapped onto
       the NEXT LINE, underneath the checkbox. Measured live: "I am 18 or older"
       and the Terms line sat beside their box, while the guardian and newsletter
       lines dropped below theirs. Two of four, which is exactly the uneven look
       the owner reported. Now every label takes the remaining width and wraps
       inside itself. */
    flex: 1 1 0;
    min-width: 0;
}

/* Hints and errors belong on their own full-width line, indented to line up with
   the label text rather than the checkbox. */
.form-group-checkbox .field-hint {
    flex-basis: 100%;
    margin: 4px 0 0 28px;
}

/* The age rule on the cadet role option. Deliberately not styled as an error --
   it is a fact about who may register, shown before anything is typed. */
.accounttype-age {
    display: block;
    margin-top: 6px;
    font-weight: 600;
    color: var(--brand-navy, #002D62);
}

/* Validation error for a required checkbox: full-width, red, visible.
   Without flex-basis:100% the .error-message gets squashed beside the
   checkbox+label and is effectively invisible — which is why submitting
   the registration form with unchecked required boxes used to "do nothing." */
.form-group-checkbox .error-message {
    flex-basis: 100%;
    width: 100%;
    margin-top: 4px;
    padding-left: 28px;       /* align under the label text, past the box */
    font-weight: 500;
}

.form-group-checkbox.has-error {
    padding: 8px 10px;
    border: 1px solid #c0392b;
    border-radius: 6px;
    background: #fdecea;
}

.form-group-checkbox a {
    color: var(--brand-navy);
    text-decoration: none;
    font-weight: 600;
}

.form-group-checkbox a:hover {
    text-decoration: underline;
}

.forgot-link {
    color: var(--brand-navy);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

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

/* Submit Button */
.btn-block {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 10px;
}

.btn-block i {
    margin-right: 8px;
}

/* Divider */
.auth-divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background: #e0e0e0;
}

.auth-divider::before {
    left: 0;
}

.auth-divider::after {
    right: 0;
}

.auth-divider span {
    background: #fff;
    padding: 0 15px;
    color: #6e6e6e;
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}

/* Social Login */
.social-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-social {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid #e0e0e0;
    background: #fff;
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-social:hover:not(:disabled) {
    background: #f8f9fa;
    border-color: #ccc;
}

.btn-social:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-google i {
    color: #DB4437;
}

/* Auth Footer */
.auth-footer {
    text-align: center;
    margin-top: 25px;
}

.auth-footer p {
    color: #666;
    font-size: 0.95rem;
}

.auth-footer a {
    color: var(--brand-navy);
    text-decoration: none;
    font-weight: 600;
}

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

/* Auth Help */
.auth-help {
    margin-top: 30px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
}

.auth-help p {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
}

.auth-help i {
    color: #3498db;
    margin-right: 5px;
}

.auth-help a {
    color: var(--brand-navy);
    text-decoration: none;
    font-weight: 600;
}

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

/* ==========================================
   Responsive Design
   ========================================== */

@media (max-width: 1024px) {
    .auth-card {
        grid-template-columns: 1fr;
    }
    
    .auth-card-wide {
        grid-template-columns: 1fr;
    }
    
    .auth-branding {
        padding: 40px 30px;
        min-height: 300px;
    }
    
    .auth-logo {
        width: auto;
        height: 110px;
        max-width: 280px;
        padding: 10px 16px;
    }
    
    .auth-branding h1 {
        font-size: 1.6rem;
    }
    
    .auth-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .registration-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .auth-section {
        padding: 80px 15px 30px;
    }
    
    .auth-form-container {
        padding: 30px 25px;
    }
    
    .auth-form-content h2 {
        font-size: 1.5rem;
    }
    
    .auth-branding {
        padding: 30px 20px;
    }
    
    .auth-features {
        grid-template-columns: 1fr;
    }
    
    .registration-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .password-requirements {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .auth-form-container {
        padding: 25px 20px;
    }
    
    .auth-branding {
        min-height: 250px;
    }
    
    .registration-stats {
        grid-template-columns: 1fr;
    }
    
    .stat-item strong {
        font-size: 1.3rem;
    }
}

/* ==========================================
   Animations
   ========================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Form field focus animation */
.form-group input:focus,
.form-group select:focus {
    animation: focusPulse 0.3s ease;
}

@keyframes focusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0,45,98,0.4);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(0,45,98,0.1);
    }
}

/* ==========================================
   Print Styles
   ========================================== */

@media print {
    .auth-section {
        background: #fff;
    }
    
    .auth-branding {
        display: none;
    }
    
    .auth-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* Non-affiliation disclaimer on auth cards */
.auth-disclaimer {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--surface-ink-muted);
    text-align: center;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--surface-line-soft);
}

/* Inline hint + optional-marker for the minimum-data registration form */
.field-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--surface-ink-muted);
    margin-top: 4px;
    line-height: 1.4;
}

/* Inside a checkbox row the hint is a flex item, so without a full-width basis it
   sits beside the label and squeezes. Indent past the 18px box + 10px gap so it
   reads as belonging to the label above it. */
.form-group-checkbox .field-hint {
    flex-basis: 100%;
    margin-left: 28px;
}

.optional-note {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--surface-ink-muted);
}

/* Account-type radio block on register.html. Two side-by-side cards: the
   user picks whether they are a cadet learner (default) or registering on
   behalf of a school. School path reveals two institutional fields below. */
.form-group-accounttype {
    border: 0;
    padding: 0;
    margin: 0 0 18px;
}
.form-group-accounttype legend {
    display: block;
    font-weight: 600;
    color: var(--dark-gray);
    margin-bottom: 10px;
    font-size: 0.95rem;
}
.form-group-accounttype legend i {
    color: #002D62;
    margin-right: 6px;
}
.accounttype-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--surface-line);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s, background-color .15s;
}
.accounttype-radio:hover {
    border-color: #002D62;
    background: #f7f9fc;
}
.accounttype-radio input[type="radio"] {
    margin-top: 4px;
    accent-color: #002D62;
    flex-shrink: 0;
}
.accounttype-radio input[type="radio"]:checked ~ span strong {
    color: #002D62;
}
.accounttype-radio input[type="radio"]:checked + span {
    color: #002D62;
}
.accounttype-radio:has(input[type="radio"]:checked) {
    border-color: #002D62;
    background: var(--surface-panel);
}
.accounttype-radio span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.accounttype-radio strong {
    font-weight: 700;
    color: var(--dark-gray);
    font-size: 0.95rem;
}
.accounttype-radio small {
    color: var(--surface-ink-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 400;
}

/* Form-group-school is a regular .form-group — it just needs to be hidden
   by default. The `hidden` attribute does this in modern browsers but a
   CSS fallback ensures it on older runtimes. */
.form-group-school[hidden] {
    display: none !important;
}