/* ==========================================================================
   SUNSET RETREAT — DIRECT BOOKING PAGE
   --------------------------------------------------------------------------
   Styles book.html only. Loaded after styles.css so it inherits the site's
   tokens (--primary-accent-a11y, --bg-cream, --font-serif, ...).

   Two jobs:
     1. Lay out the booking page itself.
     2. Tame the Beds24 widget, which renders as real DOM — no iframe, no
        shadow root — so ordinary CSS reaches it. Where !important appears
        below it is because the widget injects its own <style> block at
        runtime, i.e. after this file, and wins ties on source order.

   Do not use --primary-accent (#D97745) for anything carrying text. It is
   3.15:1 on white and fails AA. --primary-accent-a11y (#B85529) is 4.81:1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page header band

   Kept shallow on purpose. The site header is sticky, not fixed, so this
   needs no clearance padding — and every pixel spent here pushes the
   calendar further down. The header, this band and .booking-main's top
   padding are the whole budget before the calendar has to be on screen.
   -------------------------------------------------------------------------- */
.booking-hero {
  background: linear-gradient(160deg, var(--bg-twilight) 0%, #241C2E 100%);
  color: var(--text-light);
  padding: 34px 0 30px;
  text-align: center;
}

/* styles.css colours this terracotta, which is for light grounds — on the
   dark band it needs the gold. */
.booking-hero .section-eyebrow {
  color: var(--accent-gold);
  margin-bottom: 8px;
}

.booking-hero h1 {
  color: var(--text-light);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  margin-bottom: 6px;
}

.booking-hero .booking-hero-lede {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(247, 244, 240, 0.75);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   2. Two-column layout — calendar and prose left, booking card right
   -------------------------------------------------------------------------- */
.booking-main {
  padding: 32px 0 96px;
}

.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 40px;
  align-items: start;
}

.booking-panel {
  background: var(--bg-paper);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
  /* A flex item defaults to min-width:auto, which means it refuses to shrink
     below its widest content. The rates table is wider than a phone, so
     without this the panel stayed 500px, pushed the page to 518, and body's
     overflow-x:hidden quietly clipped the last column off the screen where
     nobody could reach it. Zero lets the panel shrink so the table scrolls
     inside its own wrapper instead. */
  min-width: 0;
}

.booking-panel:last-child { margin-bottom: 0; }

.booking-panel h2 {
  font-size: 1.9rem;
  margin-bottom: 8px;
}

.booking-panel h3 {
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.booking-panel > p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   3. Availability calendar
   -------------------------------------------------------------------------- */
/* Reserves the calendar's rendered height so the widget cannot shove the
   page down when it hydrates. Re-measure if numMonth changes. */
.calendar-slot {
  min-height: 330px;
}

/* Tracks the two clicks: prompts for arrival, then departure, then reports
   the stay. Driven by book.js -> enableRangeSelection(). */
.calendar-hint {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-cream);
  border-left: 3px solid var(--primary-accent-a11y);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.calendar-hint strong { color: var(--text-main); }

.calendar-reset {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  font: inherit;
  color: var(--primary-accent-a11y);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.calendar-reset:hover { color: var(--primary-hover-a11y); }

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
  list-style: none;
}

.calendar-legend li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.legend-swatch {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-light);
  flex-shrink: 0;
}

/* Swatches mirror the colours passed to the widget in book.js. Change one,
   change the other. */
.legend-available   { background: #FFFFFF; border-color: #C9BFB2; }
.legend-unavailable { background: #F6F1EA; border-color: #E4DACB; }
.legend-request     { background: #FAF6EE; border-color: #A34A22; }


/* --------------------------------------------------------------------------
   4. Booking card (sticky sidebar — the money position)
   -------------------------------------------------------------------------- */
.booking-sidebar {
  position: sticky;
  top: 96px;
}

.booking-card {
  background: var(--bg-paper);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  /* Anchor target for every "Book Your Stay" link. Clears the sticky header,
     which would otherwise sit on top of the card heading. */
  scroll-margin-top: 100px;
}

.booking-card-head {
  padding: 22px 24px 18px;
  background: var(--bg-cream);
  border-bottom: 1px solid var(--border-light);
}

.booking-card-head h2 {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.booking-card-head p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.booking-card-body {
  padding: 20px 24px 8px;
}

/* Reserved height for the BookingBox (~260px rendered with labels on and both
   date pickers), so it cannot shove the page down as it hydrates. Card mode
   only — in enquiry mode nothing mounts there and the reserve would just be
   a hole. Re-measure if showLabels or dateSelection change. */
body.mode-book .booking-card-body {
  min-height: 260px;
}

/* --------------------------------------------------------------------------
   4b. Enquiry form (mode: 'enquiry')

   Sits under the Beds24 date fields inside the booking card, so it has to
   read as one control rather than two stacked widgets.
   -------------------------------------------------------------------------- */
/* Beds24's own submit button goes to its checkout. In enquiry mode the form
   below owns the action, and two buttons would be two different promises. */
body.mode-enquiry #bookingBox .book-btn {
  display: none !important;
}

.enquiry-form {
  padding-top: 6px;
}

/* Reports the calendar's choice back inside the card, so the guest can see
   what they are about to send without scrolling back up. */
.enquiry-dates {
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-cream);
  border-left: 3px solid var(--primary-accent-a11y);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.enquiry-dates strong { color: var(--text-main); }

.enquiry-dates-empty {
  font-style: italic;
}

select.enquiry-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  /* room for the chevron */
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23685E6E' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.enquiry-label {
  display: block;
  /* 0.72rem rendered at 11.5px, which is small for a form label someone is
     filling in one-handed. */
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.enquiry-label span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0.75;
}

.enquiry-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-main);
  background: var(--bg-cream);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  margin-bottom: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.enquiry-input {
  resize: vertical;
  min-height: 60px;
}

.enquiry-input:focus {
  outline: none;
  border-color: var(--primary-accent-a11y);
  background: var(--bg-paper);
  box-shadow: 0 0 0 3px rgba(184, 85, 41, 0.16);
}

/* Reads as a quiet alternative, not a second primary action. */
.enquiry-toggle {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--primary-accent-a11y);
  text-decoration: underline;
  cursor: pointer;
}

.enquiry-toggle:hover { color: var(--primary-hover-a11y); }

.enquiry-email {
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
  margin-top: 6px;
}

.enquiry-whatsapp-note {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

.enquiry-submit {
  margin-top: 4px;
}

.enquiry-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Off-screen rather than display:none — a few bots skip hidden fields, and
   the point is that they fill it in. */
.enquiry-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry-status {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.enquiry-status.is-error {
  color: #A3341F;
}

.enquiry-sent {
  padding: 8px 0 4px;
}

.enquiry-sent strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-main);
}

.enquiry-sent p {
  font-size: 0.92rem;
  color: var(--text-muted);
}

.booking-trust {
  list-style: none;
  padding: 4px 24px 24px;
}

.booking-trust li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: 0.87rem;
  color: var(--text-main);
  border-top: 1px solid var(--border-light);
}

