/* ══════════════════════════════════════════════════════════════
   auth-v2.css — Login / Register screen (two-panel immersive design)
   قدها وقدود | recreated from the Claude-Design handoff «شاشة تسجيل الدخول»
   Landscape: brand teaser (left) + account card (right).
   Portrait / small: stacked, brand compact on top, card below (page scrolls).
   Reuses the shared form/input tokens from base.css + components.css.
   ══════════════════════════════════════════════════════════════ */

/* keyframes are self-contained here so login doesn't depend on home-v2.css.
   (`spin` for the loading dots already lives in animations.css.) */
@keyframes auth2-glowspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes auth2-pop  { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes auth2-logofloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes auth2-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-12px) rotate(var(--r, 0deg)); } }
@keyframes auth2-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,200,87,0.55), 0 12px 30px rgba(46,230,197,0.38); }
  50%      { box-shadow: 0 0 0 14px rgba(255,200,87,0), 0 12px 30px rgba(46,230,197,0.38); }
}

.auth2-body { margin: 0; }

/* ── Root: full-bleed two-panel ─────────────────────────────── */
.auth2-root {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background:
    radial-gradient(ellipse at 18% 15%, rgba(255,200,87,0.30), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(46,230,197,0.30), transparent 55%),
    var(--gradient-main);
}
/* Decorative conic disc. It ROTATES, so a square the size of the page sweeps a
   bounding box up to 1.41× as wide — on a 390px phone that is ~550px, i.e. the
   page pans sideways ~80px and the layout looks shifted and cut off. Clipping it
   at the page level (`overflow-x: clip` below) only helps on browsers that
   support `clip`; iOS Safari < 16 falls back to `visible` and the overflow comes
   right back. So the disc is clipped by its OWN box instead: `.auth2-spin` is the
   fixed, non-transformed clipping frame and the rotation lives on ::before. */
