* { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'museo-sans', sans-serif; background: #f5f3ef; color: #333; }

  .fake-page {
    padding: 60px 40px; max-width: 1000px; margin: 0 auto;
    transition: filter 0.3s;
  }
  .fake-page.dimmed { filter: blur(2px); opacity: 0.3; pointer-events: none; }
  .fake-page h1 { font-family: 'filosofia', serif; font-size: 36px; font-weight: 400; margin-bottom: 12px; }
  .fake-page .subtitle { font-family: 'filosofia', serif; color: #999; font-size: 16px; font-style: italic; margin-bottom: 30px; }
  .fake-page p { color: #666; line-height: 1.8; font-size: 15px; max-width: 650px; }
  .fake-page .fake-img {
    width: 100%; height: 320px; background: #d5cfc5; margin-bottom: 30px;
    display: flex; align-items: center; justify-content: center;
    color: #b0a898; font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  }
  .book-trigger {
    display: inline-block; margin-top: 24px; padding: 14px 36px;
    background: #8b7355; color: #fff; border: none;
    font-family: 'museo-sans', sans-serif;
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s;
  }
  .book-trigger:hover { background: #7a644a; }

  .modal-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,0.6);
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
    /* 16px breathing room around the modal at narrow-but-not-fullscreen
       viewports (481–579px). Dropped to 0 at ≤480px where the modal
       goes truly edge-to-edge. See step 13 @media block at end of file. */
    padding: 16px;
  }
  .modal-overlay.open { display: flex; }
  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
  @keyframes slideUp { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }

  .modal {
    background: #f9f6f1;
    /* Fills available width inside the overlay (minus its padding) up to
       580px. Below a ~612px viewport the modal is narrower than its cap
       and sits as a contained card; above, it's a 580px card centred in
       more backdrop. At ≤480px this is overridden to fullscreen — see
       step 13 @media block at end of file. */
    width: 100%; max-width: 580px;
    max-height: 90vh; overflow-y: auto;
    /* Prevent scroll chaining — when touch-scroll inside the modal
       reaches its limit, don't propagate to the page behind it. Fixes
       the mobile case where tapping a short panel (e.g. simple-contact)
       and flicking up would briefly scroll the body beneath. */
    overscroll-behavior: contain;
    box-shadow: 0 25px 80px rgba(0,0,0,0.3);
    border-top: 4px solid #8b7355;
    animation: slideUp 0.4s ease;
  }
  .modal-header {
    background: #8b7355; color: #fff;
    /* Extra right padding reserves clear space for the absolute-positioned
       currency selector (step 14) and the floated close button, preventing
       long lodge/package titles from running under either. */
    padding: 28px 112px 24px 40px;
    position: relative; /* step 14: anchors .currency-selector */
  }
  .modal-close {
    /* Absolute-positioned so widening the header's right padding (to reserve
       space for the currency selector) doesn't push the close button inward
       along with the content box. Fixed position at the right edge. */
    position: absolute;
    top: 24px;
    right: 40px;
    background: none; border: none;
    font-size: 22px; color: rgba(255,255,255,0.6); cursor: pointer;
    padding: 0; line-height: 1;
    z-index: 2;
  }
  .modal-close:hover { color: #fff; }
  .modal-header h2 {
    font-family: 'filosofia', serif; font-size: 24px; font-weight: 400; margin-bottom: 2px;
  }
  .modal-header .lodge-sub {
    font-family: 'filosofia', serif;
    color: rgba(255,255,255,0.6); font-size: 13px; font-style: italic;
  }

  /* ============ CURRENCY SELECTOR (step 14) ============ */
  /* Sits top-right in .modal-header, left of the floated close button.
     Hidden entirely when window.widgetExchange state is 'unusable'
     (no rates, or rates > 30 days old), or on A2/B2 simple-contact panels
     where no rate is displayed. */
  .currency-selector {
    position: absolute;
    top: 26px;
    right: 70px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    z-index: 2;
  }
  .currency-selector[hidden] { display: none; }

  .cs-select {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.45);
    color: #fff;
    padding: 5px 26px 5px 10px;
    font-family: 'museo-sans', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 2px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Custom caret — inline SVG arrow, white to match header text */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23ffffff'/></svg>");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 9px 6px;
    transition: background-color 0.2s;
  }
  .cs-select:hover { background-color: rgba(255,255,255,0.22); }
  .cs-select:focus {
    outline: none;
    border-color: rgba(255,255,255,0.9);
  }
  .cs-select option { background: #ffffff; color: #333; }
  .cs-select optgroup { background: #ffffff; color: #8b7355; font-style: italic; }

  /* Stale-rates indicator — small amber dot overlaid on the selector's
     top-right corner when exchange rates are 7–30 days old. Discoverable
     but non-disruptive; the full "rates are X days old" notice appears
     inside the dropdown as an optgroup label when opened. */
  .cs-stale-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c4953a; /* amber — matches .room-status.limited elsewhere */
    border: 1.5px solid #8b7355; /* blends into header surround */
    z-index: 3;
    pointer-events: none;
  }
  .cs-stale-dot[hidden] { display: none; }

  /* ============ APPROX. CONVERSION LINES (step 14) ============ */
  /* Secondary display of the user's local currency alongside the native rate.
     Two forms: .approx-line (stacked block, for room cards + summary cards)
     and .approx-inline (parenthetical, for Flow C rate-context prose).
     Title attribute carries the tooltip explanation. */
  .approx-line {
    display: block;
    font-family: 'museo-sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #9a8e7e;
    font-style: italic;
    letter-spacing: 0;
    cursor: help;
    margin-top: 2px;
    line-height: 1.4;
  }
  .approx-line[hidden] { display: none; }
  .approx-inline {
    font-family: 'filosofia', serif;
    font-size: 13px;
    color: #9a8e7e;
    font-style: italic;
    font-weight: 400;
    cursor: help;
  }
  .approx-inline[hidden] { display: none; }

  /* Smaller in alt-card context where all text is already compact */
  .alt-right .approx-line {
    font-size: 10px;
    margin-top: 1px;
  }
  /* Within rate-context (Flow C prose), override any inherited bold from
     the surrounding rate-highlight span if it sits near one */
  .rate-context .approx-inline {
    font-weight: 400;
    color: #9a8e7e;
  }
  /* Flow D package rate — approx sits between big amount and small unit */
  .pkg-rate-display .approx-line {
    margin: 4px 0 2px;
  }

  .modal-body { padding: 28px 40px 32px; }

  /* Panels */
  .panel { display: none; position: relative; }
  .panel.active { display: block; }
  
  /* Panel transitions */
  @keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  .panel.slide-right { animation: slideInRight 0.3s ease; }
  .panel.slide-left { animation: slideInLeft 0.3s ease; }
  .panel.scale-in { animation: scaleIn 0.35s ease; }

  /* Back button */
  .back-btn {
    background: none; border: none; color: #8b7355;
    font-family: 'museo-sans', sans-serif; font-size: 12px;
    letter-spacing: 1px; cursor: pointer; margin-bottom: 20px;
    padding: 0; transition: color 0.2s;
  }
  .back-btn:hover { color: #5a4a38; }

  /* ===================== PANEL 1: AVAILABILITY ===================== */
  .form-label {
    display: block; font-size: 11px; letter-spacing: 1.5px;
    text-transform: uppercase; color: #8b7355; margin-bottom: 6px;
  }
  .date-row { display: flex; gap: 16px; margin-bottom: 20px; }
  .date-row > div { flex: 1; }
  .date-input {
    width: 100%; padding: 12px 14px;
    border: 1px solid #d4c9b8; font-family: 'museo-sans', sans-serif;
    font-size: 14px; color: #333; background: #fff;
    cursor: pointer; transition: border-color 0.2s;
    display: flex; justify-content: space-between; align-items: center;
  }
  .date-input:hover { border-color: #8b7355; }
  .date-input.active { border-color: #8b7355; }
  .date-input .arrow { color: #8b7355; font-size: 12px; }

  /* Calendar dropdown */
  .cal-dropdown {
    background: #fff; border: 1px solid #d4c9b8;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    padding: 20px; margin-top: 6px; margin-bottom: 16px;
    display: none;
  }
  .cal-dropdown.open { display: block; }
  .cal-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
  }
  .cal-nav button {
    background: none; border: 1px solid #d4c9b8; width: 28px; height: 28px;
    cursor: pointer; font-size: 14px; color: #8b7355;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
  }
  .cal-nav button:hover { background: #8b7355; color: #fff; border-color: #8b7355; }
  .cal-title { font-family: 'filosofia', serif; font-size: 14px; color: #333; }
  .cal-grid { display: flex; gap: 20px; }

  /* v34: calendar loading overlay — applied via .cal-loading on the
     calendar dropdown wrapper while loadAvailability is in flight. The
     pulse on .cal-grid signals "waiting for data" without disrupting
     the prev/next month navigation (which stays clickable on the parent).
     pointer-events: none on .cal-grid prevents premature date clicks
     before availability paints. Reduced-motion users get static dimmed
     state instead. */
  @keyframes calLoadingPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.85; }
  }
  .cal-loading .cal-grid {
    animation: calLoadingPulse 1.4s ease-in-out infinite;
    pointer-events: none;
  }

  .cal-month { flex: 1; }
  .cal-month-label {
    font-family: 'filosofia', serif; font-size: 12px; color: #8b7355;
    text-align: center; margin-bottom: 8px;
  }
  .cal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    text-align: center; margin-bottom: 4px;
  }
  .cal-weekdays span {
    font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
    color: #bfb09a; padding: 3px 0;
  }
  .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .cd {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 12px; cursor: default; transition: all 0.12s; position: relative;
  }
  .cd.past { color: #ddd; }
  .cd.av { color: #333; font-weight: 400; cursor: pointer; background: #f7f3ec; border-radius: 2px; }
  .cd.av:hover { background: #8b7355; color: #fff; }
  .cd.un { color: #666; cursor: pointer; }
  .cd.un:hover { background: #8b7355; color: #fff; }
  .cd.sel { background: #8b7355; color: #fff; font-weight: 700; cursor: pointer; }
  .cd.range { background: #f0ebe3; color: #5a4a38; font-weight: 500; cursor: pointer; }
  .cd.range.un { }
  .cd.today { outline: 2px solid #8b7355; outline-offset: -2px; }
  .cal-legend {
    display: flex; gap: 16px; margin-top: 12px;
    padding-top: 10px; border-top: 1px solid #f0ebe3;
  }
  .cal-legend-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 10px; color: #999;
  }
  .cal-sw { width: 11px; height: 11px; display: inline-block; }
  .cal-sw.s-av { background: #f7f3ec; border: 1px solid #e0d8cc; }
  .cal-sw.s-sel { background: #8b7355; }

  /* Nudge */
  .availability-nudge {
    background: #fff; border: 1px solid #e8e0d4;
    padding: 16px 20px; margin-bottom: 20px;
    display: none; text-align: center;
  }
  .availability-nudge.show { display: block; }
  .availability-nudge p {
    font-size: 13px; color: #999; margin-bottom: 8px;
    font-family: 'filosofia', serif; font-style: italic;
  }
  .nudge-link {
    font-size: 12px; color: #8b7355; text-decoration: none;
    cursor: pointer; background: none; border: none;
    font-family: 'museo-sans', sans-serif;
  }
  .nudge-link:hover { text-decoration: underline; color: #5a4a38; }

  .alt-properties { display: none; margin-bottom: 20px; }
  .alt-properties.show { display: block; }
  .alt-section-label {
    font-size: 11px; letter-spacing: 1.5px;
    text-transform: uppercase; color: #8b7355; margin-bottom: 12px;
    padding-bottom: 8px; border-bottom: 1px solid #e8e0d4;
  }
  .alt-card {
    background: #fff; padding: 16px 20px; margin-bottom: 8px;
    border-left: 3px solid #8b7355;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05); cursor: pointer; transition: box-shadow 0.2s;
  }
  .alt-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
  .alt-name { font-family: 'filosofia', serif; font-size: 15px; margin-bottom: 3px; }
  .alt-detail { font-size: 12px; color: #999; }
  .alt-right { text-align: right; }
  .alt-right .from-label { font-size: 11px; color: #999; }
  .alt-right .amount { font-size: 15px; font-weight: 700; color: #8b7355; }
  .alt-right .unit { font-size: 10px; color: #999; display: block; }
  .alt-action {
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: #8b7355; font-weight: 600; margin-top: 4px; display: block;
  }

  /* v33: alt-cards rendered by fetchAndRenderAltProperties() are anchor tags
     so the whole card is a clickable link. Reset the default anchor styling
     so they inherit alt-card visual rules. */
  a.alt-card { text-decoration: none; color: inherit; }

  /* v33: third detail line on alt-cards shows the offered dates +
     length-of-stay tag. Earthy-brown picks it out from the region line. */
  .alt-detail.alt-offer-dates { margin-top: 4px; color: #8b7355; }

  /* v33: skeleton placeholders shown during the alt-properties fetch.
     Three of these render under a "Searching for similar lodges..." label
     and get replaced with real cards on success or hidden on empty/failure. */
  .alt-card.alt-card-loading {
    min-height: 56px;
    background: linear-gradient(90deg, #f5f0e8 0%, #ebe2d4 50%, #f5f0e8 100%);
    background-size: 200% 100%;
    animation: alt-skeleton-pulse 1.4s ease-in-out infinite;
    border-left-color: #d4c8b5;
    pointer-events: none; cursor: default;
  }
  .alt-card.alt-card-loading:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
  @keyframes alt-skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* v34: empty-state CTA — fires only when alt-dates AND alt-properties
     both return empty (genuinely busy period across the whole cluster).
     Routes the user to the simpleContact form via triggerEmptyStateEnquiry();
     server-side composer surfaces the failed dates as ops context and
     acknowledges them in the guest confirmation. Visual treatment matches
     the existing card-on-warm-cream aesthetic — no special urgency styling
     since the human-team path is a normal product feature, not a failure. */
  .alt-empty-state {
    background: #fff;
    border: 1px solid #e8e0d4;
    border-left: 3px solid #8b7355;
    padding: 20px 24px;
    margin: 12px 0;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  }
  .alt-empty-state-text {
    font-family: 'filosofia', serif;
    font-size: 14px;
    color: #5a4a38;
    margin: 0 0 16px 0;
    line-height: 1.5;
  }
  .alt-empty-state-btn {
    background: #8b7355;
    color: #fff;
    border: none;
    padding: 10px 24px;
    font-family: 'museo-sans', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
  }
  .alt-empty-state-btn:hover { background: #6f5a40; }

  .check-btn {
    width: 100%; padding: 14px;
    background: #8b7355; color: #fff; border: none;
    font-family: 'museo-sans', sans-serif;
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s; margin-bottom: 24px;
  }
  .check-btn:hover { background: #7a644a; }

  /* Results container — default hidden, shown only after availability check.
     Fix for legacy bug where escape link (→ simple contact) left previously-
     rendered room cards visible because .classList.remove('show') had no
     corresponding CSS hook. */
  .results { display: none; }
  .results.show { display: block; }

  .results-label {
    font-size: 11px; letter-spacing: 1.5px;
    text-transform: uppercase; color: #8b7355; margin-bottom: 14px;
    padding-bottom: 8px; border-bottom: 1px solid #e8e0d4;
  }
  .room-card {
    background: #fff; padding: 20px; margin-bottom: 10px;
    border-left: 3px solid #8b7355;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  }
  .room-name { font-family: 'filosofia', serif; font-size: 17px; margin-bottom: 4px; }
  .room-status { font-size: 12px; color: #6a9e5c; }
  .room-status.limited { color: #c4953a; }
  .room-status.unavailable { color: #c45a5a; }
  .room-price { text-align: right; }
  .room-price .from-label { font-size: 13px; font-weight: 400; color: #999; }
  .room-price .amount { font-size: 18px; font-weight: 700; color: #8b7355; }
  .room-price .unit { font-size: 11px; color: #999; display: block; }
  .room-book {
    margin-top: 10px; padding: 8px 20px;
    background: #8b7355; color: #fff; border: none;
    font-family: 'museo-sans', sans-serif;
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer;
  }
  .room-book:hover { background: #7a644a; }

  .unavailable-notice {
    text-align: center; padding: 24px 0 24px;
    border-bottom: 1px solid #e8e0d4; margin-bottom: 24px; display: none;
  }
  .unavailable-notice.show { display: block; }
  .unavailable-notice .un-icon {
    display: inline-block; width: 44px; height: 44px; border-radius: 50%;
    background: #f0e8dc; color: #8b7355; font-size: 20px;
    line-height: 44px; margin-bottom: 12px;
  }
  .unavailable-notice h3 {
    font-family: 'filosofia', serif; font-size: 17px; font-weight: 400;
    margin-bottom: 6px; color: #333;
  }
  .unavailable-notice p { font-size: 13px; color: #999; }

  .alt-dates { display: none; margin-bottom: 20px; }
  .alt-dates.show { display: block; }
  .alt-date-card {
    background: #fff; padding: 14px 20px; margin-bottom: 8px;
    border-left: 3px solid #6a9e5c;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05); cursor: pointer; transition: box-shadow 0.2s;
  }
  .alt-date-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
  .alt-date-dates { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
  .alt-date-detail { font-size: 12px; color: #999; }
  .alt-date-action {
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: #8b7355; font-weight: 600;
  }

  .disclaimer {
    font-size: 13px; color: #bfb09a; margin-top: 20px;
    font-style: italic; font-family: 'filosofia', serif;
  }

  /* v34: calendar-hint sits below the date-row inside the availability
     panel for Flow A/B. Pre-emptively reframes the calendar before the
     user engages — primes them that limited-availability dates are still
     worth picking because the alt-dates and alt-properties machinery will
     fire on unavailable. JS toggles visibility per flow type (Flow A/B
     show; Flow C/D hide). Sibling visual family to .disclaimer. */
  .calendar-hint {
    font-size: 13px; color: #bfb09a;
    font-style: italic; font-family: 'filosofia', serif;
    text-align: center; line-height: 1.5;
    margin-bottom: 16px;
  }

  /* v34: address-street-hint nudges users who picked a street-level
     autocomplete prediction (no house number resolved) to add their
     number. Sits inside .address-autocomplete-wrap below the input.
     Skip link on right for users with named-house addresses (UK/IE
     common) — sets a flag that bypasses the digit-required validation.
     Dynamically injected by initAddressAutocomplete on first need. */
  .address-street-hint {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; color: #bfb09a;
    font-style: italic; font-family: 'filosofia', serif;
    margin-top: 6px; gap: 12px; line-height: 1.5;
  }
  .address-street-hint .hint-skip {
    color: #8b7355; cursor: pointer; font-style: normal;
    white-space: nowrap;
  }
  .address-street-hint .hint-skip:hover {
    color: #5a4a38; text-decoration: underline;
  }

  /* ===================== PANEL 2: GUEST CONFIG ===================== */
  .booking-summary {
    background: #fff; border: 1px solid #e8e0d4; padding: 20px;
    margin-bottom: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  }
  .booking-summary .summary-title {
    font-family: 'filosofia', serif; font-size: 18px; margin-bottom: 4px;
  }
  .booking-summary .summary-detail {
    font-size: 13px; color: #999; line-height: 1.6;
  }
  .booking-summary .summary-rate {
    font-size: 15px; font-weight: 700; color: #8b7355; margin-top: 8px;
  }
  .booking-summary .summary-rate .from-label { font-size: 12px; font-weight: 400; color: #999; }

  .guest-section-label {
    font-size: 11px; letter-spacing: 1.5px;
    text-transform: uppercase; color: #8b7355; margin-bottom: 14px;
    padding-bottom: 8px; border-bottom: 1px solid #e8e0d4;
  }

  .guest-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; border-bottom: 1px solid #f0ebe3;
  }
  .guest-row:last-child { border-bottom: none; }
  .guest-row-label { font-size: 14px; }
  .guest-row-label .sub { font-size: 12px; color: #999; display: block; margin-top: 2px; }
  .guest-counter {
    display: flex; align-items: center; gap: 16px;
  }
  .counter-btn {
    width: 32px; height: 32px; border: 1px solid #d4c9b8;
    background: #fff; color: #8b7355; font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
  }
  .counter-btn:hover { background: #8b7355; color: #fff; border-color: #8b7355; }
  .counter-btn:disabled { opacity: 0.3; cursor: default; }
  .counter-btn:disabled:hover { background: #fff; color: #8b7355; border-color: #d4c9b8; }
  .counter-val {
    font-size: 16px; font-weight: 600; min-width: 24px; text-align: center;
  }

  .children-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; border-bottom: 1px solid #f0ebe3;
  }
  .toggle-switch {
    width: 44px; height: 24px; background: #d4c9b8; border-radius: 12px;
    position: relative; cursor: pointer; transition: background 0.2s;
  }
  .toggle-switch.on { background: #8b7355; }
  .toggle-switch .toggle-knob {
    width: 20px; height: 20px; background: #fff; border-radius: 50%;
    position: absolute; top: 2px; left: 2px; transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .toggle-switch.on .toggle-knob { left: 22px; }

  .rooms-calc {
    background: #fff; border: 1px solid #e8e0d4; padding: 16px 20px;
    margin-top: 20px; margin-bottom: 20px;
  }
  .rooms-calc .calc-label { font-size: 13px; color: #999; margin-bottom: 4px; }
  .rooms-calc .calc-value { font-size: 15px; font-weight: 600; color: #333; }
  .rooms-calc .calc-note {
    font-size: 13px; color: #c4953a; margin-top: 6px;
    font-style: italic; font-family: 'filosofia', serif;
  }

  .continue-btn {
    width: 100%; padding: 14px;
    background: #8b7355; color: #fff; border: none;
    font-family: 'museo-sans', sans-serif;
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s;
  }
  .continue-btn:hover { background: #7a644a; }

  /* Soft redirect */
  .soft-redirect {
    text-align: center; padding: 20px 0; display: none;
  }
  .soft-redirect.show { display: block; }
  .soft-redirect .redirect-icon {
    display: inline-block; width: 48px; height: 48px; border-radius: 50%;
    background: #f0e8dc; color: #8b7355; font-size: 22px;
    line-height: 48px; margin-bottom: 14px;
  }
  .soft-redirect h3 {
    font-family: 'filosofia', serif; font-size: 17px; font-weight: 400;
    margin-bottom: 8px;
  }
  .soft-redirect p {
    font-size: 13px; color: #999; line-height: 1.6; margin-bottom: 20px;
  }

  /* ===================== PANEL 3: TRAVELLER DETAILS ===================== */
  .traveller-group {
    margin-bottom: 24px;
  }
  .traveller-group-title {
    font-family: 'filosofia', serif; font-size: 15px; color: #333;
    margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #e8e0d4;
  }
  .traveller-group-title .room-note {
    font-size: 12px; color: #999; font-family: 'museo-sans', sans-serif;
    font-style: italic; margin-left: 8px;
  }

  .form-row { display: flex; gap: 16px; margin-bottom: 12px; }
  .form-row > div { flex: 1; }
  .form-row.single > div { flex: none; width: 100%; }

  .form-field label {
    display: block; font-size: 11px; letter-spacing: 1.5px;
    text-transform: uppercase; color: #8b7355; margin-bottom: 5px;
  }
  .form-field input, .form-field select, .form-field textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid #d4c9b8; font-family: 'museo-sans', sans-serif;
    font-size: 13px; color: #333; background: #fff;
    transition: border-color 0.2s;
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none; border-color: #8b7355;
  }
  .form-field textarea { resize: vertical; min-height: 60px; }

  .section-divider {
    height: 1px; background: #e8e0d4; margin: 24px 0;
  }

  .checkbox-row {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 16px;
  }
  .checkbox-row input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 2px;
    accent-color: #8b7355; cursor: pointer; flex-shrink: 0;
  }
  .checkbox-row label {
    font-size: 13px; color: #666; line-height: 1.5; cursor: pointer;
  }
  .checkbox-row label a { color: #8b7355; }

  .submit-btn {
    width: 100%; padding: 16px;
    background: #8b7355; color: #fff; border: none;
    font-family: 'museo-sans', sans-serif;
    font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s;
  }
  .submit-btn:hover { background: #7a644a; }

  /* ===================== PANEL 4: CONFIRMATION ===================== */
  .confirmation {
    text-align: center; padding: 20px 0;
  }
  .confirmation .conf-icon {
    display: inline-block; width: 56px; height: 56px; border-radius: 50%;
    background: #e8f5e2; color: #6a9e5c; font-size: 28px;
    line-height: 56px; margin-bottom: 16px;
  }
  .confirmation h3 {
    font-family: 'filosofia', serif; font-size: 20px; font-weight: 400;
    margin-bottom: 8px;
  }
  .confirmation p {
    font-size: 14px; color: #999; line-height: 1.6; margin-bottom: 4px;
  }
  .confirmation .conf-detail {
    background: #fff; border: 1px solid #e8e0d4; padding: 20px;
    margin: 20px 0; text-align: left; font-size: 13px; line-height: 1.8;
  }
  .confirmation .conf-detail strong { color: #8b7355; }

  /* v34 2d: email-sent reassurance line — paired "footer info" treatment
     with #confClosing (Filosofia italic tan). Positioned below confClosing
     in the panel so reading flow goes: detail → next-step closing →
     past-tense reassurance → close button. Tighter top margin than
     confClosing because they're a visual pair, not separate sections.
     Always shown — no JS toggle, no per-flow variation. */
  .confirmation .conf-email-sent {
    margin-top: 8px; font-size: 12px; color: #bfb09a;
    font-style: italic; font-family: 'filosofia', serif;
  }

  /* v34 2d: secondary close affordance for confirmation panel. Outlined
     brand-brown — transparent fill, 1px border, uppercase Museo Sans —
     visually quieter than the primary filled buttons (Book Now / Send
     Enquiry / room Select →) so it doesn't compete with the success
     message. Hover fills brown to match the inverse-on-hover pattern
     used elsewhere (cal-nav buttons). Compact width, not full-width on
     mobile — closing isn't forward progress, no need for full-width
     visual emphasis. */
  .conf-close-btn {
    display: inline-block; margin-top: 24px; padding: 8px 24px;
    background: transparent; border: 1px solid #8b7355; color: #8b7355;
    font-family: 'museo-sans', sans-serif; font-size: 11px;
    text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer;
    transition: all 0.2s;
  }
  .conf-close-btn:hover { background: #8b7355; color: #fff; }

  /* Enquiry form (soft redirect) */
  .enquiry-form { text-align: left; margin-top: 16px; }

  .child-age-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0;
  }
  .child-age-row label {
    font-size: 13px; color: #666;
  }
  .child-age-row select {
    width: 100px; padding: 8px 10px;
    border: 1px solid #d4c9b8; font-family: 'museo-sans', sans-serif;
    font-size: 13px; color: #333; background: #fff;
  }
  .child-age-note {
    font-size: 11px; color: #c4953a; font-style: italic;
    font-family: 'filosofia', serif; padding: 4px 0 8px;
  }
  .enquiry-guest-summary {
    background: #fff; border: 1px solid #e8e0d4; padding: 12px 16px;
    margin-bottom: 16px; font-size: 13px; color: #666;
    text-align: left;
  }
  .enquiry-guest-summary strong { color: #8b7355; }
  /* Close confirmation */
  .close-confirm {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3); display: none;
    align-items: center; justify-content: center; z-index: 10;
  }
  .close-confirm.show { display: flex; }
  .close-confirm-box {
    background: #f9f6f1; padding: 28px 32px; max-width: 360px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15); text-align: center;
  }
  .close-confirm-box p {
    font-size: 14px; color: #333; margin-bottom: 20px; line-height: 1.5;
  }
  .close-confirm-btns { display: flex; gap: 12px; }
  .close-confirm-btns button {
    flex: 1; padding: 12px; font-family: 'museo-sans', sans-serif;
    font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer; transition: all 0.2s;
  }
  .close-confirm-stay {
    background: #8b7355; color: #fff; border: none;
  }
  .close-confirm-stay:hover { background: #7a644a; }
  .close-confirm-leave {
    background: #fff; color: #8b7355; border: 1px solid #d4c9b8;
  }
  .close-confirm-leave:hover { border-color: #8b7355; }

  /* Validation */
  .form-field input.error, .form-field select.error, .form-field textarea.error,
  .child-age-row select.error {
    border-color: #b93838;
    border-width: 2px;
    background: #fdf7f7;
  }

  /* Error state for checkbox rows (e.g. T&C, flight acknowledgement) */
  .checkbox-row.error {
    background: #fdf7f7;
    border: 1.5px solid #b93838;
    padding: 10px 12px;
    margin-left: -12px; margin-right: -12px;
    border-radius: 2px;
    transition: all 0.15s;
  }
  .checkbox-row.error input[type="checkbox"] {
    outline: 2px solid #b93838;
    outline-offset: 1px;
  }

  /* Honeypot — invisible to humans, attracts bots */
  .hp-field {
    position: absolute; left: -9999px; top: -9999px;
    width: 1px; height: 1px; opacity: 0;
    overflow: hidden; pointer-events: none;
    tab-index: -1;
  }
  .validation-msg {
    font-size: 11px; color: #b93838; margin-top: 4px;
    font-family: 'museo-sans', sans-serif;
  }
  .form-error-banner {
    background: #fdf2f2; border: 1px solid #e8c4c4; padding: 10px 14px;
    font-size: 12px; color: #b93838; margin-bottom: 16px;
    display: none;
  }
  .form-error-banner.show { display: block; }

  /* Sub-step progress */
  .substep-progress {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 20px; font-size: 12px; color: #999;
  }
  .substep-dot {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600;
    border: 2px solid #d4c9b8; color: #d4c9b8;
  }
  .substep-dot.active { border-color: #8b7355; color: #8b7355; background: #f9f6f1; }
  .substep-dot.done { border-color: #6a9e5c; color: #fff; background: #6a9e5c; }
  .substep-line { flex: 1; height: 1px; background: #d4c9b8; }
  .substep-label { font-size: 11px; letter-spacing: 0.5px; }

  /* Bed config */
  .bed-config {
    display: flex; gap: 12px; margin-bottom: 16px;
  }
  .bed-option {
    flex: 1; padding: 12px; border: 1px solid #d4c9b8;
    background: #fff; cursor: pointer; text-align: center;
    transition: all 0.2s; position: relative;
  }
  .bed-option:hover { border-color: #8b7355; }
  .bed-option.selected { border-color: #8b7355; background: #f5f0e8; }
  .bed-option .bed-label { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
  .bed-option .bed-desc { font-size: 11px; color: #999; }

  /* Other dietary input */
  .dietary-other {
    margin-top: 6px; display: none;
  }
  .dietary-other.show { display: block; }
  .dietary-other input {
    width: 100%; padding: 8px 10px;
    border: 1px solid #d4c9b8; font-family: 'museo-sans', sans-serif;
    font-size: 12px; color: #333; background: #fff;
  }

  /* Room section in form */
  .room-form-section {
    margin-bottom: 24px; padding-bottom: 20px;
    border-bottom: 1px solid #e8e0d4;
  }
  .room-form-section:last-child { border-bottom: none; }
  .room-form-header {
    font-family: 'filosofia', serif; font-size: 16px; color: #333;
    margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center;
  }
  .room-form-header .room-note {
    font-size: 12px; color: #c4953a; font-family: 'museo-sans', sans-serif;
    font-style: italic;
  }

  /* Address fields */
  .address-autocomplete-wrap { position: relative; }
  .address-autocomplete-wrap .pac-icon { display: none; }

  /* Substep containers */
  .substep { display: none; }
  .substep.active { display: block; }

  .next-substep-btn, .prev-substep-btn {
    padding: 14px; border: none;
    font-family: 'museo-sans', sans-serif;
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s;
  }
  .next-substep-btn {
    width: 100%; background: #8b7355; color: #fff;
  }
  .next-substep-btn:hover { background: #7a644a; }
  .prev-substep-btn {
    background: none; color: #8b7355; padding: 0;
    letter-spacing: 1px; margin-bottom: 16px;
  }
  .prev-substep-btn:hover { color: #5a4a38; }

  /* Flow C specific */
  .escape-link {
    text-align: center; margin-bottom: 20px; padding-top: 4px;
  }
  .escape-link a {
    font-size: 12px; color: #8b7355; text-decoration: none;
    cursor: pointer; font-family: 'museo-sans', sans-serif;
    transition: color 0.2s;
  }
  .escape-link a:hover { color: #5a4a38; text-decoration: underline; }

  .rate-context {
    background: #fff; border: 1px solid #e8e0d4; padding: 20px;
    margin-bottom: 20px; text-align: center; display: none;
  }
  .rate-context.show { display: block; }
  .rate-context p {
    font-family: 'filosofia', serif; font-size: 14px;
    color: #666; line-height: 1.6; font-style: italic;
  }
  .rate-context .rate-highlight {
    color: #8b7355; font-weight: 600; font-style: normal;
  }

  .flowc-rooms {
    display: none; margin-bottom: 20px;
  }
  .flowc-rooms.show { display: block; }

  /* v34: subtle pulse animations on unselected room cards (Flow C) and
     flex options (Flow C/D) to signal "I'm interactive, click me" — pre-
     empts the "you must select" wall pattern by making the affordance
     obvious upfront. Pulse stops on .selected (chosen item); other room
     cards collapse via .faded. Two distinct keyframes since room cards
     have a baseline shadow to pulse against, flex options don't. Both
     opt out under prefers-reduced-motion. */
  @keyframes nudgeRoomCard {
    0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
    50%      { box-shadow: 0 4px 14px rgba(139,115,85,0.18); }
  }
  @keyframes nudgeFlexOption {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139,115,85,0); }
    50%      { box-shadow: 0 0 0 2px rgba(139,115,85,0.18); }
  }

  .flowc-room-card {
    background: #fff; padding: 16px 20px; margin-bottom: 8px;
    border-left: 3px solid #8b7355;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    cursor: pointer; transition: all 0.3s;
  }
  .flowc-room-card:not(.selected):not(.faded) {
    animation: nudgeRoomCard 2.5s ease-in-out infinite;
  }
  .flowc-room-card:hover { border-left-width: 5px; }
  .flowc-room-card.selected {
    border-left-width: 5px; border-left-color: #8b7355;
    background: #f5f0e8;
  }
  .flowc-room-card.faded {
    opacity: 0; max-height: 0; padding: 0 20px; margin: 0;
    overflow: hidden; border: none; box-shadow: none;
  }
  .flowc-room-card .room-name {
    font-family: 'filosofia', serif; font-size: 15px; margin-bottom: 2px;
  }
  .flowc-room-card .room-note {
    font-size: 11px; color: #999; font-style: italic;
  }
  /* "Select →" affordance — styled to match Flow A's .room-book button so
     the click target reads as a button, not inline text. Sits inside
     .room-price (which has text-align: right) so display: inline-block is
     enough to right-align. Hidden on .selected (chosen card) and .faded
     (collapsed siblings) so visible only on cards still inviting click.
     Mobile rules at the bottom of this file mirror .room-book's full-
     width treatment. */
  .flowc-room-card .card-action {
    display: inline-block; margin-top: 10px; padding: 8px 20px;
    background: #8b7355; color: #fff; border: none;
    font-family: 'museo-sans', sans-serif;
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer;
  }
  .flowc-room-card .card-action:hover { background: #7a644a; }
  .flowc-room-card.selected .card-action,
  .flowc-room-card.faded .card-action {
    display: none;
  }
  .flowc-change-room {
    text-align: center; margin-top: 4px; margin-bottom: 12px; display: none;
  }
  .flowc-change-room a {
    font-size: 12px; color: #8b7355; cursor: pointer;
    text-decoration: none; font-family: 'museo-sans', sans-serif;
  }
  .flowc-change-room a:hover { text-decoration: underline; }

  .flowc-enquiry {
    display: none;
  }
  .flowc-enquiry.show { display: block; }

  .simple-contact {
    display: none;
  }
  .simple-contact.show { display: block; }

  /* ===================== FLOW D: PACKAGE ENQUIRY ===================== */
  .pkg-card {
    background: #fff; border: 1px solid #e8e0d4; padding: 24px;
    margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  }
  .pkg-card .pkg-title {
    font-family: 'filosofia', serif;
    font-size: 16px; font-weight: 400; margin-bottom: 14px;
    color: #8b7355;
  }
  .pkg-stops {
    list-style: none; padding: 0; margin: 0 0 16px;
  }
  .pkg-stops li {
    position: relative; padding: 8px 0 8px 22px;
    font-size: 14px; color: #555;
    border-left: 2px solid #e8e0d4;
    margin-left: 5px;
  }
  .pkg-stops li:last-child { border-left-color: transparent; }
  .pkg-stops li::before {
    content: '';
    position: absolute; left: -5px; top: 12px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #8b7355;
  }
  .pkg-stop-name { font-weight: 600; color: #333; }
  .pkg-stop-nights { font-size: 12px; color: #999; margin-left: 4px; }
  .pkg-stop-location { font-size: 12px; color: #999; display: block; margin-top: 1px; }
  .pkg-rate-display {
    padding-top: 14px; border-top: 1px solid #f0ebe3;
    display: none;
  }
  .pkg-rate-display.show { display: block; }
  .pkg-rate-display .from-label {
    font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 1px;
  }
  .pkg-rate-display .rate-amount {
    font-size: 20px; font-weight: 700; color: #8b7355;
  }
  .pkg-rate-display .rate-unit {
    font-size: 12px; color: #999; display: block; margin-top: 2px;
  }

  .pkg-checkout-display {
    width: 100%; padding: 12px 14px;
    border: 1px solid #e8e0d4; background: #f0ece5;
    font-family: 'museo-sans', sans-serif;
    font-size: 14px; color: #666;
  }
  .pkg-date-note {
    font-size: 13px; color: #bfb09a; margin-bottom: 20px;
    font-style: italic; font-family: 'filosofia', serif;
  }

  /* ===================== DATE FLEXIBILITY ===================== */
  .date-flex {
    display: none; margin-bottom: 20px;
  }
  .date-flex.show { display: block; }
  .date-flex .flex-motivation {
    font-family: 'filosofia', serif; font-size: 13px;
    color: #888; line-height: 1.6; font-style: italic;
    margin-bottom: 14px;
  }
  .flex-options {
    display: flex; gap: 10px; margin-bottom: 12px;
  }
  .flex-option {
    flex: 1; padding: 12px; border: 1px solid #d4c9b8;
    background: #fff; cursor: pointer; text-align: center;
    font-size: 13px; color: #666;
    transition: all 0.2s; position: relative;
  }
  .flex-option:not(.selected) {
    animation: nudgeFlexOption 2.5s ease-in-out infinite;
  }
  .flex-option:hover { border-color: #8b7355; }
  .flex-option.selected { border-color: #8b7355; background: #f5f0e8; color: #333; font-weight: 600; }
  .flex-option.error-border { border-color: #c45a5a; }
  .flex-dropdowns {
    display: none; gap: 14px; margin-top: 4px;
  }
  .flex-dropdowns.show { display: flex; }
  .flex-dropdowns > div { flex: 1; }
  .flex-dropdowns label {
    display: block; font-size: 11px; letter-spacing: 1.2px;
    text-transform: uppercase; color: #8b7355; margin-bottom: 5px;
  }
  .flex-dropdowns select {
    width: 100%; padding: 10px 12px;
    border: 1px solid #d4c9b8; font-family: 'museo-sans', sans-serif;
    font-size: 13px; color: #333; background: #fff;
    transition: border-color 0.2s;
  }
  .flex-dropdowns select:focus { outline: none; border-color: #8b7355; }
  .flex-dropdowns select.error-border { border-color: #c45a5a; }

  /* v34: prefers-reduced-motion opt-out — disables the nudge pulses
     for users with motion sensitivity. The cards still highlight on
     hover, so affordance isn't lost. Other widget animations (slide
     panels, fade-in) are unaffected since those serve navigation
     rather than continuous attention-getting. The calendar loading
     state falls back to a static dimmed grid (still clearly "waiting"
     but without motion). */
  @media (prefers-reduced-motion: reduce) {
    .flowc-room-card:not(.selected):not(.faded),
    .flex-option:not(.selected) {
      animation: none;
    }
    .cal-loading .cal-grid {
      animation: none;
      opacity: 0.65;
    }
  }

  /* =================== MOBILE RESPONSIVE (step 13) ===================
     Single breakpoint at ≤480px. The 481–579px zone is handled by base
     rules (.modal width: 100%; max-width: 580px + .modal-overlay
     padding: 16px) — no media query needed for that zone. */
  @media (max-width: 480px) {

    /* ---- Chunk 1: modal shell + header ---- */

    .modal-overlay { padding: 0; }

    /* Fullscreen. 100dvh accounts for mobile browser URL-bar collapse;
       100vh is the fallback. */
    .modal {
      max-width: none;
      max-height: none;
      height: 100vh;
      height: 100dvh;
    }

    /* Header becomes two rows. Flex-column with `order: 1` on the
       selector drops it below the title without DOM reshuffling. */
    .modal-header {
      display: flex;
      flex-direction: column;
      padding: 24px 64px 16px 20px;
    }

    /* `position: relative` preserved so the absolute stale-dot inside
       the selector still anchors correctly. */
    .currency-selector {
      position: relative;
      top: auto;
      right: auto;
      order: 1;
      align-items: flex-start;
      margin-top: 12px;
    }

    .modal-body { padding: 24px 20px 28px; }

    /* ---- Chunk 2: Panel 1 internals ---- */

    .date-row {
      flex-direction: column;
      gap: 12px;
    }

    .cal-grid {
      flex-direction: column;
      gap: 20px;
    }

    /* Tighter cal-dropdown padding recovers width for day cells —
       ~43px at 375px, 46+px at 414px. */
    .cal-dropdown { padding: 12px 8px; }

    .cal-nav button {
      width: 40px;
      height: 40px;
      font-size: 16px;
    }

    .flex-options { flex-direction: column; }
    .flex-dropdowns {
      flex-direction: column;
      gap: 12px;
    }

    /* Room cards (Flow A/B): row 1 is name + status badge inline,
       row 2 is rate block, row 3 is full-width book button. The
       :first-child selector targets the unclassed wrapper div in
       JS-rendered markup — stable, but a class-based hook would be
       sturdier if markup ever changes. */
    .room-card {
      flex-direction: column;
      align-items: stretch;
    }
    .room-card > div:first-child {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
    }
    .room-card > div:first-child .room-name {
      margin-bottom: 0;
      flex: 1;
    }
    .room-card > div:first-child .room-status {
      flex-shrink: 0;
    }
    .room-price {
      text-align: left;
      margin-top: 14px;
    }
    .room-book {
      width: 100%;
      display: block;
      margin-top: 12px;
      padding: 14px 20px;
    }
    .flowc-room-card .card-action {
      width: 100%;
      display: block;
      margin-top: 12px;
      padding: 14px 20px;
    }

    .alt-card {
      flex-direction: column;
      align-items: stretch;
    }
    .alt-right {
      text-align: left;
      margin-top: 10px;
    }

    .alt-date-card {
      flex-direction: column;
      align-items: stretch;
    }
    .alt-date-card .alt-date-action { margin-top: 8px; }

    /* ---- Chunk 3: Panels 2 & 3 + Flow C/D ---- */

    .counter-btn {
      width: 40px;
      height: 40px;
      font-size: 18px;
    }

    .form-row {
      flex-direction: column;
      gap: 12px;
    }

    .bed-config {
      flex-direction: column;
      gap: 10px;
    }

    /* Flow C room card stacks, but inner layout differs from room-card
       (no status badge), so no :first-child flex treatment needed. */
    .flowc-room-card {
      flex-direction: column;
      align-items: stretch;
    }

    .pkg-card { padding: 20px; }

    /* Cap confirm box to viewport-minus-32px so it never touches
       modal edges at 375px. */
    .close-confirm-box {
      max-width: calc(100% - 32px);
      padding: 24px;
    }

  }

/* ============================================================================
   FLOW E — booking_confirmation (Step 11)
   ============================================================================ */

/* Wider modal for Flow E to accommodate the per-guest forms and contact
   panel without feeling cramped. 720px override; activates when JS adds
   the .flow-e class to the modal at flowEEntry(). */
.modal.flow-e {
  max-width: 720px;
}

/* Read-only quote ref display block (Panel 1, URL-supplied ref). */
.flow-e-quote-ref-readonly {
  font-family: 'Filosofia', Georgia, serif;
  font-size: 18px;
  color: #8b7355;
  padding: 12px 20px;
  background: #f7f3ec;
  border-left: 3px solid #8b7355;
  margin-bottom: 16px;
}

/* Bed-config error state — applied to the .bed-config container when user
   submits Panel 2 with party=2 and no bed selection. Mirrors the canonical
   .form-field input.error red border treatment. */
.bed-config.error {
  border: 1.5px solid #b93838;
  border-radius: 2px;
  padding: 4px;
  background: #fdf7f7;
}

.flow-e-field-error {
  display: none;
  color: #c45a5a;
  font-size: 12px;
  margin-top: 4px;
}

/* Flow E error banner — styled identically to bookingError for consistency. */
#flowEError {
  display: none;
  padding: 10px 14px;
  background: #fbeae8;
  border-left: 3px solid #c45a5a;
  margin-bottom: 14px;
  font-size: 14px;
  color: #555;
}

#flowEError.show {
  display: block;
}

/* Per-guest panel header — shows "Guest 2 of 4 (lead guest)" etc. */
.flow-e-guest-panel-header {
  font-size: 13px;
  color: #8b7355;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* ============================================================================
   v37 — Host-page CSS isolation barrier (Path Y).

   The widget loads inside arbitrary host pages whose element-level CSS rules
   (button:hover, body color, p margin, etc.) bleed into the modal via the
   cascade and override widget styles where the widget's class rules don't
   redeclare every property explicitly.

   This block defensively re-asserts every bleed-prone property at modal-
   scoped specificity (0,2,1 for hover states), beating host element rules.
   No widget JS changes; affects all consuming domains via the centralised
   widget CSS.

   Tactical patch. Architectural fix is Shadow DOM (deferred post-launch).
   When that lands this entire block can be deleted as a single contiguous
   range — from this banner down to the closing "End of v37 ..." marker.
   No widget JS or HTML depends on this block; it is purely defensive CSS.

   v37.1 SUBTRACTION NOTE: three originally-shipped resets removed because
   they over-flattened intentional widget styling:
     - `button { margin: 0 }` was killing widget button bottom/top margins
       (.check-btn margin-bottom: 24px, .room-book margin-top: 10px,
       .back-btn margin-bottom: 20px, .conf-close-btn margin-top: 24px)
     - `button { letter-spacing: normal }` was killing widget button letter-
       spacing (.check-btn 2px, .room-book 1.5px, .back-btn 1px) — the
       screenshot bug "CHECK AVAILABILITY letters too tight"
     - `a { background: transparent }` was killing the white card backing on
       alt-property cards rendered as anchors (.alt-card) — the screenshot
       bug "alt-property cards lost background"
   These defenses were over-eager; bleed scenarios for these three properties
   are rare in practice, and keeping them broke documented widget styling.
   ============================================================================ */

/* --- 1. ROOT: inheritable text defaults at modal boundary.
   Most descendants without explicit color/font inherit from here, not from
   host's body. Fixes "text colour way too light" caused by host body color
   bleeding into modal text elements. */
.modal-overlay {
  color: #2c2c2c;
  font-family: 'museo-sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

/* --- 2. TEXT ELEMENTS: defend against host text-shadow, text-decoration. */
.modal-overlay p,
.modal-overlay span,
.modal-overlay div,
.modal-overlay label,
.modal-overlay h1,
.modal-overlay h2,
.modal-overlay h3,
.modal-overlay h4,
.modal-overlay h5,
.modal-overlay h6,
.modal-overlay address {
  text-shadow: none;
  text-decoration: none;
}

/* --- 3. LINKS: defend against host a:hover color, decoration, transition.
   Widget T&C link in panelFlowE5 plus any future link inside the modal.
   NOTE (v37.1): `background: transparent` deliberately NOT included here —
   it was killing .alt-card (anchor) backgrounds. Bare-element `a { background }`
   bleed has not been observed on any consuming domain; reactive patch
   if it ever surfaces. */
.modal-overlay a,
.modal-overlay a:link,
.modal-overlay a:visited,
.modal-overlay a:hover,
.modal-overlay a:focus,
.modal-overlay a:active {
  text-shadow: none;
  outline: none;
}

/* --- 4. LISTS: rare in modal but defensive. */
.modal-overlay ul,
.modal-overlay ol,
.modal-overlay li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- 5. BUTTONS: element-level resets for properties widget classes don't
   typically declare. Specificity (0,1,1) ties with host's button:hover;
   source order wins (this block is at end of widget CSS, after host's CSS
   in load order).
   
   NOTE: `position` deliberately NOT reset — .modal-close relies on
   `position: absolute` to anchor top-right of the modal header. If a
   future host page bleeds `button { position: relative }` and breaks
   things, defend per-class in section 6.
   
   NOTE (v37.1): `margin: 0` and `letter-spacing: normal` deliberately NOT
   included — they were flattening widget button styling. Reactive patch
   if a real bleed surfaces. */
.modal-overlay button,
.modal-overlay button:hover,
.modal-overlay button:focus,
.modal-overlay button:active,
.modal-overlay button:disabled {
  text-shadow: none;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  outline: none;
  border-radius: 0;
}

/* --- 6. WIDGET BUTTON HOVER STATES: re-declare every bleed-prone property
   on each widget button class. Specificity (0,2,1) wins decisively over
   both host's button:hover (0,1,1) and widget's own underspecified hover
   rules (0,1,1). Re-asserts the widget's intended visual values. */

/* Continue button — primary CTA in most panels */
.modal-overlay .continue-btn,
.modal-overlay .continue-btn:hover,
.modal-overlay .continue-btn:focus,
.modal-overlay .continue-btn:active {
  background: #8b7355;
  color: #fff;
  border: none;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.modal-overlay .continue-btn:hover {
  background: #7a644a;
}

/* Submit button — Flow A/E final submit */
.modal-overlay .submit-btn,
.modal-overlay .submit-btn:hover,
.modal-overlay .submit-btn:focus,
.modal-overlay .submit-btn:active {
  background: #8b7355;
  color: #fff;
  border: none;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.modal-overlay .submit-btn:hover {
  background: #7a644a;
}

/* Back button — text-style button, no border/bg */
.modal-overlay .back-btn,
.modal-overlay .back-btn:hover,
.modal-overlay .back-btn:focus,
.modal-overlay .back-btn:active {
  background: none;
  border: none;
}
.modal-overlay .back-btn { color: #8b7355; }
.modal-overlay .back-btn:hover { color: #5a4a38; }

/* Modal close × — top-right of header, white-on-brown.
   Position explicitly re-declared to defend against any future host page
   that bleeds `button { position: relative }` and would otherwise yank
   the × out of its absolute anchor. */
.modal-overlay .modal-close,
.modal-overlay .modal-close:hover,
.modal-overlay .modal-close:focus,
.modal-overlay .modal-close:active {
  position: absolute;
  top: 24px;
  right: 40px;
  background: none;
  border: none;
}
.modal-overlay .modal-close { color: rgba(255,255,255,0.6); }
.modal-overlay .modal-close:hover { color: #fff; }

/* Counter buttons — guest stepper +/- buttons */
.modal-overlay .counter-btn,
.modal-overlay .counter-btn:hover,
.modal-overlay .counter-btn:focus,
.modal-overlay .counter-btn:active {
  border: 1px solid #d4c9b8;
}
.modal-overlay .counter-btn { background: #fff; color: #8b7355; }
.modal-overlay .counter-btn:hover {
  background: #8b7355;
  color: #fff;
  border-color: #8b7355;
}
.modal-overlay .counter-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.modal-overlay .counter-btn:disabled:hover {
  background: #fff;
  color: #8b7355;
  border-color: #d4c9b8;
}

/* Confirmation close button — shown in panelConfirm after success */
.modal-overlay .conf-close-btn,
.modal-overlay .conf-close-btn:hover,
.modal-overlay .conf-close-btn:focus,
.modal-overlay .conf-close-btn:active {
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Close-confirmation overlay buttons (STAY / CLOSE) — primary visual
   bleed-target since user reports STAY/CLOSE fading on hover */
.modal-overlay .close-confirm-stay,
.modal-overlay .close-confirm-stay:hover,
.modal-overlay .close-confirm-stay:focus,
.modal-overlay .close-confirm-stay:active {
  background: #8b7355;
  color: #fff;
  border: none;
  text-transform: uppercase;
}
.modal-overlay .close-confirm-stay:hover { background: #7a644a; }

.modal-overlay .close-confirm-leave,
.modal-overlay .close-confirm-leave:hover,
.modal-overlay .close-confirm-leave:focus,
.modal-overlay .close-confirm-leave:active {
  background: #fff;
  color: #8b7355;
  border: 1px solid #d4c9b8;
  text-transform: uppercase;
}
.modal-overlay .close-confirm-leave:hover {
  border-color: #8b7355;
}

/* Bed option selectors (.bed-config / .bed-option) — bordered rectangles
   that swap to selected state on click. Defensive against host bleed. */
.modal-overlay .bed-option,
.modal-overlay .bed-option:hover,
.modal-overlay .bed-option:focus {
  text-shadow: none;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  outline: none;
}

/* --- 7. FORM CONTROLS: defend against host input/textarea/select rules. */
.modal-overlay input,
.modal-overlay textarea,
.modal-overlay select {
  margin: 0;
  text-shadow: none;
  box-shadow: none;
  outline: none;
  letter-spacing: normal;
  text-transform: none;
}
.modal-overlay input:focus,
.modal-overlay textarea:focus,
.modal-overlay select:focus {
  outline: none;
}

/* Checkbox: host CSS may have set padding/margin/width — reset to native. */
.modal-overlay input[type="checkbox"] {
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  appearance: auto;
}

/* End of v37 host-page CSS isolation barrier. */