/* =========================================================
   sasangraphic — Login / Registration pages (sg-auth)
   Professional split-panel authentication design.

   Scoped exclusively to templates/sg-auth-*.php — every
   rule is namespaced under .sg-auth-page / .sga- so nothing
   leaks into the rest of the site.

   Typography: the site's own self-hosted fonts, loaded from
   the SAME files as assets/css/style.css (no duplicates):
     Persian → Vazirmatn  (the site's Vazir-family face)
     Latin   → Montserrat
   Font-family is set EXPLICITLY on every text element inside
   the auth scope (not just inherited from body), so Blocksy's
   global.css / bundles can never override it with their
   system font stack.
   ========================================================= */

/* ---- Fonts ----
   Vazirmatn (Persian) + Montserrat (Latin) are declared ONCE in
   assets/css/fonts.css — enqueued site-wide ('sg-fonts') and available
   on these pages too. Persian glyphs use Vazirmatn and Latin glyphs
   use Montserrat automatically via the unicode-range split. */

/* ---- Explicit typography (wins over any element rule from
        Blocksy global.css / bundles loaded after this file) ---- */
body.sg-auth-page,
.sg-auth-page h1,
.sg-auth-page h2,
.sg-auth-page h3,
.sg-auth-page h4,
.sg-auth-page p,
.sg-auth-page label,
.sg-auth-page a,
.sg-auth-page span,
.sg-auth-page small,
.sg-auth-page button,
.sg-auth-page input {
  font-family: var(--sga-font);
}

/* ---- Layout knobs (overridden by the ACF inline CSS) ---- */