.auth2-spin {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.auth2-spin::before {
  content: '';
  position: absolute;
  inset: -25%;
  background: conic-gradient(from 0deg, rgba(255,200,87,0.10), rgba(46,230,197,0.10), rgba(255,200,87,0.10));
  animation: auth2-glowspin 60s linear infinite;
}

/* ── Brand / teaser panel ───────────────────────────────────── */
.auth2-brand {
  position: relative;
  z-index: 1;
  flex: 1.25 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(10px, 2.5svh, 28px) clamp(16px, 3vw, 48px) clamp(74px, 12svh, 108px);
}

.auth2-traps { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.auth2-traps img {
  position: absolute;
  height: auto;
  animation: auth2-float 6s ease-in-out infinite;
}
.auth2-trap-1 { top: 9%;  right: 5%;   width: clamp(64px,11svh,120px); --r: -9deg; animation-duration: 5.2s; filter: drop-shadow(0 10px 22px rgba(255,200,87,0.40)); }
.auth2-trap-2 { bottom: 24%; left: 4.5%; width: clamp(58px,10svh,108px); --r: 7deg;  animation-duration: 6.1s; animation-delay: .8s; filter: drop-shadow(0 10px 22px rgba(255,138,92,0.40)); }
.auth2-trap-3 { top: 13%; left: 9%;     width: clamp(52px,9svh,96px);   --r: 11deg; animation-duration: 5.6s; animation-delay: .4s; filter: drop-shadow(0 10px 22px rgba(255,217,61,0.40)); }
.auth2-trap-4 { bottom: 28%; right: 7%; width: clamp(52px,9svh,96px);   --r: -6deg; animation-duration: 6.6s; animation-delay: 1.2s; filter: drop-shadow(0 10px 22px rgba(125,211,252,0.45)); }

.auth2-logo {
  position: relative;
  z-index: 1;
  width: min(32vw, 42svh);
  min-width: 210px;
  max-height: 46svh;
  object-fit: contain;
  filter: drop-shadow(0 14px 44px rgba(46,230,197,0.35)) drop-shadow(0 -6px 28px rgba(255,200,87,0.30));
  animation: auth2-logofloat 4.5s ease-in-out infinite;
}

.auth2-title {
  position: relative;
  z-index: 1;
  margin: clamp(8px,1.6svh,14px) 0 clamp(8px,1.4svh,12px);
  font-size: clamp(26px, 4.6svh, 46px);
  font-weight: var(--weight-black);
  color: var(--text-primary);
}
.auth2-tagline {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 560px;
  font-size: clamp(14px, 2svh, 17.5px);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  line-height: 1.95;
  text-wrap: pretty;
}

/* ── Character stamps strip (static, faded, rotated) ────────── */
.auth2-stamps {
  position: absolute;
  right: 0; left: 0; bottom: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(10px, 1.5vw, 22px);
  padding: 0 20px clamp(12px, 2.4svh, 22px);
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
}
.auth2-stamps img {
  flex: none;
  width: clamp(36px, 4.1vw, 64px);
  height: auto;
  opacity: 0.5;
}
.auth2-stamps img:nth-child(odd)  { transform: rotate(-6deg); }
.auth2-stamps img:nth-child(even) { transform: rotate(5deg); }

/* ── Account card panel ─────────────────────────────────────── */
.auth2-cardwrap {
  position: relative;
  z-index: 1;
  flex: 0 1 clamp(370px, 35vw, 500px);
  min-width: 350px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center; /* centre a short card; top-anchor + scroll a tall one */
  overflow-y: auto;
  padding: clamp(10px,2svh,24px) clamp(14px,2vw,44px) clamp(10px,2svh,24px) clamp(16px,3.2vw,64px);
}
.auth2-card {
  width: 100%;
  max-width: 520px;
  background: var(--surface-primary);
  border: 1.5px solid rgba(255,255,255,0.75);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(30,18,60,0.24), 0 0 0 8px rgba(255,255,255,0.14);
  padding: clamp(18px,3svh,28px) clamp(20px,2vw,32px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px,1.7svh,15px);
  animation: auth2-pop 0.5s ease both;
}

.auth2-head h2 {
  margin: 0;
  font-size: clamp(20px, 3svh, 26px);
  font-weight: var(--weight-black);
  color: var(--text-primary);
}
.auth2-head p {
  margin: 4px 0 0;
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

/* forms stack their fields */
.auth2-fields { display: flex; flex-direction: column; gap: clamp(10px,1.7svh,15px); }

/* forgot-password link (login only) */
.auth2-forgot { margin-top: -4px; }
.auth2-forgot a { font-size: 12.5px; font-weight: var(--weight-bold); color: var(--brand-teal-deep); }
.auth2-forgot a:hover { color: var(--brand-gold-deep); text-decoration: underline; }

/* ── Primary CTA (gradient pill with pulse) ─────────────────── */
.auth2-cta {
  position: relative;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: clamp(16px, 2.3svh, 19px);
  font-weight: var(--weight-black);
  color: #1E1438;
  background: linear-gradient(135deg, #FFC857 0%, #2EE6C5 100%);
  box-shadow: 0 12px 30px rgba(46,230,197,0.38);
  animation: auth2-pulse 2.2s ease-in-out infinite;
  transition: transform 160ms ease;
}
.auth2-cta:hover:not(:disabled)  { transform: translateY(-3px) scale(1.02); }
.auth2-cta:active:not(:disabled) { transform: translateY(0) scale(0.99); }
.auth2-cta:disabled { opacity: 0.6; cursor: not-allowed; }
.auth2-cta.loading { pointer-events: none; opacity: 0.8; animation: none; }
.auth2-cta.loading::before {
  content: '';
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.auth2-terms { margin: -4px 0 0; text-align: center; font-size: 11.5px; font-weight: var(--weight-medium); color: var(--text-muted); }
.auth2-terms a { color: var(--brand-teal-deep); font-weight: var(--weight-bold); }

/* ── Divider + social (Google / Apple) ─────────────────────── */
/* override the shared .social-buttons (flex row) so the divider stacks
   above the Google/Apple grid inside this card */
.auth2-card .social-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth2-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.auth2-divider::before, .auth2-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-medium);
}

/* One full-width button per row, not a two-up grid.
   App Review rejected the two-up version under guideline 4: a 90px chip showing
   an apple glyph and the word «أبل» did not read as the Sign in with Apple
   button, which Apple requires to be recognisable on sight and no less
   prominent than the alternatives. Stacking gives both the same width, and lets
   the Apple button carry its full official label. */
.auth2-social { display: grid; grid-template-columns: 1fr; gap: 10px; }

/* Apple's own button appearance: solid black, white mark and label, 44px tall
   minimum per the Human Interface Guidelines. Deliberately NOT themed with the
   site palette — the point is that it looks the same in every app. */
.auth2-oauth.auth2-apple {
  background: #000;
  border-color: #000;
  color: #fff;
  min-height: 46px;
}
.auth2-oauth.auth2-apple:hover:not(:disabled) { background: #1a1a1a; }
.auth2-oauth.auth2-apple svg { fill: #fff; }
.auth2-oauth {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 10px;
  border: 1.5px solid rgba(30,20,56,0.12);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 800;
  color: #1E1438;
  transition: transform 140ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.auth2-oauth:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.auth2-oauth:disabled { opacity: 0.6; cursor: not-allowed; }
.auth2-oauth.loading { pointer-events: none; opacity: 0.7; }
.auth2-oauth svg { display: block; flex: none; }

/* «قريبًا» badge on the Apple button */
.auth2-soon {
  position: absolute;
  top: -9px;
  inset-inline-start: 8px;
  background: var(--brand-gold);
  color: #3A2A00;
  font-size: 9.5px;
  font-weight: var(--weight-black);
  letter-spacing: 0.2px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(30,18,60,0.20);
}

/* ── Switch (login ⇆ signup) ────────────────────────────────── */
.auth2-switch { margin: 0; text-align: center; font-size: 13px; font-weight: var(--weight-medium); color: var(--text-secondary); }
.auth2-switch button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-primary); font-size: 13px; font-weight: 900;
  color: var(--brand-teal-deep);
}
.auth2-switch button:hover { color: var(--brand-gold-deep); text-decoration: underline; }

/* ── Phone field (country-code select beside the number) ────── */
.auth2-phone { display: flex; gap: 8px; }
.auth2-phone .phone-cc {
  flex: 0 0 132px;
  max-width: 132px;
  cursor: pointer;
  direction: ltr;
  font-weight: var(--weight-semibold);
}
.auth2-phone .phone-num { flex: 1 1 auto; min-width: 0; }
.auth2-phone .phone-num .form-input { direction: ltr; text-align: start; letter-spacing: 0.5px; }

/* card never shows its own scrollbar (cardwrap handles overflow) */
.auth2-card::-webkit-scrollbar { display: none; }
.auth2-card { scrollbar-width: none; }

/* ── Stacked layout (phones / portrait tablets) ────────────── */
@media (max-width: 900px), (orientation: portrait) {
  /* The decorative conic disc (inset:-25%) leaks past the root once the
     root becomes overflow:visible for page scroll — on phones that widened
     the LAYOUT VIEWPORT to ~570px, so the browser zoomed the whole page
     out and the auth card floated small between huge side margins.
     Pin the disc inside + clip any horizontal overflow at the page level. */
  html, body.auth2-body { overflow-x: clip; max-width: 100%; }
  .auth2-spin { inset: 0; }
  .auth2-root { flex-direction: column; height: auto; min-height: 100svh; overflow: visible; }
  .auth2-brand { flex: 0 0 auto; padding: clamp(10px,2svh,18px) 16px 10px; }
  .auth2-logo { width: min(46vw, 150px); min-width: 0; max-height: 22svh; }
  .auth2-title { font-size: clamp(18px, 5.4vw, 24px); margin: 6px 0 4px; }
  .auth2-tagline { font-size: 12.5px; line-height: 1.7; max-width: 92vw; }
  .auth2-traps, .auth2-stamps { display: none; }
  .auth2-cardwrap {
    flex: 1 1 auto; width: 100%; min-width: 0;
    justify-content: flex-start; overflow: visible;
    padding: 4px 14px 28px;
  }
}

/* ── Reduced-motion: calm everything ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .auth2-spin::before, .auth2-logo, .auth2-traps img, .auth2-card, .auth2-cta { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   ICONS — no emoji anywhere on the auth screens
   Emoji render differently on every OS, ignore the brand palette, and read as
   decoration rather than UI. Every glyph on login / verify / reset is now an
   inline stroked SVG that inherits `currentColor`, so it picks up the same
   muted ink as the label beside it and stays crisp at any zoom.
   ══════════════════════════════════════════════════════════════ */
.input-icon > svg,
.input-toggle > svg { display: block; width: 19px; height: 19px; }
.input-icon { display: inline-flex; align-items: center; }
.input-wrapper .input-toggle { display: inline-flex; align-items: center; justify-content: center; }
/* eye-off is a second path pair swapped in by JS; keep both the same size */
.input-toggle[data-shown="1"] { color: var(--brand-teal-deep, #1FA88C); }

/* the big status glyph at the top of a notice / landing state */
.auth2-glyph {
  width: 68px; height: 68px; margin: 0 auto var(--space-3);
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,200,87,0.22), rgba(46,230,197,0.22));
  color: var(--brand-teal-deep, #1FA88C);
}
.auth2-glyph > svg { width: 32px; height: 32px; display: block; }
.auth2-glyph.is-warn { background: linear-gradient(135deg, rgba(224,85,85,0.16), rgba(255,200,87,0.18)); color: #C0341A; }
.auth2-glyph.is-done { background: linear-gradient(135deg, rgba(46,230,197,0.26), rgba(255,200,87,0.18)); color: #12813F; }

/* waiting state — a calm brand ring instead of an hourglass emoji */
.auth2-glyph.is-wait { background: linear-gradient(135deg, rgba(255,200,87,0.18), rgba(46,230,197,0.18)); }
.auth2-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(30,20,56,0.10);
  border-top-color: var(--brand-teal-deep, #1FA88C);
  border-right-color: var(--brand-gold-deep, #E6A92B);
  animation: auth2-ring 900ms linear infinite;
}
@keyframes auth2-ring { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth2-spinner { animation-duration: 2.4s; } }

/* ── Standalone auth landings (verify / reset) on the auth-v2 shell ──
   They used the older .auth-card look, so the button did not match the site.
   They now reuse .auth2-card + .auth2-cta exactly like the login screen. */
.auth2-solo {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: clamp(16px,4svh,48px) clamp(14px,4vw,32px);
}
.auth2-solo .auth2-card { max-width: 460px; text-align: center; }
.auth2-solo .auth2-card h2 { margin: 0; font-size: clamp(20px,3svh,25px); font-weight: var(--weight-black); color: var(--text-primary); }
.auth2-solo .auth2-card p  { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--text-muted); }
.auth2-solo .auth2-logo-sm { width: 92px; height: auto; margin: 0 auto; display: block; }
.auth2-ghost {
  width: 100%; padding: 13px 22px; border-radius: 16px; cursor: pointer;
  background: transparent; border: 1.5px solid rgba(60,40,120,0.15);
  font-family: var(--font-primary); font-size: 15px; font-weight: 800; color: var(--text-secondary);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.auth2-ghost:hover { background: rgba(60,40,120,0.05); color: var(--text-secondary); }
.auth2-secondary {
  width: 100%; padding: 13px 22px; border-radius: 16px; cursor: pointer;
  background: #FFFFFF; border: 1.5px solid var(--brand-teal-soft, #9FF2E1);
  font-family: var(--font-primary); font-size: 15px; font-weight: 800; color: var(--brand-teal-deep, #1FA88C);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.auth2-secondary:hover { background: #E6FBF5; color: var(--brand-teal-deep, #1FA88C); }

/* ══ سطر العلامة التجارية والحقوق ══════════════════════════════════════════
   ⚠ العطل الأصلي: `<p class="tm-legal">` كان ابنًا مباشرًا لـ`.auth2-root`،
   وهي `display:flex; align-items:stretch; height:100svh`. فعامله المتصفح
   **عمودًا ثالثًا**: قِسناه ٤١٤×٩٠٠px — يقضم عرضًا من لوحتَي النموذج والهوية
   ويطبع النص في أعلى اليسار بدل الذيل.

   الحل: يخرج من تدفّق الـflex ويصير شريطًا سفليًا مطلقًا. و`.auth2-stamps`
   (أختام الشخصيات) مطلقة على `bottom:0` أيضًا، فتُرفع بمقدار السطر وإلا
   تراكبا. */
.auth2-root > .tm-legal {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 4;
  margin: 0;
  padding: 0 20px calc(9px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-secondary);
  opacity: 0.55;
  pointer-events: none;   /* شريط زخرفي — لا يحجب أي زر تحته */
}

/* الأختام ترتفع بارتفاع السطر بدل أن تتراكب معه (المكتب فقط — تختفي بالجوال) */
.auth2-stamps { padding-bottom: calc(clamp(12px, 2.4svh, 22px) + 22px); }

@media (max-width: 900px), (orientation: portrait) {
  /* الجذر يصير عمودًا والصفحة تُمرَّر، فالسطر يعود لتدفّقه الطبيعي في الذيل */
  .auth2-root > .tm-legal {
    position: static;
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  }
}