/* Set by book.js on whichever item survived the mode gating. */
.booking-trust li.is-first { border-top: 0; }

.booking-trust i {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary-accent-a11y);
}

.booking-trust span { color: var(--text-muted); }
.booking-trust strong { display: block; color: var(--text-main); font-weight: 600; }

/* --------------------------------------------------------------------------
   Rates table. A guest who has to ask the price usually goes back to the
   listing site, where it is already on screen.
   -------------------------------------------------------------------------- */
/* Four nights across, three party sizes down. Each cell carries the direct
   rate and the Booking.com rate it undercuts, so the saving is visible without
   the guest doing arithmetic. */
.rate-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border-light);
}

.rate-grid {
  width: 100%;
  border-collapse: collapse;
}

.rate-grid th,
.rate-grid td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--border-light);
  text-align: right;
  vertical-align: baseline;
}

.rate-grid thead th {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 9px;
}

/* The first column holds the night names, which are left-aligned in the body.
   Without this its heading inherits the right-alignment the price columns
   need, and floats away from the column it belongs to. */
.rate-grid thead th:first-child {
  text-align: left;
}

.rate-grid tbody th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
  padding-left: 0;
  white-space: nowrap;
}

.rate-grid tbody th em {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}

.rate-grid td b {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.15;
}

/* The price they would pay elsewhere. Quiet, but legible — a struck-through
   number nobody can read is doing no work. */
.rate-grid td s {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.rate-grid .rate-package th,
.rate-grid .rate-package td {
  border-bottom: none;
  background: var(--bg-cream);
}

.rate-grid .rate-package td b { color: var(--primary-accent-a11y); }

.rate-grid .rate-package th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.rate-grid .rate-package td:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.rate-legend {
  margin-top: 14px;
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.rate-legend b { color: var(--text-main); }

.rate-note {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-cream);
  border-left: 3px solid var(--primary-accent-a11y);
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. Extras enquiry list
   -------------------------------------------------------------------------- */
.extras-list {
  list-style: none;
  margin-bottom: 24px;
}

.extras-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

.extras-list li:last-child { border-bottom: 0; }

.extras-list i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--primary-accent-a11y);
}

