/**
 * Connect WordPress Plugin — Public Base Stylesheet
 *
 * Single consolidated frontend CSS file containing:
 *   1. Scoped Reset        — Box-model + inherited property reset inside .cwp-root
 *   2. Typography Classes  — Heading, body, caption, and colour utilities
 *   3. Layout Utilities    — Container, grid, flex, screen reader
 *   4. Button Base Styles  — .cwp-btn variants (primary, secondary, ghost)
 *   5. Form Input Styles   — Input, select, counter components
 *   6. Badge Styles        — Pill badges and contextual variants
 *   7. Skeleton Loading    — Shimmer placeholders
 *   8. Scrollbar           — Custom webkit + Firefox scrollbar
 *
 * All selectors are scoped inside .cwp-root for theme isolation.
 * Buttons use !important to survive the `all: revert` reset in reset.css.
 *
 * @package    Connect
 * @subpackage Connect/Public/CSS
 * @since      1.0.0
 */

/* ==========
   SECTION 1 — SCOPED RESET
   Box-model normalisation and inherited property reset inside .cwp-root
   ========== */

.cwp-root *,
.cwp-root *::before,
.cwp-root *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.cwp-root {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    line-height: var(--cwp-line-height-normal);
    color: var(--cwp-text);
    background: var(--cwp-bg);
    letter-spacing: var(--cwp-letter-spacing-normal, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Reset common inline elements */
.cwp-root a {
    color: inherit;
    text-decoration: none;
}

.cwp-root img {
    max-width: 100%;
    height: auto;
    display: block;
}

.cwp-root svg {
    flex-shrink: 0;
}

.cwp-root ul,
.cwp-root ol {
    list-style: none;
}

/* ==========
   SECTION 2 — TYPOGRAPHY CLASSES
   Heading hierarchy, body text, and colour utilities
   ========== */

/* Display heading — hero/splash */
.cwp-heading-display {
    font-family: var(--cwp-font-display);
    font-size: var(--cwp-size-hero);
    font-weight: var(--cwp-weight-bold);
    line-height: var(--cwp-line-height-tight);
    letter-spacing: var(--cwp-letter-spacing-tight, -0.02em);
    color: var(--cwp-text);
}

/* Heading hierarchy */
.cwp-heading-h1 {
    font-family: var(--cwp-font-display);
    font-size: var(--cwp-size-h1);
    font-weight: var(--cwp-weight-bold);
    line-height: var(--cwp-line-height-tight);
    letter-spacing: var(--cwp-letter-spacing-tight, -0.02em);
    color: var(--cwp-text);
}

.cwp-heading-h2 {
    font-family: var(--cwp-font-display);
    font-size: var(--cwp-size-h2);
    font-weight: var(--cwp-weight-bold);
    line-height: var(--cwp-line-height-tight);
    color: var(--cwp-text);
}

.cwp-heading-h3 {
    font-family: var(--cwp-font-display);
    font-size: var(--cwp-size-h3);
    font-weight: var(--cwp-weight-semibold);
    line-height: var(--cwp-line-height-tight);
    color: var(--cwp-text);
}

.cwp-heading-h4 {
    font-family: var(--cwp-font-display);
    font-size: var(--cwp-size-h4);
    font-weight: var(--cwp-weight-semibold);
    line-height: var(--cwp-line-height-tight);
    color: var(--cwp-text);
}

/* Body text */
.cwp-body {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    line-height: var(--cwp-line-height-relaxed);
    color: var(--cwp-text-secondary);
}

.cwp-body-sm {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    line-height: var(--cwp-line-height-normal);
    color: var(--cwp-text-secondary);
}

/* Caption & micro */
.cwp-caption {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-caption);
    line-height: var(--cwp-line-height-normal);
    color: var(--cwp-text-muted);
}

.cwp-micro {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-micro);
    line-height: var(--cwp-line-height-normal);
    color: var(--cwp-text-muted);
}

/* Font weight utilities */
.cwp-weight-regular { font-weight: var(--cwp-weight-regular); }
.cwp-weight-medium  { font-weight: var(--cwp-weight-medium); }
.cwp-weight-semibold { font-weight: var(--cwp-weight-semibold); }
.cwp-weight-bold    { font-weight: var(--cwp-weight-bold); }

/* Text colour utilities */
.cwp-text-primary   { color: var(--cwp-text); }
.cwp-text-secondary { color: var(--cwp-text-secondary); }
.cwp-text-muted     { color: var(--cwp-text-muted); }
.cwp-text-accent    { color: var(--cwp-accent); }
.cwp-text-success   { color: var(--cwp-success); }
.cwp-text-warning   { color: var(--cwp-warning); }
.cwp-text-error     { color: var(--cwp-error); }

/* ==========
   SECTION 3 — LAYOUT UTILITIES
   Container, grid, flex, screen reader, and spacing
   ========== */

/* Container */
.cwp-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cwp-space-lg);
    padding-right: var(--cwp-space-lg);
}

.cwp-container--sm { max-width: 640px; }
.cwp-container--md { max-width: 768px; }
.cwp-container--lg { max-width: 1024px; }

/* Grid layouts */
.cwp-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cwp-space-lg);
}

.cwp-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cwp-space-lg);
}

.cwp-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cwp-space-lg);
}

/* Responsive grid collapse */
@media (max-width: 1023px) {
    .cwp-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .cwp-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
    .cwp-grid-2,
    .cwp-grid-3,
    .cwp-grid-4 { grid-template-columns: 1fr; }
}

/* Flex utilities */
.cwp-flex {
    display: flex;
}

.cwp-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cwp-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cwp-flex-col {
    display: flex;
    flex-direction: column;
}

.cwp-gap-xs  { gap: var(--cwp-space-xs); }
.cwp-gap-sm  { gap: var(--cwp-space-sm); }
.cwp-gap-md  { gap: var(--cwp-space-md); }
.cwp-gap-lg  { gap: var(--cwp-space-lg); }
.cwp-gap-xl  { gap: var(--cwp-space-xl); }

/* Screen reader only — visually hidden but accessible */
.cwp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Alpine.js cloak */
[x-cloak] {
    display: none !important;
}

/* Alpine.js x-show: hide elements that Alpine marks as hidden.
   Needed because component styles use `all: revert !important` + `display: flex !important`
   which overrides Alpine's inline `display: none`. The `.cwp-hidden` class is toggled
   via Alpine's :class binding as a reliable fallback.
   Uses doubled specificity (.cwp-root.cwp-root) to beat component rules. */
.cwp-root [x-cloak],
.cwp-root.cwp-root .cwp-hidden,
.cwp-root.cwp-root .cwp-sidebar__cta.cwp-hidden {
    display: none !important;
}

/* ==========
   SECTION 4 — BUTTON BASE STYLES
   Theme-protected buttons with !important for reset.css compatibility.
   After the `all: revert` in reset.css strips theme styles,
   these rules restore our desired button appearance.
   ========== */

/* --- Base Button --- */

.cwp-root .cwp-btn {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 24px !important;
    border: 1px solid var(--cwp-border) !important;
    border-radius: var(--cwp-radius-xl) !important;
    background: var(--cwp-surface) !important;
    color: var(--cwp-text) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-btn:hover {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 24px !important;
    border: 1px solid var(--cwp-border-hover) !important;
    border-radius: var(--cwp-radius-xl) !important;
    background: var(--cwp-surface-alt) !important;
    color: var(--cwp-text) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.cwp-root .cwp-btn:active {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 24px !important;
    border: 1px solid var(--cwp-border-hover) !important;
    border-radius: var(--cwp-radius-xl) !important;
    background: var(--cwp-surface-alt) !important;
    color: var(--cwp-text) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transform: scale(0.98) !important;
}

.cwp-root .cwp-btn:focus-visible {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 24px !important;
    border: 1px solid var(--cwp-border) !important;
    border-radius: var(--cwp-radius-xl) !important;
    background: var(--cwp-surface) !important;
    color: var(--cwp-text) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, var(--cwp-primary)) !important;
    outline-offset: var(--cwp-focus-ring-offset, 2px) !important;
}

/* --- Primary Button --- */

.cwp-root .cwp-btn-primary {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 24px !important;
    background: var(--cwp-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--cwp-radius-xl) !important;
    box-shadow: var(--cwp-shadow-sm) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body) !important;
    font-weight: var(--cwp-weight-semibold) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-btn-primary:hover {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 24px !important;
    background: var(--cwp-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--cwp-radius-xl) !important;
    box-shadow: var(--cwp-shadow-md) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body) !important;
    font-weight: var(--cwp-weight-semibold) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    opacity: 0.92 !important;
}

.cwp-root .cwp-btn-primary:active {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 24px !important;
    background: var(--cwp-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--cwp-radius-xl) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body) !important;
    font-weight: var(--cwp-weight-semibold) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    opacity: 0.85 !important;
    transform: scale(0.98) !important;
}

.cwp-root .cwp-btn-primary:focus-visible {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 24px !important;
    background: var(--cwp-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--cwp-radius-xl) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body) !important;
    font-weight: var(--cwp-weight-semibold) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    outline: var(--cwp-focus-ring-width, 2px) solid #FFFFFF !important;
    outline-offset: var(--cwp-focus-ring-offset, 2px) !important;
}

/* --- Secondary Button --- */

.cwp-root .cwp-btn-secondary {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 24px !important;
    background: transparent !important;
    color: var(--cwp-text) !important;
    border: 1px solid var(--cwp-border) !important;
    border-radius: var(--cwp-radius-xl) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-btn-secondary:hover {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 24px !important;
    background: var(--cwp-surface-alt) !important;
    color: var(--cwp-text) !important;
    border: 1px solid var(--cwp-border-hover) !important;
    border-radius: var(--cwp-radius-xl) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.cwp-root .cwp-btn-secondary:active {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 24px !important;
    background: var(--cwp-surface-alt) !important;
    color: var(--cwp-text) !important;
    border: 1px solid var(--cwp-border-hover) !important;
    border-radius: var(--cwp-radius-xl) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transform: scale(0.98) !important;
}

.cwp-root .cwp-btn-secondary:focus-visible {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 24px !important;
    background: transparent !important;
    color: var(--cwp-text) !important;
    border: 1px solid var(--cwp-border) !important;
    border-radius: var(--cwp-radius-xl) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, var(--cwp-primary)) !important;
    outline-offset: var(--cwp-focus-ring-offset, 2px) !important;
}

/* --- Ghost Button --- */

.cwp-root .cwp-btn-ghost {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 20px !important;
    background: transparent !important;
    color: var(--cwp-primary) !important;
    border: none !important;
    border-radius: var(--cwp-radius-xl) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-btn-ghost:hover {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 20px !important;
    background: var(--cwp-surface-alt) !important;
    color: var(--cwp-primary-dark) !important;
    border: none !important;
    border-radius: var(--cwp-radius-xl) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.cwp-root .cwp-btn-ghost:active {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 20px !important;
    background: var(--cwp-surface-alt) !important;
    color: var(--cwp-primary-dark) !important;
    border: none !important;
    border-radius: var(--cwp-radius-xl) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transform: scale(0.98) !important;
}

.cwp-root .cwp-btn-ghost:focus-visible {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 20px !important;
    background: transparent !important;
    color: var(--cwp-primary) !important;
    border: none !important;
    border-radius: var(--cwp-radius-xl) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-medium) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, var(--cwp-primary)) !important;
    outline-offset: var(--cwp-focus-ring-offset, 2px) !important;
}

/* --- Button Size Variants --- */

.cwp-root .cwp-btn-sm {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: var(--cwp-size-caption) !important;
    border-radius: var(--cwp-radius-sm) !important;
}

.cwp-root .cwp-btn-lg {
    height: 52px !important;
    padding: 0 28px !important;
    font-size: var(--cwp-size-body) !important;
    border-radius: var(--cwp-radius-lg) !important;
}

/* --- Full-width Button --- */

.cwp-root .cwp-btn-block {
    width: 100% !important;
}

/* --- Disabled Button State --- */

.cwp-root .cwp-btn:disabled,
.cwp-root .cwp-btn-primary:disabled,
.cwp-root .cwp-btn-secondary:disabled,
.cwp-root .cwp-btn-ghost:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ==========
   SECTION 5 — FORM INPUT BASE STYLES
   Styled inputs, selects, textareas, and counter component
   ========== */

/* Input base */
.cwp-input {
    display: block;
    width: 100%;
    height: 44px;
    padding: var(--cwp-space-sm) var(--cwp-space-md);
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    line-height: var(--cwp-line-height-normal);
    color: var(--cwp-text);
    background: var(--cwp-surface);
    border: 1px solid var(--cwp-border);
    border-radius: var(--cwp-radius-md);
    outline: none;
    transition: border-color var(--cwp-duration-fast) var(--cwp-ease-default),
                box-shadow var(--cwp-duration-fast) var(--cwp-ease-default);
    -webkit-appearance: none;
    appearance: none;
}

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

.cwp-input::placeholder {
    color: var(--cwp-text-muted);
    opacity: 1;
}

.cwp-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--cwp-surface-alt);
}

.cwp-input--error {
    border-color: var(--cwp-error);
}

.cwp-input--error:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Textarea */
.cwp-textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    padding: var(--cwp-space-sm) var(--cwp-space-md);
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    line-height: var(--cwp-line-height-relaxed);
    color: var(--cwp-text);
    background: var(--cwp-surface);
    border: 1px solid var(--cwp-border);
    border-radius: var(--cwp-radius-md);
    outline: none;
    resize: vertical;
    transition: border-color var(--cwp-duration-fast) var(--cwp-ease-default),
                box-shadow var(--cwp-duration-fast) var(--cwp-ease-default);
    -webkit-appearance: none;
    appearance: none;
}

.cwp-textarea:focus {
    border-color: var(--cwp-primary);
    box-shadow: 0 0 0 3px rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.15);
}

/* Select dropdown */
.cwp-select {
    display: block;
    width: 100%;
    height: 44px;
    padding: var(--cwp-space-sm) var(--cwp-space-xl) var(--cwp-space-sm) var(--cwp-space-md);
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    line-height: var(--cwp-line-height-normal);
    color: var(--cwp-text);
    background: var(--cwp-surface);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%234A6274' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--cwp-space-sm) center;
    background-size: 12px;
    border: 1px solid var(--cwp-border);
    border-radius: var(--cwp-radius-md);
    outline: none;
    cursor: pointer;
    transition: border-color var(--cwp-duration-fast) var(--cwp-ease-default),
                box-shadow var(--cwp-duration-fast) var(--cwp-ease-default);
    -webkit-appearance: none;
    appearance: none;
}

.cwp-select:focus {
    border-color: var(--cwp-primary);
    box-shadow: 0 0 0 3px rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.15);
}

/* Counter component (+/- buttons with value) */
.cwp-counter {
    display: inline-flex;
    align-items: center;
    gap: var(--cwp-space-md);
}

.cwp-counter__btn {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 1px solid var(--cwp-border) !important;
    border-radius: var(--cwp-radius-full) !important;
    background: var(--cwp-surface) !important;
    color: var(--cwp-text-secondary) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: 18px !important;
    font-weight: var(--cwp-weight-regular) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
    -webkit-font-smoothing: antialiased !important;
}

.cwp-counter__btn:hover {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 1px solid var(--cwp-primary) !important;
    border-radius: var(--cwp-radius-full) !important;
    background: var(--cwp-surface) !important;
    color: var(--cwp-primary) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: 18px !important;
    font-weight: var(--cwp-weight-regular) !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.cwp-counter__btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

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

/* Form label */
.cwp-label {
    display: block;
    margin-bottom: var(--cwp-space-xs);
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    font-weight: var(--cwp-weight-semibold);
    color: var(--cwp-text);
}

/* Form help text */
.cwp-form-help {
    display: block;
    margin-top: var(--cwp-space-xs);
    font-size: var(--cwp-size-caption);
    color: var(--cwp-text-muted);
}

/* Form error message */
.cwp-form-error {
    display: block;
    margin-top: var(--cwp-space-xs);
    font-size: var(--cwp-size-caption);
    color: var(--cwp-error);
}

/* ==========
   SECTION 6 — BADGE STYLES
   Rounded pill badges with contextual colour variants
   ========== */

.cwp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--cwp-radius-full);
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-caption);
    font-weight: var(--cwp-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.cwp-badge-primary {
    background: var(--cwp-primary);
    color: #FFFFFF;
}

.cwp-badge-accent {
    background: var(--cwp-accent);
    color: #FFFFFF;
}

.cwp-badge-urgency {
    background: var(--cwp-urgency-bg);
    color: var(--cwp-urgency-text);
}

.cwp-badge-rare {
    background: var(--cwp-rare-bg);
    color: var(--cwp-rare-text);
}

/* Superhost badge — hidden globally (not relevant for Connect platform) */
.cwp-badge-superhost,
.cwp-card__superhost,
.cwp-filter-pill[data-filter="superhost"],
button.cwp-filter-pill[onclick*="superhost"],
button.cwp-filter-pill:has(+ .superhost) {
    display: none !important;
}

.cwp-badge-success {
    background: var(--cwp-success);
    color: #FFFFFF;
}

.cwp-badge-warning {
    background: var(--cwp-warning);
    color: #FFFFFF;
}

.cwp-badge-error {
    background: var(--cwp-error);
    color: #FFFFFF;
}

/* Subtle / outline variants */
.cwp-badge-outline {
    background: transparent;
    border: 1px solid var(--cwp-border);
    color: var(--cwp-text-secondary);
}

/* ==========
   SECTION 7 — SKELETON LOADING
   Animated shimmer gradient placeholder states
   ========== */

.cwp-skeleton {
    background: linear-gradient(90deg,
        var(--cwp-skeleton-base, #e8ecef) 25%,
        var(--cwp-skeleton-highlight, #d5dbe0) 50%,
        var(--cwp-skeleton-base, #e8ecef) 75%
    );
    background-size: 200% 100%;
    animation: cwp-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--cwp-radius-md);
}

.cwp-skeleton-text {
    height: 14px;
    width: 100%;
    margin-bottom: var(--cwp-space-sm);
    background: linear-gradient(90deg,
        var(--cwp-skeleton-base, #e8ecef) 25%,
        var(--cwp-skeleton-highlight, #d5dbe0) 50%,
        var(--cwp-skeleton-base, #e8ecef) 75%
    );
    background-size: 200% 100%;
    animation: cwp-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--cwp-radius-sm);
}

.cwp-skeleton-text:last-child {
    width: 60%;
}

.cwp-skeleton-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    background: linear-gradient(90deg,
        var(--cwp-skeleton-base, #e8ecef) 25%,
        var(--cwp-skeleton-highlight, #d5dbe0) 50%,
        var(--cwp-skeleton-base, #e8ecef) 75%
    );
    background-size: 200% 100%;
    animation: cwp-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--cwp-radius-lg);
}

.cwp-skeleton-card {
    display: flex;
    flex-direction: column;
    gap: var(--cwp-space-md);
    padding: var(--cwp-space-lg);
    border-radius: var(--cwp-radius-lg);
    border: 1px solid var(--cwp-border);
    background: var(--cwp-surface);
}

.cwp-skeleton-card .cwp-skeleton-image {
    border-radius: var(--cwp-radius-md);
}

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

/* ==========
   PMS BOOKING WIDGET — loading skeleton
   ==========
   Covers the blank box a PMS widget iframe leaves while its 3rd-party bundle
   downloads and mounts inside the sandbox. See booking-widget-skeleton.php for
   the full rationale; removal logic lives in booking-widget-embed.php.

   `!important` throughout per css-reset.md — this sits inside host themes that
   routinely restyle generic descendants. */

.cwp-booking-widget {
    position: relative !important;
    min-height: 120px;
}

.cwp-widget-skeleton {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 20px !important;
    /* Opaque — the iframe under it is background:transparent, so a see-through
       skeleton would show the same blank we're hiding. */
    background: var(--cwp-surface, #fff) !important;
    border: 1px solid var(--cwp-border, #e6e8eb) !important;
    border-radius: var(--cwp-radius-lg, 14px) !important;
    overflow: hidden !important;
    opacity: 1;
    transition: opacity .28s ease;
}

/* Revealed state — faded out, then display:none so it can't trap taps.
   A plain class toggle, NOT Alpine x-show: per pricing-display.md, an
   `!important` display rule silently defeats x-show's inline style. */
.cwp-widget-skeleton--done {
    opacity: 0;
    pointer-events: none !important;
}
.cwp-widget-skeleton--hidden {
    display: none !important;
}

.cwp-widget-skeleton__price,
.cwp-widget-skeleton__sub,
.cwp-widget-skeleton__field,
.cwp-widget-skeleton__cta {
    background: linear-gradient(90deg,
        var(--cwp-skeleton-base, #e8ecef) 25%,
        var(--cwp-skeleton-highlight, #d5dbe0) 50%,
        var(--cwp-skeleton-base, #e8ecef) 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: cwp-shimmer 1.5s ease-in-out infinite !important;
}

.cwp-widget-skeleton__price {
    height: 26px !important;
    width: 42% !important;
    border-radius: var(--cwp-radius-sm, 8px) !important;
}
.cwp-widget-skeleton__sub {
    height: 12px !important;
    width: 62% !important;
    margin-top: -6px !important;
    border-radius: var(--cwp-radius-sm, 8px) !important;
}
.cwp-widget-skeleton__row {
    display: flex !important;
    gap: 10px !important;
}
.cwp-widget-skeleton__field {
    flex: 1 1 0 !important;
    height: 44px !important;
    border-radius: var(--cwp-radius-md, 10px) !important;
}
.cwp-widget-skeleton__field--wide { width: 100% !important; }
.cwp-widget-skeleton__cta {
    height: 46px !important;
    width: 100% !important;
    margin-top: auto !important;
    border-radius: var(--cwp-radius-full, 999px) !important;
}
.cwp-widget-skeleton__note {
    font-size: 12px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    color: var(--cwp-text-muted, #8a9199) !important;
    margin-top: 2px !important;
}

/* Short widgets (e.g. Lodgify's 280px compact box) — drop the middle rows so
   the skeleton never implies more chrome than the widget will actually render.
   Flag set by the JS from the iframe's own inline height. */
.cwp-booking-widget[data-skeleton-compact="1"] .cwp-widget-skeleton__field--wide,
.cwp-booking-widget[data-skeleton-compact="1"] .cwp-widget-skeleton__sub {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .cwp-widget-skeleton__price,
    .cwp-widget-skeleton__sub,
    .cwp-widget-skeleton__field,
    .cwp-widget-skeleton__cta {
        animation: none !important;
    }
    .cwp-widget-skeleton { transition: none !important; }
}

/* ==========
   SECTION 8 — SCROLLBAR
   Custom styled scrollbars for containers within .cwp-root
   ========== */

/* Webkit (Chrome, Safari, Edge) */
.cwp-root ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.cwp-root ::-webkit-scrollbar-track {
    background: transparent;
}

.cwp-root ::-webkit-scrollbar-thumb {
    background: var(--cwp-border);
    border-radius: 3px;
}

.cwp-root ::-webkit-scrollbar-thumb:hover {
    background: var(--cwp-text-muted);
}

/* Firefox */
.cwp-root * {
    scrollbar-width: thin;
    scrollbar-color: var(--cwp-border) transparent;
}

/* ==========
   SECTION 9 — PROPERTY CARD
   Airbnb-quality card with carousel, badges, hover lift, and responsive body
   ========== */

/* --- Card Container --- */

.cwp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--cwp-surface);
    border-radius: var(--cwp-card-border-radius, var(--cwp-radius-lg));
    border: var(--cwp-card-border-width, 1px) solid var(--cwp-card-border-color, var(--cwp-border));
    box-shadow: var(--cwp-card-shadow, var(--cwp-shadow-sm));
    overflow: hidden;
    transition: var(--cwp-card-transition, all var(--cwp-duration-normal) var(--cwp-ease-default));
    contain: layout;
}

.cwp-card:hover {
    /* NO transform lift — a translateY here moves the card's hit-area, so
       hovering near the card's bottom edge makes the cursor fall off the card
       → un-hover → drop back → re-hover → a hover "shake"/jitter loop. Use a
       shadow-only hover affordance instead. */
    box-shadow: var(--cwp-card-shadow-hover, var(--cwp-shadow-lg));
}

/* --- Image Wrap --- */

.cwp-card__image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--cwp-card-border-radius, var(--cwp-radius-lg))
                   var(--cwp-card-border-radius, var(--cwp-radius-lg))
                   0 0;
}

/* --- Carousel --- */

.cwp-card__carousel {
    position: relative;
    width: 100%;
    aspect-ratio: var(--cwp-card-image-aspect, 3 / 2);
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--cwp-surface-alt, #F0F7FA) 0%,
        var(--cwp-border, #D4E0E8) 50%,
        var(--cwp-surface-alt, #F0F7FA) 100%
    );
}

/* Specificity bump: overrides .cwp-root img { height: auto } (0,1,1) */
.cwp-card .cwp-card__carousel-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Let clicks/taps pass THROUGH the image to the .cwp-card__image-link
       overlay beneath the cursor, so tapping a card photo always opens the
       property page — regardless of stacking-context/z-index quirks a CSS
       optimizer (RUCSS/critical-CSS) might introduce on a client site. The
       carousel arrows/dots sit on their own elements (pointer-events auto)
       and keep working, and the swipe handler is bound to the carousel
       container, so the gallery slider is unaffected. */
    pointer-events: none;
}

/* Carousel slide crossfade animation */
.cwp-card__slide-enter {
    transition: opacity 300ms ease;
}
.cwp-card__slide-enter-start {
    opacity: 0;
}
.cwp-card__slide-enter-end {
    opacity: 1;
}
.cwp-card__slide-leave {
    transition: opacity 200ms ease;
}
.cwp-card__slide-leave-start {
    opacity: 1;
}
.cwp-card__slide-leave-end {
    opacity: 0;
}

/* Image link overlay — sits behind badges/buttons but above carousel images.
   Higher specificity (.cwp-root a.…) + !important on the layout props is
   REQUIRED: the two-phase reset's `.cwp-root a { all: revert; position: revert }`
   (specificity 0,1,1) otherwise beats a plain `.cwp-card__image-link` (0,1,0) and
   collapses the overlay to static / inline / 0×0 — so tapping a card photo did
   NOTHING (verified live 2026-07). Same treatment as .cwp-card__carousel-nav. */
.cwp-root a.cwp-card__image-link {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    z-index: 1;
    cursor: pointer;
}

/* --- Carousel Navigation Arrows --- */

.cwp-root .cwp-card__carousel-nav {
    all: revert !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--cwp-radius-full) !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.9) !important;
    color: var(--cwp-text) !important;
    cursor: pointer !important;
    opacity: 0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    transition: opacity var(--cwp-duration-fast) var(--cwp-ease-default),
                transform var(--cwp-duration-fast) var(--cwp-ease-default) !important;
    -webkit-font-smoothing: antialiased !important;
}

.cwp-root .cwp-card__carousel-nav:hover {
    background: var(--cwp-surface, #fff) !important;
    background-color: var(--cwp-surface, #fff) !important;
    transform: translateY(-50%) scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
    opacity: 1 !important;
    color: var(--cwp-text) !important;
    border: none !important;
}

.cwp-root .cwp-card__carousel-nav:focus,
.cwp-root .cwp-card__carousel-nav:focus-visible {
    background: var(--cwp-surface, #fff) !important;
    background-color: var(--cwp-surface, #fff) !important;
    opacity: 1 !important;
    outline: 2px solid var(--cwp-primary) !important;
    outline-offset: 2px !important;
    color: var(--cwp-text) !important;
    border: none !important;
}

/* Show arrows on card hover */
.cwp-card:hover .cwp-card__carousel-nav {
    opacity: 1 !important;
}

.cwp-card__carousel-nav--prev {
    left: 8px !important;
}

.cwp-card__carousel-nav--next {
    right: 8px !important;
}

/* Carousel nav buttons loop infinitely — no hidden state needed. */

.cwp-card__carousel-nav svg {
    flex-shrink: 0;
}

/* --- Carousel Dots --- */

.cwp-card__carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cwp-root .cwp-card__carousel-dot {
    all: revert !important;
    width: 6px !important;
    height: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--cwp-radius-full) !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.5) !important;
    cursor: pointer !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-card__carousel-dot:hover {
    all: revert !important;
    width: 6px !important;
    height: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--cwp-radius-full) !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.8) !important;
    cursor: pointer !important;
}

.cwp-root .cwp-card__carousel-dot--active {
    background: var(--cwp-surface, #fff) !important;
    transform: scale(1.2) !important;
}

/* --- Badges (absolute positioned over image) --- */

/* Type Badge — top-left */
.cwp-card__type {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    font-size: var(--cwp-size-caption);
    padding: 4px 10px;
    border-radius: var(--cwp-radius-sm);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Superhost Badge — top-left below type */
.cwp-card__superhost {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

/* When both type AND superhost, stack superhost below type */
.cwp-card__type + .cwp-card__save + .cwp-card__superhost,
.cwp-card__type ~ .cwp-card__superhost {
    top: 38px;
}

/* Urgency Badge — bottom-left */
.cwp-card__urgency {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
}

/* --- Save / Heart Button (top-right) --- */

.cwp-root .cwp-card__save {
    all: revert !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--cwp-radius-full) !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.85) !important;
    color: var(--cwp-text) !important;
    cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    -webkit-font-smoothing: antialiased !important;
}

.cwp-root .cwp-card__save:hover {
    all: revert !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--cwp-radius-full) !important;
    background: var(--cwp-surface, #fff) !important;
    color: var(--cwp-text) !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transform: scale(1.1) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.cwp-root .cwp-card__save:focus-visible {
    all: revert !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--cwp-radius-full) !important;
    background: var(--cwp-surface, #fff) !important;
    color: var(--cwp-text) !important;
    cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    outline: 2px solid var(--cwp-primary) !important;
    outline-offset: 2px !important;
}

/* Active / saved state (filled heart) */
.cwp-root .cwp-card__save--active {
    color: var(--cwp-error) !important;
}

.cwp-card__save svg {
    flex-shrink: 0;
}

/* --- Card Body --- */

.cwp-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--cwp-spacing-xs);
    padding: var(--cwp-spacing-md) var(--cwp-spacing-md) var(--cwp-spacing-lg);
}

/* --- Header: Title + Rating --- */

.cwp-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cwp-spacing-sm);
}

.cwp-card__title {
    flex: 1;
    min-width: 0;
    font-family: var(--cwp-font-display);
    font-size: var(--cwp-size-h4);
    font-weight: var(--cwp-weight-semibold);
    line-height: var(--cwp-line-height-tight);
    color: var(--cwp-text);
    margin: 0;

    /* 2-line truncation */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cwp-card__title a {
    color: inherit;
    text-decoration: none;
}

.cwp-card__title a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Rating --- */

.cwp-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    line-height: 1;
    color: var(--cwp-text);
    white-space: nowrap;
    padding-top: 2px;
}

.cwp-card__star {
    color: var(--cwp-text);
}

/* Listing-card title: no underline. The two-phase reset does `all: revert
   !important` on `.cwp-root a` (0,2,0), which reverts links to the browser's
   underlined default; a host theme adds one too. This (0,3,0) rule beats both. */
.cwp-root .cwp-card__title a,
.cwp-root .cwp-card__title a:hover,
.cwp-root .cwp-card__title a:focus {
    text-decoration: none !important;
}

/* Listing-card rating star = pure gold (matches the review stars). The star SVG
   uses fill="currentColor", so set colour + fill. */
.cwp-root .cwp-card__star {
    color: #FFD700 !important;
    fill: #FFD700 !important;
}

.cwp-card__rating-score {
    font-weight: var(--cwp-weight-semibold);
}

.cwp-card__rating-count {
    color: var(--cwp-text-muted);
    font-weight: var(--cwp-weight-regular);
}

/* --- Location --- */

.cwp-card__location {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    color: var(--cwp-text-secondary);
    line-height: var(--cwp-line-height-normal);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Spec Pills --- */

.cwp-card__specs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: var(--cwp-spacing-xs);
}

.cwp-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: var(--cwp-surface-alt);
    border-radius: var(--cwp-radius-full);
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-caption);
    font-weight: var(--cwp-weight-medium);
    line-height: 1.5;
    color: var(--cwp-text-secondary);
    white-space: nowrap;
}

/* --- Price --- */

.cwp-card__price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-top: var(--cwp-spacing-sm);
}

.cwp-card__price-amount {
    font-family: var(--cwp-font-display);
    font-size: var(--cwp-size-h3);
    font-weight: var(--cwp-weight-bold);
    line-height: 1;
    color: var(--cwp-text);
}

.cwp-card__price-amount--contact {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body);
    font-weight: var(--cwp-weight-medium);
    color: var(--cwp-text-secondary);
}

.cwp-card__price-unit {
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body-sm);
    font-weight: var(--cwp-weight-regular);
    color: var(--cwp-text-muted);
}

/* ==========
   SECTION 10 — PROPERTY GRID
   Responsive 3-column grid for archive/search pages
   ========== */

.cwp-property-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 28px);
}