/* ---- Night (default) tokens ---- */
html[data-theme="night"] {
  --sga-bg-1: #0d0936;
  --sga-bg-2: #1a1361;
  --sga-bg-3: #231a70;
  --sga-bg-grad:
    radial-gradient(1100px 620px at 88% -10%, rgba(64, 11, 255, 0.32), transparent 60%),
    radial-gradient(900px 560px at 8% 110%, rgba(0, 112, 230, 0.22), transparent 62%),
    linear-gradient(155deg, var(--sga-bg-1) 0%, var(--sga-bg-2) 48%, #363435 130%);
  --sga-page-ink: #f7f7f7;
  --sga-card-bg: rgba(17, 12, 58, 0.62);
  --sga-card-border: rgba(247, 247, 247, 0.12);
  --sga-card-border-top: rgba(247, 247, 247, 0.22);
  --sga-card-shadow:
    0 40px 90px -24px rgba(4, 2, 24, 0.75),
    0 18px 40px -20px rgba(4, 2, 24, 0.55);
  --sga-heading: #f7f7f7;
  --sga-text: rgba(247, 247, 247, 0.78);
  --sga-text-muted: rgba(247, 247, 247, 0.55);
  --sga-accent: #a5f5fe;
  --sga-accent-2: #5ec8f2;
  --sga-on-accent: #06202b;
  --sga-accent-soft: rgba(165, 245, 254, 0.14);
  --sga-accent-glow: rgba(165, 245, 254, 0.35);
  --sga-link: #a5f5fe;
  --sga-link-soft: rgba(165, 245, 254, 0.85);
  --sga-label: rgba(247, 247, 247, 0.86);
  --sga-input-bg: rgba(247, 247, 247, 0.055);
  --sga-input-bg-hover: rgba(247, 247, 247, 0.085);
  --sga-input-border: rgba(247, 247, 247, 0.16);
  --sga-input-text: #ffffff;
  --sga-input-caret: #ffffff;
  --sga-autofill-fill: #171152;
  --sga-input-icon: rgba(247, 247, 247, 0.55);
  --sga-input-focus-border: rgba(165, 245, 254, 0.9);
  --sga-input-focus-glow: rgba(165, 245, 254, 0.18);
  --sga-divider: rgba(247, 247, 247, 0.13);
  --sga-toggle-bg: rgba(247, 247, 247, 0.07);
  --sga-toggle-border: rgba(247, 247, 247, 0.16);
  --sga-toggle-text: rgba(247, 247, 247, 0.88);
  --sga-toggle-bg-hover: rgba(247, 247, 247, 0.13);
  --sga-panel-bg:
    radial-gradient(560px 420px at 18% 8%, rgba(165, 245, 254, 0.16), transparent 58%),
    radial-gradient(680px 520px at 100% 100%, rgba(0, 112, 230, 0.42), transparent 60%),
    linear-gradient(160deg, #241a78 0%, #1a1361 46%, #400bff 165%);
  --sga-panel-border: rgba(247, 247, 247, 0.1);
  --sga-panel-text: #f7f7f7;
  --sga-panel-faint: rgba(247, 247, 247, 0.66);
  --sga-panel-img-shadow: 0 24px 54px -18px rgba(4, 2, 30, 0.65);
  --sga-panel-badge-bg: rgba(165, 245, 254, 0.12);
  --sga-panel-badge-border: rgba(165, 245, 254, 0.3);
  --sga-panel-badge-text: #a5f5fe;
  --sga-error: #ffb1b6;
  --sga-error-bg: rgba(242, 85, 90, 0.14);
  --sga-error-border: rgba(242, 85, 90, 0.38);
  --sga-success: #9ff0c8;
  --sga-success-bg: rgba(76, 195, 138, 0.12);
  --sga-success-border: rgba(76, 195, 138, 0.36);
  --sga-google-bg: rgba(247, 247, 247, 0.06);
  --sga-google-border: rgba(247, 247, 247, 0.18);
  --sga-google-text: #f7f7f7;
  --sga-google-bg-hover: #2dd4bf;
  --sga-google-border-hover: #2dd4bf;
  --sga-google-text-hover: #062623;
  --sga-focus-ring: #a5f5fe;
  --sga-btn-bg: linear-gradient(135deg, #0b6fe0 0%, #4a17f5 100%);
  --sga-btn-text: #ffffff;
  --sga-scroll-shadow: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ---- Day tokens ---- */
html[data-theme="day"] {
  --sga-bg-1: #ffffff;
  --sga-bg-2: #eef1fb;
  --sga-bg-3: #e7ecfb;
  --sga-bg-grad:
    radial-gradient(1100px 620px at 88% -10%, rgba(64, 11, 255, 0.1), transparent 60%),
    radial-gradient(900px 560px at 8% 110%, rgba(0, 112, 230, 0.12), transparent 62%),
    linear-gradient(155deg, var(--sga-bg-1) 0%, var(--sga-bg-2) 52%, var(--sga-bg-3) 100%);
  --sga-page-ink: #363435;
  --sga-card-bg: rgba(255, 255, 255, 0.9);
  --sga-card-border: rgba(26, 19, 97, 0.1);
  --sga-card-border-top: rgba(255, 255, 255, 0.95);
  --sga-card-shadow:
    0 40px 90px -30px rgba(26, 19, 97, 0.28),
    0 18px 40px -22px rgba(26, 19, 97, 0.18);
  --sga-heading: #1a1361;
  --sga-text: rgba(54, 52, 53, 0.82);
  --sga-text-muted: rgba(54, 52, 53, 0.55);
  --sga-accent: #1195e9;
  --sga-accent-2: #400bff;
  --sga-on-accent: #ffffff;
  --sga-accent-soft: rgba(17, 149, 233, 0.1);
  --sga-accent-glow: rgba(17, 149, 233, 0.28);
  --sga-link: #0b6fd6;
  --sga-link-soft: rgba(11, 111, 214, 0.9);
  --sga-label: rgba(26, 19, 97, 0.86);
  --sga-input-bg: rgba(26, 19, 97, 0.035);
  --sga-input-bg-hover: rgba(26, 19, 97, 0.06);
  --sga-input-border: rgba(26, 19, 97, 0.15);
  --sga-input-text: #24203c;
  --sga-input-caret: #24203c;
  --sga-autofill-fill: #ffffff;
  --sga-input-icon: rgba(26, 19, 97, 0.42);
  --sga-input-focus-border: rgba(17, 149, 233, 0.85);
  --sga-input-focus-glow: rgba(17, 149, 233, 0.14);
  --sga-divider: rgba(26, 19, 97, 0.11);
  --sga-toggle-bg: rgba(26, 19, 97, 0.045);
  --sga-toggle-border: rgba(26, 19, 97, 0.13);
  --sga-toggle-text: rgba(26, 19, 97, 0.82);
  --sga-toggle-bg-hover: rgba(26, 19, 97, 0.085);
  --sga-panel-bg:
    radial-gradient(560px 420px at 18% 8%, rgba(165, 245, 254, 0.2), transparent 58%),
    radial-gradient(680px 520px at 100% 100%, rgba(0, 112, 230, 0.5), transparent 60%),
    linear-gradient(160deg, #241a78 0%, #1a1361 46%, #400bff 165%);
  --sga-panel-border: rgba(255, 255, 255, 0.12);
  --sga-panel-text: #f7f7f7;
  --sga-panel-faint: rgba(247, 247, 247, 0.68);
  --sga-panel-img-shadow: 0 24px 54px -18px rgba(6, 4, 30, 0.45);
  --sga-panel-badge-bg: rgba(165, 245, 254, 0.14);
  --sga-panel-badge-border: rgba(165, 245, 254, 0.32);
  --sga-panel-badge-text: #a5f5fe;
  --sga-error: #b3242b;
  --sga-error-bg: rgba(242, 85, 90, 0.09);
  --sga-error-border: rgba(242, 85, 90, 0.32);
  --sga-success: #0d7a45;
  --sga-success-bg: rgba(76, 195, 138, 0.1);
  --sga-success-border: rgba(13, 122, 69, 0.32);
  --sga-google-bg: #ffffff;
  --sga-google-border: rgba(26, 19, 97, 0.16);
  --sga-google-text: #24203c;
  --sga-google-bg-hover: #f4f6ff;
  --sga-google-border-hover: rgba(26, 19, 97, 0.3);
  --sga-google-text-hover: #24203c;
  --sga-focus-ring: #1195e9;
  --sga-btn-bg: linear-gradient(135deg, #1195e9 0%, #400bff 100%);
  --sga-btn-text: #ffffff;
  --sga-scroll-shadow: rgba(26, 19, 97, 0.18);
  color-scheme: light;
}

/* ---- Layout knobs (overridden by the ACF inline CSS) ---- */
:root {
  --sga-font: var(--sg-font-fa, "Vazirmatn", "Montserrat", system-ui, sans-serif);
  --sga-card-w: 470px;
  --sga-card-pad: 40px;
  --sga-card-radius: 30px;
  --sga-logo-size: 96px;
  --sga-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sga-dur: 0.28s;
}

/* ---- Base ---- */
body.sg-auth-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--sga-bg-grad) fixed;
  color: var(--sga-text);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.sg-auth-page .sg-auth {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 56px 24px;
}
.sg-auth-page img,
.sg-auth-page svg {
  display: block;
  max-width: 100%;
}
.sg-auth-page h1,
.sg-auth-page h2,
.sg-auth-page h3,
.sg-auth-page p {
  margin: 0;
}
.sg-auth-page :focus-visible {
  outline: 2px solid var(--sga-focus-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---- Theme toggle (floating glass control, RTL-safe) ---- */
/* ---- Theme toggle (in the form header row, beside the logo) ----
   Displays only the icon for the AVAILABLE action — never both:
   base state (light/day default) shows the MOON (switch to dark);
   night mode swaps to the SUN (switch to light). */
.sga-theme-toggle {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid var(--sga-toggle-border);
  background: var(--sga-toggle-bg);
  color: var(--sga-toggle-text);
  cursor: pointer;
  transition: background var(--sga-dur) var(--sga-ease), transform var(--sga-dur) var(--sga-ease), border-color var(--sga-dur) var(--sga-ease);
}
.sga-theme-toggle:hover {
  background: var(--sga-toggle-bg-hover);
  border-color: var(--sga-accent-glow);
  transform: translateY(-1px);
}
.sga-theme-toggle:active { transform: translateY(0) scale(0.96); }
.sga-theme-toggle:focus-visible {
  outline: 2px solid var(--sga-focus-ring);
  outline-offset: 2px;
}
.sga-theme-toggle svg { width: 19px; height: 19px; }
/* Exactly ONE icon is ever visible, independent of markup order or of
   whether the html[data-theme] attribute is present at all. */
.sga-theme-toggle .sga-i-sun { display: none; }
html[data-theme="night"] .sga-theme-toggle .sga-i-sun { display: block; }
html[data-theme="night"] .sga-theme-toggle .sga-i-moon { display: none; }
/* In night mode the ACTION target is day → show the sun;
   in day mode show the moon. Never reversed by RTL. */

/* ---- Split-panel card ---- */
.sga-card {
  width: 100%;
  max-width: calc(var(--sga-card-w) * 2 - 40px);
  min-height: 560px; /* wider, more rectangular; still content-driven */
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  background: var(--sga-card-bg);
  border: 1px solid var(--sga-card-border);
  border-top-color: var(--sga-card-border-top);
  border-radius: var(--sga-card-radius);
  box-shadow: var(--sga-card-shadow);
  overflow: hidden;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.sga-card[data-panel="start"] .sga-panel { order: -1; }
.sga-card[data-panel="end"] .sga-panel { order: 2; }

/* ---- Branding panel ---- */
.sga-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 48px 40px;
  background: var(--sga-panel-bg);
  border-inline-end: 1px solid var(--sga-panel-border);
  color: var(--sga-panel-text);
  overflow: hidden;
}
/* Decorative ring + glow, purely presentational */
.sga-panel::before {
  content: "";
  position: absolute;
  inset-inline-end: -110px;
  top: -110px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1.5px solid rgba(165, 245, 254, 0.22);
  pointer-events: none;
}
.sga-panel::after {
  content: "";
  position: absolute;
  inset-inline-end: -60px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(165, 245, 254, 0.24) 0%, rgba(165, 245, 254, 0) 68%);
  pointer-events: none;
}
.sga-panel > * { position: relative; z-index: 1; }
.sga-panel-heading {
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--sga-panel-text);
}
.sga-panel-text {
  font-size: 0.93rem;
  line-height: 2;
  color: var(--sga-panel-faint);
}
.sga-panel-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(247, 247, 247, 0.14);
  box-shadow: var(--sga-panel-img-shadow);
}

/* ---- Form side ---- */
.sga-form-side {
  padding: var(--sga-card-pad);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Logo + theme toggle share one horizontal header row (RTL: logo right,
   toggle at the far end) — never stacked, never overlapping. */
.sga-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
}
/* One refined logo in the white panel (capped, never distorted) */
.sga-form-side .sga-logo {
  width: min(var(--sga-logo-size), 64px);
  height: auto;
}
.sga-logo { border-radius: 14px; }
.sga-logo--fallback {
  width: auto;
  max-width: var(--sga-logo-size);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--sga-heading);
}
.sga-head { display: flex; flex-direction: column; gap: 10px; }
.sga-head h1 {
  font-size: clamp(1.45rem, 2.3vw, 1.8rem);
  font-weight: 800;
  color: var(--sga-heading);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.sga-head h1::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 12px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sga-accent), var(--sga-accent-2));
}
.sga-head p {
  font-size: 0.92rem;
  line-height: 2;
  color: var(--sga-text-muted);
}

/* ---- Status banners ---- */
.sga-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 13px;
  font-size: 0.87rem;
  line-height: 1.9;
  border: 1px solid;
}
.sga-banner .sga-banner-icon { flex: none; margin-top: 4px; }
.sga-banner--error {
  color: var(--sga-error);
  background: var(--sga-error-bg);
  border-color: var(--sga-error-border);
}
.sga-banner--success {
  color: var(--sga-success);
  background: var(--sga-success-bg);
  border-color: var(--sga-success-border);
}
/* Belt-and-braces: the hidden attribute must always win over the base
   .sga-banner display rule (the empty banner must never render as a box). */
