/* ============================================================
   FOX 2.0 — Custom rooms booking widget
   Reuses base tokens from tokens.css and primitives from main.css.
   ============================================================ */

.fox-booking {
  max-width: 760px;
  margin: 0 auto;
  background: var(--c-cream);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
}

/* `hidden` attribute must always win over author display rules */
.fox-booking [hidden] { display: none !important; }

.fox-booking__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 640px) {
  .fox-booking__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fox-booking__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.fox-booking__field--full {
  grid-column: 1 / -1;
}

.fox-booking__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.fox-booking__input {
  width: 100%;
  background: var(--c-pure);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-sm);
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--c-ink);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.fox-booking__input:focus {
  outline: none;
  border-color: var(--c-green);
  box-shadow: 0 0 0 3px rgba(66, 157, 97, 0.15);
}
.fox-booking__input[readonly] {
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%238a8580" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
}

.fox-booking__hint {
  font-size: var(--text-sm);
  color: var(--c-ink-mute);
  font-style: italic;
}

/* Guest count cards */
.fox-booking__guests {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}
.fox-booking__guest {
  position: relative;
  background: var(--c-pure);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur) ease, background var(--dur) ease, color var(--dur) ease;
  text-align: center;
}
.fox-booking__guest:hover {
  border-color: var(--c-green);
}
.fox-booking__guest input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fox-booking__guest-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--c-ink);
  padding: 0.65rem 0;
  line-height: 1;
}
.fox-booking__guest:has(input:checked) {
  border-color: var(--c-green);
  background: var(--c-green);
}
.fox-booking__guest:has(input:checked) .fox-booking__guest-num {
  color: #fff;
}

/* Price summary panel */
.fox-booking__summary {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--c-cream-warm);
  border-radius: var(--r-sm);
}
.fox-booking__summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--c-ink-soft);
}
.fox-booking__summary-line strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  color: var(--c-ink);
}
.fox-booking__summary-note {
  margin: var(--s-3) 0 0;
  font-size: var(--text-xs);
  color: var(--c-ink-mute);
}

/* ---------- Add-ons step ---------- */
.fox-booking__addons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.fox-booking__addon {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--c-pure);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-sm);
}
.fox-booking__addon-name {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--c-ink);
  line-height: 1.2;
}
.fox-booking__addon-price {
  grid-column: 1;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--c-ink-soft);
}
.fox-booking__addon-controls {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.fox-booking .fox-booking__addon-qty-btn,
button.fox-booking__addon-qty-btn {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0;
  border: 1px solid var(--c-hairline);
  background: var(--c-cream);
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
  color: var(--c-ink);
  cursor: pointer;
  box-sizing: border-box;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  transition: background var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;
}
.fox-booking .fox-booking__addon-qty-btn:hover,
.fox-booking .fox-booking__addon-qty-btn:focus-visible {
  background: var(--c-green);
  border-color: var(--c-green);
  color: #fff;
  outline: none;
}
.fox-booking__addon-qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.fox-booking__addon-qty {
  min-width: 1.5ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--c-ink);
}
.fox-booking__addon-subtotal {
  min-width: 4ch;
  text-align: right;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .fox-booking__addon-controls { gap: var(--s-2); }
  .fox-booking__addon-subtotal { display: none; }
}

/* Actions row */
.fox-booking__actions {
  margin-top: var(--s-6);
  display: flex;
  justify-content: center;
}
.fox-booking__actions .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Error */
.fox-booking__error {
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  background: rgba(177, 71, 71, 0.08);
  border-left: 3px solid var(--c-error, #B14747);
  border-radius: var(--r-sm);
  color: var(--c-error, #B14747);
  font-size: var(--text-sm);
}

/* Back link on step 2 */
.fox-booking__back {
  background: transparent;
  border: 0;
  padding: 0 0 var(--s-5);
  color: var(--c-ink-soft);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fox-booking__back:hover {
  color: var(--c-ink);
}

/* Stripe Payment Element wrapper */
.fox-booking__payment {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-hairline);
}

/* Confirmation */
.fox-booking__step--confirm {
  text-align: center;
  padding: var(--s-6) 0;
}
.fox-booking__tick {
  width: 64px;
  height: 64px;
  color: var(--c-green);
  margin: 0 auto var(--s-5);
  display: block;
}
.fox-booking__step--confirm h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin: 0 0 var(--s-3);
}

/* Litepicker overrides — match Fox tokens */
.litepicker {
  font-family: var(--font-body) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-rise) !important;
  border: 1px solid var(--c-hairline) !important;
}
.litepicker .container__main {
  background: var(--c-cream) !important;
}
.litepicker .container__months {
  background: var(--c-cream) !important;
  border-radius: var(--r) !important;
}
.litepicker .container__months .month-item-header {
  font-family: var(--font-display);
  color: var(--c-ink);
}
.litepicker .container__days .day-item {
  color: var(--c-ink);
  border-radius: var(--r-sm);
}
.litepicker .container__days .day-item:hover {
  background-color: var(--c-cream-warm);
  color: var(--c-ink);
  box-shadow: none;
}
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date,
.litepicker .container__days .day-item.is-start-date.is-end-date {
  background-color: var(--c-green) !important;
  color: #fff !important;
}
.litepicker .container__days .day-item.is-in-range {
  background-color: var(--c-green-mute) !important;
  color: var(--c-ink) !important;
}
.litepicker .container__days .day-item.is-locked {
  color: var(--c-ink-mute);
  text-decoration: line-through;
}

/* Loading state on buttons (when setBusy is called from JS) */
.fox-booking__actions .btn[disabled]:not([data-orig-label]) {
  opacity: 0.45;
}
.fox-booking__actions .btn[data-orig-label] {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
  position: relative;
}

/* ---------- Mobile (≤ 640px) ---------- */
@media (max-width: 640px) {
  .fox-booking {
    padding: var(--s-5);
    border-radius: var(--r-sm);
  }
  /* Summary line: stack rate/total vertically if they don't fit comfortably */
  .fox-booking__summary-line {
    flex-wrap: wrap;
    row-gap: var(--s-2);
  }
  /* Buttons stretch to full width — easier tap target */
  .fox-booking__actions .btn {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
    min-height: 48px;
  }
  /* Larger "Back" target on touch */
  .fox-booking__back {
    padding: var(--s-2) var(--s-3) var(--s-5);
    margin-left: calc(var(--s-3) * -1);
    font-size: var(--text-base);
  }
  /* Guest cards: a touch taller so they hit the 44px target */
  .fox-booking__guest-num {
    padding: 0.85rem 0;
  }
}

/* ---------- Litepicker on mobile: never wider than viewport ---------- */
@media (max-width: 480px) {
  .litepicker {
    max-width: calc(100vw - var(--s-5) * 2) !important;
    left: var(--s-5) !important;
    right: var(--s-5) !important;
  }
  .litepicker .container__months {
    width: 100% !important;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fox-booking__guest,
  .fox-booking__input {
    transition: none;
  }
}