/**
 * Unbox Secure Login — frontend auth UI.
 * 1:1 implementation of "Unbox Auth — Design Specification" (redlines).
 * Every value is exact (copied from the spec). Brand: white / black / #ff4d01.
 * System font stack — no custom fonts. Weights 400 / 600 / 700 / 800.
 *
 * Structure per screen:  .usl-sheet > [ .usl-hero (black, title+subtitle) , .usl-body (white form) ]
 * Only one .usl-sheet is visible at a time (toggled by usl-frontend.js).
 */

/* ---------- design tokens ---------- */
.usl-auth-card, .usl-auth-overlay {
  --usl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --usl-white:#fff; --usl-black:#000; --usl-orange:#ff4d01; --usl-orange-press:#e34500;
  --usl-peach:#ffd9c9;
  --usl-orange-ring: rgba(255,77,1,.15);
  --usl-orange-tint: rgba(255,77,1,.08);
  --usl-ink-90: rgba(0,0,0,.90);
  --usl-ink-58: rgba(0,0,0,.58);
  --usl-ink-55: rgba(0,0,0,.55);
  --usl-ink-50: rgba(0,0,0,.50);
  --usl-ink-45: rgba(0,0,0,.45);
  --usl-ink-34: rgba(0,0,0,.34);
  --usl-hairline: rgba(0,0,0,.16);
  --usl-hairline-soft: rgba(0,0,0,.10);
  --usl-prefix-divider: rgba(0,0,0,.12);
  --usl-strength-off: rgba(0,0,0,.12);
  --usl-sub-on-black: rgba(255,255,255,.62);
  --usl-deco: rgba(255,77,1,.15);
  --usl-field-h: 52px;
  --usl-btn2-h: 50px;
  --usl-otp-h: 56px;
  --usl-r-card: 22px;
  --usl-r-field: 12px;
  -webkit-font-smoothing: antialiased;
  font-family: var(--usl-font);
}

/* ---------- modal overlay (desktop popup) ---------- */
.usl-auth-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px;
  background: rgba(13,13,13,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow: auto;
}

/* ---------- card ---------- */
.usl-auth-card {
  width: 100%; max-width: 400px; margin: 24px auto;
  background: #fff; border: 2px solid #fff; border-radius: var(--usl-r-card); overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  color: var(--usl-black); position: relative;
  display: flex; flex-direction: column;
}
.usl-auth-overlay .usl-auth-card { margin: auto; }
.usl-auth-card *, .usl-auth-card *::before, .usl-auth-card *::after { box-sizing: border-box; }

/* ---------- sheet = one screen (hero + body) ---------- */
.usl-sheet { padding: 0; display: flex; flex-direction: column; }
.usl-sheet.is-active, .usl-sheet[data-step]:not([style*="none"]) { animation: uslStepIn .28s ease; }

