/* =========================================================
   sheets.css — bottom sheets, gallery lightbox, toast,
   backdrop / scrim.
   ========================================================= */

/* =========================================================
   Backdrop (shared by sheets & lightbox)
   ========================================================= */
.scrim{
  position:fixed; inset:0;
  background:var(--scrim);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  z-index:90;
  transition:opacity var(--dur) var(--ease-out);
}
.scrim.is-open{
  opacity:1;
  pointer-events:auto;
  animation:backdropIn var(--dur) var(--ease-out) both;
}

/* =========================================================
   Bottom sheet (filter / reservation)
   ========================================================= */
.sheet{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translate(-50%, 100%);
  width:100%;
  max-width:500px;
  background:var(--surface);
  /* border-radius:24px 24px 0 0; */
  box-shadow:0 -10px 40px rgba(0,0,0,.18);
  z-index:100;
  max-height:85vh;
  display:flex; flex-direction:column;
  transition: transform var(--dur-slow) var(--ease-out);
  padding-bottom: var(--safe-bottom);
  will-change: transform;
}
.sheet.is-open{
  transform:translate(-50%, 0) !important;
}
.sheet-handle{
  display:flex; justify-content:center;
  padding:8px 0 4px;
}
.sheet-handle .bar{
  width:42px; height:4px;
  border-radius:999px;
  background:var(--line-2);
}
.sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 18px 12px;
  border-bottom:1px solid var(--line);
}
.sheet-head h3{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:18px;
  margin:0;
  color:var(--ink);
}
.sheet-head .close-btn{
  width:34px; height:34px;
  border-radius:50%;
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); font-size:13px;
}
.sheet-body{
  overflow-y:auto;
  padding:14px 18px 6px;
  -webkit-overflow-scrolling:touch;
  flex:1 1 auto;
}
.sheet-body .group{
  margin-bottom:18px;
}
.sheet-body .group-label{
  font-size:12px; font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
}
.sheet-body .pill-group{
  display:flex; flex-wrap:wrap; gap:8px;
}
.sheet-foot{
  display:flex; gap:10px;
  padding:12px 18px calc(14px + var(--safe-bottom));
  border-top:1px solid var(--line);
  background:var(--surface);
}
.sheet-foot .btn-clear{
  flex:0 0 auto;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  font-weight:700; font-size:14px;
  min-height:48px;
}
.sheet-foot .btn-apply{
  flex:1;
  padding:14px;
  border-radius:14px;
  background:var(--orange);
  color:#fff;
  font-weight:800; font-size:15px;
  box-shadow:var(--shadow-orange);
  min-height:48px;
}
.sheet-foot .btn-apply:active{ background:var(--orange-700); transform:scale(.985); }

/* Reservation specific */
.res-time-row{
  display:flex; flex-wrap:wrap; gap:8px;
}
.res-summary{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  font-size:12.5px;
  color:var(--ink-2);
  margin-top:6px;
  display:flex; align-items:center; gap:10px;
}
.res-summary i{ color:var(--orange); }

/* =========================================================
   Left side drawer (menu)
   Lives INSIDE .app so it inherits the mock-mobile shell's
   bounds automatically (.app has position:relative + overflow:
   hidden). No viewport math needed — translateX(-100%) when
   closed is naturally clipped by .app, translateX(0) when open
   makes it flush-left within the shell on every width.
   ========================================================= */
.side-drawer{
  position:absolute;
  top:0; bottom:0;
  left:0;
  width:86%;
  max-width:320px;
  background:var(--surface);
  z-index:100;
  display:flex;
  flex-direction:column;
  transform:translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
  border-radius:0 24px 24px 0;
  box-shadow:8px 0 40px rgba(0,0,0,.22);
  padding-top:var(--safe-top);
  padding-bottom:var(--safe-bottom);
  overflow:hidden;
}
.side-drawer.is-open{
  transform:translateX(0);
}

/* =========================================================
   Gallery lightbox (fullscreen modal)
   ========================================================= */
.lightbox{
  position:fixed; inset:0;
  background:rgba(15,15,18,.92);
  z-index:120;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease-out);
  display:flex; flex-direction:column;
}
.lightbox.is-open{
  opacity:1;
  pointer-events:auto;
}
.lightbox-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  padding-top:calc(14px + var(--safe-top));
  color:#fff;
}
.lightbox-head .lb-counter{
  font-size:13px; font-weight:700; letter-spacing:.02em;
  color:rgba(255,255,255,.85);
}
.lightbox-head .lb-close{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px;
}
.lightbox-stage{
  flex:1 1 auto;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.lightbox-stage::-webkit-scrollbar{ display:none; }
.lightbox-slide{
  flex:0 0 100%;
  height:100%;
  scroll-snap-align:center;
  display:flex; align-items:center; justify-content:center;
  padding:8px 24px;
}
.lightbox-slide .lb-img{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;
  max-height:80vh;
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.lightbox-slide .lb-img-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
  opacity:0;
  transition:opacity .35s var(--ease-out);
}
.lightbox-slide .lb-img-photo.is-loaded{ opacity:1; }
.lightbox-foot{
  padding:16px 24px calc(20px + var(--safe-bottom));
  text-align:center;
  color:rgba(255,255,255,.78);
  font-size:12px;
}

/* =========================================================
   Toast
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:96px;
  transform:translateX(-50%) translateY(20px);
  background:rgba(31,42,46,.94);
  color:#fff;
  padding:11px 18px;
  border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:600;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), bottom var(--dur) var(--ease-out);
  z-index:200;
  max-width:80%;
  text-align:center;
  display:inline-flex; align-items:center; gap:8px;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.toast.toast-success{ background:var(--teal); }
.toast.toast-success::before{
  content:"\f00c"; /* check */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color:var(--gold);
}
.toast.toast-warn{ background:var(--orange); }
.toast.toast-error{ background:var(--red); }

/* When CTA bar is visible, push toast above it */
body.has-cta .toast{ bottom:120px; }
body.has-nav .toast{ bottom:96px; }

/* =========================================================
   Reservation date pills
   ========================================================= */
.date-pill{
  flex:0 0 auto;
  padding:8px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:64px;
  font-weight:700; font-size:12px;
  transition:all var(--dur-fast);
}
.date-pill .day{ color:var(--muted); font-size:10.5px; font-weight:600; }
.date-pill .num{ font-family:'Outfit', sans-serif; font-size:18px; font-weight:700; color:var(--ink); }
.date-pill.active{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
  box-shadow:0 6px 14px rgba(146,39,143,.28);
}
.date-pill.active .day,
.date-pill.active .num{ color:#fff; }

/* Body lock when sheet/lightbox open */
body.no-scroll{ overflow:hidden; }