/* ── Reserve Your Table — the reservation modal (Oct 2026) ─────────────────
   Loaded by index.html and menu.html, the two pages whose Reserve button
   files a real request with the restaurant. Presentation only: the fields
   keep their ids, and confirmReservation() on each page still owns
   validation, the request and every state change.

   Every rule is scoped to #reservationModal. Both pages stack several theme
   layers that set .modal-card / .btn / input / label / .eyebrow with
   !important (DARK and LIGHT alike), so this file answers with id
   specificity, plus !important exactly where those layers use it. The modal
   is deliberately dark in both site themes: espresso card, amber accent,
   cream type, and the dining-room photo as its hero.

   Layout — the card is a column: [scrolling content][footer: CTA]. The CTA
   bar never scrolls, so it is always in reach and never covers a field.
     < 600px   bottom sheet; photo is a compact band behind the heading that
               scrolls away with the content; date + time side by side
     600–879   centred card, taller photo band, phone + guests side by side
     ≥ 880px   wide card: form column on the left, photo column on the right
               (pinned — only the form scrolls)                               */

#reservationModal {
  --rsv-bg: #150c06;
  --rsv-bg-top: #1d1209;
  --rsv-ink: #f7efe3;
  --rsv-ink-2: rgba(247, 239, 227, 0.76);
  --rsv-ink-3: rgba(247, 239, 227, 0.62);
  --rsv-ink-4: rgba(247, 239, 227, 0.46);
  --rsv-amber: #f5a623;
  --rsv-amber-hi: #ffc35c;
  --rsv-line: rgba(245, 200, 130, 0.16);
  --rsv-line-hi: rgba(245, 190, 110, 0.30);
  --rsv-field: rgba(255, 240, 220, 0.045);
  --rsv-field-hi: rgba(255, 240, 220, 0.07);
  --rsv-error: #ffab94;
  --rsv-pad: 22px;
  color-scheme: dark;
}

#reservationModal [hidden] { display: none !important; }

#reservationModal .rsv-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Overlay + card ─────────────────────────────────────────────────────── */
#reservationModal.modal { padding: 24px !important; }

#reservationModal .modal-backdrop {
  background: rgba(8, 4, 1, 0.74) !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
}

#reservationModal .rsv-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column;
  width: min(620px, 100%) !important;
  max-height: calc(100vh - 48px) !important;
  max-height: calc(100dvh - 48px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid var(--rsv-line-hi) !important;
  background:
    radial-gradient(90% 50% at 0% 0%, rgba(245, 166, 35, 0.06), transparent 70%),
    linear-gradient(180deg, var(--rsv-bg-top) 0%, var(--rsv-bg) 70%) !important;
  color: var(--rsv-ink) !important;
  box-shadow:
    0 40px 110px -24px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 228, 190, 0.07) !important;
  font-size: 16px;
  text-align: left;
  outline: none;
}

#reservationModal.active .rsv-card { animation: rsvCardIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes rsvCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes rsvSheetIn {
  from { transform: translateY(32px); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

/* The one scrolling region. The photo is positioned against the CARD on
   wide screens (so it stays put while the form scrolls) and against this
   region below 880px (so it scrolls away with the heading). Its bottom
   padding keeps the last field clear of the footer's shadow. */
#reservationModal .rsv-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 166, 35, 0.32) transparent;
  padding-bottom: 6px;
}

/* ── Close ──────────────────────────────────────────────────────────────── */
#reservationModal .rsv-close {
  position: absolute !important;
  top: 14px;
  right: 14px;
  float: none !important;
  z-index: 40 !important;
  display: grid !important;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 236, 205, 0.22) !important;
  background: rgba(20, 11, 5, 0.55) !important;
  color: var(--rsv-ink) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
  cursor: pointer;
}
#reservationModal .rsv-close:hover { background: rgba(48, 27, 11, 0.8) !important; border-color: rgba(245, 166, 35, 0.55) !important; }
#reservationModal .rsv-close:active { transform: scale(0.94); }
#reservationModal .rsv-close:focus-visible { outline: 2px solid var(--rsv-amber-hi) !important; outline-offset: 3px; }
#reservationModal .rsv-close svg { width: 18px; height: 18px; pointer-events: none; }

