.re-booking-root { font-family: inherit; margin-bottom: 32px; }
/* Contain widths inside host container */
.re-booking-root, .re-booking-root * { box-sizing: border-box; max-width: 100%; }
.re-booking-controls { position: sticky; top: 0; z-index: 1; background: rgba(0,0,0,0.18); padding: 8px 10px; display: inline-flex; gap: 12px; align-items: center; border: none; border-radius: 6px; backdrop-filter: blur(3px); justify-self: start; width: max-content; max-width: 100%; }
.re-booking-control { display: inline-flex; flex-direction: column; font-size: 13px; color: #ddd; gap: 4px; }
.re-booking-select { appearance: none; padding: 8px 12px; min-width: 160px; height: 38px; line-height: 22px; color: #f0f0f0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; color-scheme: dark; }
.re-booking-select option { background: #1f2426; color: #f0f0f0; }
.re-booking-select:focus { outline: none; border-color: #28a745; box-shadow: 0 0 0 2px rgba(40,167,69,0.25); }
/* Green background for persons and location selects */
#re-booking-persons, #re-booking-location { background: #28a745; color: #fff; border-color: #24963e; }
.re-booking-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 12px; margin-top: 10px; }
.re-booking-left { display: grid; grid-template-rows: auto 1fr; gap: 8px; }
.re-booking-layout.re-booking-form-open { grid-template-columns: 1fr; }
.re-booking-layout.re-booking-form-open .re-booking-options { display: block; width: 100%; }

/* Calendar */
.re-booking-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.re-booking-cal-title { font-weight: 600; }
.re-booking-cal-nav { cursor: pointer; padding: 4px 8px; appearance: none; border: none; background: #565a5e; color: #fff; border-radius: 6px; }
.re-booking-calendar { max-width: 360px; background: rgba(255,255,255,0.02); border: none; border-radius: 6px; padding: 6px; }
.re-booking-calendar, .re-booking-options { box-sizing: border-box; }
.re-booking-options.is-stale, .re-booking-options.is-loading { filter: blur(2px) grayscale(0.2); opacity: 0.6; pointer-events: none; transition: filter 0.2s ease, opacity 0.2s ease; }
#re-booking-calendar.is-loading { opacity: 0.6; pointer-events: none; }
.re-booking-legend { margin-top: 10px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: #cfcfcf; font-size: 13px; }
.re-booking-legend--below-options { grid-column: 1 / -1; width: 100%; justify-content: center; }
.re-booking-legend-item { display: inline-flex; gap: 6px; align-items: center; }
.re-booking-legend-swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; border: 1px solid rgba(255,255,255,0.18); }
.re-booking-legend-swatch--green { background: #6fbe74; border-color: #5aa961; }
.re-booking-legend-swatch--yellow { background: #8a5a2b; border-color: #7a4f25; }
.re-booking-cal-grid { display: flex; flex-direction: column; gap: 2px; }
.re-booking-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.re-booking-cal-cell { border: 1px solid rgba(255,255,255,0.08); min-height: 30px; position: relative; padding: 2px; background: #2f3438; color: #e6e6e6; }
.re-booking-cal-dow { background: #3b3f43; font-weight: 600; min-height: 36px; display:flex; align-items:center; justify-content:center; color: #d0d0d0; }
.re-booking-cal-outside { opacity: 0.6; }
.re-booking-cal-empty { background: rgba(255,255,255,0.04); }
.re-booking-cal-day { cursor: pointer; }
.re-booking-cal-daynum { position: absolute; top: 4px; left: 6px; font-size: 12px; color: #e6e6e6; font-weight: 600; }
.re-booking-green { background: rgba(40,167,69,0.14); }
.re-booking-yellow { background: rgba(255,235,59,0.16); }
.re-booking-red { background: rgba(204,75,76,0.14); }
/* Calendar colors aligned to mockup: days with availability appear teal */
.re-booking-calendar .re-booking-green,
.re-booking-calendar .re-booking-yellow,
.re-booking-calendar .re-booking-red { background: #214b57; border-color: #2b5e6f; color: #e6e6e6; }
.re-booking-cal-selected { outline: 2px solid rgba(219,199,108,1); outline-offset: -2px; }
.re-booking-cal-selected { outline: 2px solid #28a745; outline-offset: -2px; }
.re-booking-cal-past { background: rgba(0,0,0,0.35) !important; color: #888 !important; filter: grayscale(0.9) opacity(0.6); pointer-events: none; }

/* Options */
.re-booking-empty { padding: 8px; color: #666; }
.re-booking-info { border: 1px solid rgba(255,255,255,0.12); background: rgba(64,102,124,0.12); color: #e6eef2; padding: 12px; border-radius: 8px; }
.re-booking-info-title { font-weight: 700; margin-bottom: 6px; color: #cfe5f0; }
.re-booking-info-text { font-size: 14px; }
.re-booking-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.re-booking-opt { position: relative; border: none; padding: 8px; background: transparent; border-radius: 6px; overflow: visible; box-sizing: border-box; }
.re-booking-opt--best { border-color: #28a745; box-shadow: 0 0 0 2px rgba(40,167,69,0.15) inset; }
.re-booking-opt-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: #e8f6ec; color: #145a2c; border: 1px solid #28a745; border-radius: 12px; padding: 2px 10px; font-size: 12px; white-space: nowrap; }
.re-booking-opt-head { display:flex; flex-direction: column; gap: 6px; margin-bottom: 8px; align-items: center; }
.re-booking-opt-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }
.re-booking-opt-title { font-weight: 700; font-size: 15px; color: #f0f0f0; }
.re-booking-opt-sub { color: #cfcfcf; font-size: 12px; text-align: center; }
.re-booking-opt-slots { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 6px; }
.re-booking-slot { display: block; width: 100%; text-align: center; padding: 6px 12px; border-radius: 0; color: #e6e6e6; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); font-size: 14px; line-height: 20px; }
.re-booking-slot .re-booking-slot-time { display: inline-block; }
.re-booking-slot.re-booking-green { background: #6fbe74; border-color: #5aa961; color: #fff; }
/* request (brown) */
.re-booking-slot.re-booking-yellow { background: #8a5a2b; border-color: #7a4f25; color: #fff; }
/* occupied (grey, strikethrough) */
.re-booking-slot.re-booking-red { background: #4b4f53; border-color: #5a5f64; color: #cfcfcf; filter: grayscale(0.6); cursor: default; pointer-events: none; }
.re-booking-slot.re-booking-red .re-booking-slot-time { text-decoration: line-through; text-decoration-thickness: 2px; }

/* Hide nav buttons by default (only shown in mobile media query) */
.re-booking-nav { display: none; }

/* Wrapper to anchor mobile arrows without scrolling with content */
.re-booking-options-wrap { position: relative; overflow: hidden; }

/* --- Promos when no slots available --- */
.re-promo { display: grid; gap: 12px; grid-column: 1 / -1; width: 100%; }
.re-promo-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: rgba(64,102,124,0.20); color: #e6eef2; border: 1px solid rgba(64,102,124,0.35); max-width: 100%; }
.re-promo-note-icon { width: 22px; height: 22px; border-radius: 50%; background: rgba(64,102,124,0.65); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.re-promo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.re-promo-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.re-promo-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.re-promo-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; flex: 1; text-align: center; }
.re-promo-cta { display: inline-block; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-weight: 700; text-align: center; margin-top: auto; }
.re-promo-cta--gold { border: 1px solid rgba(219,199,108,1); background: rgba(219,199,108,1); color: #111 !important; }
.re-promo-cta--blue { border: 1px solid rgba(64,102,124,0.8); background: rgba(64,102,124,0.35); color: #e6eef2; }
@media (max-width: 1100px) { .re-promo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .re-promo-cards { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .re-booking-layout { grid-template-columns: 1fr; }
}

/* Responsive columns for up to four side-by-side option cards */
@media (max-width: 1400px) {
  .re-booking-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .re-booking-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  /* Ensure full-width layout without overflow on small screens */
  .re-booking-root, .re-booking-layout, .re-booking-controls, .re-booking-options-wrap, .re-booking-options, .re-booking-calendar { width: 100%; box-sizing: border-box; margin: 0; }
  .re-booking-layout, .re-booking-controls, .re-booking-options-wrap, .re-booking-options, .re-booking-calendar { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; }
  .re-booking-controls { max-width: 100%; }
  .re-booking-calendar { max-width: 100%; }
  .re-booking-options { grid-template-columns: 1fr; }
  /* Prevent any child from exceeding container width */
  #re-booking-root * { max-width: 100%; }

  /* Hide arrows while in form mode */
  .re-booking-layout.re-booking-form-open .re-booking-nav { display: none !important; }
}

/* --- Mobile fixes: controls and carousel --- */
@media (max-width: 700px) {
  /* Prevent controls from overflowing their container on small screens */
  .re-booking-controls { flex-wrap: wrap; gap: 8px; }
  .re-booking-control { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .re-booking-select { min-width: 0; width: 100%; max-width: 100%; }

  /* Turn options into a horizontal carousel with swipe + snap */
  .re-booking-options { position: relative; display: flex; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 0; padding: 0; margin: 0; overscroll-behavior-x: contain; }
  .re-booking-opt { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .re-booking-opt-badge { z-index: 2; top: 6px; }

  /* Arrow buttons (overlay) */
  .re-booking-nav { display: inline-flex; position: absolute; top: var(--re-nav-top, 50%); transform: translateY(-50%); width: 34px; height: 68px; border-radius: 999px; border: 1px solid rgba(219,199,108,1); background: rgba(219,199,108,1); color: #fff; align-items: center; justify-content: center; z-index: 20; pointer-events: auto; }
  .re-booking-nav--prev { left: 6px; right: auto; }
  .re-booking-nav--next { right: 6px; left: auto; }
  .re-booking-nav:disabled, .re-booking-nav.is-hidden { opacity: 0.35; pointer-events: none; }
}

/* --- Booking form (single column) --- */
.re-booking-form-wrap { background: rgba(255,255,255,0.03); border: none; border-radius: 8px; padding: 16px; max-width: none; width: 100%; }
.re-booking-form h3 { margin: 0 0 8px 0; }
.re-booking-summary { border: none; background: rgba(64,102,124,0.10); padding: 8px; border-radius: 6px; margin-bottom: 10px; }
.re-booking-summary { display: grid; grid-template-columns: 1fr; gap: 10px; }
.re-summary-infos { display: grid; grid-template-columns: 1fr; gap: 4px; }
.re-summary-anlass { display: flex; flex-direction: column; gap: 6px; }
.re-summary-price { margin-top: 4px; }
@media (min-width: 720px) {
  .re-booking-summary { grid-template-columns: 1fr 1fr; align-items: start; }
  .re-summary-infos { grid-template-columns: 1fr; }
}
.re-booking-hint { background: rgba(255,235,59,0.16); border: 1px solid #FFEB3B; color: #f7f1c0; padding: 8px; border-radius: 6px; margin-bottom: 10px; }
.re-booking-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.re-booking-field input:not([type=checkbox]):not([type=radio]), .re-booking-field select { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: #f0f0f0; }
.re-booking-field textarea { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: #f0f0f0; }
.re-booking-field input[type="checkbox"], .re-booking-field input[type="radio"] { width: auto; padding: 0; border: none; background: transparent; }
.re-anlass-group { display: flex; flex-wrap: wrap; gap: 8px; }
.re-anlass-btn { position: relative; display: inline-flex; align-items: center; }
.re-anlass-btn input { position: absolute; opacity: 0; pointer-events: none; }
.re-anlass-btn span { display: inline-block; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; background: rgba(255,255,255,0.04); color: #f0f0f0; font-weight: 600; }
.re-anlass-btn.is-selected span, .re-anlass-btn input:checked + span { border-color: rgba(219,199,108,1); background: rgba(219,199,108,0.18); color: #fff; }
.re-upsales { display: grid; grid-template-columns: 1fr; gap: 6px; }
/* allow badges to overflow above options */
.re-upsales { overflow: visible; }
@media (min-width: 720px) {
  .re-upsales { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.re-upsale-hot { position: relative; border: 1px solid rgba(219,199,108,0.7); border-radius: 6px; padding: 6px; background: rgba(219,199,108,0.08); }
.re-upsale-hot .re-upsale-tag { position: absolute; top: -20px; left: 6px; font-weight: 700; font-size: 12px; color: rgba(219,199,108,1); pointer-events: none; }
.re-upsale-hot { border: 1px solid rgba(219,199,108,0.7); border-radius: 6px; padding: 6px; background: rgba(219,199,108,0.08); }
.re-booking-actions { display: flex; justify-content: flex-start; }
.re-booking-submit { appearance: none; border: 1px solid rgba(219,199,108,1); background: rgba(219,199,108,1); color: #111; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 700; }
.re-booking-ok { border: 1px solid rgba(40,167,69,0.5); background: rgba(40,167,69,0.12); color: #e9f7ef; padding: 12px; border-radius: 8px; }

/* Two-column rows for paired fields */
.re-booking-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) {
  .re-booking-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .re-upsale-hot { margin-top: 10px; }
}

/* Inline checkboxes left of text */
.re-label-inline { display: inline; }
.re-label-inline input[type="checkbox"] { margin: 0 8px 0 0; vertical-align: text-top; }

/* Controls: back button + disabled selects state */
.re-booking-back { margin-left: auto; appearance: none; border: 1px solid rgba(219,199,108,1); background: rgba(219,199,108,0.12); color: #e6e6e6; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: 700; }
.re-booking-select:disabled { opacity: 0.55; cursor: not-allowed; }
.re-inline-link { color: #dbc76c; text-decoration: none; }
.re-inline-link:hover { text-decoration: underline; }

/* (removed) payment buttons kept for reference in case needed later */

/* --- Woo pay form adjustments --- */
/* Reduce oversized gateway logos; Stripe/PayPal images sometimes come as large <img> in content */
#re-booking-options .wc_payment_methods img { max-width: 56px; max-height: 28px; height: auto; width: auto; object-fit: contain; margin: 0 6px; }
#re-booking-options .wc_payment_methods .wc-stripe-card-icons img { max-width: 44px; max-height: 24px; }
/* Align card brand icons in a row and avoid block expansion */
#re-booking-options .wc_payment_methods .wc-stripe-card-icons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Constrain payment method rows */
#re-booking-options .wc_payment_methods.payment_methods.methods { display: grid; gap: 8px; }