/* ==========================================================================
   Login / OTP — Claude Design turn 7 (7a 7b 7c 7d desktop 440, 7e mobile 390)

   Scoped under #xwl-overlay. The modal keeps its id, its open/close contract
   (openLoginModal / closeLoginModal) and every API call it already made, so
   nothing that links to it needs to change.

   Measurements are read straight off the frames — 440px card, 48px phone row,
   54px OTP boxes, 58px dial-code column, and so on. Tokens: ink #111111 ·
   body #374151 · secondary #6b7280 · muted #9ca3af · lines #e5e7eb ·
   hairline #f3f4f6 · surface #f8f9fa · cards #f5f5f5 · success #059669 ·
   amber #f59e0b · caution #b45309.
   ========================================================================== */

#xwl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, .55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  font-family: 'Inter', system-ui, sans-serif;
}
#xwl-overlay.open, #xwl-overlay.closing { display: flex; }

#xwl-overlay .xwl-card {
  background: #fff;
  width: 100%;
  max-width: 440px;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(17, 17, 17, .22);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* grab handle — 7e only */
#xwl-overlay .xwl-handle { display: none; }

/* ── header ─────────────────────────────────────────────────────────────── */
#xwl-overlay .xwl-head {
  padding: 20px 22px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
#xwl-overlay .xwl-htxt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#xwl-overlay .xwl-title {
  font: 600 19px 'Manrope', system-ui, sans-serif;
  letter-spacing: -.5px;
  color: #111111;
  margin: 0;
}
#xwl-overlay .xwl-sub {
  font: 400 11.5px 'Inter', system-ui, sans-serif;
  color: #6b7280;
  margin: 0;
}
#xwl-overlay .xwl-sub b { color: #111111; font-weight: 500; }
#xwl-overlay .xwl-x {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 13px 'Inter', system-ui, sans-serif;
  color: #374151;
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s;
}
#xwl-overlay .xwl-x:hover { background: #e5e7eb; color: #111111; }

/* back link on the OTP step */
#xwl-overlay .xwl-back {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  padding: 0;
  font: 500 11.5px 'Inter', system-ui, sans-serif;
  color: #374151;
  cursor: pointer;
}
#xwl-overlay .xwl-back:hover { color: #111111; }

/* ── body ───────────────────────────────────────────────────────────────── */
#xwl-overlay .xwl-body {
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#xwl-overlay .xwl-body.otp { padding: 20px 22px; gap: 16px; }

#xwl-overlay .xwl-fieldset { display: flex; flex-direction: column; gap: 7px; }
#xwl-overlay .xwl-tag {
  font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .06em;
  color: #9ca3af;
  text-transform: uppercase;
}

/* ── phone row ──────────────────────────────────────────────────────────── */
#xwl-overlay .xwl-phone {
  display: flex;
  height: 48px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: border-color .15s, opacity .2s;
}
#xwl-overlay .xwl-phone.on { border-color: #111111; }
#xwl-overlay .xwl-phone.err { border-color: #b45309; }
#xwl-overlay .xwl-phone.busy { opacity: .6; }
#xwl-overlay .xwl-cc {
  flex: none;
  width: 58px;
  background: #f8f9fa;
  border-right: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 13px 'Inter', system-ui, sans-serif;
  color: #374151;
}
#xwl-overlay .xwl-phone input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0 13px;
  font: 400 14px 'Inter', system-ui, sans-serif;
  color: #111111;
}
#xwl-overlay .xwl-phone input::placeholder { color: #9ca3af; }
/* the green tick that confirms a complete, valid number */
#xwl-overlay .xwl-ok {
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: 13px;
  align-self: center;
  border-radius: 50%;
  background: #059669;
  color: #fff;
  font: 9px 'Inter', system-ui, sans-serif;
  display: none;
  align-items: center;
  justify-content: center;
}
#xwl-overlay .xwl-phone.valid .xwl-ok { display: flex; }

