/* ============================================================================
   Scan & Pay — mobile-first, low-friction single-page parking checkout.
   Design direction "B" (price tiles). Accent (--acc) is injected per request
   from web_host branding; everything else is self-contained (no Bootstrap).
   ============================================================================ */

/* Tokens. Accent (--px-accent and friends) is emitted per host by BrandingLib into <head>, for light
   on :root and dark under [data-bs-theme=dark]; the neutrals below follow the same switch. The sp-*
   rules keep their short names, now aliased onto the shared tokens. */
:root {
  --acc: var(--px-accent, #4f46e5);
  --acc-soft: var(--px-accent-soft, #eef0fe);
  --acc-ink: var(--px-accent-ink, #4338ca);
  --on-acc: var(--px-on-accent, #fff);
  --ring: var(--px-accent-ring, rgba(79,70,229,.15));
  --ink: #14152a;
  --mut: #6b6f8a;
  --line: #e6e8f2;
  --page: #f4f5fb;
  --card: #ffffff;
  --card-2: #f7f8fc;
  --ok: #16a34a;
  --bad: #dc2626;
  --legal: #41455e;
  --sw-off: #8a90a8;
  --radius: 14px;
  --shadow: 0 10px 26px rgba(20,21,42,.16);
  color-scheme: light;
}
[data-bs-theme="dark"] {
  --ink: #e6edf5;
  --mut: #8b93a7;
  --line: #2c313d;
  --page: #121419;
  --card: #1a1d25;
  --card-2: #20242e;
  --ok: #22c072;
  --bad: #ff6060;
  --legal: #b4bccd;
  --sw-off: #555c6e;
  --shadow: 0 10px 26px rgba(0,0,0,.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.sp-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 18px 16px 40px;
  min-height: 100vh;
}

/* ---- brand header ---- */
.sp-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.sp-logo-img { max-height: 40px; max-width: 60%; }
.sp-logo-fallback {
  width: 36px; height: 36px; border-radius: 9px; background: var(--acc); color: var(--on-acc);
  font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
}
.sp-co { font-weight: 700; font-size: .95rem; }
.sp-co small { display: block; font-weight: 500; font-size: .72rem; color: var(--mut); }

/* ---- lot context ---- */
.sp-lot { margin-bottom: 18px; }
.sp-lot .k { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--mut); text-transform: uppercase; }
.sp-lot .v { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.sp-lot .s { font-size: .9rem; color: var(--mut); }

/* ---- step sections (progressive reveal) ---- */
.sp-section { margin-bottom: 18px; }
.sp-section[hidden] { display: none; }
.sp-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--mut); text-transform: uppercase; margin: 0 0 10px; }

/* ---- completed-step chip ---- */
.sp-chip {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; margin-bottom: 12px; width: 100%; text-align: left;
}
.sp-chip[hidden] { display: none; }   /* the display:flex above shadows the UA [hidden] rule — restore it, same as .sp-section[hidden] */
.sp-chip .pl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-chip .chk { width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: var(--on-acc);
  font-size: .72rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-chip .t { font-weight: 700; font-size: .95rem; }
.sp-chip .sub { display: block; font-size: .74rem; color: var(--mut); }
.sp-chip .act { font-size: .8rem; color: var(--acc); font-weight: 700; background: none; border: none; cursor: pointer; }

/* ---- plate inputs ---- */
.sp-input, .sp-select {
  width: 100%; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 15px 14px; font-size: 1.2rem; color: var(--ink); margin-bottom: 10px; font-family: inherit;
}
.sp-input { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sp-input::placeholder { color: var(--mut); opacity: .7; font-weight: 600; letter-spacing: .08em; }
.sp-input:focus, .sp-select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--ring); }
.sp-select { font-weight: 600; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236b6f8a' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.sp-remember { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--mut); margin: 4px 2px; cursor: pointer; }
.sp-remember input { width: 18px; height: 18px; accent-color: var(--acc); }

/* ---- rate tiles (direction B) ---- */
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-tile {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px 10px; text-align: center; cursor: pointer; transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sp-tile:active { transform: scale(.98); }
.sp-tile .price { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.sp-tile .dur { font-size: .92rem; font-weight: 700; margin-top: 5px; }
.sp-tile .sub { font-size: .7rem; color: var(--mut); margin-top: 2px; }
.sp-tile.free .price { color: var(--ok); }
.sp-tile.on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); box-shadow: 0 8px 18px var(--ring); }
.sp-tile.on .sub { color: var(--on-acc); opacity: .85; }
.sp-tile.on.free { background: var(--ok); border-color: var(--ok); box-shadow: 0 8px 18px rgba(22,163,74,.3); }
.sp-tile.on.free .price { color: var(--on-acc); }

/* ---- pay / action button ---- */
.sp-pay {
  display: block; width: 100%; margin-top: 18px; border: none; cursor: pointer;
  background: var(--acc); color: var(--on-acc); text-align: center; font-weight: 800; font-size: 1.15rem;
  padding: 17px; border-radius: var(--radius); box-shadow: 0 8px 18px var(--ring); font-family: inherit;
}
.sp-pay.free { background: var(--ok); box-shadow: 0 8px 18px rgba(22,163,74,.28); }
.sp-pay[disabled] { background: var(--line); color: var(--mut); box-shadow: none; cursor: default; }
.sp-pay small { display: block; font-weight: 500; font-size: .72rem; opacity: .85; margin-top: 2px; }
.sp-pay .spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5);
  border-top-color: var(--on-acc); border-radius: 50%; animation: sp-rot .7s linear infinite; vertical-align: -2px; }
@keyframes sp-rot { to { transform: rotate(360deg); } }

/* ---- fee breakdown ---- */
.sp-breakdown { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; margin-bottom: 14px; }
.sp-breakdown[hidden] { display: none; }
.sp-br { display: flex; justify-content: space-between; padding: 9px 0; font-size: .95rem; }
.sp-br[hidden] { display: none; }
.sp-br .l { color: var(--mut); } .sp-br .r { font-weight: 700; }
.sp-br.tot { border-top: 1px solid var(--line); }
.sp-br.tot .l, .sp-br.tot .r { font-weight: 800; }

/* ---- stripe payment element ---- */
.sp-stripe { background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; }
#payment-element { min-height: 40px; }
.sp-secure { text-align: center; font-size: .72rem; color: var(--mut); margin-top: 10px; }
.sp-error { color: var(--bad); font-size: .85rem; margin-top: 10px; text-align: center; min-height: 1.2em; }

/* ---- receipt ---- */
.sp-done { text-align: center; padding: 8px 0 4px; }
.sp-done .big { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: var(--on-acc); font-size: 2rem;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: 0 8px 18px rgba(22,163,74,.3); }
.sp-done h1 { font-size: 1.4rem; font-weight: 800; margin: 0; }
.sp-done p { font-size: .85rem; color: var(--mut); margin: 4px 0 0; }
.sp-valid { background: var(--acc-soft); border-radius: var(--radius); text-align: center; padding: 16px; margin: 18px 0; }
.sp-valid .k { font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: var(--acc); text-transform: uppercase; }
.sp-valid .v { font-size: 1.5rem; font-weight: 800; }
.sp-receipt { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px; }
.sp-rr { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.sp-rr:last-child { border-bottom: none; }
.sp-rr .l { color: var(--mut); } .sp-rr .r { font-weight: 700; text-align: right; }
.sp-emailbox { margin-top: 18px; }
.sp-emailbox .lab { font-size: .85rem; color: var(--mut); margin-bottom: 8px; }
.sp-emailbox .row { display: flex; gap: 8px; }
.sp-emailbox input { flex: 1; border: 1.5px solid var(--line); border-radius: 11px; padding: 14px; font-size: 1rem; font-family: inherit; }
.sp-emailbox input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--ring); }
.sp-emailbox .send { background: var(--acc); color: var(--on-acc); border: none; border-radius: 11px; padding: 0 18px; font-size: .95rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.sp-msg { text-align: center; font-size: .88rem; margin-top: 10px; min-height: 1.2em; }
.sp-msg.ok { color: var(--ok); } .sp-msg.bad { color: var(--bad); }
.sp-foot { text-align: center; margin-top: 26px; color: var(--mut); font-size: .8rem; }
.sp-foot img { max-height: 36px; opacity: .8; display: block; margin: 0 auto 8px; }

/* ---- receipt: SMS expiry-reminder opt-in (_SmsReminder.cshtml) ----
   The toggle only reveals the form, in pure CSS via :has(); browsers without :has() just show the form. */
.sp-sms { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; }
.sp-sms:has(.sp-sw:checked), .sp-sms.is-done { border-color: var(--acc); box-shadow: 0 0 0 3px var(--ring); }
.sp-sms-row { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; margin: 0; }
.sp-sms-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--acc-soft); color: var(--acc); display: flex; align-items: center; justify-content: center; flex: none; }
.sp-sms-tx { flex: 1; min-width: 0; }
.sp-sms-t { display: block; font-weight: 800; font-size: 1rem; line-height: 1.25; }
.sp-sms-s { display: block; font-size: .82rem; color: var(--mut); margin-top: 2px; }
.sp-sw { appearance: none; -webkit-appearance: none; width: 52px; height: 32px; border-radius: 999px; background: var(--sw-off);
  position: relative; flex: none; margin: 0; cursor: pointer; transition: background .15s; }