/* ---------- hero (black header band: title + subtitle) ---------- */
.usl-hero { position: relative; overflow: hidden; background: #000; padding: 30px 28px 26px; }
.usl-hero-slash { position: absolute; right: -10px; top: -34px; font-size: 130px; font-weight: 800; letter-spacing: -10px; line-height: 1; color: var(--usl-deco); pointer-events: none; user-select: none; }
.usl-title { position: relative; margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2; color: #fff; }
.usl-subtitle { position: relative; margin: 6px 0 0; font-size: 13.5px; font-weight: 400; line-height: normal; color: var(--usl-sub-on-black); }

/* ---------- body (white form area) ---------- */
.usl-body { padding: 24px 28px 30px; display: flex; flex-direction: column; }
.usl-stack { display: flex; flex-direction: column; gap: 14px; }

/* ---------- fields ---------- */
.usl-field { display: flex; flex-direction: column; gap: 8px; }
.usl-field > label, .usl-label-row label { font-size: 13px; font-weight: 700; color: var(--usl-black); }
.usl-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.usl-required { color: var(--usl-orange); }

.usl-input {
  width: 100%; height: var(--usl-field-h); padding: 0 16px;
  border: 1.5px solid var(--usl-hairline); border-radius: var(--usl-r-field);
  font-family: var(--usl-font); font-size: 16px; font-weight: 400; color: var(--usl-black); background: #fff;
  outline: none; transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
textarea.usl-input { height: auto; min-height: 90px; padding: 12px 16px; resize: vertical; }
.usl-input::placeholder { color: var(--usl-ink-34); }
.usl-input:focus { border-color: var(--usl-orange); box-shadow: 0 0 0 3px var(--usl-orange-ring); }
.usl-help { margin: 0; font-size: 12.5px; font-weight: 400; color: var(--usl-ink-50); line-height: 1.5; }
.usl-help-ok { font-weight: 700; color: var(--usl-orange); }

/* phone field with baked-in +91 — FLEX so +91 and the input sit side-by-side
   and can never overlap. Metrics match the spec (input text starts ~66px in). */
.usl-phone-row {
  display: flex; align-items: center; height: var(--usl-field-h);
  border: 1.5px solid var(--usl-hairline); border-radius: var(--usl-r-field);
  background: #fff; padding: 0 0 0 16px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.usl-phone-row:focus-within { border-color: var(--usl-orange); box-shadow: 0 0 0 3px var(--usl-orange-ring); }
.usl-cc {
  flex: 0 0 auto; font-size: 16px; font-weight: 600; color: var(--usl-ink-45); line-height: 1;
  padding-right: 10px; margin-right: 10px; border-right: 1.5px solid var(--usl-prefix-divider);
}
.usl-input-phone {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
  padding: 0 16px 0 0; font-weight: 600; letter-spacing: .5px;
}
.usl-input-phone:focus { box-shadow: none; }

.usl-hint-new { font-size: 12.5px; font-weight: 600; color: var(--usl-orange); }

/* inline lookup spinner (right edge of the phone field) */
.usl-input-spinner {
  position: absolute; right: 15px; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; border: 2.5px solid var(--usl-orange-ring);
  border-top-color: var(--usl-orange); border-radius: 50%; animation: uslSpin .7s linear infinite;
}

/* ---------- password field ---------- */
.usl-input-pw { position: relative; }
.usl-input-pw .usl-input { padding-right: 66px; font-size: 20px; letter-spacing: 3px; }
.usl-input-pw .usl-input::placeholder { font-size: 16px; letter-spacing: normal; }
.usl-pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--usl-orange); padding: 4px 6px;
}
.usl-pw-toggle:hover { text-decoration: underline; }
.usl-pw-toggle svg { display: block; }

/* password strength */
.usl-pw-strength { display: flex; gap: 5px; margin-top: 1px; }
.usl-pw-strength span { flex: 1; height: 5px; border-radius: 3px; background: var(--usl-strength-off); transition: background .2s; }
.usl-pw-strength span.on { background: var(--usl-orange); }
.usl-pw-strength-label { font-size: 12px; font-weight: 800; letter-spacing: .3px; color: var(--usl-orange); }

/* ---------- confirmed-number chip ---------- */
.usl-mobile-display {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--usl-hairline-soft); border-radius: var(--usl-r-field);
  padding: 13px 16px;
}
.usl-mobile-display .usl-mobile-shown { font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--usl-black); }
.usl-mobile-display .usl-mobile-shown::before { content: "+91 "; }

