/*
 * Customer auth screen — hand-written CSS, no framework.
 *
 * Tokens are copied from the theme's style.css on purpose rather than imported: this plugin
 * must render correctly even if the theme is swapped (see the plugin header for why auth is
 * theme-independent). The VALUES are the project's locked palette, so the two screens match.
 *
 * Dark-first, matching the landing page: bare :root is dark, [data-theme="light"] overrides.
 */

:root {
  --bg: #0A0F1E;
  --surface: #121A2C;
  --surface2: #1A2338;
  --border: #232E47;
  --text: #F1F5F9;
  --muted: #8B96AC;
  --blue: #3B82F6;
  --cyan: #22D3EE;
  --green: #22C55E;
  --red: #EF4444;
  --amber: #F59E0B;
  --ring: rgba(34, 211, 238, 0.28);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #F6F8FC;
  --surface: #FFFFFF;
  --surface2: #EEF2F9;
  --border: #DCE3F0;
  --text: #0B1220;
  --muted: #5B6478;
  color-scheme: light;
}

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

html, body { height: 100%; }

.btk-body {
  margin: 0;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background:
    radial-gradient(70% 55% at 50% -5%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: Morabba, Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .25s ease, color .25s ease;
}

#btk-net {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.btk-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- corner controls ---------- */

.btk-corner {
  position: fixed;
  top: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.btk-corner:hover { border-color: color-mix(in srgb, var(--cyan) 50%, transparent); color: var(--cyan); }
.btk-corner--right { inset-inline-end: 20px; }
.btk-corner--left { inset-inline-start: 20px; width: 44px; padding: 0; justify-content: center; }
.btk-corner svg { width: 20px; height: 20px; }

/* Only one of the two theme glyphs shows at a time — swapped by class, not by rewriting the
   DOM, so there is no flash of the wrong icon and nothing depends on an icon webfont loading. */
.btk-ico-moon { display: none; }
[data-theme="light"] .btk-ico-sun { display: none; }
[data-theme="light"] .btk-ico-moon { display: block; }

/* ---------- shell + card ---------- */

.btk-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 940px;
}

@keyframes btk-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.btk-card {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  /* Layered rather than one flat drop-shadow: wide ambient + tight contact + a cyan glow that
     lifts the card off the animated background, and a hairline inner top edge for the
     "light catching the rim" look. */
  box-shadow:
    0 48px 90px -32px rgba(0, 0, 0, .62),
    0 12px 28px -12px rgba(0, 0, 0, .45),
    0 40px 80px -40px rgba(34, 211, 238, .28),
    inset 0 1px 0 color-mix(in srgb, var(--text) 13%, transparent);
  animation: btk-rise .5s cubic-bezier(.2, .7, .3, 1) both;
}
@media (min-width: 900px) {
  .btk-card { grid-template-columns: 1fr 1.05fr; }
}

/* ---------- brand panel (desktop only) ---------- */

.btk-brand {
  position: relative;
  display: none;
  padding: 48px 40px 48px 76px;
  /* Logical radius, not `22px 0 0 22px`: this panel sits on the RIGHT in RTL, so a physical
     shorthand would round the wrong two corners. */
  border-start-end-radius: 22px;
  border-end-end-radius: 22px;
  /* Clip only this panel, never the whole card — clipping the card was what previously chewed
     the edges off glows that legitimately sit near its boundary. */
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 900px) { .btk-brand { display: block; } }

/* The gradient lives on a pseudo-element rather than the panel itself so the diagonal seam can
   be a clip-path (echoing the split-panel reference the owner liked, in our palette) while the
   panel keeps its rounded outer corners — clip-path on the panel would override border-radius
   and square them off. */
.btk-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #1D4ED8 0%, #2563EB 38%, #0E7490 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
}

.btk-brand__glow {
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -25%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .3), transparent 65%);
  filter: blur(12px);
}