/* Inside split-view results panel: constrained width → 2 columns */
.cwp-split-view__results .cwp-property-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Tablet: 2 columns */
@media (max-width: 1023px) {
    .cwp-property-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet landscape: FAB padding to prevent cards hiding behind floating button */
@media (max-width: 1024px) {
    .cwp-property-grid {
        padding-bottom: calc(var(--cwp-spacing-2xl, 48px) + 60px);
    }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
    .cwp-property-grid,
    .cwp-split-view__results .cwp-property-grid {
        grid-template-columns: 1fr;
        gap: var(--cwp-spacing-md);
    }

    /* Slightly smaller card body padding on mobile */
    .cwp-card__body {
        padding: var(--cwp-spacing-sm) var(--cwp-spacing-sm) var(--cwp-spacing-md);
    }
}

/* Small mobile: tighter grid gap */
@media (max-width: 480px) {
    .cwp-property-grid {
        gap: 12px;
    }
}

/* ==========
   SECTION 11 — GALLERY BENTO GRID
   Airbnb-style 5-image bento: main image (50%) + 2×2 right column (50%).
   Border-radius on outer corners only.
   Mobile: horizontal scroll-snap carousel.
   ========== */

/* ── Gallery container ─────────────────────────────────────────────────── */

.cwp-gallery {
    position: relative;
    margin-bottom: var(--cwp-spacing-lg);
}

/* ── Gallery empty state placeholder ───────────────────────────────── */

.cwp-gallery--empty {
    margin-bottom: var(--cwp-spacing-lg, 24px);
}

.cwp-gallery__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cwp-space-md, 16px);
    padding: var(--cwp-space-3xl, 64px) var(--cwp-space-lg, 24px);
    background: var(--cwp-surface-alt, #F0F7FA);
    border-radius: var(--cwp-radius-xl, 14px);
    color: var(--cwp-text-muted, #8899A6);
}

.cwp-gallery__placeholder svg {
    opacity: 0.5;
}

.cwp-gallery__placeholder p {
    font-family: var(--cwp-font-body, sans-serif);
    font-size: var(--cwp-size-body, 15px);
    margin: 0;
}

/* ── Desktop 5-Image Bento Grid ────────────────────────────────────────
   CSS Grid: 50/50 split. Left = 1 large image, Right = 2×2 grid.
   Gap uses --cwp-gallery-gap token (4px default).
   ─────────────────────────────────────────────────────────────────────── */

.cwp-gallery__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: var(--cwp-gallery-gap, 4px);
    height: 450px;
    max-height: 450px;
    position: relative;
    overflow: hidden;
    border-radius: var(--cwp-gallery-border-radius, var(--cwp-radius-xl, 14px));
}

/* Main image: left side, 50% width */
.cwp-gallery__cell--main {
    grid-row: 1;
    grid-column: 1;
    min-height: 0;
    height: 100%;
    border-top-left-radius: var(--cwp-gallery-border-radius, var(--cwp-radius-xl, 14px));
    border-bottom-left-radius: var(--cwp-gallery-border-radius, var(--cwp-radius-xl, 14px));
}

/* Right column: 2×2 CSS Grid of 4 images */
.cwp-gallery__cell-right {
    grid-row: 1;
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--cwp-gallery-gap, 4px);
    min-height: 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

/* Outer-corner border-radius only — applied to specific cells in 2×2.
   Inner corners stay sharp (0). Only the 4 outer corners get radii. */

/* Top-right cell (r2) — outer top-right corner */
.cwp-gallery__cell--r2 {
    border-top-right-radius: var(--cwp-gallery-border-radius, var(--cwp-radius-xl, 14px));
}

/* Bottom-right cell (r4) — outer bottom-right corner */
.cwp-gallery__cell--r4 {
    border-bottom-right-radius: var(--cwp-gallery-border-radius, var(--cwp-radius-xl, 14px));
}

/* All cells: shared base styles */
.cwp-gallery__cell {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 0;
    min-width: 0;
}

.cwp-gallery__cell .cwp-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Prevent intrinsic sizing from breaking the flex layout */
    min-height: 0;
    min-width: 0;
    will-change: transform;
}

.cwp-gallery__cell:hover .cwp-gallery__image {
    transform: scale(1.04);
}

/* Subtle dark overlay on hover */
.cwp-gallery__hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

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

/* ── "+X more" overlay on the last cell ────────────────────────────────── */

.cwp-gallery__more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
    pointer-events: none;
}

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

.cwp-gallery__more-count {
    color: #FFFFFF;
    font-family: var(--cwp-font-display, serif);
    font-size: var(--cwp-size-h2, 24px);
    font-weight: var(--cwp-weight-bold, 700);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.01em;
    user-select: none;
}

/* ── Photo count badge — REMOVED from grid (counter only in lightbox now)
   Kept hidden for backward compatibility. ──────────────────────────────── */

.cwp-gallery__photo-count,
.cwp-gallery__count {
    display: none !important;
}

/* ── "Show all photos" button ──────────────────────────────────────────── */

/* ── "Show all" gallery button — frosted glass pill ─────────────────── */
.cwp-root .cwp-gallery__show-all {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 14px 7px 11px !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.82) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.45) !important;
    border-radius: 9999px !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    color: var(--cwp-text, #1A2B3C) !important;
    cursor: pointer !important;
    z-index: 10 !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.10),
        0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                background 0.18s ease !important;
    white-space: nowrap !important;
}

.cwp-root .cwp-gallery__show-all:hover {
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.95) !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.14),
        0 0 0 0.5px rgba(0, 0, 0, 0.08) !important;
}

.cwp-root .cwp-gallery__show-all:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.12),
        0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
    transition-duration: 0.08s !important;
}

.cwp-root .cwp-gallery__show-all:focus-visible {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 3px !important;
}

/* Icon wrapper — subtle tinted circle */
.cwp-root .cwp-gallery__show-all-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
}

.cwp-root .cwp-gallery__show-all-icon svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

/* Label text */
.cwp-root .cwp-gallery__show-all-label {
    color: var(--cwp-text, #1A2B3C) !important;
}

/* Count badge — small accent pill */
.cwp-root .cwp-gallery__show-all-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 9999px !important;
    background: var(--cwp-text, #1A2B3C) !important;
    color: #FFFFFF !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
}

/* ── Adaptive layouts for fewer than 5 images ──────────────────────────── */

/* 1 image: single cell, full width — no right column */
.cwp-gallery__grid--single {
    grid-template-columns: 1fr;
}

.cwp-gallery__grid--single .cwp-gallery__cell--main {
    grid-column: 1;
    border-radius: var(--cwp-gallery-border-radius, var(--cwp-radius-xl, 14px));
}

/* 2 images: main left (50%), single image fills entire right column */
.cwp-gallery__grid--duo .cwp-gallery__cell-right {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.cwp-gallery__grid--duo .cwp-gallery__cell--r1 {
    border-top-right-radius: var(--cwp-gallery-border-radius, var(--cwp-radius-xl, 14px));
    border-bottom-right-radius: var(--cwp-gallery-border-radius, var(--cwp-radius-xl, 14px));
}

/* 3 images: main left (50%), right column has 2 images stacked vertically */
.cwp-gallery__grid--trio .cwp-gallery__cell-right {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}

.cwp-gallery__grid--trio .cwp-gallery__cell--r1 {
    border-top-right-radius: var(--cwp-gallery-border-radius, var(--cwp-radius-xl, 14px));
}

.cwp-gallery__grid--trio .cwp-gallery__cell--r2 {
    border-top-right-radius: 0;
    border-bottom-right-radius: var(--cwp-gallery-border-radius, var(--cwp-radius-xl, 14px));
}

/* 4 images: main left (50%), right column 2×2 but only 3 cells filled.
   Bottom-right cell is empty — r3 gets bottom-right radius. */
.cwp-gallery__grid--quad .cwp-gallery__cell--r3 {
    border-bottom-right-radius: var(--cwp-gallery-border-radius, var(--cwp-radius-xl, 14px));
}

/* ── Mobile Carousel (hidden on desktop) ───────────────────────────────── */

.cwp-gallery__carousel {
    display: none;
}

@media (max-width: 1023px) {
    /* Hide bento grid on mobile/tablet (matches compact bar breakpoint) */
    .cwp-gallery__grid {
        display: none;
    }

    /* Show carousel on mobile/tablet */
    .cwp-gallery__carousel {
        display: flex;
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;       /* Firefox */
    }

    .cwp-gallery__carousel::-webkit-scrollbar {
        display: none;               /* Chrome/Safari */
    }

    .cwp-gallery__carousel-slide {
        flex: 0 0 100%;
        scroll-snap-align: start;
        aspect-ratio: 4 / 3;
        cursor: pointer;
    }

    .cwp-gallery__carousel-slide .cwp-gallery__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Carousel dot indicators */
    .cwp-gallery__carousel-dots {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 5px;
        z-index: 5;
    }

    .cwp-gallery__carousel-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.5);
        transition: background 150ms ease, transform 150ms ease;
    }

    .cwp-gallery__carousel-dot--active {
        background: var(--cwp-surface, #fff);
        transform: scale(1.25);
    }

    /* Mobile counter badge */
    .cwp-gallery__carousel-counter {
        position: absolute;
        bottom: 12px;
        right: 12px;
        background: rgba(0, 0, 0, 0.6);
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 10px;
        z-index: 5;
        user-select: none;
    }
}

/* ==========
   SECTION 12 — FULLSCREEN LIGHTBOX
   Simplified full-viewport image viewer — no thumbnails, no category tabs.
   Close button top-left (Airbnb pattern), always-visible nav arrows,
   centered counter. Keyboard navigation and smooth open/close animations.
   ========== */

/* ── Lightbox root ─────────────────────────────────────────────────────── */

.cwp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Overlay ───────────────────────────────────────────────────────────── */

.cwp-lightbox__overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.97);
    z-index: 1;
}

/* Overlay enter/leave transitions (200ms fade) */
.cwp-lightbox__overlay-enter {
    transition: opacity 200ms ease;
}
.cwp-lightbox__overlay-enter-start {
    opacity: 0;
}
.cwp-lightbox__overlay-enter-end {
    opacity: 1;
}
.cwp-lightbox__overlay-leave {
    transition: opacity 200ms ease;
}
.cwp-lightbox__overlay-leave-start {
    opacity: 1;
}
.cwp-lightbox__overlay-leave-end {
    opacity: 0;
}

/* ── Content wrapper ───────────────────────────────────────────────────── */

.cwp-lightbox__content {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
}