/* ---------- buttons ---------- */
.usl-btn {
  width: 100%; height: var(--usl-field-h);
  border: 0; border-radius: var(--usl-r-field); cursor: pointer;
  font-family: var(--usl-font); font-size: 16px; font-weight: 700; letter-spacing: .2px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .18s, transform .06s;
}
.usl-btn:active { transform: scale(.98); }
.usl-btn-primary { background: var(--usl-orange); color: #fff; }
.usl-btn-primary:hover { background: var(--usl-orange-press); }
.usl-btn-primary.usl-btn-pending { background: var(--usl-peach); color: #fff; cursor: default; }
.usl-btn-primary.usl-btn-pending:active { transform: none; }
.usl-btn-secondary {
  height: var(--usl-btn2-h); background: #fff; color: var(--usl-orange);
  border: 1.5px solid var(--usl-orange); font-size: 15px;
}
.usl-btn-secondary:hover { background: var(--usl-orange-tint); }
.usl-btn[disabled] { opacity: .85; cursor: default; }

.usl-btn-link { border: 0; background: transparent; cursor: pointer; padding: 0; font-family: var(--usl-font); font-size: 13.5px; font-weight: 700; color: var(--usl-orange); text-align: left; }
.usl-btn-link:hover { text-decoration: underline; }
.usl-btn-text { align-self: center; border: 0; background: transparent; cursor: pointer; padding: 4px; font-family: var(--usl-font); font-size: 14px; font-weight: 700; color: var(--usl-orange); }
.usl-btn-text:hover { text-decoration: underline; }
.usl-link-small { font-size: 12.5px; font-weight: 600; color: var(--usl-ink-55); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.usl-link-small:hover { color: var(--usl-orange); text-decoration: underline; }

.usl-btn-spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: uslSpin .7s linear infinite; }

/* ---------- divider ---------- */
.usl-divider { display: flex; align-items: center; gap: 12px; margin: 2px 0; }
.usl-divider::before, .usl-divider::after { content: ""; flex: 1; height: 1px; background: var(--usl-hairline-soft); }
.usl-divider span { font-size: 12px; font-weight: 600; color: var(--usl-ink-45); }

/* ---------- checkbox (retained for optional use) ---------- */
.usl-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: rgba(0,0,0,.7); }
.usl-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.usl-checkbox .usl-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--usl-hairline); flex-shrink: 0; position: relative; transition: background .15s, border-color .15s; }
.usl-checkbox input:checked + .usl-box { background: var(--usl-orange); border-color: var(--usl-orange); }
.usl-checkbox input:checked + .usl-box::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.usl-checkbox input:focus-visible + .usl-box { box-shadow: 0 0 0 3px var(--usl-orange-ring); }

/* ---------- OTP ---------- */
.usl-otp-lead { display: flex; flex-direction: column; gap: 5px; }
.usl-otp-heading { font-size: 16px; font-weight: 800; color: var(--usl-black); }
.usl-otp-sub { font-size: 13.5px; color: var(--usl-ink-58); line-height: 1.5; }
.usl-otp-sub strong { color: var(--usl-black); white-space: nowrap; }
.usl-otp-group { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.usl-otp-box {
  width: 100%; height: var(--usl-otp-h); padding: 0; text-align: center;
  font-size: 22px; font-weight: 700; color: var(--usl-black); background: #fff;
  border: 1.5px solid var(--usl-hairline); border-radius: var(--usl-r-field);
  outline: none; transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.usl-otp-box.is-filled { border-color: var(--usl-orange); animation: uslOtpPop .18s ease; }
.usl-otp-box:focus { border-color: var(--usl-orange); box-shadow: 0 0 0 3px var(--usl-orange-ring); }
.usl-otp-foot { min-height: 20px; display: flex; align-items: center; gap: 10px; }
.usl-otp-timer { font-size: 13px; font-weight: 600; color: var(--usl-ink-50); }
.usl-verifying { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--usl-orange); }
.usl-verifying .usl-btn-spinner { border-color: var(--usl-orange-ring); border-top-color: var(--usl-orange); }

/* ---------- section title ---------- */
.usl-section-title { font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--usl-ink-45); margin: 0; }

