/* ============================================================
   assets/css/auth.css — SmartSwap centered-card auth pages
   ------------------------------------------------------------
   login, register, forgot-password, reset-password, join.
   Loaded via head.php's $styles. Replaces the per-page inline
   styles for the centered single-column auth layout.
   ============================================================ */

/* Body becomes a full-height centering flex container.
   Applied via head.php $bodyClass = 'auth-body'. */
.auth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}

/* Card column */
.auth-box      { width: 100%; max-width: 400px; }
.auth-box.md   { max-width: 440px; }
.auth-box.wide { max-width: 460px; }

/* Logo block above the card */
.auth-logo    { text-align: center; margin-bottom: 32px; }
.auth-logo.sm { margin-bottom: 24px; }
.auth-logo a  { display: inline-block; text-decoration: none; }

/* Sub-text under the logo */
.auth-sub        { margin-top: 8px; color: var(--c-text3); }
.auth-sub.tight  { margin-top: 12px; font-size: 14px; }

/* In-card heading + lead paragraph */
.auth-head { font-size: 1.1rem; margin-bottom: 4px; }
.auth-lead { font-size: 14px; color: var(--c-text2); margin-bottom: 20px; }

/* "Forgot password?" right-aligned link row */
.auth-forgot   { text-align: right; margin-top: -8px; margin-bottom: 16px; }
.auth-forgot a { font-size: 13px; color: var(--c-text3); }

/* Bottom alternate-action links ("No account?", "Sign in →") */
.auth-alt    { text-align: center; font-size: 14px; margin-top: 20px; color: var(--c-text3); }
.auth-alt.sm { font-size: 13px; margin-top: 12px; }

/* Success / expired result panel (emoji + heading + text) */
.auth-result        { text-align: center; padding: 8px 0; }
.auth-result .emoji { font-size: 2rem; margin-bottom: 12px; }
.auth-result h2     { font-size: 1.2rem; margin-bottom: 8px; }
.auth-result p      { font-size: 14px; color: var(--c-text2); line-height: 1.6; margin-bottom: 20px; }

/* Info / consent note box */
.auth-note { padding: 14px; background: var(--c-bg); border-radius: 10px; border: 1px solid var(--c-border2); font-size: 13px; color: var(--c-text2); line-height: 1.6; margin-bottom: 18px; }

/* Consent checkbox row */
.auth-consent       { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; color: var(--c-text2); line-height: 1.55; }
.auth-consent input { margin-top: 2px; flex-shrink: 0; }

/* Uppercase mini section label inside a form (e.g. "Practitioner profile") */
.auth-section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text3); margin-bottom: 14px; }

/* Honeypot field — visually removed, still in the DOM for bots */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Practitioner identity (guru invite banner + join card header) */
.auth-guru { margin-top: 20px; padding: 18px 20px; background: var(--c-surface); border-radius: 14px; border: 1px solid var(--c-border2); }
.auth-guru img { height: 48px; margin-bottom: 10px; border-radius: 8px; }
.auth-guru .invite { margin-top: 12px; font-size: 13px; color: var(--c-text2); }

.prof-logo     { text-align: center; margin-bottom: 16px; }
.prof-logo img { height: 56px; border-radius: 10px; }
.prof-name { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--c-text); }
.prof-name.lg { font-size: 1.2rem; margin-bottom: 4px; }
.prof-spec { font-size: 12px; color: var(--c-accent); font-weight: 500; margin-top: 2px; }
.prof-spec.mb { margin-top: 0; margin-bottom: 10px; }
.prof-bio  { font-size: 13px; color: var(--c-text3); margin-top: 8px; line-height: 1.55; }
.prof-bio.body { color: var(--c-text2); margin-top: 0; margin-bottom: 18px; line-height: 1.6; }

/* checkout-success celebration */
.auth-box.lg   { max-width: 480px; }
.auth-celebrate { font-size: 64px; margin-bottom: 24px; }