/**
 * Connect WordPress Plugin — Single Property Page Styles
 *
 * Styles for the individual property detail page (.cwp-property-page).
 * All classes use the `cwp-` prefix. Consumes design tokens from variables.css.
 * Works with reset.css for theme independence.
 *
 * Sections (backward-compat stubs reference connect-public.css):
 *  1. Property Navigation (→ connect-public.css Section 22)
 *  2. Gallery — Bento Grid (page overrides)
 *  3. Gallery — Lightbox (page overrides)
 *  4. Property Layout (→ connect-public.css Section 22)
 *  5. Property Header (page overrides)
 *  6. Divider (→ connect-public.css Section 22)
 *  7. Description (→ connect-public.css Section 15)
 *  8. Amenities (→ connect-public.css Section 16)
 *  9. Calendar (→ connect-public.css Section 17)
 * 10. Reviews (→ connect-public.css Section 18)
 * 11. Map & Location (→ connect-public.css Section 20)
 * 12. Host (→ connect-public.css Section 19)
 * 13. Booking Sidebar (→ connect-public.css Section 21)
 * 14. Guest Picker (→ connect-public.css Section 21)
 * 15. Similar Properties Carousel
 * 16. Modal (shared)
 * 17. Property Footer (→ connect-public.css Section 22)
 * 18. Animations & Keyframes
 * 19. Print Overrides
 * 20. Responsive — Tablet (max-width: 1279px)
 * 21. Responsive — Mobile (max-width: 639px)
 *
 * Version: 1.0.0
 * Last Updated: 2026-02-15
 */

/* ==========================================================================
   1. PROPERTY NAVIGATION — BACKWARD COMPAT
   Core navigation styles moved to connect-public.css Section 22.
   These unscoped stubs ensure child-themes targeting .cwp-property-nav
   outside of .cwp-root still work.
   ========================================================================== */

.cwp-property-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cwp-space-md, 16px) 0;
  margin-bottom: var(--cwp-space-md, 16px);
}

.cwp-property-nav__back {
  display: flex !important;
  align-items: center !important;
  gap: var(--cwp-space-sm, 8px) !important;
  font-size: var(--cwp-size-body-sm, 13px) !important;
  color: var(--cwp-text-secondary, #4A6274) !important;
  text-decoration: none !important;
  transition: color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default) !important;
}

.cwp-property-nav__back:hover {
  color: var(--cwp-text, #1A2B3C) !important;
}

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

.cwp-property-nav__actions {
  display: flex;
  gap: var(--cwp-space-md, 16px);
}

.cwp-property-nav__share,
.cwp-property-nav__save {
  display: flex !important;
  align-items: center !important;
  gap: var(--cwp-space-xs, 4px) !important;
  font-size: var(--cwp-size-body-sm, 13px) !important;
  font-weight: var(--cwp-weight-semibold, 600) !important;
  color: var(--cwp-text, #1A2B3C) !important;
  text-decoration: underline !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default) !important;
}

.cwp-property-nav__share:hover,
.cwp-property-nav__save:hover {
  color: var(--cwp-text-secondary, #4A6274) !important;
}

.cwp-property-nav__share:focus-visible,
.cwp-property-nav__save:focus-visible {
  outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, #1B6B93) !important;
  outline-offset: var(--cwp-focus-ring-offset, 2px) !important;
  border-radius: var(--cwp-radius-sm, 4px) !important;
}

.cwp-property-nav__share svg,
.cwp-property-nav__save svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   2. GALLERY — BENTO GRID (page-specific overrides)
   Core grid layout is in connect-public.css Section 11.
   This section adds single-property-page-specific spacing refinements
   and backward-compat selectors for old class names.
   ========================================================================== */

/* Page-level spacing override */
.cwp-property-page .cwp-gallery {
  margin-bottom: var(--cwp-space-xl, 32px);
}

/* Backward-compat: old class names.
   Old HTML used .cwp-gallery__main / .cwp-gallery__secondary / .cwp-gallery__item.
   New HTML uses .cwp-gallery__cell / .cwp-gallery__cell--main.
   These alias rules ensure child-theme CSS targeting old names still works. */
.cwp-gallery__main {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.cwp-gallery__main img,
.cwp-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--cwp-duration-slow, 400ms) var(--cwp-ease-default);
}

.cwp-gallery__main:hover img {
  transform: scale(1.02);
}

.cwp-gallery__item {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.cwp-gallery__item:hover img {
  transform: scale(1.04);
}

.cwp-gallery__item--placeholder {
  background: var(--cwp-surface-alt, #F0F7FA);
  cursor: default;
}

/* ── Gallery V2 Enhancements ──────────────────────────────────── */

/* Photo count badge — HIDDEN (counter only in lightbox now, Airbnb-style) */
.cwp-gallery__count {
  display: none !important;
}

/* Hover overlay on cells — subtle darkening (Airbnb-style) */
.cwp-gallery__hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background var(--cwp-duration-normal, 250ms) var(--cwp-ease-default);
  pointer-events: none;
  z-index: 1;
}

.cwp-gallery__cell:hover .cwp-gallery__hover-overlay {
  background: rgba(0, 0, 0, 0.04);
}

/* Enhanced hover zoom using design token */
.cwp-gallery__cell:hover .cwp-gallery__image {
  transform: scale(var(--cwp-gallery-hover-scale, 1.03));
}

/* Lazy loading fade-in */
.cwp-gallery__image--lazy {
  opacity: 0;
  transition: opacity var(--cwp-gallery-lazy-duration, 400ms) var(--cwp-ease-default);
}

.cwp-gallery__image--lazy.cwp-gallery__image--loaded {
  opacity: 1;
}

@keyframes cwp-gallery-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   3. GALLERY — LIGHTBOX (page-specific overrides)
   Core lightbox layout + animations are in connect-public.css Section 12.
   This section adds single-property-page-specific adjustments and
   backward-compat selectors for old class names.
   ========================================================================== */

/* Backward-compat: old .cwp-lightbox__main selector.
   New HTML uses .cwp-lightbox__stage. Alias for child-theme CSS. */
.cwp-lightbox__main {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 80vh;
  width: 100%;
  position: relative;
}

/* Backward-compat: old .cwp-lightbox__thumbnails-track selector.
   New HTML renders thumbs directly inside .cwp-lightbox__thumbnails. */
.cwp-lightbox__thumbnails-track {
  display: flex;
  gap: 6px;
  justify-content: center;
  min-width: min-content;
}

/* Backward-compat: old .cwp-lightbox__thumbnail (now .cwp-lightbox__thumb).
   These alias rules ensure child-theme CSS targeting old names still works. */
.cwp-lightbox__thumbnail {
  flex-shrink: 0 !important;
  width: 80px !important;
  height: 60px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  opacity: 0.5 !important;
  transition: opacity 150ms ease, border-color 150ms ease, transform 150ms ease !important;
}

.cwp-lightbox__thumbnail:hover {
  opacity: 0.85 !important;
}

.cwp-lightbox__thumbnail--active {
  border-color: #FFFFFF !important;
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

.cwp-lightbox__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   4. PROPERTY LAYOUT — BACKWARD COMPAT
   Core layout styles moved to connect-public.css Section 22.
   These stubs alias the old class names (.cwp-property-content,
   .cwp-property-sidebar) so child-themes targeting them still work.
   New HTML uses .cwp-property-layout__main and .cwp-property-layout__sidebar.
   ========================================================================== */

/* Old main content wrapper — mapped to new .cwp-property-layout__main */
.cwp-property-content {
  min-width: 0;
}

/* Old sidebar wrapper — mapped to new .cwp-property-layout__sidebar */
.cwp-property-sidebar {
  position: relative;
}

/* ==========================================================================
   4b. SECTION CARD
   Elevated card wrapper for property page sections.
   Each section (header, description, amenities, reviews, host, etc.)
   is wrapped in a .cwp-section-card container.
   ========================================================================== */

.cwp-property-page .cwp-section-card {
  background: var(--cwp-surface, #fff);
  padding: clamp(20px, 2.5vw, 32px);
  border-radius: var(--cwp-section-radius, 16px);
  box-shadow: var(--cwp-section-shadow, 0px 8px 20px 0px rgba(0, 0, 0, 0.05));
  margin-bottom: clamp(32px, 4vw, 56px);
}

.cwp-section-card .cwp-section-title {
  font-family: var(--cwp-font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: var(--cwp-weight-semibold, 600);
  color: var(--cwp-text);
  margin: 0 0 var(--cwp-section-title-gap, 24px) 0;
  padding: 0;
  line-height: var(--cwp-line-height-tight, 1.22);
}

/* ==========================================================================
   4c. PROPERTY HEADER — OVERVIEW LAYOUT
   ThemesFlat-style header with title/price row, action icons, detail grid.
   ========================================================================== */

/* Heading row: title only (Plum Guide style — no price, no divider) */
.cwp-property-header__heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cwp-spacing-lg, 24px);
  padding-bottom: 0;
  margin-bottom: 16px;
  border-bottom: none;
}

.cwp-property-header__heading .cwp-property-title {
  margin: 0;
  padding: 0;
  font-family: var(--cwp-font-display);
  font-size: clamp(24px, 3.5vw, 44px);
  font-weight: 500;
  color: var(--cwp-text);
  line-height: var(--cwp-line-height-tight, 1.22);
  letter-spacing: -0.02em;
}

.cwp-property-header__price {
  flex-shrink: 0;
  text-align: right;
}

.cwp-property-header__price-amount {
  font-family: var(--cwp-font-display);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: var(--cwp-weight-semibold, 600);
  color: var(--cwp-text);
  line-height: var(--cwp-line-height-tight, 1.22);
}

.cwp-property-header__price-period {
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body, 16px);
  font-weight: var(--cwp-weight-regular, 400);
  color: var(--cwp-text-muted);
}

/* Info row: location + meta (left) + action buttons (right) */
.cwp-property-header__info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cwp-spacing-lg, 24px);
  margin-bottom: 16px;
}

