/* =========================================================================
   KICKS — auth redesign (sneaker brand, no electric/charging motif)
   Loaded AFTER the SPA's stylesheet so it wins the cascade.
   ========================================================================= */

.authx,
body:has(.authx) {
  background:
    radial-gradient(120% 80% at 50% 0%, #FFF1D6 0%, #FFD9A3 100%) !important;
}

/* ---------- Hero (top) ---------- */
.authx-hero {
  background: transparent !important;
  color: #14213D !important;
  padding: 40px 22px 18px !important;
  position: relative;
  overflow: visible !important;
  text-align: center;
}
.authx-hero::before,
.authx-hero::after { display: none !important; }

/* Hide the broken kicks-hero.webp image + the old wordmark text */
.kx-wordmark img[src*="kicks-hero"] { display: none !important; }
.kx-wordmark > span                 { display: none !important; }

/* Replace the wordmark with the new K+sneaker logo (PNG, 1024) */
.kx-wordmark {
  display: block !important;
  width: 200px !important;
  height: 200px !important;
  margin: 0 auto 16px !important;
  background: url("/assets/kicks-mark-192.png") no-repeat center / contain !important;
  text-indent: -9999px;
  overflow: hidden;
}

/* Hero heading — sneaker-themed (was: "POWER UP" / "YOUR ACCOUNT") */
.authx-hero h1 {
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 0 10px !important;
  color: transparent !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  position: static !important;
  z-index: auto !important;
}
.authx-hero h1::before,
.authx-hero h1::after {
  display: block;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-family: 'Archivo Black','Arial Black',Impact,sans-serif;
  text-transform: uppercase;
  font-weight: 900;
}
/* Login mode: WELCOME BACK / TO KICKS */
.authx-in .authx-hero h1::before { content: "WELCOME BACK"; color: #14213D; }
.authx-in .authx-hero h1::after  { content: "TO KICKS";     color: #FF6B1A; margin-top: 4px; }
/* Signup mode: JOIN KICKS / LACE UP */
.authx-up .authx-hero h1::before { content: "JOIN KICKS";  color: #14213D; }
.authx-up .authx-hero h1::after  { content: "LACE UP";      color: #FF6B1A; margin-top: 4px; }

/* Subtitle */
.authx-hero-sub {
  color: #5A5A5A !important;
  text-align: center !important;
  margin: 12px auto 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  max-width: 320px !important;
  position: static !important;
  z-index: auto !important;
}
/* Sneaker-themed subtitles */
.authx-in .authx-hero-sub::after { content: "Sign in to step back into your pair."; }
.authx-up .authx-hero-sub::after { content: "Create your account in a few taps."; }
.authx-hero-sub > * { display: none !important; }
/* Hide the original React-rendered text node but keep the element for layout */
.authx-hero-sub { font-size: 0 !important; line-height: 0 !important; min-height: 0 !important; }
.authx-hero-sub::after {
  font-size: 15px;
  line-height: 1.45;
  display: block;
}

/* ---------- Language pill (top-right) ---------- */
.authx-lang {
  background: #14213D !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  top: 18px !important;
  right: 16px !important;
}
.authx-lang b   { color: #FF6B1A !important; font-weight: 800 !important; }
.authx-lang span{ color: #ffffff80 !important; opacity: 1 !important; }

/* ---------- Sheet (edge-to-edge, no card) ---------- */
.authx-sheet {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 calc(20px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative !important;
  z-index: auto !important;
}

/* Subtle separator above the form to anchor it visually */
.authx-sheet::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 0 18px;
  background: linear-gradient(90deg, transparent 0%, rgba(20,33,61,.10) 50%, transparent 100%);
}

/* Hide the form's "Sign in"/"Sign up" pseudo heading — the hero h1 covers it now */
.authx-form::before { display: none !important; content: none !important; }

/* Form layout */
.authx-form { gap: 16px !important; }

/* ---------- Input rows ---------- */
.authx-row { gap: 6px !important; }

.authx-row-head span {
  color: #FF6B1A !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}
.authx-row-head b {
  color: #14213D !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Input lines: white card with orange focus ring */
.authx-line {
  background: #fff !important;
  border: 1.5px solid #E5D6B5 !important;
  border-bottom: 1.5px solid #E5D6B5 !important;
  border-radius: 12px !important;
  height: 52px !important;
  padding: 0 14px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.authx-line:focus-within {
  border-color: #FF6B1A !important;
  box-shadow: 0 0 0 3px rgba(255,107,26,.14) !important;
  background: #fff !important;
}
.authx-line input,
.authx-line select {
  color: #1A1A1A !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-family: 'Space Grotesk',-apple-system,sans-serif !important;
}
.authx-line input::placeholder { color: #B5A78E !important; font-weight: 400 !important; }

.authx-cc {
  color: #14213D !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border-right: 1.5px solid #E5D6B5 !important;
  padding-right: 12px !important;
  cursor: pointer;
  appearance: none;
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  outline: 0;
  flex-shrink: 0;
}
.authx-eye { color: #FF6B1A !important; padding: 4px !important; }
.authx-eye:active { color: #14213D !important; }

/* ---------- Extras (remember / forgot) ---------- */
.authx-extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 4px 0;
  font-size: 13px;
}
.authx-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5A5A5A;
  cursor: pointer;
  user-select: none;
}
.authx-remember input { accent-color: #FF6B1A; width: 16px; height: 16px; }
.authx-forgot {
  background: none;
  border: 0;
  color: #FF6B1A;
  font: 700 13.5px 'Space Grotesk',sans-serif;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- CTA button — real SVG sneaker icon (no more ⚡) ---------- */
.authx-cta {
  background: linear-gradient(180deg, #FF8A3D 0%, #FF6B1A 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  width: 100% !important;
  height: 56px !important;
  margin-top: 10px !important;
  font-family: 'Archivo Black','Arial Black',Impact,sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 22px rgba(255,107,26,.32) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
  position: relative;
}
.authx-cta:hover  { box-shadow: 0 10px 26px rgba(255,107,26,.42) !important; }
.authx-cta:active { transform: scale(.985); }
.authx-cta:disabled{ opacity: .6 !important; cursor: not-allowed !important; }

/* Real sneaker SVG icon (white) */
.authx-cta::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%20fill%3D%27white%27%20stroke%3D%27white%27%20stroke-width%3D%272.5%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M4%2040h56v6H4z%27%20fill%3D%27white%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M5%2038c0-2.5%201.5-4.5%203.5-5.5l7-2.5%205-7%2011%202.5%2010%207%209%201.5c3%20.5%205.5%202.5%207%205l1.5%203H5z%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2728%27%20r%3D%271.8%27%20fill%3D%27%2314213D%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2722%27%20cy%3D%2725%27%20r%3D%271.8%27%20fill%3D%27%2314213D%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2726%27%20cy%3D%2722%27%20r%3D%271.8%27%20fill%3D%27%2314213D%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  flex-shrink: 0;
}

/* ---------- Switch link (sign in / sign up toggle) ---------- */
.authx-switch {
  color: #5A5A5A !important;
  text-align: center !important;
  margin-top: 16px !important;
  padding-top: 0 !important;
  font-size: 14px !important;
}
.authx-switch button {
  color: #14213D !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

/* ---------- Form error ---------- */
.form-error {
  color: #B00020 !important;
  background: #FFE4E4 !important;
  border: 1px solid #FFB4B4 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  text-align: center;
  margin-top: 4px;
}

/* ---------- OTP/SMS code row ---------- */
.authx-form .authx-row input[name="otp"],
.authx-form .authx-row input[autocomplete="one-time-code"],
.authx-form .authx-row input[inputmode="numeric"][maxlength="6"] {
  letter-spacing: 0.4em;
  font-weight: 700;
  text-align: center;
  font-size: 18px;
}

/* ---------- Responsive tightening ---------- */
@media (max-width: 380px) {
  .authx-hero { padding: 28px 18px 12px !important; }
  .authx-hero h1::before,
  .authx-hero h1::after  { font-size: 24px; }
  .kx-wordmark { width: 150px !important; height: 150px !important; }
  .authx-sheet { margin: 10px !important; padding: 22px 18px 18px !important; }
  .authx-cta   { font-size: 16px !important; height: 52px !important; }
}