/* ══════════════════════════════════════════════════════════════════════
   auth-enhance.css — YallaTonight customer auth UX polish (additive only)
   Progressive enhancement layer for the sign-up / sign-in / reset flows:
     • live password-strength meter + requirements checklist
     • inline field-validation messages (reuses the global .field-error look)
     • "passwords match" confirmation hint
     • passkey affordance hint
   Purely presentational. Every element it styles is optional — the forms
   work fully without this file (and without JS). Uses the existing purple
   design tokens so it inherits the site theme + night mode automatically.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Password strength meter ─────────────────────────────────────────── */
.pw-strength {
    margin-top: 10px;
    /* Hidden until JS reveals it on first keystroke, so an empty field is
       never cluttered by a meter with nothing to measure. */
    display: none;
}
.pw-strength.is-active {
    display: block;
}
.pw-strength-track {
    display: flex;
    gap: 5px;
    margin-bottom: 7px;
}
.pw-strength-seg {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.09);
    transition: background-color 0.3s ease;
}
/* Score-driven fill: colour class set on the wrapper by JS. */
.pw-strength[data-score="1"] .pw-strength-seg:nth-child(-n+1),
.pw-strength[data-score="2"] .pw-strength-seg:nth-child(-n+2),
.pw-strength[data-score="3"] .pw-strength-seg:nth-child(-n+3),
.pw-strength[data-score="4"] .pw-strength-seg:nth-child(-n+4) {
    background: var(--pw-color, #ef4444);
}
.pw-strength-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.75rem;
}
.pw-strength-label {
    font-weight: 600;
    color: var(--pw-color, var(--text-muted));
    white-space: nowrap;
}
.pw-strength-reqs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.pw-strength-reqs li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    transition: color 0.25s ease;
}
.pw-strength-reqs li::before {
    content: "\f111"; /* fa-circle (empty) */
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    font-size: 0.62rem;
    opacity: 0.5;
}
.pw-strength-reqs li.met {
    color: #34d399;
}
.pw-strength-reqs li.met::before {
    content: "\f058"; /* fa-circle-check */
    font-weight: 900;
    opacity: 1;
}
html.night .pw-strength-reqs li.met {
    color: #6ee7b7;
}

/* ── "Passwords match" confirmation hint ─────────────────────────────── */
.pw-match {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #34d399;
}
.pw-match.is-shown {
    display: flex;
}
.pw-match::before {
    content: "\f00c"; /* fa-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7rem;
}
html.night .pw-match {
    color: #6ee7b7;
}

/* ── Inline field-error (mirrors global enhancements.css contract) ─────
   enhancements.css already ships `.field-error` styling, but it is only
   loaded via footer.php (absent on the standalone login/register pages),
   so we restate a minimal, identical-looking rule here to guarantee the
   validation messages render correctly on every auth screen. ─────────── */
.auth-field .field-error,
.form-group .field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 7px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #f87171;
}
.auth-field .field-error::before,
.form-group .field-error::before {
    content: "\f06a"; /* fa-circle-exclamation */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    line-height: 1.5;
    flex: none;
}
/* Redden the input border while an inline error is showing. */
.auth-input[aria-invalid="true"],
.form-input[aria-invalid="true"] {
    border-color: rgba(239, 68, 68, 0.55) !important;
}

/* Field-shake on a rejected submit (no-op if enhancements.css already defines it). */
@keyframes ytAuthShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.auth-shake { animation: ytAuthShake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@media (prefers-reduced-motion: reduce) {
    .auth-shake { animation: none; }
}

/* ── Passkey affordance hint under the biometric button ──────────────── */
.auth-passkey-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.76rem;
    color: var(--text-muted, #94a3b8);
    text-align: center;
}
.auth-passkey-hint i {
    color: var(--neon-purple, #7C3AED);
    font-size: 0.8rem;
}