/* Sportspots zoekbalk (header). Hoort bij src/web/zoekbalk.ts en public/web/zoekbalk.js.
   Desktop: tabbladen + balk met vakken; op de homepage groot bovenaan, daarna een compacte pil.
   Mobiel (< 744px): een pil die een scherm vullend paneel opent. */

:root {
  --zb-dark: #0F4A2E; --zb-ball: #DCF247; --zb-ball-fill: #FFFFFF; --zb-water: #2F8F6B; --zb-metal: #8FA59A; --zb-shadow: rgba(14, 26, 20, .14);
  --zb-bar-shadow: 0 1px 2px rgba(14, 26, 20, .06), 0 6px 20px rgba(14, 26, 20, .09);
  --zb-pop-shadow: 0 2px 6px rgba(14, 26, 20, .08), 0 16px 40px rgba(14, 26, 20, .16);
  --zb-band: 92px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zb-dark: #CFE9D8; --zb-ball-fill: #183526; --zb-water: #1F6B50; --zb-metal: #9DB5A8; --zb-shadow: rgba(0, 0, 0, .35);
    --zb-bar-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --zb-pop-shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .5);
  }
}

/* ── header frame ─────────────────────────────────────────────────────── */
.site-header { position: sticky; }
.site-header .header-row { position: relative; }
.zb-slot { flex: 1; min-width: 0; display: flex; justify-content: center; }
.site-header .main-nav { margin-left: 0; }
.map-btn { display: none; }
.zb-overlay { position: fixed; inset: 0; background: rgba(9, 17, 13, .28); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
html.zb-lock-d .zb-overlay { opacity: 1; pointer-events: auto; }
html.zb-lock-m { overflow: hidden; }
/* a fixed sheet cannot escape a header with a backdrop filter: switch it off while the sheet is open */
html.zb-lock-m .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 100; }

.zb { display: contents; font-family: var(--font); }
.zb-ic { width: 34px; height: 34px; flex: none; overflow: visible; }
.zb-ic .zb-shadow { fill: var(--zb-shadow); }
.zb-ic .zb-move, .zb-ic .zb-ball2, .zb-ic .zb-shadow { transform-box: fill-box; }