/* Content enter/leave transitions (300ms scale + fade, bounce easing) */
.cwp-lightbox__content-enter {
    transition: opacity 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cwp-lightbox__content-enter-start {
    opacity: 0;
    transform: scale(0.95);
}
.cwp-lightbox__content-enter-end {
    opacity: 1;
    transform: scale(1);
}
.cwp-lightbox__content-leave {
    transition: opacity 200ms ease, transform 200ms ease;
}
.cwp-lightbox__content-leave-start {
    opacity: 1;
    transform: scale(1);
}
.cwp-lightbox__content-leave-end {
    opacity: 0;
    transform: scale(0.95);
}

/* ── Close button — top-left (Airbnb pattern) ─────────────────────────── */

.cwp-root .cwp-lightbox__close,
.cwp-lightbox__close {
    all: revert !important;
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    background: var(--cwp-surface-alt, #F5F5F5) !important;
    border: 1px solid var(--cwp-border, #E5E5E5) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    cursor: pointer !important;
    z-index: 20 !important;
    padding: 0 !important;
    transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease !important;
}

.cwp-root .cwp-lightbox__close:hover,
.cwp-lightbox__close:hover {
    background: var(--cwp-border, #E5E5E5) !important;
    transform: scale(1.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

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

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

/* ── Counter — top-center ──────────────────────────────────────────────── */

.cwp-lightbox__counter {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--cwp-font-body, sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--cwp-text-secondary, #6B7280);
    letter-spacing: 0.04em;
    user-select: none;
    z-index: 10;
    white-space: nowrap;
}

/* ── Category tabs — HIDDEN (simplified lightbox, no category filtering)
   Kept for backward compatibility — hidden with display:none. ────────── */

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

.cwp-root .cwp-lightbox__category-tab,
.cwp-lightbox__category-tab {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 14px !important;
    border-radius: 9999px !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.1) !important;
border: 1px solid rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.2) !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
    white-space: nowrap !important;
}

.cwp-root .cwp-lightbox__category-tab:hover,
.cwp-lightbox__category-tab:hover {
    color: #FFFFFF !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.2) !important;
}

.cwp-root .cwp-lightbox__category-tab--active,
.cwp-lightbox__category-tab--active {
    color: var(--cwp-text, #000000) !important;
    background: var(--cwp-surface, #fff) !important;
    border-color: var(--cwp-border, #FFFFFF) !important;
}

.cwp-root .cwp-lightbox__category-tab--active:hover,
.cwp-lightbox__category-tab--active:hover {
    color: var(--cwp-text, #000000) !important;
    background: var(--cwp-surface, #fff) !important;
}

.cwp-root .cwp-lightbox__category-tab:focus-visible,
.cwp-lightbox__category-tab:focus-visible {
    outline: 2px solid #FFFFFF !important;
    outline-offset: 2px !important;
}

/* ── Navigation arrows ─────────────────────────────────────────────────── */

.cwp-root .cwp-lightbox__nav,
.cwp-lightbox__nav {
    all: revert !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    border: 1px solid var(--cwp-border, #E5E5E5) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    cursor: pointer !important;
    z-index: 10 !important;
    padding: 0 !important;
    transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

.cwp-root .cwp-lightbox__nav:hover,
.cwp-lightbox__nav:hover {
    background: var(--cwp-surface-alt, #F5F5F5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.cwp-root .cwp-lightbox__nav:active,
.cwp-lightbox__nav:active {
    transform: translateY(-50%) scale(0.95) !important;
    transition-duration: 0.06s !important;
}

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

.cwp-lightbox__nav--prev {
    left: 24px !important;
}

.cwp-lightbox__nav--next {
    right: 24px !important;
}

.cwp-lightbox__nav svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── Image stage — centred viewport area ───────────────────────────────── */

.cwp-lightbox__stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    position: relative;
}

.cwp-lightbox__image {
    max-width: 88vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 12px;
    user-select: none;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* Image enter transition (150ms fade on navigation) */
.cwp-lightbox__image-enter {
    transition: opacity 150ms ease;
}
.cwp-lightbox__image-enter-start {
    opacity: 0;
}
.cwp-lightbox__image-enter-end {
    opacity: 1;
}

/* ── Thumbnail strip — HIDDEN (simplified lightbox, no thumbnails)
   Kept for backward compatibility — hidden with display:none. ────────── */

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

.cwp-lightbox__thumbnails::-webkit-scrollbar {
    display: none;
}

.cwp-root .cwp-lightbox__thumb,
.cwp-lightbox__thumb {
    all: revert !important;
    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;
opacity: 0.5 !important;
    transition: opacity 150ms ease, border-color 150ms ease, transform 150ms ease !important;
}

.cwp-root .cwp-lightbox__thumb:hover,
.cwp-lightbox__thumb:hover {
    opacity: 0.85 !important;
}

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

.cwp-root .cwp-lightbox__thumb:focus-visible,
.cwp-lightbox__thumb:focus-visible {
    outline: 2px solid #FFFFFF !important;
    outline-offset: 2px !important;
    opacity: 1 !important;
}

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

/* ── Mobile adjustments ────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .cwp-lightbox__content {
        padding: 48px 8px;
    }

    .cwp-root .cwp-lightbox__nav,
    .cwp-lightbox__nav {
        width: 36px !important;
        height: 36px !important;
    }

    .cwp-lightbox__nav--prev {
        left: 8px !important;
    }

    .cwp-lightbox__nav--next {
        right: 8px !important;
    }

    .cwp-lightbox__image {
        max-width: 100vw;
        max-height: 75vh;
    }
}

/* ── Body scroll lock (applied by JS) ──────────────────────────────────── */

body.cwp-lightbox-open {
    overflow: hidden !important;
}

/* Hide the mobile compact bar when lightbox is open */
body.cwp-lightbox-open .cwp-property-layout__sidebar {
    display: none !important;
}

/* ── Lightbox mobile overrides (≤1023px) ───────────────────────────────── */
@media (max-width: 1023px) {
    .cwp-lightbox__overlay {
        background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 1) !important;
    }

    .cwp-root .cwp-lightbox__close {
        top: 12px !important;
        left: 12px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .cwp-root .cwp-lightbox__counter {
        top: 18px !important;
        font-size: 12px !important;
    }

    .cwp-root .cwp-lightbox__nav {
        width: 36px !important;
        height: 36px !important;
    }

    .cwp-root .cwp-lightbox__nav svg {
        width: 18px !important;
        height: 18px !important;
    }

    .cwp-root .cwp-lightbox__image img {
        max-width: 96vw !important;
        max-height: 75vh !important;
        border-radius: 8px !important;
    }
}

/* ==========
   SECTION 13 — PROPERTY HEADER
   Title row with actions, meta (rating · reviews · superhost · location),
   spec pills, and bottom divider. Used on the single property page below
   the gallery and above the host section.
   ========== */

/* ── Header container ─────────────────────────────────────────────────── */

.cwp-property-header {
    padding: var(--cwp-spacing-lg, 24px) 0 0 !important;
}

/* ── Heading row: Title (left) + Price (right) ────────────────────────── */

.cwp-root .cwp-property-header__heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 8px !important;
    border-bottom: none !important;
}

.cwp-root .cwp-property-header__heading .cwp-property-title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif) !important;
    font-size: clamp(24px, 3.5vw, 44px) !important;
    font-weight: 500 !important;
    color: var(--cwp-text, #1A2B3C) !important;
    line-height: var(--cwp-line-height-tight, 1.22) !important;
    letter-spacing: -0.02em !important;
    flex: 1 !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* ── Property address below title ──────────────────────────────────────── */

.cwp-root .cwp-property-address {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    font-family: var(--cwp-font-body, 'Plus Jakarta Sans', -apple-system, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    line-height: 1.4 !important;
}

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

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

.cwp-root .cwp-property-header__price-amount {
    font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif) !important;
    font-size: clamp(24px, 2.5vw, 36px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    line-height: var(--cwp-line-height-tight, 1.22) !important;
}

.cwp-root .cwp-property-header__price-period {
    font-family: var(--cwp-font-body, 'Plus Jakarta Sans', -apple-system, sans-serif) !important;
    font-size: var(--cwp-size-body, 16px) !important;
    font-weight: var(--cwp-weight-regular, 400) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
}

/* ── Info row: Meta (left) + Action buttons (right) ───────────────────── */

.cwp-root .cwp-property-header__info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--cwp-spacing-lg, 24px) !important;
    margin-bottom: 12px !important;
}

/* Hide share/save/print action buttons — Plum Guide minimal style */
.cwp-root .cwp-property-header__actions {
    display: none !important;
}

/* Collapse info row when meta list is empty (no rating/reviews/superhost/location) */
.cwp-root .cwp-property-header__info:has(.cwp-property-header__meta-list:empty) {
    margin-bottom: 20px !important;
}

/* When meta list is empty, push action buttons to the right with a top border */
.cwp-root .cwp-property-header__meta-list:empty {
    display: none !important;
}

.cwp-root .cwp-property-header__info:has(.cwp-property-header__meta-list:empty) .cwp-property-header__actions {
    margin-left: auto !important;
}

.cwp-root .cwp-property-header__meta-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--cwp-font-body, 'Plus Jakarta Sans', -apple-system, sans-serif) !important;
    font-size: var(--cwp-size-body, 16px) !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
}

.cwp-root .cwp-property-header__meta-list .cwp-meta-separator {
    color: var(--cwp-text-muted, #8899A6) !important;
    font-weight: var(--cwp-weight-bold, 700) !important;
    user-select: none !important;
}

/* Star rating */
.cwp-root .cwp-property-header__rating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: var(--cwp-weight-medium, 500) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-root .cwp-property-header__rating svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--cwp-warning, #ffa920) !important;
    fill: var(--cwp-warning, #ffa920) !important;
    flex-shrink: 0 !important;
}

.cwp-root .cwp-property-header__rating strong {
    font-weight: var(--cwp-weight-bold, 700) !important;
}

/* Reviews link */
.cwp-root .cwp-property-header__reviews {
    color: var(--cwp-text-secondary, #4A6274) !important;
    text-decoration: underline !important;
    font-weight: var(--cwp-weight-regular, 400) !important;
    transition: color 150ms ease !important;
}

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

.cwp-root .cwp-property-header__reviews: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: 2px !important;
}

/* Superhost badge in meta row */
.cwp-root .cwp-property-header__meta-list .cwp-badge-superhost {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: var(--cwp-size-body-sm, 14px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-root .cwp-property-header__meta-list .cwp-badge-superhost svg {
    width: 12px !important;
    height: 12px !important;
    color: var(--cwp-warning, #ffa920) !important;
    fill: var(--cwp-warning, #ffa920) !important;
}

/* Location link */
.cwp-root .cwp-property-header__location {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    text-decoration: underline !important;
    font-size: var(--cwp-size-body, 16px) !important;
    transition: color 150ms ease !important;
}

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

.cwp-root .cwp-property-header__location svg {
    width: 12px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

/* ── Action icon buttons (share, save, print) ─────────────────────────── */

.cwp-root .cwp-property-header__actions {
    display: flex !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
}

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

.cwp-root .cwp-action-btn:hover {
    background: var(--cwp-primary, #1B6B93) !important;
    background-color: var(--cwp-primary, #1B6B93) !important;
    border-color: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
}

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

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

/* ── Detail grid — icon boxes ─────────────────────────────────────────── */

.cwp-root .cwp-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 20px !important;
}

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

.cwp-root .cwp-detail-item__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--cwp-detail-icon-size, 52px) !important;
    height: var(--cwp-detail-icon-size, 52px) !important;
    border: 1px solid var(--cwp-border, #ececec) !important;
    border-radius: var(--cwp-detail-icon-radius, 10px) !important;
    background: var(--cwp-surface-alt, #F6F9FB) !important;
    flex-shrink: 0 !important;
    transition: border-color 150ms ease, background-color 150ms ease !important;
}

.cwp-root .cwp-detail-item:hover .cwp-detail-item__icon {
    border-color: var(--cwp-primary, #1B6B93) !important;
    background: rgba(var(--cwp-primary-rgb, 241, 145, 61), 0.08) !important;
}

.cwp-root .cwp-detail-item__icon svg {
    width: 24px !important;
    height: 24px !important;
    color: var(--cwp-primary, #1B6B93) !important;
}

.cwp-root .cwp-detail-item__text {
    display: flex !important;
    flex-direction: column !important;
}

.cwp-root .cwp-detail-item__label {
    display: block !important;
    font-family: var(--cwp-font-body, 'Plus Jakarta Sans', -apple-system, sans-serif) !important;
    font-size: var(--cwp-size-body-sm, 14px) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
    line-height: var(--cwp-line-height-normal, 1.4) !important;
    margin: 0 !important;
}

.cwp-root .cwp-detail-item__value {
    display: block !important;
    font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif) !important;
    font-size: var(--cwp-size-body, 16px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    line-height: var(--cwp-line-height-normal, 1.4) !important;
    margin: 0 !important;
}

/* ── Mobile responsive ────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .cwp-root .cwp-property-header__heading {
        flex-direction: column !important;
        gap: var(--cwp-spacing-sm, 8px) !important;
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
    }

    .cwp-root .cwp-property-header__heading .cwp-property-title {
        font-size: clamp(22px, 5vw, 28px) !important;
    }

    .cwp-root .cwp-property-header__price-amount {
        font-size: clamp(22px, 4vw, 28px) !important;
    }

    .cwp-root .cwp-property-header__info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--cwp-spacing-md, 16px) !important;
    }

    .cwp-root .cwp-detail-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

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

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


/* ==========
   SECTION 13B — STICKY NAVIGATION BAR
   Appears after scrolling past gallery. Transforms to show Reserve button
   when the booking sidebar scrolls out of view (Airbnb conversion pattern).
   ========== */

.cwp-sticky-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 90 !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--cwp-border, #ececec) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) !important;
}

.cwp-sticky-nav__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 64px !important;
    gap: 24px !important;
}

.cwp-sticky-nav__links {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

.cwp-root .cwp-sticky-nav__link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 20px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--cwp-text-secondary, #6B7B8D) !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    transition: color 150ms ease, border-color 150ms ease !important;
    white-space: nowrap !important;
    background: transparent !important;
    background-color: transparent !important;
    margin: 0 !important;
}

.cwp-root .cwp-sticky-nav__link:hover,
.cwp-root .cwp-sticky-nav__link:focus {
    color: var(--cwp-text, #1A2B3C) !important;
    text-decoration: none !important;
}

.cwp-root .cwp-sticky-nav__link:focus-visible {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

.cwp-root .cwp-sticky-nav__link--active,
.cwp-root .cwp-sticky-nav__link--active:hover {
    color: var(--cwp-text, #1A2B3C) !important;
    border-bottom-color: var(--cwp-text, #1A2B3C) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.cwp-sticky-nav__reserve {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
}

.cwp-sticky-nav__price {
    display: flex !important;
    align-items: baseline !important;
    gap: 2px !important;
}

.cwp-sticky-nav__amount {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-sticky-nav__unit {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--cwp-text-secondary, #6B7B8D) !important;
}

.cwp-sticky-nav__rating {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-sticky-nav__star {
    color: var(--cwp-warning, #ffa920) !important;
}

.cwp-root .cwp-sticky-nav__cta {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 28px !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    background: var(--cwp-gradient, linear-gradient(135deg, #f1913d 0%, #d17a2e 100%)) !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(var(--cwp-primary-rgb, 241, 145, 61), 0.25) !important;
    transition: opacity 150ms ease, box-shadow 150ms ease !important;
}

.cwp-root .cwp-sticky-nav__cta:hover {
    opacity: 0.92 !important;
    box-shadow: 0 4px 12px rgba(var(--cwp-primary-rgb, 241, 145, 61), 0.35) !important;
    background: var(--cwp-gradient, linear-gradient(135deg, #f1913d 0%, #d17a2e 100%)) !important;
    color: #FFFFFF !important;
}

/* Transitions */
.cwp-sticky-nav--enter {
    transition: transform 200ms ease-out, opacity 200ms ease-out !important;
}
.cwp-sticky-nav--enter-start {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}
.cwp-sticky-nav--enter-end {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.cwp-sticky-nav--leave {
    transition: transform 150ms ease-in, opacity 150ms ease-in !important;
}
.cwp-sticky-nav--leave-start {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.cwp-sticky-nav--leave-end {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}

/* Mobile: hide sticky nav entirely — mobile bottom bar handles the Reserve CTA */
@media (max-width: 767px) {
    .cwp-sticky-nav {
        display: none !important;
    }
}

/* ==========
   SECTION 14 — (Reserved — host-brief removed in 1.0.7, merged into Section 19)
   ========== */

/* ==========
   SECTION 15 — PROPERTY DESCRIPTION
   "About this property" section with line-clamp truncation, gradient fade,
   and Alpine.js show-more / show-less toggle.
   ========== */

.cwp-description {
    padding: 0 !important;
    margin-top: 32px !important;
    margin-bottom: 40px !important;
}

.cwp-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;
}

/* ── Body wrapper (holds text + gradient fade) ───────────────────────── */

/* 1.2.0 — base body no longer clips. The visual clamp + mask fade only
 * apply when the PHP-side has added `--clamped`, which it does only when
 * the description is long enough to warrant a Show more toggle. Short
 * descriptions now render in full, with no fade-out and no toggle. */
.cwp-description__body {
    position: relative;
}

/* Clipped + faded variant. Applied by PHP when needs_toggle is true. */
.cwp-description__body--clamped {
    overflow: hidden;
    max-height: 9.6em; /* ~6 lines × 1.6 line-height */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded state — release the cap entirely so very long descriptions
 * (Hospitable / Hostfully properties often have 600+ line "About"
 * bodies) don't clip and overflow into the next section.
 *
 * Previously used max-height: 200em which couldn't contain longer
 * descriptions: combined with overflow: visible the text escaped the
 * container box AND the following section ("Things to know") rendered
 * immediately after the 200em mark, causing the visible overlap shown
 * in customer screenshots.
 *
 * Trade-off: the smooth max-height transition is sacrificed — expand
 * is instant. Acceptable UX for a read-more action. */
.cwp-description__body--expanded {
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    /* 1.1.9: also clear the mask-image fade (defined further down) so
     * the bottom of long expanded copy isn't faded into the next
     * section. Previously the mask stayed on, making the last line of
     * text look like it was bleeding into the next card. */
    -webkit-mask-image: none !important;
    mask-image: none !important;
    /* Reserve breathing room before the next section even on very long
     * bodies so the toggle button and next section never visually
     * collide on narrow viewports. */
    padding-bottom: var(--cwp-space-md, 16px);
}

/* 1.1.9: belt-and-braces — make sure the parent section never clips its
 * expanded child and always grows to fit. Customer screenshots showed
 * the expanded "About" body bleeding into the "What this place offers"
 * card; root cause was a theme stylesheet putting overflow: hidden on
 * generic <section> elements. */
.cwp-description {
    height: auto !important;
    overflow: visible !important;
}

/* ── Text content ────────────────────────────────────────────────────── */

.cwp-description__text {
    font-size: 17px;
    line-height: 1.75;
    color: var(--cwp-text, #1A2B3C);
    word-break: break-word;
    overflow-wrap: break-word;
}

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

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

/* ── Gradient fade overlay ───────────────────────────────────────────── */
/* Hidden — replaced by mask-image on body (background-agnostic)        */

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

/* 1.2.0 — mask-based fade ONLY applies to clamped (long) descriptions
 * that aren't currently expanded. Short descriptions used to incorrectly
 * receive this fade because the selector was `:not(--expanded)` alone,
 * which matched every short body too. */
.cwp-description__body--clamped:not(.cwp-description__body--expanded) {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* ── Toggle button (glassmorphism pill — matches "Show all" amenities) ── */

.cwp-root .cwp-description__toggle,
.cwp-description__toggle {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 14px 7px 14px !important;
    margin-top: var(--cwp-space-md, 16px) !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.82) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.45) !important;
    border-radius: 9999px !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    color: var(--cwp-text, #1A2B3C) !important;
    cursor: pointer !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.10),
        0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                background 0.18s ease !important;
    white-space: nowrap !important;
}

.cwp-root .cwp-description__toggle:hover,
.cwp-description__toggle:hover {
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.95) !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.14),
        0 0 0 0.5px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.45) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-root .cwp-description__toggle:active,
.cwp-description__toggle:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.12),
        0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
    transition-duration: 0.08s !important;
}

.cwp-root .cwp-description__toggle:focus,
.cwp-description__toggle:focus {
    outline: none !important;
}

.cwp-root .cwp-description__toggle:focus-visible,
.cwp-description__toggle:focus-visible {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 3px !important;
}

/* Toggle chevron icon */
.cwp-description__toggle-icon {
    width: 12px;
    height: 12px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    color: var(--cwp-primary, #1B6B93);
}

.cwp-description__toggle-icon--up {
    transform: rotate(180deg);
}

/* Divider spacing */
.cwp-description__divider {
    margin: var(--cwp-space-lg, 24px) 0 0 0;
}

/* ==========
   SECTION 16 — AMENITIES (enhanced)
   "What this place offers" section with contextual SVG icons, 2-column grid,
   show-all button, and modal with categorised display.
   ========== */

.cwp-amenities {
    padding: 0 !important;
    margin-top: 8px !important;
}

.cwp-amenities 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;
}

/* ── Grid ────────────────────────────────────────────────────────────── */

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

.cwp-amenities__grid--modal {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
}

/* ── Amenity item ────────────────────────────────────────────────────── */

.cwp-amenities__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--cwp-border, #ececec);
    transition: background-color 0.15s ease;
}

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

/* ── Font Awesome icon wrapper ───────────────────────────────────────── */

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

/* ── SVG icon (card grid fallback) ───────────────────────────────────── */

.cwp-amenities__icon {
    width: 24px;
    height: 24px;
    color: var(--cwp-primary, #f1913d);
    flex-shrink: 0;
    opacity: 0.75;
}

.cwp-amenities__name {
    font-family: var(--cwp-font-body, 'Manrope', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--cwp-text, #2c2e33);
    line-height: 1.3;
}

/* ── Modal grid responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .cwp-amenities__grid--modal {
        grid-template-columns: 1fr !important;
    }
}

/* ── Show all button (glassmorphism pill — matches gallery "Show all") ── */

.cwp-root .cwp-amenities__show-all,
.cwp-amenities__show-all {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 14px 7px 11px !important;
    margin-top: var(--cwp-space-lg, 24px) !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.82) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.45) !important;
    border-radius: 9999px !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    color: var(--cwp-text, #1A2B3C) !important;
    cursor: pointer !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.10),
        0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                background 0.18s ease !important;
    white-space: nowrap !important;
}

.cwp-root .cwp-amenities__show-all:hover,
.cwp-amenities__show-all:hover {
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.95) !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.14),
        0 0 0 0.5px rgba(0, 0, 0, 0.08) !important;
}

.cwp-root .cwp-amenities__show-all:active,
.cwp-amenities__show-all:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.12),
        0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
    transition-duration: 0.08s !important;
}

.cwp-root .cwp-amenities__show-all:focus-visible,
.cwp-amenities__show-all:focus-visible {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 3px !important;
}

/* Icon wrapper — branded circle */
.cwp-root .cwp-amenities__show-all-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
}

.cwp-root .cwp-amenities__show-all-icon svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

/* ── Reusable pill-button icon circle (matches amenities show-all icon) ─── */
.cwp-root .cwp-btn-pill-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
}

.cwp-root .cwp-btn-pill-icon svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

/* Label text */
.cwp-root .cwp-amenities__show-all-label {
    color: var(--cwp-text, #1A2B3C) !important;
}

/* Count badge — small accent pill */
.cwp-root .cwp-amenities__show-all-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 9999px !important;
    background: var(--cwp-text, #1A2B3C) !important;
    color: #FFFFFF !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* ── Category headings (modal) ───────────────────────────────────────── */

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

.cwp-amenities__category:last-child {
    margin-bottom: 0;
}

.cwp-amenities__category-title {
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-lg, 17px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    margin: 0 0 var(--cwp-space-md, 16px) 0 !important;
    padding-bottom: var(--cwp-space-xs, 4px);
    border-bottom: 1px solid var(--cwp-border, #D4E0E8);
}

/* ── Amenities modal (teleported) ────────────────────────────────────── */

.cwp-amenities-modal {
    position: fixed;
    inset: 0;
    z-index: 100000 !important;
    /* display is controlled by Alpine x-show — do NOT use !important here */
    align-items: center;
    justify-content: center;
    /* Override frontend.css .cwp-modal base hidden state —
       Alpine x-show handles display toggling, not opacity/visibility */
    opacity: 1 !important;
    visibility: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
}

.cwp-amenities-modal .cwp-modal__overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1 !important;
}

.cwp-amenities-modal .cwp-modal__content {
    position: relative !important;
    z-index: 2 !important;
    background: var(--cwp-bg, #FFFFFF) !important;
    border-radius: var(--cwp-radius-xl, 16px) !important;
    width: 92% !important;
    max-width: 700px !important;
    max-height: 85vh !important;
    /* display controlled by Alpine x-show — no !important */
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    /* Override frontend.css .cwp-modal__content */
    padding: 0 !important;
    inset: auto !important;
}

.cwp-amenities-modal .cwp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--cwp-border, #ececec);
    flex-shrink: 0;
}

.cwp-amenities-modal .cwp-modal__title {
    font-family: var(--cwp-font-body, 'Manrope', sans-serif) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--cwp-text, #2c2e33) !important;
    margin: 0 !important;
}

.cwp-amenities-modal .cwp-modal__close {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--cwp-radius-full, 9999px) !important;
    background: var(--cwp-surface-alt, #f7f7f7) !important;
    border: 1px solid var(--cwp-border, #ececec) !important;
    color: var(--cwp-text, #2c2e33) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.cwp-amenities-modal .cwp-modal__close:hover {
    background: var(--cwp-border, #ececec) !important;
    transform: scale(1.05) !important;
border: none !important;
}

.cwp-amenities-modal .cwp-modal__close:focus {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 2px !important;
    background: none !important;
border: none !important;
}

.cwp-amenities-modal .cwp-modal__body {
    padding: var(--cwp-space-lg, 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Additional rules modal (teleported) ─────────────────────────────── */
/* Same layout + aspect ratio as .cwp-amenities-modal above — kept as a
   parallel block (not a shared class) so each modal's sizing can diverge
   later without fighting shared selectors. */

.cwp-house-rules-modal {
    position: fixed;
    inset: 0;
    /* Sit above ANY sticky theme header/nav — same fix as .cwp-reviews-modal.
       The base .cwp-modal is only z-index:400 (single-property.css), which a
       sticky header can beat; max int guarantees it wins. The modal is
       teleported to <body>, so no parent stacking context caps it. */
    z-index: 2147483647 !important;
    /* display is controlled by Alpine x-show — do NOT use !important here */
    align-items: center;
    justify-content: center;
    /* Override frontend.css .cwp-modal base hidden state —
       Alpine x-show handles display toggling, not opacity/visibility */
    opacity: 1 !important;
    visibility: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
}

.cwp-house-rules-modal .cwp-modal__overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1 !important;
}

.cwp-house-rules-modal .cwp-modal__content {
    position: relative !important;
    z-index: 2 !important;
    background: var(--cwp-bg, #FFFFFF) !important;
    border-radius: var(--cwp-radius-xl, 16px) !important;
    width: 92% !important;
    max-width: 700px !important;
    max-height: 85vh !important;
    /* display controlled by Alpine x-show — no !important */
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    /* Override frontend.css .cwp-modal__content */
    padding: 0 !important;
    inset: auto !important;
}

.cwp-house-rules-modal .cwp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--cwp-border, #ececec);
    flex-shrink: 0;
}

.cwp-house-rules-modal .cwp-modal__title {
    font-family: var(--cwp-font-body, 'Manrope', sans-serif) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--cwp-text, #2c2e33) !important;
    margin: 0 !important;
}

.cwp-house-rules-modal .cwp-modal__close {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--cwp-radius-full, 9999px) !important;
    background: var(--cwp-surface-alt, #f7f7f7) !important;
    border: 1px solid var(--cwp-border, #ececec) !important;
    color: var(--cwp-text, #2c2e33) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.cwp-house-rules-modal .cwp-modal__close:hover {
    background: var(--cwp-border, #ececec) !important;
    transform: scale(1.05) !important;
    border: none !important;
}

.cwp-house-rules-modal .cwp-modal__close:focus {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 2px !important;
    background: none !important;
    border: none !important;
}

.cwp-house-rules-modal .cwp-modal__body {
    padding: var(--cwp-space-lg, 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Modal transitions ───────────────────────────────────────────────── */

.cwp-modal__overlay-enter        { transition: opacity 200ms ease-out; }
.cwp-modal__overlay-enter-start  { opacity: 0; }
.cwp-modal__overlay-enter-end    { opacity: 1; }
.cwp-modal__overlay-leave        { transition: opacity 150ms ease-in; }
.cwp-modal__overlay-leave-start  { opacity: 1; }
.cwp-modal__overlay-leave-end    { opacity: 0; }

.cwp-modal__content-enter        { transition: opacity 200ms ease-out, transform 200ms ease-out; }
.cwp-modal__content-enter-start  { opacity: 0; transform: scale(0.95) translateY(10px); }
.cwp-modal__content-enter-end    { opacity: 1; transform: scale(1) translateY(0); }
.cwp-modal__content-leave        { transition: opacity 150ms ease-in, transform 150ms ease-in; }
.cwp-modal__content-leave-start  { opacity: 1; transform: scale(1) translateY(0); }
.cwp-modal__content-leave-end    { opacity: 0; transform: scale(0.95) translateY(10px); }

/* ── Reusable Alpine Transition Utilities ────────────────────────────── */
/*
 * Shared transition classes for x-transition directives across pages.
 * Used by: filter dropdown, filter chips, map peek, inquiry states, etc.
 */

/* --- Fade (200ms) — simple opacity fade in/out --- */
.cwp-transition-fade-enter        { transition: opacity 200ms ease-out; }
.cwp-transition-fade-enter-start  { opacity: 0; }
.cwp-transition-fade-enter-end    { opacity: 1; }
.cwp-transition-fade-leave        { transition: opacity 150ms ease-in; }
.cwp-transition-fade-leave-start  { opacity: 1; }
.cwp-transition-fade-leave-end    { opacity: 0; }

/* --- Dropdown (200ms) — fade + scale + slight slide for dropdowns --- */
.cwp-transition-dropdown-enter        { transition: opacity 200ms ease-out, transform 200ms ease-out; }
.cwp-transition-dropdown-enter-start  { opacity: 0; transform: translateY(-4px) scale(0.98); }
.cwp-transition-dropdown-enter-end    { opacity: 1; transform: translateY(0) scale(1); }
.cwp-transition-dropdown-leave        { transition: opacity 150ms ease-in, transform 150ms ease-in; }
.cwp-transition-dropdown-leave-start  { opacity: 1; transform: translateY(0) scale(1); }
.cwp-transition-dropdown-leave-end    { opacity: 0; transform: translateY(-4px) scale(0.98); }

/* --- Slide Up (300ms) — for fullscreen overlays / mobile modals --- */
.cwp-transition-slide-up-enter        { transition: opacity 300ms ease-out, transform 300ms ease-out; }
.cwp-transition-slide-up-enter-start  { opacity: 0; transform: translateY(16px); }
.cwp-transition-slide-up-enter-end    { opacity: 1; transform: translateY(0); }
.cwp-transition-slide-up-leave        { transition: opacity 200ms ease-in, transform 200ms ease-in; }
.cwp-transition-slide-up-leave-start  { opacity: 1; transform: translateY(0); }
.cwp-transition-slide-up-leave-end    { opacity: 0; transform: translateY(16px); }

/* ── Mobile responsive — Amenities ───────────────────────────────────── */

@media (max-width: 767px) {
    .cwp-amenities__grid {
        grid-template-columns: 1fr;
    }

    .cwp-amenities-modal .cwp-modal__content {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        height: 100vh;
    }

    .cwp-house-rules-modal .cwp-modal__content {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        height: 100vh;
    }
}

/* ==========
   SECTION 17 — AVAILABILITY CALENDAR (REMOVED)
   Standalone inline availability calendar was removed from the property page.
   Availability is now handled exclusively by the sidebar booking calendar
   (CWPCalendar class, .cwp-cal__* styles). Styles kept here for reference.
   ========== */


/* ==========
   18. REVIEWS — Redesigned v2.0
   Modern Airbnb-inspired guest reviews section: score hero block with
   qualitative label, category breakdowns with icons, topic filter chips,
   review cards (max 4) with relative dates and host responses.
   ========== */

/* ── Container ────────────────────────────────────────────────────────────── */

.cwp-reviews {
    padding: 0;
    margin-top: 8px;
}

/* ── Hero Block (Score + Categories side by side) ─────────────────────────── */

.cwp-reviews__hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--cwp-space-xl, 40px);
    align-items: start;
    margin-bottom: var(--cwp-space-xl, 32px);
    padding-bottom: var(--cwp-space-xl, 32px);
    border-bottom: 1px solid var(--cwp-border-light, #ececec);
}

/* ── Score Block ──────────────────────────────────────────────────────────── */

.cwp-reviews__score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 140px;
}

.cwp-reviews__score-number {
    font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif);
    font-size: 56px;
    font-weight: var(--cwp-weight-regular, 400);
    color: var(--cwp-text, #1A2B3C);
    line-height: 1;
    letter-spacing: -0.02em;
}

.cwp-reviews__score-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: var(--cwp-space-xs, 6px);
}

.cwp-reviews__star-icon {
    font-size: 14px;
    color: #FFD700;
    line-height: 1;
}

.cwp-reviews__star-icon--empty {
    color: var(--cwp-border, #D4E0E8);
}

.cwp-reviews__score-label {
    font-family: var(--cwp-font-body, 'DM Sans', sans-serif);
    font-size: var(--cwp-size-body, 15px);
    font-weight: var(--cwp-weight-semibold, 600);
    color: var(--cwp-text, #1A2B3C);
    margin-top: var(--cwp-space-sm, 8px);
}

.cwp-reviews__score-count {
    font-size: var(--cwp-size-body-sm, 13px);
    color: var(--cwp-text-muted, #8899A6);
    margin-top: 2px;
}

/* ── Category Breakdown ───────────────────────────────────────────────────── */

.cwp-reviews__categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--cwp-space-xl, 32px);
    row-gap: var(--cwp-space-md, 14px);
    align-self: center;
}

.cwp-reviews__category {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cwp-reviews__category-info {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-xs, 6px);
}

.cwp-reviews__category-icon {
    font-size: 15px;
    color: var(--cwp-primary, #1B6B93);
    width: 18px;
    text-align: center;
}

.cwp-reviews__category-label {
    font-size: var(--cwp-size-body-sm, 13px);
    color: var(--cwp-text, #1A2B3C);
    font-weight: var(--cwp-weight-medium, 500);
}

.cwp-reviews__category-bar-wrap {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm, 8px);
    padding-left: 22px; /* align with label after icon */
}

.cwp-reviews__bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--cwp-border, #D4E0E8);
    position: relative;
    overflow: hidden;
}

.cwp-reviews__bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--cwp-primary, #1B6B93);
    border-radius: 2px;
    transition: width 600ms var(--cwp-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.cwp-reviews__category-score {
    font-size: var(--cwp-size-body-sm, 13px);
    font-weight: var(--cwp-weight-semibold, 600);
    color: var(--cwp-text, #1A2B3C);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Topic Filter Chips ───────────────────────────────────────────────────── */

.cwp-reviews__topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cwp-space-xs, 8px);
    margin-bottom: var(--cwp-space-lg, 24px);
}

.cwp-reviews__topic-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid var(--cwp-border, #D4E0E8);
    border-radius: 20px;
    background: var(--cwp-surface, #FFFFFF);
    color: var(--cwp-text-secondary, #4A6274);
    font-size: var(--cwp-size-body-sm, 13px);
    font-weight: var(--cwp-weight-medium, 500);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

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

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

.cwp-reviews__topic-chip--active:hover {
    background: var(--cwp-text, #1A2B3C);
    color: #FFFFFF;
}

.cwp-reviews__topic-count {
    font-size: 11px;
    opacity: 0.7;
}

/* ── Reviews List ─────────────────────────────────────────────────────────── */

.cwp-reviews__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--cwp-space-xl, 40px);
}

/* ── Review Card ──────────────────────────────────────────────────────────── */

.cwp-reviews__card {
    display: flex;
    flex-direction: column;
    gap: var(--cwp-space-sm, 10px);
    padding: var(--cwp-space-lg, 24px) 0;
    border-bottom: none;
}

/* Host requested no divider line under individual reviews. Guard against any
   higher-specificity .cwp-root rule re-adding it. */
.cwp-root .cwp-reviews__card {
    border-bottom: none !important;
}

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

.cwp-reviews__card-header {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-sm, 12px);
}

/* Avatar — 48px circle, solid primary bg with initial letter */
.cwp-reviews__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--cwp-radius-full, 9999px);
    background: var(--cwp-primary, #1B6B93);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cwp-reviews__avatar--img {
    object-fit: cover;
}

.cwp-reviews__avatar span {
    font-size: 17px;
    font-weight: var(--cwp-weight-bold, 700);
    color: #FFFFFF;
    line-height: 1;
}

.cwp-reviews__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cwp-reviews__author-line {
    display: flex;
    align-items: center;
    gap: 4px;
}

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

.cwp-reviews__verified {
    display: inline-flex;
    color: var(--cwp-primary, #1B6B93);
}

.cwp-reviews__verified i {
    font-size: 13px;
}

.cwp-reviews__reviewer-location {
    font-size: var(--cwp-size-body-sm, 13px);
    color: var(--cwp-text-muted, #8899A6);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cwp-reviews__reviewer-location i {
    font-size: 10px;
}

/* Rating row: stars + date + channel inline */
.cwp-reviews__rating-row {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-xs, 6px);
    flex-wrap: wrap;
}

.cwp-reviews__stars {
    display: flex;
    align-items: center;
    gap: 1px;
    color: #FFD700;
    line-height: 1;
}

.cwp-reviews__stars i {
    font-size: 11px;
}

.cwp-reviews__date {
    font-size: var(--cwp-size-body-sm, 13px);
    color: var(--cwp-text-muted, #8899A6);
}

.cwp-reviews__channel {
    font-size: var(--cwp-size-body-sm, 13px);
    color: var(--cwp-text-muted, #8899A6);
}

.cwp-reviews__channel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    vertical-align: middle;
    position: relative;
    top: -1px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Review text */
.cwp-reviews__text {
    font-size: var(--cwp-size-body, 15px);
    line-height: var(--cwp-line-height-relaxed, 1.7);
    color: var(--cwp-text-secondary, #4A6274);
    margin: 0;
}

.cwp-reviews__text-wrap {
    /* Container for review text + read more toggle */
}

.cwp-reviews__text--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Read more / Show less toggle (glassmorphism pill — matches "Show all" amenities) */
.cwp-root .cwp-reviews__read-more,
.cwp-reviews__read-more {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: var(--cwp-space-sm, 8px) !important;
    padding: 7px 14px !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.82) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.45) !important;
    border-radius: 9999px !important;
    font-family: var(--cwp-font-body, 'DM Sans', sans-serif) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    color: var(--cwp-text, #1A2B3C) !important;
    cursor: pointer !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.10),
        0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                background 0.18s ease !important;
    white-space: nowrap !important;
}

.cwp-root .cwp-reviews__read-more:hover,
.cwp-reviews__read-more:hover {
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.95) !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.14),
        0 0 0 0.5px rgba(0, 0, 0, 0.08) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-root .cwp-reviews__read-more:active,
.cwp-reviews__read-more:active {
    transform: translateY(0) scale(0.98) !important;
    transition-duration: 0.08s !important;
}

.cwp-root .cwp-reviews__read-more:focus-visible,
.cwp-reviews__read-more:focus-visible {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 3px !important;
}

/* Host response */
.cwp-reviews__host-response {
    background: var(--cwp-surface-alt, #F0F7FA);
    border-radius: var(--cwp-radius-md, 8px);
    padding: var(--cwp-space-sm, 12px) var(--cwp-space-md, 16px);
    margin-top: var(--cwp-space-xs, 4px);
}

.cwp-reviews__host-response-header {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-xs, 6px);
    margin-bottom: var(--cwp-space-xs, 6px);
}

.cwp-reviews__host-response-header i {
    font-size: 12px;
    color: var(--cwp-text-muted, #8899A6);
}

.cwp-reviews__host-response-header strong {
    font-size: var(--cwp-size-body-sm, 13px);
    font-weight: var(--cwp-weight-semibold, 600);
    color: var(--cwp-text, #1A2B3C);
}

.cwp-reviews__host-response p {
    font-size: var(--cwp-size-body-sm, 13px);
    color: var(--cwp-text-secondary, #4A6274);
    line-height: 1.6;
    margin: 0;
}

/* ── Responsive — Tablet ──────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .cwp-reviews__hero {
        grid-template-columns: 1fr;
        gap: var(--cwp-space-lg, 24px);
    }

    .cwp-reviews__score-block {
        flex-direction: row;
        gap: var(--cwp-space-md, 16px);
        text-align: left;
        align-items: center;
    }

    .cwp-reviews__score-number {
        font-size: 44px;
    }
}

/* ── Responsive — Mobile ──────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .cwp-reviews__score-block {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cwp-reviews__score-number {
        font-size: 48px;
    }

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

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

    .cwp-reviews__topics {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        margin-left: calc(var(--cwp-space-md, 16px) * -1);
        margin-right: calc(var(--cwp-space-md, 16px) * -1);
        padding-left: var(--cwp-space-md, 16px);
        padding-right: var(--cwp-space-md, 16px);
    }

    .cwp-reviews__topics::-webkit-scrollbar {
        display: none;
    }

}

/* ── "Show All Reviews" Button + Modal ───────────────────────────────────── */

.cwp-reviews__show-all-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--cwp-space-lg, 24px);
}

/* Glassmorphism pill — matches .cwp-reviews__read-more style */
.cwp-root .cwp-reviews__show-all-btn,
.cwp-reviews__show-all-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 10px 22px !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.82) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.45) !important;
    border-radius: 9999px !important;
    font-family: var(--cwp-font-body, 'DM Sans', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    color: var(--cwp-text, #1A2B3C) !important;
    cursor: pointer !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.10),
        0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                background 0.18s ease !important;
    white-space: nowrap !important;
}

.cwp-root .cwp-reviews__show-all-btn:hover,
.cwp-reviews__show-all-btn:hover {
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.95) !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.14),
        0 0 0 0.5px rgba(0, 0, 0, 0.08) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-root .cwp-reviews__show-all-btn:active,
.cwp-reviews__show-all-btn:active {
    transform: translateY(0) scale(0.98) !important;
    transition-duration: 0.08s !important;
}

.cwp-root .cwp-reviews__show-all-btn:focus-visible,
.cwp-reviews__show-all-btn:focus-visible {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 3px !important;
}

.cwp-reviews__show-all-btn .cwp-btn-pill-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
}

/* CSS-ONLY spacing fix (works on ANY markup, incl. the old un-wrapped one on
   cached pages). The button was `display:inline-flex; gap:7px`, so with bare
   text children "Show all", <strong>60</strong> and "reviews" each became a
   separate flex item and the 7px gap spread them apart / spilled ("overflow").
   Switching the button to inline-block makes the text flow as normal inline
   content (single word-spaces), and the icon is aligned inline. This does NOT
   depend on the template's label-span, so it fixes the old cached HTML too.
   NOTE: this file has a duplicate `.cwp-reviews__show-all-btn` block later that
   re-sets display:inline-flex, so these rules use the `.cwp-reviews` ancestor to
   reach (0,3,0)/(0,4,0) specificity and win regardless of source order. */
.cwp-root .cwp-reviews .cwp-reviews__show-all-btn {
    display: inline-block !important;
    white-space: nowrap !important;
    gap: 0 !important;
    /* Defend against a CUSTOM site rule (theme/Elementor custom CSS, NOT this
       plugin) that forces `width: 150px !important` on these buttons — the
       "Show all N reviews" text is wider than 150px and spills out. Size to
       content instead. Uses (0,3,0) specificity to beat the (0,2,0) custom rule. */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}
.cwp-root .cwp-reviews .cwp-reviews__show-all-btn .cwp-btn-pill-icon {
    display: inline-flex !important;
    vertical-align: middle !important;
    margin-right: 7px !important;
}
.cwp-root .cwp-reviews .cwp-reviews__show-all-btn .cwp-btn-pill-label {
    display: inline !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
.cwp-root .cwp-reviews__show-all-btn .cwp-btn-pill-label strong,
.cwp-reviews__show-all-btn .cwp-btn-pill-label strong {
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Reviews Modal — extends base .cwp-modal from single-property.css */

/* Override container background — frontend.css sets background: var(--cwp-overlay)
   on .cwp-modal which leaks the theme accent colour. The child .cwp-modal__overlay
   already provides the backdrop, so the container must be transparent. */
.cwp-reviews-modal {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Sit above ANY sticky theme header / nav. The base .cwp-modal is only
       z-index:400 (single-property.css), which a sticky header can beat, so the
       header showed through the top of the modal. Max int guarantees it wins.
       The modal is teleported to <body>, so no parent stacking context caps it. */
    z-index: 2147483647 !important;
}

/* Force a neutral dark overlay regardless of theme preset */
.cwp-reviews-modal .cwp-modal__overlay {
    background: rgba(26, 43, 60, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.cwp-reviews-modal__content {
    max-width: 680px !important;
    max-height: 85vh !important;
}

.cwp-reviews-modal__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Cards inside modal: single-column, no grid, full text visible */
.cwp-reviews-modal__list .cwp-reviews__card {
    border-bottom: 1px solid var(--cwp-border-light, #ececec);
    padding: var(--cwp-space-lg, 24px) 0;
}

.cwp-reviews-modal__list .cwp-reviews__card:first-child {
    padding-top: 0;
}

.cwp-reviews-modal__list .cwp-reviews__card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* No text clamping in modal — full review text is always visible */
.cwp-reviews-modal .cwp-reviews__text {
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    display: block !important;
    overflow: visible !important;
}

/* Modal title star matches heading star color */
.cwp-reviews-modal .cwp-modal__title .fa-star {
    color: #FFD700;
    margin-right: 2px;
}

/* Alpine cloak for reviews modal */
.cwp-reviews-modal [x-cloak] {
    display: none !important;
}

/* ── Reviews Modal Responsive — Mobile ──────────────────────────────────── */

@media (max-width: 767px) {
    .cwp-reviews-modal__content {
        max-height: 90vh !important;
        width: 95% !important;
        border-radius: var(--cwp-radius-lg, 12px) !important;
    }
}

/* ==========
   19. HOST / PROPERTY MANAGER (Merged)
   "Meet Your Host" — Airbnb-inspired 2-column layout
   Left: Profile card with avatar, name, role, stats grid
   Right: Badges, response info, bio text, message button
   ========== */

/* ── Section Container ───────────────────────────────────────────────────── */

.cwp-host {
    padding: 0;
}

.cwp-root .cwp-section-title {
    font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 400;
    color: var(--cwp-text, #2c2e33);
    margin: 0 0 32px 0;
    line-height: 1.3;
}

/* ── 2-Column Grid ───────────────────────────────────────────────────────── */

.cwp-host__grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 48px;
    align-items: start;
}

/* ── Left Column: Profile Card ───────────────────────────────────────────── */

.cwp-host__profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    background: var(--cwp-surface, #FFFFFF);
    border: 1px solid var(--cwp-border-light, #ececec);
    border-radius: var(--cwp-radius-xl, 16px);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* Avatar — 104px circle, gradient, white initial, verified badge */
.cwp-host__avatar {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 9999px;
    background: var(--cwp-gradient, linear-gradient(135deg, #2c2e33 0%, #4a4c52 100%));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 16px;
}

.cwp-host__initial {
    font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif);
    font-size: 40px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}

/* Verified badge — green checkmark, bottom-right of avatar */
.cwp-host__verified {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 3px solid #FFFFFF;
    background: var(--cwp-success, #10B981);
}

.cwp-host__verified svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Host name inside profile card */
.cwp-host__name {
    font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif);
    font-size: 28px;
    font-weight: 400;
    color: var(--cwp-text, #2c2e33);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

/* Role badge (Superhost · Professional Host) */
.cwp-host__role {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    color: var(--cwp-text-secondary, #6a6a6a);
    margin: 0 0 20px 0;
}

.cwp-host__role svg {
    width: 14px;
    height: 14px;
    color: var(--cwp-warning, #ffa920);
    fill: var(--cwp-warning, #ffa920);
    flex-shrink: 0;
}

/* Stats grid — 3 columns inside profile card */
.cwp-host__stats-grid {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid var(--cwp-border-light, #ececec);
}

.cwp-host__stats-divider {
    width: 1px;
    height: 40px;
    background: var(--cwp-border-light, #ececec);
    flex-shrink: 0;
}

.cwp-host__stat-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 8px;
}

.cwp-host__stat-number {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 22px;
    font-weight: 700;
    color: var(--cwp-text, #2c2e33);
    line-height: 1.2;
}

.cwp-host__stat-star {
    width: 12px;
    height: 12px;
    color: var(--cwp-text, #2c2e33);
    flex-shrink: 0;
}

.cwp-host__stat-label {
    font-size: 12px;
    color: var(--cwp-text-secondary, #6a6a6a);
    line-height: 1.3;
}

/* ── Right Column: Host Details ──────────────────────────────────────────── */

.cwp-host__details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 8px;
}

/* Detail item — icon + text row */
.cwp-host__detail-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.cwp-host__detail-item > svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--cwp-text, #2c2e33);
    margin-top: 2px;
}

.cwp-host__detail-item div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cwp-host__detail-item strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--cwp-text, #2c2e33);
    line-height: 1.4;
}

.cwp-host__detail-item p {
    font-size: 14px;
    color: var(--cwp-text-secondary, #6a6a6a);
    line-height: 1.6;
    margin: 0;
}

/* ── Responsive — Tablet ─────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .cwp-host__grid {
        grid-template-columns: 260px 1fr;
        gap: 32px;
    }
}

/* ── Responsive — Mobile ─────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .cwp-host__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cwp-host__profile {
        max-width: 320px;
        margin: 0 auto;
    }

}

/* ==========
   SECTION 20 — LOCATION + MAP
   Property location section with Leaflet map, location info, and highlights.
   ========== */

/* ── Section container ───────────────────────────────────────────────────── */

.cwp-root .cwp-location {
    padding: 0;
    margin: 0;
}

/* The location SECTION wrapper (#cwp-property-location) shipped a light-grey band
   (background ~#fafafa) with large 48px vertical padding. Host asked to drop the
   tint and tighten the inner padding so it reads like the other sections. */
.cwp-root #cwp-property-location.cwp-full-width-section,
.cwp-root #cwp-property-location {
    background: transparent !important;
    background-color: transparent !important;
    padding-top: var(--cwp-space-lg, 24px) !important;
    padding-bottom: var(--cwp-space-lg, 24px) !important;
}

.cwp-root .cwp-location 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: 0 0 var(--cwp-space-lg, 24px) 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* ── Map container ───────────────────────────────────────────────────────── */

.cwp-root .cwp-location__map {
    width: 100%;
    height: 400px;
    border-radius: var(--cwp-radius-lg, 12px);
    overflow: hidden;
    background: var(--cwp-surface-alt, #F0F7FA);
    margin-bottom: var(--cwp-space-lg, 24px);
    position: relative;
    z-index: 1;
}

/* Leaflet container override — ensure tiles fill the rounded container. */
.cwp-root .cwp-location__map .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--cwp-radius-lg, 12px) !important;
}

/* Override Leaflet's default tile layer z-index to stay within section. */
.cwp-root .cwp-location__map .leaflet-pane {
    z-index: 1;
}

.cwp-root .cwp-location__map .leaflet-top,
.cwp-root .cwp-location__map .leaflet-bottom {
    z-index: 2;
}

/* ── Custom marker ───────────────────────────────────────────────────────── */

.cwp-map-marker {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.cwp-map-marker svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    transition: transform 0.2s ease;
}

.cwp-map-marker:hover svg {
    transform: scale(1.1);
}

/* ── Location info ───────────────────────────────────────────────────────── */

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

.cwp-root .cwp-location__headline {
    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 0 var(--cwp-space-sm, 8px) 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.cwp-root .cwp-location__description {
    font-size: var(--cwp-size-body, 15px) !important;
    line-height: 1.6 !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Address (backward compat — old standalone .cwp-location__address) ─── */

.cwp-root .cwp-location__address {
    font-size: var(--cwp-size-body, 15px);
    color: var(--cwp-text-secondary, #4A6274);
    margin: 0 0 var(--cwp-space-lg, 24px) 0;
}

/* ── Highlights ──────────────────────────────────────────────────────────── */

.cwp-root .cwp-location__highlights {
    display: flex;
    flex-direction: column;
    gap: var(--cwp-space-md, 16px);
    margin-bottom: var(--cwp-space-lg, 24px);
}

.cwp-root .cwp-location__highlight {
    display: flex;
    align-items: flex-start;
    gap: var(--cwp-space-md, 16px);
}

.cwp-root .cwp-location__highlight-icon {
    width: 20px;
    height: 20px;
    color: var(--cwp-primary, #1B6B93);
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.7;
}

.cwp-root .cwp-location__highlight-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cwp-root .cwp-location__highlight-text strong {
    font-size: var(--cwp-size-body, 15px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-root .cwp-location__highlight-text span {
    font-size: var(--cwp-size-body-sm, 13px) !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
}

/* ── Privacy note ────────────────────────────────────────────────────────── */

.cwp-root .cwp-location__privacy-note {
    font-size: var(--cwp-size-body-sm, 13px) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

/* ── Leaflet zoom controls — theme isolation ─────────────────────────────── */

.cwp-root .cwp-location__map .leaflet-control-zoom a {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    background: var(--cwp-surface, #fff) !important;
    color: var(--cwp-text, #333) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
}

.cwp-root .cwp-location__map .leaflet-control-zoom a:hover {
    background: var(--cwp-surface-hover, #f4f4f4) !important;
    color: var(--cwp-text, #333) !important;
}

.cwp-root .cwp-location__map .leaflet-control-zoom a:focus {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: -2px !important;
}

.cwp-root .cwp-location__map .leaflet-control-zoom {
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

/* ── Leaflet attribution — keep small and subtle ─────────────────────────── */

.cwp-root .cwp-location__map .leaflet-control-attribution {
    font-size: 10px !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.75) !important;
    padding: 2px 6px !important;
    border-radius: 4px 0 0 0 !important;
}

.cwp-root .cwp-location__map .leaflet-control-attribution a {
    color: var(--cwp-primary, #1B6B93) !important;
    text-decoration: none !important;
}

.cwp-root .cwp-location__map .leaflet-control-attribution a:hover {
    text-decoration: underline !important;
}

/* ── Responsive — Mobile ─────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .cwp-root .cwp-location__map {
        height: 280px;
        border-radius: var(--cwp-radius-md, 8px);
    }

    .cwp-root .cwp-location h2 {
        font-size: var(--cwp-size-h2-mobile, 22px) !important;
    }

    .cwp-root .cwp-location__headline {
        font-size: var(--cwp-size-h3-mobile, 18px) !important;
    }
}

/* ==========
   SECTION 21 — BOOKING SIDEBAR
   Sticky booking widget: price header, date/guest inputs, calendar dropdown,
   guest picker, CTA buttons, price breakdown, trust text.
   ========== */

/* ── Sidebar container ───────────────────────────────────────────────────── */

.cwp-root .cwp-sidebar {
    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));
    max-width: 380px;
    position: sticky;
    top: 24px;
    overflow: visible;
    z-index: 10;
}

/* ── Price header ────────────────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--cwp-space-sm, 8px);
    margin-bottom: var(--cwp-space-lg, 24px);
}

.cwp-root .cwp-sidebar__rate {
    display: flex;
    align-items: baseline;
    gap: var(--cwp-space-xs, 4px);
}

.cwp-root .cwp-sidebar__amount {
    font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif) !important;
    font-size: 26px !important;
    font-weight: var(--cwp-weight-bold, 700) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    line-height: 1.2 !important;
}

.cwp-root .cwp-sidebar__amount--prompt {
    font-family: var(--cwp-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
    font-size: 18px !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
}

.cwp-root .cwp-sidebar__unit {
    font-size: var(--cwp-size-body, 15px) !important;
    font-weight: var(--cwp-weight-regular, 400) !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
}

/* Total price display (when pricing is loaded) */
.cwp-root .cwp-sidebar__rate--total {
    flex-wrap: wrap !important;
}

.cwp-root .cwp-sidebar__total-label {
    font-size: var(--cwp-size-body, 15px) !important;
    font-weight: var(--cwp-weight-regular, 400) !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
}

.cwp-root .cwp-sidebar__per-night {
    width: 100% !important;
    font-size: var(--cwp-size-body-sm, 13px) !important;
    font-weight: var(--cwp-weight-regular, 400) !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    text-underline-offset: 2px !important;
}

.cwp-root .cwp-sidebar__rating {
    display: flex;
    align-items: center;
    gap: var(--cwp-space-xs, 4px);
    font-size: var(--cwp-size-body-sm, 13px);
    color: var(--cwp-text, #1A2B3C);
}

.cwp-root .cwp-sidebar__star {
    color: var(--cwp-warning, #ffa920);
    font-size: 14px;
}

.cwp-root .cwp-sidebar__dot {
    color: var(--cwp-text-muted, #8899A6);
}

.cwp-root .cwp-sidebar__review-link {
    color: var(--cwp-text-secondary, #4A6274) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.cwp-root .cwp-sidebar__review-link:hover {
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-root .cwp-sidebar__review-link: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: 2px !important;
}

/* ── Input container ─────────────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__inputs {
    position: relative;
    border: 1px solid var(--cwp-border, #D4E0E8);
    border-radius: var(--cwp-radius-md, 8px);
    overflow: visible;
}

/* Border-radius clipping on inner fields (replaces overflow:hidden on parent) */
.cwp-root .cwp-sidebar__field--checkin {
    border-top-left-radius: var(--cwp-radius-md, 8px);
}
.cwp-root .cwp-sidebar__field--checkout {
    border-top-right-radius: var(--cwp-radius-md, 8px);
}
.cwp-root .cwp-sidebar__field--guests {
    border-bottom-left-radius: var(--cwp-radius-md, 8px);
    border-bottom-right-radius: var(--cwp-radius-md, 8px);
}

.cwp-root .cwp-sidebar__dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--cwp-border, #D4E0E8);
}

.cwp-root .cwp-sidebar__field {
    padding: 12px var(--cwp-space-md, 16px);
    cursor: pointer;
    position: relative;
    transition: background-color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-root .cwp-sidebar__field:hover {
    background-color: var(--cwp-surface-alt, #F0F7FA);
}

.cwp-root .cwp-sidebar__field--active {
    background-color: var(--cwp-surface-alt, #F0F7FA);
    box-shadow: inset 0 0 0 2px var(--cwp-text, #222222);
}

.cwp-root .cwp-sidebar__field--checkin {
    border-right: 1px solid var(--cwp-border, #D4E0E8);
}

.cwp-root .cwp-sidebar__field--guests {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cwp-root .cwp-sidebar__field-content {
    flex: 1;
    min-width: 0;
}

.cwp-root .cwp-sidebar__label {
    display: block;
    font-size: 10px !important;
    font-weight: var(--cwp-weight-bold, 700) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
    line-height: 1.4 !important;
}

.cwp-root .cwp-sidebar__value {
    display: block;
    font-size: var(--cwp-size-body, 15px) !important;
    font-weight: var(--cwp-weight-medium, 500) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cwp-root .cwp-sidebar__chevron {
    width: 12px;
    height: 12px;
    color: var(--cwp-text-secondary, #4A6274);
    flex-shrink: 0;
    transition: transform var(--cwp-duration-fast, 150ms) var(--cwp-ease-default);
}

.cwp-root .cwp-sidebar__chevron--open {
    transform: rotate(180deg);
}

/* ── Floating Popup (Calendar & Guest Picker) ────────────────────────────── */

.cwp-root .cwp-sidebar__popup {
    position: absolute;
    top: auto;
    right: 0;
    left: auto;
    background: var(--cwp-surface, #fff);
    border: 1px solid var(--cwp-border, #e0e0e0);
    border-radius: var(--cwp-radius-lg, 12px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 1010;
    padding: 24px;
}

.cwp-root .cwp-sidebar__popup--calendar {
    width: 660px;
    max-width: calc(100vw - 32px);
    margin-top: 0;
    right: 0;
    left: auto;
    padding: 24px;
}

.cwp-root .cwp-sidebar__popup--guests {
    width: 100%;
    min-width: 320px;
    margin-top: 8px;
    padding: 20px 24px;
}

/* ── Popup Transitions (Alpine x-transition) ────────────────────────────── */

.cwp-popup-enter {
    transition: opacity 200ms ease, transform 200ms ease;
}
.cwp-popup-enter-start {
    opacity: 0;
    transform: translateY(-6px);
}
.cwp-popup-enter-end {
    opacity: 1;
    transform: translateY(0);
}
.cwp-popup-leave {
    transition: opacity 150ms ease, transform 150ms ease;
}
.cwp-popup-leave-start {
    opacity: 1;
    transform: translateY(0);
}
.cwp-popup-leave-end {
    opacity: 0;
    transform: translateY(-6px);
}

/* ── Popup Header ───────────────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 4px;
}

.cwp-root .cwp-sidebar__popup-title {
    font-size: 16px;
    font-weight: var(--cwp-weight-semibold, 600);
    color: var(--cwp-text, #222222);
    font-family: var(--cwp-font-display);
}

.cwp-root .cwp-sidebar__popup-close {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: var(--cwp-radius-full, 9999px) !important;
    background: transparent !important;
    color: var(--cwp-text-secondary, #717171) !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.cwp-root .cwp-sidebar__popup-close:hover {
    background: var(--cwp-bg-hover, #f7f7f7) !important;
    color: var(--cwp-text, #222222) !important;
}

/* ── Popup Footer ───────────────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__popup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid var(--cwp-border-light, #ebebeb);
}

.cwp-root .cwp-sidebar__popup-footer--end {
    justify-content: flex-end;
}

/* Remove double border in guests popup: last guest-row border-bottom + footer border-top */
.cwp-root .cwp-sidebar__popup--guests .cwp-sidebar__popup-footer {
    border-top: none !important;
    margin-top: 16px !important;
}


.cwp-root .cwp-sidebar__popup-link {
    all: revert !important;
    background: none !important;
    border: none !important;
    padding: 4px 0 !important;
    font-size: 14px !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text, #222222) !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    font-family: var(--cwp-font-body) !important;
}

.cwp-root .cwp-sidebar__popup-link:hover {
    color: var(--cwp-text-secondary, #717171) !important;
    background: none !important;
}

.cwp-root .cwp-sidebar__popup .cwp-sidebar__popup-footer .cwp-sidebar__popup-btn {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 20px !important;
    background: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    font-size: 14px !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    cursor: pointer !important;
    transition: background 0.15s ease, filter 0.15s ease !important;
    font-family: var(--cwp-font-body) !important;
}

.cwp-root .cwp-sidebar__popup .cwp-sidebar__popup-footer .cwp-sidebar__popup-btn:hover {
    background: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    filter: brightness(0.85) !important;
}

/* ── Sidebar Calendar Inner ─────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__calendar-inner {
    overflow: visible;
}

/* ── Sidebar CWPCalendar — Premium Design ───────────────────────────────── */

.cwp-root .cwp-cal {
    padding: 0;
    background: transparent;
}

.cwp-root .cwp-cal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 8px;
    gap: 4px;
}

.cwp-root .cwp-cal__header .cwp-cal__title {
    flex: 1;
}

.cwp-root .cwp-cal__nav-btn {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 1px solid var(--cwp-border, #D4E0E8) !important;
    border-radius: 50% !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    color: var(--cwp-text, #222222) !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.cwp-root .cwp-cal__nav-btn:hover {
    background: var(--cwp-surface-alt, #F0F7FA) !important;
    border-color: var(--cwp-text-secondary, #6B7280) !important;
}

.cwp-root .cwp-cal__nav-btn:disabled,
.cwp-root .cwp-cal__nav-btn[disabled] {
    opacity: 0.25 !important;
    cursor: default !important;
}

.cwp-root .cwp-cal__nav-btn:disabled:hover,
.cwp-root .cwp-cal__nav-btn[disabled]:hover {
    background: transparent !important;
}

.cwp-root .cwp-cal__months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cwp-root .cwp-cal__month {
    min-width: 0;
}

/* Per-month title (visible only on mobile when months stack) */
.cwp-root .cwp-cal__month-title {
    display: none;
    text-align: center;
    font-family: var(--cwp-font-display);
    font-size: 15px;
    font-weight: var(--cwp-weight-semibold, 600);
    color: var(--cwp-text, #222222);
    margin: 0 0 8px;
    line-height: 1.3;
}

.cwp-root .cwp-cal__title {
    text-align: center;
    font-family: var(--cwp-font-display);
    font-size: 14px;
    font-weight: var(--cwp-weight-semibold, 600);
    color: var(--cwp-text, #222222);
    padding-bottom: 0;
    margin: 0;
    line-height: 1.3;
}

.cwp-root .cwp-cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding-bottom: 4px;
}

.cwp-root .cwp-cal__weekday {
    font-size: 11px;
    font-weight: var(--cwp-weight-semibold, 600);
    color: var(--cwp-text-muted, #b0b0b0);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 0;
}

.cwp-root .cwp-cal__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 0;
}

/* ── Day Button — Premium ───────────────────────────────────────────────── */

.cwp-root .cwp-cal button.cwp-cal__day {
    all: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 46px !important;
    padding: 2px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--cwp-text, #222222) !important;
    font-size: 13px !important;
    font-weight: var(--cwp-weight-medium, 500) !important;
    font-family: var(--cwp-font-body) !important;
    cursor: pointer !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    line-height: 1 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    text-decoration: none !important;
    outline: none !important;
}

.cwp-root .cwp-cal button.cwp-cal__day--empty {
    cursor: default !important;
    visibility: hidden !important;
}

.cwp-root .cwp-cal button.cwp-cal__day:hover:not(:disabled):not(.cwp-cal__day--empty) {
    background: var(--cwp-surface-alt, #F0F7FA) !important;
    border-radius: 8px !important;
}

/* Disabled / past / booked — stronger visual distinction */
.cwp-root .cwp-cal button.cwp-cal__day--disabled,
.cwp-root .cwp-cal button.cwp-cal__day--booked {
    color: var(--cwp-text-muted, #b0b0b0) !important;
    cursor: default !important;
    text-decoration: line-through !important;
    opacity: 0.5 !important;
}

.cwp-root .cwp-cal button.cwp-cal__day--disabled:hover,
.cwp-root .cwp-cal button.cwp-cal__day--booked:hover {
    background: transparent !important;
}

/* 1.2.0 — Half-open turn-day visuals.
 *
 * Turn-blocked (disabled because of cta/ctd or stay-rule): same dim
 * look as booked but no strike-through — communicates "rule-blocked"
 * vs "physically booked." Tooltip carries the reason ("Check-in only",
 * "Check-out only", "Stay too short", "Stay too long", etc.).
 *
 * Half-open turn days (still selectable but ONLY as check-in OR ONLY
 * as check-out): tinted background with a diagonal corner indicator so
 * users see at a glance that the day is partially restricted.
 */
.cwp-root .cwp-cal button.cwp-cal__day--turn-blocked {
    color: var(--cwp-text-muted, #b0b0b0) !important;
    cursor: not-allowed !important;
    opacity: 0.55 !important;
    text-decoration: none !important;
}

.cwp-root .cwp-cal button.cwp-cal__day--checkin-only,
.cwp-root .cwp-cal button.cwp-cal__day--checkout-only {
    position: relative;
}

.cwp-root .cwp-cal button.cwp-cal__day--checkin-only::after,
.cwp-root .cwp-cal button.cwp-cal__day--checkout-only::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cwp-primary, #c0622a);
    opacity: 0.6;
}

.cwp-root .cwp-cal button.cwp-cal__day--checkout-only::after {
    /* Subtly different shade so check-out-only is distinguishable. */
    background: var(--cwp-warning, #9a6c00);
}

/* Booked dates that happen to be today — retain booked styling */
.cwp-root .cwp-cal button.cwp-cal__day--booked.cwp-cal__day--today {
    text-decoration: line-through !important;
    opacity: 0.5 !important;
}

/* Today indicator — underline to match search calendar */
.cwp-root .cwp-cal button.cwp-cal__day--today {
    font-weight: var(--cwp-weight-bold, 700) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* ── Selected States — Higher specificity to beat base rule ─────────────── */

/* Check-in date (filled primary, left-rounded) */
.cwp-root .cwp-cal button.cwp-cal__day.cwp-cal__day--checkin {
    background: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    border-radius: 8px 0 0 8px !important;
    text-decoration: none !important;
}

.cwp-root .cwp-cal button.cwp-cal__day.cwp-cal__day--checkin:hover {
    background: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    filter: brightness(0.9) !important;
}

.cwp-root .cwp-cal button.cwp-cal__day.cwp-cal__day--checkin::after {
    display: none !important;
}

/* When only checkin selected (no checkout yet), keep full rounding */
.cwp-root .cwp-cal button.cwp-cal__day.cwp-cal__day--checkin:not(.cwp-cal__day--in-range) {
    border-radius: 8px !important;
}

/* Check-out date (filled primary, right-rounded) */
.cwp-root .cwp-cal button.cwp-cal__day.cwp-cal__day--checkout {
    background: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    border-radius: 0 8px 8px 0 !important;
    text-decoration: none !important;
}

.cwp-root .cwp-cal button.cwp-cal__day.cwp-cal__day--checkout:hover {
    background: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    filter: brightness(0.9) !important;
}

/* In-range days (light primary tint, no round corners) */
.cwp-root .cwp-cal button.cwp-cal__day.cwp-cal__day--in-range {
    background: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.1) !important;
    color: var(--cwp-text, #222222) !important;
    border-radius: 0 !important;
}

/* Hover range preview */
.cwp-root .cwp-cal button.cwp-cal__day.cwp-cal__day--hover-range {
    background: rgba(var(--cwp-primary-rgb, 27, 107, 147), 0.06) !important;
    border-radius: 0 !important;
}

/* Checkin/checkout override in-range when both classes present */
.cwp-root .cwp-cal button.cwp-cal__day.cwp-cal__day--checkin.cwp-cal__day--in-range {
    background: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    border-radius: 8px 0 0 8px !important;
}

.cwp-root .cwp-cal button.cwp-cal__day.cwp-cal__day--checkout.cwp-cal__day--in-range {
    background: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    border-radius: 0 8px 8px 0 !important;
}

/* ── Day price label ────────────────────────────────────────────────────── */

.cwp-root .cwp-cal__day-num {
    font-size: inherit;
    line-height: 1.2;
}

.cwp-root .cwp-cal__day-price {
    font-size: 9px;
    line-height: 1;
    color: var(--cwp-text-muted, #b0b0b0);
    font-weight: var(--cwp-weight-regular, 400);
    margin-top: 1px;
}

.cwp-root .cwp-cal button.cwp-cal__day--checkin .cwp-cal__day-price,
.cwp-root .cwp-cal button.cwp-cal__day--checkout .cwp-cal__day-price {
    color: rgba(255, 255, 255, 0.8);
}

/* ── Guest picker panel (inside popup) ──────────────────────────────────── */

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

/* Border between guest rows only (not after the last one) */
.cwp-root .cwp-sidebar__guest-row + .cwp-sidebar__guest-row {
    border-top: 1px solid var(--cwp-border-light, #ebebeb);
}

.cwp-root .cwp-sidebar__guest-row:first-of-type {
    padding-top: 0;
}

.cwp-root .cwp-sidebar__guest-row:last-of-type {
    padding-bottom: 0;
}

.cwp-root .cwp-sidebar__guest-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cwp-root .cwp-sidebar__guest-info strong {
    font-size: var(--cwp-size-body, 15px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-root .cwp-sidebar__guest-info span {
    font-size: var(--cwp-size-body-sm, 13px) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
}

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

.cwp-root .cwp-sidebar__guest-count {
    font-size: var(--cwp-size-body, 15px);
    font-weight: var(--cwp-weight-medium, 500);
    color: var(--cwp-text, #1A2B3C);
    min-width: 24px;
    text-align: center;
}

/* ── Guest +/− buttons (theme-isolated) ──────────────────────────────────── */

.cwp-root .cwp-sidebar .cwp-guest-btn {
    all: revert !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--cwp-border, #D4E0E8) !important;
    border-radius: var(--cwp-radius-full, 9999px) !important;
    background: none !important;
color: var(--cwp-text-secondary, #4A6274) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: border-color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default),
                color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-sidebar .cwp-guest-btn:hover {
    border-color: var(--cwp-text, #1A2B3C) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    background: none !important;
}

.cwp-root .cwp-sidebar .cwp-guest-btn:focus {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 2px !important;
    border-color: var(--cwp-primary, #1B6B93) !important;
    background: none !important;
}

.cwp-root .cwp-sidebar .cwp-guest-btn:disabled,
.cwp-root .cwp-sidebar .cwp-guest-btn[disabled] {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    border-color: var(--cwp-border, #D4E0E8) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
}

.cwp-root .cwp-sidebar .cwp-guest-btn svg {
    width: 12px;
    height: 12px;
}

/* ── CTA button (theme-isolated) ─────────────────────────────────────────── */

.cwp-root .cwp-sidebar__cta {
    all: revert !important;
    width: 100% !important;
    padding: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--cwp-space-sm, 8px) !important;
    background: var(--cwp-gradient, linear-gradient(to right, #E61E4D 0%, #D70466 100%)) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 9999px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    margin-top: var(--cwp-space-md, 16px) !important;
    /* No coloured glow — the button background is host-themed (often green),
       so a hardcoded Airbnb-pink shadow clashed. Flat CTA per host request. */
    box-shadow: none !important;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.cwp-root .cwp-sidebar__cta:hover {
    opacity: 0.92 !important;
    transform: scale(1.01) !important;
    box-shadow: none !important;
    background: var(--cwp-gradient, linear-gradient(to right, #E61E4D 0%, #D70466 100%)) !important;
    color: #FFFFFF !important;
}

.cwp-root .cwp-sidebar__cta:focus {
    outline: 2px solid var(--cwp-primary, #222222) !important;
    outline-offset: 2px !important;
    background: var(--cwp-gradient, linear-gradient(to right, #E61E4D 0%, #D70466 100%)) !important;
    color: #FFFFFF !important;
}

.cwp-root .cwp-sidebar__cta:disabled,
.cwp-root .cwp-sidebar__cta[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.cwp-root .cwp-sidebar__cta--book {
    /* Book Now inherits all CTA styles */
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cwp-root .cwp-sidebar__spinner svg {
    color: #FFFFFF;
}

/* ── Trust text ──────────────────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__trust {
    text-align: center !important;
    font-size: var(--cwp-size-caption, 12px) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
    margin: var(--cwp-space-sm, 8px) 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* ── Guest Form & Booking Confirmation ──────────────────────────────────── */
/* Theme-isolated styles for the guest info form (step: guest_info),
   booking summary, payment step, and confirmation (step: confirmed).
   Uses !important throughout because reset.css applies `all: revert`
   to all inputs/buttons inside .cwp-root. */

/* -- Form Header (back button + title) -- */

.cwp-root .cwp-sidebar__form-header {
    display: flex !important;
    align-items: center !important;
    gap: var(--cwp-space-sm, 8px) !important;
    margin-bottom: var(--cwp-space-lg, 24px) !important;
}

.cwp-root .cwp-sidebar__back-btn {
    all: revert !important;
    display: 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;
    color: var(--cwp-text, #1A2B3C) !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: background-color 150ms ease, border-color 150ms ease !important;
}

.cwp-root .cwp-sidebar__back-btn:hover {
    background: var(--cwp-surface-alt, #F0F7FA) !important;
    border-color: var(--cwp-text-muted, #8899A6) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

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

.cwp-root .cwp-sidebar__form-title {
    font-family: var(--cwp-font-display, var(--cwp-font-body, sans-serif)) !important;
    font-size: var(--cwp-size-h4, 18px) !important;
    font-weight: var(--cwp-weight-bold, 700) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* -- Booking Summary (dates / guests / total recap) -- */

.cwp-root .cwp-sidebar__booking-summary {
    background: var(--cwp-surface-alt, #F0F7FA) !important;
    border: 1px solid var(--cwp-border-light, #E8EEF2) !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    padding: var(--cwp-space-md, 16px) !important;
    margin-bottom: var(--cwp-space-lg, 24px) !important;
}

.cwp-root .cwp-sidebar__summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: var(--cwp-space-xs, 4px) 0 !important;
    font-size: var(--cwp-size-body-sm, 14px) !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    line-height: 1.5 !important;
}

.cwp-root .cwp-sidebar__summary-row span:last-child {
    font-weight: var(--cwp-weight-medium, 500) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-root .cwp-sidebar__summary-row--total {
    padding-top: var(--cwp-space-sm, 8px) !important;
    margin-top: var(--cwp-space-xs, 4px) !important;
    border-top: 1px solid var(--cwp-border, #D4E0E8) !important;
    font-size: var(--cwp-size-body, 16px) !important;
    font-weight: var(--cwp-weight-bold, 700) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-root .cwp-sidebar__summary-row--total span {
    color: var(--cwp-text, #1A2B3C) !important;
    font-weight: var(--cwp-weight-bold, 700) !important;
}

/* -- Guest Info Form Fields -- */

.cwp-root .cwp-sidebar__form-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--cwp-space-md, 16px) !important;
}

.cwp-root .cwp-sidebar__form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--cwp-space-md, 16px) !important;
}

.cwp-root .cwp-sidebar__form-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.cwp-root .cwp-sidebar__form-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cwp-root .cwp-required {
    color: #DC2626 !important;
    font-size: 10px !important;
}

/* -- Guest Form Inputs (theme-isolated) -- */

.cwp-root .cwp-sidebar__form-input,
.cwp-root .cwp-sidebar__form-textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid var(--cwp-border, #D4E0E8) !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    font-size: 14px !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.cwp-root .cwp-sidebar__form-input:hover,
.cwp-root .cwp-sidebar__form-textarea:hover {
    border-color: var(--cwp-text-muted, #8899A6) !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    box-shadow: none !important;
    outline: none !important;
}

.cwp-root .cwp-sidebar__form-input:focus,
.cwp-root .cwp-sidebar__form-textarea:focus {
    border-color: var(--cwp-primary, #1A3A4A) !important;
    box-shadow: 0 0 0 2px rgba(26, 58, 74, 0.08) !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    outline: none !important;
}

.cwp-root .cwp-sidebar__form-input:active,
.cwp-root .cwp-sidebar__form-textarea:active {
    border-color: var(--cwp-primary, #1A3A4A) !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    outline: none !important;
}

.cwp-root .cwp-sidebar__form-input::placeholder,
.cwp-root .cwp-sidebar__form-textarea::placeholder {
    color: var(--cwp-text-muted, #B0B0B0) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

.cwp-root .cwp-sidebar__form-textarea {
    resize: vertical !important;
    min-height: 80px !important;
    max-height: 140px !important;
}

/* -- Booking Confirmation Section -- */

.cwp-root .cwp-sidebar__confirmation {
    text-align: center !important;
    padding: var(--cwp-space-sm, 8px) 0 !important;
}

.cwp-root .cwp-sidebar__confirm-icon {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: var(--cwp-space-md, 16px) !important;
}

.cwp-root .cwp-sidebar__confirm-title {
    font-family: var(--cwp-font-display, var(--cwp-font-body, sans-serif)) !important;
    font-size: var(--cwp-size-h3, 20px) !important;
    font-weight: var(--cwp-weight-bold, 700) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    margin: 0 0 var(--cwp-space-xs, 4px) 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.cwp-root .cwp-sidebar__confirm-text {
    font-size: var(--cwp-size-body-sm, 14px) !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    margin: 0 0 var(--cwp-space-lg, 24px) 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
}

.cwp-root .cwp-sidebar__confirm-details {
    background: var(--cwp-surface-alt, #F0F7FA) !important;
    border: 1px solid var(--cwp-border-light, #E8EEF2) !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    padding: var(--cwp-space-md, 16px) !important;
    margin-bottom: var(--cwp-space-md, 16px) !important;
    text-align: left !important;
}

.cwp-root .cwp-sidebar__confirm-code {
    font-family: var(--cwp-font-mono, 'SF Mono', 'Menlo', monospace) !important;
    font-size: var(--cwp-size-body-sm, 14px) !important;
    font-weight: var(--cwp-weight-bold, 700) !important;
    color: var(--cwp-primary, #1A3A4A) !important;
    background: rgba(26, 58, 74, 0.06) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    letter-spacing: 0.05em !important;
}

/* -- Guest Form Section Container -- */

.cwp-root .cwp-sidebar__guest-form {
    padding: var(--cwp-space-xs, 4px) 0 !important;
}

/* -- Payment Section Container -- */

.cwp-root .cwp-sidebar__payment {
    padding: var(--cwp-space-xs, 4px) 0 !important;
}

/* -- Booking error (within guest form) -- */

.cwp-root .cwp-sidebar__error--booking {
    margin-bottom: var(--cwp-space-md, 16px) !important;
}

/* -- Mobile Responsive: Form Grid stacks on small screens -- */

@media (max-width: 420px) {
    .cwp-root .cwp-sidebar__form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Stripe Payment Element ──────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__stripe-element {
    min-height: 200px;
    margin: var(--cwp-space-md, 16px) 0;
    padding: var(--cwp-space-sm, 8px);
    border: 1px solid var(--cwp-border-light, #ececec);
    border-radius: var(--cwp-radius-md, 8px);
    background: var(--cwp-surface, #FFFFFF);
}

.cwp-root .cwp-sidebar__payment-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: var(--cwp-radius-md, 8px);
    padding: var(--cwp-space-sm, 8px) var(--cwp-space-md, 16px);
    margin: var(--cwp-space-sm, 8px) 0;
    font-size: var(--cwp-size-caption, 12px);
    line-height: 1.4;
}

/* ── Price breakdown ─────────────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__breakdown {
    margin-top: var(--cwp-space-lg, 24px);
}

.cwp-root .cwp-sidebar__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cwp-space-sm, 8px) 0;
    font-size: var(--cwp-size-body-sm, 13px);
    color: var(--cwp-text-secondary, #4A6274);
    border-bottom: 1px dotted var(--cwp-border-light, #E8EEF2);
}

.cwp-root .cwp-sidebar__line:last-of-type {
    border-bottom: none;
}

.cwp-root .cwp-sidebar__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--cwp-space-md, 16px);
    margin-top: var(--cwp-space-sm, 8px);
    border-top: 2px solid var(--cwp-text, #1A2B3C);
    font-size: var(--cwp-size-h3, 20px) !important;
    font-weight: var(--cwp-weight-bold, 700) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

/* ── Security Deposit (informational disclosure under the Total) ──────────── */
/* booking.css used to style this but is never enqueued, so the row fell back
   to the base .cwp-sidebar__line (center-aligned + dotted divider), wrapping
   the amount and floating it out of line. Style it here where it loads. */
.cwp-root .cwp-sidebar__deposit {
    margin-top: 6px;
}

.cwp-root .cwp-sidebar__deposit .cwp-sidebar__line {
    align-items: flex-start;       /* amount aligns to the FIRST label line   */
    border-bottom: none;           /* no stray dotted divider                 */
    padding: 0;
    gap: 12px;
}

.cwp-root .cwp-sidebar__deposit .label {
    font-size: 13px;
    line-height: 1.35;
    color: var(--cwp-text-secondary, #64748b);
}

.cwp-root .cwp-sidebar__deposit .label small {
    display: block;                /* "(not collected…)" on its own sub-line  */
    margin-top: 2px;
    font-size: 12px;
    color: var(--cwp-text-tertiary, #94a3b8);
}

.cwp-root .cwp-sidebar__deposit .value {
    font-size: 13px;
    color: var(--cwp-text-secondary, #64748b);
    white-space: nowrap;           /* keep "A$ 476.32" on ONE line            */
    flex-shrink: 0;
}

/* ── Pricing Source Diagnostic Dot ───────────────────────────────────────── */
/* Tiny dot for support/host debugging — guests won't notice.              */
/* Green = live PMS API pricing, Amber = local calculation fallback.       */

.cwp-root .cwp-sidebar__price-source-dot {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 6px !important;
    cursor: default !important;
}

.cwp-root .cwp-sidebar__price-source-dot__indicator {
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease !important;
}

.cwp-root .cwp-sidebar__price-source-dot--live .cwp-sidebar__price-source-dot__indicator {
    background-color: #22C55E !important; /* green-500 */
}

.cwp-root .cwp-sidebar__price-source-dot--local .cwp-sidebar__price-source-dot__indicator {
    background-color: #D4D4D8 !important; /* zinc-300 — subtle gray */
}

/* ── Promo Code ────────────────────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__promo {
    margin-top: var(--cwp-space-md, 16px);
}

.cwp-root .cwp-sidebar__promo-toggle {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cwp-size-body-sm, 14px);
    font-weight: 500;
    color: var(--cwp-primary, #f1913d);
    cursor: pointer;
    padding: 6px 0;
    background: transparent;
    border: none;
    font-family: inherit;
    transition: opacity 0.15s;
}

.cwp-root .cwp-sidebar__promo-toggle:hover,
.cwp-root .cwp-sidebar__promo-toggle:focus {
    opacity: 0.8;
    background: transparent;
    outline: none;
}

.cwp-root .cwp-sidebar__promo-input {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.cwp-root .cwp-sidebar__promo-input input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--cwp-border, #D4E0E8);
    border-radius: var(--cwp-radius-md, 8px);
    font-size: var(--cwp-size-body-sm, 14px);
    font-family: inherit;
    color: var(--cwp-text, #1A2B3C);
    background: var(--cwp-bg, #fff);
}

.cwp-root .cwp-sidebar__promo-input input:focus {
    outline: none;
    border-color: var(--cwp-primary, #f1913d);
    box-shadow: 0 0 0 3px rgba(241, 145, 61, 0.1);
}

.cwp-root .cwp-sidebar__promo-input button {
    all: unset;
    padding: 8px 16px;
    font-size: var(--cwp-size-body-sm, 14px);
    font-weight: 500;
    font-family: inherit;
    color: var(--cwp-primary, #f1913d);
    border: 1px solid var(--cwp-border, #D4E0E8);
    border-radius: var(--cwp-radius-md, 8px);
    cursor: pointer;
    background: transparent;
    transition: border-color 0.15s, color 0.15s;
}

.cwp-root .cwp-sidebar__promo-input button:hover {
    border-color: var(--cwp-primary, #f1913d);
}

.cwp-root .cwp-sidebar__promo-input button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cwp-root .cwp-sidebar__promo-msg {
    font-size: 12px;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: var(--cwp-radius-sm, 4px);
}

.cwp-root .cwp-sidebar__promo-msg--success {
    color: #166534;
    background: #f0fdf4;
}

.cwp-root .cwp-sidebar__promo-msg--error {
    color: #991b1b;
    background: #fef2f2;
}

/* ── Optional extras ("Add to your stay") ─────────────────────────────────────
   Guest-selectable upsells rendered inside the price breakdown, between the
   discount lines and the Total. The visual language deliberately matches the
   checkout page's `.bly-checkout__fee-item` rows and the neighbouring promo
   block, so the two booking surfaces read as one product.

   !important THROUGHOUT — non-negotiable here: reset.css phase 1 applies
   `.cwp-root input { all: revert }`, which strips the checkbox back to whatever
   the host theme paints it as (the raw black squares this block shipped with).
   Interactive elements need BOTH base AND :hover/:focus-visible forced, or the
   theme wins on hover (see css-reset.md).
   ─────────────────────────────────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__opt-fees {
    display: block !important;
    /* Separated from the price breakdown by WHITESPACE, not a divider rule — a
       line above the extras made an optional, not-yet-selected add-on read as if
       it were already part of the charged total. Extra top margin gives the
       "Add to your stay" block its own breathing room instead. */
    margin-top: var(--cwp-space-lg, 22px) !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

/* x-show companion guard — REQUIRED. Alpine hides via an INLINE
   `style="display:none"`, which loses to a `display:… !important` rule, so
   without this the block renders even when the quote carries no extras.
   Same documented trap as .cwp-sidebar__notice above. */
.cwp-root .cwp-sidebar__opt-fees[style*="display: none"],
.cwp-root .cwp-sidebar__opt-fees[style*="display:none"] {
    display: none !important;
}

.cwp-root .cwp-sidebar__opt-fees-title {
    margin: 0 0 8px !important;
    font-size: var(--cwp-size-body-sm, 13px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    line-height: 1.3 !important;
}

/* Clarifier under "Add to your stay". A host's optional PMS fee can share a
   word with a MANDATORY charge in the breakdown above (live case: required
   "Cleaning Fee" vs optional "Basic Cleaning Fee"), which reads as a double
   charge. Muted + small so it explains without competing with the heading. */
.cwp-root .cwp-sidebar__opt-fees-note {
    margin: -4px 0 10px !important;
    font-size: var(--cwp-size-body-xs, 12px) !important;
    font-weight: var(--cwp-weight-normal, 400) !important;
    color: var(--cwp-text-muted, #6B7280) !important;
    line-height: 1.4 !important;
}

.cwp-root .cwp-sidebar__opt-fee {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--cwp-border, #D4E0E8) !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    background: var(--cwp-surface, #fff) !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.cwp-root .cwp-sidebar__opt-fee:last-of-type {
    margin-bottom: 0 !important;
}

.cwp-root .cwp-sidebar__opt-fee:hover,
.cwp-root .cwp-sidebar__opt-fee:focus-within {
    border-color: var(--cwp-primary, #f1913d) !important;
    background: var(--cwp-surface-alt, #F7FAFC) !important;
}

/* The checkbox itself. `all: revert` re-establishes the native control that the
   theme repainted, then accent-color tints it with the host's brand colour. */
.cwp-root .cwp-sidebar__opt-fee-check {
    all: revert !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 16px !important;
    height: 16px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    accent-color: var(--cwp-primary, #f1913d) !important;
    cursor: pointer !important;
}

.cwp-root .cwp-sidebar__opt-fee-check:focus-visible {
    outline: 2px solid var(--cwp-primary, #f1913d) !important;
    outline-offset: 2px !important;
}

.cwp-root .cwp-sidebar__opt-fee-info {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.cwp-root .cwp-sidebar__opt-fee-name {
    display: block !important;
    font-size: var(--cwp-size-body-sm, 13px) !important;
    font-weight: var(--cwp-weight-medium, 500) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    line-height: 1.35 !important;
}

.cwp-root .cwp-sidebar__opt-fee-desc {
    display: block !important;
    margin-top: 2px !important;
    font-size: var(--cwp-size-caption, 12px) !important;
    color: var(--cwp-text-secondary, #64748b) !important;
    line-height: 1.35 !important;
}

/* x-show companion guard for the description / "×2" lines (both carry
   `display: block !important` above). */
.cwp-root .cwp-sidebar__opt-fee-desc[style*="display: none"],
.cwp-root .cwp-sidebar__opt-fee-desc[style*="display:none"] {
    display: none !important;
}

.cwp-root .cwp-sidebar__opt-fee-amount {
    flex-shrink: 0 !important;
    font-size: var(--cwp-size-body-sm, 13px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    white-space: nowrap !important;
    line-height: 1.35 !important;
}

/* Legacy price-source-badge classes removed — replaced by diagnostic dot */

/* ── Notice ──────────────────────────────────────────────────────────────────
   "Not available for these dates" card (over-max-stay, dates blocked, live
   pricing down). Amber --cwp-warning "heads up" treatment — calm, not error-red.
   THIS is the authoritative rule (highest-specificity, .cwp-root) — keep the
   amber design HERE; booking.css must not redefine it at lower specificity or it
   silently loses the cascade (the original gray-card bug, 2026-06-25).
   ──────────────────────────────────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__notice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 16px 0 !important;
    padding: 15px 16px !important;
    background: rgba(255, 169, 32, 0.07) !important;
    border: 1px solid rgba(255, 169, 32, 0.30) !important;
    border-radius: var(--cwp-radius-lg, 12px) !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05) !important;
    line-height: 1.5 !important;
    animation: cwp-notice-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* x-show guard: Alpine sets inline `display:none` to hide; a non-!important
   inline style LOSES to our `display:flex !important` above, so without this the
   card can NEVER hide (it showed over valid quotes + on load — 2026-06-25). This
   re-asserts hidden at !important when x-show has set the inline style. */
.cwp-root .cwp-sidebar__notice[style*="display: none"],
.cwp-root .cwp-sidebar__notice[style*="display:none"] {
    display: none !important;
}

@keyframes cwp-notice-in {
    from { opacity: 0; transform: translateY(6px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cwp-root .cwp-sidebar__notice-icon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--cwp-radius-full, 9999px) !important;
    background: rgba(255, 169, 32, 0.16) !important;
    color: #b56a0a !important;
    line-height: 0 !important;
    margin: 0 !important;
}

.cwp-root .cwp-sidebar__notice-icon svg {
    width: 21px !important;
    height: 21px !important;
}

.cwp-root .cwp-sidebar__notice-body {
    min-width: 0 !important;
    padding-top: 2px !important;
}

.cwp-root .cwp-sidebar__notice-title {
    margin: 0 0 4px !important;
    font-size: var(--cwp-size-body, 16px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    color: var(--cwp-text, #1f2937) !important;
}

.cwp-root .cwp-sidebar__notice-text {
    margin: 0 !important;
    font-size: var(--cwp-size-body-sm, 14px) !important;
    line-height: 1.55 !important;
    color: var(--cwp-text-secondary, #6b7280) !important;
}

/* ── Responsive — Mobile ─────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .cwp-root .cwp-sidebar {
        max-width: 100%;
        position: static;
        border-radius: var(--cwp-radius-lg, 12px);
        padding: var(--cwp-space-lg, 24px);
    }

    .cwp-root .cwp-sidebar__amount {
        font-size: 22px !important;
    }

    /* Popup fullscreen + calendar layout rules moved to ≤1023px block (Section 22) */

    /* Override popup transition for mobile (slide up instead) */
    .cwp-popup-enter-start {
        opacity: 0;
        transform: translateY(20px);
    }
    .cwp-popup-enter-end {
        opacity: 1;
        transform: translateY(0);
    }
    .cwp-popup-leave-start {
        opacity: 1;
        transform: translateY(0);
    }
    .cwp-popup-leave-end {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ==========
   SECTION 22 — PROPERTY PAGE LAYOUT
   Two-column grid layout for the single property page.
   Gallery breaks out of container (full-width), content + sidebar
   sit inside .cwp-container (max-width 1280px).
   ========== */

/* ── Property page root ─────────────────────────────────────────────────── */

.cwp-root.cwp-property-page {
    overflow-x: hidden;
}

/* Container padding on property page */
.cwp-root.cwp-property-page .cwp-container {
    padding-left: var(--cwp-container-padding, 24px) !important;
    padding-right: var(--cwp-container-padding, 24px) !important;
}

/* ── Property navigation ────────────────────────────────────────────────── */

.cwp-root .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-root .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-root .cwp-property-nav__back:hover {
    color: var(--cwp-text, #1A2B3C) !important;
}

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

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

.cwp-root .cwp-property-nav__share,
.cwp-root .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;
border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: color var(--cwp-duration-fast, 150ms) var(--cwp-ease-default) !important;
}

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

.cwp-root .cwp-property-nav__share:focus-visible,
.cwp-root .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-root .cwp-property-nav__share svg,
.cwp-root .cwp-property-nav__save svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* ── Two-column layout grid ─────────────────────────────────────────────── */

.cwp-root .cwp-property-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: clamp(24px, 4vw + 12px, 80px);
    align-items: start;
}

/* ── Main content column ────────────────────────────────────────────────── */

.cwp-root .cwp-property-layout__main {
    min-width: 0;
    padding-top: var(--cwp-space-lg, 24px);
}

/* ── Section cards — DISABLED (flat layout, no card boxes) ─────────────── */
/* Cards removed per redesign. Sections flow naturally with <hr> dividers. */

.cwp-root .cwp-section-card {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    border: none !important;
    transition: none !important;
}

/* ── Sidebar column ─────────────────────────────────────────────────────── */

.cwp-root .cwp-property-layout__sidebar {
    position: relative;
    padding-top: var(--cwp-space-lg, 24px);
    overflow: visible;
}

/* ── Dividers — thin, subtle section separators ─────────────────────────── */

.cwp-root .cwp-divider {
    border: none !important;
    /* Host requested no dividing lines between property page sections. The <hr>
       stays as a spacer but shows no rule — and with the line gone the gap was
       tightened (was 40px each side). */
    border-top: none !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Full-width dividers that span outside the container */
.cwp-root .cwp-divider--full-width {
    max-width: var(--cwp-container-width, 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--cwp-container-padding, 24px) !important;
    padding-right: var(--cwp-container-padding, 24px) !important;
}

/* ── Full-width breakout sections ───────────────────────────────────────── */

.cwp-root .cwp-full-width-section {
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Gallery full-width (breaks out of container) ───────────────────────── */

.cwp-root.cwp-property-page > .cwp-gallery,
.cwp-root.cwp-property-page > [class*="cwp-gallery"] {
    max-width: none;
}

/* ── Property footer actions ────────────────────────────────────────────── */

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

.cwp-root .cwp-property-footer__report {
    all: revert !important;
    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;
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-root .cwp-property-footer__report:hover {
    color: var(--cwp-text-secondary, #4A6274) !important;
    background: none !important;
}

.cwp-root .cwp-property-footer__report:focus {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 2px !important;
    background: none !important;
}

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

/* ── Cancellation Policy Pill ───────────────────────────────────────────── */

.cwp-root .cwp-sidebar__policy {
    display: flex;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    margin-top: var(--cwp-space-md, 16px) !important;
    background: #F0FDF4 !important;
    border: 1px solid #BBF7D0 !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    font-size: var(--cwp-size-body-sm, 13px) !important;
    font-weight: var(--cwp-weight-medium, 500) !important;
    color: #15803D !important;
    line-height: 1.4 !important;
}

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

/* ── Inline Validation Error ───────────────────────────────────────────── */

.cwp-root .cwp-sidebar__error {
    display: flex;
    align-items: center !important;
    gap: 6px !important;
    margin-top: var(--cwp-space-sm, 8px) !important;
    margin-bottom: 0 !important;
    padding: 8px 12px !important;
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    border-radius: var(--cwp-radius-sm, 6px) !important;
    font-size: var(--cwp-size-body-sm, 13px) !important;
    font-weight: var(--cwp-weight-medium, 500) !important;
    color: #DC2626 !important;
    line-height: 1.4 !important;
}

/* ── Subtotal row ──────────────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__subtotal {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: var(--cwp-space-sm, 8px) 0 !important;
    margin-top: var(--cwp-space-xs, 4px) !important;
    border-top: 1px solid var(--cwp-border, #D4E0E8) !important;
    font-size: var(--cwp-size-body-sm, 13px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

/* ── Trust indicators section ───────────────────────────────────────────── */

.cwp-root .cwp-sidebar__trust-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: var(--cwp-spacing-lg, 20px) !important;
    margin-top: var(--cwp-spacing-lg, 20px) !important;
    border-top: 1px solid var(--cwp-border, #ececec) !important;
}

.cwp-root .cwp-sidebar__trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    font-size: var(--cwp-size-body-sm, 14px) !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

.cwp-root .cwp-sidebar__trust-check {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
}

/* ── Report this listing ───────────────────────────────────────────────── */

.cwp-root .cwp-sidebar__report {
    text-align: center !important;
    margin-top: var(--cwp-space-md, 16px) !important;
}

.cwp-root .cwp-sidebar__report-link {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: var(--cwp-size-body-sm, 13px) !important;
    color: var(--cwp-text-muted, #8A9DAD) !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    transition: color 150ms ease !important;
}

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

.cwp-root .cwp-sidebar__report-link svg {
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
}

/* ── Mobile compact bar: pill & CTA theme overrides ──────────────────── */

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

.cwp-root .cwp-sidebar__compact-pill {
    display: flex !important;
    align-items: center !important;
    gap: 6px !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-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

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

.cwp-root .cwp-sidebar__compact-pill: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;
}

.cwp-root .cwp-sidebar__compact-cta {
    width: 100% !important;
    height: 48px !important;
    border-radius: 9999px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ── Amenities card grid ───────────────────────────────────────────────── */

.cwp-root .cwp-amenities__card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--cwp-spacing-sm, 8px) var(--cwp-spacing-md, 16px) !important;
}

.cwp-root .cwp-amenities__card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--cwp-spacing-sm, 8px) !important;
    padding: var(--cwp-spacing-sm, 8px) 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    text-align: left !important;
    transition: none !important;
}

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

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

.cwp-root .cwp-amenities__card-label {
    font-family: var(--cwp-font-body, sans-serif) !important;
    font-size: var(--cwp-size-body, 15px) !important;
    font-weight: var(--cwp-weight-regular, 400) !important;
    color: var(--cwp-text-secondary, #4A5568) !important;
    line-height: 1.4 !important;
}

/* Amenities show-all button — (styles consolidated in Section 18) */

/* ── Amenities card grid responsive ─────────────────────────────────────── */
@media (max-width: 640px) {
    .cwp-root .cwp-amenities__card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Amenities modal search + tabs ─────────────────────────────────────── */

.cwp-root .cwp-amenities-modal__search {
    margin-bottom: 16px !important;
}

.cwp-root .cwp-amenities-modal__tabs {
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--cwp-border, #ececec) !important;
}

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

.cwp-root .cwp-amenities-modal__search-input {
    all: revert !important;
    display: block !important;
    width: 100% !important;
    padding: 10px 14px !important;
    font-family: var(--cwp-font-body, 'DM Sans', sans-serif) !important;
    font-size: var(--cwp-size-body, 15px) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    background: var(--cwp-surface-alt, #F0F7FA) !important;
    border: 1px solid var(--cwp-border, #D4E0E8) !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    transition: border-color 150ms ease !important;
    box-sizing: border-box !important;
}

.cwp-root .cwp-amenities-modal__search-input:focus {
    outline: none !important;
    border-color: var(--cwp-primary, #1B6B93) !important;
    box-shadow: 0 0 0 3px rgba(27, 107, 147, 0.1) !important;
}

.cwp-root .cwp-amenities-modal__search-input::placeholder {
    color: var(--cwp-text-muted, #8899A6) !important;
}

.cwp-root .cwp-amenities-modal__tab {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    font-family: var(--cwp-font-body, 'DM Sans', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    background: none !important;
    border: 1px solid var(--cwp-border, #D4E0E8) !important;
    border-radius: var(--cwp-radius-full, 9999px) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease !important;
}

.cwp-root .cwp-amenities-modal__tab:hover {
    background: var(--cwp-surface-alt, #F0F7FA) !important;
    border-color: var(--cwp-primary, #1B6B93) !important;
    color: var(--cwp-primary, #1B6B93) !important;
}

.cwp-root .cwp-amenities-modal__tab--active {
    background: var(--cwp-primary, #1B6B93) !important;
    border-color: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
}

.cwp-root .cwp-amenities-modal__tab--active:hover {
    background: var(--cwp-primary-dark, #145272) !important;
    border-color: var(--cwp-primary-dark, #145272) !important;
    color: #FFFFFF !important;
}

.cwp-root .cwp-amenities-modal__empty {
    text-align: center !important;
    color: var(--cwp-text-muted, #8899A6) !important;
    font-size: var(--cwp-size-body, 15px) !important;
    padding: var(--cwp-space-xl, 32px) 0 !important;
    margin: 0 !important;
}

/* ── Similar properties carousel ────────────────────────────────────────── */

.cwp-root .cwp-similar-properties {
    padding: var(--cwp-space-2xl, 48px) 0;
    /* No border-top: the <hr class="cwp-divider--full-width"> before this section
       is already the divider. Two lines (hr + this border) read as a double rule. */
    margin-top: 0;
}

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

/* ── Responsive — Tablet / small desktop (max-width: 1023px) ────────────── */

@media (max-width: 1279px) {
    .cwp-root.cwp-property-page {
        max-width: 100%;
    }

    /* Narrower sidebar at tablet-wide so main content has room */
    .cwp-root .cwp-property-layout {
        grid-template-columns: 1fr 340px;
        gap: clamp(20px, 3vw + 8px, 48px);
    }
}

@media (max-width: 1023px) {
    .cwp-root .cwp-property-layout {
        grid-template-columns: 1fr;
        gap: clamp(20px, 3vw + 8px, 48px);
    }

    /* Prevent page content from hiding behind the fixed compact bar */
    .cwp-root.cwp-property-page {
        padding-bottom: 140px !important;
    }

    /* ── Compact bottom bar: aside becomes a fixed widget (no transform) ── */
    .cwp-root .cwp-property-layout__sidebar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        z-index: 9999 !important;
        /* NO transform — position:fixed popups work natively */
        background: var(--cwp-surface, #FFFFFF) !important;
        border-top: 1px solid var(--cwp-border, #ececec) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.10) !important;
        padding: 0 !important;
    }

    /* Strip card styles from inner .cwp-sidebar */
    .cwp-root .cwp-property-layout__sidebar .cwp-sidebar {
        max-width: none !important;
        position: relative !important;
        top: 0 !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    /* Hide desktop sidebar body on mobile — popups inside escape via position:fixed */
    .cwp-root .cwp-sidebar__body {
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    /* Popups override parent's visibility:hidden and escape overflow:hidden
       because position:fixed is relative to the viewport (no transform on aside) */
    .cwp-root .cwp-sidebar__body .cwp-sidebar__popup {
        visibility: visible !important;
    }

    /* ── PMS Widget mobile: compact bottom bar + fullscreen overlay ────── */
    /* Hide inline desktop widget on mobile */
    .cwp-pms-widget-desktop {
        display: none !important;
    }

    /* Show compact bottom bar on mobile */
    .cwp-pms-widget-mobile-bar {
        display: block !important;
    }

    /* Style the mobile bar inner layout */
    .cwp-pms-widget-mobile-bar__inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        gap: 12px !important;
    }
    .cwp-pms-widget-mobile-bar__info {
        display: flex !important;
        align-items: baseline !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }
    .cwp-pms-widget-mobile-bar__price {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--cwp-text, #1A2B3C) !important;
    }
    .cwp-pms-widget-mobile-bar__unit {
        font-size: 13px !important;
        font-weight: 400 !important;
        color: var(--cwp-text-secondary, #4A6274) !important;
    }
    .cwp-pms-widget-mobile-bar__rating {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: var(--cwp-text-secondary, #4A6274) !important;
        margin-left: 4px !important;
    }
    .cwp-pms-widget-mobile-bar__star {
        color: var(--cwp-accent, #F5A623) !important;
    }
    .cwp-pms-widget-mobile-bar__cta {
        flex-shrink: 0 !important;
        height: 44px !important;
        padding: 0 24px !important;
        border-radius: 9999px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    /* Fullscreen overlay for PMS widget — account for WP admin bar */
    .cwp-pms-widget-overlay {
        position: fixed !important;
        top: var(--wp-admin--admin-bar--height, 0px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 10000 !important;
        background: var(--cwp-surface, #FFFFFF) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* Fallback for older WP without CSS var — logged-in admin bar is 46px on desktop, 32px on mobile */
    .admin-bar .cwp-pms-widget-overlay {
        top: 46px !important;
    }
    .cwp-pms-widget-overlay__header {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--cwp-border, #E2E8F0) !important;
        position: sticky !important;
        top: 0 !important;
        background: var(--cwp-surface, #FFFFFF) !important;
        z-index: 1 !important;
    }
    .cwp-pms-widget-overlay__close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        border: none !important;
        background: var(--cwp-bg-secondary, #F1F5F9) !important;
        color: var(--cwp-text, #1A2B3C) !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }
    .cwp-pms-widget-overlay__close:hover {
        background: var(--cwp-border, #E2E8F0) !important;
    }
    .cwp-pms-widget-overlay__title {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--cwp-text, #1A2B3C) !important;
    }
    .cwp-pms-widget-overlay__body {
        padding: 16px !important;
        max-width: 480px !important;
        margin: 0 auto !important;
    }
    .cwp-pms-widget-overlay__body iframe {
        width: 100% !important;
        min-height: 80vh !important;
        border: none !important;
    }
    /* Hostfully script-based widget — stretch form to full width in overlay */
    .cwp-pms-widget-overlay__body .cwp-booking-widget {
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        position: static !important;
    }

    /* PMS mobile bar — ensure Reserve button has gradient (override CSS reset) */
    .cwp-root .cwp-pms-widget-mobile-bar__cta {
        background: var(--cwp-cta-gradient, linear-gradient(135deg, var(--cwp-primary, #1B6B93) 0%, var(--cwp-primary-dark, #145374) 100%)) !important;
        color: #fff !important;
        border: none !important;
        cursor: pointer !important;
    }
    .cwp-root .cwp-pms-widget-mobile-bar__cta:hover {
        opacity: 0.9 !important;
    }

    /* ── Fullscreen popups at ≤1023px (extended from ≤767px) ─────── */
    .cwp-root .cwp-sidebar__popup {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 20px !important;
    }

    .cwp-root .cwp-sidebar__popup--calendar {
        width: 100%;
        min-width: 0;
    }

    .cwp-root .cwp-sidebar__popup--guests {
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .cwp-root .cwp-cal__months,
    .cwp-root .cwp-sidebar__popup--calendar .cwp-calendar__months {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Show only one month on mobile so calendar fits the screen */
    .cwp-root .cwp-sidebar__popup--calendar .cwp-cal__months > .cwp-cal__month:nth-child(2) {
        display: none !important;
    }

    .cwp-root .cwp-cal__header .cwp-cal__title {
        display: none;
    }

    .cwp-root .cwp-cal__month-title {
        display: block;
    }

    .cwp-root .cwp-property-nav__actions {
        display: none;
    }
}

/* ── Responsive — Mobile (max-width: 767px) ─────────────────────────────── */

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

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

    .cwp-root .cwp-divider {
        margin: 16px 0 !important;
    }

    .cwp-root .cwp-property-layout__main {
        padding-top: var(--cwp-space-md, 16px);
    }

    .cwp-root .cwp-property-layout__sidebar {
        padding-top: 0;
    }

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

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
    .cwp-root .cwp-property-layout__sidebar,
    .cwp-root .cwp-property-nav__actions,
    .cwp-root .cwp-property-footer,
    .cwp-root .cwp-similar-properties,
    .cwp-root .cwp-carousel-btn {
        display: none !important;
    }

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

/* ==========
   23. MAP PINS, POPUPS & BIDIRECTIONAL HIGHLIGHTING
   ========== */

/**
 * 23.1 – Price Pin (Leaflet DivIcon)
 * Premium pill marker with caret pointer — inspired by Airbnb & Zillow.
 */
.cwp-map-pin {
    background: none !important;
    border: none !important;
}

.cwp-map-pin__label {
    position: relative;
    display: inline-block;
    padding: 6px 10px;
    font-family: var(--cwp-font-body, sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: #fff;
    background: var(--cwp-primary, #3489a8);
    border: 1.5px solid var(--cwp-primary, #3489a8);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Caret pointer — triangular tip below the pill. */
.cwp-map-pin__label::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--cwp-primary, #3489a8);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
    transition: border-top-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * 23.2 – Pin Hover State
 * Darker primary background, scale-up with elevated shadow.
 */
.cwp-map-pin--hover .cwp-map-pin__label,
.cwp-map-pin:hover .cwp-map-pin__label {
    background: var(--cwp-primary-dark, #2a6e88);
    color: #fff;
    border-color: var(--cwp-primary-dark, #2a6e88);
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

.cwp-map-pin--hover .cwp-map-pin__label::after,
.cwp-map-pin:hover .cwp-map-pin__label::after {
    border-top-color: var(--cwp-primary-dark, #2a6e88);
}

/**
 * 23.3 – Pin Active State (selected / card hover highlight)
 */
.cwp-map-pin--active .cwp-map-pin__label {
    background: var(--cwp-primary-dark, #2a6e88);
    color: #fff;
    border-color: var(--cwp-primary-dark, #2a6e88);
    transform: scale(1.12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);
    z-index: 1000 !important;
}

.cwp-map-pin--active .cwp-map-pin__label::after {
    border-top-color: var(--cwp-primary-dark, #2a6e88);
}

/**
 * 23.3b – Marker Cluster Icons
 * Custom cluster icons matching the price-pin design language.
 */
.cwp-cluster {
    background: none !important;
    border: none !important;
}

.cwp-cluster__label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-family: var(--cwp-font-body, sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--cwp-primary, #3489a8);
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cwp-cluster--medium .cwp-cluster__label {
    min-width: 42px;
    height: 42px;
    font-size: 14px;
}

.cwp-cluster--large .cwp-cluster__label {
    min-width: 48px;
    height: 48px;
    font-size: 15px;
}

.cwp-cluster:hover .cwp-cluster__label {
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/**
 * 23.3c – Icon Pin (SVG teardrop marker)
 */
.cwp-map-icon-pin {
    background: none !important;
    border: none !important;
    color: var(--cwp-primary, #3489a8);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease;
    cursor: pointer;
}

.cwp-map-icon-pin svg {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    transition: filter 0.2s ease;
}

.cwp-map-icon-pin--custom {
    background: none !important;
    border: none !important;
}

.cwp-map-icon-pin--custom img {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    transition: transform 0.2s ease, filter 0.2s ease;
}

.cwp-map-icon-pin--hover,
.cwp-map-icon-pin:hover {
    z-index: 10;
}

.cwp-map-icon-pin--hover svg,
.cwp-map-icon-pin:hover svg,
.cwp-map-icon-pin--hover img,
.cwp-map-icon-pin:hover img {
    transform: scale(1.15);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

.cwp-map-icon-pin--active {
    z-index: 1000 !important;
}

.cwp-map-icon-pin--active svg,
.cwp-map-icon-pin--active img {
    transform: scale(1.25);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

/**
 * 23.3d – Dot Pin (minimal circle marker)
 */
.cwp-map-dot-pin {
    background: none !important;
    border: none !important;
}

.cwp-map-dot-pin__circle {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cwp-primary, #3489a8);
    border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}

.cwp-map-dot-pin--hover .cwp-map-dot-pin__circle,
.cwp-map-dot-pin:hover .cwp-map-dot-pin__circle {
    transform: scale(1.4);
    box-shadow: 0 0 0 3px rgba(var(--cwp-primary-rgb, 52, 137, 168), 0.3), 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.cwp-map-dot-pin--active .cwp-map-dot-pin__circle {
    transform: scale(1.6);
    box-shadow: 0 0 0 5px rgba(var(--cwp-primary-rgb, 52, 137, 168), 0.35), 0 3px 10px rgba(0, 0, 0, 0.35);
    z-index: 1000 !important;
}

/**
 * 23.3c – Viewport-Sync Dimmed Markers
 * Non-visible markers get reduced opacity so visible-card markers pop.
 * Active & hovered markers override the dimmed state.
 */
.cwp-map-pin--dimmed .cwp-map-pin__label {
    opacity: 0.35;
    transition: opacity 0.3s ease;
}

.cwp-map-pin--dimmed .cwp-map-pin__label::after {
    opacity: 0.35;
    transition: opacity 0.3s ease;
}

.cwp-map-icon-pin--dimmed {
    opacity: 0.35;
    transition: opacity 0.3s ease;
}

.cwp-map-dot-pin--dimmed .cwp-map-dot-pin__circle {
    opacity: 0.35;
    transition: opacity 0.3s ease;
}

/* Active / hovered markers always full opacity, even when dimmed. */
.cwp-map-pin--dimmed.cwp-map-pin--active .cwp-map-pin__label,
.cwp-map-pin--dimmed.cwp-map-pin--hover .cwp-map-pin__label,
.cwp-map-pin--dimmed:hover .cwp-map-pin__label {
    opacity: 1;
}

.cwp-map-pin--dimmed.cwp-map-pin--active .cwp-map-pin__label::after,
.cwp-map-pin--dimmed.cwp-map-pin--hover .cwp-map-pin__label::after,
.cwp-map-pin--dimmed:hover .cwp-map-pin__label::after {
    opacity: 1;
}

.cwp-map-icon-pin--dimmed.cwp-map-icon-pin--active,
.cwp-map-icon-pin--dimmed.cwp-map-icon-pin--hover,
.cwp-map-icon-pin--dimmed:hover {
    opacity: 1;
}

.cwp-map-dot-pin--dimmed.cwp-map-dot-pin--active .cwp-map-dot-pin__circle,
.cwp-map-dot-pin--dimmed.cwp-map-dot-pin--hover .cwp-map-dot-pin__circle,
.cwp-map-dot-pin--dimmed:hover .cwp-map-dot-pin__circle {
    opacity: 1;
}

/**
 * 23.3d – Viewport-Sync "Map unlocked" Indicator
 * Small floating pill shown when the user manually pans/zooms the map,
 * temporarily pausing the auto-sync to visible cards.
 */
.cwp-viewport-sync-indicator {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: var(--cwp-surface, #fff);
    color: var(--cwp-text-secondary, #666);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    font-family: var(--cwp-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

.cwp-viewport-sync-indicator--visible {
    opacity: 1;
}

/**
 * 23.4 – Leaflet Popup Wrapper Override
 * Premium card popup — clean, borderless, layered shadow.
 */
.cwp-map-popup-wrapper .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    border: none;
    background: var(--cwp-surface, #fff);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04),
                0 4px 12px rgba(0, 0, 0, 0.08),
                0 8px 28px rgba(0, 0, 0, 0.12);
}

.cwp-map-popup-wrapper .leaflet-popup-content {
    margin: 0;
    width: 280px !important;
}

.cwp-map-popup-wrapper .leaflet-popup-tip-container {
    margin-top: -1px;
}

.cwp-map-popup-wrapper .leaflet-popup-tip {
    background: var(--cwp-surface, #fff);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    border: none;
}

.cwp-map-popup-wrapper .leaflet-popup-close-button {
    display: none;
}

/**
 * 23.5 – Popup Card
 * Image-first property preview — inspired by Airbnb & Zillow.
 */
.cwp-map-popup {
    width: 100%;
    overflow: hidden;
    background: var(--cwp-surface, #fff);
}

.cwp-map-popup-wrapper a.cwp-map-popup__link,
.cwp-map-popup-wrapper a.cwp-map-popup__link:visited,
.cwp-map-popup-wrapper a.cwp-map-popup__link:hover,
.cwp-map-popup-wrapper a.cwp-map-popup__link:focus,
.cwp-map-popup-wrapper a.cwp-map-popup__link:active,
.cwp-map-popup-wrapper .cwp-map-popup__link {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
    outline: none;
}

.cwp-map-popup-wrapper a.cwp-map-popup__link:hover .cwp-map-popup__title {
    color: var(--cwp-primary, #1a3a4a) !important;
}

/* Image wrapper with badge overlay. Hidden when empty (no featured image). */
.cwp-map-popup-wrapper .cwp-map-popup__image-wrap {
    position: relative;
    overflow: hidden;
}
.cwp-map-popup-wrapper .cwp-map-popup__image-wrap:empty {
    display: none;
}

.cwp-map-popup-wrapper .cwp-map-popup__image {
    display: block !important;
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transition: transform 0.3s ease;
}

.cwp-map-popup-wrapper .cwp-map-popup__link:hover .cwp-map-popup__image {
    transform: scale(1.03);
}

.cwp-map-popup__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    letter-spacing: 0.01em;
}

/* Content section. */
.cwp-map-popup-wrapper .cwp-map-popup__content {
    padding: 12px 14px 14px !important;
}

.cwp-map-popup__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.cwp-map-popup-wrapper .cwp-map-popup__title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--cwp-font-display, serif) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--cwp-text-primary, #1a1a1a) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s ease;
    border: none !important;
    background: none !important;
}

/* Meta row: rating · location. */
.cwp-map-popup-wrapper .cwp-map-popup__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: var(--cwp-text-secondary, #666) !important;
    line-height: 1;
    border: none !important;
}

.cwp-map-popup-wrapper .cwp-map-popup__rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--cwp-text-primary, #1a1a1a) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    flex-shrink: 0;
    text-decoration: none !important;
}

.cwp-map-popup-wrapper .cwp-map-popup__star {
    color: var(--cwp-accent, #e8a44a) !important;
    font-size: 13px !important;
    line-height: 1;
}

.cwp-map-popup-wrapper .cwp-map-popup__rating svg {
    color: var(--cwp-accent, #e8a44a) !important;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.cwp-map-popup-wrapper .cwp-map-popup__review-count {
    font-weight: 400 !important;
    color: var(--cwp-text-secondary, #666) !important;
}

.cwp-map-popup-wrapper .cwp-map-popup__location {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cwp-text-secondary, #666) !important;
    text-decoration: none !important;
}

.cwp-map-popup-wrapper .cwp-map-popup__sep {
    color: var(--cwp-text-muted, #bbb) !important;
    flex-shrink: 0;
    font-size: 8px !important;
}

/* Specs row: 3 beds · 2 baths · 6 guests. */
.cwp-map-popup-wrapper .cwp-map-popup__specs {
    margin: 6px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--cwp-text-secondary, #666) !important;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none !important;
    border: none !important;
}

/* Approximate-location disclosure.
   Rendered by connect-search.js only when the property carries a radius, i.e.
   only on sites publishing approximate areas. Deliberately quiet — it is a
   clarification of what the circle means, not a warning. */
.cwp-map-popup-wrapper .cwp-map-popup__precision {
    display: flex !important;
    align-items: flex-start;
    gap: 5px;
    margin: 8px 0 0 !important;
    padding: 7px 8px !important;
    border: none !important;
    border-radius: 6px;
    background: var(--cwp-surface-alt, #f5f7f8) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--cwp-text-secondary, #666) !important;
    text-decoration: none !important;
    /* The row wraps to two lines at this width — the specs row above it clips
       with an ellipsis, which would truncate the disclosure to nonsense. */
    white-space: normal !important;
}

.cwp-map-popup-wrapper .cwp-map-popup__precision-icon {
    flex-shrink: 0;
    color: #1B6B93 !important;   /* Matches the circle stroke on the map. */
    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* Price row. */
.cwp-map-popup-wrapper .cwp-map-popup__price {
    margin: 8px 0 0 !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid var(--cwp-border-light, #f0f0f0) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    line-height: 1.3;
}

.cwp-map-popup-wrapper .cwp-map-popup__price-value {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--cwp-text-primary, #1a1a1a) !important;
}

.cwp-map-popup-wrapper .cwp-map-popup__per-night {
    font-weight: 400 !important;
    font-size: 13px !important;
    color: var(--cwp-text-secondary, #666) !important;
}

/**
 * 23.6 – Card Highlighted State
 * Applied to .cwp-card when its corresponding map pin is hovered.
 */
.cwp-card--highlighted .cwp-card__carousel-nav {
    opacity: 1 !important;
}

/* Subtle image zoom — universal highlight for all cards (single or multi-image) */
.cwp-card--highlighted .cwp-card__carousel-image {
    transform: scale(1.03) !important;
    transition: transform 0.3s ease !important;
}

/**
 * 23.7 – Leaflet Zoom Controls (bottom-right positioning)
 */
.cwp-search-map .leaflet-control-zoom {
    border: none;
    box-shadow: var(--cwp-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    overflow: hidden;
}

.cwp-search-map .leaflet-control-zoom a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    color: var(--cwp-text-primary, #1a1a1a);
    background: var(--cwp-surface, #fff);
    border: none;
    border-bottom: 1px solid var(--cwp-border-light, #f0f0f0);
}

.cwp-search-map .leaflet-control-zoom a:last-child {
    border-bottom: none;
}

.cwp-search-map .leaflet-control-zoom a:hover {
    background: var(--cwp-surface, #f8f8f8);
    color: var(--cwp-primary, #1a3a4a);
}

/**
 * 23.8 – Leaflet attribution styling
 */
.cwp-search-map .leaflet-control-attribution {
    font-size: 10px;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.7);
    padding: 2px 6px;
    border-radius: 4px 0 0 0;
}

/* ==========
   24. INFINITE SCROLL
   ========== */

/**
 * 24.1 – YouTube-style Loading Bar
 * Thin 4px bar fixed to the top of the results panel.
 * Animates width from 0% → ~90% while loading, then jumps to 100% on complete.
 */

@keyframes cwp-loading-progress {
    0%   { transform: scaleX(0); }
    20%  { transform: scaleX(0.3); }
    60%  { transform: scaleX(0.7); }
    100% { transform: scaleX(0.9); }
}

@keyframes cwp-loading-done {
    0%   { transform: scaleX(0.9); opacity: 1; }
    40%  { transform: scaleX(1);   opacity: 1; }
    100% { transform: scaleX(1);   opacity: 0; }
}

.cwp-loading-bar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

.cwp-loading-bar__progress {
    width: 100%;
    height: 100%;
    background: var(--cwp-primary, #1a3a4a);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    will-change: transform, opacity;
}

.cwp-loading-bar--active .cwp-loading-bar__progress {
    opacity: 1;
    animation: cwp-loading-progress 2s ease-out forwards;
}

.cwp-loading-bar--done .cwp-loading-bar__progress {
    animation: cwp-loading-done 0.5s ease forwards;
}

/**
 * 24.2 – Staggered Card Fade-In
 * Cards enter with a subtle upward slide + fade, triggered per-card
 * with an 80ms stagger delay via JS (setTimeout).
 */
.cwp-card--entering {
    opacity: 0;
    transform: translateY(12px);
}

.cwp-card--visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ==========
   25. MOBILE RESPONSIVE (<768px)
   ========== */

/**
 * 25.1 – Mobile Map Overlay
 * Full-screen fixed overlay for the map on mobile devices.
 * The "Show list" button sits at top-left over the map.
 */
@media (max-width: 767px) {
    .cwp-map-close {
        display: none;
        position: fixed;
        top: max(var(--cwp-spacing-md, 16px), env(safe-area-inset-top));
        left: max(var(--cwp-spacing-md, 16px), env(safe-area-inset-left));
        height: 44px;
        padding: 0 20px;
        border: none;
        border-radius: var(--cwp-radius-full, 999px);
        background: var(--cwp-surface, #fff);
        color: var(--cwp-text-primary, #1a1a1a);
        font-family: var(--cwp-font-body, sans-serif);
        font-size: 14px;
        font-weight: 600;
        box-shadow: var(--cwp-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
        cursor: pointer;
        z-index: 101;
        align-items: center;
        justify-content: center;
        gap: 8px;
        white-space: nowrap;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

    .cwp-map-close[style*="display"] {
        display: inline-flex;
    }

    .cwp-map-close:hover {
        box-shadow: var(--cwp-shadow-xl, 0 8px 24px rgba(0, 0, 0, 0.2));
    }

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

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

/**
 * 25.2 – Mobile Map Peek Cards
 * Horizontal scrollable row of mini property cards at the bottom of the
 * full-screen map overlay. Shows one card at a time with peek of next.
 */
@media (max-width: 767px) {
    .cwp-map-peek {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 101;
        padding: 0 var(--cwp-spacing-md, 16px) max(var(--cwp-spacing-lg, 24px), env(safe-area-inset-bottom));
        display: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: var(--cwp-spacing-sm, 8px);
        background: linear-gradient(to top, rgba(0,0,0,0.06) 0%, transparent 100%);
    }

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

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

    .cwp-map-peek__card {
        flex: 0 0 85%;
        max-width: 320px;
        scroll-snap-align: center;
        background: var(--cwp-surface, #fff);
        border-radius: var(--cwp-radius-lg, 12px);
        box-shadow: var(--cwp-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
        overflow: hidden;
        display: flex;
        gap: var(--cwp-spacing-sm, 8px);
        text-decoration: none;
        color: inherit;
        transition: transform 0.15s ease;
    }

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

    .cwp-map-peek__img {
        width: 100px;
        height: 80px;
        object-fit: cover;
        flex-shrink: 0;
        border-radius: var(--cwp-radius-lg, 12px) 0 0 var(--cwp-radius-lg, 12px);
    }

    .cwp-map-peek__info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--cwp-spacing-sm, 8px) var(--cwp-spacing-sm, 8px) var(--cwp-spacing-sm, 8px) 0;
        min-width: 0;
        flex: 1;
    }

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

    .cwp-map-peek__price {
        font-size: 13px;
        font-weight: 700;
        color: var(--cwp-text-primary, #1a1a1a);
        margin-top: 2px;
    }

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

/**
 * 25.3 – Mobile Property Grid & Card Touch Targets
 * Ensure cards are full-width with larger touch targets on mobile.
 */
@media (max-width: 767px) {
    .cwp-property-grid,
    .cwp-split-view__results .cwp-property-grid {
        grid-template-columns: 1fr;
    }

    /* Larger touch targets for card interactive elements */
    .cwp-card__save {
        width: 36px;
        height: 36px;
    }

    .cwp-card__nav {
        width: 32px;
        height: 32px;
    }

    /* Ensure no horizontal overflow */
    .cwp-root.cwp-search-page {
        overflow-x: hidden;
        max-width: 100vw;
    }
}

/* ==========
   SECTION 27 — COLLECTION GRID
   Themed property grid with centered header, responsive columns,
   and "View All" footer link for homepage collection embeds.
   ========== */

/**
 * 27.1 – Section Container
 */
.cwp-root .cwp-collection {
    width: 100%;
}

/**
 * 27.2 – Header (title + description)
 */
.cwp-root .cwp-collection__header {
    text-align: center;
    margin-bottom: var(--cwp-spacing-xl, 32px);
}

.cwp-root .cwp-collection__title {
    font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif);
    font-size: var(--cwp-size-h1, 32px);
    font-weight: var(--cwp-weight-regular, 400);
    color: var(--cwp-text, #1A2B3C);
    margin: 0 0 var(--cwp-spacing-sm, 8px);
    line-height: var(--cwp-line-height-tight, 1.2);
}

.cwp-root .cwp-collection__description {
    font-size: var(--cwp-size-body, 15px);
    color: var(--cwp-text-secondary, #4A6274);
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--cwp-line-height-relaxed, 1.6);
}

/**
 * 27.3 – Property Grid (responsive columns)
 */
.cwp-root .cwp-collection__grid {
    display: grid;
    grid-template-columns: repeat(var(--cwp-collection-columns, 4), 1fr);
    gap: var(--cwp-spacing-lg, 24px);
}

/**
 * 27.4 – Footer (View All CTA)
 */
.cwp-root .cwp-collection__footer {
    text-align: center;
    margin-top: var(--cwp-spacing-xl, 32px);
}

.cwp-root .cwp-collection__view-all,
.cwp-root a.cwp-collection__view-all {
    all: revert !important;
}

.cwp-root .cwp-collection__view-all,
.cwp-root a.cwp-collection__view-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 10px 32px !important;
    background: var(--cwp-gradient, linear-gradient(135deg, #1B6B93 0%, #145272 100%)) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: opacity 150ms ease, transform 150ms ease !important;
    white-space: nowrap !important;
}

.cwp-root .cwp-collection__view-all:visited,
.cwp-root a.cwp-collection__view-all:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
    background: var(--cwp-gradient, linear-gradient(135deg, #1B6B93 0%, #145272 100%)) !important;
}

.cwp-root .cwp-collection__view-all:hover,
.cwp-root a.cwp-collection__view-all:hover {
    opacity: 0.92 !important;
    transform: scale(1.02) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.cwp-root .cwp-collection__view-all:active,
.cwp-root a.cwp-collection__view-all:active {
    transform: scale(0.97) !important;
}

.cwp-root .cwp-collection__view-all svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/**
 * 27.5 – Empty State
 */
.cwp-root .cwp-collection__empty {
    text-align: center;
    padding: var(--cwp-spacing-2xl, 48px) var(--cwp-spacing-lg, 24px);
    color: var(--cwp-text-muted, #8899A6);
    font-size: var(--cwp-size-body, 15px);
}

/**
 * 27.6 – Responsive: Tablet (2 columns)
 */
@media (max-width: 1024px) {
    .cwp-root .cwp-collection__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/**
 * 27.7 – Responsive: Mobile (1 column)
 */
@media (max-width: 767px) {
    .cwp-root .cwp-collection__title {
        font-size: var(--cwp-size-h2, 24px);
    }

    .cwp-root .cwp-collection__description {
        font-size: var(--cwp-size-body-sm, 13px);
    }

    .cwp-root .cwp-collection__grid {
        grid-template-columns: 1fr;
        gap: var(--cwp-spacing-md, 16px);
    }

    .cwp-root .cwp-collection__header {
        margin-bottom: var(--cwp-spacing-lg, 24px);
    }

    .cwp-root .cwp-collection__footer {
        margin-top: var(--cwp-spacing-lg, 24px);
    }

    .cwp-root .cwp-collection__view-all {
        width: 100%;
        justify-content: center;
    }
}

/* ==========
   SECTION 28 — ACCESSIBILITY ENHANCEMENTS
   Focus management, skip links, live regions, and keyboard navigation
   ========== */

/**
 * 28.1 – Universal Focus Ring
 *
 * All interactive elements inside .cwp-root receive a consistent
 * 2px solid focus ring on :focus-visible. Uses !important to survive
 * the all:revert reset.
 */
.cwp-root a:focus-visible,
.cwp-root select:focus-visible,
.cwp-root textarea:focus-visible,
.cwp-root [role="button"]:focus-visible,
.cwp-root [tabindex]:focus-visible {
    outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, var(--cwp-primary)) !important;
    outline-offset: var(--cwp-focus-ring-offset, 2px) !important;
}

/* Calendar day buttons */
.cwp-root .cwp-calendar__day:focus-visible,
.cwp-calendar__day:focus-visible {
    outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, var(--cwp-primary)) !important;
    outline-offset: -2px !important;
    border-radius: var(--cwp-radius-sm, 4px);
    z-index: 1;
    position: relative;
}

/* Guest counter buttons */
.cwp-root .cwp-guest-btn:focus-visible,
.cwp-root .cwp-filter-modal__counter-btn:focus-visible {
    outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, var(--cwp-primary)) !important;
    outline-offset: var(--cwp-focus-ring-offset, 2px) !important;
}

/* Sidebar clickable field areas */
.cwp-root .cwp-sidebar__field:focus-visible {
    outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color, var(--cwp-primary)) !important;
    outline-offset: var(--cwp-focus-ring-offset, 2px) !important;
    border-radius: var(--cwp-radius-md, 8px);
}

/**
 * 28.2 – Skip Link
 *
 * "Skip to content" and "Skip past map" links.
 * Visually hidden until focused.
 */
.cwp-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 99999;
    padding: 0;
    margin: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    font-family: var(--cwp-font-body);
    font-size: var(--cwp-size-body, 15px);
    font-weight: var(--cwp-weight-semibold, 600);
    text-decoration: none;
}

.cwp-skip-link:focus {
    position: fixed;
    top: var(--cwp-spacing-md, 16px);
    left: var(--cwp-spacing-md, 16px);
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    padding: var(--cwp-spacing-sm, 8px) var(--cwp-spacing-md, 16px);
    background: var(--cwp-surface, #FFFFFF);
    color: var(--cwp-primary, #1B6B93);
    border: 2px solid var(--cwp-primary, #1B6B93);
    border-radius: var(--cwp-radius-md, 8px);
    box-shadow: var(--cwp-shadow-lg);
    z-index: 99999;
}

/**
 * 28.3 – Live Region Styles
 *
 * Screen reader announcement regions — visually hidden but announced.
 */
.cwp-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/**
 * 28.4 – Calendar Keyboard Focus Indicators
 */
.cwp-root .cwp-calendar__day--focused,
.cwp-calendar__day--focused {
    box-shadow: inset 0 0 0 2px var(--cwp-primary, #1B6B93);
    border-radius: var(--cwp-radius-sm, 4px);
}

/* ==========
   SECTION 29 — THINGS TO KNOW
   3-column layout: House Rules, Safety, Cancellation Policy
   ========== */

/**
 * 29.1 – Section Container
 */
.cwp-root .cwp-things-to-know {
    padding: 0 !important;
    /* Clear separation from the "What this place offers" (amenities) section
       above — that section has no bottom margin and its "Show all" button
       otherwise butts right against the "Things to know" heading. */
    margin-top: 48px !important;
}

@media (max-width: 768px) {
    .cwp-root .cwp-things-to-know {
        margin-top: 32px !important;
    }
}

/* Base section title — consistent heading style across all sections */
.cwp-root .cwp-section-title {
    font-family: var(--cwp-font-display, 'DM Serif Display', Georgia, serif) !important;
    font-size: clamp(20px, 2vw, 26px) !important;
    font-weight: var(--cwp-weight-regular, 400) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    margin: 0 0 var(--cwp-spacing-lg, 24px) 0 !important;
    padding: 0 !important;
    line-height: var(--cwp-line-height-tight, 1.22) !important;
}

.cwp-root .cwp-things-to-know .cwp-section-title {
    margin-bottom: var(--cwp-spacing-lg, 24px) !important;
}

/**
 * 29.2 – 3-Column Grid
 */
.cwp-root .cwp-things-to-know__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--cwp-spacing-xl, 32px) !important;
}

/**
 * 29.3 – Column
 */
.cwp-root .cwp-things-to-know__column {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--cwp-spacing-sm, 8px) !important;
}

/**
 * 29.4 – Column Heading
 */
.cwp-root .cwp-things-to-know__heading {
    display: flex !important;
    align-items: center !important;
    gap: var(--cwp-spacing-sm, 8px) !important;
    font-family: var(--cwp-font-display, var(--cwp-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)) !important;
    font-size: var(--cwp-size-h4, 16px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text-primary, #1A1A2E) !important;
    margin: 0 0 var(--cwp-spacing-md, 16px) 0 !important;
    padding: 0 0 var(--cwp-spacing-sm, 8px) 0 !important;
    border-bottom: 1px solid var(--cwp-border-light, #f0f0f0) !important;
    line-height: 1.4 !important;
}

.cwp-root .cwp-things-to-know__heading svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    color: var(--cwp-primary, #1B6B93) !important;
}

/**
 * 29.5 – List Items
 */
.cwp-root .cwp-things-to-know__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--cwp-spacing-sm, 8px) !important;
}

.cwp-root .cwp-things-to-know__list li {
    position: relative !important;
    padding-left: 18px !important;
    font-size: var(--cwp-size-body, 15px) !important;
    color: var(--cwp-text-secondary, #4A5568) !important;
    line-height: 1.5 !important;
}

.cwp-root .cwp-things-to-know__list li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 9px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--cwp-primary, #1B6B93) !important;
    opacity: 0.5 !important;
}

/**
 * 29.6 – Show More Button
 */
.cwp-root .cwp-things-to-know__more {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    /* The parent column is display:flex/column, which stretches children to full
       width. Keep the toggle a compact, left-aligned pill (matches the review
       Show more / Show all buttons) instead of a full-width bar. */
    align-self: flex-start !important;
    width: auto !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: var(--cwp-spacing-sm, 8px) !important;
    padding: 7px 14px !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.82) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.45) !important;
    border-radius: 9999px !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    color: var(--cwp-text, #1A2B3C) !important;
    cursor: pointer !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.10),
        0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                background 0.18s ease !important;
    white-space: nowrap !important;
}

/* Icon + label to match the review "Show more" / "Show all" pill buttons. The
   chevron rotates when the section is expanded. The label span keeps the words
   as one flex item so the button's gap can't split them (same fix as show-all). */
/* Compact, left-aligned pill that matches the other pill buttons (light glass,
   green-disc icon, dark text — from the base rule + reset.css). The flex column
   stretches children to full width, and reset.css's `all: unset` (which loads
   AFTER this file) re-stretches it too — so these rules add `.cwp-things-to-know`
   to reach (0,3,0) specificity and win over reset regardless of load order.
   Colours are intentionally NOT set here so the shared pill look applies. */
.cwp-root .cwp-things-to-know .cwp-things-to-know__more {
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
}
.cwp-root .cwp-things-to-know .cwp-things-to-know__more .cwp-things-to-know__more-label {
    display: inline !important;
}
/* Chevron rotates when the section is expanded. */
.cwp-root .cwp-things-to-know .cwp-things-to-know__more .cwp-btn-pill-icon {
    transition: transform 0.2s ease !important;
}
.cwp-root .cwp-things-to-know .cwp-things-to-know__more[aria-expanded="true"] .cwp-btn-pill-icon {
    transform: rotate(180deg) !important;
}

.cwp-root .cwp-things-to-know__more:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.14),
        0 0 0 0.5px rgba(0, 0, 0, 0.08) !important;
    color: var(--cwp-text, #1A2B3C) !important;
}

.cwp-root .cwp-things-to-know__more:active {
    transform: translateY(0) scale(0.98) !important;
    transition-duration: 0.08s !important;
}

.cwp-root .cwp-things-to-know__more:focus-visible {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 3px !important;
}

/**
 * 29.6b – "Show Additional rules" modal trigger (house rules column)
 */
.cwp-root .cwp-things-to-know__rules-modal-trigger {
    list-style: none !important;
}
.cwp-root .cwp-things-to-know__rules-modal-trigger::before {
    display: none !important;
}
.cwp-root .cwp-things-to-know__link {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline !important;
    cursor: pointer !important;
    background: transparent !important;
    color: var(--cwp-primary, #1B6B93) !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    font-size: var(--cwp-size-body, 15px) !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
/* reset.css's `.cwp-root button:hover/:focus/:focus-visible` sets
   `background-color: revert !important`, which falls back to the browser's
   default grey button face since this rule previously never declared
   background-color on hover/focus. Both pseudo-states need the explicit
   override — the base rule alone isn't enough (css-reset.md: BOTH base AND
   hover/focus need !important, or the theme/UA default wins on hover). */
.cwp-root .cwp-things-to-know__link:hover,
.cwp-root .cwp-things-to-know__link:focus,
.cwp-root .cwp-things-to-know__link:active,
.cwp-root .cwp-things-to-know__link:focus-visible {
    background: transparent !important;
    color: var(--cwp-primary, #1B6B93) !important;
    text-decoration: none !important;
}
.cwp-root .cwp-things-to-know__link:focus-visible {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 3px !important;
}

/**
 * 29.6c – "Additional rules" modal body typography
 * `.bly-pf__house-rules` otherwise only has styling in wp-admin
 * (admin/css/admin.css); this scopes it for the frontend modal.
 */
.cwp-root .cwp-modal .bly-pf__house-rules {
    font-size: var(--cwp-size-body, 15px) !important;
    line-height: 1.65 !important;
    color: var(--cwp-text-secondary, #4A5568) !important;
}
.cwp-root .cwp-modal .bly-pf__house-rules p {
    margin: 0 0 12px !important;
}
.cwp-root .cwp-modal .bly-pf__house-rules p:last-child {
    margin-bottom: 0 !important;
}
.cwp-root .cwp-modal .bly-pf__house-rules ul,
.cwp-root .cwp-modal .bly-pf__house-rules ol {
    margin: 0 0 12px !important;
    padding-left: 20px !important;
}

/**
 * 29.7 – Responsive
 */
@media (max-width: 1024px) {
    .cwp-root .cwp-things-to-know__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .cwp-root .cwp-things-to-know__grid {
        grid-template-columns: 1fr !important;
        gap: var(--cwp-spacing-lg, 24px) !important;
    }
}


/* ==========
   SECTION 30 — WHERE YOU'LL SLEEP (Bedroom Cards)
   Clean flat cards — Airbnb-inspired, no shadow, no hover lift
   ========== */

/**
 * 30.1 – Section Container
 */
.cwp-root .cwp-bedrooms {
    padding: 0 !important;
    margin-top: 40px !important;
    margin-bottom: 8px !important;
}

.cwp-root .cwp-bedrooms .cwp-section-title {
    margin-bottom: 20px !important;
}

/**
 * 30.2 – Scroll Track
 */
.cwp-root .cwp-bedrooms__track {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

/**
 * 30.3 – Bedroom Card — flat, left-aligned
 */
.cwp-root .cwp-bedrooms__card {
    flex: 0 0 180px !important;
    scroll-snap-align: start !important;
    border: 1px solid var(--cwp-border-light, #ebebeb) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    text-align: left !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color 0.2s ease !important;
}

.cwp-root .cwp-bedrooms__card:hover {
    border-color: var(--cwp-text-muted, #8899A6) !important;
    box-shadow: none !important;
    transform: none !important;
}

/**
 * 30.4 – Bedroom Icon Wrapper
 */
.cwp-root .cwp-bedrooms__icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
}

.cwp-root .cwp-bedrooms__icon {
    width: 24px !important;
    height: 24px !important;
    color: var(--cwp-text-primary, #1A1A2E) !important;
    opacity: 1 !important;
}

/**
 * 30.5 – Bedroom Label & Detail
 */
.cwp-root .cwp-bedrooms__label {
    font-family: var(--cwp-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--cwp-text-primary, #1A1A2E) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.cwp-root .cwp-bedrooms__detail {
    font-size: 13px !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}


/* ==========
   SECTION 31 — HOST SECTION HIGH-SPECIFICITY OVERRIDES
   Ensures host styles survive theme resets — matches the new 2-column layout
   ========== */

/**
 * 31.1 – Host Grid Override
 */
.cwp-root .cwp-host {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.cwp-root .cwp-host__grid {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 48px !important;
    align-items: start !important;
}

/**
 * 31.2 – Profile Card Override
 */
.cwp-root .cwp-host__profile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 32px 24px !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    border: 1px solid var(--cwp-border-light, #ececec) !important;
    border-radius: var(--cwp-radius-xl, 16px) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06) !important;
}

/**
 * 31.3 – Avatar Override (104px)
 */
.cwp-root .cwp-host__avatar {
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #2c2e33 0%, #4a4c52 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin-bottom: 16px !important;
}

.cwp-root .cwp-host__initial {
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
}

.cwp-root .cwp-host__verified {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    background: var(--cwp-success, #10B981) !important;
    border-radius: 50% !important;
    border: 3px solid #FFFFFF !important;
}

/**
 * 31.4 – Host Name + Role
 */
.cwp-root .cwp-host__name {
    font-size: 28px !important;
    font-weight: 400 !important;
    color: var(--cwp-text, #2c2e33) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}

.cwp-root .cwp-host__role {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 14px !important;
    color: var(--cwp-text-secondary, #6a6a6a) !important;
    margin: 0 0 20px 0 !important;
}

/**
 * 31.5 – Stats Grid Override
 */
.cwp-root .cwp-host__stats-grid {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--cwp-border-light, #ececec) !important;
}

.cwp-root .cwp-host__stats-divider {
    width: 1px !important;
    height: 40px !important;
    background: var(--cwp-border-light, #ececec) !important;
}

.cwp-root .cwp-host__stat-box {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
}

.cwp-root .cwp-host__stat-number {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--cwp-text, #2c2e33) !important;
}

.cwp-root .cwp-host__stat-label {
    font-size: 12px !important;
    color: var(--cwp-text-secondary, #6a6a6a) !important;
}

/**
 * 31.7 – Detail Items Override
 */
.cwp-root .cwp-host__detail-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

.cwp-root .cwp-host__detail-item > svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    color: var(--cwp-text, #2c2e33) !important;
}

.cwp-root .cwp-host__detail-item strong {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--cwp-text, #2c2e33) !important;
}

.cwp-root .cwp-host__detail-item p {
    font-size: 14px !important;
    color: var(--cwp-text-secondary, #6a6a6a) !important;
    margin: 0 !important;
}

/**
 * 31.8 – Host Responsive Overrides
 */
@media (max-width: 960px) {
    .cwp-root .cwp-host__grid {
        grid-template-columns: 260px 1fr !important;
        gap: 32px !important;
    }
}

@media (max-width: 767px) {
    .cwp-root .cwp-host__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .cwp-root .cwp-host__profile {
        max-width: 320px !important;
        margin: 0 auto !important;
    }

}


/* ==========
   SECTION 32 — SKELETON SHIMMER ANIMATION
   Shared shimmer for all skeleton placeholders
   ========== */

/**
 * 32.1 – Base Skeleton Element
 */
.cwp-root .cwp-skeleton {
    background: linear-gradient(
        90deg,
        var(--cwp-skeleton-base, #e8ecef) 25%,
        var(--cwp-skeleton-highlight, #d5dbe0) 50%,
        var(--cwp-skeleton-base, #e8ecef) 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: cwp-shimmer 1.5s ease-in-out infinite !important;
    border-radius: var(--cwp-radius-sm, 4px) !important;
}

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

.cwp-root .cwp-skeleton--title {
    height: 24px !important;
    margin-bottom: var(--cwp-spacing-md, 16px) !important;
}

.cwp-root .cwp-skeleton--text {
    height: 16px !important;
    margin-bottom: var(--cwp-spacing-xs, 4px) !important;
}

.cwp-root .cwp-skeleton--avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/**
 * 32.2 – Skeleton: Amenities Grid
 */
.cwp-root .cwp-skeleton-amenities__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--cwp-spacing-sm, 8px) var(--cwp-spacing-md, 16px) !important;
}

.cwp-root .cwp-skeleton-amenities__item {
    display: flex !important;
    align-items: center !important;
    gap: var(--cwp-spacing-sm, 8px) !important;
    padding: var(--cwp-spacing-xs, 4px) 0 !important;
}

/**
 * 32.3 – Skeleton: Reviews (Simplified)
 */
.cwp-root .cwp-skeleton-reviews__list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 var(--cwp-spacing-xl, 40px) !important;
}

.cwp-root .cwp-skeleton-reviews__card {
    padding: var(--cwp-spacing-lg, 24px) 0 !important;
    border-bottom: 1px solid var(--cwp-border-light, #F1F5F9) !important;
}

.cwp-root .cwp-skeleton-reviews__card:last-child {
    border-bottom: none !important;
}

.cwp-root .cwp-skeleton-reviews__card-header {
    display: flex !important;
    align-items: center !important;
    gap: var(--cwp-spacing-sm, 12px) !important;
    margin-bottom: var(--cwp-spacing-sm, 8px) !important;
}

.cwp-root .cwp-skeleton-reviews__card-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.cwp-root .cwp-skeleton-reviews__rating-row {
    display: flex !important;
    align-items: center !important;
    gap: var(--cwp-spacing-sm, 8px) !important;
    margin-bottom: var(--cwp-spacing-sm, 8px) !important;
}

.cwp-root .cwp-skeleton-reviews__text {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--cwp-spacing-xs, 4px) !important;
}

/**
 * 32.4 – Skeleton: Calendar Months
 */
.cwp-root .cwp-skeleton-calendar__months {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--cwp-spacing-lg, 24px) !important;
    margin-top: var(--cwp-spacing-md, 16px) !important;
}

.cwp-root .cwp-skeleton-calendar__grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
}

/**
 * 32.5 – Skeleton: Similar Properties
 */
.cwp-root .cwp-skeleton-similar__grid {
    display: flex !important;
    gap: var(--cwp-spacing-md, 16px) !important;
    overflow: hidden !important;
}

.cwp-root .cwp-skeleton-similar__card {
    flex: 0 0 calc(33.333% - 11px) !important;
    min-width: 200px !important;
    border: 1px solid var(--cwp-border-light, #F1F5F9) !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    overflow: hidden !important;
}

.cwp-root .cwp-skeleton--image {
    width: 100% !important;
    height: 180px !important;
}

.cwp-root .cwp-skeleton--button {
    width: 120px !important;
    height: 40px !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    margin-top: var(--cwp-spacing-md, 16px) !important;
}

/**
 * 32.6 – Skeleton: Host
 */
.cwp-root .cwp-skeleton-host__header {
    display: flex !important;
    align-items: center !important;
    gap: var(--cwp-spacing-md, 16px) !important;
    margin-bottom: var(--cwp-spacing-md, 16px) !important;
}

.cwp-root .cwp-skeleton-host__stats {
    display: flex !important;
    gap: var(--cwp-spacing-md, 16px) !important;
    margin-bottom: var(--cwp-spacing-md, 16px) !important;
}

/**
 * 32.7 – Responsive Skeletons
 */
@media (max-width: 767px) {
    .cwp-root .cwp-skeleton-amenities__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cwp-root .cwp-skeleton-reviews__list {
        grid-template-columns: 1fr !important;
    }

    .cwp-root .cwp-skeleton-calendar__months {
        grid-template-columns: 1fr !important;
    }

    .cwp-root .cwp-skeleton-similar__card {
        flex: 0 0 85% !important;
    }
}


/* ==========
   SECTION 33 — REVIEWS SECTION ENHANCED (v2.0)
   Theme-protected overrides for redesigned reviews section:
   score hero, category bars with icons, topic chips, review cards,
   host responses.
   ========== */

.cwp-root .cwp-reviews {
    padding: 0 !important;
    margin-top: 8px !important;
}

/**
 * 33.1 – Reviews Heading (title + star rating + count)
 */
.cwp-root .cwp-reviews__heading {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: var(--cwp-spacing-lg, 24px) !important;
}

.cwp-root .cwp-reviews__heading-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cwp-root .cwp-reviews__heading-star {
    color: #FFD700 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.cwp-root .cwp-reviews__heading-rating {
    font-size: var(--cwp-size-body, 15px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text-primary, #1A1A2E) !important;
}

.cwp-root .cwp-reviews__heading-dot {
    color: var(--cwp-text-muted, #8899A6) !important;
}

.cwp-root .cwp-reviews__heading-count {
    font-size: var(--cwp-size-body-sm, 13px) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
}

/**
 * 33.3 – Review Cards List (2-col, border-separated)
 */
.cwp-root .cwp-reviews__list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 var(--cwp-spacing-xl, 40px) !important;
}

/**
 * 33.4 – Individual Review Card
 */
.cwp-root .cwp-reviews__card {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--cwp-spacing-sm, 10px) !important;
    padding: var(--cwp-spacing-lg, 24px) 0 !important;
    /* Host requested no divider line under individual reviews. (This later rule
       was overriding the earlier none.) */
    border-bottom: none !important;
}

.cwp-root .cwp-reviews__card:last-child {
    border-bottom: none !important;
}

.cwp-root .cwp-reviews__card-header {
    display: flex !important;
    align-items: center !important;
    gap: var(--cwp-spacing-sm, 12px) !important;
}

.cwp-root .cwp-reviews__avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    background: var(--cwp-primary, #1B6B93) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    font-weight: var(--cwp-weight-bold, 700) !important;
    color: #FFFFFF !important;
}

.cwp-root .cwp-reviews__avatar--img {
    object-fit: cover !important;
}

.cwp-root .cwp-reviews__meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.cwp-root .cwp-reviews__author-line {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.cwp-root .cwp-reviews__author {
    font-size: var(--cwp-size-body, 15px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text-primary, #1A1A2E) !important;
}

.cwp-root .cwp-reviews__verified {
    display: inline-flex !important;
    color: var(--cwp-primary, #1B6B93) !important;
}

.cwp-root .cwp-reviews__verified i {
    font-size: 13px !important;
}

.cwp-root .cwp-reviews__reviewer-location {
    font-size: var(--cwp-size-body-sm, 13px) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.cwp-root .cwp-reviews__reviewer-location i {
    font-size: 10px !important;
}

.cwp-root .cwp-reviews__rating-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.cwp-root .cwp-reviews__stars {
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
    color: #FFD700 !important;
    line-height: 1 !important;
}

.cwp-root .cwp-reviews__stars i {
    font-size: 11px !important;
}

.cwp-root .cwp-reviews__date {
    font-size: var(--cwp-size-body-sm, 13px) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
}

.cwp-root .cwp-reviews__channel {
    font-size: var(--cwp-size-body-sm, 13px) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
}

/**
 * 33.5 – Review Text + Clamping
 */
.cwp-root .cwp-reviews__text {
    font-size: var(--cwp-size-body, 15px) !important;
    color: var(--cwp-text-secondary, #4A5568) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.cwp-root .cwp-reviews__text--clamped {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* (Removed — pill styles defined in Section 15 & reset.css) */

/**
 * 33.6 – Host Response
 */
.cwp-root .cwp-reviews__host-response {
    background: var(--cwp-surface-alt, #F0F7FA) !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    padding: var(--cwp-spacing-sm, 12px) var(--cwp-spacing-md, 16px) !important;
    margin-top: var(--cwp-spacing-xs, 4px) !important;
}

.cwp-root .cwp-reviews__host-response-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}

.cwp-root .cwp-reviews__host-response-header i {
    font-size: 12px !important;
    color: var(--cwp-text-muted, #8899A6) !important;
}

.cwp-root .cwp-reviews__host-response-header strong {
    font-size: var(--cwp-size-body-sm, 13px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text-primary, #1A1A2E) !important;
}

.cwp-root .cwp-reviews__host-response p {
    font-size: var(--cwp-size-body-sm, 13px) !important;
    color: var(--cwp-text-secondary, #4A5568) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}


/**
 * 33.9 – Reviews Responsive
 */
@media (max-width: 767px) {
    .cwp-root .cwp-reviews__list {
        grid-template-columns: 1fr !important;
    }
}


/* ==========
   SECTION 34 — ENHANCED LOCATION SECTION
   Map + neighborhood info, get directions link
   ========== */

/**
 * 34.1 – Location Map Container
 */
.cwp-root .cwp-location__map {
    width: 100% !important;
    height: 400px !important;
    border-radius: var(--cwp-radius-lg, 12px) !important;
    overflow: hidden !important;
    margin-bottom: var(--cwp-spacing-md, 16px) !important;
    background: var(--cwp-border-light, #F1F5F9) !important;
}

/**
 * 34.2 – Location Info
 */
.cwp-root .cwp-location__info {
    margin-bottom: var(--cwp-spacing-md, 16px) !important;
}

.cwp-root .cwp-location__headline {
    font-family: var(--cwp-font-display, var(--cwp-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)) !important;
    font-size: var(--cwp-size-h4, 16px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text-primary, #1A1A2E) !important;
    margin: 0 0 var(--cwp-spacing-xs, 4px) 0 !important;
}

.cwp-root .cwp-location__description {
    font-size: var(--cwp-size-body, 15px) !important;
    color: var(--cwp-text-secondary, #4A5568) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/**
 * 34.3 – Location Highlights
 */
.cwp-root .cwp-location__highlights {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--cwp-spacing-sm, 8px) !important;
    margin-bottom: var(--cwp-spacing-md, 16px) !important;
}

.cwp-root .cwp-location__highlight {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--cwp-spacing-sm, 8px) !important;
}

.cwp-root .cwp-location__highlight-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    color: var(--cwp-text-secondary, #4A5568) !important;
    margin-top: 2px !important;
}

.cwp-root .cwp-location__highlight-text {
    font-size: var(--cwp-size-body, 15px) !important;
    color: var(--cwp-text-secondary, #4A5568) !important;
    line-height: 1.5 !important;
}

.cwp-root .cwp-location__highlight-text strong {
    color: var(--cwp-text-primary, #1A1A2E) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
}

/**
 * 34.4 – Privacy Note
 */
.cwp-root .cwp-location__privacy-note {
    font-size: var(--cwp-size-body-sm, 13px) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
    font-style: italic !important;
    margin: 0 !important;
}

/**
 * 34.4b – Location Footer (privacy note + directions)
 */
.cwp-root .cwp-location__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: var(--cwp-spacing-sm, 8px) !important;
}

/**
 * 34.5 – Get Directions Link
 */
.cwp-root .cwp-location__directions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: var(--cwp-spacing-sm, 8px) !important;
    font-size: var(--cwp-size-body-sm, 13px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-primary, #1B6B93) !important;
    text-decoration: none !important;
}

.cwp-root .cwp-location__directions:hover {
    text-decoration: underline !important;
}

.cwp-root .cwp-location__directions svg {
    width: 14px !important;
    height: 14px !important;
}

/**
 * 34.6 – Location Responsive
 */
@media (max-width: 767px) {
    .cwp-root .cwp-location__map {
        height: 280px !important;
        border-radius: var(--cwp-radius-md, 8px) !important;
    }
}


/* ==========
   SECTION 35 — SIMILAR PROPERTIES CAROUSEL
   Horizontal scrollable card carousel
   ========== */

/**
 * 35.1 – Section Container
 */
.cwp-root .cwp-similar-properties {
    padding: var(--cwp-spacing-xl, 32px) 0 !important;
}

.cwp-root .cwp-similar-properties h2 {
    font-family: var(--cwp-font-display, var(--cwp-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)) !important;
    font-size: var(--cwp-size-h2, 24px) !important;
    font-weight: var(--cwp-weight-semibold, 600) !important;
    color: var(--cwp-text-primary, #1A1A2E) !important;
    margin: 0 0 var(--cwp-spacing-lg, 24px) 0 !important;
}

/**
 * 35.2 – Carousel Container
 */
.cwp-root .cwp-property-carousel {
    position: relative !important;
}

/**
 * 35.3 – Carousel Track
 */
.cwp-root .cwp-carousel-track {
    display: flex !important;
    gap: var(--cwp-spacing-md, 16px) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-behavior: smooth !important;
    padding: 4px 0 !important;
}

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

.cwp-root .cwp-carousel-track > * {
    flex: 0 0 calc(33.333% - 11px) !important;
    scroll-snap-align: start !important;
    min-width: 260px !important;
}

/**
 * 35.4 – Carousel Nav Buttons
 */
.cwp-root .cwp-carousel-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    border: 1px solid var(--cwp-border, #E2E8F0) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 2 !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.cwp-root .cwp-carousel-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-50%) scale(1.05) !important;
}

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

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

.cwp-root .cwp-carousel-btn svg {
    width: 16px !important;
    height: 16px !important;
    color: var(--cwp-text-primary, #1A1A2E) !important;
}

/**
 * 35.5 – Carousel Responsive
 */
@media (max-width: 1024px) {
    .cwp-root .cwp-carousel-track > * {
        flex: 0 0 calc(50% - 8px) !important;
    }
}

@media (max-width: 767px) {
    .cwp-root .cwp-carousel-track > * {
        flex: 0 0 85% !important;
        min-width: 240px !important;
    }

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


/* ==========
   SECTION 40 — MICRO-INTERACTIONS & ANIMATIONS
   Premium hover effects, scroll reveals, and transition polish
   ========== */

/**
 * 40.1 – CTA Button Hover Lift (Reserve, Check Availability)
 * Scale up slightly + shadow lift on hover, press down on active
 */
.cwp-root .cwp-btn-primary:hover,
.cwp-root .cwp-sticky-nav__cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(241, 145, 61, 0.35) !important;
    opacity: 1 !important;
}

.cwp-root .cwp-btn-primary:active,
.cwp-root .cwp-sticky-nav__cta:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 6px rgba(241, 145, 61, 0.2) !important;
}

/**
 * 40.2 – Action Buttons (Share, Save, Print)
 * Radial background fill from center on hover
 */
.cwp-root .cwp-action-btn {
    position: relative !important;
    overflow: hidden !important;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.cwp-root .cwp-action-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.cwp-root .cwp-action-btn:active {
    transform: translateY(0) scale(0.95) !important;
}

/**
 * 40.3 – Show More / Show Less Toggle
 * Glassmorphism pill — lift + shadow on hover (matches "Show all" amenities)
 */
.cwp-root .cwp-description__toggle,
.cwp-root .cwp-reviews__read-more,
.cwp-root .cwp-things-to-know__more {
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Remove any ::after pseudo-elements (no underline for pill buttons) */
.cwp-root .cwp-description__toggle::after,
.cwp-root .cwp-reviews__read-more::after,
.cwp-root .cwp-things-to-know__more::after {
    content: none !important;
}

.cwp-root .cwp-description__toggle:hover,
.cwp-root .cwp-reviews__read-more:hover,
.cwp-root .cwp-things-to-know__more:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.cwp-root .cwp-description__toggle:active,
.cwp-root .cwp-reviews__read-more:active,
.cwp-root .cwp-things-to-know__more:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Chevron rotation animation — smoother easing */
.cwp-root .cwp-description__toggle-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: var(--cwp-primary, #1B6B93) !important;
}

.cwp-root .cwp-description__toggle-icon--up {
    transform: rotate(180deg) !important;
}

/**
 * 40.4 – Description expand/collapse
 *
 * 1.2.1 — removed the `max-height: 200em` cap on --expanded that was
 * silently re-applying after my section-15 fix. On long descriptions
 * (Lake Eden / Sandy Toes / any Hostaway listing with 300+ lines)
 * the body's container stopped growing at 200em while `overflow: visible`
 * let the text spill out, causing the toggle button + "What this place
 * offers" section to overlap with the trailing copy.
 *
 * Also removed the `transition: max-height` on the unclamped base body.
 * The transition only makes sense for clamped→expanded animation, and
 * with `max-height: none` on expanded the animation has nothing to
 * interpolate to anyway. Section 15's `--clamped` rule keeps the
 * collapse-time transition where it belongs.
 */
.cwp-root .cwp-description__body--clamped {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cwp-root .cwp-description__body--expanded {
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/**
 * 40.5 – Bedroom Cards Scroll Reveal (no hover lift/shadow)
 */
.cwp-root .cwp-bedrooms__card {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s ease !important;
}

.cwp-root .cwp-bedrooms__card.cwp-animate-in {
    opacity: 1;
    transform: translateY(0) !important;
}

.cwp-root .cwp-bedrooms__card.cwp-animate-in:nth-child(2) {
    transition-delay: 0.06s;
}

.cwp-root .cwp-bedrooms__card.cwp-animate-in:nth-child(3) {
    transition-delay: 0.12s;
}

.cwp-root .cwp-bedrooms__card.cwp-animate-in:nth-child(4) {
    transition-delay: 0.18s;
}

/**
 * 40.6 – Review Topic Chips
 * Scale on hover, smooth background fill on active
 */
.cwp-root .cwp-reviews__topic-chip {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

.cwp-root .cwp-reviews__topic-chip:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.cwp-root .cwp-reviews__topic-chip:active {
    transform: scale(0.97) !important;
}

/**
 * 40.7 – Show All Amenities Button
 * Background fills on hover with smooth transition
 */
.cwp-root .cwp-amenities__show-all {
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.cwp-root .cwp-amenities__show-all:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.cwp-root .cwp-amenities__show-all:active {
    transform: translateY(0) scale(0.98) !important;
}

/**
 * 40.8 – Review Cards Scroll Reveal (stagger fade-in)
 * Cards start invisible and animate in when scrolled into view.
 * JavaScript adds .cwp-animate-in class via IntersectionObserver.
 *
 * NOTE: Reviews are lazy-loaded (Phase 3) — cards don't exist at DOMContentLoaded.
 * The JS listener for `cwp:section-loaded` re-runs initScrollReveal() when the
 * reviews section is injected. The .cwp-lazy-section--loaded fallback ensures
 * cards are visible even if the scroll-reveal JS fails to re-run.
 */
.cwp-root .cwp-reviews__list > .cwp-reviews__card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cwp-root .cwp-reviews__list > .cwp-reviews__card.cwp-animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Fallback: if lazy section loaded but scroll-reveal didn't fire, show cards */
.cwp-lazy-section--loaded .cwp-reviews__list > .cwp-reviews__card {
    animation: cwp-card-fallback-show 0.6s ease forwards;
    animation-delay: 1s;
}

.cwp-lazy-section--loaded .cwp-reviews__list > .cwp-reviews__card.cwp-animate-in {
    animation: none;
}

@keyframes cwp-card-fallback-show {
    to { opacity: 1; transform: translateY(0); }
}

/* Stagger delays for review cards */
.cwp-root .cwp-reviews__list > .cwp-reviews__card:nth-child(1) { transition-delay: 0s; }
.cwp-root .cwp-reviews__list > .cwp-reviews__card:nth-child(2) { transition-delay: 0.1s; }
.cwp-root .cwp-reviews__list > .cwp-reviews__card:nth-child(3) { transition-delay: 0.2s; }
.cwp-root .cwp-reviews__list > .cwp-reviews__card:nth-child(4) { transition-delay: 0.3s; }

/**
 * 40.9 – Full-Width Section
 * No opacity animation — these sections contain lazy-loaded content
 * that has its own skeleton → content transition. Applying opacity:0
 * here blocks the lazy loader's IntersectionObserver.
 */
.cwp-root .cwp-full-width-section {
    opacity: 1;
}

/**
 * 40.10 – Gallery Image Hover Zoom
 */
.cwp-root .cwp-gallery__cell {
    overflow: hidden !important;
}

.cwp-root .cwp-gallery__cell .cwp-gallery__image {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cwp-root .cwp-gallery__cell:hover .cwp-gallery__image {
    transform: scale(1.04) !important;
}

/**
 * 40.11 – Sticky Nav Slide-In
 */
.cwp-root .cwp-sticky-nav--enter {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.cwp-root .cwp-sticky-nav--enter-start {
    transform: translateY(-100%);
    opacity: 0;
}
.cwp-root .cwp-sticky-nav--enter-end {
    transform: translateY(0);
    opacity: 1;
}
.cwp-root .cwp-sticky-nav--leave {
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.cwp-root .cwp-sticky-nav--leave-start {
    transform: translateY(0);
    opacity: 1;
}
.cwp-root .cwp-sticky-nav--leave-end {
    transform: translateY(-100%);
    opacity: 0;
}

/**
 * 40.13 – Gallery Show All Button — hover/active handled in Section 11 above.
 */


/**
 * 41 – Inline Property Stats (Plum Guide style)
 * Theme protection for the new inline stats row in property header.
 */
.cwp-root .cwp-property-stats {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-family: var(--cwp-font-body) !important;
    font-size: 15px !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    padding: 0 !important;
    margin: 8px 0 0 !important;
    list-style: none !important;
    border: none !important;
    background: none !important;
}

.cwp-root .cwp-property-stats__item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
}

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

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


/* ==========
   REDUCED MOTION — Disable animations for a11y
   ========== */

@media (prefers-reduced-motion: reduce) {
    .cwp-root *,
    .cwp-root *::before,
    .cwp-root *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   RESPONSIVE — WIDE DESKTOP & ULTRA-WIDE OVERRIDES
   Placed at EOF to guarantee source-order wins over earlier same-specificity rules.
   ========================================================================== */

/* ── Wide desktop (min-width: 1536px) ──────────────────────────────────── */

@media (min-width: 1536px) {
    .cwp-root .cwp-property-header__heading .cwp-property-title {
        font-size: 48px !important;
    }

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

    .cwp-root .cwp-property-layout {
        gap: clamp(48px, 5vw, 96px);
    }

    .cwp-root .cwp-section-title {
        font-size: 28px !important;
    }

    .cwp-root .cwp-similar-properties h2 {
        font-size: 28px !important;
    }
}

/* ── Ultra-wide (min-width: 1920px) ────────────────────────────────────── */

@media (min-width: 1920px) {
    .cwp-root .cwp-property-header__heading .cwp-property-title {
        font-size: 54px !important;
    }

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

    .cwp-root .cwp-section-title {
        font-size: 30px !important;
    }

    .cwp-root .cwp-similar-properties h2 {
        font-size: 30px !important;
    }
}

/* ==========
   PMS BOOKING WIDGET EMBED
   Container for PMS-native booking widgets (Hostfully, Hospitable, etc.)
   ========== */

/* ── PMS Widget wrapper: desktop/mobile visibility defaults ──────────────── */
/* No !important here — mobile media query rules override these with !important */
.cwp-pms-widget-desktop { display: block; }
.cwp-pms-widget-mobile-bar { display: none; }
.cwp-pms-widget-overlay[x-cloak] { display: none !important; }

.cwp-booking-widget {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: var(--cwp-radius-lg, 12px) !important;
    border: 1px solid var(--cwp-border, #E2E8F0) !important;
    background: var(--cwp-bg, #fff) !important;
    padding: 0 !important;
    position: sticky !important;
    top: 24px !important;
    box-shadow: var(--cwp-shadow-lg, 0 8px 24px rgba(27, 107, 147, 0.16)) !important;
}

/* ── PMS iframe widgets: strip the card chrome ─────────────────────────────
   When the widget contains an iframe (every PMS using the iframe-sandbox
   pattern — Lodgify, Hostaway, Hostfully, OwnerRez, Smoobu, Hospitable,
   Guesty, Beds24), the iframe content provides its OWN card styling. The
   .cwp-booking-widget wrapper above paints another card on top, producing
   a visible nested-box / empty-space-below appearance.

   :has(iframe) auto-scopes this reset to ONLY iframe widgets — non-iframe
   (script-mounted) PMS widgets keep the wrapper's card chrome.

   Also drops position:sticky because the iframe's height is dynamic
   (postMessage resize-ping). Sticky on a height-changing wrapper produces
   janky scroll behaviour on calendar open/close.

   :has() browser support: Safari 15.4+, Chrome 105+, Firefox 121+. All
   universal as of 2026. Replaces the Hospitable-specific override below. */
.cwp-booking-widget:has(iframe) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    position: static !important;
    top: auto !important;
}

/* Iframe-based widgets — ensure full-width and no extra spacing */
.cwp-booking-widget iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    border: none !important;
}

/* Hospitable widget — iframe renders its own card inside.
   Strip ALL outer styling, let the iframe's internal card be the only visual. */
.cwp-booking-widget[data-widget-type="hospitable"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
.cwp-booking-widget[data-widget-type="hospitable"] .hospitable-booking-widget {
    width: 100% !important;
}
.cwp-booking-widget[data-widget-type="hospitable"] .hospitable-booking-widget iframe {
    min-height: 580px !important;
}

/* Script-based widgets (Hostfully leadCaptureWidget, etc.) */
.cwp-booking-widget [id^="bly-hf-widget-"],
.cwp-booking-widget .hostfully-booking-widget,
.cwp-booking-widget #leadWidget {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure Hostfully widget form elements respect container width */
.cwp-booking-widget input,
.cwp-booking-widget select,
.cwp-booking-widget button,
.cwp-booking-widget textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
}