/* ── buttons ────────────────────────────────────────────────────────────── */
#xwl-overlay .xwl-btn {
  width: 100%;
  border: 0;
  background: #111111;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  font: 500 13px 'Inter', system-ui, sans-serif;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background .15s;
}
#xwl-overlay .xwl-btn:hover:not(:disabled) { background: #242424; }
#xwl-overlay .xwl-btn:disabled { background: #f5f5f5; color: #9ca3af; cursor: default; }
#xwl-overlay .xwl-btn.ghost {
  background: #fff;
  border: 1px solid #111111;
  color: #111111;
}
#xwl-overlay .xwl-btn.ghost:hover:not(:disabled) { background: #f8f9fa; }
#xwl-overlay .xwl-btn.quiet {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #111111;
  font-weight: 500;
}
#xwl-overlay .xwl-btn.quiet:hover:not(:disabled) { border-color: #111111; background: #f8f9fa; }
#xwl-overlay .xwl-btn.sm { padding: 13px; font-size: 12.5px; }
/* white spinner inside a dark button */
#xwl-overlay .xwl-ld {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  animation: xwlSpin .7s linear infinite;
  flex: none;
}
#xwl-overlay .xwl-btn:disabled .xwl-ld { border-color: #e5e7eb; border-top-color: #9ca3af; }
@keyframes xwlSpin { to { transform: rotate(360deg); } }

#xwl-overlay .xwl-row2 { display: flex; gap: 9px; }
#xwl-overlay .xwl-row2 .xwl-btn { width: auto; flex: 1; }
#xwl-overlay .xwl-row2 .xwl-btn.none { flex: none; padding: 13px 15px; font-size: 12px; }

/* ── WhatsApp delivery notice ───────────────────────────────────────────── */
#xwl-overlay .xwl-wa {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 13px 14px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
/* WhatsApp is the only delivery channel, so this row states a fact rather than
   offering a choice — no pointer, no hover lift, nothing to click. */
#xwl-overlay .xwl-wa.static { cursor: default; }
#xwl-overlay .xwl-box {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 4px;
  border: 1.5px solid #059669;
  background: #059669;
  color: #fff;
  font: 10px 'Inter', system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
#xwl-overlay .xwl-wtxt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
#xwl-overlay .xwl-wt { font: 500 12.5px 'Inter', system-ui, sans-serif; color: #111111; }
#xwl-overlay .xwl-ws { font: 400 10.5px 'Inter', system-ui, sans-serif; color: #6b7280; }

/* ── consent + fine print ───────────────────────────────────────────────── */
#xwl-overlay .xwl-consent {
  font: 400 10.5px/1.6 'Inter', system-ui, sans-serif;
  color: #9ca3af;
  margin: 0;
}
#xwl-overlay .xwl-consent a { color: #6b7280; text-decoration: underline; text-underline-offset: 2px; }
#xwl-overlay .xwl-consent a:hover { color: #111111; }
#xwl-overlay .xwl-consent strong { font-weight: 500; color: #6b7280; }
#xwl-overlay .xwl-note {
  border-top: 1px solid #f3f4f6;
  padding-top: 14px;
  font: 400 10.5px/1.6 'Inter', system-ui, sans-serif;
  color: #9ca3af;
  margin: 0;
}

/* ── footer strip ───────────────────────────────────────────────────────── */
#xwl-overlay .xwl-foot {
  padding: 13px 22px;
  border-top: 1px solid #f3f4f6;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#xwl-overlay .xwl-foot span { font: 400 11.5px 'Inter', system-ui, sans-serif; color: #6b7280; }
#xwl-overlay .xwl-foot a {
  font: 500 11.5px 'Inter', system-ui, sans-serif;
  color: #111111;
  text-decoration: none;
  white-space: nowrap;
}
#xwl-overlay .xwl-foot a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── OTP boxes ──────────────────────────────────────────────────────────── */
#xwl-overlay .xwl-otp { display: flex; gap: 8px; }
#xwl-overlay .xwl-otp.dim { opacity: .45; }
#xwl-overlay .xwl-otp input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 54px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  font: 600 20px 'Manrope', system-ui, sans-serif;
  color: #111111;
  outline: none;
  padding: 0;
  caret-color: #111111;
  transition: border-color .12s, background .12s, color .12s;
  -moz-appearance: textfield;
}
#xwl-overlay .xwl-otp input::-webkit-outer-spin-button,
#xwl-overlay .xwl-otp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#xwl-overlay .xwl-otp input:focus { border-color: #111111; }
#xwl-overlay .xwl-otp.err input { border-color: #b45309; }
#xwl-overlay .xwl-otp.busy input {
  border-color: #e5e7eb;
  background: #f8f9fa;
  color: #6b7280;
}

/* inline caution copy — never a banner */
#xwl-overlay .xwl-warn {
  font: 400 11.5px 'Inter', system-ui, sans-serif;
  color: #b45309;
  margin: 0;
}
#xwl-overlay .xwl-warn:empty { display: none; }

