/* Auth module: split-screen signup / login / password reset (design: docs/design/Auth.dc.html), OTP boxes,
   and the reseller profile + payout cards. Builds on app.css tokens and the .site-* pieces of site.css. */

/* ---------- split screen ---------- */
.auth-split { display: flex; flex-wrap: wrap; min-height: 100vh; background: var(--paper); }
.auth-brand { flex: 1 1 380px; background: #14213D; color: var(--white); padding: 56px; display: flex; flex-direction: column; gap: 20px; justify-content: center; position: relative; overflow: hidden; }
.auth-brand::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 179, 1, .14), rgba(245, 179, 1, 0) 70%); pointer-events: none; }
.auth-brand__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.auth-brand__top .site-brand b { font-size: 24px; }
.auth-brand .lang { background: #1E3158; border: 0; box-shadow: none; border-radius: 10px; padding: 3px; gap: 2px; font-size: 14px; }
.auth-brand .lang a { color: var(--white); border-radius: 8px; min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; text-decoration: none; }
.auth-brand .lang a[aria-current="true"] { background: var(--white); color: #14213D; }
.auth-brand__body { display: flex; flex-direction: column; gap: 20px; }
.auth-brand h1 { font-size: 40px; font-weight: 700; line-height: 1.2; max-width: 440px; color: var(--white); }
.auth-brand__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; color: #CBD8EE; font-size: 17px; }
.auth-brand__points li { display: flex; gap: 10px; align-items: center; }
.auth-brand__points svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #1E3158; color: var(--marigold); }
.auth-main { flex: 1 1 380px; display: flex; align-items: center; justify-content: center; padding: 40px; min-width: 0; }

/* ---------- card ---------- */
.auth-main .auth-card { width: 100%; max-width: 420px; margin: 0; background: var(--white); border: 0; border-radius: 20px; padding: 28px; box-shadow: 0 1px 2px rgba(20, 33, 61, .06), 0 16px 44px rgba(20, 33, 61, .1); display: flex; flex-direction: column; gap: 18px; }
.auth-tabs { display: flex; gap: 4px; background: #E8EEF8; border-radius: 12px; padding: 4px; }
.auth-tabs a { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 700; color: #3E4C68; text-decoration: none; transition: background-color .25s, color .25s, box-shadow .25s; }
.auth-tabs a:hover { color: #14213D; }
.auth-tabs a[aria-current="page"] { background: var(--white); color: #14213D; box-shadow: 0 1px 3px rgba(20, 33, 61, .12); }
.auth-pane { display: flex; flex-direction: column; gap: 16px; }
.auth-card__head { display: flex; flex-direction: column; gap: 4px; }
.auth-card__head h2 { font-size: 24px; font-weight: 700; line-height: 1.2; }
.auth-lead { color: #5B6882; font-size: 15.5px; }
.auth-lead b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.auth-inline { font-weight: 600; margin-left: 2px; min-height: 28px; }
.auth-pane .input { min-height: 54px; border-radius: 12px; border-color: #D3DCEB; padding: 0 14px; transition: border-color .15s, box-shadow .15s; }
.auth-pane .input:focus { outline: 0; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.auth-pane .field.has-error .input { border: 2px solid var(--red-strong); }
.auth-submit { font-size: 18px; min-height: 54px; }
.auth-submit[disabled] { opacity: .75; cursor: progress; transform: none; }
.auth-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: var(--white); animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-fine { margin: 0; color: #5B6882; font-size: 14px; text-align: center; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auth-or { display: flex; align-items: center; gap: 12px; color: #5B6882; font-size: 14px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.auth-center { align-self: center; font-weight: 600; min-height: 36px; }
.check a { font-weight: 600; }

/* mobile with +88 */
.auth-phone { display: flex; }
.auth-phone__prefix { display: flex; align-items: center; padding: 0 14px; background: #E8EEF8; border: 1px solid #D3DCEB; border-right: 0; border-radius: 12px 0 0 12px; font-weight: 700; }
.auth-pane .auth-phone .input { border-radius: 0 12px 12px 0; font-size: 18px; font-weight: 600; min-width: 0; }
.field.has-error .auth-phone__prefix { border-color: var(--red-strong); border-width: 2px; border-right: 0; }

/* ---------- OTP ---------- */
.otp-boxes { display: grid; grid-template-columns: repeat(var(--otp-n, 6), minmax(0, 1fr)); gap: 8px; }
.otp { width: 100%; min-width: 0; height: 58px; text-align: center; font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--ink); background: var(--white); border-radius: 12px; border: 1px solid #D3DCEB; font-variant-numeric: tabular-nums; padding: 0; transition: border-color .15s, box-shadow .15s, transform .15s; }
.otp:focus { outline: 0; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); transform: translateY(-2px); }
.otp-field.has-error .otp { border-color: var(--red-strong); }
.otp-field .error, .otp-field .hint { text-align: center; }
.otp-input { font-family: var(--font-head); font-size: 26px; font-weight: 600; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; padding-left: calc(12px + .45em); }
.otp-input::placeholder { color: var(--field); letter-spacing: .45em; }
.otp-resend { display: flex; justify-content: center; min-height: 24px; align-items: center; font-size: 14px; }
.otp-sent { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 12px 14px; font-size: 14.5px; }
.otp-sent svg { color: var(--emerald); flex: none; margin-top: 2px; }
.otp-sent b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- motion ---------- */
@keyframes auth-up { from { opacity: 0; translate: 0 16px; } }
.auth-pane { animation: auth-up .45s cubic-bezier(.2, .7, .2, 1) both; }
.auth-brand__top, .auth-brand__body > * { animation: auth-up .7s cubic-bezier(.2, .7, .2, 1) both; }
.auth-brand__body > :nth-child(1) { animation-delay: .1s; }
.auth-brand__body > :nth-child(2) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .auth-pane, .auth-brand__top, .auth-brand__body > *, .auth-spin { animation: none !important; }
  .auth-tabs a, .otp, .auth-pane .input { transition: none !important; }
  .otp:focus { transform: none; }
}

@media (max-width: 760px) {
  .auth-split { min-height: 0; }
  .auth-brand { flex-basis: 100%; padding: 16px 20px; }
  .auth-brand::after, .auth-brand__body { display: none; }
  .auth-brand__top { justify-content: space-between; }
  .auth-brand__top .site-brand { margin-right: 0; }
  .auth-brand__top .site-brand b { font-size: 21px; }
  .auth-brand__top .site-mark { width: 34px; height: 34px; }
  .auth-main { padding: 20px 16px 32px; align-items: flex-start; }
  .auth-main .auth-card { padding: 22px 18px; }
}
@media (max-width: 360px) {
  .otp-boxes { gap: 5px; }
  .otp { height: 52px; font-size: 21px; }
}

/* ---------- reseller profile ---------- */
.profile-page { display: flex; flex-direction: column; gap: 22px; }
.otp-box { max-width: 360px; }
.otp-box .otp-resend { justify-content: flex-start; }
.profile-facts dd.num { white-space: nowrap; overflow-wrap: normal; }
.profile-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; }
.profile-facts > div { padding: 16px 20px; border-right: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile-facts > div:last-child { border-right: 0; }
.profile-facts dt { font-size: 13.5px; color: var(--slate); }
.profile-facts dd { margin: 0; font-family: var(--font-head); font-size: 19px; font-weight: 600; overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-facts dd .badge { font-family: var(--font-body); }
.profile-facts small { font-size: 13px; color: var(--slate); font-family: var(--font-body); font-weight: 400; }
.profile-note { border-top: 1px solid var(--line); padding: 12px 20px; display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; font-size: 14.5px; background: var(--amber-soft); color: #5C3B00; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.profile-note .spacer { min-width: 8px; }

.payout-card { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.payout-card__mark { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--emerald); flex: none; }
.payout-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.payout-card__body b { font-family: var(--font-head); font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payout-card__body span { color: var(--slate); font-size: 14px; }

@media (max-width: 980px) {
  .profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-facts > div:nth-child(2n) { border-right: 0; }
  .profile-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
}
@media (max-width: 520px) {
  .auth-card { margin: 20px 16px; padding: 22px 18px; }
  .profile-facts > div { padding: 14px 16px; }
  .profile-facts dd { font-size: 17px; }
  .otp-input { letter-spacing: .3em; padding-left: calc(12px + .3em); }
}