/* ── compact pill (desktop) ───────────────────────────────────────────── */
.zb-pill {
  display: flex; align-items: center; gap: 0; height: 48px; padding: 0 6px 0 10px; max-width: 100%;
  border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); color: var(--text);
  box-shadow: var(--zb-bar-shadow); cursor: pointer; font: 600 .95rem/1 var(--font);
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
}
.zb-pill:hover { box-shadow: 0 2px 4px rgba(14, 26, 20, .08), 0 10px 26px rgba(14, 26, 20, .14); }
.zb-pill-ic .zb-ic { width: 30px; height: 30px; margin-right: 6px; }
.zb-pill-part { padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.zb-pill-strong { font-weight: 700; }
.zb-pill-soft { color: var(--text-2); font-weight: 500; }
.zb-pill-sep { width: 1px; height: 22px; background: var(--hair); flex: none; }
.zb-pill-go, .zb-mpill-go { width: 36px; height: 36px; border-radius: 50%; background: var(--ball); color: var(--ball-ink); display: grid; place-items: center; flex: none; margin-left: 4px; box-shadow: inset 0 0 0 2px var(--pitch); }
.zb-mpill { display: none; }

/* ── the panel: tabs in the header row, bar in a band under it ────────── */
.zb-panel { position: absolute; left: 0; right: 0; top: 0; z-index: 2; pointer-events: none; visibility: hidden; }
.zb-sheet-head, .zb-sheet-foot { display: none; }
.zb-tabs {
  height: 62px; display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0 auto; width: max-content; max-width: calc(100% - 520px);
  opacity: 0; transform: translateY(-6px) scale(.96); transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.zb-tab {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; height: 54px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  color: var(--text-2); font: 600 1rem/1 var(--font); position: relative; border-radius: 10px;
}
.zb-tab:hover { color: var(--text); }
.zb-tab[aria-selected="true"] { color: var(--text); }
.zb-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--text); }
.zb-tab .zb-ic { width: 40px; height: 40px; transition: transform .2s ease; }
.zb-tab:hover .zb-ic { transform: scale(1.06); }
.zb-tab-s { display: none; }
.zb-bar {
  position: relative; display: flex; align-items: center; width: min(860px, calc(100vw - 48px)); height: 66px; margin: 10px auto 0;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 999px; box-shadow: var(--zb-bar-shadow);
  opacity: 0; transform: translateY(-58px) scale(.52); transform-origin: 50% 0; transition: opacity .18s ease, transform .32s cubic-bezier(.2, .8, .2, 1), background .2s ease;
}
.zb-fields { display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; }
.zb-fields[hidden] { display: none; }
.zb-seg { position: relative; flex: 1 1 0; min-width: 0; height: 100%; }
.zb-seg[data-seg="wat"], .zb-seg[data-seg="vwat"] { flex-grow: 1.35; }
.zb-segbtn {
  display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 100%; height: 100%; padding: 0 26px; text-align: left;
  border: 0; background: none; border-radius: 999px; cursor: pointer; color: var(--text); font: inherit; transition: background .15s ease, box-shadow .15s ease;
}
.zb-segbtn:hover { background: var(--fill); }
.zb-label { font: 700 .78rem/1 var(--font); letter-spacing: .02em; }
.zb-value { font: 500 .95rem/1.2 var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-value.is-ph { color: var(--text-2); }
.zb .zb-input { -webkit-appearance: none; appearance: none; border: 0; outline: 0; background: none; padding: 0; margin: 0; width: 100%; min-height: 0; height: 1.25em; border-radius: 0; font: 500 .95rem/1.2 var(--font); color: var(--text); min-width: 0; box-shadow: none; }
.zb .zb-input:focus, .zb .zb-input:focus-visible { outline: 0; box-shadow: none; }
.zb-segin:focus-within { outline: 0; }
.zb-input::placeholder { color: var(--text-2); opacity: 1; }
.zb-input::-webkit-search-cancel-button { display: none; }
.zb-segin { cursor: text; }
.zb-div { width: 1px; height: 32px; background: var(--hair); flex: none; transition: opacity .15s; }
.zb-bar.has-active { background: var(--fill); }
@media (prefers-color-scheme: dark) { .zb-seg.is-active .zb-segbtn { background: var(--fill-strong); } .zb-pop { border: 1px solid var(--hair); } }
.zb-seg.is-active .zb-segbtn { background: var(--surface); box-shadow: var(--zb-bar-shadow); }
.zb-bar.has-active .zb-segbtn:hover { background: var(--fill-strong); }
.zb-bar.has-active .zb-seg.is-active .zb-segbtn:hover { background: var(--surface); }
.zb-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: var(--fill-strong); color: var(--text); font: 700 1rem/1 var(--font); cursor: pointer; display: none; place-items: center;
}
.zb-seg.is-active .zb-clear:not([hidden]) { display: grid; }
.zb-go {
  flex: none; height: 50px; min-width: 50px; margin: 0 8px; padding: 0 15px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ball); color: var(--ball-ink); box-shadow: inset 0 0 0 2px var(--pitch); display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 1rem/1 var(--font); transition: padding .25s ease, background .15s;
}
.zb-go:hover { background: var(--ball-hover); }
.zb-go-ic { display: grid; place-items: center; }
.zb-go-l { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s ease; }
.zb-bar.has-active .zb-go { padding: 0 20px 0 16px; }
.zb-bar.has-active .zb-go-l { max-width: 90px; }
.zb.is-going .zb-go-ic { animation: zb-spin .7s linear infinite; }
.zb-hidden { display: none; }

/* band under the header row that holds the bar */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--zb-band); background: var(--canvas); border-bottom: 1px solid var(--hair);
  transform-origin: 50% 0; transform: scaleY(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1); pointer-events: none; z-index: 1;
}

/* open (clicked) or at the top of the homepage */
.zb-open .zb-panel, .zb-top .zb-panel { visibility: visible; }
.zb-open .zb-panel > *, .zb-top .zb-panel > * { pointer-events: auto; }
.zb-open .zb-tabs, .zb-top .zb-tabs, .zb-open .zb-bar, .zb-top .zb-bar { opacity: 1; transform: none; }
.zb-open .zb-pill, .zb-top .zb-pill { opacity: 0; transform: translateY(26px) scale(1.5); pointer-events: none; }
.zb-open::after, .zb-top::after { transform: scaleY(1); }
.zb-open .header-row > .brand, .zb-top .header-row > .brand { position: relative; z-index: 3; }
/* homepage: room for the band at the top so it covers nothing */
.zb-home ~ main { padding-top: var(--zb-band); }