.extras-list strong { display: block; }
.extras-list span { color: var(--text-muted); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   6. Policy / FAQ
   -------------------------------------------------------------------------- */
.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 40px;
}

.policy-item h3 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.policy-item p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   7. Fallback card — shown while direct booking is not configured, or if
      the widget scripts fail. See book.js -> renderFallback().
   -------------------------------------------------------------------------- */
.booking-fallback-card {
  padding: 4px 0 8px;
}

.booking-fallback-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.booking-fallback-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 18px;
}

/* Claims that are only true of a direct booking. Marked [data-direct-only]
   and shipped with the hidden attribute; book.js strips it once the widgets
   are actually up, so the page can never promise "no commission" while it is
   pointing at Airbnb. Hiding via the attribute rather than a class means each
   element keeps its own display value (flex, inline, block) when revealed.

   The !important is needed because a class rule like .direct-perks{display:flex}
   otherwise beats the user agent's [hidden] rule. */
[hidden] { display: none !important; }

body.booking-fallback .calendar-slot,
body.booking-fallback .booking-card-body {
  min-height: 0;
}

/* Both describe a calendar that isn't on the page yet, and the sync note
   describes a booking system that isn't live yet. */
body.booking-fallback .calendar-legend {
  display: none;
}

/* --------------------------------------------------------------------------
   7b. Demo mode notice.
   -------------------------------------------------------------------------- */

.demo-note {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-cream);
  border-left: 3px solid var(--accent-gold);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ==========================================================================
   8. BEDS24 WIDGET OVERRIDES
   The widget ships its own stylesheet inside bookWidget.min.js and injects
   a second <style> block at init. Both land after this file, so the rules
   below need !important to bite.
   ========================================================================== */

/* Our cards already supply background, border, padding and shadow. */
#bookingBox .book-widget-bg,
#availabilityCalendar .book-widget-bg {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* The widget caps itself at 320px above 768px. We want the card width. */
#bookingBox .book-widget-size,
#bookingBox .book-widget-size-all,
#availabilityCalendar .book-widget-size,
#availabilityCalendar .book-widget-size-all {
  max-width: 100% !important;
}

/* The widget hard-codes Lato. Use the site's face instead. */
#bookingBox .book-widget,
#bookingBox .book-widget label,
#bookingBox .book-widget input,
#bookingBox .book-widget select,
#bookingBox .book-widget button,
#availabilityCalendar .book-widget,
#availabilityCalendar .book-widget label,
.book-widget.book-datepicker {
  font-family: var(--font-sans) !important;
}

/* Widget titles are supplied by our own headings — hide the duplicates. */
#bookingBox .book-form-title,
#availabilityCalendar .book-form-title {
  display: none !important;
}

/* Labels: match the small-caps treatment used elsewhere on the site. */
#bookingBox .book-control-label {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  padding-top: 12px !important;
}

/* Inputs and selects */
#bookingBox .book-form-control {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-sm) !important;
  background-color: var(--bg-cream) !important;
  color: var(--text-main) !important;
  padding: 11px 12px !important;
  height: auto !important;
  box-shadow: none !important;
  width: 100% !important;
}

#bookingBox .book-form-control:focus {
  outline: none !important;
  border-color: var(--primary-accent-a11y) !important;
  background-color: var(--bg-paper) !important;
  box-shadow: 0 0 0 3px rgba(184, 85, 41, 0.16) !important;
}

/* The widget parks the submit button in the 7-wide half of the label/field
   grid. On a card this narrow it should span the whole thing. */
#bookingBox .book-col-offset-5 {
  margin-left: 0 !important;
  width: 100% !important;
}

/* Submit button — the site's pill primary, not Bootstrap's block. */
#bookingBox .book-btn {
  width: 100% !important;
  border-radius: var(--radius-full) !important;
  background-color: var(--primary-accent-a11y) !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 14px 24px !important;
  margin-top: 8px !important;
  transition: var(--transition-normal);
  text-shadow: none !important;
  background-image: none !important;
}

#bookingBox .book-btn:hover,
#bookingBox .book-btn:focus {
  background-color: var(--primary-hover-a11y) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* The advanced-search disclosure is for multi-property accounts. One cabin,
   one room — it has nothing to offer here. */
#bookingBox .book-advancedsearch,
#availabilityCalendar .book-advancedsearch {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8b. The calendars
   Two of them: the inline one inside #availabilityCalendar, and the popup
   the check-in / check-out fields open. The popup is appended to <body>, so
   it cannot be scoped to a parent — .book-widget.book-datepicker is the
   handle the widget gives us.
   -------------------------------------------------------------------------- */
