/* ==========================================================================
   JOSBFIN - Styles des pages d'authentification
   Cible les classes réellement utilisées par app/views/auth/*.php et le
   layout app/views/auth.php, avec les tokens du design system (style.css).
   ========================================================================== */

.auth-card {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px;
}

.auth-card__head { margin-bottom: 26px; }
.auth-card__head h1 { font-size: 1.7rem; margin-bottom: 6px; }
.auth-card__head p { color: var(--muted); margin: 0; }

.auth-form .field { margin-bottom: 18px; }
.auth-form .grid-2 { margin-bottom: 4px; }

.field__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field__link { font-size: .84rem; font-weight: 600; color: var(--teal-600); }
.field__link:hover { color: var(--teal-500); }
.field__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 7px; color: var(--navy-800); }

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="tel"],
.auth-form input[type="password"],
.auth-form input[type="number"],
.auth-form select {
    width: 100%; font-family: var(--font-body); font-size: .97rem; color: var(--ink);
    padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); transition: border-color var(--t), box-shadow var(--t);
}
.auth-form input:focus, .auth-form select:focus {
    outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(15,181,166,.15);
}

.auth-card__alt { text-align: center; margin-top: 22px; font-size: .92rem; color: var(--muted); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.auth-card__alt a { font-weight: 700; }

.req { color: var(--err); }
.opt { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .82rem; }

/* ---------- Choix par puces radio (canal d'inscription) ---------- */
.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-chip {
    position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
    border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .9rem;
    font-weight: 600; color: var(--muted); transition: border-color var(--t), color var(--t), background var(--t);
}
.radio-chip input { accent-color: var(--teal-600); }
.radio-chip:has(input:checked) { border-color: var(--teal-500); color: var(--navy-800); background: var(--teal-050); }

/* ---------- Saisie de code OTP ---------- */
.otp-input {
    text-align: center; font-family: var(--font-head); font-size: 1.6rem; font-weight: 700;
    letter-spacing: .5em; padding-left: 22px !important;
}

/* ---------- Lien "renvoyer le code" ---------- */
.link-btn { background: none; border: 0; padding: 0; color: var(--teal-600); font-weight: 700; cursor: pointer; text-decoration: underline; font-size: inherit; }
.link-btn:hover { color: var(--teal-500); }

@media (max-width: 640px) {
    .auth-card { padding: 28px 22px; }
}