.sga-banner[hidden] {
  display: none !important;
}

/* ---- Fields ---- */
.sga-form { display: flex; flex-direction: column; gap: 18px; }
.sga-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
.sga-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sga-field--full { grid-column: 1 / -1; }
.sga-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sga-label);
  letter-spacing: 0.01em;
}
.sga-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sga-field-wrap .sga-field-icon {
  position: absolute;
  inset-inline-start: 15px;
  color: var(--sga-input-icon);
  pointer-events: none;
  display: inline-flex;
  transition: color var(--sga-dur) var(--sga-ease);
}
.sga-field-wrap:focus-within .sga-field-icon { color: var(--sga-accent); }
.sga-field input {
  width: 100%;
  height: 52px;
  padding: 0 46px;
  border-radius: 14px;
  border: 1.5px solid var(--sga-input-border);
  background: var(--sga-input-bg);
  color: var(--sga-input-text);
  font-size: 0.95rem;
  transition: border-color var(--sga-dur) var(--sga-ease), box-shadow var(--sga-dur) var(--sga-ease), background var(--sga-dur) var(--sga-ease);
}
.sga-field input:hover { background: var(--sga-input-bg-hover); }
.sga-field input::placeholder {
  color: var(--sga-text-muted);
  opacity: 1;
}
.sg-auth-page input::placeholder,
.sg-auth-page input::-webkit-input-placeholder {
  color: var(--sga-text-muted);
  opacity: 1;
}
.sga-field input:focus {
  outline: none;
  border-color: var(--sga-input-focus-border);
  box-shadow: 0 0 0 4px var(--sga-input-focus-glow);
  background: var(--sga-input-bg-hover);
}
/* Visible caret matching the text color in both themes */
.sga-field input {
  caret-color: var(--sga-input-caret);
}
/* Browser autofill (Chrome/Safari/Edge) repaints filled inputs with its own
   colors — in dark mode that means dark text on the dark card. Force the
   theme's text color and an opaque backdrop so user-filled fields stay
   readable. -webkit-text-fill-color beats UA autofill text color; the
   1000px inset shadow overrides the autofill background without touching
   the border radius. */