#availabilityCalendar .ui-datepicker-inline,
#availabilityCalendar .book-datepicker {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#availabilityCalendar .ui-datepicker .ui-datepicker-group {
  padding: 0 8px;
}

#availabilityCalendar .ui-datepicker-multi .ui-datepicker-group table {
  width: 100%;
}

/* Both calendars carry .book-datepicker — the inline one on its wrapper, the
   popup on the datepicker element itself — so one descendant selector reaches
   both. The #availabilityCalendar twins below are not redundant: Beds24
   injects its own rules scoped by element id, and only an id in the selector
   outranks them on the inline calendar. */
.book-datepicker .ui-datepicker-header,
#availabilityCalendar .ui-datepicker-header {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-radius: 0 !important;
  padding-bottom: 10px !important;
  margin-bottom: 6px;
}

.book-datepicker .ui-datepicker-title,
#availabilityCalendar .ui-datepicker-title {
  font-family: var(--font-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

.book-datepicker .ui-datepicker-calendar th,
#availabilityCalendar .ui-datepicker th {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  padding: 8px 0 !important;
}

.book-datepicker .ui-datepicker-calendar td,
#availabilityCalendar .ui-datepicker td {
  padding: 2px !important;
}

.book-datepicker .ui-datepicker-calendar td .ui-state-default,
#availabilityCalendar .ui-datepicker td .ui-state-default {
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  padding: 9px 4px !important;
  text-align: center !important;
  font-size: 0.9rem !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Free nights read as clickable; taken nights read as flat and inert. The
   colours themselves come from book.js — Beds24 paints the state classes and
   we only add the affordance.

   The td. qualifier is not decoration: it outranks the rule directly above,
   which sets `border: 1px solid transparent !important` and would otherwise
   swallow these. */
.book-datepicker .ui-datepicker-calendar td.ui-state-available > .ui-state-default,
#availabilityCalendar .ui-datepicker td.ui-state-available > .ui-state-default {
  border-color: #C9BFB2 !important;
  cursor: pointer;
  font-weight: 600 !important;
}

.book-datepicker .ui-datepicker-calendar td.ui-state-available > .ui-state-default:hover,
#availabilityCalendar .ui-datepicker td.ui-state-available > .ui-state-default:hover {
  background: var(--primary-accent-a11y) !important;
  border-color: var(--primary-accent-a11y) !important;
  color: #FFFFFF !important;
}

.book-datepicker .ui-datepicker-calendar td.ui-state-reserved > .ui-state-default,
#availabilityCalendar .ui-datepicker td.ui-state-reserved > .ui-state-default {
  text-decoration: line-through;
  cursor: not-allowed;
}

/* The day the guest has chosen, in the popup the date fields open. jQuery
   UI's base theme paints this grey, which reads as "disabled" on a date
   that is anything but.

   Scoped to #ui-datepicker-div — the popup — and not to the availability
   calendar. In an inline datepicker jQuery UI treats today as the selected
   day from the moment it renders, and a filled accent cell there reads as
   an arrival date the guest picked rather than one they still have to.

   Qualified with td.ui-state-available because .ui-state-active lands on
   today whether or not today is bookable. */
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-available > .ui-state-active {
  background: var(--primary-accent-a11y) !important;
  border-color: var(--primary-accent-a11y) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Today in the availability calendar: marked, not selected. */
#availabilityCalendar .ui-datepicker td.ui-datepicker-today.ui-state-available > .ui-state-default {
  border-color: var(--primary-accent-a11y) !important;
  color: var(--primary-accent-a11y) !important;
  font-weight: 700 !important;
}

/* Today's hover needs restating at this weight. The generic available:hover
   rule above scores the same (1,4,1) as the rule directly above this one, so
   source order decides: hover supplied the accent background while today kept
   the accent text colour, and the date turned into a blank orange square. */
#availabilityCalendar .ui-datepicker td.ui-datepicker-today.ui-state-available > .ui-state-default:hover {
  background: var(--primary-accent-a11y) !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   Range selection — the arrival/departure classes book.js hangs on the cells.

   The .ui-datepicker .ui-datepicker-calendar chain is here to reach (1,4,1),
   matching the availability, hover and today rules above so that source order
   decides and these, coming last, win. Qualifying on Beds24's own state
   classes instead would not work: the final selectable day of a range is
   often .ui-state-reserved, since you may check out on a booked date.
   -------------------------------------------------------------------------- */
