/*
==============================================================================
auth.css — Shared styles for all authentication pages
==============================================================================
What:  Single source of truth for auth layout, card, brand mark, form inputs,
       buttons, and utility rules. Previously duplicated ~140 lines × 4
       templates. Loading once here cuts ~560 lines of inline <style>.

Design: Intentionally dark-only surface. Auth pages extend base.html (not
       app/base.html) and do not participate in the app light/dark toggle.
       Background #080c14 · Card #111827 · Accent indigo #6366f1.
==============================================================================
*/

/* ── Layout ──────────────────────────────────────────────── */
.auth-wrap {
  min-height: calc(100vh - 60px);
  display: flex; align-items: center; justify-content: center;
  padding: 48px 20px;
  background: #080c14;
  position: relative;
  overflow: hidden;
}
/* brand-tinted ambient glow — intentional dark surface, reads on both themes */
.auth-wrap::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 400px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(99,102,241,.1), transparent 65%);
  pointer-events: none; filter: blur(60px);
}

/* ── Card ────────────────────────────────────────────────── */
.auth-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  background: #111827;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

/* ── Brand mark ──────────────────────────────────────────── */
.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 12px;
}
.auth-brand-logo {
  width: 36px; height: 36px; border-radius: 9px; overflow: hidden;
  mix-blend-mode: lighten;
}
.auth-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.auth-brand-name {
  font-size: 1.15rem; font-weight: 800; color: #f1f5f9;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}
.auth-brand-beta {
  padding: 2px 7px; border-radius: 999px;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.22);
  font-size: 9px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: #f59e0b;
}

/* ── Heading + sub ───────────────────────────────────────── */
.auth-title {
  font-size: 1.45rem; font-weight: 800; color: #f1f5f9;
  letter-spacing: -.4px; margin: 0 0 6px;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  text-align: center;
  /* base.css sets a gradient on h1 — reset it here */
  background: none !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
.auth-sub {
  font-size: .875rem; color: #64748b; text-align: center;
  margin: 0 0 28px; line-height: 1.5;
}

/* ── Alerts ──────────────────────────────────────────────── */
.auth-alert {
  padding: 10px 14px; border-radius: 10px; margin-bottom: 16px;
  font-size: .85rem; font-weight: 500; line-height: 1.5;
}
.auth-alert.error {
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
  color: #f87171;
}
.auth-alert.success {
  background: rgba(34,197,94,.07); border: 1px solid rgba(34,197,94,.18);
  color: #22c55e;
}

/* ── Form layout ─────────────────────────────────────────── */
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .auth-grid { grid-template-columns: 1fr; } }

.auth-field { margin-bottom: 14px; }
.auth-field:last-of-type { margin-bottom: 22px; }
.auth-field-submit { margin-top: 22px; }

.auth-label {
  display: block; margin-bottom: 6px;
  font-size: .8rem; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: #94a3b8;
}
.auth-label.required::after { content: " *"; color: #ef4444; }

/* ── Inputs ──────────────────────────────────────────────── */
.auth-input {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: .92rem; color: #f1f5f9;
  font-family: inherit; outline: none;
  transition: border-color .15s, background .15s;
}
.auth-input:focus {
  border-color: rgba(99,102,241,.5);
  background: rgba(255,255,255,.06);
}
.auth-input::placeholder { color: #475569; }

/* select widget — matches text input visually */
select.auth-input, #id_country {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}
select.auth-input option, #id_country option {
  background: #252d3d; color: #f1f5f9;
}
#id_country:focus { border-color: rgba(99,102,241,.5); }

/* ── Password toggle ─────────────────────────────────────── */
/* Button sits inside input right padding — no layout shift on reveal. */
.pw-wrap { position: relative; }
.pw-wrap .auth-input { padding-right: 44px; }
.pw-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: #64748b; border-radius: 8px;
  transition: color .14s, background .14s;
}
.pw-toggle:hover { color: #cbd5e1; background: rgba(255,255,255,.04); }
.pw-toggle:focus-visible { outline: 2px solid rgba(99,102,241,.5); outline-offset: -2px; }
.pw-toggle svg { width: 18px; height: 18px; }

/* ── Primary button ──────────────────────────────────────── */
.auth-btn {
  width: 100%; padding: 12px;
  background: #6366f1; color: #fff;
  border: none; border-radius: 10px;
  font-size: .95rem; font-weight: 700; cursor: pointer;
  font-family: inherit; text-decoration: none; display: block; text-align: center;
  box-shadow: 0 4px 20px rgba(99,102,241,.3);
  transition: background .18s, transform .12s, box-shadow .18s;
}
.auth-btn:hover {
  background: #4f46e5; color: #fff; transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(99,102,241,.4); text-decoration: none;
}
.auth-btn:active { transform: scale(.98); }

/* ghost — secondary action (e.g. resend verification) */
.auth-btn-ghost {
  width: 100%; padding: 11px; background: transparent; color: #64748b;
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  font-size: .88rem; font-weight: 600; cursor: pointer; font-family: inherit;
  margin-top: 10px; text-decoration: none; display: block; text-align: center;
  transition: border-color .15s, color .15s;
}
.auth-btn-ghost:hover {
  border-color: rgba(255,255,255,.18); color: #94a3b8; text-decoration: none;
}

/* tinted — open inbox button on verification page */
.auth-btn-check {
  width: 100%; padding: 12px;
  background: rgba(99,102,241,.1); color: #818cf8;
  border: 1px solid rgba(99,102,241,.25); border-radius: 10px;
  font-size: .88rem; font-weight: 700; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 10px; text-decoration: none;
  transition: background .18s, border-color .18s;
}
.auth-btn-check:hover {
  background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.4);
  text-decoration: none; color: #818cf8;
}

/* ── Footer links ────────────────────────────────────────── */
/* flex column so multiple links stack cleanly without "or" separators */
.auth-footer {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; margin-top: 20px;
  font-size: .85rem; color: #475569;
}
.auth-footer a { color: #6366f1; font-weight: 600; transition: color .14s; }
.auth-footer a:hover { color: #818cf8; text-decoration: none; }

/* ── Free beta note (under register submit) ──────────────── */
.auth-free-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; font-size: .78rem; color: #839cc1;
}
.auth-free-note::before { content: '✓'; color: #22c55e; font-weight: 800; }

/* ── Registration success — animated envelope ────────────── */
.email-icon-wrap {
  width: 64px; height: 64px; border-radius: 20px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  animation: auth-pulse 2.5s ease-in-out infinite;
}
@keyframes auth-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.15); }
  50%       { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
}
.email-icon-wrap svg { width: 32px; height: 32px; }

.email-highlight {
  display: inline-block; margin: 12px 0 20px;
  padding: 8px 16px;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.18);
  border-radius: 8px;
  font-size: .9rem; font-weight: 700; color: #818cf8;
  letter-spacing: .1px; word-break: break-all;
}

.spam-tip {
  margin-top: 18px; font-size: .78rem; color: #ababab; line-height: 1.5;
}
.spam-tip a { color: #6366f1; font-weight: 600; text-decoration: none; }
.spam-tip a:hover { color: #818cf8; }

/* ── Divider (reserved for future SSO row) ───────────────── */
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; color: #334155; font-size: .8rem;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.06);
}