.sg-auth-page input:-webkit-autofill,
.sg-auth-page input:-webkit-autofill:hover,
.sg-auth-page input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sga-input-text);
  caret-color: var(--sga-input-caret);
  -webkit-box-shadow: 0 0 0 1000px var(--sga-autofill-fill) inset;
  transition: background-color 9999s ease-out 0s;
}
/* Dark mode: user-entered text must be pure white in EVERY state
   (typing, entered, focused, hovered, autofilled) and in every input
   (username/email, password, confirm, phone). High specificity +
   -webkit-text-fill-color so no UA / autofill-preview / bundle rule
   can darken it. Light mode is untouched. */
html[data-theme="night"] .sg-auth-page .sga-field input,
html[data-theme="night"] .sg-auth-page .sga-field input:hover,
html[data-theme="night"] .sg-auth-page .sga-field input:focus,
html[data-theme="night"] .sg-auth-page .sga-field input:active {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
}
html[data-theme="night"] .sg-auth-page .sga-field input:-webkit-autofill,
html[data-theme="night"] .sg-auth-page .sga-field input:-webkit-autofill:hover,
html[data-theme="night"] .sg-auth-page .sga-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
}
/* Night placeholders stay muted so they read as hints, not content. */
html[data-theme="night"] .sg-auth-page .sga-field input::placeholder {
  color: rgba(247, 247, 247, 0.45);
  -webkit-text-fill-color: rgba(247, 247, 247, 0.45);
}
/* Technical values (email / phone / password) read LTR inside the RTL page */
.sga-field input.sga-ltr {
  direction: ltr;
  text-align: left;
  font-family: "Montserrat", var(--sga-font);
  letter-spacing: 0.015em;
}
.sga-field input[aria-invalid="true"] {
  border-color: var(--sga-error-border);
  box-shadow: 0 0 0 4px var(--sga-error-bg);
}
/* Password visibility control sits INSIDE the field, never over text */
.sga-pass-toggle {
  position: absolute;
  inset-inline-end: 9px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sga-input-icon);
  cursor: pointer;
  transition: color var(--sga-dur) var(--sga-ease), background var(--sga-dur) var(--sga-ease);
}
.sga-pass-toggle:hover { color: var(--sga-input-text); background: var(--sga-toggle-bg); }
.sga-pass-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sga-focus-ring); }
.sga-pass-toggle .sga-i-eye-off { display: none; }
.sga-pass-toggle[aria-pressed="true"] .sga-i-eye { display: none; }
.sga-pass-toggle[aria-pressed="true"] .sga-i-eye-off { display: block; }
/* Password inputs: physical padding (NOT logical — the input itself is
   direction:ltr, so padding-inline-* would resolve against the input and
   reserve the WRONG side). The wrap is RTL: the eye toggle sits at the
   LEFT (9px + 36px), the lock icon at the RIGHT. Typed characters anchor
   to the right edge — they grow from the right and can never reach under
   the eye icon (58px > 45px eye footprint). */
