:root {
  --res-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --res-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

.res-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  opacity: 1;
  transition: opacity 200ms var(--res-ease-out), display 200ms allow-discrete;
}
.res-modal[hidden] { display: none; opacity: 0; }
@starting-style {
  .res-modal { opacity: 0; }
}
body.res-modal-open { overflow: hidden; }

.res-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 14, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.res-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #fff);
  color: var(--color-text, #1c1c1a);
  border-radius: 24px;
  box-shadow: 0 30px 80px -24px rgba(20, 18, 14, 0.55), 0 0 0 1px color-mix(in srgb, var(--color-text, #1c1c1a) 6%, transparent);
  width: min(560px, 100%);
  max-height: min(92vh, 780px);
  max-height: min(92dvh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.4rem 1.5rem 1.4rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  transform: scale(1) translateY(0);
  opacity: 1;
  transition: transform 250ms var(--res-ease-out), opacity 220ms var(--res-ease-out);
}
@starting-style {
  .res-modal__dialog { transform: scale(0.96) translateY(12px); opacity: 0; }
}

.res-modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text, #1c1c1a) 7%, transparent);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text, #1c1c1a);
  transition: background 150ms ease, transform 150ms var(--res-ease-out);
}
.res-modal__close:hover { background: color-mix(in srgb, var(--color-text, #1c1c1a) 13%, transparent); }
.res-modal__close:active { transform: scale(0.9); }

/* Steps: a slim 5-segment progress bar with the step name under each segment. */
.res-modal__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0 2.8rem 1.25rem 0;
}
.res-modal__step { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.res-modal__step::before {
  content: '';
  height: 4px;
  border-radius: 4px;
  background: var(--rule);
  transition: background 220ms var(--res-ease-out);
}
.res-modal__step.is-done::before,
.res-modal__step.is-active::before { background: var(--color-primary); }
.res-modal__step-circle { display: none; }
.res-modal__step-label {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text, #1c1c1a);
  opacity: 0.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 180ms var(--res-ease-out);
}
.res-modal__step.is-active .res-modal__step-label { opacity: 1; color: var(--color-primary); }
.res-modal__step.is-done .res-modal__step-label { opacity: 0.65; }
.res-modal__step-connector { display: none; }

.res-modal__panel { display: none; padding: 0; } /* base.css pads every <section> */
.res-modal__panel.is-active { display: block; animation: resModalStepIn 260ms var(--res-ease-out); }

@keyframes resModalStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.res-modal__title {
  font-family: var(--font-title, 'Fraunces', Georgia, serif);
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 0 0 0.9rem;
  text-align: center;
}

.res-modal__calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.res-modal__nav-btn {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--color-bg, #fff);
  color: var(--color-text, #1c1c1a);
  box-shadow: 0 1px 3px rgba(20, 18, 14, 0.12);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  transition: background 150ms ease, color 150ms ease, transform 150ms var(--res-ease-out);
}
.res-modal__nav-btn:hover { background: var(--color-primary); color: var(--color-bg, #fff); }
.res-modal__nav-btn:active { transform: scale(0.92); }
.res-modal__month-label { font-weight: 700; font-size: 1rem; text-transform: capitalize; }

.res-modal__weekdays, .res-modal__calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.res-modal__weekdays { margin-bottom: 0.3rem; }
.res-modal__weekdays span { text-align: center; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.45; }
.res-modal__calendar-grid > .res-modal__hint { grid-column: 1 / -1; text-align: center; padding: 2rem 0; }

/* Day cells: height follows the screen height (not square) so 6 weeks always fit. */
.res-modal__day {
  position: relative;
  height: clamp(36px, 6.4vh, 50px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  border-radius: 12px;
  border: none;
  background: transparent;
  font-family: inherit;
  color: var(--color-text, #1c1c1a);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 120ms var(--res-ease-out), box-shadow 150ms ease;
}
.res-modal__day--empty { visibility: hidden; }
.res-modal__day-num { font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.res-modal__day-label { font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

.res-modal__day--open {
  background: color-mix(in srgb, var(--color-primary) 13%, transparent);
  color: var(--color-text, #1c1c1a);
}
.res-modal__day--open .res-modal__day-num { font-weight: 700; }
.res-modal__day--open:hover {
  background: var(--color-primary);
  color: var(--color-bg, #fff);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--color-primary) 80%, transparent);
}
.res-modal__day--open:active { transform: scale(0.93); }
.res-modal__day--open:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.res-modal__day--closed { opacity: 0.28; cursor: default; }
.res-modal__day--complet { cursor: not-allowed; color: #a13a2f; background: color-mix(in srgb, #a13a2f 7%, transparent); }
.res-modal__day--complet .res-modal__day-num { text-decoration: line-through; opacity: 0.7; }
.res-modal__day--today::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.res-modal__day--today.res-modal__day--closed { opacity: 0.55; }

.res-modal__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: center; margin: 0.8rem 0 0; font-size: 0.74rem; opacity: 0.75; }
.res-modal__legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.res-modal__legend-dot { width: 10px; height: 10px; border-radius: 4px; display: inline-block; }
.res-modal__legend-dot--open { background: color-mix(in srgb, var(--color-primary) 35%, transparent); }
.res-modal__legend-dot--closed { background: var(--rule); }
.res-modal__legend-dot--complet { background: color-mix(in srgb, #a13a2f 45%, transparent); }

.res-modal__selected-date { text-align: center; font-weight: 600; margin: -0.4rem 0 var(--space-sm); text-transform: capitalize; }

.res-modal__field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-xs); align-items: end; }
.res-modal__field-row--2col { grid-template-columns: 1fr 1fr; }
.res-modal__field { margin-bottom: var(--space-sm); }
.res-modal__field--party { max-width: 180px; }
.res-modal__field label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 0.3rem; line-height: 1.25; }
/* Inside a multi-column row, labels reserve the same height (bottom-aligned)
   so a wrapping label never pushes its input out of line with its siblings. */
.res-modal__field-row .res-modal__field label { display: flex; align-items: flex-end; min-height: 2.5em; }
.res-modal__required { color: #a13a2f; white-space: nowrap; }
.res-modal__field input[type="text"],
.res-modal__field input[type="email"],
.res-modal__field input[type="tel"],
.res-modal__field input[type="number"],
.res-modal__field select,
.res-modal__field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  background: color-mix(in srgb, #fff 55%, var(--color-bg, #fff));
  color: var(--color-text, #1c1c1a);
  font-family: inherit;
  font-size: 16px; /* no iOS zoom on focus */
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.res-modal__field input:focus,
.res-modal__field select:focus,
.res-modal__field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.res-modal__field textarea { min-height: 80px; resize: vertical; }
.res-modal__field--checkbox label { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 500; }
.res-modal__field--checkbox input { margin-top: 0.2rem; }

.res-modal__hint { font-size: 0.8rem; opacity: 0.7; margin: 0.4rem 0; }

.res-modal__space-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.res-modal__space-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg, #fff);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms var(--res-ease-out);
  animation: resModalCardIn 280ms var(--res-ease-out) backwards;
}
/* Small cascade as the freshly-fetched cards render, instead of all popping in at once. */
.res-modal__space-card:nth-child(1) { animation-delay: 0ms; }
.res-modal__space-card:nth-child(2) { animation-delay: 40ms; }
.res-modal__space-card:nth-child(3) { animation-delay: 80ms; }
.res-modal__space-card:nth-child(4) { animation-delay: 120ms; }
.res-modal__space-card:nth-child(5) { animation-delay: 160ms; }
.res-modal__space-card:nth-child(6) { animation-delay: 200ms; }
.res-modal__space-card:nth-child(7) { animation-delay: 240ms; }
@keyframes resModalCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.res-modal__space-card input { position: absolute; top: 0.6rem; right: 0.6rem; width: 18px; height: 18px; z-index: 1; }
.res-modal__space-card:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent); }
.res-modal__space-card:not(.is-disabled):hover { transform: translateY(-2px); }
.res-modal__space-card:not(.is-disabled):active { transform: scale(0.98); }
.res-modal__space-card.is-disabled { opacity: 0.5; cursor: not-allowed; }
.res-modal__space-photo { display: block; width: 100%; height: 96px; object-fit: cover; background: var(--rule); }
.res-modal__space-photo--placeholder {
  height: 96px;
  background: linear-gradient(135deg, var(--rule), color-mix(in srgb, var(--color-primary) 10%, var(--rule)));
}
/* Combo spaces (Cave 1 + Cave 2, etc.): each room's own photo side by side,
   divided by a thin line, instead of one separate uploaded image. */
.res-modal__space-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  height: 96px;
  overflow: hidden;
  background: var(--color-bg, #fff);
}
.res-modal__space-photo-grid:has(img:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.res-modal__space-photo-grid.res-modal__space-photo-grid--quad { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
/* Grid items don't shrink below their content's intrinsic size by default,
   so without this an <img> at height:100% ignores its ~48px row track and
   renders at its natural height instead, overflowing the fixed-height grid
   (and the card text below it) — especially visible in the --quad (2x2) layout. */
.res-modal__space-photo-grid img { display: block; width: 100%; height: 100%; min-height: 0; min-width: 0; object-fit: cover; }
.res-modal__space-card-body { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.7rem 0.75rem; }
.res-modal__space-card-name { font-weight: 700; font-size: 0.86rem; }
.res-modal__space-card-capacity { font-size: 0.74rem; opacity: 0.7; }
.res-modal__space-card-desc { font-size: 0.74rem; opacity: 0.85; line-height: 1.4; margin-top: 0.1rem; }
.res-modal__space-card-status { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #a13a2f; font-weight: 600; }

@media (max-width: 480px) {
  .res-modal__space-grid { grid-template-columns: 1fr; }
}

.res-modal__actions { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: var(--space-sm); }
.res-modal__btn {
  min-height: 48px;
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  transition: background 150ms ease, transform 150ms var(--res-ease-out), opacity 150ms ease;
}
.res-modal__btn:not(:disabled):active { transform: scale(0.97); }
.res-modal__btn--primary { background: var(--color-primary); color: var(--color-bg); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--color-primary) 85%, transparent); }
.res-modal__btn--primary:not(:disabled):hover { filter: brightness(1.06); }
.res-modal__btn--primary:disabled { opacity: 0.4; cursor: not-allowed; }
.res-modal__btn--ghost { border-color: var(--rule); color: var(--color-text, #1c1c1a); }

.res-modal__error {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.6rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: color-mix(in srgb, #a13a2f 9%, transparent);
  color: #a13a2f;
  font-size: 0.86rem;
  font-weight: 600;
}
.res-modal__error[hidden] { display: none; }
.res-modal__field.is-invalid input,
.res-modal__field.is-invalid select,
.res-modal__field.is-invalid textarea { border-color: #a13a2f; box-shadow: 0 0 0 3px color-mix(in srgb, #a13a2f 15%, transparent); }
.res-modal__field.is-invalid > label { color: #a13a2f; }

.res-modal__success { text-align: center; }
.res-modal__success .res-modal__btn { margin-top: var(--space-sm); }

/* Phones: a bottom sheet that uses the full width. */
@media (max-width: 600px) {
  .res-modal { align-items: flex-end; padding: 0; }
  .res-modal__dialog {
    width: 100%;
    max-height: 94dvh;
    border-radius: 24px 24px 0 0;
    padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }
  @starting-style {
    .res-modal__dialog { transform: translateY(40px); opacity: 0; }
  }
  .res-modal__field-row { grid-template-columns: 1fr; }
  .res-modal__step-label { font-size: 0.56rem; }
  .res-modal__title { font-size: 1.3rem; }
  .res-modal__weekdays, .res-modal__calendar-grid { gap: 0.2rem; }
  .res-modal__day { height: clamp(38px, 5.6vh, 48px); border-radius: 10px; }
}

@media (max-width: 420px) {
  .res-modal__step-label { display: none; }
  .res-modal__steps { margin-bottom: 1rem; }
}

/* Short screens (small laptop windows): tighten the vertical rhythm. */
@media (max-height: 700px) and (min-width: 601px) {
  .res-modal__dialog { padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .res-modal__steps { margin-bottom: 0.9rem; }
  .res-modal__title { font-size: 1.25rem; margin-bottom: 0.6rem; }
  .res-modal__day { height: clamp(32px, 6vh, 44px); }
  .res-modal__legend { margin-top: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .res-modal,
  .res-modal__dialog,
  .res-modal__panel.is-active,
  .res-modal__space-card,
  .res-modal__day,
  .res-modal__btn,
  .res-modal__nav-btn,
  .res-modal__close {
    animation: none !important;
    transition-duration: 1ms !important;
  }
  @starting-style {
    .res-modal, .res-modal__dialog { opacity: 1; transform: none; }
  }
}