/* ============================================================
   alívia — multi-step flows (reservation + checkout)
   Ported from reservation.jsx / checkout.jsx, in our palette.
   ============================================================ */

/* ---------- stepper ---------- */
.steps{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:2.4rem}
.step-dot{display:flex; align-items:center; gap:9px; font-family:var(--sans); font-size:.82rem; font-weight:500; color:var(--muted)}
.step-dot i{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:.82rem;
  border:1.5px solid rgba(86,85,57,.3); background:#FFFDF7; color:var(--muted); flex:0 0 auto; transition:.25s}
.step-dot.on i{background:var(--olive); border-color:var(--olive); color:var(--cream)}
.step-dot.on{color:var(--olive-deep)}
.step-dot.done i{background:var(--olive); border-color:var(--olive); color:var(--cream)}
.step-line{flex:1 1 14px; min-width:14px; height:1.5px; background:rgba(86,85,57,.22)}
@media (max-width:560px){ .step-dot span{display:none} .step-dot.on span{display:inline} }

/* ---------- fields / inputs (flow-scoped) ---------- */
.fl{max-width:920px; margin:0 auto; padding:0 var(--pad)}
.fl-field{display:flex; flex-direction:column; gap:8px}
.fl-field > label{font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--olive)}
.fl-input{width:100%; font-family:var(--sans); font-size:.95rem; color:var(--ink); background:#FFFDF7;
  border:1.5px solid rgba(86,85,57,.3); border-radius:8px; padding:.8rem .9rem; outline:none; transition:border-color .2s}
.fl-input:focus{border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(139,85,48,.16)}
textarea.fl-input{resize:vertical; min-height:60px}

/* party counter */
.party-qty{display:inline-flex; align-items:center; border:1.5px solid rgba(86,85,57,.3); border-radius:999px; background:#FFFDF7; overflow:hidden}
.party-qty button{width:48px; height:48px; border:0; background:transparent; color:var(--olive); cursor:pointer; display:grid; place-items:center; transition:background .2s}
.party-qty button:hover{background:#E7EBD6}
.party-qty span{min-width:48px; text-align:center; font-family:var(--sans); font-weight:600; font-size:1.2rem; color:var(--olive-deep)}

/* segmented toggle (seating area / order type) */
.seg2{display:inline-flex; flex-wrap:wrap; background:#EFECDF; border:1px solid rgba(86,85,57,.18); border-radius:999px; padding:4px; gap:4px}
.seg2 button{border:0; background:transparent; padding:.6rem 1.1rem; border-radius:999px; font-family:var(--sans); font-weight:500;
  font-size:.84rem; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:.2s}
.seg2 button svg{width:15px; height:15px}
.seg2 button.on{background:#FFFDF7; color:var(--olive-deep); box-shadow:0 2px 8px -3px rgba(38,30,18,.25)}
/* equal-width, single-row variant (seating areas) */
.seg2--fill{display:flex; width:100%; flex-wrap:nowrap}
.seg2--fill button{flex:1 1 0; justify-content:center; padding:.6rem .4rem; gap:6px; white-space:nowrap; min-width:0}

/* time pills */
.time-grid{display:flex; flex-wrap:wrap; gap:9px}
.time-pill{border:1.5px solid rgba(86,85,57,.28); background:#FFFDF7; color:var(--olive); border-radius:999px;
  padding:.6rem 1.1rem; font-family:var(--sans); font-weight:500; font-size:.85rem; cursor:pointer; min-width:84px; transition:.2s}
.time-pill:hover{border-color:var(--terracotta)}
.time-pill.on{background:var(--olive); color:var(--cream); border-color:var(--olive)}

/* ---------- reservation floor (step 2) ---------- */
.rv-floor{background:linear-gradient(160deg,var(--cream),var(--cream-2)); border:1px solid rgba(86,85,57,.18);
  border-radius:18px; padding:1.4rem 1.3rem 1.2rem; box-shadow:var(--shadow)}
.rv-floor__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap}
.rv-floor__zone{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--olive)}
.rv-floor__zone svg{width:15px; height:15px}
.rv-floor__cap{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1.05rem}
.rv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:22px 14px; justify-items:center}
.rv-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; margin-top:1.3rem}