.sga-field input.sga-has-toggle {
  padding-left: 58px;
  padding-right: 46px;
  text-align: right;
}
.sga-field-error {
  font-size: 0.78rem;
  color: var(--sga-error);
  line-height: 1.8;
}

/* Remember + lost password row */
.sga-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sga-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--sga-text);
  cursor: pointer;
  user-select: none;
}
.sga-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--sga-accent);
  cursor: pointer;
}
.sga-link {
  color: var(--sga-link);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--sga-dur) var(--sga-ease);
}
.sga-link:hover { color: var(--sga-link-soft); text-decoration: underline; text-underline-offset: 5px; }

/* ---- Buttons ---- */
.sga-btn {
  width: 100%;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 15px;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--sga-dur) var(--sga-ease), box-shadow var(--sga-dur) var(--sga-ease), background var(--sga-dur) var(--sga-ease), border-color var(--sga-dur) var(--sga-ease), opacity var(--sga-dur) var(--sga-ease);
}
.sga-btn--primary {
  background: var(--sga-btn-bg);
  color: var(--sga-btn-text);
  box-shadow: 0 16px 32px -14px var(--sga-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sga-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -14px var(--sga-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sga-btn--primary:active { transform: translateY(0) scale(0.99); }
.sga-btn:disabled { opacity: 0.65; cursor: default; transform: none; }
.sga-btn .sga-spinner { display: none; }
.sga-btn.is-loading .sga-btn-label { opacity: 0.8; }
.sga-btn.is-loading .sga-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: currentColor;
  border-inline-start-color: currentColor;
  animation: sga-spin 0.8s linear infinite;
}
@keyframes sga-spin { to { transform: rotate(360deg); } }

/* Divider */
.sga-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--sga-text-muted);
  font-size: 0.78rem;
}
.sga-divider::before,
.sga-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sga-divider);
}