/* ── panels (pop-overs) ───────────────────────────────────────────────── */
.zb-pop {
  display: none; position: absolute; top: calc(100% + 12px); left: 0; z-index: 5; width: max(100%, 380px); max-height: min(70vh, 560px); overflow: auto;
  background: var(--surface); color: var(--text); border-radius: 24px; box-shadow: var(--zb-pop-shadow); padding: 22px; animation: zb-pop .18s ease-out;
}
.zb-seg[data-seg="wat"] .zb-pop { width: 440px; }
.zb-seg[data-seg="wanneer"] .zb-pop, .zb-seg[data-seg="vwanneer"] .zb-pop { width: 470px; left: 50%; transform: translateX(-50%); }
.zb-seg[data-seg="wie"] .zb-pop, .zb-seg[data-seg="prijs"] .zb-pop, .zb-seg[data-seg="baan"] .zb-pop { left: auto; right: -66px; width: 400px; }
.zb-seg[data-seg="vwat"] .zb-pop { width: 520px; }
.zb-seg[data-seg="soort"] .zb-pop { width: 420px; }
.zb-seg.is-active .zb-pop { display: block; }
.zb-pop-h { margin: 0 0 10px; font: 700 .82rem/1.2 var(--font); color: var(--text-2); letter-spacing: .02em; }
.zb-pop-h:not(:first-child) { margin-top: 18px; }
.zb-pop-note { margin: 4px 8px 8px; color: var(--text-2); font-size: .92rem; }
.zb-rows { display: grid; gap: 2px; }
.zb-row { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border: 0; background: none; border-radius: 14px; text-align: left; cursor: pointer; color: var(--text); font: inherit; width: 100%; }
.zb-row:hover, .zb-row:focus-visible { background: var(--fill); }
.zb-row-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--fill); display: grid; place-items: center; flex: none; }
.zb-row-ic .sb { --sb: 40px !important; }
.zb-row-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--fill-strong); }
.zb-row-search { color: var(--text); }
.zb-row-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zb-row-t strong { font-weight: 600; }
.zb-row-t span { font-size: .86rem; color: var(--text-2); }
.zb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zb-chip { border: 1px solid var(--hair); background: var(--surface); color: var(--text); border-radius: 999px; padding: 9px 15px; font: 600 .92rem/1 var(--font); cursor: pointer; min-height: 40px; }
.zb-chip:hover { border-color: var(--text); }
.zb-chip.is-on { background: var(--text); border-color: var(--text); color: var(--canvas); }
.zb-chip-s { font-weight: 500; opacity: .75; margin-left: 4px; }
.zb-days .zb-chip { min-width: 46px; }
.zb-opts { display: grid; }
.zb-opt { display: flex; align-items: center; gap: 12px; justify-content: space-between; width: 100%; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--hair); background: none; text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.zb-opts .zb-opt:last-child { border-bottom: 0; }
.zb-opt-t { display: flex; flex-direction: column; gap: 3px; }
.zb-opt-t strong { font-weight: 600; }
.zb-opt-t span { font-size: .86rem; color: var(--text-2); }
.zb-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--hair); flex: none; }
.zb-opt.is-on .zb-radio { border: 7px solid var(--text); }
.zb-step { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 14px; border-bottom: 1px solid var(--hair); color: var(--text-2); font-size: .92rem; }
.zb-stepper { display: flex; align-items: center; gap: 12px; }
.zb-stepper button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface); color: var(--text); font: 600 1.15rem/1 var(--font); cursor: pointer; }
.zb-stepper button:hover:not(:disabled) { border-color: var(--text); }
.zb-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.zb-stepper output { min-width: 62px; text-align: center; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.zb-toggles { margin-top: 10px; border-top: 1px solid var(--hair); }
.zb-switch { width: 44px; height: 26px; border-radius: 999px; background: var(--fill-strong); position: relative; flex: none; transition: background .15s; }
.zb-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s ease; }
.zb-tg.is-on .zb-switch { background: var(--pitch); }
.zb-tg.is-on .zb-switch::after { transform: translateX(18px); }
.zb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.zb-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); color: var(--text); font: 600 .86rem/1.15 var(--font); cursor: pointer; text-align: center; }
.zb-tile:hover { border-color: var(--text); }
.zb-tile.is-on { border: 2px solid var(--text); padding: 11px 5px; }
.zb-tile .sb { --sb: 40px !important; }
.zb-times { display: flex; gap: 12px; margin-top: 16px; }
.zb-times label { display: flex; flex-direction: column; gap: 6px; flex: 1; font: 700 .8rem/1 var(--font); color: var(--text-2); }
.zb-times select { font: 500 1rem/1 var(--font); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hair); background: var(--surface); color: var(--text); }