/* ── Photo ──────────────────────────────────────────────────────────────── */
#reservationModal .rsv-media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 214px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
}
#reservationModal .rsv-media img {
  transition: opacity 420ms ease;
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 78% 62%;
  display: block;
}
/* The heading's side is darkened enough for cream text; the mask above
   melts the bottom into the card. */
#reservationModal .rsv-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(21, 12, 6, 0.94) 0%, rgba(21, 12, 6, 0.8) 34%, rgba(21, 12, 6, 0.3) 70%, rgba(21, 12, 6, 0.1) 100%),
    linear-gradient(180deg, rgba(21, 12, 6, 0.35) 0%, rgba(21, 12, 6, 0) 34%);
}
#reservationModal .rsv-media[data-loading] img { opacity: 0; }
#reservationModal .rsv-media-caption { display: none; }

/* ── Heading ────────────────────────────────────────────────────────────── */
#reservationModal .rsv-head {
  position: relative;
  z-index: 1;
  padding: 28px var(--rsv-pad) 0;
}

#reservationModal .rsv-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--rsv-amber) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3em !important;
  line-height: 1;
  text-transform: uppercase;
  animation: none !important;
}
#reservationModal .rsv-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}

#reservationModal .rsv-title {
  margin: 14px 0 0 !important;
  color: var(--rsv-ink) !important;
  font-size: clamp(26px, 7.5vw, 32px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.022em !important;
  text-transform: none !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
/* Two deliberate lines: "Reserve Your" / "Table at Bunsik Bites". */
#reservationModal .rsv-title-line { display: block; white-space: nowrap; }
#reservationModal .rsv-accent { color: var(--rsv-amber) !important; white-space: nowrap; }

#reservationModal .rsv-intro {
  max-width: 30ch;
  margin: 12px 0 0 !important;
  color: var(--rsv-ink-2) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}

/* ── Form ───────────────────────────────────────────────────────────────── */
#reservationModal .rsv-form {
  position: relative;
  z-index: 1;
  /* No !important on display: resetReservationForm / showReservationResult
     hide and restore this with an inline style.display. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px 12px !important;
  margin: 22px 0 0 !important;
  padding: 0 var(--rsv-pad);
}

#reservationModal .rsv-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  grid-column: 1 / -1;
}
#reservationModal .rsv-field--half { grid-column: span 1; }

#reservationModal .rsv-label {
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  margin: 0 !important;
  color: var(--rsv-ink-3) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: default;
}
#reservationModal .rsv-optional { color: var(--rsv-ink-4); letter-spacing: 0.1em; font-weight: 600; }

#reservationModal .rsv-control {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid var(--rsv-line);
  background: var(--rsv-field);
  box-shadow: inset 0 1px 0 rgba(255, 235, 205, 0.03);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  cursor: text;
}
#reservationModal .rsv-control:hover { border-color: rgba(245, 196, 120, 0.3); }
#reservationModal .rsv-control:focus-within {
  border-color: rgba(245, 166, 35, 0.85);
  background: var(--rsv-field-hi);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.14), inset 0 1px 0 rgba(255, 235, 205, 0.04);
}
#reservationModal .rsv-control[data-invalid] {
  border-color: rgba(255, 140, 110, 0.85);
  box-shadow: 0 0 0 4px rgba(255, 120, 90, 0.12);
}

#reservationModal .rsv-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0 12px 0 16px;
  color: rgba(247, 239, 227, 0.5);
  transition: color 160ms ease;
  pointer-events: none;
}
#reservationModal .rsv-control:focus-within .rsv-icon { color: var(--rsv-amber); }
#reservationModal .rsv-control[data-invalid] .rsv-icon { color: var(--rsv-error); }

/* The native controls lose their own box: the .rsv-control draws border,
   fill and focus ring. 16px keeps iOS Safari from zooming on focus. */
#reservationModal .rsv-control input,
#reservationModal .rsv-control select,
#reservationModal .rsv-control textarea {
  position: relative !important;
  z-index: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  width: 100% !important;
  height: 50px;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 16px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--rsv-ink) !important;
  font: inherit;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.005em;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
}
#reservationModal .rsv-control input::placeholder,
#reservationModal .rsv-control textarea::placeholder { color: var(--rsv-ink-4); opacity: 1; }
#reservationModal .rsv-control select option { color: #150d05; background: #fff8ee; }