/* Google button */
.sga-btn--google {
  background: var(--sga-google-bg);
  border: 1px solid var(--sga-google-border);
  color: var(--sga-google-text);
}
.sga-btn--google:hover {
  background: var(--sga-google-bg-hover);
  border-color: var(--sga-google-border-hover);
  color: var(--sga-google-text-hover);
  transform: translateY(-2px);
}
/* Dark mode hover: turquoise accent complementing the navy/purple palette.
   Dark text keeps contrast on turquoise; the official multicolor Google G
   stays untouched and clearly visible. Light mode keeps its own (unchanged)
   hover tokens. Focus-visible mirrors the hover for keyboard users. */
html[data-theme="night"] .sga-btn--google:hover,
html[data-theme="night"] .sga-btn--google:focus-visible {
  background: var(--sga-google-bg-hover);
  border-color: var(--sga-google-border-hover);
  color: var(--sga-google-text-hover);
  -webkit-text-fill-color: var(--sga-google-text-hover);
}

/* Conditional Google sign-in section (login page, below the description).
   Rendered only when OAuth is enabled AND fully configured — no reserved
   empty space otherwise. */
.sga-google-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sga-google-section .sga-btn--google { height: 48px; }
.sga-google-section .sga-divider { font-size: 0.76rem; }