.btk-brand__inner { position: relative; z-index: 1; color: #fff; }

.btk-logo-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 156px;
  height: 156px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
}
/* Slow sweeping conic highlight around the logo — the one piece of ambient motion inside the
   card. It rotates a gradient ring, not the logo itself, so the mark stays perfectly still and
   legible (the owner asked for a static logo). */
.btk-logo-ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0turn, rgba(255,255,255,.85) .12turn, transparent .3turn, transparent 1turn);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: btk-spin 6s linear infinite;
}
@keyframes btk-spin { to { transform: rotate(1turn); } }

.btk-logo { display: block; width: 120px; height: auto; }
.btk-logo--mobile { width: 72px; margin: 0 auto 18px; }
@media (min-width: 900px) { .btk-logo--mobile { display: none; } }

.btk-brand__tag {
  margin: 0 0 28px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.55;
  text-wrap: balance;
}

.btk-brand__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.btk-brand__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,.9); }
.btk-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #67E8F9; box-shadow: 0 0 12px #67E8F9; }

/* ---------- form panel ---------- */

.btk-panel {
  padding: 40px 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 560px) { .btk-panel { padding: 32px 22px 26px; } }

/* ---------- step indicator ---------- */

.btk-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.btk-step { display: flex; align-items: center; gap: 7px; }
/* REAL BUG FIXED HERE: `display:flex` on a class selector beats the browser's built-in
   `[hidden]{display:none}`, so the "مشخصات" step — hidden until we know the number is new —
   was rendering anyway, showing two steps both numbered ۲. Any class that sets `display` has
   to restore `hidden` explicitly. */
.btk-step[hidden] { display: none; }
.btk-step + .btk-step:not([hidden])::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--border);
  margin-inline-end: 3px;
}
.btk-step span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  font-size: 12px;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
  /* NOTE (2026-09-15): a `translate: 0 1.5px` here was removed. This span IS the numbered
     circle (its own 24px box with a border), so translating it moved the whole badge down
     relative to the "شماره موبایل" label beside it — the step row stopped lining up. That is
     the misalignment the owner reported on iPhone, not the glyph offset it was meant to fix.
     See style.css .btn-gradient's note for the full measurement. */
}
.btk-step.is-active { color: var(--text); }
.btk-step.is-active span {
  background: linear-gradient(120deg, var(--blue), var(--cyan));
  border-color: transparent;
  color: #0A0F1E;
}
.btk-step.is-done span { border-color: color-mix(in srgb, var(--green) 60%, transparent); color: var(--green); }

/* ---------- alert ---------- */

.btk-alert {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--red) 34%, transparent);
  background: color-mix(in srgb, var(--red) 13%, transparent);
  color: color-mix(in srgb, var(--red) 55%, var(--text));
  font-size: 13.5px;
}

/* ---------- step stage / views ---------- */

/* Height animates between steps so the card grows and shrinks smoothly instead of snapping.
   Only the stage clips, never the card, so focus rings and glows on the fields inside stay
   whole right up to the card's padding. */
.btk-stage {
  position: relative;
  overflow: hidden;
  transition: height .38s cubic-bezier(.2, .7, .3, 1);
}

.btk-view {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(28px);
  transition: opacity .3s ease, transform .38s cubic-bezier(.2,.7,.3,1), visibility .38s;
}
.btk-view.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Going backwards slides from the other side, so the direction of travel always matches the
   direction of the flow — forward advances one way, "back" reverses it. */
.btk-view.is-leaving-back { transform: translateX(-28px); }

.btk-title { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.btk-sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; }

/* ---------- fields ---------- */

.btk-label {
  display: block;
  margin-bottom: 7px;
  padding-inline-start: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  /* Keeps this RTL run from being re-ordered against the forced-LTR value in the field below
     it, and gives the text its own line box so nothing can shave the leading character. */
  unicode-bidi: isolate;
}

.btk-field { position: relative; margin-bottom: 16px; }
.btk-field__ico {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--muted);
  pointer-events: none;
  transition: color .2s ease;
}
.btk-field:focus-within .btk-field__ico { color: var(--cyan); }