/* ---------- consent / terms ---------- */
.usl-terms { margin: 2px 0 0; font-size: 12px; font-weight: 400; line-height: 1.55; color: var(--usl-ink-50); text-align: center; }
.usl-terms a, .usl-terms .usl-terms-hl { color: var(--usl-orange); font-weight: 600; text-decoration: none; }
.usl-terms a:hover { text-decoration: underline; }

/* ---------- success ---------- */
.usl-success { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 2px; text-align: center; }
.usl-success svg { margin-bottom: 8px; }
.usl-success-title { font-size: 20px; font-weight: 800; color: var(--usl-black); }
.usl-success-sub { font-size: 13.5px; color: var(--usl-ink-58); }
.usl-success .ring { stroke-dasharray: 166; animation: uslDrawRing .5s ease-out; }
.usl-success .check { stroke-dasharray: 48; animation: uslDrawCheck .35s ease-out .3s backwards; }

/* ---------- notices (on-brand: NO red — errors reuse orange, per spec) ---------- */
.usl-msg { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; line-height: 1.5; display: flex; align-items: center; gap: 6px; animation: uslFadeUp .25s ease; }
.usl-msg-success { color: var(--usl-orange); }
.usl-msg-error { color: var(--usl-orange); }
/* spec .u-error icon: 14px circle-! in orange */
.usl-msg-error::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ff4d01' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.usl-msg-info { color: var(--usl-ink-55); }
.usl-notice { font-size: 13px; line-height: 1.5; padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; }
.usl-notice-info { background: rgba(0,0,0,.05); color: rgba(0,0,0,.7); }

/* ---------- animations ---------- */
/* Entry keyframes intentionally do NOT animate opacity (mobile browsers can
   throttle/interrupt the animation and leave a from-frame of opacity:0 = blank
   card). Sliding only guarantees content is always visible. */
@keyframes uslStepIn { from { transform: translateY(10px); } to { transform: translateY(0); } }
@keyframes uslFadeUp { from { transform: translateY(5px); } to { transform: translateY(0); } }
@keyframes uslOtpPop { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1); } }
@keyframes uslSpin { to { transform: rotate(360deg); } }
@keyframes uslDrawRing { from { stroke-dashoffset: 166; } to { stroke-dashoffset: 0; } }
@keyframes uslDrawCheck { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }

