/* ============================================================
   alívia — reservation flow additions (area choice, deposit,
   payment status). Loads after flows.css.
   ============================================================ */

/* ---- seating area cards (step 1) ---- */
.area-pick{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.area-card{position:relative; display:flex; gap:14px; align-items:center; text-align:start; width:100%;
  background:#FFFDF7; border:1.5px solid rgba(86,85,57,.25); border-radius:16px; padding:12px 16px 12px 12px;
  cursor:pointer; font-family:var(--sans); color:var(--ink); transition:.25s var(--ease)}
.area-card:hover{border-color:var(--terracotta)}
.area-card.on{border-color:var(--olive); background:#F1F2E6; box-shadow:0 10px 24px -16px rgba(51,51,31,.55)}
.area-card[disabled]{opacity:.45; cursor:not-allowed}
.area-card__media{position:relative; flex:0 0 74px; width:74px; aspect-ratio:3/4; overflow:hidden;
  border-radius:9999px 9999px 6px 6px; background:var(--sand-2)}
.area-card__media video,.area-card__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.area-card b{display:block; font-family:var(--display); font-weight:600; font-size:1.2rem; color:var(--olive-deep); line-height:1.15}
.area-card small{display:block; font-family:var(--serif); font-size:1rem; line-height:1.35; color:var(--muted); margin-top:4px}
.area-card .ck{position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:var(--olive);
  color:var(--cream); display:none; place-items:center}
.area-card.on .ck{display:grid}
.area-card .ck svg{width:13px; height:13px}

/* ---- guests ---- */
.fl-body{max-width:720px}
.guest-grid{display:flex; flex-wrap:wrap; gap:9px}
.guest-pill{width:50px; height:50px; border-radius:50%; border:1.5px solid rgba(86,85,57,.28); background:#FFFDF7; color:var(--olive-deep);
  font-family:var(--sans); font-weight:600; font-size:1rem; cursor:pointer; transition:.2s}
.guest-pill:hover{border-color:var(--terracotta)}
.guest-pill.on{background:var(--olive); border-color:var(--olive); color:var(--cream)}
.fl-label-note{text-transform:none; letter-spacing:0; color:var(--muted); font-weight:400}
.rv-picked--note{margin-bottom:1.6rem}
.rv-picked--note svg{color:var(--terracotta)}

/* ---- times ---- */
.time-pill[disabled]{opacity:.38; cursor:not-allowed; text-decoration:line-through; text-decoration-color:rgba(86,85,57,.5)}
.time-pill[disabled]:hover{border-color:rgba(86,85,57,.28)}
.time-groups{display:flex; flex-direction:column; gap:14px}
.time-group__label{font-family:var(--serif); font-style:italic; font-size:1.02rem; color:var(--muted); margin-bottom:7px}
.fl-hint{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1.05rem; margin:.3rem 0 0}
.fl-loading{font-family:var(--serif); font-style:italic; color:var(--muted); padding:.6rem 0}

/* deposit hint under step 1 */
.dep-hint{display:flex; align-items:center; gap:12px; margin-top:1.6rem; padding:14px 18px; border-radius:12px;
  background:rgba(201,160,106,.16); border:1px solid rgba(201,160,106,.45); font-family:var(--sans); font-size:.86rem; color:var(--ink)}
.dep-hint svg{width:20px; height:20px; color:var(--terracotta); flex:0 0 auto}
.dep-hint b{color:var(--terracotta)}

/* ---- floor (step 2) ---- */
.rv-zone{margin-bottom:1.4rem}
.rv-zone:last-of-type{margin-bottom:0}
.rv-zone__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:.9rem}
.rv-zone__head::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--caramel)}
.tbl-unit.is-small{opacity:.5}
.tbl-unit.is-small .tbl-surface{border-style:dotted}
.lg-small{border-color:var(--olive); border-style:dotted; background:#FFFDF7; opacity:.6}
.rv-when{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1.05rem}

/* ---- fields ---- */
select.fl-input{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23565539' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px}
.fl-input.is-invalid{border-color:#B4472A; box-shadow:0 0 0 3px rgba(180,71,42,.12)}
.fl-err{font-family:var(--sans); font-size:.74rem; color:#B4472A; margin-top:2px}
.fl-req{color:var(--terracotta)}

/* ---- deposit summary (step 4) ---- */
.dep-card{background:#FFFDF7; border:1px solid rgba(86,85,57,.18); border-radius:16px; padding:1.5rem;
  box-shadow:0 8px 24px -16px rgba(56,46,24,.3)}
.dep-card h3{font-family:var(--display); font-size:1.45rem; color:var(--olive-deep); margin-bottom:1rem}
.dep-row{display:flex; justify-content:space-between; gap:12px; padding:.62rem 0; border-bottom:1px solid rgba(86,85,57,.12);
  font-family:var(--sans); font-size:.9rem}
.dep-row span{color:var(--muted)}
.dep-row b{font-weight:600; color:var(--ink); text-align:end}
.dep-total{display:flex; justify-content:space-between; align-items:baseline; border-top:1.5px solid rgba(86,85,57,.25);
  margin-top:.5rem; padding-top:1rem}
.dep-total span{font-family:var(--sans); font-weight:500; letter-spacing:.06em; text-transform:uppercase; font-size:.72rem; color:var(--muted)}
.dep-total b{font-family:var(--display); font-size:2rem; color:var(--olive-deep)}
.dep-calc{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1.02rem; text-align:end; margin-top:.2rem}
.dep-note{margin-top:1.1rem; padding:12px 16px; border-radius:10px; background:var(--sand); font-family:var(--sans);
  font-size:.84rem; color:var(--olive-deep); line-height:1.55}
.policy{display:flex; gap:12px; align-items:flex-start; margin-top:1.2rem; font-family:var(--sans); font-size:.84rem;
  color:var(--ink); line-height:1.55; cursor:pointer}
.policy input{width:18px; height:18px; margin-top:2px; accent-color:var(--olive); flex:0 0 auto}
.pay-note{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:1rem; font-family:var(--sans); font-size:.76rem;
  color:var(--muted); letter-spacing:.02em}
.pay-note svg{width:16px; height:16px; color:var(--olive)}
.pay-note .pm{border:1px solid rgba(86,85,57,.25); border-radius:999px; padding:3px 10px; background:#FFFDF7; color:var(--olive)}

/* ---- notices ---- */
.notice{display:flex; gap:12px; align-items:flex-start; padding:14px 18px; border-radius:12px; margin-bottom:1.4rem;
  font-family:var(--sans); font-size:.86rem; line-height:1.55; background:#F1E6D3; color:var(--rust); border:1px solid rgba(139,85,48,.25)}
.notice svg{width:20px; height:20px; flex:0 0 auto; margin-top:1px}
.notice--ok{background:#EEF0E2; color:var(--olive-deep); border-color:rgba(86,85,57,.25)}
.notice a{text-decoration:underline}

/* ---- confirmation / status page ---- */
.status-wrap{padding:calc(110px + 2rem) var(--pad) 5rem; min-height:80vh; background:radial-gradient(120% 90% at 50% 0%, var(--cream) 0%, var(--cream-2) 60%, var(--sand) 100%)}
.fl-done__mark--wait{background:var(--caramel)}
.fl-done__mark--fail{background:var(--terracotta)}
.fl-done__mark--wait svg{animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fl-done .fl-actions{justify-content:center; margin-top:1.8rem}
.fl-done__note{font-family:var(--sans); font-size:.86rem; color:var(--muted); margin-top:1.4rem; line-height:1.6}
.fl-done__paid{display:flex; justify-content:space-between; align-items:baseline; margin-top:1.1rem; padding-top:1rem;
  border-top:1px solid rgba(86,85,57,.16)}
.fl-done__paid span{font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.fl-done__paid b{font-family:var(--display); font-size:1.5rem; color:var(--terracotta)}

/* ---- deposit explainer (reserve page) ---- */
.depinfo{padding:clamp(3.5rem,7vw,6rem) var(--pad); background:var(--olive); color:var(--cream)}
.depinfo__head{text-align:center; max-width:46rem; margin:0 auto 2.6rem}
.depinfo .display{color:var(--cream)}
.depinfo__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; max-width:var(--maxw); margin:0 auto;
  background:rgba(251,250,242,.16); border:1px solid rgba(251,250,242,.16); border-radius:16px; overflow:hidden}
.depinfo__grid > div{background:var(--olive); padding:2rem 1.6rem; text-align:center}
.depinfo__grid small{display:block; font-family:var(--sans); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--caramel)}
.depinfo__grid b{display:block; font-family:var(--display); font-weight:600; font-size:clamp(2rem,4vw,2.8rem); margin:.6rem 0 .3rem; color:var(--cream)}
.depinfo__grid p{font-family:var(--serif); font-size:1.12rem; color:rgba(251,250,242,.82); margin:0}

/* ---- test checkout page ---- */
.mockpay{min-height:100vh; display:grid; place-items:center; padding:2rem var(--pad)}
.mockpay__card{max-width:560px; width:100%; background:var(--cream); border:1px solid rgba(86,85,57,.18); border-radius:18px;
  padding:clamp(1.6rem,4vw,2.6rem); box-shadow:var(--shadow, 0 24px 60px -28px rgba(51,51,31,.55))}
.mockpay .display{font-size:clamp(2rem,6vw,3rem); margin-bottom:.8rem}
.mockpay .fl-card{margin-top:1.2rem}

@media (max-width:820px){
  .depinfo__grid{grid-template-columns:1fr}
}
.dep-total b{white-space:nowrap}
.fl-actions .btn{white-space:nowrap}

@media (max-width:560px){
  .area-pick{grid-template-columns:1fr}
  .dep-total b{font-size:1.55rem}
  .fl-actions .btn--lg{padding:1.05em 1.3em; letter-spacing:.12em}
  .fl-actions [data-pay]{flex:1 1 100%}
}