/* ---------- Thème ---------- */
:root{
  --bg:#f6f9fc; --panel:#ffffff; --panel2:#f9fbff; --text:#0f172a; --muted:#64748b;
  --accent:#0ea5e9; --accent2:#22c55e; --border:#e2e8f0; --shadow:0 10px 30px rgba(2,6,23,.08);
  --chip:#eef2f7;
  --vitres:#38bdf8; --canape:#f59e0b; --matelas:#a78bfa; --tapis:#fb7185; --voiture:#34d399;
}

/* ---------- Base ---------- */
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:1100px;margin:24px auto;padding:0 20px}
.hero{padding:18px 0 14px;border-bottom:1px solid var(--border);margin-bottom:18px;background:#fff}
.hero h1{margin:0;font-size:26px}
.hero p{margin:6px 0 0;color:var(--muted);font-size:14px}

.wrap{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px}
.step{display:none}.step.active{display:block}

/* ---------- Progress bar ---------- */
.progress{position:relative;height:8px;background:var(--chip);border-radius:999px;overflow:hidden;margin:6px 0 14px}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s ease}

/* ---------- Grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);column-gap:18px;row-gap:18px}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---------- Form fields ---------- */
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:14px;color:#0f172a}
.field input,.field textarea{
  width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);
  background:#f2f7ff;outline:none;color:#0f172a
}
.field input:focus,.field textarea:focus{background:#fff;border-color:#cbd5e1;box-shadow:0 0 0 3px rgba(56,189,248,.15)}
.field textarea{min-height:110px;resize:vertical}
.help{color:var(--muted);font-size:12px}

/* ---------- Actions / Buttons ---------- */
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--border);
  background:#fff;color:#0f172a;cursor:pointer;transition:.2s transform
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06261c;border:0}

/* ---------- Tiles génériques (si utilisées ailleurs) ---------- */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative;display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;border:1px solid var(--border);background:#fff;cursor:pointer;transition:.2s transform,.2s border-color;user-select:none}
.tile:hover{transform:translateY(-1px);border-color:#cbd5e1}
.tile.selected{outline:2px solid var(--accent);background:#f0fdfa}
.tile .ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:0 0 28px}
.ico.vitres{background:var(--vitres)} .ico.canape{background:var(--canape)}
.ico.matelas{background:var(--matelas)} .ico.tapis{background:var(--tapis)} .ico.voiture{background:var(--voiture)}

/* ---------- Accordéon catégories ---------- */
.accordion{display:grid;gap:12px;margin-top:6px}
.acc-item{border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden}
.acc-header{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:12px 14px;cursor:pointer
}
.acc-header:hover{background:#f8fbff}
.acc-title{font-weight:800}
.acc-desc{color:var(--muted);font-size:13px;margin-top:2px}
.chev{transition:.2s transform;color:#0f172a}

/* vignettes catégories */
.cat-thumb{width:44px;height:44px;border-radius:12px;background:#e7f6ff;object-fit:cover;display:block}

/* fermés par défaut + “cartes collées” */
.acc-body{display:none;padding:0}
.acc-item.open .acc-body{display:block}
.acc-item.open .chev{transform:rotate(180deg)}
.acc-item.open .acc-header{border-bottom:1px dashed var(--border)}

/* ---------- Lignes “compteur” collées ---------- */
.qty-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:14px 16px;border-top:1px solid var(--border);
  background:#fff
}
.qty-row:first-child{border-top:0}
.counter{
  min-width:44px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-weight:800;background:#f1f5f9;color:#0f172a
}
.qty-label{display:flex;align-items:center;gap:10px}
.thumb{width:42px;height:42px;border-radius:10px;background:#eef2f7;object-fit:cover;flex:0 0 42px}
.qty-actions{display:inline-flex;gap:8px}
.btn-mini{
  height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--border);
  background:#fff;cursor:pointer
}
.btn-mini.add{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06261c;border:0}
.btn-mini.remove{background:#fff}

/* Champ numérique aligné à droite (dans qty-actions) */
.qty-actions input[type=number]{
  width:120px;padding:9px 10px;border-radius:10px;border:1px solid var(--border);
  background:#fff;text-align:right
}

/* Animations de feedback compteur */
@keyframes pulseAdd{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.45); transform:scale(1); }
  60%{ box-shadow:0 0 0 12px rgba(34,197,94,0); transform:scale(1.04); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); transform:scale(1); }
}
@keyframes pulseRemove{
  0%{ box-shadow:0 0 0 0 rgba(239,68,68,.5); transform:scale(1); }
  60%{ box-shadow:0 0 0 12px rgba(239,68,68,0); transform:scale(.96); }
  100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); transform:scale(1); }
}
.counter.pulse-add{animation:pulseAdd .5s ease}
.counter.pulse-remove{animation:pulseRemove .5s ease}