/* ---------- responsive: fill the screen on mobile (≤520px) ---------- */
@media (max-width: 520px) {
  .usl-auth-overlay { padding: 0; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; align-items: stretch; }
  .usl-auth-card { max-width: none; width: 100%; min-height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
}

/* ============================================================
 * Theme-proofing — host themes (Flatsome / WooCommerce) inject their own
 * input/button/heading rules; these higher-specificity `.usl-auth-card`
 * rules keep the auth UI pixel-consistent on any theme.
 * ============================================================ */
.usl-auth-card input,
.usl-auth-card select,
.usl-auth-card textarea,
.usl-auth-card button {
  box-sizing: border-box; font-family: var(--usl-font); letter-spacing: normal; margin: 0; vertical-align: middle;
}
/* Title/subtitle live inside the black hero — themes style h1/p, so pin them. */
.usl-auth-card .usl-hero .usl-title {
  color: #fff !important; font-size: 24px !important; font-weight: 800 !important;
  line-height: 1.2 !important; letter-spacing: -.2px !important; margin: 0 !important;
  text-transform: none !important; text-shadow: none !important;
}
.usl-auth-card .usl-hero .usl-subtitle {
  color: var(--usl-sub-on-black) !important; font-size: 13.5px !important; font-weight: 400 !important;
  line-height: normal !important; letter-spacing: 0 !important; margin: 6px 0 0 !important; text-transform: none !important;
}
.usl-auth-card .usl-input {
  height: 52px !important; min-height: 0 !important; padding: 0 16px !important;
  line-height: normal !important; font-size: 16px !important; font-weight: 400 !important; background: #fff !important;
  background-image: none !important; color: var(--usl-black) !important; text-transform: none !important; box-shadow: none !important;
}
.usl-auth-card textarea.usl-input { height: auto !important; min-height: 90px !important; padding: 12px 16px !important; }
.usl-auth-card .usl-input:focus { box-shadow: 0 0 0 3px var(--usl-orange-ring) !important; border-color: var(--usl-orange) !important; }
.usl-auth-card .usl-input-pw { position: relative; }
.usl-auth-card .usl-input-pw .usl-input { padding-right: 66px !important; font-size: 20px !important; letter-spacing: 3px !important; }
.usl-auth-card .usl-input-pw .usl-input::placeholder { font-size: 16px !important; letter-spacing: normal !important; }
/* Phone field = flex row; +91 and input are siblings (can't overlap). */
.usl-auth-card .usl-phone-row {
  display: flex !important; align-items: center !important; height: 52px !important;
  padding: 0 0 0 16px !important; border: 1.5px solid var(--usl-hairline) !important;
  border-radius: 12px !important; background: #fff !important; box-shadow: none !important; position: static !important;
}
.usl-auth-card .usl-phone-row:focus-within { border-color: var(--usl-orange) !important; box-shadow: 0 0 0 3px var(--usl-orange-ring) !important; }
.usl-auth-card .usl-input-phone {
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  height: 100% !important; padding: 0 16px 0 0 !important; font-size: 16px !important; font-weight: 600 !important;
  letter-spacing: .5px !important;
  flex: 1 1 auto !important; min-width: 0 !important; border-radius: 0 !important;
}
.usl-auth-card .usl-input-phone:focus { box-shadow: none !important; border: 0 !important; }
.usl-auth-card .usl-cc {
  position: static !important; flex: 0 0 auto !important; height: auto !important; transform: none !important;
  font-size: 16px !important; font-weight: 600 !important; color: var(--usl-ink-45) !important; line-height: 1 !important;
  padding: 0 10px 0 0 !important; margin: 0 10px 0 0 !important; border-right: 1.5px solid var(--usl-prefix-divider) !important;
}
.usl-auth-card .usl-otp-box {
  height: 56px !important; min-height: 0 !important; padding: 0 !important; text-align: center !important;
  font-size: 22px !important; font-weight: 700 !important; line-height: normal !important; background: #fff !important; box-shadow: none !important;
}
.usl-auth-card .usl-otp-box:focus { box-shadow: 0 0 0 3px var(--usl-orange-ring) !important; }
.usl-auth-card .usl-btn {
  height: 52px !important; min-height: 0 !important; line-height: normal !important; text-transform: none !important;
  font-size: 16px !important; font-weight: 700 !important; letter-spacing: .2px !important;
  box-shadow: none !important; width: 100% !important; text-shadow: none !important;
}
.usl-auth-card .usl-btn-secondary { height: 50px !important; font-size: 15px !important; }
.usl-auth-card .usl-btn-primary { background: var(--usl-orange) !important; color: #fff !important; }
.usl-auth-card .usl-btn-primary:hover { background: var(--usl-orange-press) !important; }
.usl-auth-card .usl-btn-primary.usl-btn-pending { background: var(--usl-peach) !important; color: #fff !important; }
.usl-auth-card .usl-btn-secondary { background: #fff !important; color: var(--usl-orange) !important; }

/* Enforce structure padding — themes sometimes zero container padding. */
.usl-auth-card { overflow-x: hidden; }
.usl-auth-card .usl-sheet { padding: 0 !important; }
.usl-auth-card .usl-hero { background: #000 !important; padding: 30px 28px 26px !important; }
.usl-auth-card .usl-body { padding: 24px 28px 30px !important; }
.usl-auth-card .usl-stack, .usl-auth-card .usl-field, .usl-auth-card .usl-otp-group,
.usl-auth-card .usl-input, .usl-auth-card .usl-btn { max-width: 100% !important; }
@media (max-width: 520px) {
  .usl-auth-overlay { padding: 0 !important; }
}