/* a table with numbered chairs (the table design) */
.tbl-unit{position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; border:0; background:none;
  padding:6px; border-radius:12px; cursor:pointer; width:100%; max-width:118px; transition:transform .18s var(--ease)}
.tbl-unit:hover:not(.is-taken){transform:translateY(-2px)}
.tbl-unit.is-taken{cursor:not-allowed}
.chair-row{display:flex; gap:5px}
.chair{width:20px; height:13px; border-radius:6px 6px 3px 3px; background:#CBD2AE; display:grid; place-items:center; transition:.2s}
.chair-row--bot .chair{border-radius:3px 3px 6px 6px}
.chair i{font-style:normal; font-size:.5rem; font-weight:600; color:#5a6038; opacity:.85}
.tbl-surface{width:100%; min-width:74px; aspect-ratio:7/4; border-radius:12px; border:1.7px solid var(--olive); background:#FFFDF7;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; box-shadow:0 5px 14px -8px rgba(51,51,31,.5); transition:.2s}
.tbl-id{font-family:var(--sans); font-weight:600; font-size:1rem; color:var(--olive-deep); line-height:1}
.tbl-seats{font-family:var(--sans); font-size:.6rem; color:var(--muted); display:flex; align-items:center; gap:3px}
.tbl-seats svg{width:11px; height:11px}
.tbl-unit:hover:not(.is-taken) .tbl-surface{box-shadow:0 9px 20px -8px rgba(51,51,31,.55)}
.tbl-unit.is-sel .tbl-surface{background:var(--olive); border-color:var(--olive)}
.tbl-unit.is-sel .tbl-id{color:var(--cream)} .tbl-unit.is-sel .tbl-seats{color:rgba(251,250,242,.8)}
.tbl-unit.is-sel .chair{background:var(--olive)}
.tbl-unit.is-taken .tbl-surface{background:var(--sand-2); border-style:dashed; border-color:rgba(86,85,57,.4)}
.tbl-unit.is-taken .chair{background:rgba(86,85,57,.28)}
.tbl-unit.is-taken .tbl-id,.tbl-unit.is-taken .tbl-seats{color:var(--muted)}
.tbl-flag{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--sans); font-size:.56rem;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.tbl-check{position:absolute; top:2px; right:8px; width:22px; height:22px; border-radius:50%; background:var(--terracotta);
  color:var(--cream); display:grid; place-items:center}
.tbl-check svg{width:13px; height:13px}

.rv-legend{display:flex; flex-wrap:wrap; gap:18px; margin-top:1.3rem; font-family:var(--sans); font-size:.78rem; font-weight:500; color:var(--muted)}
.rv-legend span{display:inline-flex; align-items:center; gap:7px}
.rv-legend i{width:14px; height:14px; border-radius:5px; display:inline-block; border:1.5px solid}
.lg-open{border-color:var(--olive); background:#FFFDF7}
.lg-sel{border-color:var(--olive); background:var(--olive)}
.lg-taken{border-color:rgba(86,85,57,.4); border-style:dashed; background:var(--sand-2)}

.rv-picked{display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:12px;
  background:rgba(201,160,106,.18); border:1px solid rgba(201,160,106,.5); color:var(--ink); font-weight:500}
.rv-picked svg{width:20px; height:20px; color:var(--terracotta)}

/* flow buttons */
.fl-actions{display:flex; gap:12px; flex-wrap:wrap}
.btn--lg{padding:1.1em 2.1em; font-size:.78rem}
.btn--ghost2{background:transparent; color:var(--olive); border:1.5px solid rgba(86,85,57,.3)}
.btn--ghost2:hover{border-color:var(--olive); background:#E7EBD6}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none !important}
.btn svg{width:17px; height:17px; vertical-align:-3px}

/* confirmation (reservation + checkout done) */
.fl-done{max-width:640px; margin:0 auto; text-align:center; padding:2rem var(--pad) 4rem}
.fl-done__mark{width:88px; height:88px; border-radius:50%; background:var(--olive); color:var(--cream); display:grid;
  place-items:center; margin:0 auto 1.4rem; box-shadow:var(--shadow)}
.fl-done__mark svg{width:44px; height:44px}
.fl-done h2{font-family:var(--display); font-size:clamp(2rem,5vw,2.8rem); color:var(--olive-deep); margin:0}
.fl-done__sub{font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--muted); margin:.6rem 0 0}
.fl-card{background:#FFFDF7; border:1px solid rgba(86,85,57,.18); border-radius:16px; padding:1.6rem; margin-top:1.8rem;
  text-align:start; box-shadow:0 8px 24px -16px rgba(56,46,24,.3)}
.fl-card__top{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1rem;
  border-bottom:1px solid rgba(86,85,57,.16); margin-bottom:1.1rem}
.fl-ref{font-family:var(--sans); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.fl-ref b{display:block; font-family:var(--display); font-size:1.6rem; color:var(--olive-deep); letter-spacing:.02em; margin-top:2px}
.fl-pill{display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; background:#F1E6D3;
  color:var(--terracotta); font-family:var(--sans); font-weight:500; font-size:.8rem}
.fl-grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fl-meta{display:flex; gap:11px; align-items:center}
.fl-meta__ic{width:40px; height:40px; border-radius:11px; background:#E7EBD6; color:var(--olive); display:grid; place-items:center; flex:0 0 auto}
.fl-meta__ic svg{width:19px; height:19px}
.fl-meta small{font-family:var(--sans); font-size:.72rem; color:var(--muted); display:block}
.fl-meta b{font-family:var(--sans); font-weight:600; font-size:.95rem; color:var(--ink)}

/* ---------- checkout overlay ---------- */
.co-overlay{position:fixed; inset:0; z-index:85; background:var(--cream); overflow-y:auto; opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease)}
.co-overlay.open{opacity:1; visibility:visible}
.co-bar{position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:1rem var(--pad); background:rgba(251,250,242,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(86,85,57,.14)}
.co-bar h2{font-family:var(--display); font-size:1.5rem; color:var(--olive-deep)}
.co-wrap{max-width:1080px; margin:0 auto; padding:2rem var(--pad) 5rem; display:grid; grid-template-columns:1.5fr .85fr; gap:2.6rem; align-items:start}
.co-summary{background:#FFFDF7; border:1px solid rgba(86,85,57,.18); border-radius:16px; padding:1.5rem; position:sticky; top:90px}
.co-summary h3{font-family:var(--display); font-size:1.35rem; color:var(--olive-deep); margin-bottom:1rem}
.co-lines{max-height:300px; overflow-y:auto; margin-bottom:.9rem}
.co-line{display:flex; justify-content:space-between; gap:10px; padding:.6rem 0; border-bottom:1px solid rgba(86,85,57,.12); font-size:.88rem}
.co-line .q{display:inline-flex; align-items:center; gap:8px; min-width:0}
.co-line .qx{background:#E7EBD6; color:var(--olive-deep); font-family:var(--sans); font-weight:600; font-size:.72rem; padding:2px 7px; border-radius:999px; flex:0 0 auto}
.co-line .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.co-line .pr{font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap}
.co-srow{display:flex; justify-content:space-between; font-size:.85rem; color:var(--muted); padding:.3rem 0}
.co-total{display:flex; justify-content:space-between; align-items:baseline; border-top:1.5px solid rgba(86,85,57,.25); margin-top:.6rem; padding-top:.9rem}
.co-total span{font-family:var(--sans); font-weight:500; letter-spacing:.04em; text-transform:uppercase; font-size:.72rem; color:var(--muted)}
.co-total b{font-family:var(--display); font-size:1.8rem; color:var(--olive-deep)}

/* choice rows (branch / payment) */
.choice{display:flex; align-items:center; gap:11px; width:100%; text-align:start; background:#FFFDF7; border:1.5px solid rgba(86,85,57,.25);
  border-radius:11px; padding:.9rem 1rem; cursor:pointer; font-family:var(--sans); font-weight:500; color:var(--ink); transition:.2s}
.choice:hover{border-color:var(--terracotta)}
.choice.on{border-color:var(--olive); background:#F1F2E6}
.choice svg{width:20px; height:20px; color:var(--olive); flex:0 0 auto}
.choice .ck{margin-inline-start:auto; color:var(--olive)}

@media (max-width:820px){ .co-wrap{grid-template-columns:1fr} .co-summary{position:static; order:-1} .fl-grid2{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .fl-grid2{grid-template-columns:1fr} }