/* Sea & Sun gate: deep-sea navy + one sun-gold accent; the skyline hero and the yellow plate are the two loud moments. */
:root {
  --bg: #eaf1f4; --bg2: #eaf1f4;
  --card: #ffffff; --text: #0e2a3a; --muted: #5a7384; --border: #d3e0e7;
  --primary: #0d4a6b; --primary-dark: #093a55; --primary-soft: #e2eef4;
  --sun: #f2a900;
  --ok: #138a55; --bad: #c9382f; --warn: #b87708;
  --hero: #0d4a6b; --tower: #082f45; --tower-2: #0b3c58; --sea-line: #2d7da0;
  --shadow: 0 1px 2px rgba(8, 47, 69, .06), 0 12px 32px rgba(8, 47, 69, .10);
  --display: "Heebo", "Segoe UI", Arial, sans-serif;
  --body: "Heebo", "Segoe UI", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #081a25; --bg2: #081a25;
    --card: #10303f; --text: #e8f2f7; --muted: #94afbf; --border: #21475a;
    --primary: #4fb6d8; --primary-dark: #38a0c3; --primary-soft: #173c4e;
    --hero: #0a3248; --tower: #061b29; --tower-2: #08263a; --sea-line: #2a7396;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); color: var(--text); background: var(--bg); font-size: 17px; line-height: 1.5; min-height: 100vh; overflow-x: hidden; }
.wrap { max-width: 480px; margin: 0 auto; padding: 0 16px 48px; }

/* ---------- הירו: קו רקיע של שני המגדלים ---------- */
.hero { position: relative; margin-inline: calc(50% - 50vw); background: var(--hero); color: #fff; padding: 30px 20px 0; text-align: center; overflow: hidden; }
.hero-text { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; }
.eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: #f7c948; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.hero p.sub { margin: 10px auto 0; max-width: 30ch; font-size: 17px; font-weight: 300; opacity: .92; text-wrap: balance; }
.skyline { display: block; width: 100%; max-width: 480px; margin: 6px auto 0; height: auto; position: relative; z-index: 0; }
.skyline .sea { fill: var(--bg); }
.hero-edge { height: 40px; background: var(--bg); margin-top: -1px; }

/* ---------- כרטיס וטופס ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px 20px; margin-top: 16px; box-shadow: var(--shadow); }
.card.lift { margin-top: 14px; position: relative; z-index: 2; }
.field { margin-bottom: 14px; }
label { display: block; font-weight: 600; margin: 0 0 6px; font-size: 16px; }
label .req { color: var(--bad); margin-inline-start: 3px; }
label .hint { font-weight: 400; color: var(--muted); font-size: 14px; margin-inline-start: 8px; }

input[type=text], input[type=tel], input[type=password], input[type=search], input[type=number] {
  width: 100%; height: 54px; padding: 0 16px; font-size: 18px; font-family: inherit; color: var(--text);
  background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: color-mix(in srgb, var(--muted) 65%, transparent); }
input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent); }
input.invalid { border-color: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 14%, transparent); }
.err { color: var(--bad); font-size: 14px; font-weight: 600; }
.err:not(:empty) { margin-top: 6px; }

/* לוחית רישוי ישראלית */
.plate-box { display: flex; direction: ltr; height: 64px; border: 2.5px solid #161616; border-radius: 10px; overflow: hidden; background: #ffd21f; transition: box-shadow .15s; }
.plate-box:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent); }
.plate-box.invalid { border-color: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 18%, transparent); }
.plate-box .flag { background: #0b4ea2; color: #fff; width: 40px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.plate-box input { height: 100%; border: 0; border-radius: 0; background: transparent; color: #111; box-shadow: none !important; text-align: center; font-size: 32px; font-weight: 800; letter-spacing: 3px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.plate-box input::placeholder { color: rgba(0, 0, 0, .25); }

button, .btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; height: 54px; padding: 0 20px; font-size: 18px; font-weight: 700; cursor: pointer; background: var(--primary); color: #fff; font-family: inherit; text-decoration: none; transition: transform .1s, background .15s; }
button:hover, .btn:hover { background: var(--primary-dark); }
button:active { transform: scale(.98); }
button:disabled { opacity: .65; cursor: wait; }
button:focus-visible, .btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { button, .btn { color: #04202e; } button.ok, button.bad { color: #fff; } button.ghost, .btn.ghost { color: var(--muted); } }
button.full { width: 100%; margin-top: 8px; height: 58px; font-size: 19px; }
button.ok { background: var(--ok); } button.ok:hover { background: #0f7347; }
button.bad { background: var(--bad); } button.bad:hover { background: #a82e26; }
button.ghost, .btn.ghost { background: transparent; color: var(--muted); border: 1.5px solid var(--border); height: auto; }
button.ghost:hover, .btn.ghost:hover { background: var(--primary-soft); color: var(--primary-dark); }

.ltr { direction: ltr; text-align: right; }
.center { text-align: center; }
.note { text-align: center; color: var(--muted); font-size: 14px; margin: 14px 0 0; }

/* מסך אחרי שליחה */
.status-dot { width: 76px; height: 76px; border-radius: 50%; margin: 4px auto 14px; display: grid; place-items: center; font-size: 38px; font-weight: 800; color: #fff; background: var(--warn); }
.status-dot.pending { background: var(--sun); color: #3a2a00; animation: pulse 1.8s ease-in-out infinite; }
.status-dot.entered { background: var(--ok); } .status-dot.rejected { background: var(--bad); }
@keyframes pulse { 50% { transform: scale(1.07); box-shadow: 0 0 0 14px color-mix(in srgb, var(--sun) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .status-dot.pending { animation: none; } }
.done-title { font-family: var(--display); font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.done-msg { margin: 0; color: var(--muted); }
.state-pending { color: var(--warn); } .state-entered { color: var(--ok); } .state-rejected { color: var(--bad); }

/* מספר רכב כלוחית קטנה ברשימות */
.plate-chip { display: inline-block; direction: ltr; background: #ffd21f; color: #111; border: 2px solid #161616; border-radius: 7px; padding: 3px 12px; font-size: 24px; font-weight: 800; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.plate-chip.sm { font-size: 17px; padding: 1px 9px; border-width: 1.5px; letter-spacing: 1.5px; }

[hidden] { display: none !important; }