/* ============================================================
   De Chateau Paradise — auth pages (login, register, verify, reset)
   File location in project: public/css/auth.css
   Load AFTER style.css (or paste at the end of style.css).
   ============================================================ */

.auth-page{
  min-height:calc(100vh - 80px);
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--space-16) + 8px) var(--space-6) var(--space-16);
  /* soft cream-to-sky wash so the card sits on something warmer than flat bg */
  background:radial-gradient(120% 90% at 50% 0%, oklch(93% 0.02 235) 0%, var(--cream) 55%);
}
.auth-card{
  width:100%;max-width:440px;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;
  padding:var(--space-12);
  box-shadow:0 24px 60px -36px oklch(40% 0.06 250 / .5);
}
@media(max-width:480px){.auth-card{padding:var(--space-8) var(--space-6)}}
.auth-eyebrow{
  font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;margin-bottom:var(--space-3);
}
.auth-title{font-size:clamp(1.9rem,4vw,2.5rem);letter-spacing:0}
.auth-sub{color:var(--muted);margin-top:var(--space-2);margin-bottom:var(--space-8)}
.auth-form .field:last-of-type{margin-bottom:var(--space-8)}
.auth-form .opt{color:var(--faint);font-weight:400;font-size:.8125rem}
.auth-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media(max-width:420px){.auth-form .field-row{grid-template-columns:1fr}}
.auth-alt{text-align:center;margin-top:var(--space-6);color:var(--muted);font-size:.9375rem}
.auth-alt a{color:var(--gold-deep);font-weight:500}
.auth-alt a:hover{text-decoration:underline}

/* Continue with Google (follows Google's button branding: white, logo left) */
.btn-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:46px;padding:10px 16px;background:#fff;color:#1f1f1f;border:1px solid #747775;border-radius:4px;font:500 .9375rem/1.2 "Jost",system-ui,sans-serif;text-decoration:none;transition:background .2s,box-shadow .2s}
.btn-google svg{width:20px;height:20px;flex:none}
.btn-google:hover{background:#f7f8f8;box-shadow:0 1px 3px oklch(40% 0.03 255 / .2)}
.btn-google:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.auth-or{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-6) 0;color:var(--faint);font-size:.8125rem}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border)}

.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.label-row label{margin-bottom:var(--space-2)}
.auth-link-sm{font-size:.8125rem;color:var(--gold-deep)}
.auth-link-sm:hover{text-decoration:underline}
.auth-email{overflow-wrap:anywhere}
.suggest-btn{margin-top:var(--space-2);background:none;border:1px dashed var(--gold-deep);color:var(--gold-deep);border-radius:3px;padding:6px 10px;font:inherit;font-size:.875rem;cursor:pointer;max-width:100%;overflow-wrap:anywhere;text-align:left}
.suggest-btn:hover{background:oklch(95% 0.03 80)}
.code-input{font-size:1.5rem !important;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
.auth-resend{margin-top:var(--space-6);text-align:center;color:var(--muted);font-size:.875rem}
.linkish{background:none;border:none;padding:0;font:inherit;color:var(--gold-deep);font-weight:500;cursor:pointer;text-decoration:underline}
.linkish:hover{color:var(--ink)}