/* Footer nav links */
.sga-alt {
  text-align: center;
  font-size: 0.88rem;
  color: var(--sga-text-muted);
}
.sga-alt a {
  color: var(--sga-link);
  font-weight: 700;
  text-decoration: none;
}
.sga-alt a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* A11y live region (visually hidden) */
.sga-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Responsive: tablet (split → panel becomes a horizontal hero strip) ---- */
@media (max-width: 980px) {
  .sga-card {
    max-width: var(--sga-card-w);
    min-height: 0; /* stacked layout: content-driven height */
    grid-template-columns: 1fr;
  }
  .sga-panel {
    order: -1 !important;
    padding: 30px var(--sga-card-pad);
    gap: 12px;
    border-inline-end: 0;
    border-bottom: 1px solid var(--sga-panel-border);
  }
  .sga-panel::before,
  .sga-panel::after { display: none; }
  .sga-panel-heading { font-size: 1.12rem; line-height: 1.65; }
  .sga-panel-text { font-size: 0.86rem; line-height: 1.9; }
  .sga-panel-img { height: 140px; border-radius: 14px; }
  /* Mobile compaction stays opt-in via ACF (auth_panel_mobile) */
  .sga-card[data-panel-mobile="hide"] .sga-panel { display: none; }
}
@media (max-width: 720px) {
  .sg-auth-page .sg-auth { padding: 30px 16px; }
  .sga-card { border-radius: calc(var(--sga-card-radius) - 10px); }
  /* Registration pairs stack to one column in logical order */
  .sga-grid { grid-template-columns: 1fr; gap: 16px; }
  .sga-field--full { grid-column: auto; }
}
@media (max-width: 480px) {
  .sg-auth-page .sg-auth { padding: 24px 14px; }
  .sga-theme-toggle { width: 38px; height: 38px; border-radius: 11px; }
  .sga-form-header { min-height: 38px; }
  .sga-form-side { padding: 24px 20px; gap: 16px; }
  .sga-panel { padding: 24px 20px; }
  .sga-panel-img { height: 120px; }
  .sga-field input { height: 48px; }
  .sga-btn { height: 50px; }
}
/* Landscape phones: keep the form reachable without long scrolls */
@media (max-height: 560px) and (orientation: landscape) {
  .sg-auth-page .sg-auth { padding: 16px; align-items: start; }
  .sga-panel { display: none; }
  .sga-form-side { padding: 20px 26px; gap: 12px; }
  .sga-head { gap: 6px; }
  .sga-form { gap: 12px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .sg-auth-page *,
  .sg-auth-page *::before,
  .sg-auth-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}