/* ============================================================
   alívia — ordering, reservations & live floor
   (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);
}

/* ---- menu item: add-to-order button ---- */
.m-item{grid-template-columns:1fr auto auto; gap:.55rem 1.1rem}
.m-add{display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--terracotta); background:transparent; color:var(--terracotta);
  font-size:1.15rem; line-height:1; cursor:pointer; transition:.25s var(--ease); align-self:center}
.m-add:hover{background:var(--terracotta); color:var(--cream); transform:scale(1.08)}
.m-add:active{transform:scale(.94)}
.menu__hint{font-family:var(--serif); font-size:1rem; color:var(--muted); text-align:center; margin:.6rem 0 0}
.menu__hint b{color:var(--terracotta)}

/* ---- floating cart button ---- */
.cart-fab{position:fixed; right:clamp(16px,3vw,34px); bottom:clamp(16px,3vw,34px); z-index:50;
  width:60px; height:60px; border-radius:50%; border:0; background:var(--terracotta); color:var(--cream);
  cursor:pointer; box-shadow:var(--shadow); display:grid; place-items:center; transition:.3s var(--ease);
  transform:translateY(120px); opacity:0}
.cart-fab.show{transform:none; opacity:1}
.cart-fab:hover{background:var(--rust); transform:translateY(-3px)}
.cart-fab svg{width:24px; height:24px}
.cart-fab__count{position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 5px;
  background:var(--olive-deep); color:var(--cream); border-radius:11px; font-family:var(--sans);
  font-size:.72rem; font-weight:600; display:grid; place-items:center; border:2px solid var(--cream)}

/* ---- overlay shared by drawer + modal ---- */
.scrim{position:fixed; inset:0; z-index:70; background:rgba(26,20,15,.55); opacity:0; visibility:hidden;
  transition:.35s var(--ease); backdrop-filter:blur(2px)}
.scrim.show{opacity:1; visibility:visible}

/* ---- cart drawer ---- */
.cart{position:fixed; top:0; right:0; bottom:0; width:min(92vw,420px); z-index:75; background:var(--cream);
  display:flex; flex-direction:column; transform:translateX(101%); transition:transform .4s var(--ease); box-shadow:var(--shadow)}
.cart.open{transform:none}
.cart__head{display:flex; align-items:center; justify-content:space-between; padding:1.3rem 1.4rem;
  border-bottom:1px solid rgba(86,85,57,.16)}
.cart__head h3{font-family:var(--display); font-size:1.5rem; color:var(--olive-deep)}
.x{background:none; border:0; cursor:pointer; color:var(--olive); width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; transition:.25s}
.x:hover{background:var(--sand)}
.x svg{width:18px; height:18px}
.cart__items{flex:1; overflow-y:auto; padding:1rem 1.4rem; display:flex; flex-direction:column; gap:.2rem}
.cart__empty{text-align:center; color:var(--muted); font-family:var(--serif); font-size:1.15rem; margin:auto; padding:2rem 1rem}
.ci{display:grid; grid-template-columns:1fr auto; gap:.2rem .8rem; padding:.9rem 0; border-bottom:1px dashed rgba(86,85,57,.18)}
.ci__name{font-family:var(--sans); font-weight:500; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink)}
.ci__price{font-family:var(--display); font-weight:600; color:var(--terracotta); white-space:nowrap}
.ci__qty{display:inline-flex; align-items:center; gap:.7rem; margin-top:.3rem}
.ci__qty button{width:24px; height:24px; border-radius:50%; border:1px solid rgba(86,85,57,.4); background:transparent;
  color:var(--olive); cursor:pointer; font-size:1rem; line-height:1; display:grid; place-items:center; transition:.2s}
.ci__qty button:hover{border-color:var(--terracotta); color:var(--terracotta)}
.ci__qty span{font-family:var(--sans); font-size:.85rem; min-width:18px; text-align:center}
.ci__qty .ci__rm{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; color:var(--muted);
  background:none; border:0; cursor:pointer; margin-inline-start:6px; transition:.2s}