.cwp-property-header__meta-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body, 16px);
  color: var(--cwp-text-secondary);
}

.cwp-property-header__meta-list .cwp-meta-separator {
  color: var(--cwp-text-muted);
  font-weight: var(--cwp-weight-bold, 700);
}

/* Action buttons (share, save, print) */
.cwp-property-header__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cwp-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cwp-action-btn-size, 40px);
  height: var(--cwp-action-btn-size, 40px);
  border: 1px solid var(--cwp-border, #ececec);
  border-radius: var(--cwp-action-btn-radius, 10px);
  background: var(--cwp-surface, #fff);
  color: var(--cwp-text);
  cursor: pointer;
  padding: 0;
  transition: all var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-action-btn:hover {
  background: var(--cwp-primary, #f1913d);
  border-color: var(--cwp-primary, #f1913d);
  color: #FFFFFF;
}

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

.cwp-action-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Detail grid — icon boxes (equal-width columns) */
.cwp-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
}

.cwp-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cwp-detail-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cwp-detail-icon-size, 52px);
  height: var(--cwp-detail-icon-size, 52px);
  border: 1px solid var(--cwp-border, #ececec);
  border-radius: var(--cwp-detail-icon-radius, 8px);
  background: var(--cwp-surface, #fff);
  flex-shrink: 0;
}

.cwp-detail-item__icon svg {
  width: 24px;
  height: 24px;
  color: var(--cwp-primary, #f1913d);
}

.cwp-detail-item__label {
  display: block;
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body-sm, 14px);
  color: var(--cwp-text-muted);
  line-height: var(--cwp-line-height-normal, 1.4);
}

.cwp-detail-item__value {
  display: block;
  font-family: var(--cwp-font-display);
  font-size: var(--cwp-size-body, 16px);
  font-weight: var(--cwp-weight-semibold, 600);
  color: var(--cwp-text);
  line-height: var(--cwp-line-height-normal, 1.4);
}

/* ==========================================================================
   4c-ii. INLINE PROPERTY STATS — Plum Guide style
   Single-line text row: "condo · 3 bedrooms · 2 bathrooms · 4 guests"
   Replaces the old icon-card detail grid.
   ========================================================================== */

.cwp-property-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--cwp-font-body);
  font-size: 15px;
  color: var(--cwp-text-secondary, #4A6274);
  padding: 0;
  margin: 0;
}

.cwp-property-stats__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cwp-property-stats__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--cwp-text-muted, #8899A6);
}

.cwp-property-stats__sep {
  color: var(--cwp-text-muted, #8899A6);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
}

/* ── Property address ─────────────────────────────────────────────── */
.cwp-property-address {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--cwp-text-secondary, #4A6274);
  line-height: 1.4;
}

.cwp-property-address svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--cwp-text-muted, #8899A6);
  fill: var(--cwp-text-muted, #8899A6);
}

/* ==========================================================================
   4d. AMENITIES — 3-COLUMN DISC LIST
   ========================================================================== */

.cwp-amenities__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.cwp-amenities__column {
  flex: 1;
  min-width: 200px;
}

.cwp-amenities__list {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
}

.cwp-amenities__list li {
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body, 16px);
  color: var(--cwp-text);
  line-height: 2;
}

.cwp-amenities__list li::marker {
  color: var(--cwp-primary, #f1913d);
}

/* ==========================================================================
   4e. BOOKING SIDEBAR CARD ENHANCEMENT
   ========================================================================== */

.cwp-booking-sidebar,
.cwp-booking-card {
  box-shadow: var(--cwp-section-shadow, 0px 8px 20px 0px rgba(0, 0, 0, 0.05));
  border-radius: var(--cwp-radius-xl, 16px);
  border: 1px solid var(--cwp-border, #ececec);
}

/* ── Booking V2: Glass-morphism ──────────────────────────────── */

@supports (backdrop-filter: blur(1px)) {
  .cwp-sidebar--glass {
    background: var(--cwp-booking-glass-bg, rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.85));
    backdrop-filter: blur(var(--cwp-booking-glass-blur, 12px));
    -webkit-backdrop-filter: blur(var(--cwp-booking-glass-blur, 12px));
    border-color: var(--cwp-booking-glass-border, rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.3));
  }
}

/* ── Booking V2: Trust Indicators ────────────────────────────── */

.cwp-sidebar__trust-section {
  display: flex;
  flex-direction: column;
  gap: var(--cwp-spacing-sm, 8px);
  padding-top: var(--cwp-spacing-md, 16px);
  margin-top: var(--cwp-spacing-md, 16px);
  border-top: 1px solid var(--cwp-border, #ececec);
}

.cwp-sidebar__trust-item {
  display: flex;
  align-items: center;
  gap: var(--cwp-spacing-sm, 8px);
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body-sm, 13px);
  color: var(--cwp-booking-trust-text-color, var(--cwp-text-secondary, #4A6274));
  line-height: 1.4;
}

.cwp-sidebar__trust-icon {
  flex-shrink: 0;
  width: var(--cwp-booking-trust-icon-size, 20px);
  height: var(--cwp-booking-trust-icon-size, 20px);
  color: var(--cwp-booking-trust-icon-color, var(--cwp-success, #10B981));
}

/* ── Booking V2: Mobile Compact Bar ──────────────────────────── */

/* Hidden on desktop — the full sidebar body is visible instead */
.cwp-sidebar__compact {
  display: none;
}

@media (max-width: 1023px) {
  .cwp-sidebar__compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px var(--cwp-spacing-lg, 20px);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Compact bar: date & guest pill row ──────────────────────── */

.cwp-sidebar__compact-fields {
  display: flex;
  gap: 8px;
}

.cwp-sidebar__compact-pill {
  all: revert !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1.5px solid var(--cwp-border, #d1d5db) !important;
  border-radius: var(--cwp-radius-lg, 12px) !important;
  background: var(--cwp-surface, #FFFFFF) !important;
  color: var(--cwp-text, #1A2B3C) !important;
  font-family: var(--cwp-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: border-color 150ms ease !important;
}

.cwp-sidebar__compact-pill:hover {
  border-color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-sidebar__compact-pill:focus-visible {
  outline: 2px solid var(--cwp-primary, #1A3A4A) !important;
  outline-offset: 2px !important;
}

.cwp-sidebar__compact-pill svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--cwp-text-muted, #6B7280);
}

.cwp-sidebar__compact-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dates pill gets slightly more space */
.cwp-sidebar__compact-pill--dates,
.cwp-sidebar__compact-pill--dates:hover,
.cwp-sidebar__compact-pill--dates:focus {
  flex: 1.3 1 0 !important;
}

/* ── Compact bar: full-width CTA ─────────────────────────────── */

.cwp-sidebar__compact-cta {
  width: 100% !important;
  height: 48px !important;
  border-radius: 9999px !important;
  font-size: var(--cwp-size-body, 15px) !important;
  font-weight: var(--cwp-weight-semibold, 600) !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

/* ── Booking V2: Price Breakdown Stagger Animation ───────────── */

.cwp-sidebar__breakdown .cwp-sidebar__line,
.cwp-sidebar__breakdown .cwp-sidebar__total {
  animation: cwp-breakdown-slide-in var(--cwp-duration-normal, 250ms) var(--cwp-ease-out) backwards;
}

.cwp-sidebar__breakdown .cwp-sidebar__line:nth-child(1) {
  animation-delay: 0ms;
}
.cwp-sidebar__breakdown .cwp-sidebar__line:nth-child(2) {
  animation-delay: var(--cwp-booking-breakdown-stagger, 60ms);
}
.cwp-sidebar__breakdown .cwp-sidebar__line:nth-child(3) {
  animation-delay: calc(var(--cwp-booking-breakdown-stagger, 60ms) * 2);
}
.cwp-sidebar__breakdown .cwp-sidebar__line:nth-child(4) {
  animation-delay: calc(var(--cwp-booking-breakdown-stagger, 60ms) * 3);
}
.cwp-sidebar__breakdown .cwp-sidebar__total {
  animation-delay: calc(var(--cwp-booking-breakdown-stagger, 60ms) * 4);
}

@keyframes cwp-breakdown-slide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Booking V2: Inline Calendar Mode ────────────────────────── */

.cwp-calendar--inline {
  border: none;
  box-shadow: none;
  padding: 0;
}

.cwp-calendar--inline .cwp-calendar__months {
  gap: 0;
}

/* ==========================================================================
   4f. REVIEW ACTION LINKS
   ========================================================================== */

.cwp-review__actions {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

.cwp-review__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body-sm, 14px);
  color: var(--cwp-text-muted);
  transition: color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-review__action-btn:hover {
  color: var(--cwp-text);
}

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

/* ==========================================================================
   5. PROPERTY HEADER (page-specific overrides)
   Core header layout is in connect-public.css Section 13.
   This section adds backward-compat selectors for old class names
   (old HTML used .cwp-property-header__spec with middot separators;
   new HTML uses .cwp-pill elements instead).
   ========================================================================== */

/* Backward-compat: old .cwp-property-header__spec selector (now .cwp-pill).
   Old child-theme CSS targeting __spec still works. */
.cwp-property-header__spec {
  display: inline-flex;
  align-items: center;
  gap: var(--cwp-spacing-xs, 4px);
  font-size: var(--cwp-size-body, 15px);
  color: var(--cwp-text, #1A2B3C);
}

/* Middot separators between old __spec elements */
.cwp-property-header__spec + .cwp-property-header__spec::before {
  content: "\00B7";
  margin-right: var(--cwp-spacing-sm, 8px);
  color: var(--cwp-text-muted, #8899A6);
  font-weight: var(--cwp-weight-bold, 700);
}

/* ==========================================================================
   6. DIVIDER — BACKWARD COMPAT
   Core divider styles moved to connect-public.css Section 22.
   This unscoped stub ensures child-themes targeting .cwp-divider
   outside of .cwp-root still work.
   ========================================================================== */

.cwp-divider {
  border: none;
  border-top: 1px solid var(--cwp-border, #D4E0E8);
  margin: var(--cwp-space-lg, 24px) 0;
}

/* ==========================================================================
   7. DESCRIPTION
   Core description layout is in connect-public.css Section 15 (cwp-description).
   This section provides backward-compat aliases for the old class names
   (old HTML used .cwp-property-description; new HTML uses .cwp-description).
   ========================================================================== */

/* Backward-compat: old .cwp-property-description → new .cwp-description */
.cwp-property-description {
  padding: var(--cwp-space-lg, 24px) 0 0 0;
}

.cwp-property-description h2 {
  font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif) !important;
  font-size: var(--cwp-size-h2, 24px) !important;
  font-weight: var(--cwp-weight-regular, 400) !important;
  color: var(--cwp-text, #1A2B3C) !important;
  margin-bottom: var(--cwp-space-lg, 24px) !important;
}

/* Old __text selector with webkit line-clamp (now handled via max-height) */
.cwp-property-description__text {
  font-size: var(--cwp-size-body, 15px);
  line-height: var(--cwp-line-height-relaxed, 1.7);
  color: var(--cwp-text, #1A2B3C);
  overflow: hidden;
  max-height: 9.6em;
}

.cwp-property-description__text--expanded {
  max-height: none;
  overflow: visible;
}

.cwp-property-description__text p {
  margin-bottom: var(--cwp-space-md, 16px);
}

.cwp-property-description__text p:last-child {
  margin-bottom: 0;
}

.cwp-property-description__toggle {
  display: inline-flex !important;
  align-items: center !important;
  font-size: var(--cwp-size-body, 15px) !important;
  font-weight: var(--cwp-weight-semibold, 600) !important;
  color: var(--cwp-text, #1A2B3C) !important;
  text-decoration: underline !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: var(--cwp-space-md, 16px) !important;
  cursor: pointer !important;
}

.cwp-property-description__toggle:hover {
  color: var(--cwp-text-secondary, #4A6274) !important;
}

/* ==========================================================================
   8. AMENITIES
   Core amenities styles are in connect-public.css Section 16.
   V2: Card grid layout replaces 3-column disc list.
   ========================================================================== */

/* ── Amenities V2: Card Grid ─────────────────────────────────── */

.cwp-amenities__card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--cwp-spacing-md, 16px);
}

.cwp-amenities__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cwp-spacing-sm, 8px);
  padding: var(--cwp-amenity-card-padding, 16px);
  background: var(--cwp-amenity-card-bg, var(--cwp-surface-alt, #F0F7FA));
  border-radius: var(--cwp-amenity-card-radius, 8px);
  text-align: center;
  transition: transform var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
              box-shadow var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-amenities__card:hover {
  transform: translateY(var(--cwp-amenity-card-hover-translate, -2px));
  box-shadow: var(--cwp-amenity-card-hover-shadow, 0 4px 12px rgba(27, 107, 147, 0.12));
}

.cwp-amenities__card .cwp-amenities__fa-icon {
  width: 24px;
  height: 24px;
  background: none;
  color: var(--cwp-amenity-card-icon-color, var(--cwp-primary));
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cwp-amenities__card-label {
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body-sm, 13px);
  font-weight: var(--cwp-weight-medium, 500);
  color: var(--cwp-text);
  line-height: 1.3;
}

/* ── Amenities V2: Modal Search ──────────────────────────────── */

.cwp-amenities-modal__search {
  margin-bottom: var(--cwp-spacing-md, 16px);
}

.cwp-amenities-modal__search-input {
  width: 100%;
  height: var(--cwp-amenity-search-height, 44px);
  padding: 0 var(--cwp-spacing-md, 16px);
  border: 1px solid var(--cwp-border, #ececec);
  border-radius: var(--cwp-amenity-search-radius, 8px);
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body, 15px);
  color: var(--cwp-text);
  background: var(--cwp-surface, #FFFFFF);
  outline: none;
  transition: border-color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
  box-sizing: border-box;
}

.cwp-amenities-modal__search-input:focus {
  border-color: var(--cwp-primary);
  box-shadow: 0 0 0 2px rgba(27, 107, 147, 0.15);
}

.cwp-amenities-modal__search-input::placeholder {
  color: var(--cwp-text-muted);
}

/* ── Amenities V2: Category Tabs ─────────────────────────────── */

.cwp-amenities-modal__tabs {
  display: flex;
  gap: var(--cwp-spacing-xs, 4px);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--cwp-spacing-md, 16px);
  margin-bottom: var(--cwp-spacing-md, 16px);
  border-bottom: 1px solid var(--cwp-border, #ececec);
  -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, black 90%, transparent 100%);
}

.cwp-amenities-modal__tabs::-webkit-scrollbar {
  display: none;
}

.cwp-amenities-modal__tab {
  flex-shrink: 0;
  height: var(--cwp-amenity-tab-height, 36px);
  padding: 0 var(--cwp-spacing-md, 16px);
  border: 1px solid var(--cwp-border, #ececec);
  border-radius: var(--cwp-amenity-tab-radius, 9999px);
  background: var(--cwp-amenity-tab-bg, var(--cwp-surface-alt, #F0F7FA));
  font-family: var(--cwp-font-body);
  font-size: var(--cwp-size-body-sm, 13px);
  font-weight: var(--cwp-weight-medium, 500);
  color: var(--cwp-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
              color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
              border-color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-amenities-modal__tab:hover {
  border-color: var(--cwp-primary);
}

.cwp-amenities-modal__tab--active {
  background: var(--cwp-amenity-tab-active-bg, var(--cwp-primary));
  color: var(--cwp-amenity-tab-active-color, #FFFFFF);
  border-color: var(--cwp-amenity-tab-active-bg, var(--cwp-primary));
}

/* ── Amenities V2: Empty State ───────────────────────────────── */

.cwp-amenities-modal__empty {
  text-align: center;
  padding: var(--cwp-spacing-xl, 32px) 0;
  color: var(--cwp-text-muted);
  font-size: var(--cwp-size-body, 15px);
}

/* ==========================================================================
   9. CALENDAR (AVAILABILITY)
   Core calendar styles are in connect-public.css Section 17 (cwp-calendar).
   This section provides backward-compat for the old class names
   (old HTML used .cwp-property-calendar with #cwp-availability-calendar;
   new HTML uses .cwp-calendar with Alpine.js connectCalendar component).
   ========================================================================== */

/* Backward-compat: old .cwp-property-calendar wrapper */
.cwp-property-calendar {
  padding: var(--cwp-space-lg, 24px) 0;
}

.cwp-property-calendar h2 {
  font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif) !important;
  font-size: var(--cwp-size-h2, 24px) !important;
  font-weight: var(--cwp-weight-regular, 400) !important;
  color: var(--cwp-text, #1A2B3C) !important;
  margin-bottom: var(--cwp-space-lg, 24px) !important;
}

/* Old JS-rendered calendar placeholder */
#cwp-availability-calendar {
  min-height: 300px;
}

/* Old legend selectors (still work for child-theme overrides) */
.cwp-calendar-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cwp-space-lg, 24px);
  margin-top: var(--cwp-space-md, 16px);
  padding-top: var(--cwp-space-md, 16px);
}

.cwp-calendar-legend__item {
  display: flex;
  align-items: center;
  gap: var(--cwp-space-sm, 8px);
  font-size: var(--cwp-size-body-sm, 13px);
  color: var(--cwp-text-secondary, #4A6274);
}

.cwp-calendar-legend__indicator {
  width: 12px;
  height: 12px;
  border-radius: var(--cwp-radius-sm, 4px);
  display: inline-block;
  flex-shrink: 0;
}

.cwp-calendar-legend__indicator--available {
  background-color: var(--cwp-success, #10B981);
}

.cwp-calendar-legend__indicator--booked {
  background-color: var(--cwp-error, #EF4444);
}

.cwp-calendar-legend__indicator--blocked {
  background-color: var(--cwp-text-muted, #8899A6);
}

/* ==========================================================================
   10. REVIEWS — BACKWARD COMPAT
   Original reviews styles moved to connect-public.css Section 18.
   These stubs alias old class names (e.g. .cwp-reviews__header,
   .cwp-reviews__overall) so child-themes targeting them still work.
   ========================================================================== */

/* Old header wrapper — mapped to new .cwp-reviews__hero */
.cwp-reviews__header {
  margin-bottom: var(--cwp-space-xl, 32px);
}

/* Old overall score layout — alias for .cwp-reviews__score-block */
.cwp-reviews__overall,
.cwp-reviews__summary {
  display: flex;
  align-items: center;
  gap: var(--cwp-space-sm, 12px);
}

/* Old grid class — alias for .cwp-reviews__list */
.cwp-reviews__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cwp-space-lg, 24px);
}

/* Old #cwp-property-reviews ID kept for anchor links */
#cwp-property-reviews {
  scroll-margin-top: 80px;
}

/* Calendar Per-Night Pricing */
.cwp-calendar__day-price {
  display: block;
  font-size: 9px;
  line-height: 1;
  color: var(--cwp-text-muted, #8899A6);
  margin-top: 1px;
  font-weight: var(--cwp-weight-regular, 400);
}

.cwp-calendar__day--checkin .cwp-calendar__day-price,
.cwp-calendar__day--checkout .cwp-calendar__day-price {
  color: #FFFFFF;
}

.cwp-calendar__day--in-range .cwp-calendar__day-price {
  color: var(--cwp-primary, #1B6B93);
}

/* Pricing tier color coding */
.cwp-calendar__day--price-low .cwp-calendar__day-price {
  color: var(--cwp-success, #10B981);
}

.cwp-calendar__day--price-mid .cwp-calendar__day-price {
  color: var(--cwp-text-muted, #8899A6);
}

.cwp-calendar__day--price-high .cwp-calendar__day-price {
  color: var(--cwp-accent, #E8A317);
}

.cwp-calendar__day--price-peak .cwp-calendar__day-price {
  color: var(--cwp-error, #DC3545);
}

/* Day layout for number + price stacked */
.cwp-calendar__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 2px;
  gap: 0;
}

.cwp-calendar__day-number {
  font-size: var(--cwp-size-body-sm, 13px);
  line-height: 1.2;
}

/* ==========================================================================
   11. MAP & LOCATION — BACKWARD COMPAT
   Original map & location styles moved to connect-public.css Section 20.
   These stubs alias old class names (e.g. .cwp-map-section, .cwp-map,
   .cwp-map__address, .cwp-location__icon) so child-themes targeting
   them still work.
   ========================================================================== */

/* Old map section wrapper — mapped to new .cwp-location */
.cwp-map-section {
  padding: var(--cwp-space-xl, 32px) 0;
}

/* Old map container — mapped to new .cwp-location__map */
.cwp-map {
  width: 100%;
  height: 400px;
  border-radius: var(--cwp-radius-lg, 12px);
  overflow: hidden;
  background: var(--cwp-surface-alt, #F0F7FA);
}

/* Old map address line — mapped to new .cwp-location__headline */
.cwp-map__address {
  font-size: var(--cwp-size-body, 15px);
  color: var(--cwp-text, #1A2B3C);
  margin-top: var(--cwp-space-md, 16px);
}

/* Old map privacy note — mapped to new .cwp-location__privacy-note */
.cwp-map__note {
  font-size: var(--cwp-size-body-sm, 13px);
  color: var(--cwp-text-muted, #8899A6);
  margin-top: var(--cwp-space-sm, 8px);
}

/* Old icon class name — mapped to new .cwp-location__highlight-icon */
.cwp-location__icon {
  width: 20px;
  height: 20px;
  color: var(--cwp-text-secondary, #4A6274);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ==========================================================================
   12. HOST — BACKWARD COMPAT
   Original host styles moved to connect-public.css Section 19.
   These stubs alias old class names (e.g. .cwp-host__card,
   .cwp-host__badge) so child-themes targeting them still work.
   ========================================================================== */

/* Old card wrapper — mapped to new .cwp-host__profile */
.cwp-host__card {
  display: flex;
  align-items: center;
  gap: var(--cwp-space-md, 16px);
}

/* Old badge element — mapped to new .cwp-host__subtitle */
.cwp-host__badge {
  display: flex;
  align-items: center;
  gap: var(--cwp-space-xs, 4px);
  font-size: var(--cwp-size-body-sm, 13px);
  color: var(--cwp-text-secondary, #4A6274);
}

.cwp-host__badge svg {
  width: 16px;
  height: 16px;
  color: var(--cwp-accent, #E8A317);
  fill: var(--cwp-accent, #E8A317);
  flex-shrink: 0;
}

/* ==========================================================================
   13. BOOKING SIDEBAR — BACKWARD COMPAT
   Original booking sidebar styles moved to connect-public.css Section 21.
   These stubs alias old .cwp-booking__* class names so child-themes
   targeting them still work.
   ========================================================================== */

/* Old booking container — mapped to new .cwp-sidebar */
.cwp-booking {
  background: var(--cwp-surface, #FFFFFF);
  border: 1px solid var(--cwp-border, #D4E0E8);
  border-radius: var(--cwp-radius-xl, 16px);
  padding: var(--cwp-space-xl, 32px);
  box-shadow: var(--cwp-shadow-lg, 0 8px 24px rgba(27, 107, 147, 0.16));
}

/* Old booking CTA — mapped to new .cwp-sidebar__cta */
.cwp-booking__cta {
  width: 100% !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--cwp-gradient, linear-gradient(135deg, #1B6B93 0%, #145272 100%)) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: transform 0.15s ease, opacity 0.15s ease !important;
}

.cwp-booking__cta:hover {
  opacity: 0.92 !important;
  transform: scale(1.01) !important;
  background: var(--cwp-gradient, linear-gradient(135deg, #1B6B93 0%, #145272 100%)) !important;
  color: #FFFFFF !important;
}

.cwp-booking__cta:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Old booking note — mapped to new .cwp-sidebar__trust */
.cwp-booking__note {
  text-align: center;
  font-size: var(--cwp-size-body-sm, 13px);
  color: var(--cwp-text-muted, #8899A6);
}

/* Old period text — mapped to new .cwp-sidebar__unit */
.cwp-booking__period {
  font-size: var(--cwp-size-body, 15px);
  color: var(--cwp-text-secondary, #4A6274);
}

/* Old divider — no longer used but child themes may target it */
.cwp-booking__divider {
  border: none;
  border-top: 1px solid var(--cwp-border, #D4E0E8);
  margin: var(--cwp-space-sm, 8px) 0;
}

/* ==========================================================================
   14. GUEST PICKER — BACKWARD COMPAT
   Original guest picker styles moved to connect-public.css Section 21.
   These stubs alias old .cwp-guest-picker__* class names.
   ========================================================================== */

/* Old guest picker container */
.cwp-guest-picker {
  padding: var(--cwp-space-md, 16px);
  border: 1px solid var(--cwp-border, #D4E0E8);
  border-radius: var(--cwp-radius-lg, 12px);
  background: var(--cwp-surface, #FFFFFF);
}

.cwp-guest-picker__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cwp-space-md, 16px) 0;
}

.cwp-guest-picker__row:not(:last-child) {
  border-bottom: 1px solid var(--cwp-border, #D4E0E8);
}

/* ==========================================================================
   15. SIMILAR PROPERTIES CAROUSEL
   ========================================================================== */

.cwp-similar-properties {
  padding: var(--cwp-space-2xl, 48px) 0;
  border-top: 1px solid var(--cwp-border, #D4E0E8);
  margin-top: var(--cwp-space-xl, 32px);
}

.cwp-similar-properties h2 {
  font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif) !important;
  font-size: var(--cwp-size-h2, 24px) !important;
  font-weight: var(--cwp-weight-regular, 400) !important;
  color: var(--cwp-text, #1A2B3C) !important;
  margin-bottom: var(--cwp-space-lg, 24px) !important;
}

.cwp-property-carousel {
  position: relative;
}

.cwp-carousel-track {
  display: flex;
  gap: var(--cwp-space-lg, 24px);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px 16px;
}

.cwp-carousel-track::-webkit-scrollbar {
  display: none;
}

.cwp-carousel-track > * {
  flex: 0 0 calc(33.333% - 16px);
  min-width: 280px;
}

.cwp-carousel-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--cwp-radius-full, 9999px) !important;
  background: var(--cwp-surface, #FFFFFF) !important;
  background-color: var(--cwp-surface, #FFFFFF) !important;
  border: 1px solid var(--cwp-border, #D4E0E8) !important;
  color: var(--cwp-text, #1A2B3C) !important;
  cursor: pointer !important;
  padding: 0 !important;
  z-index: 10 !important;
  box-shadow: var(--cwp-shadow-md, 0 4px 12px rgba(27, 107, 147, 0.12)) !important;
  transition: background-color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
              box-shadow var(--cwp-duration-fast, 150ms) var(--cwp-ease-default) !important;
}

.cwp-carousel-btn:hover {
  background: var(--cwp-surface-alt, #F0F7FA) !important;
  background-color: var(--cwp-surface-alt, #F0F7FA) !important;
  box-shadow: var(--cwp-shadow-lg, 0 8px 24px rgba(27, 107, 147, 0.16)) !important;
}

.cwp-carousel-btn--prev {
  left: -20px !important;
}

.cwp-carousel-btn--next {
  right: -20px !important;
}

.cwp-carousel-btn svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   16. MODAL (Shared — Amenities & Reviews)
   ========================================================================== */

.cwp-modal {
  position: fixed;
  inset: 0;
  z-index: var(--cwp-z-modal, 400);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cwp-modal__overlay {
  position: fixed;
  inset: 0;
  background: var(--cwp-overlay, rgba(26, 43, 60, 0.85));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cwp-modal__content {
  position: relative;
  z-index: calc(var(--cwp-z-modal, 400) + 1);
  background: var(--cwp-surface, #FFFFFF);
  border-radius: var(--cwp-radius-xl, 16px);
  padding: 0;
  max-width: 560px;
  max-height: 80vh;
  width: 90%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--cwp-shadow-xl, 0 16px 48px rgba(27, 107, 147, 0.20));
}

.cwp-modal__content--large {
  max-width: 800px;
}

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

.cwp-modal__title {
  font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif) !important;
  font-size: var(--cwp-size-h3, 20px) !important;
  font-weight: var(--cwp-weight-regular, 400) !important;
  color: var(--cwp-text, #1A2B3C) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--cwp-space-sm, 8px) !important;
}

.cwp-modal__title-group {
  display: flex;
  align-items: center;
  gap: var(--cwp-space-sm, 8px);
}

.cwp-modal__title svg {
  width: 20px;
  height: 20px;
  color: var(--cwp-accent, #E8A317);
  fill: var(--cwp-accent, #E8A317);
  flex-shrink: 0;
}

.cwp-modal__title span {
  font-family: var(--cwp-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: var(--cwp-size-body-sm, 13px);
  font-weight: var(--cwp-weight-regular, 400);
  color: var(--cwp-text-secondary, #4A6274);
}

.cwp-modal__close {
  width: var(--cwp-lightbox-close-size, 44px) !important;
  height: var(--cwp-lightbox-close-size, 44px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--cwp-radius-full, 9999px) !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--cwp-text, #1A2B3C) !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: background-color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default) !important;
}

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

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

.cwp-modal__close svg {
  width: 20px;
  height: 20px;
}

.cwp-modal__body {
  padding: var(--cwp-space-xl, 32px);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* ==========================================================================
   17. PROPERTY FOOTER — BACKWARD COMPAT
   Core footer styles moved to connect-public.css Section 22.
   These unscoped stubs ensure child-themes targeting .cwp-property-footer
   outside of .cwp-root still work.
   ========================================================================== */

.cwp-property-footer {
  padding: var(--cwp-space-xl, 32px) 0;
  border-top: 1px solid var(--cwp-border, #D4E0E8);
  display: flex;
  justify-content: center;
}

.cwp-property-footer__report {
  display: flex !important;
  align-items: center !important;
  gap: var(--cwp-space-sm, 8px) !important;
  font-size: var(--cwp-size-body-sm, 13px) !important;
  color: var(--cwp-text-muted, #8899A6) !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: var(--cwp-space-sm, 8px) var(--cwp-space-md, 16px) !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  transition: color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default) !important;
}

.cwp-property-footer__report:hover {
  color: var(--cwp-text-secondary, #4A6274) !important;
}

.cwp-property-footer__report svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   18. ANIMATIONS & KEYFRAMES
   Lightbox open/close transitions now use Alpine x-transition classes
   defined in connect-public.css Section 12.
   ========================================================================== */

/* Overlay fade — reused by modals */
@keyframes cwp-overlay-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal enter scale — reused by modal component (not lightbox) */
@keyframes cwp-modal-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Review bar fill animation */
@keyframes cwp-bar-fill {
  from { width: 0; }
}

/* Modal enter animations (lightbox uses Alpine transitions in connect-public.css) */

/* Override frontend.css base visibility:hidden / opacity:0 when Alpine x-show is active */
.cwp-modal[x-show]:not([style*="display: none"]) {
  visibility: visible !important;
  opacity: 1 !important;
}

.cwp-modal[x-show]:not([style*="display: none"]) .cwp-modal__overlay {
  animation: cwp-overlay-enter var(--cwp-duration-normal, 250ms) var(--cwp-ease-out);
}

.cwp-modal[x-show]:not([style*="display: none"]) .cwp-modal__content {
  animation: cwp-modal-enter var(--cwp-duration-normal, 250ms) var(--cwp-ease-out);
}

/* Alpine cloak for hidden elements — scoped to plugin */
.cwp-root [x-cloak],
.cwp-lightbox [x-cloak],
.cwp-modal [x-cloak],
.cwp-amenities-modal [x-cloak],
.cwp-reviews-modal [x-cloak] {
  display: none !important;
}

/* ==========================================================================
   19. PRINT OVERRIDES — BACKWARD COMPAT
   Core print styles moved to connect-public.css Section 22.
   These unscoped stubs cover old class names for child-theme overrides.
   ========================================================================== */

@media print {
  .cwp-property-sidebar,
  .cwp-property-layout__sidebar,
  .cwp-gallery__show-all,
  .cwp-lightbox,
  .cwp-modal,
  .cwp-property-nav__actions,
  .cwp-property-footer,
  .cwp-carousel-btn,
  .cwp-similar-properties,
  .cwp-booking__calendar,
  .cwp-booking__guest-picker,
  .cwp-amenities__show-all {
    display: none !important;
  }

  .cwp-property-layout {
    display: block !important;
  }

  .cwp-gallery__grid {
    max-height: none;
    page-break-inside: avoid;
  }

  .cwp-property-description__text,
  .cwp-description__body {
    display: block;
    max-height: none;
    overflow: visible;
  }

  .cwp-description__fade {
    display: none !important;
  }

  .cwp-reviews__text {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}

/* ==========================================================================
   20. RESPONSIVE — TABLET (max-width: 1279px) — BACKWARD COMPAT
   Core responsive layout now in connect-public.css Section 22 (1023px).
   These unscoped stubs cover old class names at 1279px for child-themes.
   ========================================================================== */

@media (max-width: 1279px) {
  .cwp-property-layout {
    grid-template-columns: 1fr;
    gap: var(--cwp-space-xl, 32px);
    padding: 0 var(--cwp-space-md, 16px);
  }

  .cwp-property-sidebar {
    position: static;
    max-height: none;
  }

  .cwp-booking {
    max-width: 600px;
  }

  /* Header title — tablet responsive now in connect-public.css Section 13. */

  .cwp-gallery__grid {
    max-height: 400px;
  }

  /* Lightbox nav — tablet responsive now in connect-public.css Section 12. */

  .cwp-carousel-btn--prev {
    left: 0 !important;
  }

  .cwp-carousel-btn--next {
    right: 0 !important;
  }

  .cwp-carousel-track > * {
    flex: 0 0 calc(50% - 8px);
    min-width: 260px;
  }
}

/* ==========================================================================
   21. RESPONSIVE — MOBILE (max-width: 639px)
   ========================================================================== */

/* Gallery — hide bento grid, show carousel at ≤1023px (matches compact bar breakpoint) */
@media (max-width: 1023px) {
  .cwp-gallery__grid {
    display: none;
  }

  .cwp-gallery__secondary {
    display: none;
  }
}

@media (max-width: 639px) {
  .cwp-property-page {
    padding: 0 var(--cwp-space-md, 16px);
  }

  .cwp-property-layout {
    padding: 0;
  }

  /* Gallery V2: full-bleed carousel on small mobile */
  .cwp-gallery__carousel {
    margin-left: calc(-1 * var(--cwp-space-md, 16px));
    margin-right: calc(-1 * var(--cwp-space-md, 16px));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .cwp-gallery__carousel-slide {
    scroll-snap-align: center;
    flex: 0 0 100%;
  }

  /* Header — mobile responsive now in connect-public.css Section 13. */

  /* Section card — reduced padding on mobile */
  .cwp-property-page .cwp-section-card {
    padding: 16px;
    margin-bottom: 24px;
  }

  /* Header — stack title/price vertically */
  .cwp-property-header__heading {
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .cwp-property-header__heading .cwp-property-title {
    font-size: var(--cwp-size-h1, 30px);
  }

  .cwp-property-header__price {
    text-align: left;
  }

  .cwp-property-header__price-amount {
    font-size: var(--cwp-size-h1, 30px);
  }

  .cwp-property-header__info {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
  }

  .cwp-detail-grid {
    gap: 16px;
  }

  .cwp-detail-item__icon {
    width: 44px;
    height: 44px;
  }

  /* Amenities — single column on mobile */
  .cwp-amenities__grid {
    flex-direction: column;
    gap: 0;
  }

  .cwp-amenities__column {
    min-width: 100%;
  }

  /* Backward-compat: old grid-based amenities layout */
  .cwp-amenities__grid {
    grid-template-columns: 1fr;
  }

  /* Amenities V2: 2-column card grid on mobile */
  .cwp-amenities__card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cwp-spacing-sm, 8px);
  }

  /* Reviews */
  .cwp-reviews__categories {
    grid-template-columns: 1fr;
  }

  .cwp-reviews__grid {
    grid-template-columns: 1fr;
  }

  /* Host Stats */
  .cwp-host__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Lightbox — Core mobile responsive now in connect-public.css Section 12.
     Backward-compat: old .cwp-lightbox__thumbnail class name. */
  .cwp-lightbox__thumbnail {
    width: 60px !important;
    height: 45px !important;
  }

  /* Map */
  .cwp-map {
    height: 280px;
  }

  /* Modal */
  .cwp-modal__content {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--cwp-radius-lg, 12px) var(--cwp-radius-lg, 12px) 0 0;
    align-self: flex-end;
  }

  .cwp-modal__header {
    padding: var(--cwp-space-md, 16px) var(--cwp-space-lg, 24px);
  }

  .cwp-modal__body {
    padding: var(--cwp-space-lg, 24px);
  }

  /* Carousel */
  .cwp-carousel-track > * {
    flex: 0 0 85%;
    min-width: 240px;
  }

  .cwp-carousel-btn {
    display: none !important;
  }

  /* Booking */
  .cwp-booking {
    border-radius: var(--cwp-radius-lg, 12px);
    padding: var(--cwp-space-lg, 24px);
  }

  .cwp-booking__amount {
    font-size: var(--cwp-size-h3, 20px);
  }

  /* Sections */
  .cwp-property-description,
  .cwp-description,
  .cwp-amenities,
  .cwp-reviews,
  .cwp-map-section,
  .cwp-location,
  .cwp-host,
  .cwp-host-brief,
  .cwp-property-calendar,
  .cwp-calendar {
    padding: var(--cwp-space-lg, 24px) 0;
  }

  /* Nav */
  .cwp-property-nav {
    padding: var(--cwp-space-sm, 8px) 0;
  }

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


/* ==========================================================================
   22. RESPONSIVE — Tablet Landscape (≤1024px)
   Intermediate step between desktop and mobile.
   ========================================================================== */

@media (max-width: 1024px) {
  /* Title: scale down from 40px */
  .cwp-property-header__heading .cwp-property-title {
    font-size: 32px;
  }

  /* Price: scale down from 36px */
  .cwp-property-header__price-amount {
    font-size: 28px;
  }

  /* Gallery: reduce bottom margin */
  .cwp-property-page .cwp-gallery {
    margin-bottom: 24px;
  }

  /* Section card: slightly reduce spacing */
  .cwp-property-page .cwp-section-card {
    padding: 20px;
    margin-bottom: 36px;
  }

  /* Section title: scale down */
  .cwp-section-card .cwp-section-title {
    font-size: 22px;
  }

  /* Detail grid: 3-column */
  .cwp-detail-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* Amenities: reduce gap */
  .cwp-amenities__grid {
    gap: 20px;
  }

  .cwp-amenities__column {
    min-width: 160px;
  }

  /* Amenities V2 card grid: tighter */
  .cwp-amenities__card-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
  }

  /* Map: reduce height */
  .cwp-map {
    height: 350px;
  }

  /* Similar carousel: 2 visible */
  .cwp-carousel-track > * {
    flex: 0 0 calc(50% - 12px);
    min-width: 260px;
  }

  /* Booking booking — reduce padding */
  .cwp-booking {
    padding: 24px;
  }
}

/* ==========================================================================
   23. RESPONSIVE — Tablet Portrait (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* Title: scale to tablet */
  .cwp-property-header__heading .cwp-property-title {
    font-size: 26px;
  }

  /* Price: scale down */
  .cwp-property-header__price-amount {
    font-size: 24px;
  }

  /* Gallery: tighter margin */
  .cwp-property-page .cwp-gallery {
    margin-bottom: 20px;
  }

  /* Section card: tighter */
  .cwp-property-page .cwp-section-card {
    padding: 18px;
    margin-bottom: 28px;
  }

  /* Section title: smaller */
  .cwp-section-card .cwp-section-title {
    font-size: 20px;
  }

  /* Detail grid: 2-column on portrait */
  .cwp-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Property stats: slightly smaller */
  .cwp-property-stats {
    font-size: 14px;
    gap: 6px;
  }

  /* Property address: slightly smaller */
  .cwp-property-address {
    font-size: 14px;
  }

  /* Amenities: 2-column on tablet */
  .cwp-amenities__grid {
    gap: 16px;
  }

  .cwp-amenities__column {
    min-width: 140px;
  }

  /* Map: reduce further */
  .cwp-map {
    height: 300px;
  }

  /* Section spacing: reduce */
  .cwp-property-description,
  .cwp-description,
  .cwp-amenities,
  .cwp-reviews,
  .cwp-map-section,
  .cwp-location,
  .cwp-host,
  .cwp-host-brief,
  .cwp-property-calendar,
  .cwp-calendar {
    padding: var(--cwp-space-lg, 24px) 0;
  }

  /* Similar properties: reduce spacing */
  .cwp-similar-properties {
    padding: 32px 0;
  }

  /* Action buttons: enlarge for touch */
  .cwp-action-btn {
    width: 44px;
    height: 44px;
  }

  /* Header actions: tighter gap */
  .cwp-property-header__actions {
    gap: 8px;
  }

  /* Modal content: wider on tablet portrait */
  .cwp-modal__content {
    width: 95%;
    max-height: 85vh;
  }

  /* Calendar legend: wrap tighter */
  .cwp-calendar-legend {
    gap: 16px;
  }
}

/* ==========================================================================
   24. RESPONSIVE — Small Mobile (≤480px)
   Compact everything for smallest screens.
   ========================================================================== */

@media (max-width: 480px) {
  /* Page padding: minimal */
  .cwp-property-page {
    padding: 0 12px;
  }

  /* Title: compact for small phones */
  .cwp-property-header__heading .cwp-property-title {
    font-size: 22px;
  }

  /* Price: compact */
  .cwp-property-header__price-amount {
    font-size: 22px;
  }

  /* Gallery: flush margin */
  .cwp-property-page .cwp-gallery {
    margin-bottom: 16px;
  }

  /* Section card: compact */
  .cwp-property-page .cwp-section-card {
    padding: 14px;
    margin-bottom: 20px;
    border-radius: 12px;
  }

  /* Section title: compact */
  .cwp-section-card .cwp-section-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  /* Detail grid: 2-column compact */
  .cwp-detail-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .cwp-detail-item__icon {
    width: 40px;
    height: 40px;
  }

  .cwp-detail-item__icon svg {
    width: 20px;
    height: 20px;
  }

  /* Property stats: compact */
  .cwp-property-stats {
    font-size: 13px;
    gap: 4px;
  }

  /* Nav bar: compact */
  .cwp-property-nav {
    padding: 6px 0;
    margin-bottom: 8px;
  }

  .cwp-property-nav__back {
    font-size: 12px !important;
  }

  /* Action buttons: icon-only style */
  .cwp-property-nav__share span,
  .cwp-property-nav__save span {
    display: none;
  }

  /* Amenities: card grid 2-col compact */
  .cwp-amenities__card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .cwp-amenities__card {
    padding: 12px;
  }

  .cwp-amenities__card .cwp-amenities__fa-icon {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }

  .cwp-amenities__card-label {
    font-size: 12px;
  }

  /* Map: shorter on small phones */
  .cwp-map {
    height: 240px;
  }

  /* Booking: compact padding */
  .cwp-booking {
    padding: 16px;
    border-radius: 12px;
  }

  /* Host card: stack vertically */
  .cwp-host__card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* Host stats: 2-col compact */
  .cwp-host__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Reviews: tighter */
  .cwp-reviews__header {
    margin-bottom: 16px;
  }

  /* Calendar day cells: ensure touch-friendly size */
  .cwp-calendar__day {
    min-height: 44px;
    padding: 4px;
  }

  /* Calendar legend: stack items */
  .cwp-calendar-legend {
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Compact bar: tighter spacing on small phones */
  .cwp-sidebar__compact {
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }

  .cwp-sidebar__compact-pill {
    height: 36px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }

  /* Description: reduce max-height for "read more" */
  .cwp-property-description__text {
    max-height: 7.2em;
  }

  /* Modal: full-screen on small phones */
  .cwp-modal__content {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    height: 100%;
  }

  .cwp-modal__header {
    padding: 12px 16px;
  }

  .cwp-modal__body {
    padding: 16px;
  }

  /* Similar properties: compact */
  .cwp-similar-properties {
    padding: 24px 0;
  }

  .cwp-similar-properties h2 {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }

  /* Carousel items: near full-width */
  .cwp-carousel-track > * {
    flex: 0 0 90%;
    min-width: 220px;
  }

  .cwp-carousel-track {
    gap: 12px;
    padding: 4px 2px 12px;
  }

}

/* ==========================================================================
   25. RESPONSIVE — Wide Screen (≥1536px)
   Optimized layout for large monitors.
   ========================================================================== */

@media (min-width: 1536px) {
  /* Title: scale up for large screens */
  .cwp-property-header__heading .cwp-property-title {
    font-size: 48px;
  }

  .cwp-property-header__price-amount {
    font-size: 40px;
  }

  /* Section card: slightly more generous */
  .cwp-property-page .cwp-section-card {
    padding: 32px;
  }

  .cwp-section-card .cwp-section-title {
    font-size: 28px;
  }

  /* Gallery: taller */
  .cwp-gallery__grid {
    max-height: 560px;
  }

  /* Detail grid: can fit more columns */
  .cwp-detail-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  /* Map: taller */
  .cwp-map {
    height: 480px;
  }

  /* Carousel: show 3 items with room */
  .cwp-carousel-track > * {
    flex: 0 0 calc(33.333% - 16px);
    min-width: 300px;
  }

  /* Booking sidebar: wider */
  .cwp-booking {
    padding: 36px;
  }

  /* Wider property stats */
  .cwp-property-stats {
    font-size: 16px;
    gap: 10px;
  }
}

/* ==========================================================================
   25b. ULTRA-WIDE — ≥ 1920px
   ========================================================================== */

@media (min-width: 1920px) {
  /* Content max-width for readability */
  .cwp-property-page {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Title hero size — matches Plumguide scale */
  .cwp-property-header__heading .cwp-property-title {
    font-size: 54px;
  }

  .cwp-property-header__price-amount {
    font-size: 44px;
  }

  /* Section cards: more spacious */
  .cwp-property-page .cwp-section-card {
    padding: 36px;
  }

  .cwp-section-card .cwp-section-title {
    font-size: 30px;
  }

  /* Gallery: taller for ultra-wide */
  .cwp-gallery__grid {
    max-height: 620px;
  }

  /* Map: taller */
  .cwp-map {
    height: 520px;
  }

  /* Detail grid: wider minmax */
  .cwp-detail-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }

  /* Amenities: larger items */
  .cwp-amenities__grid {
    gap: 24px;
  }

  .cwp-amenities__card {
    padding: 20px;
  }

  /* Description: slightly larger */
  .cwp-description__content {
    font-size: 16px;
    line-height: 1.75;
  }

  /* Carousel: show 4 items */
  .cwp-carousel-track > * {
    flex: 0 0 calc(25% - 16px);
    min-width: 280px;
  }

  /* Booking sidebar: wider with more padding */
  .cwp-booking {
    padding: 40px;
    width: 440px;
    max-width: 440px;
  }

  /* Property stats */
  .cwp-property-stats {
    font-size: 17px;
  }
}

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

@media (hover: none) {
  .cwp-gallery__main:hover img,
  .cwp-gallery__item:hover img,
  .cwp-gallery__cell:hover .cwp-gallery__image {
    transform: none;
  }

  .cwp-gallery__cell:hover .cwp-gallery__hover-overlay {
    background: transparent;
  }

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

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

  .cwp-action-btn:hover {
    background: var(--cwp-surface, #fff);
    border-color: var(--cwp-border, #ececec);
    color: var(--cwp-text);
  }
}


/* ==========================================================================
   27. SECTION RHYTHM — Subtle alternating backgrounds
   ========================================================================== */

/**
 * Location section gets a tinted background band to create visual
 * separation between content blocks.  Negative horizontal margin pulls
 * the colour band flush with the container edge; the matching padding
 * keeps the inner content aligned.
 */
#cwp-property-location {
  background: var(--cwp-surface-alt, #F5F5F5);
  margin-left: calc(-1 * var(--cwp-container-padding, 24px));
  margin-right: calc(-1 * var(--cwp-container-padding, 24px));
  padding: clamp(32px, 4vw, 48px) var(--cwp-container-padding, 24px);
  border-radius: 0;
}