.sp-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(20,21,42,.3); transition: left .15s; }
.sp-sw:checked { background: var(--acc); }
.sp-sw:checked::after { left: 23px; }
.sp-sw:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.sp-sms-form { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sp-sms:has(.sp-sw:checked) .sp-sms-form { display: block; }
@supports not selector(:has(*)) { .sp-sms-form { display: block; } }
.sp-sms-form .lab { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.sp-tel { width: 100%; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; font-size: 1.15rem;
  font-weight: 700; letter-spacing: .02em; color: var(--ink); font-family: inherit; }
.sp-tel:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--ring); }
.sp-tel.bad { border-color: var(--bad); }
.sp-sms-err { color: var(--bad); font-size: .85rem; font-weight: 600; margin-top: 6px; }
.sp-legal { font-size: .8rem; line-height: 1.5; color: var(--legal); margin: 12px 0 0; }
.sp-legal strong { color: var(--ink); }
.sp-legal a { color: var(--acc); font-weight: 600; }
.sp-btn { display: block; width: 100%; margin-top: 14px; border: none; cursor: pointer; background: var(--acc); color: var(--on-acc);
  font-weight: 800; font-size: 1.05rem; padding: 15px; border-radius: 12px; box-shadow: 0 8px 18px var(--ring); font-family: inherit; min-height: 50px; }
