/* «Оберіть стіл» — окрема сторінка плану залу (піддомен zal.): фільтри вгорі, план — головний обʼєкт, картка столу праворуч (на телефоні — під планом). */
:root {
  --bg:#F6F0EC; --card:#FFFCFA; --ink:#1C231F; --ink-2:#434A45; --muted:#756F6A; --line:rgba(28,35,31,.13);
  --green:#203127; --on-green:#EDE3DC; --rose:#EBA9AE; --rose-2:#F4CDD0; --rose-ink:#A3445A; --ok:#2F7A4C;
  --f:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif; --fd:"Unbounded","Onest",system-ui,sans-serif;
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 var(--f) }
button { font:inherit; color:inherit }
:focus-visible { outline:2px solid var(--rose-ink); outline-offset:2px }
.z-in { max-width:1440px; margin:0 auto; padding:0 16px }
.z-top { background:var(--green); color:var(--on-green); padding:12px 0 }
.z-top .z-in { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap }
.z-brand { font:500 20px/1 var(--fd); letter-spacing:-.04em; color:inherit; text-decoration:none }
.z-brand i { font-style:italic; font-family:Georgia,serif; font-weight:400; color:var(--rose); padding:0 .06em }
.z-sub { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#A9B3A9 }
.z-main { padding-top:16px; padding-bottom:40px; display:grid; gap:14px }
h1 { font:400 clamp(21px,2.6vw,30px)/1.15 var(--fd); letter-spacing:-.03em; margin:0; text-wrap:balance }
.z-muted { color:var(--muted); font-size:13px }

.z-filters { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 14px; display:grid; gap:10px }
.z-row { display:flex; align-items:center; gap:10px; min-width:0 }
.z-lab { flex:none; width:58px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.z-chips { display:flex; gap:6px; overflow-x:auto; min-width:0; flex:1; padding:2px 0; scrollbar-width:thin; -webkit-overflow-scrolling:touch }
.z-chip { flex:none; border:1px solid var(--line); background:#fff; border-radius:10px; padding:6px 10px; font:500 13px var(--f); cursor:pointer; font-variant-numeric:tabular-nums; display:grid; justify-items:center; line-height:1.2; min-height:40px }
.z-chip small { font-size:10.5px; color:var(--muted); font-weight:400 }
.z-chip[aria-pressed="true"] { background:var(--ink); color:#fff; border-color:var(--ink) }
.z-chip[aria-pressed="true"] small { color:#cfc8c2 }
.z-chip:disabled { opacity:.35; cursor:not-allowed; text-decoration:line-through }
.z-step { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:12px; padding:3px; background:#fff }
.z-step button { width:38px; height:38px; border-radius:9px; border:0; background:transparent; font-size:19px; cursor:pointer }
.z-step button:hover { background:var(--bg) }
.z-step output { min-width:96px; text-align:center; font-weight:600; font-variant-numeric:tabular-nums }

.z-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; align-items:start }
@media (max-width:1000px) { .z-grid { grid-template-columns:1fr } }
.z-plan { background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; min-width:0 }
.z-sum { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; padding:12px 14px 8px }
.z-sum b { font:400 17px var(--fd); letter-spacing:-.02em }
.z-sum span { color:var(--ink-2); font-size:13.5px }
.z-sum .ok { color:var(--ok); font-weight:600 }
.z-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; background:#EFE5DF }
.z-scroll svg { display:block; width:100%; min-width:1040px; height:auto }
.z-legend { display:flex; flex-wrap:wrap; gap:4px 14px; padding:10px 14px; font-size:12.5px; color:var(--ink-2) }
.z-legend i { display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:5px; vertical-align:-2px; border:2px solid #3E8559; background:#fff }
.z-legend i.rec { border:2px dashed #D7707F } .z-legend i.busy { background:#A3445A; border-color:#A3445A } .z-legend i.dim { opacity:.35 }
.z-swipe { margin-left:auto; color:var(--muted) } @media (min-width:1100px) { .z-swipe { display:none } }

.z-side { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; display:grid; gap:12px; position:sticky; top:12px }
@media (max-width:1000px) { .z-side { position:static } }
.z-zone { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.z-name { font:400 26px/1.1 var(--fd); letter-spacing:-.03em; margin:0 }
.z-no { display:inline-grid; place-items:center; min-width:36px; height:36px; padding:0 8px; border-radius:11px; background:var(--green); color:var(--on-green); font:500 15px var(--fd); margin-right:8px; vertical-align:middle }
.z-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:13px; font-weight:600; background:#E8F2EB; color:var(--ok); width:max-content }
.z-pill.no { background:#F6E3E7; color:var(--rose-ink) }
.z-facts { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; font-size:14px }
.z-facts dt { color:var(--muted) } .z-facts dd { margin:0 }
.z-about { background:var(--bg); border-radius:12px; padding:10px 12px; font-size:14px; color:var(--ink-2); margin:0 }
.z-btn { display:block; text-align:center; text-decoration:none; border:0; border-radius:14px; padding:14px; font:600 15px var(--f); background:var(--green); color:#fff; cursor:pointer }
.z-btn.light { background:#fff; color:var(--ink); box-shadow:0 0 0 1px var(--line) }
.z-btn[aria-disabled="true"] { opacity:.45; pointer-events:none }
.z-list { display:grid; gap:6px }
.z-opt { display:flex; justify-content:space-between; gap:10px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff; cursor:pointer; text-align:left }
.z-opt:hover { border-color:var(--ink) }
.z-opt small { color:var(--muted) }
.z-toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:10px 16px; border-radius:12px; font-size:14px; opacity:0; transition:.25s; pointer-events:none; max-width:calc(100vw - 32px) }
.z-toast.on { opacity:1; transform:translateX(-50%) }
@media (prefers-reduced-motion:reduce) { .z-toast { transition:none } }