/* ============================================================
   alívia — live floor, toast, shared overlays
   (loads after styles.css; reuses its :root tokens)
   ============================================================ */
:root{
  --open:#6E7A4E;       /* table available */
  --seated:#8B5530;     /* table occupied  */
  --reserved:#C9A06A;   /* table reserved  */
  --shadow:0 24px 60px -28px rgba(51,51,31,.55);
}

/* ---- live floor section (home) ---- */
.floor{padding:clamp(4rem,8vw,8rem) var(--pad); background:var(--sand)}
.floor__head{text-align:center; max-width:50rem; margin:0 auto clamp(2rem,4vw,3rem)}
.floor__stats{display:inline-flex; align-items:center; gap:.6rem; margin-top:1rem; font-family:var(--sans);
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--olive)}
.floor__stats b{color:var(--terracotta); font-size:1rem}
.live-dot{width:9px; height:9px; border-radius:50%; background:var(--open); position:relative}
.live-dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--open);
  animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}

.floor__map{max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:1.3rem;
  background:linear-gradient(160deg,var(--cream),var(--cream-2)); border:1px solid rgba(86,85,57,.18);
  border-radius:18px; box-shadow:var(--shadow); padding:1.4rem 1.3rem 1rem; min-height:220px}
.fzone__head{display:flex; align-items:center; gap:8px; font-family:var(--sans); font-size:.64rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem}
.fzone__head::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--caramel)}
.fzone__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:18px 12px; justify-items:center}
.floor__entrance{text-align:center; font-family:var(--sans); font-size:.54rem; letter-spacing:.32em;
  color:var(--muted); border-top:1px dashed rgba(86,85,57,.28); padding-top:.8rem}
.floor__empty{margin:auto; font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1.15rem; text-align:center}

/* a table with chairs around it */
.tbl{display:flex; flex-direction:column; align-items:center; gap:5px; border:0; background:none; padding:4px;
  border-radius:12px; cursor:pointer; width:100%; max-width:104px; transition:transform .2s var(--ease)}
.tbl:hover{transform:translateY(-2px)}
.tbl[disabled]{cursor:not-allowed}
.tbl[disabled]:hover{transform:none}
.tbl__row{display:flex; gap:5px; min-height:9px}
.chair{width:17px; height:9px; border-radius:5px 5px 2px 2px; background:#CBD2AE; transition:.2s}
.tbl__row--bot .chair{border-radius:2px 2px 5px 5px}
.tbl__surface{width:100%; min-width:64px; aspect-ratio:7/4; border-radius:11px; border:1.6px solid var(--olive);
  background:#FFFDF7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  box-shadow:0 4px 12px -8px rgba(51,51,31,.5); transition:.2s}
.tbl__id{font-family:var(--sans); font-weight:600; font-size:.86rem; color:var(--olive-deep); line-height:1}
.tbl__seats{font-family:var(--sans); font-size:.55rem; color:var(--muted); letter-spacing:.02em}
.tbl:hover .tbl__surface{box-shadow:0 8px 18px -8px rgba(51,51,31,.55)}
.tbl--reserved .tbl__surface{background:var(--caramel); border-color:var(--caramel)}
.tbl--reserved .tbl__id{color:#5a4012} .tbl--reserved .tbl__seats{color:#6b5020}
.tbl--reserved .chair{background:var(--caramel)}
.tbl--held .tbl__surface{background:var(--sand-2); border-style:dashed; border-color:rgba(86,85,57,.4)}
.tbl--held .chair{background:rgba(86,85,57,.3)}
.tbl--held .tbl__id, .tbl--held .tbl__seats{color:var(--muted)}

.floor__legend{display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; justify-content:center; margin-top:1.8rem}
.floor__legend span{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-size:.74rem;
  letter-spacing:.06em; color:var(--olive)}
.floor__legend .dot{width:13px; height:13px; border-radius:4px; border:1.5px solid}
.dot--open{border-color:var(--olive); background:#FFFDF7}
.dot--held{border-color:rgba(86,85,57,.4); border-style:dashed; background:var(--sand-2)}
.dot--reserved{border-color:var(--reserved); background:var(--reserved)}

/* ---- toast ---- */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,80px); z-index:90; background:var(--olive-deep);
  color:var(--cream); padding:.85rem 1.4rem; border-radius:40px; font-family:var(--sans); font-size:.82rem;
  box-shadow:var(--shadow); opacity:0; transition:.35s var(--ease); max-width:90vw; text-align:center}
.toast.show{transform:translate(-50%,0); opacity:1}

/* ---- the garden (home + reserve) ---- */
.garden{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center;
  padding:clamp(4rem,9vw,8rem) var(--pad); background:var(--cream)}
.garden__film{position:relative; overflow:hidden; border-radius:18px; aspect-ratio:16/10; box-shadow:var(--shadow); background:var(--sand-2)}
.garden__film::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(26,20,15,0) 55%,rgba(26,20,15,.35))}
.garden__caption{position:absolute; left:1.4rem; bottom:1.1rem; z-index:2; color:var(--cream); font-family:var(--display);
  font-style:italic; font-size:clamp(1.1rem,2vw,1.5rem)}
.garden__facts{display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:2.2rem; margin:0 0 2rem}
.garden__facts b{display:block; font-family:var(--display); font-size:2.2rem; line-height:1; color:var(--terracotta); font-weight:600}
.garden__facts span{font-family:var(--sans); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.garden__actions{display:flex; gap:.8rem; flex-wrap:wrap}
.btn--outline{background:transparent; color:var(--olive-deep); border-color:rgba(86,85,57,.4)}
.btn--outline:hover{background:var(--olive); color:var(--cream); border-color:var(--olive)}

@media (max-width:900px){
  .garden{grid-template-columns:1fr}
}
@media (max-width:560px){
  .floor__stats{display:block; line-height:2; font-size:.7rem}
  .floor__stats .live-dot{display:inline-block; vertical-align:middle}
  .floor__map{padding:1.1rem .8rem .9rem}
  .fzone__grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:14px 8px}
  .garden__facts{gap:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .live-dot::after{animation:none}
}