.sp-sms-ok { display: flex; gap: 12px; align-items: flex-start; }
.sp-sms-ok .chk { width: 40px; height: 40px; border-radius: 50%; background: var(--ok); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.sp-sms-ok .t { font-weight: 800; font-size: 1rem; }
.sp-sms-ok .s { font-size: .85rem; color: var(--mut); margin-top: 2px; }
.sp-sms-ok .s strong { color: var(--ink); }
.sp-link { display: inline-flex; align-items: center; min-height: 34px; padding-top: 6px; color: var(--acc); font-weight: 700; font-size: .85rem; text-decoration: none; }

/* ---- SMS Terms / Privacy Policy (LegalController) ---- */
.sp-doc h1 { font-size: 1.55rem; font-weight: 800; line-height: 1.15; margin: 0; }
.sp-doc-kick { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--mut); text-transform: uppercase; margin: 6px 0 4px; }
.sp-doc-upd { font-size: .8rem; color: var(--mut); margin: 6px 0 16px; }
.sp-doc-lede { font-size: .92rem; margin: 0 0 14px; }
.sp-doc-also { margin-top: 14px; }
.sp-doc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px; }
.sp-doc-sec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.sp-doc-sec:last-child { border-bottom: none; }
.sp-doc-sec h2 { font-size: .98rem; font-weight: 800; margin: 0 0 4px; }
.sp-doc-sec p { font-size: .9rem; margin: 0; }
.sp-doc-sec p + p { margin-top: 6px; }
.sp-doc-key { background: var(--acc-soft); border-radius: 10px; padding: 10px 12px; font-weight: 600; }
.sp-doc a { color: var(--acc); font-weight: 600; }

