/* ==========================================================================
   Cricket Auction — authentication screens (login / registration)
   Self-contained, mobile-first. No framework dependency (Font Awesome only).
   ========================================================================== */

:root {
    --brand-1: #059669;   /* emerald 600 */
    --brand-2: #0d9488;   /* teal 600    */
    --bg-1:    #0b6e57;   /* deep emerald */
    --bg-2:    #0b2f4a;   /* deep navy    */
    --gold-1:  #f59e0b;
    --gold-2:  #fbbf24;
    --card:    #ffffff;
    --text:    #1f2937;
    --muted:   #6b7280;
    --border:  #e5e7eb;
    --ring:    rgba(5, 150, 105, .32);
    --radius:  18px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

.auth-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;                /* correct height on mobile browsers */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(1100px 600px at 8% -10%, rgba(251, 191, 36, .22), transparent 60%),
        radial-gradient(900px 700px at 112% 115%, rgba(45, 212, 191, .20), transparent 55%),
        linear-gradient(135deg, var(--bg-1), var(--bg-2));
    -webkit-font-smoothing: antialiased;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45), 0 8px 22px -10px rgba(0, 0, 0, .25);
    padding: 34px 30px;
    animation: auth-in .5s cubic-bezier(.16, 1, .3, 1);
}

@keyframes auth-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }

/* --- brand header --- */
.auth-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 24px; }
.auth-badge {
    width: 66px; height: 66px; border-radius: 20px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
    color: #fff; font-size: 29px;
    box-shadow: 0 12px 24px -8px rgba(245, 158, 11, .6);
    margin-bottom: 14px;
}
.auth-title { font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.auth-subtitle { color: var(--muted); font-size: .93rem; margin-top: 5px; }

/* --- form --- */
.auth-field { margin-bottom: 16px; }
.auth-label { display: block; font-size: .82rem; font-weight: 600; color: #374151; margin-bottom: 7px; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap > .fa-solid,
.auth-input-wrap > .fas { position: absolute; left: 15px; color: #9ca3af; font-size: .95rem; pointer-events: none; }
.auth-input {
    width: 100%; height: 50px;
    padding: 0 14px 0 42px;
    font-size: 16px;                   /* >=16px stops iOS zoom-on-focus */
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #f9fafb; color: var(--text);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-pw-wrap .auth-input { padding-right: 46px; }
.auth-input::placeholder { color: #9ca3af; }
.auth-input:focus { outline: none; border-color: var(--brand-1); background: #fff; box-shadow: 0 0 0 4px var(--ring); }

.auth-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: #9ca3af; cursor: pointer;
    padding: 9px; border-radius: 8px; font-size: .95rem; line-height: 0;
}
.auth-toggle:hover { color: #4b5563; }
.auth-toggle:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 1px; }

/* --- button (works as <button> and as <a>) --- */
.auth-btn {
    width: 100%; height: 50px;
    border: 0; border-radius: 12px; cursor: pointer;
    font-size: 1rem; font-weight: 700; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    box-shadow: 0 12px 24px -10px rgba(5, 150, 105, .6);
    display: flex; align-items: center; justify-content: center; gap: 9px;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s;
}
.auth-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.auth-btn:active { transform: translateY(0); }
.auth-btn:focus-visible { outline: 3px solid var(--gold-1); outline-offset: 2px; }
.auth-btn.auth-btn--ghost {
    background: #fff; color: #374151; border: 1.5px solid var(--border); box-shadow: none;
}
.auth-btn.auth-btn--ghost:hover { background: #f9fafb; filter: none; }
.auth-btn + .auth-btn { margin-top: 12px; }

/* --- alerts / notes --- */
.auth-alert {
    display: flex; align-items: center; gap: 10px;
    background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
    padding: 12px 14px; border-radius: 12px; font-size: .9rem; margin-bottom: 18px;
}
.auth-alert.auth-note { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.auth-alert i { font-size: 1rem; flex-shrink: 0; }

.auth-text { text-align: center; color: var(--muted); font-size: .92rem; margin: 0 0 22px; line-height: 1.5; }
.auth-foot { text-align: center; margin-top: 20px; font-size: .9rem; color: var(--muted); }
.auth-foot a { color: var(--brand-1); font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* --- small phones --- */
@media (max-width: 400px) {
    .auth-card { padding: 28px 22px; border-radius: 16px; }
    .auth-title { font-size: 1.32rem; }
    .auth-badge { width: 60px; height: 60px; font-size: 26px; }
}