/* Phone: the country code is a fixed +91 (the server accepts Indian
   mobiles only and strips a typed +91 itself). */
#reservationModal .rsv-prefix {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid var(--rsv-line-hi);
  color: var(--rsv-ink);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
#reservationModal .rsv-control--phone input { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }

/* Selects and pickers: whole control opens, chevron is decoration. */
#reservationModal .rsv-control--select,
#reservationModal .rsv-control--picker { cursor: pointer; }
#reservationModal .rsv-control--select select,
#reservationModal .rsv-control--picker input { padding-right: 44px !important; cursor: pointer; }
#reservationModal .rsv-chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: rgba(247, 239, 227, 0.58);
  pointer-events: none;
  transition: transform 160ms ease, color 160ms ease;
}
#reservationModal .rsv-control:focus-within .rsv-chevron { color: var(--rsv-amber); }

/* Chrome/Edge: stretch the (invisible) picker button over the field, so a
   click anywhere opens the calendar / clock; keyboard editing is unchanged. */
#reservationModal .rsv-control--picker input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  background: none;
  cursor: pointer;
}
#reservationModal .rsv-control--picker input::-webkit-date-and-time-value { text-align: left; margin: 0; }
#reservationModal .rsv-control--picker input::-webkit-datetime-edit { padding: 0; }

/* iOS shows an empty date/time input as a blank box: reserve.js marks the
   control data-empty and this paints a placeholder until it has a value. */
#reservationModal .rsv-ghost {
  position: absolute;
  top: 50%;
  left: 48px;
  right: 44px;
  transform: translateY(-50%);
  display: none;
  overflow: hidden;
  color: var(--rsv-ink-4);
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
#reservationModal .rsv-control[data-empty] .rsv-ghost { display: block; }
#reservationModal .rsv-control[data-empty]:focus-within .rsv-ghost { display: none; }
#reservationModal .rsv-control[data-empty] input { color: transparent !important; }
#reservationModal .rsv-control[data-empty]:focus-within input { color: var(--rsv-ink) !important; }

/* Note */
#reservationModal .rsv-control--note { align-items: flex-start; }
#reservationModal .rsv-control--note .rsv-icon { margin-top: 15px; }
#reservationModal .rsv-control--note textarea {
  height: auto;
  min-height: 80px !important;
  padding: 14px 16px 28px 0 !important;
  line-height: 1.45;
  resize: none;
}
#reservationModal .rsv-count {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: var(--rsv-ink-4);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ── Footer: error, CTA, reassurance ────────────────────────────────────── */
/* Outside the scroll area, so the button is always in reach (short phones,
   keyboard up) without ever sitting on top of a field. The hairline and
   shadow appear only while there is more form below (reserve.js sets
   data-more), so a form that fits reads as one calm surface. */
#reservationModal .rsv-footer {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  padding: 16px var(--rsv-pad) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid transparent;
  background: var(--rsv-bg);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
#reservationModal .rsv-card[data-more] .rsv-footer {
  border-top-color: rgba(245, 200, 130, 0.12);
  box-shadow: 0 -18px 30px -16px rgba(0, 0, 0, 0.75);
}

#reservationModal .rsv-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px !important;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 140, 110, 0.36);
  background: rgba(255, 110, 80, 0.1);
  color: #ffd9cf !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
#reservationModal .rsv-error svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--rsv-error); }