/* ── icon moves ───────────────────────────────────────────────────────── */
.zb-tab:hover .zb-ic-bal .zb-move, .zb-tab.is-bump .zb-ic-bal .zb-move { animation: zb-bounce .7s cubic-bezier(.3, 0, .3, 1); }
.zb-tab:hover .zb-ic-bal .zb-shadow, .zb-tab.is-bump .zb-ic-bal .zb-shadow { animation: zb-squash .7s cubic-bezier(.3, 0, .3, 1); transform-origin: 50% 50%; }
.zb-tab:hover .zb-ic-water .zb-move, .zb-tab.is-bump .zb-ic-water .zb-move { animation: zb-wave 1s ease-in-out; }
.zb-tab:hover .zb-ic-samen .zb-move, .zb-tab.is-bump .zb-ic-samen .zb-move { animation: zb-hi .6s cubic-bezier(.3, 0, .3, 1); }
@keyframes zb-hi { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } 70% { transform: translateY(1px); } }
.zb-tab:hover .zb-ic-padel .zb-move, .zb-tab.is-bump .zb-ic-padel .zb-move { animation: zb-swing .6s cubic-bezier(.3, 0, .3, 1); transform-origin: 0% 100%; }
.zb-tab:hover .zb-ic-padel .zb-ball2, .zb-tab.is-bump .zb-ic-padel .zb-ball2 { animation: zb-hop .6s cubic-bezier(.3, 0, .3, 1); }
.zb-tab:hover .zb-ic-vlag .zb-move, .zb-tab.is-bump .zb-ic-vlag .zb-move { animation: zb-flag .8s ease-in-out; transform-origin: 0% 50%; }
@keyframes zb-bounce { 0% { transform: none; } 30% { transform: translateY(-9px); } 55% { transform: translateY(0) scale(1.06, .92); } 72% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes zb-squash { 0%, 100% { transform: none; } 30% { transform: scale(.6); opacity: .5; } 55% { transform: scale(1.1); } }
@keyframes zb-wave { 0%, 100% { transform: none; } 50% { transform: translateX(-6px); } }
@keyframes zb-swing { 0% { transform: none; } 35% { transform: rotate(-16deg); } 60% { transform: rotate(8deg); } 100% { transform: none; } }
@keyframes zb-hop { 0%, 40% { transform: none; } 65% { transform: translate(4px, -6px); } 100% { transform: none; } }
@keyframes zb-flag { 0%, 100% { transform: none; } 30% { transform: skewY(-6deg) scaleX(.94); } 65% { transform: skewY(4deg); } }
@keyframes zb-pop { from { opacity: 0; transform: translateY(-4px); } }
.zb-seg[data-seg="wanneer"] .zb-pop, .zb-seg[data-seg="vwanneer"] .zb-pop { animation: none; }
@keyframes zb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .zb *, .site-header::after { animation: none !important; transition: none !important; }
}

/* ── narrower desktops ────────────────────────────────────────────────── */
@media (max-width: 1399px) {
  .zb-tab-l { display: none; }
  .zb-tab-s { display: inline; }
}
@media (max-width: 1180px) {
  .zb-tabs { max-width: calc(100% - 420px); gap: 0; }
  .zb-tab { padding: 8px 8px; font-size: .95rem; }
  .zb-tab .zb-ic { width: 34px; height: 34px; }
  .zb-pill-part { padding: 0 10px; max-width: 150px; }
}
@media (max-width: 960px) {
  .site-header .brand-name, .site-header .brand-city { display: none; }
  .zb-tabs { max-width: calc(100% - 240px); }
  .zb-tab .zb-tab-s { font-size: .9rem; }
  .zb-segbtn { padding: 0 18px; }
  .zb-pill-soft, .zb-pill-soft + .zb-pill-sep { display: none; }
  .zb-pill-sep:has(+ .zb-pill-soft) { display: none; }
}