/* ── notice block (rate limit, expired, locked, failure) ────────────────── */
#xwl-overlay .xwl-notice {
  border-left: 3px solid #f59e0b;
  background: #f8f9fa;
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
#xwl-overlay .xwl-notice .xwl-ntxt { flex: 1; display: flex; flex-direction: column; gap: 5px; }
#xwl-overlay .xwl-nt { font: 500 12.5px 'Inter', system-ui, sans-serif; color: #111111; }
#xwl-overlay .xwl-ns { font: 400 11.5px/1.5 'Inter', system-ui, sans-serif; color: #6b7280; }
#xwl-overlay .xwl-retry {
  flex: none;
  border: 1px solid #111111;
  background: #fff;
  border-radius: 8px;
  padding: 9px 14px;
  font: 500 11.5px 'Inter', system-ui, sans-serif;
  color: #111111;
  cursor: pointer;
}
#xwl-overlay .xwl-retry:hover { background: #f8f9fa; }

/* ── resend row ─────────────────────────────────────────────────────────── */
#xwl-overlay .xwl-rrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#xwl-overlay .xwl-cool { font: 400 11.5px 'Inter', system-ui, sans-serif; color: #9ca3af; }
#xwl-overlay .xwl-resend {
  border: 0;
  background: transparent;
  padding: 0;
  font: 500 11.5px 'Inter', system-ui, sans-serif;
  color: #111111;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#xwl-overlay .xwl-resend:disabled { color: #9ca3af; cursor: default; text-decoration: none; }

/* ── success ────────────────────────────────────────────────────────────── */
#xwl-overlay .xwl-done {
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  text-align: center;
}
#xwl-overlay .xwl-check {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #059669;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#xwl-overlay .xwl-check svg { width: 18px; height: 18px; }
#xwl-overlay .xwl-done-t {
  font: 600 18px 'Manrope', system-ui, sans-serif;
  letter-spacing: -.5px;
  color: #111111;
  margin: 0;
}
#xwl-overlay .xwl-done-s {
  font: 400 12px/1.5 'Inter', system-ui, sans-serif;
  color: #6b7280;
  max-width: 280px;
  margin: 0;
}

/* ── new user, one field ────────────────────────────────────────────────── */
#xwl-overlay .xwl-nu-t {
  font: 600 17px 'Manrope', system-ui, sans-serif;
  letter-spacing: -.4px;
  color: #111111;
  margin: 0;
}
#xwl-overlay .xwl-name {
  width: 100%;
  height: 48px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0 13px;
  font: 400 14px 'Inter', system-ui, sans-serif;
  color: #111111;
  outline: none;
  background: #fff;
  transition: border-color .15s;
}
#xwl-overlay .xwl-name::placeholder { color: #9ca3af; }
#xwl-overlay .xwl-name:focus { border-color: #111111; }
#xwl-overlay .xwl-skip {
  border: 0;
  background: transparent;
  font: 500 11.5px 'Inter', system-ui, sans-serif;
  color: #374151;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
#xwl-overlay .xwl-skip:hover { color: #111111; }

/* the live region carries errors that have no dedicated slot */
#xwl-overlay .xwl-msg {
  font: 400 11.5px 'Inter', system-ui, sans-serif;
  margin: 0;
  color: #b45309;
}
#xwl-overlay .xwl-msg:empty { display: none; }

/* ==========================================================================
   7e — mobile 390: bottom sheet, keypad aware
   ========================================================================== */