.ci__qty .ci__rm:hover{color:var(--rust); background:rgba(110,49,11,.09); border:0}
.ci__rm svg{width:16px; height:16px}
.cart__foot{border-top:1px solid rgba(86,85,57,.16); padding:1.2rem 1.4rem 1.4rem; background:var(--cream-2)}
.cart__total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem}
.cart__total span{font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.cart__total b{font-family:var(--display); font-size:1.6rem; color:var(--olive-deep)}
.cart__bill{display:grid; gap:.45rem; margin-bottom:1.1rem}
.bill-row{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--sans); font-size:.84rem; color:var(--muted)}
.bill-row span:last-child{font-variant-numeric:tabular-nums}
.bill-row--total{border-top:1px solid rgba(86,85,57,.2); padding-top:.65rem; margin-top:.25rem; color:var(--ink)}
.bill-row--total span:first-child{font-weight:500; letter-spacing:.04em; text-transform:uppercase; font-size:.72rem; color:var(--muted)}
.bill-row--total b{font-family:var(--display); font-size:1.55rem; color:var(--olive-deep); font-weight:600}

/* ---- forms (cart + reservation) ---- */
.field{margin-bottom:.85rem}
.field label{display:block; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--olive);
  margin-bottom:.4rem; font-weight:500}
.field input,.field select,.field textarea{width:100%; font-family:var(--sans); font-size:.9rem; color:var(--ink);
  background:var(--cream); border:1px solid rgba(86,85,57,.32); border-radius:6px; padding:.7rem .8rem; outline:none;
  transition:border-color .25s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--terracotta)}
.field textarea{resize:vertical; min-height:60px}
.seg{display:flex; gap:.5rem; flex-wrap:wrap}
.seg label{display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .95rem; border:1px solid rgba(86,85,57,.32);
  border-radius:30px; cursor:pointer; font-size:.74rem; letter-spacing:.06em; text-transform:none; color:var(--olive);
  margin:0; transition:.25s}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg label:has(input:checked){background:var(--olive); color:var(--cream); border-color:var(--olive)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
.btn--full{width:100%; text-align:center; border:0; cursor:pointer; margin-top:.4rem}
.form-note{font-size:.7rem; color:var(--muted); margin:.7rem 0 0; font-style:italic; line-height:1.5}

/* ---- reservation modal ---- */
.modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:1.2rem;
  opacity:0; visibility:hidden; transition:.3s var(--ease)}
.modal.open{opacity:1; visibility:visible}
.modal__card{width:min(96vw,480px); max-height:92vh; overflow-y:auto; background:var(--cream); border-radius:14px;
  padding:1.6rem clamp(1.2rem,3vw,2rem) 1.8rem; box-shadow:var(--shadow); transform:translateY(16px); transition:transform .3s var(--ease)}
.modal.open .modal__card{transform:none}
.modal__head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.2rem}
.modal__head h3{font-family:var(--display); font-size:1.9rem; color:var(--olive-deep); line-height:1}
.modal__head p{font-family:var(--serif); color:var(--muted); font-size:1rem; margin:.3rem 0 0}
.success{text-align:center; padding:1rem 0}
.success__mark{width:64px; height:64px; border-radius:50%; background:var(--open); color:var(--cream);
  display:grid; place-items:center; margin:0 auto 1.1rem}
.success__mark svg{width:30px; height:30px}
.success h4{font-family:var(--display); font-size:1.7rem; color:var(--olive-deep); margin-bottom:.5rem}
.success p{font-family:var(--serif); color:var(--ink); font-size:1.05rem; margin:0 0 1.3rem; line-height:1.5}

/* ---- live floor section ---- */
.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}
.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}

/* 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__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--seated .tbl__surface{background:var(--sand-2); border-style:dashed; border-color:rgba(86,85,57,.4)}
.tbl--seated .chair{background:rgba(86,85,57,.3)}
.tbl--seated .tbl__id, .tbl--seated .tbl__seats{color:var(--muted)}
.tbl--flash .tbl__surface{animation:flash .8s ease}
@keyframes flash{0%,100%{box-shadow:0 4px 12px -8px rgba(51,51,31,.5)}50%{box-shadow:0 0 0 5px rgba(201,160,106,.5)}}

.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--seated{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}

@media (max-width:560px){
  .row2{grid-template-columns:1fr}
  .floor__map{aspect-ratio:3/4}
  .zone{font-size:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .live-dot::after{animation:none}
}