.btk-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px 0 46px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  direction: ltr;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btk-field input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.btk-field input:hover { border-color: color-mix(in srgb, var(--text) 22%, var(--border)); }
/* One focus treatment only. Stacking an `outline` and a `box-shadow` ring produced two
   misaligned rings around the same rounded corner — the "border spilling out" glitch. */
.btk-field input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px var(--ring); }
.btk-field input:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px var(--ring); }

.btk-hint { margin: -8px 0 20px; padding-inline-start: 2px; font-size: 12px; color: var(--muted); unicode-bidi: isolate; }

/* ---------- OTP boxes ---------- */

.btk-otp {
  display: flex;
  flex-direction: row-reverse; /* first digit on the right, matching the RTL reading order */
  justify-content: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
.btk-otp__box {
  width: 48px;
  height: 58px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-size: 23px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btk-otp__box:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px var(--ring); transform: translateY(-2px); }
.btk-otp__box.is-filled { border-color: color-mix(in srgb, var(--cyan) 55%, var(--border)); }
@media (max-width: 420px) {
  .btk-otp { gap: 6px; }
  .btk-otp__box { width: 42px; height: 52px; font-size: 20px; }
}

@keyframes btk-shake {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(4px); }
  50%      { transform: translateX(-4px); }
}
.btk-otp.is-wrong { animation: btk-shake .4s ease both; }

.btk-testcode {
  margin: -10px 0 18px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  color: color-mix(in srgb, var(--amber) 62%, var(--text));
  font-size: 12.5px;
  text-align: center;
}

/* ---------- buttons ---------- */

.btk-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background-position .5s ease, border-color .2s ease;
  /* (A `translate: 0 1.5px` was removed here 2026-09-15 — see .btk-step span's note above.) */
}
.btk-btn--primary {
  color: #06121F;
  background-image: linear-gradient(95deg, var(--blue), var(--cyan), var(--blue));
  background-size: 220% 100%;
  background-position: 0 0;
  box-shadow:
    0 10px 28px -10px rgba(34, 211, 238, .7),
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -2px 5px rgba(0, 0, 0, .16);
}
.btk-btn--primary:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(34,211,238,.85), inset 0 1px 0 rgba(255,255,255,.45); }
.btk-btn--primary:active { transform: translateY(0) scale(.99); }
.btk-btn--ghost {
  flex: 0 0 auto;
  width: auto;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
}
.btk-btn--ghost:hover { border-color: color-mix(in srgb, var(--cyan) 50%, transparent); color: var(--cyan); }
.btk-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btk-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btk-row { display: flex; gap: 10px; }
.btk-row .btk-btn--primary { flex: 1; }

/* Spinner replaces the label in place, so the button never changes size mid-request (which
   would shift everything under it at the exact moment the user is waiting on feedback). */
.btk-spinner {
  display: none;
  width: 19px;
  height: 19px;
  border: 2px solid rgba(6, 18, 31, .3);
  border-top-color: #06121F;
  border-radius: 50%;
  animation: btk-spin .7s linear infinite;
}
.btk-btn.is-busy .btk-btn__label { display: none; }
.btk-btn.is-busy .btk-spinner { display: block; }

.btk-link {
  border: 0;
  background: none;
  padding: 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
  cursor: pointer;
}
.btk-link:hover { text-decoration: underline; }
.btk-link[disabled] { color: var(--muted); cursor: not-allowed; text-decoration: none; }
.btk-link--muted { display: block; margin: 4px auto 0; color: var(--muted); }
.btk-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }

.btk-resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.btk-timer { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- done ---------- */

.btk-success {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 6px auto 20px;
  border-radius: 50%;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
}
.btk-success svg { width: 30px; height: 30px; }
.btk-view[data-view="done"] { text-align: center; }

.btk-phone-echo { font-weight: 700; color: var(--text); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}