/* auth.css — Login page | elthamwildcats.coach */

/* Layout */
.auth-body, .auth-page { display: flex; min-height: 100vh; width: 100%; }
.auth-body { background: var(--dark-bg); }

/* Left brand panel */
.auth-panel--brand {
    width: 42%;
    background: linear-gradient(160deg, var(--dark-surface) 0%, var(--dark-bg) 60%, rgba(211,47,47,0.15) 100%);
    border-right: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 56px;
    position: relative;
}
.auth-panel--brand::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--primary-red);
}

/* Right form panel */
.auth-panel--form {
    flex: 1;
    background: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
}
.auth-form-wrap { width: 100%; max-width: 420px; }

/* Brand elements */
.logo-mark--lg { font-size: 1.1rem; padding: 7px 13px; margin-bottom: 24px; display: inline-block; }

.auth-brand__title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    color: var(--white);
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.auth-brand__tagline { font-size: 0.95rem; font-style: italic; color: var(--primary-red); font-weight: 600; margin-bottom: 48px; }
.auth-brand__pillars { display: flex; flex-direction: column; gap: 20px; }
.auth-pillar { border-left: 3px solid var(--primary-red); padding-left: 16px; }
.auth-pillar__label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.4); margin-bottom: 3px; }
.auth-pillar__value { display: block; font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.8); }

/* Form */
.auth-form-header { margin-bottom: 28px; }
.auth-form-title { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.auth-form-sub { font-size: 0.92rem; color: var(--text-muted); }

.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-primary); margin-bottom: 7px; }
.form-input-wrap { position: relative; }

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--card-bg);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus { border-color: var(--primary-red); box-shadow: 0 0 0 3px rgba(211,47,47,0.12); }
.form-input--error { border-color: var(--primary-red); }

.form-pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; }
.btn-full { width: 100%; text-align: center; padding: 14px; font-size: 0.95rem; }

.auth-form-footer { margin-top: 28px; font-size: 0.8rem; color: var(--text-muted); text-align: center; line-height: 1.6; }
.auth-form-footer a { color: var(--primary-red); font-weight: 600; }

/* Responsive */
@media (max-width: 768px) {
    .auth-page { flex-direction: column; }
    .auth-panel--brand { width: 100%; padding: 40px 28px 32px; }
    .auth-brand__pillars { flex-direction: row; flex-wrap: wrap; gap: 16px; }
    .auth-panel--form { padding: 32px 20px; }
}