/* ── phone ────────────────────────────────────────────────────────────── */
@media (max-width: 743px) {
  /* header on a phone: a 56px search pill like Airbnb and Booking (they use 56–58px), 48px touch targets */
  :root { --zb-band: 0px; --hdr-h: 77px; }
  .zb-home ~ main { padding-top: 0; }
  .site-header::after { display: none; }
  .site-header .main-nav, .site-header .lang-switch { display: none; }
  .site-header .brand-name, .site-header .brand-city { display: none; }
  .map-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface); color: var(--text); flex: none; }
  .header-row { gap: 10px; height: 76px; }
  .site-header .brand-mark { width: 36px; height: 36px; font-size: 1.35rem; }
  .zb-pill { display: none; }
  .zb-mpill {
    display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 18px 0 8px; border: 1px solid var(--hair); border-radius: 999px;
    background: var(--surface); color: var(--text); box-shadow: var(--zb-bar-shadow); cursor: pointer; text-align: left; font: inherit;
  }
  .zb-mpill-go { margin: 0; width: 40px; height: 40px; }
  .zb-mpill-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .zb-mpill-text strong { font: 700 1.03rem/1.15 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zb-mpill-text span { font: 500 .86rem/1.15 var(--font); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* full-screen sheet */
  .zb-panel { position: fixed; inset: 0; z-index: 100; visibility: hidden; opacity: 0; transform: translateY(16px); background: var(--canvas);
    display: flex; flex-direction: column; overflow: hidden; transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s .25s; }
  .zb-top .zb-panel { visibility: hidden; }
  .zb-open .zb-panel { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1); pointer-events: auto; }
  .zb-open .zb-panel > * { pointer-events: auto; }
  .zb-sheet-head { display: flex; justify-content: flex-start; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 0; }
  .zb-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface); color: var(--text); font: 500 1.5rem/1 var(--font); cursor: pointer; }
  .zb-tabs, .zb-open .zb-tabs { opacity: 1; transform: none; max-width: none; width: auto; height: auto; justify-content: space-around; padding: 6px 8px 0; gap: 0; border-bottom: 1px solid var(--hair); }
  .zb-tab { flex-direction: column; gap: 4px; height: auto; padding: 6px 4px 12px; font-size: .82rem; flex: 1; }
  .zb-tab .zb-ic { width: 38px; height: 38px; }
  .zb-tab-l { display: none; }
  .zb-tab-s { display: inline; }
  .zb-tab[aria-selected="true"]::after { left: 18%; right: 18%; bottom: 0; }
  .zb-bar, .zb-open .zb-bar { opacity: 1; transform: none; width: auto; height: auto; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; display: block; flex: 1; overflow: auto; padding: 14px 14px 20px; }
  .zb-bar.has-active { background: none; }
  .zb-fields { display: flex; flex-direction: column; align-items: stretch; gap: 12px; height: auto; }
  .zb-div, .zb-go { display: none; }
  .zb-seg { height: auto; background: var(--surface); border-radius: 18px; box-shadow: var(--zb-bar-shadow); border: 1px solid var(--hair); flex: none; }
  .zb-segbtn, .zb-bar.has-active .zb-segbtn:hover, .zb-segbtn:hover { flex-direction: row; justify-content: space-between; align-items: center; padding: 18px 20px; border-radius: 18px; background: none; box-shadow: none; }
  .zb-seg.is-active .zb-segbtn { background: none; box-shadow: none; padding-bottom: 6px; }
  .zb-label { font: 600 .95rem/1 var(--font); color: var(--text-2); letter-spacing: 0; }
  .zb-value { font: 700 .95rem/1.2 var(--font); max-width: 62%; text-align: right; }
  .zb-seg.is-active .zb-label { font: 700 1.45rem/1.1 var(--display); color: var(--text); }
  .zb-seg.is-active .zb-value { display: none; }
  .zb-segin { flex-wrap: wrap; }
  .zb-segin .zb-input { flex: 1 1 60%; text-align: right; font-weight: 700; }
  .zb-seg.is-active .zb-segin { flex-direction: column; align-items: stretch; gap: 14px; }
  .zb-seg.is-active .zb-segin .zb-input { text-align: left; border: 1px solid var(--hair); border-radius: 12px; padding: 14px 14px; font-weight: 500; font-size: 1rem; }
  .zb-clear { top: 22px; transform: none; right: 16px; }
  .zb-seg.is-active .zb-clear:not([hidden]) { display: none; }
  .zb-pop, .zb-seg[data-seg] .zb-pop { position: static; width: auto; max-height: none; transform: none; box-shadow: none; border-radius: 0 0 18px 18px; padding: 8px 18px 18px; animation: none; }
  .zb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zb-sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hair); background: var(--surface); }
  .zb-link { border: 0; background: none; color: var(--text); font: 700 1rem/1 var(--font); text-decoration: underline; cursor: pointer; padding: 10px 2px; }
  .zb-submit { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 12px; border: 0; background: var(--ball); color: var(--ball-ink); box-shadow: inset 0 0 0 2px var(--pitch); font: 700 1.05rem/1 var(--font); cursor: pointer; }

  /* homepage: the four kinds of offer as a row under the header */
  .zb-mtabs { display: flex; justify-content: space-around; padding: 6px 8px 10px; border-bottom: 1px solid var(--hair); background: var(--canvas); }
  .zb-mtab { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; color: var(--text-2); font: 600 .86rem/1 var(--font); padding: 6px 4px; min-height: 64px; cursor: pointer; flex: 1; }
  .zb-mtab .zb-ic { width: 40px; height: 40px; }
  .zb-mtab:active .zb-ic { transform: scale(.94); }
}
@media (min-width: 744px) { .zb-mtabs { display: none; } }