/* Chat-site skin for the account pages (login, signup, forgot, otp, callback, portal).
   Loaded last by scripts/website/package-site.cjs; the pages' own markup and scripts stay untouched.
   These pages switch theme with html[data-theme], so the tokens follow it. */
:root {
  --skin-wall: #0f141d;
  --skin-bar: #18202b;
  --skin-card: #1b2430;
  --skin-ink: #e9edef;
  --skin-muted: #93a1ad;
  --skin-line: #2a3542;
  --skin-field: #0f141d;
  --skin-lift: 0 14px 40px rgba(0, 0, 0, .45);
  --skin-brand: #fe790d;
  --skin-navy: #191e29;
}
html[data-theme="light"] {
  --skin-wall: #ece5dd;
  --skin-bar: #f7f5f2;
  --skin-card: #ffffff;
  --skin-ink: #111b21;
  --skin-muted: #5f6e78;
  --skin-line: #ddd6cc;
  --skin-field: #f4efe8;
  --skin-lift: 0 10px 30px rgba(11, 20, 26, .14);
}

/* Chat wallpaper behind everything */
body.auth-page,
body.portal-launch-v32 {
  background: var(--skin-wall) url("/assets/chat-doodles.svg") 0 0 / 260px 260px !important;
  color: var(--skin-ink) !important;
}
.auth-page main,
.auth-page .auth-wrap,
.portal-launch-v32 main,
.portal-launch-v32 .auth-view {
  background: transparent !important;
}
.portal-launch-v32 .auth-pattern { display: none !important; }

/* Top bar like the chat header */
.auth-page .header,
.portal-launch-v32 .portal-header {
  background: var(--skin-bar) !important;
  border-bottom: 1px solid var(--skin-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Arabic headings in the site's display font */
html[lang="ar"] .auth-page h1,
html[lang="ar"] .auth-page h2,
html[lang="ar"] .portal-launch-v32 .auth-intro h1,
html[lang="ar"] .portal-launch-v32 .login-card h2 {
  font-family: "Lalezar", "Segoe UI", Tahoma, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}
.auth-page .eyebrow,
.portal-launch-v32 .portal-kicker { color: var(--skin-brand) !important; }
.auth-page .auth-story p,
.auth-page .sub,
.portal-launch-v32 .auth-intro p,
.portal-launch-v32 .login-help { color: var(--skin-muted) !important; }

/* Cards look like the chat cards */
.auth-page .auth-card,
.portal-launch-v32 .login-card {
  background: var(--skin-card) !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: var(--skin-lift) !important;
}

/* Fields */
.auth-page .auth-card input,
.portal-launch-v32 .login-card input {
  border-radius: 12px !important;
  background: var(--skin-field) !important;
  border: 1px solid var(--skin-line) !important;
  color: var(--skin-ink) !important;
}
.auth-page .auth-card input:focus,
.portal-launch-v32 .login-card input:focus {
  border-color: var(--skin-brand) !important;
  outline: 3px solid rgba(254, 121, 13, .25) !important;
}

/* Main action: the site's orange pill with navy text */
.auth-page .btn-primary,
.portal-launch-v32 .login-card button[type="submit"] {
  background: var(--skin-brand) !important;
  color: var(--skin-navy) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(254, 121, 13, .35) !important;
}
.auth-page .google,
.portal-launch-v32 .portal-google-auth { border-radius: 999px !important; }

/* OTP and callback pages draw a text "AF"; show the approved mark instead */
.auth-page .brand .logo {
  display: inline-block !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  color: transparent !important;
  background: #0f141d url("/assets/af-mark-dark.png") center / 64% no-repeat !important;
}

/* Cookie choice box as a chat notice */
.auth-page .cookie {
  background: var(--skin-card) !important;
  border: 1px solid var(--skin-line) !important;
  border-radius: 16px !important;
  color: var(--skin-ink) !important;
}