@media (max-width: 639px) {
  #xwl-overlay { align-items: flex-end; padding: 0; }
  #xwl-overlay .xwl-card {
    max-width: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
    max-height: 92vh;
  }
  #xwl-overlay .xwl-handle {
    display: flex;
    justify-content: center;
    padding: 14px 0 0;
    flex: none;
  }
  #xwl-overlay .xwl-handle span {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #e5e7eb;
  }
  #xwl-overlay .xwl-head { padding: 14px 16px 0; gap: 14px; }
  #xwl-overlay .xwl-title { font-size: 17px; letter-spacing: -.4px; }
  #xwl-overlay .xwl-sub { font-size: 11px; }
  #xwl-overlay .xwl-htxt { gap: 4px; }
  #xwl-overlay .xwl-x { width: 26px; height: 26px; }
  #xwl-overlay .xwl-body { padding: 14px 16px 18px; gap: 14px; }
  #xwl-overlay .xwl-body.otp { padding: 13px 16px 16px; gap: 13px; }
  #xwl-overlay .xwl-phone { height: 50px; }
  #xwl-overlay .xwl-cc { width: 56px; }
  #xwl-overlay .xwl-phone input { font-size: 15px; }
  #xwl-overlay .xwl-btn { padding: 15px; font-size: 13.5px; }
  #xwl-overlay .xwl-wa { padding: 13px; }
  #xwl-overlay .xwl-consent { font-size: 10px; }
  #xwl-overlay .xwl-foot { padding: 12px 16px; }
  #xwl-overlay .xwl-foot span, #xwl-overlay .xwl-foot a { font-size: 11px; }
  /* 6 boxes have to fit 390 minus 32px padding — 52px tall, 6px gutters */
  #xwl-overlay .xwl-otp { gap: 6px; }
  #xwl-overlay .xwl-otp input { height: 52px; font-size: 19px; }
  #xwl-overlay .xwl-cool, #xwl-overlay .xwl-resend { font-size: 11px; }
  #xwl-overlay .xwl-done { padding: 26px 16px; gap: 11px; }
  #xwl-overlay .xwl-check { width: 36px; height: 36px; }
  #xwl-overlay .xwl-done-t { font-size: 17px; letter-spacing: -.4px; }
  #xwl-overlay .xwl-done-s { font-size: 11.5px; }
}

/* ==========================================================================
   Font guard. index.php sets
     body, h1..h4, p, span, a, button, div, input, .font-heading
       { font-family: 'Plus Jakarta Sans' !important }
   which outranks any specificity. Re-assert the design's three faces, scoped to
   this modal so the rest of the page keeps whatever it asked for.
   ========================================================================== */
#xwl-overlay,
#xwl-overlay div, #xwl-overlay span, #xwl-overlay p, #xwl-overlay a,
#xwl-overlay button, #xwl-overlay input, #xwl-overlay label, #xwl-overlay strong {
  font-family: 'Inter', system-ui, sans-serif !important;
}
#xwl-overlay .xwl-title,
#xwl-overlay .xwl-done-t,
#xwl-overlay .xwl-nu-t,
#xwl-overlay .xwl-otp input {
  font-family: 'Manrope', system-ui, sans-serif !important;
}
#xwl-overlay .xwl-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* ── motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes xwlFade    { from { opacity: 0 } to { opacity: 1 } }
  @keyframes xwlFadeOut { to { opacity: 0 } }
  @keyframes xwlPop     { from { opacity: 0; transform: translateY(10px) scale(.965) } to { opacity: 1; transform: none } }
  @keyframes xwlPopOut  { to { opacity: 0; transform: translateY(10px) scale(.975) } }
  @keyframes xwlSheetIn { from { transform: translateY(100%) } to { transform: translateY(0) } }
  @keyframes xwlSheetOut{ to { transform: translateY(100%) } }
  @keyframes xwlStep    { from { opacity: 0; transform: translateX(9px) } to { opacity: 1; transform: none } }
  @keyframes xwlShake   { 10%,90% { transform: translateX(-1px) } 20%,80% { transform: translateX(2px) }
                          30%,50%,70% { transform: translateX(-4px) } 40%,60% { transform: translateX(4px) } }

  #xwl-overlay.open  { animation: xwlFade .2s ease-out; }
  #xwl-overlay.open .xwl-card { animation: xwlPop .26s cubic-bezier(.16,1,.3,1); }
  #xwl-overlay.closing { animation: xwlFadeOut .24s ease-in forwards; }
  #xwl-overlay.closing .xwl-card { animation: xwlPopOut .24s ease-in forwards; }
  @media (max-width: 639px) {
    #xwl-overlay.open .xwl-card { animation: xwlSheetIn .38s cubic-bezier(.16,1,.3,1); will-change: transform; }
    #xwl-overlay.closing { animation: xwlFadeOut .3s ease-in forwards; }
    #xwl-overlay.closing .xwl-card { animation: xwlSheetOut .3s cubic-bezier(.4,0,1,1) forwards; will-change: transform; }
  }
  #xwl-overlay .xwl-step-in { animation: xwlStep .25s cubic-bezier(.16,1,.3,1); }
  #xwl-overlay .xwl-shake { animation: xwlShake .5s cubic-bezier(.36,.07,.19,.97) both; }
}