/* ---- not found ---- */
.sp-notfound { text-align: center; padding: 60px 16px; }
.sp-notfound .ic { font-size: 3rem; }
.sp-notfound h1 { font-size: 1.3rem; margin: 12px 0 6px; }
.sp-notfound p { color: var(--mut); }

/* ---- zone home: other-operator warning + legal links ---- */
.sp-notfound .ic { color: var(--mut); display: flex; justify-content: center; }
.sp-other .ic { color: #b45309; }
.sp-notfound .sp-pay { text-decoration: none; }
.sp-notfound .sp-pay + .sp-pay { margin-top: 10px; }
.sp-legal-links a { color: var(--mut); text-decoration: underline; }

/* ---- language selector (mobile shell: always compact form B) ---- */
.lang-select { position: relative; }
.lang-select > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
    gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; font-size: .8rem;
    font-weight: 700; background: var(--card); color: var(--ink); }
.lang-select > summary::-webkit-details-marker { display: none; }
.lang-select .lang-flag { height: 14px; width: auto; border-radius: 2px; }
.lang-select .lang-full { display: none; }    /* ScanPay shell is always narrow → code form */
.lang-select .lang-code { display: inline; }
.lang-select .lang-caret { font-size: .6rem; color: var(--mut); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 170px;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
    overflow: hidden; }
.lang-menu .lang-item { display: flex; align-items: center; gap: 8px; padding: 11px 13px; color: var(--ink);
    text-decoration: none; font-size: .95rem; font-weight: 600; }
.lang-menu .lang-item + .lang-item { border-top: 1px solid var(--line); }
.lang-menu .lang-item.active { background: var(--acc-soft); color: var(--acc); }
.lang-menu .lang-check { margin-left: auto; }

/* ---- kiosk top bar (brand + language + theme) ---- */
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.sp-top .sp-brand { margin-bottom: 0; text-decoration: none; color: var(--ink); min-width: 0; }
.sp-top-r { display: flex; align-items: center; gap: 8px; flex: none; }
.sp-theme { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 15px; cursor: pointer; }
.sp-logo-dark { display: none; }
[data-bs-theme="dark"] .sp-logo-dark { display: inline; }
[data-bs-theme="dark"] .sp-logo-light { display: none; }

/* ---- zone home (P0) ---- */
.sp-home-code { text-align: center; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: 1.35rem; }
.sp-or { display: flex; align-items: center; gap: 10px; color: var(--mut); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 14px 0; }
.sp-or::before, .sp-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sp-pay.alt { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.sp-zone { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; text-decoration: none; color: var(--ink); }
.sp-zone:hover { border-color: var(--acc); }
.sp-zone .code { font-family: ui-monospace, Menlo, monospace; font-weight: 800; background: var(--acc-soft); color: var(--acc-ink); border-radius: 8px; padding: 6px 10px; flex: none; }
.sp-zone .nm { font-weight: 700; } .sp-zone .kd { font-size: .8rem; color: var(--mut); }
.sp-zone .dist { margin-left: auto; font-size: .85rem; color: var(--mut); flex: none; }
.sp-err { color: var(--bad); font-weight: 600; font-size: .9rem; margin: 8px 0 0; }