/* ==========================================================================
   VARNOVA — Customer Portal
   Extends the tokens defined in css/style.css — no color/font redefinition.
   Covers: registration (Module 1). Login/dashboard/documents/invoices
   screens from later modules reuse these same .auth-card / .admin-flash-
   style building blocks.
   ========================================================================== */

.auth-section{ padding:20px 0 var(--section-pad); }
.auth-grid{ display:flex; justify-content:center; }

.auth-card{
  width:100%; max-width:640px;
  padding:36px; border:1px solid var(--border-soft); border-radius:20px;
  background:rgba(255,255,255,0.015);
}
.auth-card h2{ font-family:var(--font-display); font-weight:400; font-size:1.4rem; margin-bottom:24px; }

.auth-card .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.auth-card .field{ margin-bottom:16px; }
.auth-card label{ display:block; font-size:.78rem; color:var(--text-faint); margin-bottom:6px; letter-spacing:.02em; }
.auth-card input, .auth-card select{
  width:100%; padding:12px 14px; background:var(--bg-2); color:var(--text);
  border:1px solid var(--border-soft); border-radius:10px; font-family:var(--font-body); font-size:.92rem;
}
.auth-card input:focus, .auth-card select:focus{ outline:none; border-color:var(--gold); }

.auth-card__hint{ font-size:.78rem; color:var(--text-faint); margin:-6px 0 20px; }
.auth-card__foot{ margin-top:22px; font-size:.85rem; color:var(--text-dim); }
.auth-card__foot a{ color:var(--gold); }

/* OTP screens (Module 3 — email verification / login / password reset) */
.otp-input{ letter-spacing:10px; font-size:1.3rem; text-align:center; font-weight:600; }
.auth-card__resend{ background:none; border:none; color:var(--gold); font-size:.82rem; cursor:pointer; padding:0; }
.auth-card__resend:hover{ text-decoration:underline; }

/* Honeypot — visually hidden but present in the DOM/tab order-free, so it
   only ever gets filled by automated bots, never real visitors. */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Flash / form-level messages (success + validation errors) */
.admin-flash{ padding:14px 16px; border-radius:10px; font-size:.85rem; margin-bottom:20px; line-height:1.6; }
.admin-flash p{ margin:0; }
.admin-flash p + p{ margin-top:4px; }
.admin-flash--ok{ background:rgba(120,200,140,.1); border:1px solid rgba(120,200,140,.35); color:#a8e6b8; }
.admin-flash--warn{ background:rgba(212,120,90,.1); border:1px solid rgba(212,120,90,.35); color:#f0b39c; }

@media (max-width: 720px){
  .auth-card .field-row{ grid-template-columns:1fr; }
  .auth-card{ padding:26px; }
}