/* Assistant (SIL Open Font License 1.1), self-hosted: the CSP allows only same-origin fonts. */
@font-face{font-family:Assistant;font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/assistant-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Assistant;font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/assistant-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Toko brand tokens, matching the website's Hebrew funnel. */
:root{
  --mint:#a9e0dc;--mint-strong:#6fd9ce;--mint-soft:#e6f5f3;--mint-line:#cdebe8;
  --blue:#3b8fe0;--blue-soft:#e8f2fc;--navy:#10394e;
  --ink:#111418;--body:#5a5f66;--quiet:#6e737a;--line:#e6e6e6;--chip-line:#dcdcdc;
  --alert:#c2410c;--alert-soft:#fff3ec;--page:#f6f8f8;
  font-family:Assistant,Arial,sans-serif;color:var(--ink);background:var(--page);line-height:1.6;
  -webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;background:
  radial-gradient(120% 60% at 100% 0,var(--mint-soft) 0,transparent 60%),
  radial-gradient(90% 50% at 0 0,var(--blue-soft) 0,transparent 55%),var(--page) no-repeat}
button,a,input{font:inherit}
header{max-width:560px;margin:auto;padding:22px 22px 6px;display:flex;align-items:center}
.brand{color:var(--navy);display:inline-flex;padding:6px 0}
.brand svg{display:block}
main{max-width:520px;margin:10px auto 56px;padding:0 16px}

.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px 24px;box-shadow:0 18px 40px -28px #10394e40}
h1{font-size:clamp(27px,7.2vw,34px);line-height:1.18;font-weight:800;letter-spacing:0;margin:0 0 10px;color:var(--ink)}
p{margin:0 0 18px;color:var(--body);font-size:17px;line-height:1.6}
.eyebrow{color:var(--quiet);font-size:14px;font-weight:600;margin:0 0 8px}
.quiet{color:var(--quiet);font-size:14px;margin:0 0 4px}
.greeting{font-size:16px;font-weight:600;color:var(--quiet);margin:0 0 6px}
#greeting{color:var(--navy);font-weight:800}
.badge{display:inline-block;background:var(--mint-soft);color:var(--navy);font-size:13px;font-weight:700;border-radius:999px;padding:5px 13px;margin:0 0 14px}

/* Icons: inline strokes, as in Toko onboarding. */
svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.brand svg{stroke:none}
.icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;background:var(--mint-soft);color:var(--navy)}
.icon svg{width:24px;height:24px}
.icon-muted{background:#f1f2f4;color:#57626b}
.success{width:64px;height:64px;border-radius:50%;background:var(--mint-strong);color:#fff;display:grid;place-items:center;margin-bottom:18px;box-shadow:0 14px 30px -8px #6fd9ce99;animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
.success svg{width:32px;height:32px;stroke-width:2.6}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* Slot summary */
.slot{background:var(--mint-soft);border:1px solid var(--mint-line);border-radius:18px;padding:18px 20px;margin:20px 0 22px}
.slot .day{font-size:17px;font-weight:700;color:var(--navy)}
.slot .date{color:var(--body);font-size:15px;margin:0 0 6px}
.slot .time{font-size:34px;font-weight:800;direction:ltr;text-align:right;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.slot .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.slot .meta span{background:#fff;border-radius:999px;padding:3px 11px;font-size:13px;font-weight:600;color:var(--navy)}

/* Buttons: pills, mint fill with navy text. */
.action{width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;text-decoration:none;text-align:center;border-radius:999px;padding:12px 20px;cursor:pointer;font-size:17px;font-weight:700;transition:transform .12s,background-color .15s,opacity .15s}
.action:active{transform:scale(.977)}
.primary{background:var(--mint-strong);color:var(--navy);border:0;box-shadow:0 10px 22px -14px #6fd9ce}
.primary:hover{background:#62cfc3}
.secondary{background:#fff;color:var(--navy);border:1.5px solid var(--mint);margin-top:10px}
.secondary:hover{background:var(--mint-soft)}
.danger{background:#fff;color:var(--alert);border:1.5px solid #f2c6ad}
.danger:hover{background:var(--alert-soft)}
button:disabled{opacity:.55;cursor:wait}
.text-button{display:block;margin:6px auto 0;border:0;background:none;color:var(--quiet);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 6px;font-size:15px}
.footer-link{margin-top:14px;font-size:14px}

.note{font-size:14px;text-align:center;margin:14px 0 0;color:var(--quiet)}
.divider{height:1px;background:var(--line);margin:22px 0 14px}
.contact{display:flex;gap:10px;align-items:center;font-size:15px;margin:18px 0 0;color:var(--body)}
.contact svg{width:20px;height:20px;flex:none;color:var(--quiet)}
.contact b{font-weight:600;color:var(--ink);direction:ltr;unicode-bidi:isolate}
#confirmed .contact{margin-top:0}

/* Two-step picker */
.steps{display:flex;gap:6px;margin:0 0 16px}
.steps span{height:4px;flex:1;border-radius:4px;background:#edeef0}
.steps span.on{background:var(--mint-strong)}
.days{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0 6px}
.chip{border:1px solid var(--chip-line);background:#fff;color:var(--ink);border-radius:16px;padding:12px 8px;cursor:pointer;font-size:16px;transition:border-color .15s,background-color .15s,transform .12s}
.chip:hover{border-color:var(--mint-strong);background:var(--mint-soft)}
.chip:active{transform:scale(.97)}
.days .chip{padding:14px 10px;font-weight:700;font-size:17px;text-align:center}
.days .chip span{display:block;font-weight:500;font-size:14px;margin-top:2px;color:var(--quiet)}
.times{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;direction:ltr;margin:14px 0 4px}
.times .chip{border-radius:999px;font-size:18px;font-weight:700;padding:12px 4px;font-variant-numeric:tabular-nums}
.chosen-day{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;background:var(--mint-soft);border-radius:16px;margin:16px 0 14px}
.chosen-day p{font-weight:700;color:var(--navy);margin:0;font-size:16px}
.chosen-day .text-button{margin:0;padding:4px 0;font-size:14px;white-space:nowrap}

/* Form */
#tester-form label{display:block;margin:16px 0 6px;font-weight:700;font-size:15px}
#tester-form input{display:block;width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--chip-line);border-radius:12px;color:inherit;background:#fff;font-size:17px;transition:border-color .15s,box-shadow .15s}
#tester-form input:focus{outline:none;border-color:var(--mint-strong);box-shadow:0 0 0 3px var(--mint-soft)}
#tester-form button{margin-top:24px}

.hint{font-size:15px;padding:12px 16px;background:var(--blue-soft);color:var(--navy);border-radius:14px;margin:0 0 16px}
.error{background:var(--alert-soft);color:var(--alert);border:1px solid #f6d5c2;padding:13px 16px;border-radius:16px;margin:0 0 14px;font-size:15px;font-weight:600}
.cancel-box{border-top:1px solid var(--line);padding-top:16px;margin-top:10px}
.cancel-box p{font-size:15px}

/* Loading: a quiet line with a spinner while the screen works. */
.progress{display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;color:var(--navy);font-weight:600;min-height:24px;margin:0 0 12px}
.progress:not(:empty)::before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid var(--mint-line);border-top-color:var(--mint-strong);animation:spin .8s linear infinite}
.spinner{width:48px;height:48px;border-radius:50%;border:4px solid var(--mint-soft);border-top-color:var(--mint-strong);margin-bottom:18px;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Each screen arrives with a short fade. */
.card:not([hidden]){animation:enter .25s ease-out both}
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.action:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
/* Screen headings receive focus for announcements, without looking selected. */
h1[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}

@media (max-width:420px){
  header{padding:16px 18px 2px}
  main{margin-top:6px;padding:0 12px}
  .card{padding:24px 20px;border-radius:22px}
  .slot .time{font-size:31px}
}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}