#reservationModal .rsv-cta {
  position: relative !important;
  display: flex;  /* not !important: the page hides it with style.display */
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 56px;
  margin: 0 !important;
  padding: 0 56px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 214, 140, 0.6) !important;
  background: linear-gradient(180deg, #ffc252 0%, #f5a623 54%, #ea9419 100%) !important;
  color: #1c0e03 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  line-height: 1;
  text-transform: uppercase;
  box-shadow:
    0 16px 32px -12px rgba(245, 166, 35, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(120, 60, 0, 0.25) !important;
  transform: none !important;
  transition: filter 160ms ease, box-shadow 200ms ease, transform 160ms ease;
  overflow: hidden;
  cursor: pointer;
}
#reservationModal .rsv-cta:hover {
  filter: brightness(1.05) saturate(1.05);
  transform: translateY(-1px) !important;
  box-shadow:
    0 20px 38px -12px rgba(245, 166, 35, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(120, 60, 0, 0.25) !important;
}
#reservationModal .rsv-cta:active { filter: brightness(0.96); transform: translateY(0) scale(0.99) !important; }
#reservationModal .rsv-cta:focus-visible { outline: 2px solid #ffe2a8 !important; outline-offset: 3px; }
#reservationModal .rsv-cta[disabled] { cursor: progress; filter: saturate(0.85) brightness(0.95); transform: none !important; }
#reservationModal .rsv-cta-arrow,
#reservationModal .rsv-spinner {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  pointer-events: none;
}
#reservationModal .rsv-cta-arrow { transition: transform 180ms ease; }
#reservationModal .rsv-cta:hover .rsv-cta-arrow { transform: translateX(3px); }
#reservationModal .rsv-spinner {
  display: none;
  border-radius: 50%;
  border: 2px solid rgba(28, 14, 3, 0.25);
  border-top-color: #1c0e03;
  animation: rsvSpin 700ms linear infinite;
}
#reservationModal .rsv-cta[aria-busy="true"] .rsv-cta-arrow { display: none; }
#reservationModal .rsv-cta[aria-busy="true"] .rsv-spinner { display: block; }
@keyframes rsvSpin { to { transform: rotate(360deg); } }

#reservationModal .rsv-assure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0 !important;
  color: var(--rsv-ink-3) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: center;
}
#reservationModal .rsv-assure svg { flex: 0 0 auto; width: 14px; height: 14px; color: rgba(245, 166, 35, 0.85); }

#reservationModal .rsv-track-existing {
  position: relative;
  z-index: 1;
  margin: 18px var(--rsv-pad) 4px !important;
  color: var(--rsv-ink-3) !important;
  font-size: 13.5px !important;
  text-align: center;
}
#reservationModal .rsv-track-existing a {
  color: var(--rsv-amber) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(245, 166, 35, 0.4);
  text-underline-offset: 3px;
}
#reservationModal .rsv-track-existing a:hover { text-decoration-color: currentColor; }
#reservationModal .rsv-track-existing a:focus-visible { outline: 2px solid var(--rsv-amber-hi); outline-offset: 2px; border-radius: 4px; }

/* ── Request received ───────────────────────────────────────────────────── */
#reservationModal .rsv-card.is-reserved .rsv-footer { display: none !important; }

#reservationModal .rsv-result {
  position: relative;
  z-index: 1;
  margin: 24px var(--rsv-pad) calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 24px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(245, 166, 35, 0.34) !important;
  background: linear-gradient(180deg, rgba(245, 166, 35, 0.11), rgba(245, 166, 35, 0.03)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 228, 190, 0.06) !important;
  color: var(--rsv-ink) !important;
  outline: none;
}
#reservationModal .rsv-result-badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--rsv-amber);
  color: #1c0e03;
  box-shadow: 0 0 0 6px rgba(245, 166, 35, 0.14);
}
#reservationModal .rsv-result-badge svg { width: 22px; height: 22px; }
#reservationModal .rsv-result .eyebrow {
  color: var(--rsv-amber) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  animation: none !important;
}
#reservationModal .rsv-result h3 {
  margin: 10px 0 0 !important;
  color: var(--rsv-ink) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  text-transform: none !important;
}
#reservationModal .rsv-result .muted { margin-top: 8px; color: var(--rsv-ink-2) !important; font-size: 15px; line-height: 1.55; }
#reservationModal .rsv-result .rsv-result-fine { color: var(--rsv-ink-3) !important; font-size: 13px; }
#reservationModal .rsv-result .rsv-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
#reservationModal .rsv-result .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin: 0 !important;
  padding: 0 20px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  transform: none !important;
  cursor: pointer;
}
#reservationModal .rsv-result #reservationTrack {
  border: 1px solid rgba(255, 214, 140, 0.6) !important;
  background: linear-gradient(180deg, #ffc252 0%, #f5a623 54%, #ea9419 100%) !important;
  color: #1c0e03 !important;
  box-shadow: 0 12px 26px -12px rgba(245, 166, 35, 0.6) !important;
}
#reservationModal .rsv-result #reservationDone {
  border: 1px solid var(--rsv-line-hi) !important;
  background: rgba(255, 240, 220, 0.05) !important;
  color: var(--rsv-ink) !important;
  box-shadow: none !important;
}
#reservationModal .rsv-result #reservationDone:hover { border-color: rgba(245, 166, 35, 0.6) !important; background: rgba(255, 240, 220, 0.09) !important; }
#reservationModal .rsv-result .btn:focus-visible { outline: 2px solid var(--rsv-amber-hi) !important; outline-offset: 3px; }

