/**
 * Connect WordPress Plugin — Search Page Styles
 *
 * Styles the property search/archive page with half-map split-view layout.
 * All classes prefixed with `cwp-` to avoid theme collisions.
 * Consumes design tokens from variables.css.
 *
 * Version: 1.0.0
 * Last Updated: 2026-02-14
 */

/* ==========================================================================
   1. SEARCH PAGE — Base Layout
   ========================================================================== */

.cwp-search-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--cwp-bg);
  font-family: var(--cwp-font-body);
  color: var(--cwp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* NOTE: Do NOT add overflow-x:hidden here — it kills position:sticky on
     the map panel. Mobile-only overflow guard lives in connect-public.css. */
}

/* Hide footer on search page — body scrolls normally */
body.cwp-search-active {
  /* CRITICAL: Must be 'visible' on BOTH axes — any other value
     (auto/hidden/scroll) breaks position:sticky on .cwp-split-view__map.
     CSS spec: if one axis is non-visible, the other is forced to 'auto'.
     Do NOT add overflow-x:hidden here or on any ancestor of the map. */
  overflow: visible !important;
  height: auto !important;
}

/* Filter modal container is lazy-loaded on demand — collapse when empty
   so it doesn't leave a visible 120px gap at the bottom of the page. */
#cwp-filter-modal-container:empty {
  min-height: 0;
  height: 0;
  overflow: hidden;
}

body.cwp-search-active footer,
body.cwp-search-active .site-footer,
body.cwp-search-active #colophon,
body.cwp-search-active .footer-wrap,
body.cwp-search-active .ast-footer,
body.cwp-search-active #ast-footer-markup {
  display: none !important;
}

/* ==========================================================================
   2. SEARCH BAR
   ========================================================================== */

/* --- Backdrop Overlay (dims page when search is active) --- */
.cwp-search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: calc(var(--cwp-z-dropdown) - 1);
  pointer-events: none;
  transition: background 0.3s ease;
}

.cwp-search-backdrop--active {
  background: rgba(0, 0, 0, 0.2);
  pointer-events: all;
}

/* --- Wrapper — sticky inside the results panel (Plum Guide style) --- */
.cwp-search-bar-wrapper {
  position: sticky;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  max-width: 100%;
  margin: 0;
  padding: 10px 0 0 0;
  z-index: var(--cwp-z-dropdown);
  background: transparent;
  transition: box-shadow 0.2s ease;
}

/* Scrolled: no wrapper background — the search bar itself has a white bg + border */
.cwp-search-bar-wrapper--scrolled {
  background: transparent;
}

/* Admin bar offset for sticky search bar */
.admin-bar .cwp-search-bar-wrapper {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .cwp-search-bar-wrapper {
    top: 46px;
  }
}

/* --- Search Bar — resting state (compact, sleek, inside results panel) --- */
.cwp-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 100%;
  min-width: 0;
  max-width: none;  /* Override frontend.css 850px cap — on search page bar fills results panel */
  height: 56px;
  padding: 0 6px 0 0;
  background: var(--cwp-surface);
  border: 1px solid var(--cwp-border, #e0e0e0);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.cwp-search-bar:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: var(--cwp-border-dark, #ccc);
}

/* Active state — minimal change so the bar doesn't flash a "white halo".
   Keep the same background; just deepen the shadow very slightly. */
.cwp-search-bar--active {
  border-color: var(--cwp-border-dark, #ccc);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Search Field (shared) --- */

.cwp-search-bar__field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  min-width: 0;
  overflow: visible;
}

/* Hover — resting bar (very subtle wash, scoped inside the field padding
 * so it doesn't look like a separate floating card on top of the search bar).
 * Previously used --cwp-surface-alt which rendered as a prominent white
 * box over the page background — looked broken on dark hero images. */
.cwp-search-bar:not(.cwp-search-bar--active) .cwp-search-bar__field:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* Hover — active bar (subtle highlight on siblings) */
.cwp-search-bar--active .cwp-search-bar__field:not(.cwp-search-bar__field--active):hover {
  background: rgba(0, 0, 0, 0.03);
}

/* Active field — slightly stronger wash so the user sees what's open,
 * but never the full opaque surface-alt rectangle. */
.cwp-search-bar__field--active {
  background: rgba(0, 0, 0, 0.05) !important;
  box-shadow: none;
}

/* Focus visible — keyboard navigation */
.cwp-search-bar__field:focus-visible {
  outline: 2px solid var(--cwp-primary);
  outline-offset: -2px;
}

/* Field flex weights — wider now that action buttons are icon-only.
 *
 * 2026-07-21 — the CHECK IN / CHECK OUT fields were cropping the selected
 * date's year ("08/09/20…" instead of "08/09/2026"). Two compounding causes:
 *   1. `where` held flex 1.8 for just a PLACEHOLDER ("Select destinations")
 *      while the date fields — which carry real MM/DD/YYYY content — got only
 *      1.4, so `.cwp-search-bar__value`'s `text-overflow:ellipsis` clipped the
 *      year once the field shrank below the date's width.
 *   2. The clear-X (position:absolute; right:6px; 20px wide) floats over the
 *      value's tail, and the value had `padding:0`, so the last digits sat
 *      under the X even when they technically fit.
 * Fix: shift flex from the placeholder field to the date fields, and give the
 * date fields a min-width floor that fits the full date + the clear-X. Safe —
 * the horizontal bar only renders ≥768px (below that it collapses to the
 * mobile trigger pill, and the expanded mobile panel uses a different class,
 * `.cwp-search-overlay__field`), so the floor can never cause overflow. */
/* WHERE is the ONLY flexible/shrinkable field — it holds a placeholder
 * ("Select destinations") that is safe to ellipsis. It absorbs all the slack so
 * the date fields never have to give up room. */
.cwp-search-bar__where {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 6px 0 0 6px;
}

/* CHECK IN / CHECK OUT size to their CONTENT and never shrink below it, so the
 * full date can't crop at any viewport / font / padding — no pixel guessing.
 *   - flex: 0 0 auto     → basis = content width, never grow, never shrink
 *   - width: max-content → field is exactly as wide as its widest child (the
 *                          date value, whose own padding-right already reserves
 *                          the clear-X's space — see the value rule below)
 * The date value's `overflow:hidden/text-overflow:ellipsis` is also removed
 * below for these two fields, so even a sub-pixel rounding can't clip a digit.
 * Safe from overflow: the horizontal bar only renders ≥768px (below that it's
 * the mobile trigger pill), and WHERE shrinks first to make room. */
.cwp-search-bar__checkin,
.cwp-search-bar__checkout {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
}

.cwp-search-bar__guests {
  flex: 1;
  min-width: 0;
}

/* --- Improvement 3: Clear dates X button on date fields --- */
/* NOTE: When x-show="checkin" is false, Alpine sets display:none inline.
   We must NOT override display with !important here, or x-show breaks.
   Use opacity for the hover-reveal effect instead of display toggling. */
/* Clear-date X button.
   Alpine x-show controls visibility (display:none ↔ display:flex).
   When visible the button is always fully opaque — no hover-reveal.
   This avoids the flicker loop where the button appearing/disappearing
   on hover keeps re-triggering the parent :hover state.
   !important across the board because themes commonly override <button>
   defaults (Astra/Kadence/GeneratePress all apply width:100%/background
   to buttons) and without !important the clear button rendered as a
   full-width black rectangle below each value on the home page. */
.cwp-search-bar__clear-date {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 20px !important;
  max-height: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.2) !important;
  background-image: none !important;
  color: #fff !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transition: background 0.15s ease !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-indent: 0 !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
  font-size: 0 !important; /* hide any text content the theme might inject */
}
/* When Alpine shows the button (x-show removes inline display:none),
   set display:flex so the icon centers properly. */
.cwp-search-bar__clear-date:not([style*="display: none"]) {
  display: flex !important;
}
.cwp-search-bar__clear-date svg {
  width: 10px !important;
  height: 10px !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  display: block !important;
}
/* Gentle darken on hover — not a drastic jump */
.cwp-search-bar__clear-date:hover,
.cwp-search-bar__clear-date:focus-visible {
  background: rgba(0, 0, 0, 0.45) !important;
  color: #fff !important;
  outline: none !important;
  transform: translateY(-50%) !important;
}
.cwp-search-bar__clear-date:active {
  background: rgba(0, 0, 0, 0.55) !important;
  transform: translateY(-50%) !important;
}

/* --- Dividers — centered vertical lines between fields (Airbnb pattern) --- */
.cwp-search-bar__field + .cwp-search-bar__field::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: var(--cwp-border, #e0e0e0);
  transition: opacity 0.15s ease;
}

/* Hide dividers near active or hovered field */
.cwp-search-bar__field--active + .cwp-search-bar__field::before,
.cwp-search-bar__field--active::before,
.cwp-search-bar__field:hover::before,
.cwp-search-bar__field:hover + .cwp-search-bar__field::before {
  opacity: 0;
}

/* Also hide divider between actions and last field */
.cwp-search-bar__actions::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: var(--cwp-border, #e0e0e0);
  transition: opacity 0.15s ease;
}

/* --- Label --- */

.cwp-search-bar__label {
  display: flex;
  align-items: center;
  font-family: var(--cwp-font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--cwp-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  user-select: none;
}

/* Label icon — hidden on wide screens, visible on narrow split */
.cwp-search-bar__label-icon {
  display: none;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--cwp-text, #1a2b3c);
  opacity: 0.55;
}

/* --- Value (placeholder = muted, filled = dark) --- */

.cwp-search-bar__value {
  display: block;
  font-size: var(--cwp-size-body-sm, 14px);
  font-weight: var(--cwp-weight-regular, 400);
  color: var(--cwp-text-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Filled value — higher contrast when user has made a selection */
.cwp-search-bar__value--filled {
  color: var(--cwp-text);
  font-weight: var(--cwp-weight-medium, 500);
}

/* --- Input (Where field) --- */

.cwp-search-bar__input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--cwp-size-body-sm, 14px);
  font-weight: var(--cwp-weight-regular, 400);
  color: var(--cwp-text);
  line-height: 1.3;
  padding: 0;
  margin: 0;
}

.cwp-search-bar__input::placeholder {
  color: var(--cwp-text-muted);
}

/* --- Action Buttons — compact icon pair (search + filter) --- */

.cwp-search-bar__actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 0 4px 0 2px;
}

.cwp-search-bar__action {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.cwp-search-bar__action svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.cwp-search-bar__action:focus-visible {
  outline: var(--cwp-focus-ring-width) solid var(--cwp-focus-ring-color) !important;
  outline-offset: var(--cwp-focus-ring-offset) !important;
}

/* Search button — primary gradient circle */
.cwp-search-bar__action--search {
  background: var(--cwp-gradient) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 4px rgba(var(--cwp-primary-rgb, 241, 145, 61), 0.3) !important;
}

.cwp-search-bar__action--search:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 14px rgba(var(--cwp-primary-rgb, 241, 145, 61), 0.45) !important;
}

.cwp-search-bar__action--search:active {
  transform: scale(0.95) !important;
  box-shadow: 0 1px 4px rgba(var(--cwp-primary-rgb, 241, 145, 61), 0.3) !important;
}

.cwp-search-bar__action--search svg {
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
}