/* ---------- Upsells ---------- */
.upsell{display:none;margin-top:14px}
.upsell.show{display:block}
.upsell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1100px){.upsell-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.upsell-grid{grid-template-columns:1fr}}
.u-card{border:1px solid var(--border);background:#fff;border-radius:14px;padding:16px;box-shadow:0 6px 18px rgba(2,6,23,.06);transition:.2s transform,.2s outline-color}
.u-card.active{outline:2px solid var(--accent);background:#f0fdfa;transform:translateY(-1px)}
.u-card h5{margin:0 0 8px;display:flex;align-items:center;gap:10px}
.u-card h5 span{font-weight:700}
.u-card p{margin:0 0 12px;color:#64748b;font-size:13px}
.u-row{display:flex;align-items:center;gap:10px;justify-content:space-between}
.u-qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.u-qty button{width:36px;height:36px;border:0;background:#fff;cursor:pointer}
.u-qty input{width:64px;text-align:center;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border)}
/* image upsell */
.u-img{width:40px;height:40px;border-radius:10px;background:#eef2f7;object-fit:cover}

/* ---------- Toggle Pro (plus fin) ---------- */
.pro-toggle{
  display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);
  border-radius:12px;background:#fff;cursor:pointer
}
.pro-toggle .switch{position:relative;width:48px;height:28px;background:#e5e7eb;border-radius:999px;transition:.2s background}
.pro-toggle .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:.2s left}
.pro-toggle.active .switch{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.pro-toggle.active .knob{left:23px}
.pro-hint{color:#64748b;font-size:12px;margin-left:60px;margin-top:4px}
.pro{display:grid}  /* masqué/affiché par JS */

/* ---------- Calendrier + créneaux ---------- */
.calendar{border:1px solid var(--border);border-radius:14px;padding:12px;background:#f9fbff}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-title{font-weight:700}
.cal-nav{height:34px;width:34px;border-radius:10px;border:1px solid var(--border);background:#fff;color:#0f172a;cursor:pointer}
.weekdays,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.weekdays{color:#334155;font-size:12px;margin-bottom:6px;text-align:center}
.day{height:40px;border:1px solid var(--border);border-radius:10px;display:grid;place-items:center;background:#fff;cursor:pointer}
.day.muted{opacity:.45;cursor:default}
.day.disabled{opacity:.45;pointer-events:none}
.day.today{outline:1px dashed #93c5fd}
.day.selected{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#053025;border:0}
.slot-wrap{margin-top:14px}
.slot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:900px){.slot-grid{grid-template-columns:repeat(3,1fr)}}
.slot{height:40px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#0f172a;cursor:pointer;display:grid;place-items:center}
.slot.disabled{opacity:.45;pointer-events:none}
.slot.selected{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#053025;border:0}

/* ---------- Summary (récap) ---------- */
.summary h4{margin:0 0 10px}
.summary p{margin:.35rem 0}
.summary ul{margin:.35rem 0 0 1rem}
.total{font-size:18px;margin-top:8px}

/* ---------- Carte de confirmation ---------- */
.card h3{margin:0 0 6px}
.card p{margin:0}

/* ---------- Utilitaires ---------- */
.hide{display:none!important}
/* ==== Booking: fixes mobile ==== */
.section-booking .container { padding-left: 12px; padding-right: 12px; }

#booking-root .wrap { max-width: 820px; margin-inline: auto; }

/* Cards & spacing */
#booking-root .card { padding: 14px; border-radius: 12px; }
@media (min-width: 640px) {
  #booking-root .card { padding: 20px; }
}

/* Progress bar */
#booking-root .progress { height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
#booking-root .progress .bar { height: 100%; background: #0ea5e9; width: 0%; transition: width .25s ease; }

/* Accordion */
#booking-root .accordion { display: grid; gap: 10px; }
#booking-root .acc-item { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background:#fff; }
#booking-root .acc-header { display:flex; align-items:center; gap:10px; padding:12px; cursor:pointer; }
#booking-root .acc-header .cat-thumb { width:42px; height:42px; flex:0 0 auto; }
#booking-root .acc-body { padding: 8px 12px 12px; display:none; }
#booking-root .acc-item.open .acc-body { display:block; }

/* Quantities rows */
#booking-root .qty-row { display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:10px; padding:10px 0; }
#booking-root .qty-row + .qty-row { border-top:1px dashed #e5e7eb; }
#booking-root .counter { min-width: 34px; text-align:center; font-weight:700; }
#booking-root .qty-actions .btn-mini { padding:10px 12px; border:1px solid #cbd5e1; background:#fff; border-radius:8px; }
#booking-root .qty-actions input[type="number"] { width:100px; padding:10px; border:1px solid #cbd5e1; border-radius:8px; }

/* Upsell grid: 1 col on mobile */
#booking-root .upsell-grid { display:grid; gap:12px; }
@media (min-width: 640px) {
  #booking-root .upsell-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
#booking-root .u-card { border:1px solid #e2e8f0; border-radius:12px; padding:12px; background:#fff; }
#booking-root .u-card h5 { display:flex; align-items:center; gap:10px; margin:0 0 8px; }
#booking-root .u-card .u-img { width:40px; height:40px; }
#booking-root .u-card .u-qty { display:inline-flex; align-items:center; border:1px solid #cbd5e1; border-radius:8px; overflow:hidden; }
#booking-root .u-card .u-qty input { width:56px; text-align:center; padding:8px; border:0; }
#booking-root .u-card .u-qty .minus,
#booking-root .u-card .u-qty .plus { padding:8px 10px; border:0; background:#f8fafc; }

/* Step 3 form: 1 col on mobile */
#booking-root .grid-3 { display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  #booking-root .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  #booking-root .grid-3 .field[style*="grid-column: span 2"] { grid-column: span 2; }
  #booking-root .grid-3 .field[style*="grid-column:1/-1"] { grid-column: 1 / -1; }
}
#booking-root .field input, 
#booking-root .field textarea { width:100%; padding:12px; border:1px solid #cbd5e1; border-radius:8px; }

/* Calendar: prevent horizontal scroll */
#booking-root .calendar { overflow:hidden; }
#booking-root .cal-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#booking-root .weekdays, 
#booking-root .cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); }
#booking-root .cal-grid { gap:4px; }
#booking-root .day { padding:10px 0; font-size:14px; border:1px solid #e2e8f0; border-radius:10px; }
@media (max-width: 360px) {
  #booking-root .weekdays span { font-size:12px; }
  #booking-root .day { padding:8px 0; }
}

/* Slots: wrap nicely on small screens */
#booking-root .slot-grid { display:grid; gap:10px; }
#booking-root .slot-block { border:1px solid #e2e8f0; border-radius:10px; padding:10px; }
#booking-root .slot-row { display:flex; flex-wrap:wrap; gap:8px; }
#booking-root .slot { padding:10px 12px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; }
#booking-root .slot.selected { outline:2px solid #0ea5e9; }
#booking-root .slot.disabled { opacity:.45; pointer-events:none; }

/* Footer action buttons */
#booking-root .actions { display:flex; gap:10px; flex-wrap:wrap; }
#booking-root .actions .btn { min-height:44px; padding:12px 16px; border-radius:10px; }

/* Make thumb images responsive */
#booking-root img.thumb { width:36px; height:36px; object-fit:cover; }
/* ====== Booking mobile fixes ====== */
.section-booking .container, #booking-root, #booking-root .wrap, #booking-root .card { max-width:100%; }
html, body { overflow-x:hidden; }

#booking-root * { box-sizing:border-box; }

/* rangées d'articles : compteur | label | actions  */
#booking-root .qty-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
}
#booking-root .qty-actions{ display:flex; gap:8px; flex-wrap:wrap; } /* évite que "Retirer/Ajouter" débordent */

#booking-root .u-card{ display:flex; flex-direction:column; }

/* slots d’heures : 4 colonnes en mobile */
#booking-root .slot-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }

/* formulaire : 1 colonne en petit écran */
@media (max-width:640px){
  #booking-root .grid-3{ grid-template-columns:1fr !important; }
  #booking-root .slot-row{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  #booking-root .cat-thumb{ width:44px; height:44px; }
  #booking-root .thumb{ width:36px; height:36px; }
  #booking-root .card{ border-radius:12px; padding:14px; }
}

/* images toujours contenues */
#booking-root img{ max-width:100%; height:auto; display:block; }
/* ==== CRENEAUX : pas de scroll horizontal, wrap multi-lignes ==== */
#booking-root .slot-row,
.slot-row{
  display: flex;
  flex-wrap: wrap;          /* retour à la ligne */
  gap: 8px;
  padding: 4px 0;
  overflow: visible !important;       /* plus de scroll */
  scroll-snap-type: none !important;  /* pas de snapping */
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* On cache totalement d'éventuels scrollbars résiduels (iOS/WebKit) */
#booking-root .slot-row::-webkit-scrollbar,
.slot-row::-webkit-scrollbar{
  display: none !important;
}

/* Taille mini propre pour chaque “pill” d’heure */
#booking-root .slot,
.slot{
  min-width: 72px;
  text-align: center;
}
/* === Disposition des blocs "Matin" / "Après-midi" === */
#booking-root .slot-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;          /* mobile : une colonne */
  align-items: start;
}
@media (min-width: 560px){
  #booking-root .slot-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)); /* ≥560px : deux colonnes */
  }
}

#booking-root .slot-block{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:12px;
}

/* Chaque heure = petite pilule qui passe à la ligne si besoin */
#booking-root .slot-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:4px 0 0;
  overflow:visible !important;
  scroll-snap-type:none !important;
  -webkit-mask-image:none !important;
          mask-image:none !important;
}
#booking-root .slot{
  min-width:72px;
  text-align:center;
}
/* === Bouton "Ajouter" (étape 1) = même style que .btn-primary === */
#booking-root .qty-actions .btn-mini.add{
  background: linear-gradient(135deg, var(--accent), var(--accent));
  color:#fff;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(14,165,233,.25);
  transform: translateY(0);
  transition: transform .15s, box-shadow .2s, filter .2s;
}

#booking-root .qty-actions .btn-mini.add:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(34,197,94,.25);
  filter: saturate(1.1);
}

#booking-root .qty-actions .btn-mini.add:focus-visible{
  outline: 3px solid rgba(14,165,233,.35);
  outline-offset: 2px;
}

/* On garde "Retirer" en bouton sobre (bord gris) */
#booking-root .qty-actions .btn-mini.remove{
  background:#fff;
  color:#0f172a;
  border:1px solid #cbd5e1;
}


/* === NAVIGATION SIMPLE (sans burger) — global === */
.burger{display:none !important;}
#menu-overlay{display:none !important;}
.site-header .menu,
#main-menu.menu{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:12px;
  position:static !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  z-index:auto !important;
}
#main-menu a{display:inline-block;padding:10px 8px;border-radius:10px;}
#main-menu .btn-cta{background:#0ea5e9;color:#fff;font-weight:700;}
@media (max-width: 960px){
  .site-header .menu,#main-menu.menu{flex-wrap:wrap;gap:10px;}
}


/* ===== Vitronet booking.css — mobile/full-width patch (consolidated) ===== */
html, body { overflow-x: hidden; }
.section-booking .container, #booking-root, #booking-root .wrap, #booking-root .card { max-width: 100%; }
#booking-root * { box-sizing: border-box; }

/* Slot rows wrap, no snapping */
#booking-root .slot-row { display:flex; flex-wrap:wrap; gap:8px; padding:4px 0; overflow:visible !important; scroll-snap-type:none !important; -webkit-mask-image:none !important; mask-image:none !important; }
#booking-root .slot { min-width:72px; text-align:center; }

/* Two columns (Matin / Après-midi) on ≥560px */
#booking-root .slot-grid { display:grid; gap:12px; grid-template-columns:1fr; align-items:start; }
@media (min-width:560px){ #booking-root .slot-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* Full-bleed booking on mobile */
@media (max-width:640px){
  .section-booking .container{ width:100vw; margin-inline:0; padding-inline:12px; }
  #booking-root{ width:100vw; max-width:100vw; margin-inline: calc(50% - 50vw); }
}


/* =====================================================
   Vitronet — booking_responsive.css (Ultra Responsive)
   - Mobile-first overrides
   - Full-bleed booking on phones
   - Wrapping slot pills (no horizontal scroll)
   - Fluid grids, accessible tap targets
   - iOS/WebKit niceties
   ===================================================== */

/* Base safety */
html, body { overflow-x: hidden; }
#booking-root * { box-sizing: border-box; }
#booking-root img { max-width: 100%; height: auto; display: block; }

/* Container: fluid on small screens */
.section-booking .container { padding-left: 12px; padding-right: 12px; }
@media (max-width: 640px){
  .section-booking .container { width: 100vw; margin-inline: 0; padding-inline: 12px; }
  #booking-root { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
}

/* Wrapper/Card scaling */
#booking-root .wrap { width: 100%; max-width: 980px; margin-inline: auto; }
#booking-root .card { padding: clamp(12px, 2vw, 20px); border-radius: 12px; }

/* Progress bar thickness + animation */
#booking-root .progress { height: 6px; border-radius: 999px; overflow: hidden; background: #e2e8f0; }
#booking-root .progress .bar { height: 100%; transition: width .25s ease; }

/* Accordion: readable spacing */
#booking-root .accordion { display: grid; gap: 12px; }
#booking-root .acc-item { overflow: hidden; border-radius: 12px; }
#booking-root .acc-header { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; }
#booking-root .acc-body { padding: 10px 12px 12px; }
#booking-root .acc-item.open .acc-body { display: block; }

/* Qty rows: stick to 3 columns = counter | label | actions */
#booking-root .qty-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
#booking-root .qty-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#booking-root .counter { min-width: 38px; min-height: 34px; display: grid; place-items: center; border-radius: 10px; }

/* Inputs: bigger tap area on mobile */
#booking-root .field input, 
#booking-root .field textarea,
#booking-root .qty-actions input[type="number"],
#booking-root .u-card .u-qty input {
  font-size: 16px; /* prevent iOS zoom */
  min-height: 44px;
}

/* Upsells: 1 → 2 → 3 columns as width grows */
#booking-root .upsell-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px){ #booking-root .upsell-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px){ #booking-root .upsell-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Calendar */
#booking-root .calendar { overflow: hidden; }
#booking-root .cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#booking-root .weekdays, #booking-root .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
#booking-root .day { padding: clamp(8px, 1.6vw, 10px) 0; border-radius: 10px; }
@media (max-width: 360px){
  #booking-root .weekdays span { font-size: 12px; }
  #booking-root .day { padding: 8px 0; }
}

/* Slots: wrap pills (no horizontal scroll) */
#booking-root .slot-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px){ #booking-root .slot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

#booking-root .slot-block { border-radius: 12px; padding: 12px; }
#booking-root .slot-row {
  display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px;
  overflow: visible !important; scroll-snap-type: none !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
#booking-root .slot { min-width: 72px; padding: 10px 12px; border-radius: 10px; text-align: center; }

/* Actions */
#booking-root .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px){ #booking-root .actions { justify-content: center; } }
#booking-root .actions .btn { min-height: 44px; padding: 12px 16px; border-radius: 10px; }

/* Grid helpers (small → large) */
#booking-root .grid-2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
#booking-root .grid-3 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px){ #booking-root .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px){ #booking-root .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Thumbs sizes responsive */
#booking-root .thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 10px; }
#booking-root .cat-thumb { width: 48px; height: 48px; border-radius: 12px; }
@media (max-width: 560px){
  #booking-root .thumb { width: 36px; height: 36px; }
  #booking-root .cat-thumb { width: 44px; height: 44px; }
}

/* Full-bleed safe area on iOS (100vh quirks handled in page JS) */
.vh-100 { height: calc(var(--vh, 1vh) * 100); }
.touch-scroll { -webkit-overflow-scrolling: touch; overflow-y: auto; }