#availabilityCalendar .ui-datepicker .ui-datepicker-calendar td.is-range-start > .ui-state-default,
#availabilityCalendar .ui-datepicker .ui-datepicker-calendar td.is-range-start > .ui-state-default:hover,
#availabilityCalendar .ui-datepicker .ui-datepicker-calendar td.is-range-end > .ui-state-default,
#availabilityCalendar .ui-datepicker .ui-datepicker-calendar td.is-range-end > .ui-state-default:hover {
  background: var(--primary-accent-a11y) !important;
  border-color: var(--primary-accent-a11y) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

#availabilityCalendar .ui-datepicker .ui-datepicker-calendar td.is-in-range > .ui-state-default {
  background: rgba(184, 85, 41, 0.10) !important;
  border-color: rgba(184, 85, 41, 0.38) !important;
  color: var(--text-main) !important;
  text-decoration: none !important;
  cursor: pointer;
}

#availabilityCalendar .ui-datepicker .ui-datepicker-calendar td.is-in-range > .ui-state-default:hover {
  background: var(--primary-accent-a11y) !important;
  border-color: var(--primary-accent-a11y) !important;
  color: #FFFFFF !important;
}

/* Beyond the first booked night after arrival — you cannot stay through it. */
#availabilityCalendar .ui-datepicker .ui-datepicker-calendar td.is-out-of-range > .ui-state-default {
  opacity: 0.3 !important;
  cursor: not-allowed;
}

/* Popup datepicker on the check-in / check-out fields */
.book-widget.book-datepicker,
#ui-datepicker-div.book-widget {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--bg-paper) !important;
  padding: 12px !important;
  z-index: 900;
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Single column, but the reading order has to be calendar, then booking
     card, then the explanatory panels — and those three live in two
     different column wrappers. display:contents dissolves the wrappers so
     all of them become siblings that can be ordered against each other. */
  .booking-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .booking-col-main,
  .booking-sidebar {
    display: contents;
  }

  .booking-panel {
    margin-bottom: 0;      /* the flex gap does this now */
    order: 3;
  }

  #availability { order: 1; }
  .booking-card { order: 2; }
}

@media (max-width: 767px) {
  .booking-hero {
    padding: 26px 0 24px;
  }

  .booking-main {
    padding: 24px 0 64px;
  }

  .booking-panel {
    padding: 24px 20px;
  }

  .calendar-slot {
    min-height: 300px;
  }

  .policy-grid {
    grid-template-columns: 1fr;
  }

  /* Stacked months would double the page height on a phone; book.js already
     drops numMonth to 1, this catches an orientation change. */
  #availabilityCalendar .ui-datepicker-multi .ui-datepicker-group {
    width: 100% !important;
    float: none !important;
  }
}


/* Below 640px the four columns cannot fit without either crushing the prices
   or forcing the page sideways, and a price table you have to scroll is a
   price table people give up on. So it stops being a table and becomes one
   block per night, each price labelled with the party size it belongs to. */
@media (max-width: 640px) {
  .rate-grid,
  .rate-grid tbody,
  .rate-grid tr,
  .rate-grid td,
  .rate-grid tbody th {
    display: block;
    width: 100%;
  }

  .rate-grid thead {
    /* The column headings become per-cell labels below, so this would only
       repeat them. Clipped rather than display:none so it stays in the
       accessibility tree for anyone reading the table with a screen reader. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .rate-grid tr {
    padding: 6px 0 12px;
    border-bottom: 1px solid var(--border-light);
  }

  .rate-grid tbody th {
    border-bottom: none;
    padding: 10px 0 6px;
    font-size: 1rem;
  }

  .rate-grid td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: none;
    padding: 5px 0;
    text-align: right;
  }

  .rate-grid td::before {
    content: attr(data-label);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-muted);
    text-align: left;
  }

  /* Three flex items — the label, the price and the price it undercuts —
     would otherwise spread across the row and leave the figures wandering.
     Pushing the pair right keeps every price in one column. */
  .rate-grid td b {
    display: inline;
    font-size: 1.15rem;
    margin-left: auto;
  }

  .rate-grid td s {
    margin-left: 8px;
    min-width: 3.4em;
    text-align: right;
  }

  .rate-grid .rate-package th,
  .rate-grid .rate-package td {
    background: none;
  }

  .rate-grid .rate-package {
    background: var(--bg-cream);
    border-radius: var(--radius-sm);
    padding: 6px 14px 12px;
    border-bottom: none;
  }
}

.rate-legend {
  margin-bottom: 14px;
}

.rate-legend-foot {
  margin-top: 12px;
  margin-bottom: 0;
}