/* Filter button — icon-only circle with border */
.cwp-search-bar__action--filter {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--cwp-border, #ececec) !important;
  background: transparent !important;
  color: var(--cwp-text, #2c2e33) !important;
  box-shadow: none !important;
}

.cwp-search-bar__action--filter:hover {
  background: var(--cwp-surface-alt, #f5f5f5) !important;
  border-color: var(--cwp-text-secondary, #6a6a6a) !important;
}

.cwp-search-bar__action--filter:active {
  transform: scale(0.97) !important;
}

/* Filter label — hidden; icon-only button */
.cwp-search-bar__action-label {
  display: none !important;
}

/* Filter active state — has filters applied */
.cwp-search-bar__action--active {
  border-color: var(--cwp-text, #2c2e33) !important;
  background: var(--cwp-surface-alt, #f5f5f5) !important;
  color: var(--cwp-primary, #f1913d) !important;
}

/* Badge count on filter button */
.cwp-search-bar__action-badge {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: var(--cwp-radius-full) !important;
  background: var(--cwp-primary, #f1913d) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   3. DROPDOWNS (Location, Guest Picker)
   ========================================================================== */

.cwp-search-bar__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: min(400px, calc(100vw - 32px));
  max-width: 100vw;
  background: var(--cwp-surface);
  border: 1px solid var(--cwp-border, #e0e0e0);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.03);
  padding: var(--cwp-space-lg);
  z-index: var(--cwp-z-dropdown);
}

/* Guest picker — floating popup below search bar */
.cwp-search-bar__dropdown--guests {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  border-radius: 12px;
  border: 1px solid var(--cwp-border, #e0e0e0);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  padding-bottom: 0 !important;
}

/* ======================================================================
   Location Picker — Premium Dropdown (Airbnb-inspired)
   ====================================================================== */
.cwp-search-bar__dropdown--location {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  padding: 0;
  border-radius: 16px;
  border: 1px solid var(--cwp-border, #e0e0e0);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
  background: var(--cwp-surface, #FFFFFF);
  overflow: hidden;
}

/* Location picker mobile header — hidden on desktop */
.cwp-location-picker__mobile-header {
  display: none;
}

.cwp-location-picker__mobile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--cwp-surface-alt, #f5f5f5);
  color: var(--cwp-text);
  cursor: pointer;
}

.cwp-location-picker__mobile-close:hover {
  background: var(--cwp-border, #ececec);
}

/* ── Search bar row ────────────────────────────────────────────────────── */
.cwp-location-picker__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cwp-border, #ececec);
  color: var(--cwp-text-muted, #8899A6);
}
.cwp-location-picker__search svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.cwp-location-picker__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--cwp-font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--cwp-text, #2c2e33);
  padding: 0;
}

.cwp-location-picker__input::placeholder {
  color: var(--cwp-text-muted, #8899A6);
  font-weight: 400;
}

.cwp-location-picker__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--cwp-surface-alt, #f5f5f5);
  color: var(--cwp-text-muted, #8899A6);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 120ms ease, color 120ms ease;
}

.cwp-location-picker__clear:hover {
  background: var(--cwp-border, #e0e0e0);
  color: var(--cwp-text, #2c2e33);
}

/* ── Section header ────────────────────────────────────────────────────── */
.cwp-location-picker__header {
  padding: 16px 20px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cwp-text-muted, #999);
}

/* ── Scrollable list ───────────────────────────────────────────────────── */
.cwp-location-picker__list {
  display: flex !important;
  flex-direction: column !important;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--cwp-border, #e0e0e0) transparent;
}

/* ── Option row ────────────────────────────────────────────────────────── */
.cwp-location-picker__option {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cwp-text, #2c2e33) !important;
  font-family: var(--cwp-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: background 120ms ease !important;
  text-align: left !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.cwp-location-picker__option:hover {
  background: var(--cwp-surface-hover, #f2f2f2) !important;
}

.cwp-location-picker__option--active {
  background: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.06) !important;
}
.cwp-location-picker__option--active .cwp-location-picker__label {
  font-weight: 600 !important;
  color: var(--cwp-primary, #1B6B93) !important;
}
.cwp-location-picker__option--active .cwp-location-picker__icon {
  background: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.12) !important;
  color: var(--cwp-primary, #1B6B93) !important;
}

/* ── Icon container ────────────────────────────────────────────────────── */
.cwp-location-picker__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--cwp-primary) !important;
  flex-shrink: 0 !important;
  transition: color 120ms ease !important;
}
.cwp-location-picker__icon svg {
  width: 20px !important;
  height: 20px !important;
}
.cwp-location-picker__option:hover .cwp-location-picker__icon {
  background: transparent !important;
  color: var(--cwp-primary-dark, var(--cwp-primary)) !important;
}

/* Hide legacy bare SVG (replaced by icon container) */
.cwp-location-picker__option > svg {
  display: none !important;
}

/* ── Text content ──────────────────────────────────────────────────────── */
.cwp-location-picker__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 1px;
}

.cwp-location-picker__label {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--cwp-text, #222);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cwp-location-picker__subtitle {
  font-size: 12px;
  color: var(--cwp-text-muted, #8899A6);
  font-weight: 400;
}

/* ── Count badge ───────────────────────────────────────────────────────── */
.cwp-location-picker__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--cwp-primary);
  background: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.1);
  padding: 3px 10px;
  border-radius: 10px;
  flex-shrink: 0;
  line-height: 1.4;
}
.cwp-location-picker__option:hover .cwp-location-picker__count {
  background: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.16);
}
.cwp-location-picker__option--active .cwp-location-picker__count {
  background: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.1) !important;
  color: var(--cwp-primary, #1B6B93) !important;
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.cwp-location-picker__empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--cwp-text-muted, #8899A6);
  font-size: 14px;
}
.cwp-location-picker__empty span {
  display: block;
  margin-top: 4px;
}

/* ── Keyboard-highlighted option ──────────────────────────────────────── */
.cwp-location-picker__option--highlighted {
  background: var(--cwp-surface-hover, #f2f2f2) !important;
}

/* ── Checkmark icon for selected location ─────────────────────────────── */
.cwp-location-picker__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cwp-primary, #1B6B93);
  margin-left: auto;
}
.cwp-location-picker__check svg {
  width: 14px;
  height: 14px;
}

/* ── "All locations" option styling ───────────────────────────────────── */
.cwp-location-picker__option--all {
  border-bottom: 1px solid var(--cwp-border-light, #f0f0f0);
  margin-bottom: 2px;
}
.cwp-location-picker__icon--all {
  background: transparent !important;
  color: var(--cwp-primary) !important;
}

/* ── Multi-select footer (Clear / Apply) ──────────────────────────────── */
.cwp-location-picker__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 20px !important;
  border-top: 1px solid var(--cwp-border-light, #f0f0f0) !important;
  background: var(--cwp-surface, #fff) !important;
}
.cwp-location-picker__footer-clear {
  background: transparent !important;
  border: none !important;
  padding: 8px 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--cwp-text, #2c2e33) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.cwp-location-picker__footer-clear:hover {
  color: var(--cwp-primary, #1B6B93) !important;
}
.cwp-location-picker__footer-done {
  margin-left: auto !important;
  background: var(--cwp-primary, #1B6B93) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--cwp-radius, 8px) !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity 120ms ease !important;
}
.cwp-location-picker__footer-done:hover {
  opacity: 0.9 !important;
}
.cwp-location-picker__footer-done span {
  color: #fff !important;
}

/* ==========================================================================
   Active Filter Chips (below search bar)
   ========================================================================== */
.cwp-filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 10px 0 2px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.cwp-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 10px !important;
  margin: 0 !important;
  font-family: var(--cwp-font-body, -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--cwp-primary) !important;
  background: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.08) !important;
  background-color: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.08) !important;
  border: 1px solid rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.25) !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}
.cwp-filter-chip:hover,
.cwp-filter-chip:focus {
  background: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.14) !important;
  border-color: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.4) !important;
  color: var(--cwp-primary) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
}
.cwp-filter-chip svg {
  width: 10px !important;
  height: 10px !important;
  opacity: 0.6 !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  color: var(--cwp-primary) !important;
}
.cwp-filter-chip:hover svg {
  opacity: 1 !important;
}

/* Guest picker body — remove bottom padding so footer sits flush */
.cwp-guest-picker {
  padding-bottom: 0 !important;
}

/* ==========================================================================
   Guest Picker Footer & Enhancements
   ========================================================================== */
.cwp-guest-picker__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 8px 20px 16px !important;
  border-top: none !important;
  border: none !important;
  margin: 0 !important;
  gap: 12px !important;
}
.cwp-guest-picker__reset {
  font-family: var(--cwp-font-body, -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cwp-text-secondary, #555) !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  margin-right: auto !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1.4 !important;
}
.cwp-guest-picker__reset:hover,
.cwp-guest-picker__reset:focus {
  color: var(--cwp-text, #222) !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.cwp-guest-picker__done {
  font-family: var(--cwp-font-body, -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--cwp-primary) !important;
  background-color: var(--cwp-primary) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  outline: none !important;
}
.cwp-guest-picker__done:hover,
.cwp-guest-picker__done:focus {
  background: var(--cwp-primary-dark, var(--cwp-primary)) !important;
  background-color: var(--cwp-primary-dark, var(--cwp-primary)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Max guest limit message */
.cwp-guest-picker__limit-msg {
  padding: 6px 20px 2px !important;
  font-size: 12px !important;
  color: var(--cwp-accent, #E07A5F) !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* Guest picker mobile header — hidden on desktop, shown at ≤767px */
.cwp-guest-picker__mobile-header {
  display: none;
}

.cwp-guest-picker__mobile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--cwp-surface-alt, #f5f5f5);
  color: var(--cwp-text);
  cursor: pointer;
}

.cwp-guest-picker__mobile-close:hover {
  background: var(--cwp-border, #ececec);
}

/* ==========================================================================
   Filter Dropdown Enhancements
   ========================================================================== */

/* "per night" label next to price range heading */
.cwp-filter-sort-dropdown__heading-note {
  font-weight: 400;
  font-size: 12px;
  color: var(--cwp-text-muted, #999);
  margin-left: 4px;
}

/* --- Location Option (legacy — kept for any remaining usage) --- */

.cwp-search-bar__option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--cwp-radius-md);
  background: transparent;
  color: var(--cwp-text);
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body);
  font-weight: var(--cwp-weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--cwp-duration-fast) var(--cwp-ease-default);
}

.cwp-search-bar__option:hover {
  background: var(--cwp-surface-alt);
}

.cwp-search-bar__option:focus-visible {
  outline: var(--cwp-focus-ring-width) solid var(--cwp-focus-ring-color);
  outline-offset: var(--cwp-focus-ring-offset);
}

.cwp-search-bar__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--cwp-radius-md);
  background: var(--cwp-surface-alt);
  color: var(--cwp-text-secondary);
  flex-shrink: 0;
}

.cwp-search-bar__option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cwp-search-bar__option-name {
  font-weight: var(--cwp-weight-medium);
  color: var(--cwp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cwp-search-bar__option-detail {
  font-size: var(--cwp-size-body-sm);
  color: var(--cwp-text-muted);
}

/* ==========================================================================
   4. GUEST PICKER
   ========================================================================== */

.cwp-guest-picker__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.cwp-guest-picker__row + .cwp-guest-picker__row {
  border-top: 1px solid var(--cwp-border);
}

.cwp-guest-picker__controls {
  display: flex;
  align-items: center;
  gap: var(--cwp-space-md);
}

.cwp-guest-picker__count {
  min-width: 24px;
  text-align: center;
  font-size: var(--cwp-size-body);
  font-weight: var(--cwp-weight-medium);
  color: var(--cwp-text);
}

/* ==========================================================================
   5. DATE PICKER CONTAINER
   ========================================================================== */

/* Date picker — flush against search bar (no gap) */
.cwp-date-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  background: var(--cwp-surface);
  border: 1px solid var(--cwp-border, #e0e0e0);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  padding: 10px 20px 14px;
  z-index: var(--cwp-z-dropdown);
}

/* Alpine x-transition fade classes for dropdowns & date picker */
.cwp-fade-enter {
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.cwp-fade-enter-start {
  opacity: 0;
  transform: translateY(-8px);
}
.cwp-fade-enter-end {
  opacity: 1;
  transform: translateY(0);
}
.cwp-fade-leave {
  transition: opacity 150ms ease-in, transform 150ms ease-in;
}
.cwp-fade-leave-start {
  opacity: 1;
  transform: translateY(0);
}
.cwp-fade-leave-end {
  opacity: 0;
  transform: translateY(-8px);
}

/* Hide Alpine x-cloak elements before init */
[x-cloak] {
  display: none !important;
}

/* ==========================================================================
   6. FILTER & SORT BUTTON (inside the search bar — Plum Guide style)
   ========================================================================== */

/* Legacy filter-sort-wrap/btn removed — replaced by .cwp-search-bar__actions */

/* --- Filter & Sort Dropdown Panel (positioned in search-bar-wrapper) --- */

/* ======================================================================
   Filter & Sort Dropdown — Premium Redesign
   ====================================================================== */
.cwp-filter-sort-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  background: var(--cwp-surface, #fff);
  border: 1px solid var(--cwp-border, #e0e0e0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
  z-index: var(--cwp-z-dropdown, 100);
  padding: 0;
  overflow: hidden;
}

/* Scrollable body (sections live here, footer stays outside) */
.cwp-filter-sort-dropdown__body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--cwp-border, #e0e0e0) transparent;
}

.cwp-filter-sort-dropdown__section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--cwp-border, #ececec);
}
.cwp-filter-sort-dropdown__section--last {
  border-bottom: none;
}

.cwp-filter-sort-dropdown__heading {
  display: block !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  font-family: var(--cwp-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #999 !important;
  line-height: 1.3 !important;
  border: none !important;
  background: none !important;
}

/* ── Shared Filter Pills ──────────────────────────────────────────────── */
.cwp-filter-sort-dropdown__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Scoped to dropdown to beat .cwp-root .cwp-filter-pill in reset.css */
.cwp-filter-sort-dropdown .cwp-filter-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 34px !important;
  min-width: auto !important;
  padding: 0 14px !important;
  border: 1px solid #ddd !important;
  border-radius: 20px !important;
  background: var(--cwp-surface, #fff) !important;
  color: var(--cwp-text, #333) !important;
  font-family: var(--cwp-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.cwp-filter-sort-dropdown .cwp-filter-pill svg {
  flex-shrink: 0 !important;
  opacity: 0.55 !important;
}
.cwp-filter-sort-dropdown .cwp-filter-pill:hover {
  border-color: var(--cwp-text, #333) !important;
  background: var(--cwp-surface-hover, #fafafa) !important;
}
.cwp-filter-sort-dropdown .cwp-filter-pill.cwp-filter-pill--active {
  background: var(--cwp-primary) !important;
  color: #fff !important;
  border-color: var(--cwp-primary) !important;
  font-weight: 500 !important;
}
.cwp-filter-sort-dropdown .cwp-filter-pill.cwp-filter-pill--active svg {
  opacity: 1 !important;
  color: #fff !important;
}
.cwp-filter-sort-dropdown .cwp-filter-pill.cwp-filter-pill--active:hover {
  background: var(--cwp-primary-dark, var(--cwp-primary)) !important;
  border-color: var(--cwp-primary-dark, var(--cwp-primary)) !important;
}

/* Small pill variant (for expanded amenity categories) */
.cwp-filter-sort-dropdown .cwp-filter-pill.cwp-filter-pill--sm {
  height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

/* ── Price Range ──────────────────────────────────────────────────────── */
.cwp-filter-sort-dropdown__price-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.cwp-filter-sort-dropdown__price-field {
  flex: 1;
}
.cwp-filter-sort-dropdown__price-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: #999 !important;
  margin: 0 0 6px 0 !important;
}
.cwp-filter-sort-dropdown__price-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0 12px;
  height: 40px;
  background: var(--cwp-surface, #fff);
  transition: border-color 0.15s ease;
}
.cwp-filter-sort-dropdown__price-input-wrap:focus-within {
  border-color: var(--cwp-text, #333);
}
.cwp-filter-sort-dropdown__price-currency {
  font-size: 14px;
  font-weight: 500;
  color: #999;
  margin-right: 4px;
}
.cwp-filter-sort-dropdown__price-input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--cwp-text, #333) !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield !important;
  font-family: var(--cwp-font-body) !important;
}
.cwp-filter-sort-dropdown__price-input::-webkit-outer-spin-button,
.cwp-filter-sort-dropdown__price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cwp-filter-sort-dropdown__price-input:hover,
.cwp-filter-sort-dropdown__price-input:focus,
.cwp-filter-sort-dropdown__price-input:active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.cwp-filter-sort-dropdown__price-input::placeholder {
  color: #bbb;
  font-weight: 400;
}
.cwp-filter-sort-dropdown__price-separator {
  font-size: 16px;
  color: #ccc;
  flex-shrink: 0;
  padding-bottom: 4px;
}

/* ── Counter rows (Rooms) ─────────────────────────────────────────────── */
.cwp-filter-sort-dropdown__counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.cwp-filter-sort-dropdown__counter-row + .cwp-filter-sort-dropdown__counter-row {
  border-top: 1px solid var(--cwp-border, #f0f0f0);
}
.cwp-filter-sort-dropdown__counter-label {
  font-size: 14px !important;
  color: var(--cwp-text, #2c2e33) !important;
  font-weight: 400 !important;
}
.cwp-filter-sort-dropdown__counter-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cwp-filter-sort-dropdown__counter-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid #ddd !important;
  border-radius: 50% !important;
  background: var(--cwp-surface, #fff) !important;
  color: var(--cwp-text, #2c2e33) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
}
.cwp-filter-sort-dropdown__counter-btn:hover:not(:disabled) {
  border-color: var(--cwp-text, #333) !important;
}
.cwp-filter-sort-dropdown__counter-btn:disabled {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
}
.cwp-filter-sort-dropdown__counter-value {
  min-width: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--cwp-text, #2c2e33);
}

/* ── "Show all amenities" toggle ──────────────────────────────────────── */
.cwp-filter-sort-dropdown button.cwp-filter-sort-dropdown__show-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 12px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  color: var(--cwp-primary, #f1913d) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: var(--cwp-font-body) !important;
  box-shadow: none !important;
}
.cwp-filter-sort-dropdown button.cwp-filter-sort-dropdown__show-more:hover,
.cwp-filter-sort-dropdown button.cwp-filter-sort-dropdown__show-more:focus {
  text-decoration: underline !important;
  color: var(--cwp-primary, #f1913d) !important;
  background: none !important;
  background-color: transparent !important;
}

/* ── Amenity category groups (inside expanded area) ───────────────────── */
.cwp-filter-sort-dropdown__amenity-group {
  margin-top: 16px;
}
.cwp-filter-sort-dropdown__amenity-group-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Footer (Clear / Done) ────────────────────────────────────────────── */
.cwp-filter-sort-dropdown__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--cwp-border, #ececec);
  background: var(--cwp-surface, #fff);
  border-radius: 0 0 12px 12px;
  flex-shrink: 0;
}

.cwp-filter-sort-dropdown__clear {
  border: none !important;
  background: none !important;
  color: var(--cwp-text-muted, #888) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  padding: 6px 0 !important;
  text-decoration: underline !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.cwp-filter-sort-dropdown__clear:hover {
  color: var(--cwp-text, #2c2e33) !important;
}

.cwp-filter-sort-dropdown__apply {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 0 24px !important;
  border: none !important;
  border-radius: 20px !important;
  background: var(--cwp-primary) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.cwp-filter-sort-dropdown__apply:hover {
  background: var(--cwp-primary-dark, var(--cwp-primary)) !important;
}

/* ==========================================================================
   7. RESULTS HEADER
   ========================================================================== */

.cwp-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
  margin-bottom: 0;
}

.cwp-results-header__info {
  flex: 1;
  min-width: 0;
}

.cwp-results-header__title {
  font-family: var(--cwp-font-body) !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  font-weight: var(--cwp-weight-bold, 700) !important;
  color: var(--cwp-text) !important;
  line-height: var(--cwp-line-height-tight, 1.3) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cwp-results-header__title strong {
  font-weight: inherit;
  color: inherit;
}

.cwp-results-header__actions {
  display: flex;
  align-items: center;
  gap: var(--cwp-space-xs);
  flex-shrink: 0;
}

.cwp-results-header__save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--cwp-radius-md);
  background: transparent;
  color: var(--cwp-text-secondary);
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body-sm);
  font-weight: var(--cwp-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--cwp-duration-fast) var(--cwp-ease-default),
              background-color var(--cwp-duration-fast) var(--cwp-ease-default),
              border-color var(--cwp-duration-fast) var(--cwp-ease-default);
}

.cwp-results-header__save:hover {
  color: var(--cwp-text);
  background: var(--cwp-surface-alt);
  border-color: var(--cwp-border);
}

.cwp-results-header__save:focus-visible {
  outline: var(--cwp-focus-ring-width) solid var(--cwp-focus-ring-color);
  outline-offset: var(--cwp-focus-ring-offset);
}

.cwp-results-header__save svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Dropdown entrance animation — shared by Filter & Sort and other dropdowns */
@keyframes cwp-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   7.5. DESTINATION BAR
   Prefixed with .cwp-root for specificity (0,2,0+) to beat reset.css
   .cwp-root button (0,1,1). Combined with !important to override
   hover/focus/active revert rules. Proven pattern from view-toggle fix.
   ========================================================================== */

.cwp-root .cwp-destination-bar {
  position: relative !important;
  padding: 0 !important;
  border-bottom: none !important;
}

/* Fade-out gradient overlays — shown when chips overflow the scroll container */
.cwp-root .cwp-destination-bar::before,
.cwp-root .cwp-destination-bar::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 32px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0 !important;
  transition: opacity 200ms ease !important;
}
.cwp-root .cwp-destination-bar::before {
  left: 0 !important;
  background: linear-gradient(to right, var(--cwp-surface-alt, #f7f7f7), transparent) !important;
}
.cwp-root .cwp-destination-bar::after {
  right: 0 !important;
  background: linear-gradient(to left, var(--cwp-surface-alt, #f7f7f7), transparent) !important;
}
.cwp-root .cwp-destination-bar--fade-right::after {
  opacity: 1 !important;
}
.cwp-root .cwp-destination-bar--fade-left::before {
  opacity: 1 !important;
}

.cwp-root .cwp-destination-bar__scroll {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 4px 2px !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x proximity !important;
}

.cwp-root .cwp-destination-bar__scroll::-webkit-scrollbar {
  display: none !important;
}

.cwp-root .cwp-destination-bar__chip {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border: 1px solid var(--cwp-border, #ddd) !important;
  border-radius: 999px !important;
  background: var(--cwp-surface, #fff) !important;
  background-color: var(--cwp-surface, #fff) !important;
  color: var(--cwp-text-secondary, #555) !important;
  font-family: var(--cwp-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  margin: 0 !important;
  scroll-snap-align: start !important;
  flex-shrink: 0 !important;
}

.cwp-root .cwp-destination-bar__chip:hover {
  border-color: var(--cwp-text, #222) !important;
  color: var(--cwp-text, #222) !important;
  background: var(--cwp-surface, #fff) !important;
  background-color: var(--cwp-surface, #fff) !important;
  box-shadow: none !important;
}

.cwp-root .cwp-destination-bar__chip:focus,
.cwp-root .cwp-destination-bar__chip:focus-visible {
  border-color: var(--cwp-text, #222) !important;
  color: var(--cwp-text, #222) !important;
  background: var(--cwp-surface, #fff) !important;
  background-color: var(--cwp-surface, #fff) !important;
  outline: 2px solid var(--cwp-focus-ring-color, #4A90D9) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.cwp-root .cwp-destination-bar__chip:active {
  background: var(--cwp-surface, #fff) !important;
  background-color: var(--cwp-surface, #fff) !important;
  color: var(--cwp-text, #222) !important;
  box-shadow: none !important;
}

.cwp-root .cwp-destination-bar__chip--active {
  background: var(--cwp-primary) !important;
  background-color: var(--cwp-primary) !important;
  color: #fff !important;
  border-color: var(--cwp-primary) !important;
}

.cwp-root .cwp-destination-bar__chip--active:hover {
  background: var(--cwp-primary-dark, var(--cwp-primary)) !important;
  background-color: var(--cwp-primary-dark, var(--cwp-primary)) !important;
  color: #fff !important;
  border-color: var(--cwp-primary-dark, var(--cwp-primary)) !important;
  box-shadow: none !important;
}

.cwp-root .cwp-destination-bar__chip--active:focus,
.cwp-root .cwp-destination-bar__chip--active:focus-visible {
  background: var(--cwp-primary) !important;
  background-color: var(--cwp-primary) !important;
  color: #fff !important;
  border-color: var(--cwp-primary) !important;
  outline: 2px solid var(--cwp-focus-ring-color, #4A90D9) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.cwp-root .cwp-destination-bar__chip--active:active {
  background: var(--cwp-primary-dark, var(--cwp-primary)) !important;
  background-color: var(--cwp-primary-dark, var(--cwp-primary)) !important;
  color: #fff !important;
  border-color: var(--cwp-primary-dark, var(--cwp-primary)) !important;
  box-shadow: none !important;
}

.cwp-root .cwp-destination-bar__count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.12) !important;
  color: var(--cwp-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.cwp-root .cwp-destination-bar__chip--active .cwp-destination-bar__count {
  background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.25) !important;
  color: #fff !important;
}

/* "Search this area" and "Search as I move the map" buttons removed —
   country chip filtering handles region selection instead. */

/* ==========================================================================
   8. SPLIT VIEW — Desktop Layout
   ========================================================================== */

.cwp-split-view {
  display: grid;
  /* fr units enable smooth grid-template-columns transition on collapse/expand.
     minmax(0, …) is load-bearing: a bare `Nfr` track has an automatic minimum of
     min-content, so any horizontal scroller inside the results panel (the
     destination chips, the filter chips) contributes its FULL unwrapped width as
     a floor. That blew the results track out past the grid — measured 1463.86px
     in a 1225px grid — and collapsed the map column to 1px, so the map appeared
     not to render at all. minmax(0, …) lets the tracks shrink and the scrollers
     scroll, which is what they were built to do. */
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  /* No fixed height — body scrolls naturally, map is sticky. */
  min-height: calc(100vh - 160px);
}

/* --- Results Panel (flows naturally — page-level scroll) --- */

.cwp-split-view__results {
  overflow: visible;
  /* Belt-and-braces with the minmax(0, …) above: a grid ITEM also defaults to
     min-width:auto, so without this the item itself refuses to shrink below its
     content even once the track can. */
  min-width: 0;
  padding: 0 var(--cwp-space-lg);
  background: var(--cwp-surface-alt, #f7f7f7);  /* Match map panel bg — no white "container" leak */
}

/* --- Results Grid: card styling inside split-view --- */

@media (min-width: 1024px) {
  /* Cards inside split-view grid should fill their column — the 420px
     max-width from variables.css / frontend.css is for standalone usage
     (shortcodes, widgets).  Inside the search grid the columns already
     control card width via repeat(2, 1fr). */
  .cwp-split-view__results .cwp-property-grid .cwp-card {
    max-width: none;
    border-radius: var(--cwp-card-border-radius, 12px);
  }

  /* List view cards: straight edges, no border-radius */
  .cwp-split-view__results .cwp-property-grid--list .cwp-card {
    border-radius: 0;
  }

  /* List view: single column override */
  .cwp-split-view__results .cwp-property-grid--list {
    grid-template-columns: 1fr;
  }
}

/* --- Map Panel --- */

.cwp-split-view__map {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--cwp-surface-alt);
  align-self: start;       /* keep sticky from stretching with grid row */
}

/* When WP admin bar is present, offset the sticky top and reduce height */
.admin-bar .cwp-split-view__map {
  top: 32px;
  height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .cwp-split-view__map {
    top: 46px;
    height: calc(100vh - 46px);
  }
}

#cwp-search-map {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   8.5. MAP COLLAPSE/EXPAND TOGGLE (Desktop — Plum Guide style)
   Button is a direct child of .cwp-split-view (NOT inside .cwp-split-view__map)
   so it remains visible when the map fades to opacity:0 on collapse.
   ========================================================================== */

/* Toggle button — positioned at the boundary between results and map.
   Horizontal position (right) is controlled by JS via _positionToggle(). */
.cwp-map-toggle {
  display: none;                /* Hidden on mobile/tablet; shown at ≥1025px */
  position: fixed;
  top: 50%;
  right: 0;                     /* Safe default before JS calculates exact position */
  transform: translateY(-50%);
  width: 32px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cwp-border, #e0e0e0);
  border-radius: 8px 0 0 8px;
  background: var(--cwp-surface, #fff);
  color: var(--cwp-text-secondary, #6a6a6a);
  cursor: pointer;
  z-index: 1000;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
  padding: 0;
  transition: background 150ms ease,
              color 150ms ease,
              box-shadow 150ms ease,
              right 400ms ease;
}

.cwp-map-toggle:hover {
  background: var(--cwp-surface-alt, #f5f5f5);
  color: var(--cwp-text, #222);
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.10);
}

.cwp-map-toggle:focus-visible {
  outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, currentColor);
  outline-offset: var(--cwp-focus-ring-offset, 2px);
}

.cwp-map-toggle svg {
  transition: transform 300ms ease;
  flex-shrink: 0;
}

/* When collapsed, chevron flips to point left (= "expand map") */
.cwp-map-toggle--collapsed svg {
  transform: rotate(180deg);
}

/* Show toggle only on desktop where split-view is active */
@media (min-width: 1025px) {
  .cwp-map-toggle {
    display: inline-flex;
  }
}

/* ── Grid uses fr units for smooth animation ── */
.cwp-split-view {
  transition: grid-template-columns 400ms ease;
}

/* ── Collapsed state — !important to beat responsive media queries ── */
.cwp-split-view--map-collapsed {
  /* minmax(0, …) for the same reason as the base rule — a bare 1fr floors at
     min-content and the results panel then overflows the page horizontally. */
  grid-template-columns: minmax(0, 1fr) 0fr !important;
}

.cwp-split-view--map-collapsed .cwp-split-view__map {
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Map panel: smooth fade in/out, explicit overflow for expanded state */
.cwp-split-view__map {
  transition: opacity 300ms ease;
  overflow: visible;
}

/* ==========================================================================
   9. CARD GRID
   ========================================================================== */

.cwp-card-grid,
.cwp-search-page .cwp-property-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
  padding-bottom: var(--cwp-space-2xl);
}

/* ── Map expanded: always 2 columns inside split-view (space is limited) ── */
.cwp-split-view__results .cwp-property-grid:not(.cwp-property-grid--list) {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* ── Map collapsed: results go full-width, show more columns ── */
.cwp-split-view--map-collapsed .cwp-split-view__results .cwp-property-grid:not(.cwp-property-grid--list) {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ==========================================================================
   10. MAP FLOATING ACTION BUTTON (Mobile)
   ========================================================================== */

.cwp-map-fab {
  /* display: flex for icon + text layout.  Alpine x-show toggles inline
     display:none, which beats this non-!important rule.  reset.css ≥1025px
     hides with display:none!important on desktop. */
  display: flex;
  position: fixed;
  bottom: var(--cwp-space-lg);
  left: 50%;
  transform: translateX(-50%);
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: var(--cwp-radius-full);
  background: var(--cwp-text);
  color: var(--cwp-surface);
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body-sm);
  font-weight: var(--cwp-weight-semibold);
  box-shadow: var(--cwp-shadow-xl);
  cursor: pointer;
  z-index: var(--cwp-z-sticky);
  transition: transform var(--cwp-duration-fast) var(--cwp-ease-default),
              box-shadow var(--cwp-duration-fast) var(--cwp-ease-default);
  align-items: center;
  justify-content: center;
  gap: var(--cwp-space-sm);
}

.cwp-map-fab:hover {
  transform: translateX(-50%) scale(1.05);
}

.cwp-map-fab:active {
  transform: translateX(-50%) scale(0.98);
}

.cwp-map-fab:focus-visible {
  outline: var(--cwp-focus-ring-width) solid var(--cwp-focus-ring-color);
  outline-offset: var(--cwp-focus-ring-offset);
}

.cwp-map-fab svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- "Show List" close button (same layout pattern as FAB) --- */
.cwp-map-close {
  display: flex;
  position: fixed;
  bottom: var(--cwp-space-lg);
  left: 50%;
  transform: translateX(-50%);
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--cwp-border);
  border-radius: var(--cwp-radius-full);
  background: var(--cwp-surface);
  color: var(--cwp-text);
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body-sm);
  font-weight: var(--cwp-weight-semibold);
  box-shadow: var(--cwp-shadow-xl);
  cursor: pointer;
  z-index: var(--cwp-z-sticky);
  align-items: center;
  justify-content: center;
  gap: var(--cwp-space-sm);
}

.cwp-map-close svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ==========================================================================
   11. PAGINATION
   ========================================================================== */

.cwp-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cwp-space-md);
  padding: var(--cwp-space-xl) 0 var(--cwp-space-2xl);
}

/* --- Pagination Nav (wraps prev/pages/next) --- */

.cwp-pagination__nav {
  display: none; /* hidden by default — infinite scroll replaces it */
  align-items: center;
  justify-content: center;
  gap: var(--cwp-space-sm);
}

/* --- Page Number Links --- */

.cwp-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--cwp-space-xs);
}

.cwp-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--cwp-space-sm);
  border: 1px solid transparent;
  border-radius: var(--cwp-radius-md);
  background: transparent;
  color: var(--cwp-text);
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body-sm);
  font-weight: var(--cwp-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--cwp-duration-fast) var(--cwp-ease-default),
              background-color var(--cwp-duration-fast) var(--cwp-ease-default);
}

.cwp-pagination__page:hover {
  background: var(--cwp-surface-alt);
  border-color: var(--cwp-border);
}

.cwp-pagination__page--current {
  background: var(--cwp-text);
  color: var(--cwp-surface);
  border-color: var(--cwp-text);
  font-weight: var(--cwp-weight-semibold);
  pointer-events: none;
}

.cwp-pagination__page:focus-visible {
  outline: var(--cwp-focus-ring-width) solid var(--cwp-focus-ring-color);
  outline-offset: var(--cwp-focus-ring-offset);
}

/* --- Prev/Next Buttons --- */

.cwp-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cwp-space-xs);
  min-width: 40px;
  height: 40px;
  padding: 0 var(--cwp-space-md);
  border: 1px solid var(--cwp-border);
  border-radius: var(--cwp-radius-md);
  background: var(--cwp-surface);
  color: var(--cwp-text);
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body-sm);
  font-weight: var(--cwp-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--cwp-duration-fast) var(--cwp-ease-default),
              background-color var(--cwp-duration-fast) var(--cwp-ease-default);
}

.cwp-pagination__btn:hover {
  border-color: var(--cwp-text);
  background: var(--cwp-surface-alt);
}

.cwp-pagination__btn--prev svg {
  margin-right: var(--cwp-space-xs);
}

.cwp-pagination__btn--next svg {
  margin-left: var(--cwp-space-xs);
}

.cwp-pagination__btn--active {
  background: var(--cwp-text);
  color: var(--cwp-surface);
  border-color: var(--cwp-text);
}

.cwp-pagination__btn--active:hover {
  background: var(--cwp-text);
  color: var(--cwp-surface);
}

.cwp-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cwp-pagination__btn:focus-visible {
  outline: var(--cwp-focus-ring-width) solid var(--cwp-focus-ring-color);
  outline-offset: var(--cwp-focus-ring-offset);
}

.cwp-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--cwp-text-muted);
  font-size: var(--cwp-size-body-sm);
  user-select: none;
}

/* --- Infinite Scroll Sentinel --- */

.cwp-pagination__sentinel {
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --- Infinite Scroll Loader --- */

.cwp-infinite-loader {
  display: none;
  padding: 32px 0;
  text-align: center;
  color: var(--cwp-text-muted, #8899A6);
}

.cwp-infinite-loader svg {
  width: 24px;
  height: 24px;
  opacity: 0.5;
}

/* --- End State (all results loaded) --- */

.cwp-pagination__end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 0 48px;
  text-align: center;
}

.cwp-pagination__end-divider {
  width: 40px;
  height: 1px;
  background: var(--cwp-border, #ececec);
}

.cwp-pagination__end-text {
  font-family: var(--cwp-font-body, sans-serif);
  font-size: 14px;
  color: var(--cwp-text-muted, #8899A6);
  margin: 0;
  font-weight: 400;
}

/* Back to top button — pill-shaped, minimal */
.cwp-pagination__top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--cwp-border, #ececec);
  border-radius: 9999px;
  background: var(--cwp-surface, #FFFFFF);
  color: var(--cwp-text-secondary, #4A6274);
  font-family: var(--cwp-font-body, sans-serif);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}

.cwp-pagination__top:hover {
  border-color: var(--cwp-text, #1A2B3C);
  color: var(--cwp-text, #1A2B3C);
}

.cwp-pagination__top:focus-visible {
  outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, #1B6B93);
  outline-offset: var(--cwp-focus-ring-offset, 2px);
}

.cwp-pagination__top svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ==========================================================================
   11.5. SEARCH MAP
   ========================================================================== */

.cwp-search-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 600px;
  background: var(--cwp-surface-alt);
}

/* ---------------------------------------------------------------------------
   Map Skeleton — Stylized placeholder that mimics a map layout
   --------------------------------------------------------------------------- */
.cwp-map-skeleton {
  position: absolute;
  inset: 0;
  background: var(--cwp-skeleton-base, #eef2f5);
  z-index: 1;
  overflow: hidden;
}

/* Road grid container */
.cwp-map-skeleton__grid {
  position: absolute;
  inset: 0;
}

/* Road lines */
.cwp-map-skeleton__road {
  position: absolute;
  background: var(--cwp-skeleton-highlight, #dde3e8);
  border-radius: 1px;
}

.cwp-map-skeleton__road--h {
  left: 0;
  right: 0;
  height: 2px;
}

.cwp-map-skeleton__road--v {
  top: 0;
  bottom: 0;
  width: 2px;
}

.cwp-map-skeleton__road--major {
  background: var(--cwp-skeleton-highlight, #d0d8de);
}

.cwp-map-skeleton__road--major.cwp-map-skeleton__road--h {
  height: 4px;
}

.cwp-map-skeleton__road--major.cwp-map-skeleton__road--v {
  width: 4px;
}

/* Diagonal road */
.cwp-map-skeleton__road--diag {
  top: 0;
  left: 0;
  width: 141%;
  height: 3px;
  background: var(--cwp-skeleton-highlight, #d5dce2);
  transform-origin: top left;
  transform: rotate(32deg);
}

/* Fake price marker pills */
.cwp-map-skeleton__marker {
  position: absolute;
  width: 48px;
  height: 24px;
  background: var(--cwp-skeleton-highlight, #d5dce2);
  border-radius: 4px;
  transform: translate(-50%, -50%);
}

/* Fake zoom controls (top-right) */
.cwp-map-skeleton__controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.cwp-map-skeleton__btn {
  width: 32px;
  height: 32px;
  background: var(--cwp-surface, #fff);
}

/* Shimmer sweep animation */
.cwp-map-skeleton__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.4) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: cwp-map-shimmer 2s ease-in-out infinite;
}

@keyframes cwp-map-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   12. SORT DROPDOWN  (uses Alpine x-show for visibility)
   ========================================================================== */

/* NOTE: Visibility is controlled by Alpine x-show (display: none/block).
   Do NOT add opacity/visibility/pointer-events here — they conflict. */

/* ==========================================================================
   13. NO RESULTS STATE
   ========================================================================== */

.cwp-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--cwp-space-4xl) var(--cwp-space-lg);
  text-align: center;
  grid-column: 1 / -1;
}

.cwp-no-results__icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--cwp-space-lg);
  color: var(--cwp-text-muted);
  opacity: 0.5;
}

.cwp-no-results__title {
  font-family: var(--cwp-font-display);
  font-size: var(--cwp-size-h2);
  font-weight: var(--cwp-weight-bold);
  color: var(--cwp-text);
  margin-bottom: var(--cwp-space-sm);
  line-height: var(--cwp-line-height-tight);
}

.cwp-no-results__text {
  font-size: var(--cwp-size-body);
  color: var(--cwp-text-secondary);
  max-width: 400px;
  line-height: var(--cwp-line-height-relaxed);
}

/* ==========================================================================
   14. LOADING STATES
   ========================================================================== */

.cwp-search-page--loading .cwp-card-grid,
.cwp-search-page--loading .cwp-property-grid {
  opacity: 0.5;
  pointer-events: none;
}

/* Skeleton shimmer */
@keyframes cwp-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.cwp-skeleton {
  background: linear-gradient(
    90deg,
    var(--cwp-skeleton-base, #e8ecef) 0%,
    var(--cwp-skeleton-highlight, #d5dbe0) 40%,
    var(--cwp-skeleton-base, #e8ecef) 80%
  );
  background-size: 200% 100%;
  animation: cwp-shimmer 1.5s var(--cwp-ease-default) infinite;
  border-radius: var(--cwp-radius-md);
}

.cwp-skeleton--card {
  height: var(--cwp-card-min-height, 380px);
  border-radius: var(--cwp-card-border-radius, var(--cwp-radius-lg));
}

/* Infinite scroll skeleton wrapper — transparent to grid so children stay as grid items */
.cwp-infinite-skeletons {
  display: contents;
}

.cwp-skeleton--text {
  height: 16px;
  width: 100%;
  margin-bottom: var(--cwp-space-sm);
}

.cwp-skeleton--text-sm {
  height: 12px;
  width: 60%;
}

/* ==========================================================================
   15. MOBILE SEARCH OVERLAY
   ========================================================================== */

/*
 * NOTE: the search-bar widget lifts its whole modal layer above host-theme
 * sticky headers by setting --cwp-z-modal inline on its root element (see
 * templates/shortcodes/search-bar.php). That raises this overlay (uses
 * var(--cwp-z-modal)) AND its field pickers below (calc(var(--cwp-z-modal) + 10))
 * together, preserving the "pickers sit 10 above the overlay" relationship. It's
 * set inline (not here) so a "Remove Unused CSS" optimizer can't strip or
 * stale-cache it. Default 1040/1050 lost to theme headers and clipped the top.
 */
.cwp-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--cwp-surface);
  z-index: var(--cwp-z-modal);
  flex-direction: column;
  overflow-y: auto;
}

/*
 * The full search-page filter overlay (partials/search-filters.php) toggles this
 * class via x-show + x-transition. The compact [bly_search_bar] widget overlay
 * does NOT use this class — it owns `display` via an inline :style binding so it
 * survives "Remove Unused CSS" optimizers that would prune this dynamic class.
 */
.cwp-search-overlay--visible {
  display: flex;
}

.cwp-search-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cwp-space-md) var(--cwp-space-lg);
  border-bottom: 1px solid var(--cwp-border);
}

.cwp-search-overlay__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--cwp-border);
  border-radius: var(--cwp-radius-full);
  background: var(--cwp-surface);
  color: var(--cwp-text);
  cursor: pointer;
  transition: background-color var(--cwp-duration-fast) var(--cwp-ease-default);
}

.cwp-search-overlay__close:hover {
  background: var(--cwp-surface-alt);
}

.cwp-search-overlay__close:focus-visible {
  outline: var(--cwp-focus-ring-width) solid var(--cwp-focus-ring-color);
  outline-offset: var(--cwp-focus-ring-offset);
}

.cwp-search-overlay__body {
  padding: var(--cwp-space-lg);
  flex: 1;
}

.cwp-search-overlay__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 72px;
  padding: var(--cwp-space-md) var(--cwp-space-lg);
  border-bottom: 1px solid var(--cwp-border);
  cursor: pointer;
}

.cwp-search-overlay__field:last-child {
  border-bottom: none;
}

.cwp-search-overlay__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cwp-space-md) var(--cwp-space-lg);
  border-top: 1px solid var(--cwp-border);
}

.cwp-search-overlay__clear {
  font-size: var(--cwp-size-body);
  font-weight: var(--cwp-weight-semibold);
  color: var(--cwp-text);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--cwp-font-body);
}

.cwp-search-overlay__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cwp-space-sm);
  height: 48px;
  padding: 0 var(--cwp-space-lg);
  border: none;
  border-radius: var(--cwp-radius-md);
  background: var(--cwp-gradient);
  color: #FFFFFF;
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body);
  font-weight: var(--cwp-weight-semibold);
  cursor: pointer;
}

/* ==========================================================================
   16. MOBILE COLLAPSED SEARCH ("Where to?" button)
   ========================================================================== */

.cwp-search-trigger {
  display: none; /* Hidden on desktop */
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  background: var(--cwp-surface, #fff);
  border: none;
  border-bottom: 1px solid var(--cwp-border, #ececec);
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  color: var(--cwp-text);
  font-family: var(--cwp-font-body);
  font-size: 14px;
  font-weight: var(--cwp-weight-medium, 500);
  cursor: pointer;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.cwp-search-trigger:hover {
  background: var(--cwp-surface-alt, #f7f7f7);
}

.cwp-search-trigger:active {
  transform: scale(0.99);
}

.cwp-search-trigger:focus-visible {
  outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color);
  outline-offset: var(--cwp-focus-ring-offset, 2px);
}

.cwp-search-trigger__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--cwp-radius-full, 9999px);
  background: var(--cwp-gradient);
  color: #FFFFFF;
  flex-shrink: 0;
}

.cwp-search-trigger__icon svg {
  width: 13px;
  height: 13px;
}

.cwp-search-trigger__text {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
  overflow: hidden;
}

.cwp-search-trigger__title {
  font-weight: var(--cwp-weight-semibold, 600);
  font-size: 14px;
  color: var(--cwp-text);
  line-height: 1.2;
}

.cwp-search-trigger__subtitle {
  font-size: 12px;
  color: var(--cwp-text-muted, #717171);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   17. MOBILE MAP MODAL
   ========================================================================== */

.cwp-map-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--cwp-z-modal);
  flex-direction: column;
}

.cwp-map-modal--visible {
  display: flex;
}

.cwp-map-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--cwp-overlay);
}

.cwp-map-modal__content {
  position: relative;
  flex: 1;
  margin-top: 60px;
  background: var(--cwp-surface);
  border-radius: var(--cwp-radius-xl) var(--cwp-radius-xl) 0 0;
  overflow: hidden;
}

.cwp-map-modal__close {
  position: absolute;
  top: var(--cwp-space-md);
  right: var(--cwp-space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--cwp-radius-full);
  background: var(--cwp-surface);
  color: var(--cwp-text);
  box-shadow: var(--cwp-shadow-md);
  cursor: pointer;
  z-index: 1;
  transition: background-color var(--cwp-duration-fast) var(--cwp-ease-default);
}

.cwp-map-modal__close:hover {
  background: var(--cwp-surface-alt);
}

.cwp-map-modal__close:focus-visible {
  outline: var(--cwp-focus-ring-width) solid var(--cwp-focus-ring-color);
  outline-offset: var(--cwp-focus-ring-offset);
}

.cwp-map-modal__map {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   17b. MAP PEEK CARDS — Mobile horizontal scroll strip at bottom of map overlay
   ========================================================================== */

.cwp-map-peek {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1101; /* above map overlay (z:1100) */
  padding: 0 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  gap: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.12) 0%, transparent 100%);
  pointer-events: none;
}

.cwp-map-peek::-webkit-scrollbar {
  display: none;
}

.cwp-map-peek--visible {
  display: flex;
}

.cwp-map-peek__card {
  display: inline-flex;
  flex-shrink: 0;
  width: 280px;
  height: 88px;
  background: var(--cwp-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  text-decoration: none;
  color: var(--cwp-text);
  scroll-snap-align: start;
  transition: transform 150ms ease;
  pointer-events: auto;
}

.cwp-map-peek__card:active {
  transform: scale(0.97);
}

.cwp-map-peek__img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 12px 0 0 12px;
}

.cwp-map-peek__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 12px;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
}

.cwp-map-peek__title {
  font-family: var(--cwp-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cwp-text);
}

.cwp-map-peek__price {
  font-family: var(--cwp-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--cwp-text);
  margin-top: 4px;
}

.cwp-map-peek__price span {
  font-weight: 400;
  color: var(--cwp-text-muted, #717171);
  font-size: 12px;
}

/* ==========================================================================
   18. RESPONSIVE — Tablet (640px - 1279px)
   ========================================================================== */

@media (max-width: 1279px) {
  .cwp-split-view {
    /* minmax(0, …) — this rule comes AFTER the base one, so a bare `50fr` here
       would re-introduce the min-content floor that collapses the map column. */
    grid-template-columns: minmax(0, 50fr) minmax(0, 50fr);
  }

  .cwp-card-grid,
  .cwp-search-page .cwp-property-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cwp-space-md);
  }

  .cwp-search-bar-wrapper {
    max-width: 100%;
  }

  .cwp-search-bar {
    height: 50px;
  }

  .cwp-search-bar__field {
    padding: 6px 10px;
  }

  .cwp-search-bar__label {
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  /* Narrow split: swap text labels for icons */
  .cwp-search-bar__label-icon {
    display: block;
  }
  .cwp-search-bar__label-text {
    display: none;
  }

  .cwp-search-bar__value {
    font-size: 13px;
  }

  /* Action buttons on tablet — keep 40px for proper circular shape */
  .cwp-search-bar__action {
    width: 40px !important;
    height: 40px !important;
  }

  .cwp-search-bar__action svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Results header — hide save search text on tablet */
  .cwp-results-header__save span {
    display: none;
  }
}

/* ==========================================================================
   19. RESPONSIVE — Mobile (<768px)
   ========================================================================== */

@media (max-width: 767px) {
  /* Restore normal body scroll on mobile (no split view) */
  body.cwp-search-active {
    overflow: visible !important;
    height: auto !important;
  }

  /* Destination bar — mobile touch-friendly sizing */
  .cwp-root .cwp-destination-bar {
    padding: 0 !important;
  }
  .cwp-root .cwp-destination-bar__scroll {
    padding: 4px var(--cwp-space-md, 16px) !important;
  }

  .cwp-root .cwp-destination-bar__chip {
    padding: 8px 16px !important;
    font-size: 14px !important;
  }

  /* Hide desktop search bar visually but keep in DOM so that position:fixed
     children (date picker, guest picker, location dropdown) can still render
     when opened from the mobile search overlay. Using visibility:hidden +
     collapsed sizing instead of display:none so children can override with
     visibility:visible.

     STACKING (fixed 2026-06-23, root-caused on a live site): the wrapper MUST
     sit ABOVE the mobile search overlay (z 2147483637), NOT at z-index:auto.
     The pickers are position:fixed DESCENDANTS of this wrapper; on real host
     themes the wrapper becomes its own stacking context (a transform / filter /
     contain / will-change on it or an ancestor — page-builder heroes do this),
     which CONFINES the pickers. A confined descendant's z-index can't escape its
     context, so the picker's own max-int z-index can NOT lift it past the
     overlay (verified live: picker computed z=2147483647, display:block,
     fullscreen, yet elementFromPoint at its centre returned cwp-search-overlay__body).
     The reliable lever is THIS wrapper's z-index, because the wrapper and the
     overlay are DIRECT SIBLINGS under .cwp-search-bar-shortcode → they compare
     by their OWN z-index regardless of any inner stacking context. The earlier
     z-index:auto here (meant to "let children escape to the parent context")
     FAILED for exactly this reason. While no picker is open the wrapper is
     visibility:hidden + 0x0 + pointer-events:none, so being above the overlay is
     harmless — taps pass straight through to the overlay fields. */
  .cwp-search-bar-wrapper {
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
    pointer-events: none;
    z-index: 2147483646 !important; /* one above the overlay (…637), one below the picker (…647).
       !important is REQUIRED, verified live: the base `.cwp-search-bar-wrapper { z-index: var(--cwp-z-dropdown) }`
       rule (line ~86) wins the cascade on this site — the optimizer combines/reorders CSS so "later in the
       file" isn't reliable, and equal specificity then lets the base rule win → the wrapper computed to 1001
       and caged the picker below the overlay. A non-!important override here computes to 1001 too. Forcing it
       beats the (non-!important) base rule deterministically. Confirmed: with the wrapper forced to this value,
       elementFromPoint at the open picker's centre returns the picker, not cwp-search-overlay__body. */
  }

  /* Date picker: fullscreen overlay on mobile (escapes hidden wrapper) */
  .cwp-date-picker {
    visibility: visible;
    position: fixed;
    inset: 0;
    width: 100% !important;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    z-index: 2147483647; /* max int — above the mobile search overlay (2147483637). HARDCODED, not calc(var(--cwp-z-modal)+10): the overlay's z is a runtime Alpine :style binding (robust), but the picker's was the only consumer of the STATIC inline --cwp-z-modal on the widget root, which an HTML optimizer that strips style="" attributes drops → picker fell to 1010 → rendered BEHIND the opaque overlay → "fields not clickable". Hardcoding removes that single point of failure. */
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    padding: 0;
    border: none;
    box-shadow: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .cwp-date-picker__mobile-header {
    display: flex;
  }

  .cwp-date-picker__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--cwp-border-light, #f0f0f0);
    padding: 12px 16px;
  }

  /* Guest picker: tappable bottom-sheet on mobile.
   * Adds a visible border + shadow so the modal stands apart from
   * the page underneath (previously rendered as a borderless white
   * panel that looked like it bled into the page on light backgrounds). */
  /* 1.1.9: stronger framing on the mobile guests modal — hosts reported
   * the white panel looked like it bled into a white page underneath. We
   * now ship a 2px primary-colour edge plus a deeper ambient shadow. */
  .cwp-search-bar__dropdown--guests {
    visibility: visible;
    /* Layout-critical props are !important so the fullscreen mobile sheet wins
       over the base `.cwp-search-bar__dropdown--guests { position:absolute; width:100% }`
       rule (line ~509, width relative to the narrow guests FIELD CELL). On hosts
       whose CSS optimizer combines + reorders rules, equal-specificity "later in
       the file" is NOT reliable, so the base rule won the cascade → position:absolute
       sized the panel to the ~410px field cell instead of the viewport ("not full
       width", reported live 2026-06-23). The date picker never had this bug because
       its width already carried !important (line ~2859). Same cascade trap as the
       wrapper z-index — force it. */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 100vh;
    border-radius: 0;
    z-index: 2147483647; /* max int — above the mobile search overlay (2147483637). HARDCODED, not calc(var(--cwp-z-modal)+10): the overlay's z is a runtime Alpine :style binding (robust), but the picker's was the only consumer of the STATIC inline --cwp-z-modal on the widget root, which an HTML optimizer that strips style="" attributes drops → picker fell to 1010 → rendered BEHIND the opaque overlay → "fields not clickable". Hardcoding removes that single point of failure. */
    pointer-events: auto;
    padding: 0;
    background: var(--cwp-surface, #fff);
    border: 2px solid var(--cwp-border, #d4d4d8);
    box-shadow:
      0 -16px 60px rgba(0, 0, 0, 0.25),
      0 -4px 12px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(0, 0, 0, 0.04) inset;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .cwp-search-bar__dropdown--guests .cwp-guest-picker {
    flex: 1 1 auto;
    padding: 0 16px;
    overflow-y: auto;
  }

  .cwp-search-bar__dropdown--guests .cwp-guest-picker__footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--cwp-border-light, #f0f0f0) !important;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom)) !important;
    background: var(--cwp-surface, #fff) !important;
  }

  .cwp-search-bar__dropdown--guests .cwp-guest-picker__done {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }

  /* Location picker: fullscreen overlay on mobile */
  .cwp-search-bar__dropdown--location {
    visibility: visible;
    /* Layout-critical props !important for the same reason as the guests sheet
       above — beats the base `position:absolute; width:100%` (line ~524, relative
       to the narrow location field cell) on optimizer-reordered CSS. */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 100vh;
    border-radius: 0;
    z-index: 2147483647; /* max int — above the mobile search overlay (2147483637). HARDCODED, not calc(var(--cwp-z-modal)+10): the overlay's z is a runtime Alpine :style binding (robust), but the picker's was the only consumer of the STATIC inline --cwp-z-modal on the widget root, which an HTML optimizer that strips style="" attributes drops → picker fell to 1010 → rendered BEHIND the opaque overlay → "fields not clickable". Hardcoding removes that single point of failure. */
    pointer-events: auto;
    background: var(--cwp-surface, #fff);
    border: none;
    box-shadow: none;
    overflow-y: auto;
  }

  /* Filter/Sort panel: also needs visibility override */
  .cwp-filter-sort-dropdown {
    visibility: visible;
    pointer-events: auto;
  }

  .cwp-search-trigger {
    display: flex;
  }

  /* Show map FAB — primary bg, white text.
     z-index stays at var(--cwp-z-sticky) (1020) from reset.css so the
     search overlay (z-modal: 1040) can cover it when filters are open. */
  .cwp-map-fab {
    display: inline-flex;
    background: var(--cwp-primary, #1a3a4a);
    color: #fff;
    padding: 12px 24px;
    box-shadow: var(--cwp-shadow-lg);
  }

  /* "Show list" button: sits above peek cards.
     Peek cards total: 88px card + max(16px, safe-area) bottom-pad.
     Button: 44px tall + 12px gap above cards. */
  .cwp-map-close {
    bottom: calc(88px + max(16px, env(safe-area-inset-bottom)) + 12px);
    z-index: 1102;
    background: var(--cwp-surface, #fff);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }

  /* Single column, no split view */
  .cwp-split-view {
    display: block;
    height: auto;
    overflow: visible;
  }

  .cwp-split-view__results {
    height: auto;
    overflow: visible;
    padding: 0 var(--cwp-space-md);
  }

  .cwp-split-view__map {
    display: none;
  }

  /* ====================================================================
     MOBILE MAP — Full-screen overlay.

     The map panel is a child of .cwp-split-view, which can interfere with
     `position: fixed` if any ancestor has `transform`, `filter`, or
     `will-change`.  To guarantee viewport coverage:
       - Use fixed positioning with !important
       - Override the inline min-height: 600px on #cwp-search-map
       - Force overflow: hidden to prevent scroll
       - Use absolute positioning on the inner map for 100% fill
     ==================================================================== */
  .cwp-split-view__map--mobile-visible {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* dynamic viewport height for mobile Safari */
    z-index: 1100 !important;
    overflow: hidden !important;
    background: #e8e8e8;
    /* Escape any containing block created by ancestors */
    transform: none !important;
    will-change: auto !important;
  }

  /* Inner map element: override inline style="min-height:600px" */
  .cwp-split-view__map--mobile-visible #cwp-search-map {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important; /* override inline min-height: 600px */
  }

  /* Leaflet container must also fill */
  .cwp-split-view__map--mobile-visible .leaflet-container {
    width: 100% !important;
    height: 100% !important;
  }

  /* Hide skip link in mobile map view */
  .cwp-split-view__map--mobile-visible .cwp-skip-link {
    display: none !important;
  }

  .cwp-card-grid,
  .cwp-search-page .cwp-property-grid {
    grid-template-columns: 1fr;
    gap: var(--cwp-space-md);
    padding-bottom: calc(var(--cwp-space-2xl) + 60px); /* Room for FAB */
  }

  /* Override the desktop !important 2-col rule for split-view grid */
  .cwp-split-view__results .cwp-property-grid:not(.cwp-property-grid--list) {
    grid-template-columns: 1fr !important;
  }

  /* Results header — stack on mobile */
  .cwp-results-header {
    flex-wrap: wrap;
    gap: var(--cwp-space-xs);
    padding: var(--cwp-space-sm) 0;
    margin-bottom: var(--cwp-space-sm);
  }

  .cwp-results-header__actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* Hide view toggle & save button on mobile — not needed */
  .cwp-view-toggle {
    display: none !important;
  }

  .cwp-results-header__save {
    display: none;
  }

  /* Filter & Sort dropdown — full width on mobile.
     z-index must be above the FAB (z-sticky: 1020) so the dropdown
     covers it when open. Uses z-modal (1040). */
  .cwp-filter-sort-dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--cwp-border, #e0e0e0);
    z-index: var(--cwp-z-modal, 1040);
  }
  .cwp-filter-sort-dropdown__footer {
    border-radius: 0;
  }

  /* Date picker: fullscreen (defined in wrapper section above) — no extra rules needed */

  /* Dropdown: fullscreen on mobile (overrides desktop positioning).
   * Layout-critical props are !important: a TABLET rule
   * `.cwp-search-bar__dropdown { width: min(400px, calc(100vw - 48px)) }`
   * (line ~5180, "narrower tablets") ALSO matches phones and, at the SAME
   * specificity with no !important, won the cascade on this site's
   * combine/reorder optimizer → the guests/location sheets sized to ~377px at a
   * 425px viewport instead of full width (reported live 2026-06-23). !important
   * makes the fullscreen mobile rule beat that tablet rule deterministically,
   * for ALL search-bar dropdowns (guests + location both carry this base class;
   * the date picker is .cwp-date-picker and is unaffected). */
  .cwp-search-bar__dropdown {
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    border-radius: 0;
    box-shadow: none;
    border: none;
    overflow-y: auto;
    /* Deploy sentinel — bump this string whenever search.css changes materially.
     * Read it live with getComputedStyle(picker).getPropertyValue('--bly-search-css-rev')
     * to PROVE the browser/CDN/optimizer is serving THIS revision vs a cached copy. */
    --bly-search-css-rev: "2026-06-23-guests-fullwidth";
  }

  /* Pagination compact */
  .cwp-pagination {
    gap: var(--cwp-space-xs);
    padding: var(--cwp-space-lg) 0 var(--cwp-space-2xl);
  }

  .cwp-pagination__btn {
    min-width: 36px;
    height: 36px;
  }
}

/* ==========================================================================
   20. RESPONSIVE — Large Desktop (1280px+)
   ========================================================================== */

@media (min-width: 1280px) {
  /* 3-col for standalone grids (not inside split-view where space is limited) */
  .cwp-card-grid,
  .cwp-search-page .cwp-property-grid:not(.cwp-split-view__results .cwp-property-grid) {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Map collapsed at ≥1280px: 4 columns */
  .cwp-split-view--map-collapsed .cwp-split-view__results .cwp-property-grid:not(.cwp-property-grid--list) {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Map collapsed at ≥1920px: 5 columns for ultra-wide */
@media (min-width: 1920px) {
  .cwp-split-view--map-collapsed .cwp-split-view__results .cwp-property-grid:not(.cwp-property-grid--list) {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* Wide desktop: map grows, results still comfortable */
@media (min-width: 1440px) {
  .cwp-split-view {
    grid-template-columns: 42fr 58fr;
  }

  .cwp-search-bar {
    height: 58px;
  }
}

/* Very large screens: map gains more room */
@media (min-width: 1536px) {
  .cwp-split-view {
    grid-template-columns: 40fr 60fr;
  }
}

/* ==========================================================================
   21. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cwp-search-bar,
  .cwp-search-bar__field,
  .cwp-search-bar__action,
  .cwp-search-bar__dropdown,
  .cwp-search-bar__option,
  .cwp-filter-sort-dropdown,
  .cwp-map-fab,
  .cwp-date-picker,
  .cwp-pagination__btn,
  .cwp-guest-picker__btn,
  .cwp-search-overlay__close,
  .cwp-map-modal__close,
  .cwp-search-trigger {
    transition-duration: 0.01ms !important;
  }

  .cwp-search-bar__action:hover,
  .cwp-map-fab:hover {
    transform: none;
  }

  .cwp-map-fab:hover {
    transform: translateX(-50%);
  }

  .cwp-skeleton {
    animation: none;
    background: var(--cwp-skeleton-base, #e8ecef);
  }
}

/* ==========================================================================
   21.5. FILTER MODAL
   ========================================================================== */

.cwp-filter-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  /* Self-contained: works when teleported to document.body */
  font-family: var(--cwp-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  color: var(--cwp-text, #1A2B3C);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cwp-filter-modal *,
.cwp-filter-modal *::before,
.cwp-filter-modal *::after {
  box-sizing: border-box;
}

.cwp-filter-modal--open {
  display: flex;
}

.cwp-filter-modal__container {
  display: flex;
  flex-direction: column;
  width: calc(100% - 32px);
  max-width: 780px;
  max-height: 90vh;
  background: var(--cwp-surface, #FFFFFF);
  border-radius: var(--cwp-radius-xl, 16px);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

@media (min-width: 640px) {
  .cwp-filter-modal__container {
    border-radius: var(--cwp-radius-xl, 16px);
    max-height: 85vh;
  }
}

.cwp-filter-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cwp-space-md, 16px) var(--cwp-space-lg, 24px);
  border-bottom: 1px solid var(--cwp-border, #D4E0E8);
  flex-shrink: 0;
}

.cwp-filter-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--cwp-radius-full, 9999px);
  background: none;
  color: var(--cwp-text, #1A2B3C);
  cursor: pointer;
  transition: background var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-filter-modal__close:hover {
  background: var(--cwp-surface-alt, #F0F7FA);
}

.cwp-filter-modal__title {
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-body, 15px);
  font-weight: var(--cwp-weight-bold, 700);
  color: var(--cwp-text, #1A2B3C);
  margin: 0;
}

.cwp-filter-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--cwp-space-lg, 24px);
}

.cwp-filter-modal__section {
  padding: var(--cwp-space-lg, 24px) 0;
  border-bottom: 1px solid var(--cwp-border-light, #E8EFF3);
}

.cwp-filter-modal__section:first-child {
  padding-top: 0;
}

.cwp-filter-modal__section:last-child {
  border-bottom: none;
}

.cwp-filter-modal__section-title {
  font-family: var(--cwp-font-display, serif);
  font-size: var(--cwp-size-h3, 20px);
  font-weight: var(--cwp-weight-semibold, 600);
  color: var(--cwp-text, #1A2B3C);
  margin: 0 0 var(--cwp-space-xs, 4px) 0;
}

.cwp-filter-modal__section-desc {
  font-size: var(--cwp-size-body-sm, 13px);
  color: var(--cwp-text-muted, #8899A6);
  margin: 0 0 var(--cwp-space-md, 16px) 0;
}

/* ---- Dual-Range Price Slider ---- */
.cwp-price-slider {
  position: relative;
  width: 100%;
  height: 36px;
  margin-bottom: var(--cwp-space-md, 16px);
  user-select: none;
}

.cwp-price-slider__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--cwp-border, #D4E0E8);
  border-radius: 2px;
  pointer-events: none;
}

.cwp-price-slider__range {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--cwp-primary, #1B6B93);
  border-radius: 2px;
  pointer-events: none;
}

.cwp-price-slider__input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  outline: none;
}

.cwp-price-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cwp-surface, #FFFFFF);
  border: 2px solid var(--cwp-primary, #1B6B93);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  pointer-events: auto;
  transition: box-shadow var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
              transform var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-price-slider__input::-webkit-slider-thumb:hover {
  box-shadow: 0 2px 8px rgba(27, 107, 147, 0.3);
  transform: scale(1.1);
}

.cwp-price-slider__input::-webkit-slider-thumb:active {
  transform: scale(1.15);
  box-shadow: 0 2px 10px rgba(27, 107, 147, 0.4);
}

.cwp-price-slider__input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cwp-surface, #FFFFFF);
  border: 2px solid var(--cwp-primary, #1B6B93);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  pointer-events: auto;
  transition: box-shadow var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
              transform var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-price-slider__input::-moz-range-thumb:hover {
  box-shadow: 0 2px 8px rgba(27, 107, 147, 0.3);
}

.cwp-price-slider__input::-moz-range-track {
  background: transparent;
  border: none;
}

/* Ensure max thumb renders above min thumb at overlap */
.cwp-price-slider__input--max {
  z-index: 2;
}

.cwp-price-slider__input--min {
  z-index: 1;
}

/* Price Inputs */
.cwp-filter-modal__price-inputs {
  display: flex;
  align-items: flex-end;
  gap: var(--cwp-space-md, 16px);
}

.cwp-filter-modal__price-field {
  flex: 1;
}

.cwp-filter-modal__price-field label {
  display: block;
  font-size: var(--cwp-size-caption, 12px);
  font-weight: var(--cwp-weight-semibold, 600);
  color: var(--cwp-text-muted, #8899A6);
  margin-bottom: var(--cwp-space-xs, 4px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cwp-filter-modal__price-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--cwp-border, #D4E0E8);
  border-radius: var(--cwp-radius-md, 8px);
  overflow: hidden;
  background: var(--cwp-surface, #FFFFFF);
  transition: border-color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-filter-modal__price-input-wrap:focus-within {
  border-color: var(--cwp-primary, #1B6B93);
}

.cwp-filter-modal__currency {
  padding: 0 var(--cwp-space-sm, 8px) 0 var(--cwp-space-md, 16px);
  font-size: var(--cwp-size-body, 15px);
  color: var(--cwp-text-muted, #8899A6);
}

.cwp-filter-modal__price-input-wrap input {
  width: 100%;
  padding: var(--cwp-space-sm, 8px) var(--cwp-space-sm, 8px);
  border: none;
  outline: none;
  font-size: var(--cwp-size-body, 15px);
  font-family: var(--cwp-font-body, sans-serif);
  color: var(--cwp-text, #1A2B3C);
  background: transparent;
}
.cwp-filter-modal__price-input-wrap input:hover,
.cwp-filter-modal__price-input-wrap input:focus,
.cwp-filter-modal__price-input-wrap input:active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.cwp-filter-modal__price-divider {
  font-size: var(--cwp-size-h3, 20px);
  color: var(--cwp-text-muted, #8899A6);
  flex-shrink: 0;
}

/* Counter Rows */
.cwp-filter-modal__counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cwp-space-md, 16px) 0;
}

.cwp-filter-modal__counter-row + .cwp-filter-modal__counter-row {
  border-top: 1px solid var(--cwp-border-light, #E8EFF3);
}

.cwp-filter-modal__counter-label {
  font-size: var(--cwp-size-body, 15px);
  color: var(--cwp-text, #1A2B3C);
}

.cwp-filter-modal__counter-controls {
  display: flex;
  align-items: center;
  gap: var(--cwp-space-md, 16px);
}

.cwp-filter-modal__counter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cwp-border, #D4E0E8);
  border-radius: var(--cwp-radius-full, 9999px);
  background: none;
  color: var(--cwp-text-secondary, #4A6274);
  cursor: pointer;
  transition: border-color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
              color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-filter-modal__counter-btn:hover:not([disabled]) {
  border-color: var(--cwp-text, #1A2B3C);
  color: var(--cwp-text, #1A2B3C);
}

.cwp-filter-modal__counter-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.cwp-filter-modal__counter-value {
  min-width: 32px;
  text-align: center;
  font-size: var(--cwp-size-body, 15px);
  font-weight: var(--cwp-weight-medium, 500);
  color: var(--cwp-text, #1A2B3C);
}

/* Property Type Grid */
.cwp-filter-modal__type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--cwp-space-sm, 8px);
}

.cwp-filter-modal__type-option {
  display: flex;
  cursor: pointer;
}

.cwp-filter-modal__type-option input {
  display: none;
}

.cwp-filter-modal__type-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--cwp-space-sm, 8px) var(--cwp-space-md, 16px);
  border: 1px solid var(--cwp-border, #D4E0E8);
  border-radius: var(--cwp-radius-lg, 12px);
  font-size: var(--cwp-size-body-sm, 13px);
  font-weight: var(--cwp-weight-medium, 500);
  color: var(--cwp-text, #1A2B3C);
  text-align: center;
  transition: border-color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
              background var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-filter-modal__type-label:hover {
  border-color: var(--cwp-text, #1A2B3C);
}

.cwp-filter-modal__type-option input:checked + .cwp-filter-modal__type-label {
  border-color: var(--cwp-primary, #1B6B93);
  background: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.08);
  color: var(--cwp-primary, #1B6B93);
  font-weight: var(--cwp-weight-semibold, 600);
}

/* Amenity Grid */
.cwp-filter-modal__amenity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cwp-space-md, 16px);
}

@media (min-width: 640px) {
  .cwp-filter-modal__amenity-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cwp-filter-modal__amenity-option {
  display: flex;
  align-items: center;
  gap: var(--cwp-space-sm, 8px);
  cursor: pointer;
}

.cwp-filter-modal__amenity-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--cwp-primary, #1B6B93);
  cursor: pointer;
  flex-shrink: 0;
}

.cwp-filter-modal__amenity-label {
  font-size: var(--cwp-size-body, 15px);
  color: var(--cwp-text, #1A2B3C);
}

/* Toggle Row */
.cwp-filter-modal__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cwp-space-md, 16px) 0;
  cursor: pointer;
}

.cwp-filter-modal__toggle-row + .cwp-filter-modal__toggle-row {
  border-top: 1px solid var(--cwp-border-light, #E8EFF3);
}

.cwp-filter-modal__toggle-row span {
  font-size: var(--cwp-size-body, 15px);
  color: var(--cwp-text, #1A2B3C);
}

.cwp-filter-modal__toggle {
  width: 44px;
  height: 24px;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 12px;
  background: var(--cwp-border, #D4E0E8);
  position: relative;
  cursor: pointer;
  transition: background var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-filter-modal__toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cwp-surface, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-filter-modal__toggle:checked {
  background: var(--cwp-primary, #1B6B93);
}

.cwp-filter-modal__toggle:checked::after {
  transform: translateX(20px);
}

/* Footer */
.cwp-filter-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cwp-space-md, 16px) var(--cwp-space-lg, 24px);
  border-top: 1px solid var(--cwp-border, #D4E0E8);
  flex-shrink: 0;
}

.cwp-filter-modal__clear {
  font-size: var(--cwp-size-body, 15px);
  font-weight: var(--cwp-weight-semibold, 600);
  color: var(--cwp-text, #1A2B3C);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--cwp-font-body, sans-serif);
}

.cwp-filter-modal__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--cwp-space-xl, 32px);
  border: none;
  border-radius: var(--cwp-radius-md, 8px);
  background: var(--cwp-primary);
  color: #FFFFFF;
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-body, 15px);
  font-weight: var(--cwp-weight-semibold, 600);
  cursor: pointer;
  transition: background var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-filter-modal__apply:hover {
  background: var(--cwp-primary-dark, var(--cwp-primary));
}

/* ==========================================================================
   21b. ROOM TYPE CARDS
   ========================================================================== */

.cwp-filter-modal__room-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cwp-space-sm, 12px);
}

.cwp-filter-modal__room-type-option {
  cursor: pointer;
}

.cwp-filter-modal__room-type-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cwp-room-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--cwp-space-md, 16px);
  border: 2px solid var(--cwp-border, #E0E0E0);
  border-radius: var(--cwp-radius-lg, 12px);
  background: var(--cwp-surface, #FFFFFF);
  transition: border-color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
              background var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-room-type-card i {
  font-size: 20px;
  color: var(--cwp-text-secondary, #6B7280);
  margin-bottom: 4px;
}

.cwp-room-type-card strong {
  font-size: var(--cwp-size-body, 15px);
  font-weight: var(--cwp-weight-semibold, 600);
  color: var(--cwp-text, #1A2B3C);
}

.cwp-room-type-card span {
  font-size: var(--cwp-size-small, 13px);
  color: var(--cwp-text-secondary, #6B7280);
  line-height: 1.3;
}

.cwp-room-type-card:hover {
  border-color: var(--cwp-text, #1A2B3C);
}

.cwp-filter-modal__room-type-option input:checked + .cwp-room-type-card {
  border-color: var(--cwp-text, #1A2B3C);
  background: var(--cwp-surface-alt, #F7F7F7);
}

.cwp-filter-modal__room-type-option input:checked + .cwp-room-type-card i {
  color: var(--cwp-text, #1A2B3C);
}

@media (max-width: 600px) {
  .cwp-filter-modal__room-type-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   21c. CATEGORIZED AMENITIES
   ========================================================================== */

.cwp-amenity-category {
  margin-bottom: var(--cwp-space-lg, 24px);
}

.cwp-amenity-category--hidden {
  display: none;
}

.cwp-amenity-category__title {
  font-size: var(--cwp-size-small, 13px);
  font-weight: var(--cwp-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cwp-text-secondary, #6B7280);
  margin: 0 0 var(--cwp-space-sm, 12px);
}

.cwp-amenity-category__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cwp-space-xs, 8px) var(--cwp-space-md, 16px);
}

.cwp-amenity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  flex-shrink: 0;
  color: var(--cwp-text-secondary, #6B7280);
  font-size: 14px;
}

.cwp-filter-modal__amenity-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: var(--cwp-radius-sm, 6px);
  transition: background var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-filter-modal__amenity-option:hover {
  background: var(--cwp-surface-alt, #F7F7F7);
}

.cwp-filter-modal__show-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: var(--cwp-text, #1A2B3C);
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-body, 15px);
  font-weight: var(--cwp-weight-semibold, 600);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-filter-modal__show-more:hover {
  color: var(--cwp-primary, #1A6B8A);
}

@media (max-width: 480px) {
  .cwp-amenity-category__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   21d. GUEST RATING PILLS
   ========================================================================== */

.cwp-filter-modal__rating-options {
  display: flex;
  gap: var(--cwp-space-xs, 8px);
  flex-wrap: wrap;
}

.cwp-filter-modal__rating-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 var(--cwp-space-md, 16px);
  border: 1px solid var(--cwp-border, #E0E0E0);
  border-radius: var(--cwp-radius-full, 999px);
  background: var(--cwp-surface, #FFFFFF);
  color: var(--cwp-text, #1A2B3C);
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-body, 15px);
  font-weight: var(--cwp-weight-medium, 500);
  cursor: pointer;
  transition: border-color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
              background var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
              color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-filter-modal__rating-btn:hover {
  border-color: var(--cwp-text, #1A2B3C);
}

.cwp-filter-modal__rating-btn--active {
  background: var(--cwp-text, #1A2B3C);
  color: #FFFFFF;
  border-color: var(--cwp-text, #1A2B3C);
}

.cwp-filter-modal__rating-btn--active:hover {
  background: var(--cwp-primary-dark, #145068);
  border-color: var(--cwp-primary-dark, #145068);
}

/* ==========================================================================
   21e. THEME PROTECTION — New Filter Components
   ========================================================================== */

/* Theme protection for filter modal elements.
   Modal is teleported to document.body so we scope to .cwp-filter-modal
   instead of .cwp-search-page. */
.cwp-filter-modal .cwp-filter-modal__show-more,
.cwp-filter-modal .cwp-filter-modal__rating-btn,
.cwp-filter-modal .cwp-filter-modal__counter-btn,
.cwp-filter-modal .cwp-filter-modal__close,
.cwp-filter-modal .cwp-filter-modal__clear,
.cwp-filter-modal .cwp-filter-modal__apply {
  all: revert;
}

.cwp-filter-modal .cwp-filter-modal__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid var(--cwp-border, #D4E0E8) !important;
  border-radius: 9999px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--cwp-text, #1A2B3C) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cwp-filter-modal .cwp-filter-modal__close:hover,
.cwp-filter-modal .cwp-filter-modal__close:focus {
  background: var(--cwp-surface-alt, #F0F7FA) !important;
  background-color: var(--cwp-surface-alt, #F0F7FA) !important;
  outline: none !important;
}

.cwp-filter-modal .cwp-filter-modal__show-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 10px 0 !important;
  margin: 8px 0 0 !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--cwp-text, #1A2B3C) !important;
  font-family: var(--cwp-font-body, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}
.cwp-filter-modal .cwp-filter-modal__show-more:hover,
.cwp-filter-modal .cwp-filter-modal__show-more:focus {
  color: var(--cwp-primary, #1B6B93) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
}

.cwp-filter-modal .cwp-filter-modal__rating-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  border: 1.5px solid var(--cwp-border, #E0E0E0) !important;
  border-radius: 999px !important;
  background: var(--cwp-surface, #FFFFFF) !important;
  background-color: var(--cwp-surface, #FFFFFF) !important;
  color: var(--cwp-text, #1A2B3C) !important;
  font-family: var(--cwp-font-body, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
.cwp-filter-modal .cwp-filter-modal__rating-btn:hover,
.cwp-filter-modal .cwp-filter-modal__rating-btn:focus {
  border-color: var(--cwp-text, #1A2B3C) !important;
  background: var(--cwp-surface-alt, #F7F7F7) !important;
  background-color: var(--cwp-surface-alt, #F7F7F7) !important;
  outline: none !important;
}
.cwp-filter-modal .cwp-filter-modal__rating-btn--active {
  background: var(--cwp-text, #1A2B3C) !important;
  background-color: var(--cwp-text, #1A2B3C) !important;
  color: #FFFFFF !important;
  border-color: var(--cwp-text, #1A2B3C) !important;
  font-weight: 600 !important;
}
.cwp-filter-modal .cwp-filter-modal__rating-btn--active:hover,
.cwp-filter-modal .cwp-filter-modal__rating-btn--active:focus {
  background: var(--cwp-primary-dark, #145068) !important;
  background-color: var(--cwp-primary-dark, #145068) !important;
  border-color: var(--cwp-primary-dark, #145068) !important;
}

.cwp-filter-modal .cwp-filter-modal__counter-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1.5px solid var(--cwp-border, #D4E0E8) !important;
  border-radius: 9999px !important;
  background: var(--cwp-surface, #FFFFFF) !important;
  background-color: var(--cwp-surface, #FFFFFF) !important;
  color: var(--cwp-text-secondary, #4A6274) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.cwp-filter-modal .cwp-filter-modal__counter-btn:hover,
.cwp-filter-modal .cwp-filter-modal__counter-btn:focus {
  border-color: var(--cwp-text, #1A2B3C) !important;
  color: var(--cwp-text, #1A2B3C) !important;
  background: var(--cwp-surface-alt, #F7F7F7) !important;
  background-color: var(--cwp-surface-alt, #F7F7F7) !important;
  outline: none !important;
}

.cwp-filter-modal .cwp-filter-modal__clear {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--cwp-text, #1A2B3C) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--cwp-font-body, sans-serif) !important;
  padding: 8px 4px !important;
  margin: 0 !important;
}
.cwp-filter-modal .cwp-filter-modal__clear:hover,
.cwp-filter-modal .cwp-filter-modal__clear:focus {
  color: var(--cwp-primary, #1B6B93) !important;
  background: none !important;
  background-color: transparent !important;
  outline: none !important;
}

.cwp-filter-modal .cwp-filter-modal__apply {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  padding: 0 36px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  background: var(--cwp-primary) !important;
  background-color: var(--cwp-primary) !important;
  color: #FFFFFF !important;
  font-family: var(--cwp-font-body, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
.cwp-filter-modal .cwp-filter-modal__apply:hover,
.cwp-filter-modal .cwp-filter-modal__apply:focus {
  background: var(--cwp-primary-dark, var(--cwp-primary)) !important;
  background-color: var(--cwp-primary-dark, var(--cwp-primary)) !important;
  outline: none !important;
}

/* Checkboxes inside filter modal */
.cwp-filter-modal input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}
.cwp-filter-modal .cwp-filter-modal__amenity-option input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 2px solid var(--cwp-border, #D4E0E8) !important;
  border-radius: 4px !important;
  background: var(--cwp-surface, #FFFFFF) !important;
  background-color: var(--cwp-surface, #FFFFFF) !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
.cwp-filter-modal .cwp-filter-modal__amenity-option input[type="checkbox"]:checked {
  border-color: var(--cwp-text, #1A2B3C) !important;
  background: var(--cwp-text, #1A2B3C) !important;
  background-color: var(--cwp-text, #1A2B3C) !important;
}
.cwp-filter-modal .cwp-filter-modal__room-type-option input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Toggle switches inside filter modal */
.cwp-filter-modal .cwp-filter-modal__toggle {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 48px !important;
  height: 28px !important;
  border: none !important;
  border-radius: 14px !important;
  background: var(--cwp-border, #D4E0E8) !important;
  background-color: var(--cwp-border, #D4E0E8) !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cwp-filter-modal .cwp-filter-modal__toggle:checked {
  background: var(--cwp-primary, #1B6B93) !important;
  background-color: var(--cwp-primary, #1B6B93) !important;
}

/* Calendar buttons inside date picker.
   SCOPE = .cwp-root, NOT .cwp-search-page (re-scoped 2026-06-23). These refined
   day-cell / nav / tab styles must reach the date picker on EVERY placement of the
   [bly_search_bar] widget — the home page / any page, desktop + mobile — not only
   the search archive. .cwp-root wraps the calendar everywhere (it's what
   connect-public.css's generic rule keys on), and specificity is unchanged (0-3-1),
   so this still beats the generic .cwp-root .cwp-cal button.cwp-cal__day. The
   home/any-page calendar was rendering with the plain generic styling because these
   were .cwp-search-page-scoped and didn't match off the archive. Do NOT re-scope to
   .cwp-search-page — that re-breaks the home-page widget. These are appearance only
   (no layout/sizing), so applying them everywhere is safe; the popup-vs-fullscreen
   layout lives in .cwp-search-bar__dropdown / the @media rules. */
.cwp-root .cwp-date-picker .cwp-cal__day,
.cwp-root .cwp-date-picker button.cwp-cal__nav-btn {
  all: revert;
}
/* Day base — specificity must beat connect-public.css (.cwp-root .cwp-cal button.cwp-cal__day = 0-3-1) */
.cwp-root .cwp-date-picker button.cwp-cal__day {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 1 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--cwp-text, #1A2B3C) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
}
.cwp-root .cwp-date-picker button.cwp-cal__day:hover:not(:disabled):not(.cwp-cal__day--empty),
.cwp-root .cwp-date-picker button.cwp-cal__day:focus:not(:disabled):not(.cwp-cal__day--empty) {
  background: var(--cwp-surface-alt, #F0F7FA) !important;
  background-color: var(--cwp-surface-alt, #F0F7FA) !important;
  border: none !important;
  border-radius: 8px !important;
  outline: none !important;
}
.cwp-root .cwp-date-picker button.cwp-cal__day--disabled {
  color: var(--cwp-text-muted, #C0C8D0) !important;
  cursor: default !important;
}
/* Check-in/out — must beat .cwp-root .cwp-cal button.cwp-cal__day.cwp-cal__day--checkin (0-4-1) */
.cwp-root .cwp-date-picker button.cwp-cal__day.cwp-cal__day--checkin,
.cwp-root .cwp-date-picker button.cwp-cal__day.cwp-cal__day--checkout {
  background: var(--cwp-primary, #f1913d) !important;
  background-color: var(--cwp-primary, #f1913d) !important;
  color: #FFFFFF !important;
}
.cwp-root .cwp-date-picker button.cwp-cal__day.cwp-cal__day--checkin {
  border-radius: 8px 0 0 8px !important;
}
.cwp-root .cwp-date-picker button.cwp-cal__day.cwp-cal__day--checkout {
  border-radius: 0 8px 8px 0 !important;
}
.cwp-root .cwp-date-picker button.cwp-cal__day.cwp-cal__day--checkin:hover:not(:disabled),
.cwp-root .cwp-date-picker button.cwp-cal__day.cwp-cal__day--checkout:hover:not(:disabled) {
  background: var(--cwp-primary, #f1913d) !important;
  background-color: var(--cwp-primary, #f1913d) !important;
  color: #FFFFFF !important;
  filter: brightness(0.9) !important;
}
/* In-range — must beat .cwp-root .cwp-cal button.cwp-cal__day.cwp-cal__day--in-range (0-4-1) */
.cwp-root .cwp-date-picker button.cwp-cal__day.cwp-cal__day--in-range {
  background: rgba(var(--cwp-primary-rgb, 241, 145, 61), 0.15) !important;
  background-color: rgba(var(--cwp-primary-rgb, 241, 145, 61), 0.15) !important;
  border-radius: 0 !important;
  color: var(--cwp-text, #2c2e33) !important;
}
/* Hover range preview */
.cwp-root .cwp-date-picker button.cwp-cal__day.cwp-cal__day--hover-range {
  background: rgba(var(--cwp-primary-rgb, 241, 145, 61), 0.10) !important;
  background-color: rgba(var(--cwp-primary-rgb, 241, 145, 61), 0.10) !important;
  border-radius: 0 !important;
}
/* Checkin/checkout override in-range when both classes present (checkout day gets --in-range) */
.cwp-root .cwp-date-picker button.cwp-cal__day.cwp-cal__day--checkin.cwp-cal__day--in-range {
  background: var(--cwp-primary, #f1913d) !important;
  background-color: var(--cwp-primary, #f1913d) !important;
  color: #FFFFFF !important;
  border-radius: 8px 0 0 8px !important;
}
.cwp-root .cwp-date-picker button.cwp-cal__day.cwp-cal__day--checkout.cwp-cal__day--in-range {
  background: var(--cwp-primary, #f1913d) !important;
  background-color: var(--cwp-primary, #f1913d) !important;
  color: #FFFFFF !important;
  border-radius: 0 8px 8px 0 !important;
}
.cwp-root .cwp-date-picker button.cwp-cal__nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid var(--cwp-border, #D4E0E8) !important;
  border-radius: 50% !important;
  background: var(--cwp-surface, #FFFFFF) !important;
  background-color: var(--cwp-surface, #FFFFFF) !important;
  color: var(--cwp-text, #1A2B3C) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  flex-shrink: 0 !important;
}
.cwp-root .cwp-date-picker button.cwp-cal__nav-btn:hover,
.cwp-root .cwp-date-picker button.cwp-cal__nav-btn:focus {
  background: var(--cwp-surface-alt, #F0F7FA) !important;
  background-color: var(--cwp-surface-alt, #F0F7FA) !important;
  border-color: var(--cwp-text-secondary, #6B7280) !important;
  outline: none !important;
}

/* Date picker tabs + footer — theme protection */
.cwp-root .cwp-date-picker__tab,
.cwp-root .cwp-date-picker__clear,
.cwp-root .cwp-date-picker__apply {
  all: revert;
}
.cwp-root .cwp-date-picker__tab {
  padding: 7px 18px !important;
  border: none !important;
  border-radius: 5px !important;
  background: transparent !important;
  background-color: transparent !important;
  font-family: var(--cwp-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--cwp-text-secondary, #5c5e61) !important;
  cursor: pointer !important;
  margin: 0 !important;
  min-height: 0 !important;
  line-height: normal !important;
}
.cwp-root .cwp-date-picker__tab--active {
  background: var(--cwp-surface, #FFFFFF) !important;
  background-color: var(--cwp-surface, #FFFFFF) !important;
  color: var(--cwp-text, #2c2e33) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
.cwp-root .cwp-date-picker__tab:hover,
.cwp-root .cwp-date-picker__tab:focus {
  background: var(--cwp-surface-alt, #f7f7f7) !important;
  background-color: var(--cwp-surface-alt, #f7f7f7) !important;
  border: none !important;
  outline: none !important;
}
.cwp-root .cwp-date-picker__tab--active:hover,
.cwp-root .cwp-date-picker__tab--active:focus {
  background: var(--cwp-surface, #FFFFFF) !important;
  background-color: var(--cwp-surface, #FFFFFF) !important;
}
.cwp-root .cwp-date-picker__clear {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  font-family: var(--cwp-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--cwp-text, #2c2e33) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.cwp-root .cwp-date-picker__clear:hover,
.cwp-root .cwp-date-picker__clear:focus {
  color: var(--cwp-cal-selected, #6C4CE0) !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
}
.cwp-root .cwp-date-picker__apply {
  padding: 8px 20px !important;
  border: none !important;
  border-radius: 6px !important;
  background: var(--cwp-primary, #1B6B93) !important;
  background-color: var(--cwp-primary, #1B6B93) !important;
  color: #FFFFFF !important;
  font-family: var(--cwp-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin: 0 !important;
  min-height: 0 !important;
  line-height: normal !important;
}
.cwp-root .cwp-date-picker__apply:hover,
.cwp-root .cwp-date-picker__apply:focus {
  filter: brightness(0.85) !important;
  border: none !important;
  outline: none !important;
}

/* Improvement 3: Clear date X button — theme protection.
   NOTE: Do NOT use 'all: revert' here — it would strip Alpine's
   inline display:none from x-show, making the button always visible. */
.cwp-search-page .cwp-search-bar__clear-date {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.2) !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: #fff !important;
  cursor: pointer !important;
  opacity: 1 !important;
  min-height: 0 !important;
  line-height: 1 !important;
  z-index: 2 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.cwp-search-page .cwp-search-bar__clear-date:hover,
.cwp-search-page .cwp-search-bar__clear-date:focus {
  background: rgba(0, 0, 0, 0.45) !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
}

/* ==========================================================================
   21f. FILTER MODAL DESIGN UPGRADES
   ========================================================================== */

/* ---- Smoother Modal Open/Close Animation ---- */
.cwp-filter-modal {
  animation: none;
}
.cwp-filter-modal--open {
  animation: cwpFadeIn var(--cwp-duration-normal, 200ms) var(--cwp-ease-out);
}
.cwp-filter-modal--open .cwp-filter-modal__container {
  animation: cwpSlideUp var(--cwp-duration-normal, 200ms) var(--cwp-ease-out);
}
@keyframes cwpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cwpSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---- Header Polish ---- */
.cwp-filter-modal__header {
  padding: 16px 24px;
  min-height: 56px;
}
.cwp-filter-modal__close {
  background: transparent;
  border: 1px solid var(--cwp-border, #D4E0E8);
}
.cwp-filter-modal__close:hover {
  background: var(--cwp-surface-alt, #F0F7FA);
  border-color: var(--cwp-text-secondary, #6B7280);
}

/* ---- Counter Buttons Visual Upgrade ---- */
.cwp-filter-modal__counter-btn {
  width: 36px;
  height: 36px;
  border-width: 1.5px;
  background: var(--cwp-surface, #FFFFFF);
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease, transform 150ms ease;
}
.cwp-filter-modal__counter-btn:hover:not([disabled]) {
  border-color: var(--cwp-text, #1A2B3C);
  color: var(--cwp-text, #1A2B3C);
  background: var(--cwp-surface-alt, #F7F7F7);
  transform: scale(1.05);
}
.cwp-filter-modal__counter-btn:active:not([disabled]) {
  transform: scale(0.95);
}
.cwp-filter-modal__counter-btn[disabled] {
  opacity: 0.25;
  border-color: var(--cwp-border-light, #E8EFF3);
}
.cwp-filter-modal__counter-value {
  font-size: 16px;
  font-weight: 600;
  min-width: 40px;
}

/* ---- Room Type Cards Premium Upgrade ---- */
.cwp-room-type-card {
  padding: 20px 16px;
  border-width: 1.5px;
  min-height: 120px;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.cwp-room-type-card i {
  font-size: 28px;
  color: var(--cwp-primary, #1B6B93);
  margin-bottom: 8px;
}
.cwp-room-type-card strong {
  font-size: 15px;
  line-height: 1.3;
}
.cwp-room-type-card span {
  font-size: 13px;
  line-height: 1.4;
  color: var(--cwp-text-muted, #8899A6);
}
.cwp-room-type-card:hover {
  border-color: var(--cwp-text, #1A2B3C);
  background: var(--cwp-surface-alt, #FAFAFA);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.cwp-filter-modal__room-type-option input:checked + .cwp-room-type-card {
  border-color: var(--cwp-text, #1A2B3C);
  background: var(--cwp-surface-alt, #F7F7F7);
  box-shadow: 0 0 0 1px var(--cwp-text, #1A2B3C);
}
.cwp-filter-modal__room-type-option input:checked + .cwp-room-type-card i {
  color: var(--cwp-text, #1A2B3C);
}

/* ---- Amenity Category Title ---- */
.cwp-amenity-category__title {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--cwp-text, #1A2B3C);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cwp-border-light, #E8EFF3);
}

/* ---- Custom Checkbox Amenities ---- */
.cwp-filter-modal__amenity-option {
  padding: 10px 8px;
  border-radius: 8px;
}
.cwp-filter-modal__amenity-option input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--cwp-border, #D4E0E8);
  border-radius: 4px;
  background: var(--cwp-surface, #FFFFFF);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
  position: relative;
  flex-shrink: 0;
}
.cwp-filter-modal__amenity-option input[type="checkbox"]:checked {
  border-color: var(--cwp-text, #1A2B3C);
  background: var(--cwp-text, #1A2B3C);
}
.cwp-filter-modal__amenity-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cwp-filter-modal__amenity-option:hover {
  background: var(--cwp-surface-alt, #F7F7F7);
}

/* ---- Amenity Icon Enhancement ---- */
.cwp-amenity-icon {
  width: 28px;
  height: 28px;
  color: var(--cwp-text-secondary, #4A6274);
  font-size: 16px;
}
.cwp-filter-modal__amenity-label {
  font-size: 15px;
  font-weight: 400;
  color: var(--cwp-text, #1A2B3C);
}

/* ---- Show More Button Upgrade ---- */
.cwp-filter-modal__show-more {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cwp-text, #1A2B3C);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 10px 0;
}
.cwp-filter-modal__show-more:hover {
  color: var(--cwp-primary, #1B6B93);
}

/* ---- Rating Buttons Premium ---- */
.cwp-filter-modal__rating-options {
  gap: 10px;
}
.cwp-filter-modal__rating-btn {
  height: 42px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  border-width: 1.5px;
  transition: all 150ms ease;
}
.cwp-filter-modal__rating-btn:hover {
  border-color: var(--cwp-text, #1A2B3C);
  background: var(--cwp-surface-alt, #F7F7F7);
}
.cwp-filter-modal__rating-btn--active {
  background: var(--cwp-text, #1A2B3C);
  color: #FFFFFF;
  border-color: var(--cwp-text, #1A2B3C);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.cwp-filter-modal__rating-btn--active:hover {
  background: var(--cwp-primary-dark, #145068);
  border-color: var(--cwp-primary-dark, #145068);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ---- Toggle Switch Enhancement ---- */
.cwp-filter-modal__toggle-row {
  padding: 16px 0;
}
.cwp-filter-modal__toggle-row span {
  font-size: 16px;
  font-weight: 400;
}
.cwp-filter-modal__toggle {
  width: 48px;
  height: 28px;
  border-radius: 14px;
}
.cwp-filter-modal__toggle::after {
  width: 24px;
  height: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.cwp-filter-modal__toggle:checked::after {
  transform: translateX(20px);
}

/* ---- Footer Buttons Upgrade ---- */
.cwp-filter-modal__clear {
  font-size: 16px;
  padding: 8px 4px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}
.cwp-filter-modal__clear:hover {
  color: var(--cwp-primary, #1B6B93);
}
.cwp-filter-modal__apply {
  height: 52px;
  padding: 0 36px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  letter-spacing: 0.01em;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.cwp-filter-modal__apply:hover {
  background: var(--cwp-primary-dark, #145068);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
.cwp-filter-modal__apply:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ---- Section Title Enhancement ---- */
.cwp-filter-modal__section-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.cwp-filter-modal__section {
  padding: 24px 0;
}

/* ---- Property Type Grid Polish ---- */
.cwp-filter-modal__type-label {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  border-width: 1.5px;
  transition: all 150ms ease;
}
.cwp-filter-modal__type-label:hover {
  border-color: var(--cwp-text, #1A2B3C);
  background: var(--cwp-surface-alt, #F7F7F7);
}
.cwp-filter-modal__type-option input:checked + .cwp-filter-modal__type-label {
  border-width: 2px;
  font-weight: 600;
}

/* ---- Calendar Styling Inside Search ---- */
.cwp-date-picker .cwp-cal {
  background: var(--cwp-surface, #FFFFFF);
}
.cwp-date-picker .cwp-cal__months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* Header row — nav arrows + month titles in one line */
.cwp-date-picker .cwp-cal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 8px;
}
.cwp-date-picker .cwp-cal__title {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  flex: 1;
  margin: 0;
  color: var(--cwp-text, #1A2B3C);
}
.cwp-date-picker .cwp-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: 2px;
}
.cwp-date-picker .cwp-cal__weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--cwp-text-muted, #8899A6);
  padding: 2px 0;
  text-transform: uppercase;
}
.cwp-date-picker .cwp-cal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
}
.cwp-date-picker .cwp-cal__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--cwp-text, #1A2B3C);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
  padding: 0;
  position: relative;
}
.cwp-date-picker .cwp-cal__day:hover:not([disabled]):not(.cwp-cal__day--checkin):not(.cwp-cal__day--checkout) {
  background: var(--cwp-surface-alt, #F0F7FA);
  border-radius: 8px;
}
.cwp-date-picker .cwp-cal__day--disabled {
  color: var(--cwp-text-muted, #C0C8D0);
  cursor: default;
}
.cwp-date-picker .cwp-cal__day--today .cwp-cal__day-num {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cwp-date-picker .cwp-cal__day--checkin,
.cwp-date-picker .cwp-cal__day--checkout {
  background: var(--cwp-primary, #f1913d);
  color: #FFFFFF;
}
.cwp-date-picker .cwp-cal__day--in-range {
  background: rgba(var(--cwp-primary-rgb, 241, 145, 61), 0.15);
  border-radius: 0;
}
.cwp-date-picker .cwp-cal__day--checkin {
  border-radius: 8px 0 0 8px;
}
.cwp-date-picker .cwp-cal__day--checkout {
  border-radius: 0 8px 8px 0;
}
/* When only checkin selected (no checkout yet), keep full rounding */
.cwp-date-picker .cwp-cal__day--checkin:not(.cwp-cal__day--in-range) {
  border-radius: 8px;
}
.cwp-date-picker .cwp-cal__day--booked {
  text-decoration: line-through;
  color: var(--cwp-text-muted, #C0C8D0);
}
.cwp-date-picker .cwp-cal__day--empty {
  visibility: hidden;
}
.cwp-date-picker .cwp-cal__day-num {
  line-height: 1;
}
.cwp-date-picker .cwp-cal__day-price {
  font-size: 10px;
  color: var(--cwp-text-muted, #8899A6);
  margin-top: 1px;
}
.cwp-date-picker .cwp-cal__day--checkin .cwp-cal__day-price,
.cwp-date-picker .cwp-cal__day--checkout .cwp-cal__day-price {
  color: rgba(255, 255, 255, 0.8);
}
.cwp-date-picker .cwp-cal__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cwp-border, #D4E0E8);
  border-radius: 50%;
  background: var(--cwp-surface, #FFFFFF);
  color: var(--cwp-text, #1A2B3C);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.cwp-date-picker .cwp-cal__nav-btn:hover:not([disabled]) {
  background: var(--cwp-surface-alt, #F0F7FA);
  border-color: var(--cwp-text-secondary, #6B7280);
}
.cwp-date-picker button.cwp-cal__nav-btn[disabled] {
  opacity: 0.35 !important;
  cursor: default !important;
}

@media (max-width: 640px) {
  .cwp-date-picker .cwp-cal__months {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---- Date Picker Tabs — hidden (removed from template) ---- */
.cwp-date-picker__tabs {
  display: none;
}

/* Mobile-only header — hidden on desktop, shown via mobile media query */
.cwp-date-picker__mobile-header {
  display: none;
}

/* ---- Improvement 2: Date Picker Context Header ---- */
.cwp-date-picker__context {
  text-align: center;
  padding: 4px 0 10px;
  font-family: var(--cwp-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--cwp-text-secondary, #555);
  transition: color 0.2s ease;
}
.cwp-date-picker__context--checkin {
  color: var(--cwp-text-secondary, #555);
}
.cwp-date-picker__context--checkout {
  color: var(--cwp-primary, #1B6B93);
}
.cwp-date-picker__context--done {
  color: var(--cwp-text, #222);
}
.cwp-date-picker__nights {
  display: inline;
  font-weight: 700;
  font-size: 14px;
  color: var(--cwp-text, #222);
}
.cwp-date-picker__range {
  display: inline;
  margin-left: 8px;
  font-weight: 400;
  font-size: 13px;
  color: var(--cwp-text-secondary, #555);
}

/* ---- Date Picker Footer (Clear dates + Apply) — compact ----
 * !important defenses because the calendar popup renders inside the
 * date dropdown but the theme button rules still cascade in. Without
 * these, themes like Astra/Kadence/Hello Elementor render Clear &
 * Apply as plain native-looking gray buttons. */
.cwp-date-picker__footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px 4px !important;
  border-top: 1px solid var(--cwp-border, #ececec) !important;
  margin-top: 6px !important;
  background: transparent !important;
}
.cwp-date-picker__clear {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 4px !important;
  margin: 0 !important;
  font-family: var(--cwp-font-body, inherit) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--cwp-text, #2c2e33) !important;
  text-decoration: underline !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  min-width: 0 !important;
  height: auto !important;
  width: auto !important;
}
.cwp-date-picker__clear:hover,
.cwp-date-picker__clear:focus-visible {
  color: var(--cwp-primary, #1B6B93) !important;
  background: none !important;
  background-color: transparent !important;
  outline: none !important;
  text-decoration: underline !important;
}
.cwp-date-picker__apply {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 20px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: var(--cwp-primary, #1B6B93) !important;
  background-image: none !important;
  background-color: var(--cwp-primary, #1B6B93) !important;
  color: #FFFFFF !important;
  font-family: var(--cwp-font-body, inherit) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  min-width: 0 !important;
  height: auto !important;
  width: auto !important;
  min-height: 36px !important;
  transition: background 150ms ease, filter 150ms ease !important;
}
.cwp-date-picker__apply:hover,
.cwp-date-picker__apply:focus-visible {
  filter: brightness(0.92) !important;
  background: var(--cwp-primary, #1B6B93) !important;
  background-color: var(--cwp-primary, #1B6B93) !important;
  color: #FFFFFF !important;
  outline: none !important;
}
.cwp-date-picker__apply:active {
  filter: brightness(0.85) !important;
  transform: translateY(1px);
}
.cwp-date-picker__apply:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ---- Loading Spinner in Modal ---- */
.cwp-filter-modal--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}
.cwp-filter-modal__loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--cwp-border, #D4E0E8);
  border-top-color: var(--cwp-primary, #1B6B93);
  border-radius: 50%;
  animation: cwpSpin 0.7s linear infinite;
}
@keyframes cwpSpin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   22. PRINT STYLES
   ========================================================================== */

@media print {
  .cwp-search-bar,
  .cwp-search-trigger,
  .cwp-search-bar__actions,
  .cwp-split-view__map,
  .cwp-map-fab,
  .cwp-pagination {
    display: none !important;
  }

  .cwp-split-view {
    display: block;
    height: auto;
    overflow: visible;
  }

  .cwp-split-view__results {
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .cwp-card-grid,
  .cwp-search-page .cwp-property-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cwp-space-md);
  }
}

/* ==========================================================================
   23. HIGH CONTRAST MODE
   ========================================================================== */

@media (forced-colors: active) {
  .cwp-search-bar {
    border: 2px solid ButtonText;
  }

  .cwp-search-bar__action--search {
    background: ButtonText !important;
    color: ButtonFace !important;
    forced-color-adjust: none;
  }

  .cwp-search-bar__action--filter {
    border: 1px solid ButtonText !important;
  }

  .cwp-search-bar__action--active {
    background: Highlight !important;
    color: HighlightText !important;
    forced-color-adjust: none;
  }

  .cwp-map-fab {
    background: ButtonText;
    color: ButtonFace;
    forced-color-adjust: none;
  }

  .cwp-pagination__btn--active {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
    forced-color-adjust: none;
  }
}

/* ==========================================================================
   22. SKIP LINK — screen-reader only, visible on focus
   ========================================================================== */

.cwp-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cwp-skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  background: var(--cwp-surface, #FFFFFF);
  color: var(--cwp-text, #1A2B3C);
  font-family: var(--cwp-font-body, sans-serif);
  font-size: var(--cwp-size-body-sm, 13px);
  font-weight: var(--cwp-weight-semibold, 600);
  border-radius: var(--cwp-radius-md, 8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

/* ==========================================================================
   24. RESPONSIVE — Tablet Landscape (≤1024px)
   Split view transitions to full-width results with map as toggle overlay.
   ========================================================================== */

@media (max-width: 1024px) {
  /* Split view: results go full-width, map becomes toggle overlay */
  .cwp-split-view {
    display: block;
    height: auto;
    overflow: visible;
  }

  .cwp-split-view__results {
    height: auto;
    overflow: visible;
    padding: 0 var(--cwp-space-lg);
  }

  .cwp-split-view__map {
    display: none;
  }

  /* Full-screen map when toggled visible on tablet */
  .cwp-split-view__map--mobile-visible {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1100 !important;
    background: var(--cwp-surface);
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .cwp-split-view__map--mobile-visible #cwp-search-map {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .cwp-split-view__map--mobile-visible .leaflet-container {
    width: 100% !important;
    height: 100% !important;
  }

  /* Show map FAB + close on tablet (Alpine x-show controls visibility,
     we just set the display mode when visible).
     FAB keeps default z-index (1020) so search overlay (1040) covers it.
     Only "Show list" needs 1102 (above map at 1100 + peek at 1101). */
  .cwp-map-fab,
  .cwp-map-close {
    display: inline-flex;
  }

  .cwp-map-fab {
    background: var(--cwp-primary, #1a3a4a);
    color: #fff;
    padding: 12px 24px;
    box-shadow: var(--cwp-shadow-lg);
  }

  /* "Show list" button: sits above peek cards on tablet too */
  .cwp-map-close {
    z-index: 1102;
    bottom: calc(88px + max(16px, env(safe-area-inset-bottom)) + 12px);
    background: var(--cwp-surface, #fff);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }

  /* Peek cards: layer between map and buttons */
  .cwp-map-peek {
    z-index: 1101;
  }

  /* Grid goes to 2-col inside results on tablet */
  .cwp-split-view__results .cwp-property-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cwp-split-view__results .cwp-property-grid .cwp-card {
    max-width: none;
  }

  /* Search bar: compress fields slightly */
  .cwp-search-bar__field {
    padding: 6px 12px;
  }

  .cwp-search-bar__label {
    font-size: 11px;
  }

  /* Dropdown max-width safety on narrower tablets */
  .cwp-search-bar__dropdown {
    width: min(400px, calc(100vw - 48px));
  }

  /* THE guests/location full-width fix: this @media (max-width:1024px) block caps
     dropdowns at 400px, but the location + GUESTS sheets must be full width (they
     go fullscreen on phones via the ≤767px rules; here they must not be re-capped).
     --location already had its 100% override; --guests was MISSING it, so the
     guests sheet fell through to the 400px cap → ~377px at a 425px viewport
     ("not full width", reported live 2026-06-23). They are siblings — keep them
     identical. The date picker is .cwp-date-picker (not a __dropdown), unaffected. */
  .cwp-search-bar__dropdown--location,
  .cwp-search-bar__dropdown--guests {
    width: 100%;
  }

  /* Filter dropdown: reduce max-height for smaller viewport */
  .cwp-filter-sort-dropdown {
    max-height: 75vh;
  }

  /* Location picker: increase max-height for usability */
  .cwp-location-picker__list {
    max-height: 45vh;
  }

  /* Results header: slightly tighter */
  .cwp-results-header {
    padding: 16px 0 10px;
  }

  .cwp-results-header__title {
    font-size: 20px !important;
  }

  /* Card grid: add room for FAB at bottom */
  .cwp-card-grid,
  .cwp-search-page .cwp-property-grid {
    padding-bottom: calc(var(--cwp-space-2xl) + 60px);
  }
}

/* ==========================================================================
   25. RESPONSIVE — Enhanced Mobile (≤767px) additions
   Supplements the existing 767px block with missing refinements.
   ========================================================================== */

@media (max-width: 767px) {
  /* Location picker: increase list height on mobile for scrolling */
  .cwp-location-picker__list {
    max-height: 50vh;
  }

  /* Location picker mobile header — show on mobile */
  .cwp-location-picker__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
    flex-shrink: 0;
  }

  .cwp-location-picker__mobile-header h3 {
    font-size: 18px;
    font-weight: var(--cwp-weight-semibold, 600);
    color: var(--cwp-text, #2c2e33);
    margin: 0;
  }

  /* Location picker icon: slightly smaller */
  .cwp-location-picker__icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  /* Guest picker mobile header — show on mobile */
  .cwp-guest-picker__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
    flex-shrink: 0;
  }

  .cwp-guest-picker__mobile-header h3 {
    font-size: 18px;
    font-weight: var(--cwp-weight-semibold, 600);
    color: var(--cwp-text, #2c2e33);
    margin: 0;
  }

  /* Guest picker count: bigger touch target */
  .cwp-guest-picker__count {
    min-width: 36px;
    font-size: 16px;
  }

  /* Guest picker done: full-width on mobile */
  .cwp-guest-picker__footer {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px 16px !important;
  }

  .cwp-guest-picker__done {
    width: 100% !important;
    text-align: center !important;
    padding: 12px 20px !important;
    min-height: 44px !important;
  }

  .cwp-guest-picker__reset {
    margin-right: 0 !important;
    text-align: center !important;
  }

  /* Filter chips: compact on mobile */
  .cwp-filter-chips {
    gap: 4px !important;
  }

  .cwp-filter-chip {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* Filter dropdown counter buttons: enlarge for touch (44px WCAG minimum) */
  .cwp-filter-sort-dropdown__counter-btn {
    width: 44px !important;
    height: 44px !important;
  }

  /* Filter dropdown sections: tighter padding on mobile */
  .cwp-filter-sort-dropdown__section {
    padding: 16px 16px;
  }

  .cwp-filter-sort-dropdown__footer {
    padding: 12px 16px;
  }

  /* Filter modal: full-screen on mobile */
  .cwp-filter-modal__container {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    height: 100%;
  }

  .cwp-filter-modal__body {
    padding: 16px;
  }

  /* Filter modal counter buttons: touch-friendly */
  .cwp-filter-modal__counter-btn,
  .cwp-filter-modal .cwp-filter-modal__counter-btn {
    width: 44px !important;
    height: 44px !important;
  }

  /* Filter modal footer: full-width apply button */
  .cwp-filter-modal__footer {
    padding: 12px 16px;
    gap: 12px;
  }

  .cwp-filter-modal__apply,
  .cwp-filter-modal .cwp-filter-modal__apply {
    flex: 1 !important;
    min-height: 48px !important;
  }

  /* Room type cards: 1-col on mobile */
  .cwp-filter-modal__room-type-grid {
    grid-template-columns: 1fr;
  }

  .cwp-room-type-card {
    min-height: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px;
  }

  .cwp-room-type-card i {
    font-size: 24px;
    margin-bottom: 0;
  }

  /* Pagination touch targets on mobile */
  .cwp-pagination__page {
    min-width: 44px;
    height: 44px;
  }

  .cwp-pagination__btn {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
  }

  .cwp-pagination__ellipsis {
    width: 36px;
    height: 44px;
  }

  /* Search overlay: close button touch target */
  .cwp-search-overlay__close {
    width: 44px;
    height: 44px;
  }

  /* Search overlay: safe-area padding for notched phones */
  .cwp-search-overlay__header {
    padding-top: max(var(--cwp-space-md), env(safe-area-inset-top));
  }

  .cwp-search-overlay__footer {
    padding-bottom: max(var(--cwp-space-md), env(safe-area-inset-bottom));
  }

  /* Map FAB: safe-area for notched phones */
  .cwp-map-fab {
    bottom: max(var(--cwp-space-lg), calc(env(safe-area-inset-bottom) + 12px));
  }

  /* Date picker: fullscreen on mobile (Plum Guide style).
     z-index must be above the search overlay (z-modal) so it stacks properly
     when opened from the mobile search overlay fields. */
  .cwp-date-picker {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    border-radius: 0;
    z-index: 2147483647; /* max int — above the mobile search overlay (2147483637). HARDCODED, not calc(var(--cwp-z-modal)+10): the overlay's z is a runtime Alpine :style binding (robust), but the picker's was the only consumer of the STATIC inline --cwp-z-modal on the widget root, which an HTML optimizer that strips style="" attributes drops → picker fell to 1010 → rendered BEHIND the opaque overlay → "fields not clickable". Hardcoding removes that single point of failure. */
    padding: 0;
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    visibility: visible;
    pointer-events: auto;
    border: none;
    box-shadow: none;
    background: var(--cwp-surface, #fff);
  }

  .cwp-date-picker .cwp-cal {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
  }

  .cwp-date-picker__context {
    padding: 12px 16px;
    flex-shrink: 0;
  }

  .cwp-date-picker__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--cwp-border-light, #f0f0f0);
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* Mobile-only datepicker header with close button */
  .cwp-date-picker__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
    flex-shrink: 0;
  }

  .cwp-date-picker__mobile-header h3 {
    font-size: 18px;
    font-weight: var(--cwp-weight-semibold, 600);
    color: var(--cwp-text, #2c2e33);
    margin: 0;
  }

  .cwp-date-picker__mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--cwp-surface-alt, #f5f5f5);
    color: var(--cwp-text, #2c2e33);
    cursor: pointer;
  }

  .cwp-date-picker__mobile-close:hover {
    background: var(--cwp-border, #ececec);
  }

  /* Clear-date buttons: enlarge for touch on mobile (from 20px to 28px) */
  .cwp-search-bar__clear-date {
    width: 28px;
    height: 28px;
  }

  .cwp-search-bar__clear-date svg {
    width: 12px;
    height: 12px;
  }

  /* View toggle: enlarge for touch on mobile */
  .cwp-view-toggle__btn {
    width: 36px !important;
    height: 36px !important;
  }

  /* Loading bar: account for admin bar on mobile */
  .cwp-loading-bar {
    top: 0;
    z-index: calc(var(--cwp-z-dropdown, 100) + 1);
  }

  /* No results: tighter padding */
  .cwp-no-results {
    padding: var(--cwp-space-2xl) var(--cwp-space-md);
  }

  .cwp-no-results__icon {
    width: 48px;
    height: 48px;
  }

  .cwp-no-results__title {
    font-size: 20px;
  }
}

/* ==========================================================================
   26. RESPONSIVE — Small Mobile (≤480px)
   Compact everything for 320px–480px screens.
   ========================================================================== */

@media (max-width: 480px) {
  /* Search trigger: slightly more compact */
  .cwp-search-trigger {
    height: 50px;
    padding: 0 var(--cwp-space-md);
  }

  .cwp-search-trigger__icon {
    width: 28px;
    height: 28px;
  }

  .cwp-search-trigger__icon svg {
    width: 12px;
    height: 12px;
  }

  .cwp-search-trigger__title {
    font-size: 13px;
  }

  .cwp-search-trigger__subtitle {
    font-size: 11px;
  }

  /* Results header: smaller title */
  .cwp-results-header__title {
    font-size: 18px !important;
  }

  /* Results panel: tighter padding */
  .cwp-split-view__results {
    padding: 0 var(--cwp-space-sm, 8px);
  }

  /* Card grid: tight gap */
  .cwp-card-grid,
  .cwp-search-page .cwp-property-grid {
    gap: 12px;
  }

  /* Map FAB: larger for touch accessibility (min 44px) */
  .cwp-map-fab {
    height: 44px;
    padding: 0 18px;
    font-size: 13px;
  }

  /* Pagination: centered, minimal spacing */
  .cwp-pagination {
    padding: var(--cwp-space-md) 0 var(--cwp-space-xl);
  }

  .cwp-pagination__end {
    padding: 24px 0 32px;
  }

  /* Filter modal: tighter sections */
  .cwp-filter-modal__section {
    padding: 16px 0;
  }

  .cwp-filter-modal__section-title {
    font-size: 16px;
  }

  /* Price inputs: stack vertically */
  .cwp-filter-modal__price-inputs {
    flex-direction: column;
    gap: 12px;
  }

  .cwp-filter-modal__price-divider {
    display: none;
  }

  /* Rating pills: wrap tightly */
  .cwp-filter-modal__rating-options {
    gap: 6px;
  }

  .cwp-filter-modal__rating-btn,
  .cwp-filter-modal .cwp-filter-modal__rating-btn {
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  /* Type grid: 2-col on small mobile */
  .cwp-filter-modal__type-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .cwp-filter-modal__type-label {
    padding: 8px 10px;
    font-size: 12px;
  }

  /* Price slider thumb: bigger for touch */
  .cwp-price-slider__input::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .cwp-price-slider__input::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  /* Search overlay fields: tighter */
  .cwp-search-overlay__body {
    padding: var(--cwp-space-md);
  }

  .cwp-search-overlay__field {
    height: 64px;
    padding: var(--cwp-space-sm) var(--cwp-space-md);
  }

  /* No results: compact */
  .cwp-no-results__title {
    font-size: 18px;
  }

  .cwp-no-results__text {
    font-size: 13px;
  }
}

/* ==========================================================================
   26b. RESPONSIVE — Small Phone (≤375px)
   Extra-compact styles for iPhone SE / small Android devices.
   ========================================================================== */

@media (max-width: 375px) {
  .cwp-search-trigger {
    height: 46px;
    padding: 0 12px;
  }

  .cwp-split-view__results {
    padding: 0 4px;
  }

  .cwp-results-header__title {
    font-size: 16px !important;
  }

  /* Even tighter card grid gaps */
  .cwp-card-grid,
  .cwp-search-page .cwp-property-grid {
    gap: 8px;
  }

  /* Search overlay: minimal padding */
  .cwp-search-overlay__body {
    padding: var(--cwp-space-sm);
  }

  .cwp-search-overlay__field {
    height: 56px;
    padding: var(--cwp-space-xs) var(--cwp-space-sm);
  }

  /* Map FAB: keep accessible but compact */
  .cwp-map-fab span {
    font-size: 12px;
  }
}

/* ==========================================================================
   27. RESPONSIVE — Wide Screen (≥1536px)
   Optimized for large monitors and ultra-wide displays.
   ========================================================================== */

@media (min-width: 1536px) {
  /* Results panel: cap width for readability */
  .cwp-split-view__results {
    padding: 0 var(--cwp-space-xl, 32px);
  }

  /* Search bar: slightly taller for more presence */
  .cwp-search-bar {
    height: 60px;
  }

  .cwp-search-bar__field {
    padding: 10px 20px;
  }

  .cwp-search-bar__label {
    font-size: 12px;
  }

  .cwp-search-bar__value {
    font-size: 15px;
  }

  /* Action buttons: slightly larger */
  .cwp-search-bar__action {
    width: 44px !important;
    height: 44px !important;
  }

  .cwp-search-bar__action svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Results header: larger title */
  .cwp-results-header__title {
    font-size: 26px !important;
  }

  /* Filter modal wider */
  .cwp-filter-modal__container {
    max-width: 860px;
  }

}

@media (min-width: 1920px) {
  /* Ultra-wide: map-dominant split */
  .cwp-split-view {
    grid-template-columns: 35fr 65fr;
  }

  .cwp-split-view__results {
    padding: 0 var(--cwp-space-xl, 32px);
  }

  /* Results title: larger for ultra-wide readability */
  .cwp-results-header__title {
    font-size: 26px !important;
  }

  /* Search bar: taller for presence on large monitors */
  .cwp-search-bar {
    height: 64px;
    border-radius: 10px;
  }

  .cwp-search-bar__field {
    padding: 12px 24px;
  }

  .cwp-search-bar__value {
    font-size: 16px;
  }
}

/* Ultra-wide: standalone (non-split) grid cap */
@media (min-width: 2560px) {
  /* Cap standalone (non-split) grid at 4 columns */
  .cwp-search-page .cwp-property-grid:not(.cwp-split-view__results .cwp-property-grid) {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   28. TOUCH DEVICE — Disable hover effects
   ========================================================================== */

@media (hover: none) {
  .cwp-search-bar__action--search:hover {
    transform: none !important;
  }

  .cwp-map-fab:hover {
    transform: translateX(-50%) !important;
  }

  .cwp-room-type-card:hover {
    transform: none;
    box-shadow: none;
  }

  .cwp-filter-modal__counter-btn:hover:not([disabled]) {
    transform: none;
  }

  .cwp-filter-modal__apply:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ==========================================================================
   26. THEME-OVERRIDE HARDENING — search bar
   Added 1.2.1. Themes like Astra/Kadence/GeneratePress/Hello Elementor
   apply aggressive global rules on <button> (width: 100%, background,
   text-transform) and on <input> (border, padding, height) that break
   the search bar layout when [bly_search_bar] is dropped on a home page.
   These rules use !important to win against theme generic selectors —
   the plugin's BEM classes are specific enough that no other plugin
   markup will collide.
   ========================================================================== */

/* Field container MUST stay relative so the absolute-positioned clear
   button anchors correctly. */
.cwp-search-bar__field,
.cwp-search-bar__where,
.cwp-search-bar__checkin,
.cwp-search-bar__checkout,
.cwp-search-bar__guests {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  background-image: none !important;
}

/* Field BUTTONS rendered as divs by some themes via reset rules — keep
   our visual baseline (no theme background, no theme box-shadow). */
.cwp-search-bar__field button,
.cwp-search-bar__field [role="button"] {
  background-image: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* The action row (filter + search buttons). Don't let themes stretch
   the search button to full width. */
.cwp-search-bar__actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.cwp-search-bar__action,
.cwp-search-bar__action--search,
.cwp-search-bar__action--filter {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-image: none !important;
  text-transform: none !important;
  line-height: 1 !important;
}
.cwp-search-bar__action--search {
  background-color: var(--cwp-primary, #1B6B93) !important;
  color: #fff !important;
  border: none !important;
}
.cwp-search-bar__action--search svg,
.cwp-search-bar__action--filter svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Label inside each field — never let theme stretch/uppercase it. */
.cwp-search-bar__label {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}

/* Value display under the label — single line ellipsis, no theme padding. */
.cwp-search-bar__value {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 2026-07-21 — DATE-field values: never clip, and reserve room for the clear-X.
 *
 * The date fields are content-sized (width:max-content above), so the value no
 * longer needs the ellipsis clip the shared `.cwp-search-bar__value` rule
 * applies — and keeping it risks a sub-pixel rounding chopping the last digit.
 * So for the date fields: overflow VISIBLE, no ellipsis. `padding-right`
 * reserves the space for the clear-X that floats over the value
 * (position:absolute; right:6px; 20px) — it becomes part of the value's
 * max-content width, so the field widens to keep the date fully clear of the X.
 *
 * Scoped to the date fields so WHERE/WHO (no clear-X, flexible) keep the
 * shared ellipsis behaviour. Specificity (0,2,0) beats the shared rule; the X
 * padding is on `--filled` only (the clear-X exists only when a date is set). */
.cwp-search-bar__checkin .cwp-search-bar__value,
.cwp-search-bar__checkout .cwp-search-bar__value {
  overflow: visible !important;
  text-overflow: clip !important;
}
.cwp-search-bar__checkin .cwp-search-bar__value--filled,
.cwp-search-bar__checkout .cwp-search-bar__value--filled {
  padding-right: 22px !important;
}