/* =============================================================
   WowCodes Portal — auth-theme.css
   Shared chrome for the standalone auth pages (sign in, register,
   forgot/reset password, verify email): ambient background, pill
   buttons and preloader mirror the wowcodes.in marketing site so
   the portal doesn't feel like a different product mid-session.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  padding: 24px 16px;
  position: relative;
}

a { color: inherit; }

/* Same fixed noise texture used on the marketing pages, so switching
   between wowcodes.in and the portal doesn't read as a texture change. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Ambient background blobs ─────────────────────────────────── */
.bg-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-blob { position: absolute; border-radius: 50%; filter: blur(90px); }
.bg-blob-1 {
  top: -12%; left: -10%; width: 480px; height: 480px;
  background: radial-gradient(circle, var(--amber-10) 0%, transparent 70%);
  animation: bgBlobDrift1 26s ease-in-out infinite;
}
.bg-blob-2 {
  bottom: -15%; right: -10%; width: 520px; height: 520px;
  background: radial-gradient(circle, var(--teal-bg) 0%, transparent 70%);
  animation: bgBlobDrift2 32s ease-in-out infinite;
}
@keyframes bgBlobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes bgBlobDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -60px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-blob-1, .bg-blob-2 { animation: none; }
}

/* ── Page preloader ────────────────────────────────────────────── */
#wc-preloader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity 0.45s ease; }
#wc-preloader::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 620px 420px at 50% 45%, var(--amber-14), transparent 70%); pointer-events: none; }
.wc-preloader-mark { position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.wc-preloader-ring { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid var(--amber-bg2); border-top-color: var(--amber); animation: wcPreloaderSpin 0.85s linear infinite; }
.wc-preloader-logo { width: 22px; height: 22px; position: relative; animation: wcPreloaderPulse 1.6s ease-in-out infinite; }
@keyframes wcPreloaderSpin { to { transform: rotate(360deg); } }
@keyframes wcPreloaderPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.86); } }
#wc-preloader.wc-preloader-hide { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wc-preloader-ring, .wc-preloader-logo { animation: none; } }

/* ── Back-to-site button — fixed top-left mobile header stand-in,
   since these auth pages have no top bar of their own. ────────── */
.auth-back-btn {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  inset-inline-start: 16px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 8px;
  padding-inline: 10px 14px;
  border-radius: 999px;
  background: var(--bg2);
  border: 0.5px solid var(--border2);
  color: var(--text2);
  font-size: 12.5px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.auth-back-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.auth-back-btn:hover { border-color: var(--amber); color: var(--amber-d); background: var(--amber-bg); }

/* ── Layout ────────────────────────────────────────────────────── */
.auth-wrap {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  color: var(--text);
  letter-spacing: -0.3px;
}
.auth-logo img { height: 24px; width: auto; display: block; }
.auth-logo .brand-tld { color: var(--amber); }

/* Soft glow behind the card, matching the marketing hero's .hero-glow */
.auth-glow {
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 640px; height: 320px;
  background: radial-gradient(ellipse, var(--amber-14) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.auth-card > *:not(.auth-glow) { position: relative; z-index: 1; }

.auth-card {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--rl);
  padding: 40px;
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-align: start;
  box-shadow: 0 24px 60px var(--shadow-35);
}

.auth-card h1 {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.3px;
}

.auth-card.auth-card-center { text-align: center; }

.auth-subtitle {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 24px;
  line-height: 1.5;
}

.status-icon { font-size: 48px; display: block; margin-bottom: 16px; }

.auth-card p.auth-lede {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 24px;
  overflow-wrap: anywhere;
}

/* ── Alerts ────────────────────────────────────────────────────── */
.alert {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: var(--r);
  margin-bottom: 16px;
  border: 0.5px solid;
  line-height: 1.5;
}
.alert-error { background: var(--danger-08); border-color: var(--danger-20); color: var(--danger-d); }
.alert-success { background: var(--teal-bg); border-color: var(--teal-20); color: var(--teal-d); }

/* ── Forms ─────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label { font-size: 13px; color: var(--text2); font-weight: 500; }

.input-wrap { position: relative; }
.auth-input {
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  border-radius: var(--r);
  padding: 10px 14px;
  color: var(--text);
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
.auth-input:focus-visible { outline: 2px solid var(--base); outline-offset: 1px; }
.auth-input::placeholder { color: var(--text3); }
.auth-input.has-toggle { padding-inline-end: 42px; }

.pw-toggle {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text3);
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}
.pw-toggle:hover { color: var(--text2); }
.pw-toggle svg { width: 16px; height: 16px; }

.strength-track { height: 3px; border-radius: 2px; background: var(--bg4); margin-top: 6px; }
.strength-fill { height: 100%; border-radius: 2px; transition: all 0.3s; width: 0; }

.remember-row { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.remember-row input[type="checkbox"] { accent-color: var(--amber); width: 14px; height: 14px; cursor: pointer; }
.remember-row label { font-size: 13px; color: var(--text2); cursor: pointer; }

/* ── Buttons — pill CTA, matching .pt-nav__cta in chrome.css ─────── */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--base);
  color: var(--on-base);
  font-weight: 700;
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: 0.1px;
  text-decoration: none;
  box-shadow: var(--shadow);
  margin-top: 4px;
}
.btn-primary:hover,
.btn-secondary:hover { background: var(--base-d); }
.btn-primary:active,
.btn-secondary:active { transform: scale(0.97); }

.btn-secondary { width: auto; padding: 12px 28px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text2);
  font-weight: 500;
  padding: 11px 28px;
  border-radius: 999px;
  border: 0.5px solid var(--border2);
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-d); background: var(--amber-bg); }

.auth-foot { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text2); }
.auth-foot a { color: var(--amber); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

.expired-box { text-align: center; }
.expired-icon { font-size: 40px; margin-bottom: 12px; display: block; }
.expired-box p { color: var(--text2); font-size: 14px; margin-bottom: 20px; line-height: 1.6; }

/* ── License picker — authorize-install.php's list of fetchable licenses ── */
.license-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.license-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0.5px solid var(--border2);
  border-radius: var(--r);
  background: var(--bg3);
  color: var(--text2);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.license-pick:hover { border-color: var(--base); }
.license-pick:has(input:checked) { border-color: var(--base); background: var(--base-bg); color: var(--text); }
.license-pick input[type="radio"] { accent-color: var(--base); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }

/* Age confirmation on the register form. register.php re-checks it on the
   POST — this is only the row it sits in. The label wraps the input so the
   text is part of the hit area, and the checkbox keeps its own size rather
   than being stretched by the flex column .form-group sets up. */
.form-group--check { margin-bottom: 18px; }

.check-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text2);
  font-weight: 400;
  cursor: pointer;
}

.check-line input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--accent, currentColor);
  cursor: pointer;
}