/* ── Phone: bottom sheet ────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
  #reservationModal { --rsv-pad: 20px; }
  #reservationModal.modal { padding: 0 !important; align-items: flex-end !important; }
  #reservationModal .rsv-card {
    width: 100% !important;
    max-height: calc(100vh - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
    border-radius: 26px 26px 0 0 !important;
    border-bottom: 0 !important;
  }
  #reservationModal.active .rsv-card { animation-name: rsvSheetIn; }
  #reservationModal .rsv-close { top: 12px; right: 12px; }
}

@media (max-width: 599.98px) {
  #reservationModal .rsv-control--picker .rsv-chevron { display: none; }
  #reservationModal .rsv-control--picker input { padding-right: 12px !important; }
  #reservationModal .rsv-control--picker .rsv-ghost { right: 12px; }
  #reservationModal .rsv-control--picker .rsv-icon { margin: 0 10px 0 14px; }
  #reservationModal .rsv-control--picker .rsv-ghost { left: 44px; }
}

@media (max-width: 359.98px) {
  #reservationModal { --rsv-pad: 16px; }
  #reservationModal .rsv-title-line { white-space: normal; }
  #reservationModal .rsv-field--half { grid-column: 1 / -1; }
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  #reservationModal { --rsv-pad: 34px; }
  #reservationModal .rsv-media { height: 268px; }
  #reservationModal .rsv-head { padding-top: 44px; padding-right: calc(var(--rsv-pad) + 40px); }
  #reservationModal .rsv-title { font-size: 38px !important; }
  #reservationModal .rsv-intro { font-size: 16px !important; }
  #reservationModal .rsv-form { margin-top: 28px !important; gap: 16px 14px !important; }
  #reservationModal .rsv-footer { padding-top: 18px; padding-bottom: 26px; }
  #reservationModal .rsv-field--pair { grid-column: span 1; }
  #reservationModal .rsv-close { top: 18px; right: 18px; }
}

/* ── Desktop: form left, photo right ────────────────────────────────────── */
@media (min-width: 880px) {
  #reservationModal { --rsv-pad: 40px; }
  #reservationModal.modal { padding: 32px !important; }
  /* Phone (+91 and the number) needs more width than Guests / Time. */
  #reservationModal .rsv-form { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) !important; }
  #reservationModal .rsv-card {
    width: min(1000px, 100%) !important;
    min-height: min(660px, calc(100dvh - 64px));
    max-height: calc(100vh - 64px) !important;
    max-height: calc(100dvh - 64px) !important;
    border-radius: 30px !important;
  }
  #reservationModal .rsv-scroll,
  #reservationModal .rsv-footer { width: 57%; }
  #reservationModal .rsv-scroll { position: static; }
  #reservationModal .rsv-media {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: 43%;
    height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 18%);
  }
  #reservationModal .rsv-media img { object-position: 66% 50%; }
  #reservationModal .rsv-media::after {
    background:
      linear-gradient(90deg, rgba(21, 12, 6, 0.55) 0%, rgba(21, 12, 6, 0) 36%),
      linear-gradient(180deg, rgba(21, 12, 6, 0.4) 0%, rgba(21, 12, 6, 0) 22%, rgba(21, 12, 6, 0) 56%, rgba(21, 12, 6, 0.85) 100%);
  }
  #reservationModal .rsv-media-caption {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 30px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 236, 205, 0.16);
    background: rgba(20, 11, 5, 0.42);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  #reservationModal .rsv-media-caption strong {
    color: var(--rsv-amber);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }
  #reservationModal .rsv-media-caption span { color: var(--rsv-ink); font-size: 14px; line-height: 1.4; }
  #reservationModal .rsv-head { padding: 48px var(--rsv-pad) 0; }
  #reservationModal .rsv-title { font-size: 40px !important; }
  #reservationModal .rsv-footer { padding-bottom: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  #reservationModal .rsv-card,
  #reservationModal.active .rsv-card { animation: none !important; }
  #reservationModal * { transition: none !important; }
  #reservationModal .rsv-spinner { animation-duration: 1.6s; }
}