/**
 * Connect WordPress Plugin — Theme Isolation Reset
 *
 * Strips ALL WordPress theme styles from plugin components and provides
 * base styles. Uses a two-phase approach:
 *   Phase 1: `all: revert` strips theme styles from interactive elements
 *   Phase 2: Component styles restored with `!important` to override revert
 *
 * Why !important is required:
 *   - `all: revert` only affects base state, NOT pseudo-states (:hover, :focus)
 *   - Themes like Astra use `button:hover { background-color: var(--ast-global-color-1) }`
 *   - Without !important on component styles, the base revert overrides them too
 *
 * Hover/focus/active strategy:
 *   - Base states use `all: revert !important` to strip theme styles
 *   - Pseudo-states (:hover, :focus, :active) ONLY declare changed properties
 *   - Do NOT use `all: revert` on pseudo-states — it causes visual shake
 *
 * Version: 1.0.1
 * Last Updated: 2026-02-16
 */


/* ==========================================================================
   1. CONTAINER ISOLATION
   Prevents theme layout, paint, and style from bleeding into plugin UI
   ========================================================================== */

.cwp-root {
    contain: style;
    font-family: var(--cwp-font-body);
    color: var(--cwp-text);
    background: var(--cwp-bg, #fff);
    line-height: var(--cwp-line-height-normal);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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


/* ==========================================================================
   2. INTERACTIVE ELEMENTS RESET
   Phase 1: Strip ALL theme button, link, input, and select styles
   ========================================================================== */

.cwp-root button,
.cwp-root a,
.cwp-root input,
.cwp-root select,
.cwp-root textarea {
    all: revert;
}

/* Reset hover/focus states — themes inject these aggressively.
   Only reset visual properties that themes commonly change on hover/focus.
   Do NOT use `all: revert` here — that would strip box-model/layout
   properties set by component base rules, causing visual shake. */
.cwp-root button:hover,
.cwp-root button:focus,
.cwp-root button:active,
.cwp-root button:focus-visible {
    background-color: revert !important;
    color: revert !important;
    border-color: revert !important;
    box-shadow: revert !important;
    outline: revert !important;
    text-decoration: revert !important;
    opacity: revert !important;
    transform: revert !important;
}

.cwp-root a:hover,
.cwp-root a:focus,
.cwp-root a:active,
.cwp-root a:visited {
    background-color: revert !important;
    color: revert !important;
    border-color: revert !important;
    box-shadow: revert !important;
    outline: revert !important;
    text-decoration: revert !important;
}

/*
 * Button-like <a> elements should NOT revert :visited color to browser
 * default purple. These are styled actions, not regular text links.
 * Component CSS re-applies the correct color, but the a:visited revert
 * above (at equal specificity) wins via source order. This overrides it.
 */
.cwp-root a.cwp-btn:visited,
.cwp-root a.cwp-btn--primary:visited,
.cwp-root a.cwp-btn--secondary:visited,
.cwp-root a.cwp-collection__view-all:visited,
.cwp-root a.cwp-sidebar__reserve:visited,
.cwp-root a.cwp-sidebar__cta:visited,
.cwp-root a.cwp-card__title-link:visited {
    color: inherit !important;
    text-decoration: none !important;
}

.cwp-root input:hover,
.cwp-root input:focus,
.cwp-root input:active,
.cwp-root select:hover,
.cwp-root select:focus,
.cwp-root select:active,
.cwp-root textarea:hover,
.cwp-root textarea:focus,
.cwp-root textarea:active {
    background-color: revert !important;
    color: revert !important;
    border-color: revert !important;
    box-shadow: revert !important;
    outline: revert !important;
}

/* --------------------------------------------------------------------------
   2b. FORM INPUT COMPONENT RESTORE
   Re-apply surface bg on .cwp-input / .cwp-textarea / .cwp-select after
   the generic `all: revert` above strips component styles.
   -------------------------------------------------------------------------- */

.cwp-root .cwp-input,
.cwp-root .cwp-textarea,
.cwp-root .cwp-select {
    background: var(--cwp-surface, #fff) !important;
    background-color: var(--cwp-surface, #fff) !important;
    color: var(--cwp-text, #2c2e33) !important;
    border: 1px solid var(--cwp-border, #ddd) !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
}

.cwp-root .cwp-input:hover,
.cwp-root .cwp-input:focus,
.cwp-root .cwp-input:active,
.cwp-root .cwp-textarea:hover,
.cwp-root .cwp-textarea:focus,
.cwp-root .cwp-textarea:active,
.cwp-root .cwp-select:hover,
.cwp-root .cwp-select:focus,
.cwp-root .cwp-select:active {
    background: var(--cwp-surface, #fff) !important;
    background-color: var(--cwp-surface, #fff) !important;
    color: var(--cwp-text, #2c2e33) !important;
    border-color: var(--cwp-border-hover, #bbb) !important;
}

.cwp-root .cwp-input::placeholder,
.cwp-root .cwp-textarea::placeholder {
    color: var(--cwp-text-muted, #999) !important;
}


/* ==========================================================================
   3. BASE BUTTON COMPONENT
   Phase 2: Restore .cwp-btn variants with !important
   ========================================================================== */

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

.cwp-root .cwp-btn {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 44px !important;
    padding: 0 20px !important;
    border: 1px solid var(--cwp-border) !important;
    border-radius: var(--cwp-radius-md) !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;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.cwp-root .cwp-btn:hover {
    border-color: var(--cwp-border-hover) !important;
    background: var(--cwp-surface-alt) !important;
}

.cwp-root .cwp-btn:focus-visible {
    outline: var(--cwp-focus-ring-width) solid var(--cwp-focus-ring-color) !important;
    outline-offset: var(--cwp-focus-ring-offset) !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: 48px !important;
    padding: 0 24px !important;
    background: var(--cwp-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--cwp-radius-lg) !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;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.cwp-root .cwp-btn--primary:hover {
    opacity: 0.9 !important;
}

.cwp-root .cwp-btn--primary:focus-visible {
    outline: var(--cwp-focus-ring-width) solid #FFFFFF !important;
    outline-offset: var(--cwp-focus-ring-offset) !important;
}

.cwp-root .cwp-btn--primary:active {
    opacity: 0.85 !important;
    transform: scale(0.98) !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: 44px !important;
    padding: 0 20px !important;
    background: var(--cwp-surface-alt) !important;
    color: var(--cwp-text) !important;
    border: 1px solid var(--cwp-border) !important;
    border-radius: var(--cwp-radius-md) !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 {
    border-color: var(--cwp-border-hover) !important;
}

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

/* --- Outline Button --- */

.cwp-root .cwp-btn--outline {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 44px !important;
    padding: 0 20px !important;
    background: transparent !important;
    color: var(--cwp-primary) !important;
    border: 1px solid var(--cwp-primary) !important;
    border-radius: var(--cwp-radius-md) !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--outline:hover {
    background: var(--cwp-primary-light) !important;
}

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

/* --- Text Button --- */

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

.cwp-root .cwp-btn--text:hover {
    background: var(--cwp-primary-light) !important;
    color: var(--cwp-primary-dark) !important;
}

/* --- Icon Button --- */

.cwp-root .cwp-btn--icon {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--cwp-text-secondary) !important;
    border: none !important;
    border-radius: var(--cwp-radius-full) !important;
    cursor: pointer !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-btn--icon:hover {
    background: var(--cwp-surface-alt) !important;
    color: var(--cwp-text) !important;
}

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


/* ==========================================================================
   4. GUEST BUTTONS
   +/- increment/decrement buttons used in guest picker (search & booking)
   ========================================================================== */

.cwp-root .cwp-guest-btn {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--cwp-radius-full) !important;
    border: 1px solid var(--cwp-border) !important;
    background: var(--cwp-surface) !important;
    color: var(--cwp-text) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.cwp-root .cwp-guest-btn:hover {
    border-color: var(--cwp-text) !important;
}

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

.cwp-root .cwp-guest-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    color: var(--cwp-text-muted) !important;
    border-color: var(--cwp-border) !important;
}

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

/* Mobile close buttons for fullscreen pickers (guest, location, date) */
.cwp-root .cwp-guest-picker__mobile-close,
.cwp-root .cwp-location-picker__mobile-close {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    border-radius: 50% !important;
    background: var(--cwp-surface-alt, #f5f5f5) !important;
    background-color: var(--cwp-surface-alt, #f5f5f5) !important;
    color: var(--cwp-text, #2c2e33) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cwp-root .cwp-guest-picker__mobile-close:hover,
.cwp-root .cwp-location-picker__mobile-close:hover {
    background: var(--cwp-border, #ececec) !important;
    background-color: var(--cwp-border, #ececec) !important;
    border: none !important;
    color: var(--cwp-text, #2c2e33) !important;
}

/* Guest picker footer buttons — theme protection */
.cwp-root .cwp-guest-picker__done {
    all: revert !important;
    display: inline-block !important;
    font-family: var(--cwp-font-body, -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--cwp-primary) !important;
    background-color: var(--cwp-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    margin: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    min-height: 44px !important;
    text-align: center !important;
}

.cwp-root .cwp-guest-picker__done:hover,
.cwp-root .cwp-guest-picker__done:focus {
    background: var(--cwp-primary-dark, var(--cwp-primary)) !important;
    background-color: var(--cwp-primary-dark, var(--cwp-primary)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.cwp-root .cwp-guest-picker__reset {
    all: revert !important;
    display: inline-block !important;
    font-family: var(--cwp-font-body, -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--cwp-text-secondary, #555) !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
    margin-right: auto !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}

.cwp-root .cwp-guest-picker__reset:hover,
.cwp-root .cwp-guest-picker__reset:focus {
    color: var(--cwp-text, #222) !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Guest picker footer container */
.cwp-root .cwp-guest-picker__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 8px 20px 16px !important;
    border: none !important;
    margin: 0 !important;
    gap: 12px !important;
    background: var(--cwp-surface, #fff) !important;
    background-color: var(--cwp-surface, #fff) !important;
}


/* ==========================================================================
   4b. SIDEBAR CTA BUTTON
   "Check Availability" and "Book Now" buttons in the booking sidebar.
   Needs higher specificity than generic .cwp-btn reset above.
   ========================================================================== */

.cwp-root .cwp-sidebar .cwp-sidebar__cta {
    all: unset !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 14px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 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;
    font-family: inherit !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    margin-top: 16px !important;
    box-shadow: 0 4px 14px rgba(230, 30, 77, 0.3) !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;
    text-align: center !important;
}

.cwp-root .cwp-sidebar .cwp-sidebar__cta:hover {
    box-shadow: 0 6px 20px rgba(230, 30, 77, 0.4) !important;
    opacity: 0.92 !important;
    transform: scale(1.01) !important;
}

.cwp-root .cwp-sidebar .cwp-sidebar__cta:focus {
    outline: 2px solid var(--cwp-primary, #222222) !important;
    outline-offset: 2px !important;
}

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

/* ==========================================================================
   4b2. REPORT LISTING LINK
   "Report this listing" text button below the sidebar card.
   ========================================================================== */

.cwp-root .cwp-sidebar__report-link {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    text-decoration: underline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cwp-root .cwp-sidebar__report-link:hover,
.cwp-root .cwp-sidebar__report-link:focus {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ==========================================================================
   4c. POPUP FOOTER BUTTONS
   Close / Clear dates in calendar & guest picker floating popups.
   ========================================================================== */

.cwp-root .cwp-sidebar__popup .cwp-sidebar__popup-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 20px !important;
    background: var(--cwp-cal-selected, #6C4CE0) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    text-decoration: none !important;
}

.cwp-root .cwp-sidebar__popup .cwp-sidebar__popup-btn:hover {
    background: var(--cwp-cal-selected-dark, #5A3CC8) !important;
    color: #FFFFFF !important;
}

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

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

.cwp-root .cwp-sidebar__popup .cwp-sidebar__popup-close {
    all: unset !important;
    box-sizing: border-box !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: 50% !important;
    background: transparent !important;
    color: var(--cwp-text-muted, #717171) !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

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

/* ==========================================================================
   4d. SIDEBAR CALENDAR NAV BUTTONS
   Prev/next month arrows inside the floating calendar popup.
   ========================================================================== */

.cwp-root .cwp-cal button.cwp-cal__nav-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--cwp-text, #222222) !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.cwp-root .cwp-cal button.cwp-cal__nav-btn:hover {
    background: var(--cwp-surface-hover, #f7f7f7) !important;
}

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

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

/* ==========================================================================
   5. CARD CAROUSEL NAVIGATION
   Prev/next arrows and dot indicators on property card image carousel
   ========================================================================== */

.cwp-root .cwp-card__carousel-nav {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !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;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    opacity: 0 !important;
    transition: opacity var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-card__carousel-nav:hover {
    transform: translateY(-50%) scale(1.05) !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    opacity: 1 !important;
}

.cwp-root .cwp-card__carousel-nav:focus-visible {
    background: #FFFFFF !important;
    opacity: 1 !important;
    outline: var(--cwp-focus-ring-width) solid var(--cwp-focus-ring-color) !important;
    outline-offset: var(--cwp-focus-ring-offset) !important;
}

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

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

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

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

.cwp-root .cwp-card__carousel-dot:hover {
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.8) !important;
}

.cwp-root .cwp-card__carousel-dot--active {
    background: #FFFFFF !important;
    width: 8px !important;
    height: 8px !important;
}

/* Card save/favourite button */
.cwp-root .cwp-card__save {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--cwp-radius-full) !important;
    background: transparent !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    transition: transform var(--cwp-duration-fast) var(--cwp-ease-default) !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}

.cwp-root .cwp-card__save:hover {
    transform: scale(1.1) !important;
}

.cwp-root .cwp-card__save--active {
    color: var(--cwp-error) !important;
}


/* ==========================================================================
   6. CALENDAR BUTTONS
   Day buttons, month navigation in search-page inline calendars.
   SCOPED: Only applies to search calendars (#bc-search-calendar), NOT to
   the property page availability calendar (.cwp-calendar).
   The availability calendar gets its styles from connect-public.css Section 17.
   ========================================================================== */

/* Calendar day state overrides.
   NOTE: No longer using `all: revert` here — the base day cell styles are
   defined in connect-public.css Section 17 and must NOT be stripped.
   These rules only add state modifiers (selected, booked, disabled, today). */

.cwp-root .cwp-calendar__day--selected {
    background: var(--cwp-cal-selected, #6C4CE0) !important;
    color: #FFFFFF !important;
}

.cwp-root .cwp-calendar__day--booked {
    background: var(--cwp-calendar-booked-bg, transparent) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
    cursor: default !important;
    text-decoration: line-through !important;
}

.cwp-root .cwp-calendar__day--disabled {
    color: var(--cwp-text-muted, #8899A6) !important;
    cursor: default !important;
    opacity: 0.4 !important;
}

/* Calendar month navigation buttons */
.cwp-root .cwp-calendar-nav {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    border-radius: var(--cwp-radius-full) !important;
    background: transparent !important;
    color: var(--cwp-text) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-calendar-nav:hover {
    background: var(--cwp-surface-alt) !important;
}

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

/* Availability calendar nav buttons (template-rendered) */
.cwp-root .cwp-calendar__nav-btn {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    border-radius: var(--cwp-radius-full, 9999px) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--cwp-text) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

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

.cwp-root .cwp-calendar__nav-btn: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-calendar__nav-btn:disabled,
.cwp-root .cwp-calendar__nav-btn[disabled] {
    opacity: 0.3 !important;
    cursor: default !important;
}

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

/* Availability calendar day cells (template-rendered) */
.cwp-root .cwp-calendar__day {
    all: revert !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    border: none !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: var(--cwp-font-body) !important;
    cursor: pointer !important;
    padding: 2px !important;
    margin: 0 !important;
    transition: background var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

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

/* Calendar clear dates button */
.cwp-root .cwp-calendar__clear {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm, 13px) !important;
    cursor: pointer !important;
    margin: 0 !important;
    text-decoration: underline !important;
    transition: color var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-calendar__clear:hover {
    color: var(--cwp-primary, #1B6B93) !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* JS-rendered inline calendar buttons (attribute selectors) */
.cwp-root button[data-date] {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: var(--cwp-radius-md) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-calendar-day-font-size) !important;
    font-weight: var(--cwp-calendar-day-weight) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root button[data-date]:hover {
    /* No visual change — inline styles from JS handle selected/hover states */
}

.cwp-root button[data-date]:focus-visible {
    outline: var(--cwp-focus-ring-width) solid var(--cwp-focus-ring-color) !important;
    outline-offset: -2px !important;
}

.cwp-root button[data-nav] {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    border-radius: var(--cwp-radius-full) !important;
    background: transparent !important;
    color: var(--cwp-text) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cwp-root button[data-nav]:hover {
    background: var(--cwp-surface-alt) !important;
}


/* ==========================================================================
   7. SEARCH ACTION BUTTONS (search + filter icon buttons)
   Compact icon-only buttons in the search bar
   ========================================================================== */

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

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

.cwp-root .cwp-search-bar__action--filter {
    width: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--cwp-border, #ececec) !important;
    background: transparent !important;
    color: var(--cwp-text, #2c2e33) !important;
    box-shadow: none !important;
}

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

.cwp-root .cwp-search-bar__action:hover {
    transform: scale(1.08) !important;
}

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

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

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

/* Search bar label icon — prevent theme from overriding inline SVGs */
.cwp-root .cwp-search-bar__label-icon {
    all: unset !important;
    display: none !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    color: var(--cwp-text, #1a2b3c) !important;
    opacity: 0.55 !important;
    pointer-events: none !important;
}

/* Location picker — theme protection for premium dropdown */
.cwp-root .cwp-location-picker__input {
    all: unset !important;
    display: block !important;
    flex: 1 !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: var(--cwp-font-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--cwp-text, #2c2e33) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.cwp-root .cwp-location-picker__input:hover,
.cwp-root .cwp-location-picker__input:focus,
.cwp-root .cwp-location-picker__input:active {
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--cwp-text, #2c2e33) !important;
}

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

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

.cwp-root .cwp-location-picker__icon {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 10px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--cwp-primary) !important;
    flex-shrink: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.cwp-root .cwp-location-picker__clear {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border: none !important;
    border-radius: 50% !important;
    background: var(--cwp-surface-alt, #f5f5f5) !important;
    color: var(--cwp-text-muted, #8899A6) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Filter dropdown — price input theme protection */
.cwp-root .cwp-filter-sort-dropdown__price-input {
    all: unset !important;
    display: block !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--cwp-text, #333) !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -moz-appearance: textfield !important;
}
.cwp-root .cwp-filter-sort-dropdown__price-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Filter dropdown — heading theme protection */
.cwp-root .cwp-filter-sort-dropdown__heading {
    all: unset !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--cwp-text-muted, #999) !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1.3 !important;
}

/* Filter dropdown — show more button theme protection */
.cwp-root button.cwp-filter-sort-dropdown__show-more,
.cwp-root button.cwp-filter-sort-dropdown__show-more:hover,
.cwp-root button.cwp-filter-sort-dropdown__show-more:focus,
.cwp-root button.cwp-filter-sort-dropdown__show-more:active {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 12px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    color: var(--cwp-primary, #f1913d) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

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

.cwp-root .cwp-search-trigger:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    background: var(--cwp-surface-alt, #f7f7f7) !important;
    background-color: var(--cwp-surface-alt, #f7f7f7) !important;
    border: none !important;
    border-bottom: 1px solid var(--cwp-border, #ececec) !important;
    color: var(--cwp-text, #2c2e33) !important;
}

.cwp-root .cwp-search-trigger:focus,
.cwp-root .cwp-search-trigger:focus-visible {
    outline: var(--cwp-focus-ring-width, 2px) solid var(--cwp-focus-ring-color) !important;
    outline-offset: var(--cwp-focus-ring-offset, 2px) !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    background-color: var(--cwp-surface, #FFFFFF) !important;
    border: none !important;
    border-bottom: 1px solid var(--cwp-border, #ececec) !important;
}

@media (max-width: 767px) {
    .cwp-root .cwp-search-trigger {
        display: flex !important;
    }
}

/* Map peek card links — theme protection */
.cwp-root .cwp-map-peek__card {
    all: revert !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
    width: 280px !important;
    height: 88px !important;
    background: var(--cwp-surface, #fff) !important;
    background-color: var(--cwp-surface, #fff) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: var(--cwp-text, #2c2e33) !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    pointer-events: auto !important;
}

.cwp-root .cwp-map-peek__card:hover {
    text-decoration: none !important;
    color: var(--cwp-text, #2c2e33) !important;
    background: var(--cwp-surface, #fff) !important;
    background-color: var(--cwp-surface, #fff) !important;
}

/* Mobile search overlay — theme protection */
.cwp-root .cwp-search-overlay__field {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    height: 72px !important;
    padding: 12px 20px !important;
    border: none !important;
    border-bottom: 1px solid var(--cwp-border, #ececec) !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: pointer !important;
    margin: 0 !important;
}

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

/* Mobile search overlay buttons — theme protection */
.cwp-root .cwp-search-overlay__close {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid var(--cwp-border, #ececec) !important;
    border-radius: 50% !important;
    background: var(--cwp-surface, #fff) !important;
    background-color: var(--cwp-surface, #fff) !important;
    color: var(--cwp-text, #2c2e33) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cwp-root .cwp-search-overlay__close:hover {
    background: var(--cwp-surface-alt, #f5f5f5) !important;
    background-color: var(--cwp-surface-alt, #f5f5f5) !important;
    border: 1px solid var(--cwp-border, #ececec) !important;
    color: var(--cwp-text, #2c2e33) !important;
}

.cwp-root .cwp-search-overlay__clear {
    all: revert !important;
    font-family: var(--cwp-font-body) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--cwp-text, #2c2e33) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px 2px !important;
    margin: 0 !important;
}

.cwp-root .cwp-search-overlay__clear:hover {
    color: var(--cwp-text-secondary, #555) !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
}

.cwp-root .cwp-search-overlay__submit {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 48px !important;
    padding: 0 24px !important;
    border: none !important;
    border-radius: 12px !important;
    background: var(--cwp-gradient, linear-gradient(135deg, #f1913d 0%, #e8632b 100%)) !important;
    background-color: var(--cwp-primary, #f1913d) !important;
    color: #FFFFFF !important;
    font-family: var(--cwp-font-body) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.cwp-root .cwp-search-overlay__submit:hover {
    background: var(--cwp-gradient, linear-gradient(135deg, #f1913d 0%, #e8632b 100%)) !important;
    background-color: var(--cwp-primary, #f1913d) !important;
    color: #FFFFFF !important;
    border: none !important;
    opacity: 0.9 !important;
}

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

/* Search location autocomplete option buttons */
.cwp-root .cwp-search-bar__option {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px 16px !important;
    background: transparent !important;
    color: var(--cwp-text) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    cursor: pointer !important;
    text-align: left !important;
    margin: 0 !important;
    transition: background var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

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


/* ==========================================================================
   8. FILTER PILLS
   Horizontal scrolling filter buttons on search page
   ========================================================================== */

.cwp-root .cwp-filter-pill {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--cwp-filter-pill-gap) !important;
    height: var(--cwp-filter-pill-height) !important;
    min-width: var(--cwp-filter-pill-min-width) !important;
    padding: var(--cwp-filter-pill-padding) !important;
    background: var(--cwp-filter-pill-bg) !important;
    color: var(--cwp-text-secondary) !important;
    border: var(--cwp-filter-pill-border-width) solid var(--cwp-border) !important;
    border-radius: var(--cwp-filter-pill-border-radius) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-filter-pill-font-size) !important;
    font-weight: var(--cwp-filter-pill-weight) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    margin: 0 !important;
    transition: var(--cwp-filter-pill-transition) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.cwp-root .cwp-filter-pill:hover {
    color: var(--cwp-text) !important;
    border-color: var(--cwp-text) !important;
    background: var(--cwp-surface-alt) !important;
}

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

.cwp-root .cwp-filter-pill--active {
    background: var(--cwp-text) !important;
    color: var(--cwp-surface) !important;
    border-color: var(--cwp-text) !important;
}

.cwp-root .cwp-filter-pill--active:hover {
    background: var(--cwp-text) !important;
    color: var(--cwp-surface) !important;
    border-color: var(--cwp-text) !important;
    opacity: 0.85 !important;
}

/* Filters "All" button */
.cwp-root .cwp-filters__all {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: var(--cwp-filter-pill-height) !important;
    padding: var(--cwp-filter-pill-padding) !important;
    background: var(--cwp-surface) !important;
    color: var(--cwp-text) !important;
    border: 1px solid var(--cwp-border) !important;
    border-radius: var(--cwp-filter-pill-border-radius) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-filter-pill-font-size) !important;
    font-weight: var(--cwp-weight-semibold) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-filters__all:hover {
    background: var(--cwp-surface-alt) !important;
    border-color: var(--cwp-border-hover) !important;
}


/* ==========================================================================
   9. BOOKING CTA BUTTONS
   Check Availability and Book Now buttons in booking sidebar
   ========================================================================== */

.cwp-root .cwp-booking__cta {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 52px !important;
    background: var(--cwp-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: var(--cwp-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.cwp-root .cwp-booking__cta:hover {
    opacity: 0.92 !important;
    transform: scale(1.01) !important;
}

.cwp-root .cwp-booking__cta:focus-visible {
    outline: var(--cwp-focus-ring-width) solid #FFFFFF !important;
    outline-offset: var(--cwp-focus-ring-offset) !important;
}

.cwp-root .cwp-booking__cta:active {
    opacity: 0.85 !important;
    transform: scale(0.99) !important;
}

.cwp-root .cwp-booking__cta:disabled {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 52px !important;
    background: var(--cwp-border) !important;
    color: var(--cwp-text-muted) !important;
    border: none !important;
    border-radius: var(--cwp-radius-lg) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body) !important;
    font-weight: var(--cwp-weight-semibold) !important;
    cursor: not-allowed !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0.6 !important;
}


/* ==========================================================================
   10. GALLERY SHOW-ALL BUTTON
   Styles defined in connect-public.css Section 11 using `all: unset`.
   No reset.css override needed — the connect-public.css definition
   already uses `all: unset !important` for full theme isolation.
   ========================================================================== */


/* ==========================================================================
   11. LIGHTBOX NAV & CLOSE BUTTONS
   REMOVED: The lightbox uses x-teleport="body", placing it outside .cwp-root.
   So .cwp-root .cwp-lightbox__* selectors never match.
   All lightbox button styles are in connect-public.css Section 12
   using both `.cwp-root .cwp-lightbox__*` and `.cwp-lightbox__*` selectors.
   ========================================================================== */


/* ==========================================================================
   12. MODAL CLOSE BUTTON
   Close button for generic modals/dialogs
   ========================================================================== */

.cwp-root .cwp-modal__close {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    color: var(--cwp-text-secondary) !important;
    border: none !important;
    border-radius: var(--cwp-radius-full) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-modal__close:hover {
    background: var(--cwp-surface-alt) !important;
    color: var(--cwp-text) !important;
}

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


/* ==========================================================================
   13. CAROUSEL BUTTONS (Similar Properties)
   Prev/next navigation for the horizontal property carousel
   ========================================================================== */

.cwp-root .cwp-carousel-btn {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--cwp-radius-full) !important;
    background: var(--cwp-surface) !important;
    color: var(--cwp-text) !important;
    border: 1px solid var(--cwp-border) !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    box-shadow: var(--cwp-shadow-md) !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-carousel-btn:hover {
    transform: translateY(-50%) scale(1.05) !important;
    border-color: var(--cwp-border-hover) !important;
    box-shadow: var(--cwp-shadow-lg) !important;
}

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

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

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


/* ==========================================================================
   14. PROPERTY HEADER ACTION BUTTONS
   Share, Save, Print icon buttons on single property page
   ========================================================================== */

.cwp-root .cwp-action-btn {
    all: revert !important;
    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) !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, #f1913d) !important;
    background-color: var(--cwp-primary, #f1913d) !important;
    border-color: var(--cwp-primary, #f1913d) !important;
    color: #FFFFFF !important;
}

.cwp-root .cwp-action-btn:focus,
.cwp-root .cwp-action-btn:focus-visible {
    background: var(--cwp-surface, #fff) !important;
    background-color: var(--cwp-surface, #fff) !important;
    outline: 2px solid var(--cwp-primary, #f1913d) !important;
    outline-offset: 2px !important;
    color: var(--cwp-text) !important;
}


/* ==========================================================================
   15. PROPERTY DESCRIPTION TOGGLE
   "Show more" / "Show less" toggle button
   ========================================================================== */

.cwp-root .cwp-description__toggle,
.cwp-root .cwp-property-description__toggle {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 14px !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.82) !important;
    background-color: 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;
    color: var(--cwp-text, #1A2B3C) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    margin: 16px 0 0 0 !important;
    text-decoration: none !important;
    white-space: nowrap !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;
}

.cwp-root .cwp-description__toggle:hover,
.cwp-root .cwp-property-description__toggle:hover {
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.95) !important;
    background-color: 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-description__toggle:focus,
.cwp-root .cwp-property-description__toggle:focus {
    outline: none !important;
}

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


/* ==========================================================================
   15b. REVIEWS READ-MORE + THINGS-TO-KNOW MORE (Glassmorphism pill)
   Same pill pattern as the description toggle above.
   ========================================================================== */

.cwp-root .cwp-reviews__read-more,
.cwp-root .cwp-reviews__show-all-btn,
.cwp-root .cwp-things-to-know__more {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 14px !important;
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.82) !important;
    background-color: 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;
    color: var(--cwp-text, #1A2B3C) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    margin: 8px 0 0 0 !important;
    text-decoration: none !important;
    white-space: nowrap !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;
}

/* "Show all reviews" gets slightly larger padding */
.cwp-root .cwp-reviews__show-all-btn {
    padding: 10px 22px !important;
    font-size: 13.5px !important;
    margin: 0 !important;
}

.cwp-root .cwp-reviews__read-more:hover,
.cwp-root .cwp-reviews__show-all-btn:hover,
.cwp-root .cwp-things-to-know__more:hover {
    background: rgba(var(--cwp-bg-rgb, 255, 255, 255), 0.95) !important;
    background-color: 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:focus-visible,
.cwp-root .cwp-reviews__show-all-btn:focus-visible,
.cwp-root .cwp-things-to-know__more:focus-visible {
    outline: 2px solid var(--cwp-primary, #1B6B93) !important;
    outline-offset: 3px !important;
}

/* Reusable pill-button icon circle */
.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;
}


/* ==========================================================================
   16. MAP FAB & CLOSE BUTTONS (Mobile + Tablet)
   Floating action button to toggle map on mobile/tablet.
   IMPORTANT: Do NOT use `all: revert` or `display: … !important` here —
   Alpine x-show controls visibility via inline display:none, and CSS
   !important would override Alpine's inline style, breaking the toggle.
   ========================================================================== */

.cwp-root .cwp-map-fab {
    /* No all:revert — Alpine x-show must control display freely */
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 48px !important;
    padding: 0 24px !important;
    background: var(--cwp-text) !important;
    background-color: var(--cwp-text) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--cwp-radius-full) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-semibold) !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-align: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    outline: none !important;
    z-index: var(--cwp-z-sticky) !important;
    box-shadow: var(--cwp-shadow-xl) !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-map-fab:hover {
    transform: translateX(-50%) scale(1.05) !important;
    background: var(--cwp-text) !important;
    background-color: var(--cwp-text) !important;
    color: #FFFFFF !important;
}

.cwp-root .cwp-map-fab:focus {
    background: var(--cwp-text) !important;
    background-color: var(--cwp-text) !important;
    color: #FFFFFF !important;
}

.cwp-root .cwp-map-close {
    /* No all:revert — Alpine x-show must control display freely */
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 48px !important;
    padding: 0 24px !important;
    background: var(--cwp-surface) !important;
    background-color: var(--cwp-surface) !important;
    color: var(--cwp-text) !important;
    border: 1px solid var(--cwp-border) !important;
    border-radius: var(--cwp-radius-full) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-semibold) !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-align: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    outline: none !important;
    z-index: var(--cwp-z-sticky) !important;
    box-shadow: var(--cwp-shadow-xl) !important;
    transition: all var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-map-close:hover {
    background: var(--cwp-surface-alt) !important;
    background-color: var(--cwp-surface-alt) !important;
    color: var(--cwp-text) !important;
}

.cwp-root .cwp-map-close:focus {
    background: var(--cwp-surface-alt) !important;
    background-color: var(--cwp-surface-alt) !important;
    color: var(--cwp-text) !important;
}

/* Mobile: reposition "Show list" button above peek cards.
   FAB keeps default z-index (var(--cwp-z-sticky) = 1020) so the search
   overlay (z-modal: 1040) sits above it when filters are open.
   Only the "Show list" button needs z-index 1102 (map view layer). */
@media (max-width: 767px) {
    .cwp-root .cwp-map-close {
        bottom: calc(88px + max(16px, env(safe-area-inset-bottom)) + 12px) !important;
        z-index: 1102 !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
    }
}

/* Desktop: always hide FAB + close (use map collapse toggle instead).
   !important is safe here because at ≥1025px we NEVER show these. */
@media (min-width: 1025px) {
    .cwp-root .cwp-map-fab,
    .cwp-root .cwp-map-close {
        display: none !important;
    }
}

/* ── Map collapse toggle button (desktop) — theme protection ── */
/* NOTE: No `all: revert` here — JS controls `right` via inline style,
   and `all: revert !important` would override inline styles. */
.cwp-root .cwp-map-toggle {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--cwp-border, #e0e0e0) !important;
    border-radius: 8px 0 0 8px !important;
    background: var(--cwp-surface, #fff) !important;
    background-color: var(--cwp-surface, #fff) !important;
    color: var(--cwp-text-secondary, #6a6a6a) !important;
    cursor: pointer !important;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06) !important;
    z-index: 1000 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.cwp-root .cwp-map-toggle:hover {
    background: var(--cwp-surface-alt, #f5f5f5) !important;
    color: var(--cwp-text, #222) !important;
}

.cwp-root .cwp-map-toggle:focus {
    background: var(--cwp-surface-alt, #f5f5f5) !important;
    color: var(--cwp-text, #222) !important;
}

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


/* ==========================================================================
   16b. DATE PICKER MOBILE CLOSE BUTTON
   Theme protection for the fullscreen datepicker close button on mobile.
   ========================================================================== */

.cwp-root .cwp-date-picker__mobile-close {
    all: revert !important;
    display: inline-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: 50% !important;
    background: var(--cwp-surface-alt, #f5f5f5) !important;
    color: var(--cwp-text, #2c2e33) !important;
    cursor: pointer !important;
}

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

.cwp-root .cwp-date-picker__mobile-close:focus-visible {
    outline: var(--cwp-focus-ring-width) solid var(--cwp-focus-ring-color) !important;
    outline-offset: var(--cwp-focus-ring-offset) !important;
}

/* ==========================================================================
   17. RESULTS HEADER BUTTONS
   Sort and Save search buttons in results header
   ========================================================================== */

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

.cwp-root .cwp-results-header__sort:hover,
.cwp-root .cwp-results-header__save:hover {
    background: var(--cwp-surface-alt) !important;
    color: var(--cwp-text) !important;
    border-color: var(--cwp-border-hover) !important;
}


/* ==========================================================================
   17b. VIEW MODE TOGGLE BUTTONS
   Grid/List toggle in results header — must override theme button resets.
   ========================================================================== */

.cwp-root .cwp-view-toggle__btn {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 6px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--cwp-text-muted, #999) !important;
    cursor: pointer !important;
    transition: color 150ms ease, background-color 150ms ease !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

.cwp-root .cwp-view-toggle__btn:hover {
    color: var(--cwp-text-secondary, #666) !important;
    background: rgba(0, 0, 0, 0.04) !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.cwp-root .cwp-view-toggle__btn--active,
.cwp-root .cwp-view-toggle__btn--active:hover {
    color: var(--cwp-text, #1a1a1a) !important;
    background: var(--cwp-surface, #fff) !important;
    background-color: var(--cwp-surface, #fff) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.cwp-root .cwp-view-toggle__btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   18. PROPERTY FOOTER REPORT BUTTON
   ========================================================================== */

.cwp-root .cwp-property-footer__report {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 0 !important;
    background: transparent !important;
    color: var(--cwp-text-muted) !important;
    border: none !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm) !important;
    font-weight: var(--cwp-weight-regular) !important;
    cursor: pointer !important;
    margin: 0 !important;
    text-decoration: underline !important;
    transition: color var(--cwp-duration-fast) var(--cwp-ease-default) !important;
}

.cwp-root .cwp-property-footer__report:hover {
    color: var(--cwp-text) !important;
}


/* ==========================================================================
   19. INPUT RESET (Form Fields)
   Restore clean styling for search bar and booking form inputs
   ========================================================================== */

.cwp-root .cwp-search-bar__input {
    all: revert !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--cwp-text) !important;
    border: none !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body) !important;
    font-weight: var(--cwp-weight-regular) !important;
    line-height: var(--cwp-line-height-normal) !important;
    outline: none !important;
    margin: 0 !important;
}

.cwp-root .cwp-search-bar__input:hover,
.cwp-root .cwp-search-bar__input:focus {
    box-shadow: none !important;
}

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


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

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

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

/* ==========================================================================
   21. LINK RESET
   Restore clean styling for links inside the plugin
   ========================================================================== */

/* Card title link — display: inline to preserve parent -webkit-line-clamp */
.cwp-root .cwp-card__title a {
    all: revert !important;
    display: inline !important;
    color: inherit !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    cursor: pointer !important;
}

.cwp-root .cwp-card__title a:hover,
.cwp-root .cwp-card__title a:focus,
.cwp-root .cwp-card__title a:visited {
    color: inherit !important;
    text-decoration: none !important;
}

/* Card location paragraph — strip theme <p> margins */
.cwp-root .cwp-card__location {
    margin: 0 !important;
    padding: 0 !important;
}

/* Skeleton cards — theme protection: ensure skeletons are visible instantly */
.cwp-root .cwp-card--skeleton {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: none !important;
}

/* Property navigation back link */
.cwp-root .cwp-property-nav__back {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: inherit !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    cursor: pointer !important;
}

.cwp-root .cwp-property-nav__back:hover,
.cwp-root .cwp-property-nav__back:focus,
.cwp-root .cwp-property-nav__back:visited {
    color: var(--cwp-text) !important;
    text-decoration: none !important;
}


/* ==========================================================================
   21. BOOKING V2 — COMPACT BAR PILLS & CTA RESET
   Reset theme styles on the compact booking bar pills and CTA button.
   ========================================================================== */

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

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

.cwp-sidebar__compact-cta {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 28px !important;
    background: var(--cwp-gradient, linear-gradient(135deg, #1B6B93 0%, #145272 100%)) !important;
    background-color: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: var(--cwp-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
}

.cwp-sidebar__compact-cta:hover,
.cwp-sidebar__compact-cta:focus {
    all: revert !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 28px !important;
    background: var(--cwp-gradient, linear-gradient(135deg, #1B6B93 0%, #145272 100%)) !important;
    background-color: var(--cwp-primary, #1B6B93) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: var(--cwp-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    opacity: 0.92 !important;
    transform: scale(1.01) !important;
}


/* ==========================================================================
   22. AMENITIES V2 — TAB BUTTONS & SEARCH INPUT RESET
   Reset theme styles on amenity modal tabs and search input.
   ========================================================================== */

.cwp-amenities-modal__tab {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    height: var(--cwp-amenity-tab-height, 36px) !important;
    padding: 0 16px !important;
    border: 1px solid var(--cwp-border, #ececec) !important;
    border-radius: var(--cwp-amenity-tab-radius, 9999px) !important;
    background: var(--cwp-amenity-tab-bg, var(--cwp-surface-alt, #F0F7FA)) !important;
    background-color: var(--cwp-amenity-tab-bg, var(--cwp-surface-alt, #F0F7FA)) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm, 13px) !important;
    font-weight: var(--cwp-weight-medium, 500) !important;
    color: var(--cwp-text) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease !important;
}

.cwp-amenities-modal__tab:hover,
.cwp-amenities-modal__tab:focus {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    height: var(--cwp-amenity-tab-height, 36px) !important;
    padding: 0 16px !important;
    border: 1px solid var(--cwp-primary, #1B6B93) !important;
    border-radius: var(--cwp-amenity-tab-radius, 9999px) !important;
    background: var(--cwp-amenity-tab-bg, var(--cwp-surface-alt, #F0F7FA)) !important;
    background-color: var(--cwp-amenity-tab-bg, var(--cwp-surface-alt, #F0F7FA)) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body-sm, 13px) !important;
    font-weight: var(--cwp-weight-medium, 500) !important;
    color: var(--cwp-text) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

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

.cwp-amenities-modal__search-input {
    all: revert !important;
    width: 100% !important;
    height: var(--cwp-amenity-search-height, 44px) !important;
    padding: 0 16px !important;
    border: 1px solid var(--cwp-border, #ececec) !important;
    border-radius: var(--cwp-amenity-search-radius, 8px) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body, 15px) !important;
    color: var(--cwp-text) !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    background-color: var(--cwp-surface, #FFFFFF) !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.cwp-amenities-modal__search-input:hover {
    all: revert !important;
    width: 100% !important;
    height: var(--cwp-amenity-search-height, 44px) !important;
    padding: 0 16px !important;
    border: 1px solid var(--cwp-border, #ececec) !important;
    border-radius: var(--cwp-amenity-search-radius, 8px) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body, 15px) !important;
    color: var(--cwp-text) !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    background-color: var(--cwp-surface, #FFFFFF) !important;
    outline: none !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   LAZY SECTION — Retry Button
   Theme isolation for the retry button in lazy-loaded error states.
   ========================================================================== */

.cwp-root .cwp-lazy-section__retry {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 20px !important;
    border: 1px solid var(--cwp-border, #e2e8f0) !important;
    border-radius: var(--cwp-radius-md, 8px) !important;
    background: var(--cwp-surface, #ffffff) !important;
    background-color: var(--cwp-surface, #ffffff) !important;
    color: var(--cwp-text, #1e293b) !important;
    font-size: var(--cwp-size-sm, 14px) !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

.cwp-root .cwp-lazy-section__retry:hover {
    background: var(--cwp-surface-alt, #f8fafc) !important;
    background-color: var(--cwp-surface-alt, #f8fafc) !important;
    border-color: var(--cwp-border-dark, #cbd5e1) !important;
}

.cwp-root .cwp-lazy-section__retry:focus {
    background: var(--cwp-surface, #ffffff) !important;
    background-color: var(--cwp-surface, #ffffff) !important;
    border-color: var(--cwp-primary, #1B6B93) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(27, 107, 147, 0.15) !important;
}


.cwp-amenities-modal__search-input:focus {
    all: revert !important;
    width: 100% !important;
    height: var(--cwp-amenity-search-height, 44px) !important;
    padding: 0 16px !important;
    border: 1px solid var(--cwp-primary, #1B6B93) !important;
    border-radius: var(--cwp-amenity-search-radius, 8px) !important;
    font-family: var(--cwp-font-body) !important;
    font-size: var(--cwp-size-body, 15px) !important;
    color: var(--cwp-text) !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    background-color: var(--cwp-surface, #FFFFFF) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(27, 107, 147, 0.15) !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   PAGINATION — Back to Top Button
   Strip theme styles and restore clean pill-shaped button.
   ========================================================================== */

.cwp-root .cwp-pagination__top {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border: 1px solid var(--cwp-border, #ececec) !important;
    border-radius: 9999px !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    background-color: var(--cwp-surface, #FFFFFF) !important;
    color: var(--cwp-text-secondary, #4A6274) !important;
    font-family: var(--cwp-font-body, -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: border-color 150ms ease, color 150ms ease !important;
    box-sizing: border-box !important;
}

.cwp-root .cwp-pagination__top:hover,
.cwp-root .cwp-pagination__top:focus {
    all: revert !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border: 1px solid var(--cwp-text, #1A2B3C) !important;
    border-radius: 9999px !important;
    background: var(--cwp-surface, #FFFFFF) !important;
    background-color: var(--cwp-surface, #FFFFFF) !important;
    color: var(--cwp-text, #1A2B3C) !important;
    font-family: var(--cwp-font-body, -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

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

/* ==========================================================================
   RESPONSIVE — Mobile Touch Target Enforcement (≤768px)
   WCAG 2.5.5 requires minimum 44×44px touch targets on mobile.
   This block enforces minimum sizes on all interactive elements
   that are below the standard.
   ========================================================================== */

@media (max-width: 768px) {
    /* ── Guest +/- Buttons ─────────────────────────────────────── */
    .cwp-root .cwp-guest-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .cwp-root .cwp-guest-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* ── Close Buttons ─────────────────────────────────────────── */
    .cwp-root .cwp-sidebar__popup-close {
        width: 36px !important;
        height: 36px !important;
        /* Larger hit area via padding */
        padding: 4px !important;
    }

    .cwp-root .cwp-modal__close {
        width: 40px !important;
        height: 40px !important;
    }

    /* ── Calendar Navigation Buttons ───────────────────────────── */
    .cwp-root .cwp-cal__nav-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .cwp-root .cwp-calendar-nav {
        width: 44px !important;
        height: 44px !important;
    }

    .cwp-root .cwp-calendar__nav-btn {
        width: 44px !important;
        height: 44px !important;
    }

    /* ── Calendar Day Cells ────────────────────────────────────── */
    .cwp-root .cwp-calendar__day {
        min-height: 44px !important;
        padding: 4px !important;
    }

    .cwp-root button[data-date] {
        min-height: 44px !important;
        padding: 4px !important;
    }

    /* ── Card Carousel Navigation ──────────────────────────────── */
    .cwp-root .cwp-card__carousel-nav {
        width: 36px !important;
        height: 36px !important;
        opacity: 1 !important;
    }

    /* ── Card Save/Favorite Button ─────────────────────────────── */
    .cwp-root .cwp-card__save {
        width: 36px !important;
        height: 36px !important;
    }

    /* ── Icon Buttons (40px → 44px on mobile) ──────────────────── */
    .cwp-root .cwp-btn--icon {
        width: 44px !important;
        height: 44px !important;
    }

    /* ── Search Bar Action Buttons ─────────────────────────────── */
    .cwp-root .cwp-search-bar__action {
        width: 44px !important;
        height: 44px !important;
    }

    /* ── Carousel (Similar Properties) Buttons ─────────────────── */
    .cwp-root .cwp-carousel-btn {
        width: 44px !important;
        height: 44px !important;
    }

    /* ── Action Buttons (Share/Save/Print) ──────────────────────── */
    .cwp-root .cwp-action-btn {
        width: 44px !important;
        height: 44px !important;
    }

    /* ── View Toggle Buttons (Grid/List) ───────────────────────── */
    .cwp-root .cwp-view-toggle__btn {
        width: 36px !important;
        height: 36px !important;
    }

    /* ── Location Picker Clear Button ──────────────────────────── */
    .cwp-root .cwp-location-picker__clear {
        width: 32px !important;
        height: 32px !important;
    }

    /* ── All CTA Buttons: minimum 48px height on mobile ────────── */
    .cwp-root .cwp-btn--primary,
    .cwp-root .cwp-btn--secondary {
        min-height: 48px !important;
    }

    /* ── Booking CTA: maintain 52px ────────────────────────────── */
    .cwp-root .cwp-booking__cta,
    .cwp-root .cwp-sidebar__cta,
    .cwp-root .cwp-reserve-btn {
        min-height: 52px !important;
    }

    /* ── Filter Chips: minimum tap target ──────────────────────── */
    .cwp-root .cwp-filter-chip {
        min-height: 36px !important;
    }

    /* ── Map FAB: generous tap target ──────────────────────────── */
    .cwp-root .cwp-map-fab {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* ── Lightbox Navigation: generous ─────────────────────────── */
    .cwp-root .cwp-lightbox__nav {
        width: 44px !important;
        height: 44px !important;
    }

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

/* ==========================================================================
   RESPONSIVE — Tablet Theme Protection (≤1279px)
   ========================================================================== */

@media (max-width: 1279px) {
    /* Keep filter button 40px circle (no compression) */
    .cwp-root .cwp-search-bar__action--filter {
        width: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    /* Narrow split: show icons, hide text labels */
    .cwp-root .cwp-search-bar__label-icon {
        display: block !important;
    }
    .cwp-root .cwp-search-bar__label-text {
        display: none !important;
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile Touch Target Boost (≤480px)
   Extra-large targets for small screens where precision is harder.
   ========================================================================== */

@media (max-width: 480px) {
    /* Guest buttons: even larger on small phones */
    .cwp-root .cwp-guest-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .cwp-root .cwp-guest-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Card save: match guest button size */
    .cwp-root .cwp-card__save {
        width: 40px !important;
        height: 40px !important;
    }

    /* Carousel dots: slightly larger for tap */
    .cwp-root .cwp-card__carousel-dot {
        width: 8px !important;
        height: 8px !important;
    }

    .cwp-root .cwp-card__carousel-dot--active {
        width: 10px !important;
        height: 10px !important;
    }
}