/**
 * Cloudstay Grid Widget Native Styles (v1.1)
 *
 * Styles for the native search/grid page implementation
 * Uses design tokens from design-tokens.css
 *
 * @package Cloudstay
 * @since 1.2.0
 */

/* ========================================
   Global Scroll Fix - Ensure page scroll is available by default
   ======================================== */
html,
body {
    touch-action: auto;
    -webkit-overflow-scrolling: touch;
}

/* Only block scroll when modals are explicitly open */
body.search-modal-open {
    overflow: hidden !important;
}

/* ========================================
   CSS Variables - Widget Overrides
   Base tokens defined in design-tokens.css
   ======================================== */
:root {
    /* Legacy variable aliases for backward compatibility */
    --cs-background: var(--cs-bg-primary);
    --cs-text: var(--cs-text-primary);
    --cs-border: var(--cs-border-primary);
    --cs-border-light: var(--cs-gray-100);
    --cs-font-family: var(--e-global-typography-text-font-family, inherit);
    --cs-font-size: var(--cs-text-sm);
    --cs-border-radius: var(--cs-radius-md);
}

/* ========================================
   CSS Reset - Isolate typography from site/theme styles
   Only resets inherited properties, not layout
   ======================================== */
.cloudstay-grid-widget,
.cloudstay-grid-widget *,
.cloudstay-search-widget,
.cloudstay-search-widget * {
    /* Reset only inherited typography properties - use Elementor font directly */
    font-family: var(--e-global-typography-text-font-family, inherit) !important;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-style: normal !important;
    text-decoration: none !important;
    box-sizing: border-box;
}

/* Base container styles */
.cloudstay-grid-widget,
.cloudstay-search-widget {
    /* CSS load detection - JS checks for this to know CSS has loaded */
    --cs-grid-loaded: 1;
    font-size: var(--cs-font-size) !important;
    line-height: 1.5 !important;
    color: var(--cs-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Fix wpautop interference
   WordPress wpautop filter adds <p> and <br> tags around whitespace.
   These rules hide/remove those unwanted elements from our widgets.
   ======================================== */
.cloudstay-grid-widget > p,
.cloudstay-grid-widget > br,
.cloudstay-search-widget > p,
.cloudstay-search-widget > br,
.cloudstay-grid-widget p:empty,
.cloudstay-search-widget p:empty,
.cloudstay-cards-widget > p,
.cloudstay-cards-widget > br,
.cloudstay-cards-widget p:empty,
.cloudstay-widget-container > p,
.cloudstay-widget-container > br,
.cloudstay-widget-container p:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* Reset headings */
.cloudstay-grid-widget h1,
.cloudstay-grid-widget h2,
.cloudstay-grid-widget h3,
.cloudstay-grid-widget h4,
.cloudstay-grid-widget h5,
.cloudstay-grid-widget h6,
.cloudstay-search-widget h1,
.cloudstay-search-widget h2,
.cloudstay-search-widget h3,
.cloudstay-search-widget h4,
.cloudstay-search-widget h5,
.cloudstay-search-widget h6 {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: normal !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* Reset paragraphs */
.cloudstay-grid-widget p,
.cloudstay-search-widget p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Reset form elements */
.cloudstay-grid-widget button,
.cloudstay-grid-widget input,
.cloudstay-grid-widget select,
.cloudstay-grid-widget textarea,
.cloudstay-search-widget button,
.cloudstay-search-widget input,
.cloudstay-search-widget select,
.cloudstay-search-widget textarea {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* Reset links */
.cloudstay-grid-widget a,
.cloudstay-search-widget a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Reset lists */
.cloudstay-grid-widget ul,
.cloudstay-grid-widget ol,
.cloudstay-search-widget ul,
.cloudstay-search-widget ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   Elementor Override - Prevent link/button color changes
   Using !important to override Elementor's aggressive styling
   ======================================== */
.cloudstay-grid-widget a,
.cloudstay-grid-widget a:hover,
.cloudstay-grid-widget a:focus,
.cloudstay-grid-widget a:active,
.cloudstay-grid-widget a:visited,
.elementor-widget-container .cloudstay-grid-widget a,
.elementor .cloudstay-grid-widget a,
body.elementor-page .cloudstay-grid-widget a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Override Elementor button styles */
.cloudstay-grid-widget button,
.cloudstay-grid-widget .date-picker-day,
.cloudstay-grid-widget .clear-dates-btn,
.cloudstay-grid-widget .close-datepicker-btn,
.cloudstay-grid-widget .search-field,
body.elementor-page .cloudstay-grid-widget button,
body.elementor-page .cloudstay-grid-widget .date-picker-day,
.elementor .cloudstay-grid-widget button,
.elementor .cloudstay-grid-widget .date-picker-day {
    color: var(--cs-text, #1f2937) !important;
}

/* Sort dropdown options - override button reset for dark mode */
.cloudstay-grid-widget button.sort-option,
body.elementor-page .cloudstay-grid-widget button.sort-option,
.elementor .cloudstay-grid-widget button.sort-option {
    color: var(--sp-dropdown-text, #999999) !important;
}

.cloudstay-grid-widget button.sort-option:hover,
.cloudstay-grid-widget button.sort-option:focus,
.cloudstay-grid-widget button.sort-option.active {
    color: var(--sp-dropdown-hover-text, #ffffff) !important;
}

/* Filter modal buttons - override button reset for dark mode */
.cloudstay-grid-widget button.cs-filter-accordion-toggle,
.cloudstay-grid-widget button.filter-modal-close,
.cloudstay-grid-widget button.counter-btn,
.filter-modal button.cs-filter-accordion-toggle,
.filter-modal button.filter-modal-close,
.filter-modal button.counter-btn {
    color: var(--sp-dropdown-text, #999999) !important;
}

/* Filter modal checkboxes - dark checkmarks in dark mode */
.filter-modal .checkbox-item input[type="checkbox"],
.filter-modal .taxonomy-checkboxes input[type="checkbox"] {
    accent-color: var(--sp-dropdown-text, #999999);
}

/* Filter modal show results button - white bg in dark mode */
.filter-modal .apply-filters-btn {
    background: var(--sp-dropdown-text, #ffffff) !important;
    color: var(--sp-dropdown-bg, #1a1a1a) !important;
}

/* Filter modal accordion dividers - dark in dark mode */
.filter-modal .filter-section--accordion {
    border-top-color: var(--sp-dropdown-border, #333333) !important;
}

/* Toolbar buttons use their own color variable */
.cloudstay-grid-widget .filter-btn,
.cloudstay-grid-widget .sort-btn,
.cloudstay-grid-widget .clear-all-filters-btn,
.cloudstay-grid-widget .map-toggle-btn {
    color: var(--sp-toolbar-btn-text, #666666) !important;
}

/* Date picker specific overrides */
.cloudstay-grid-widget .date-picker-day:not(.disabled) {
    color: var(--cs-text, #1f2937) !important;
}

.cloudstay-grid-widget .date-picker-day.disabled {
    color: var(--cs-text-muted, #9ca3af) !important;
}

.cloudstay-grid-widget .date-picker-day.selected {
    color: white !important;
    background-color: var(--cs-accent, #66B5AB) !important;
}

/* Footer buttons */
.cloudstay-grid-widget .clear-dates-btn,
.cloudstay-grid-widget .close-datepicker-btn,
body.elementor-page .cloudstay-grid-widget .clear-dates-btn,
body.elementor-page .cloudstay-grid-widget .close-datepicker-btn {
    color: var(--cs-text, #1f2937) !important;
    border-color: var(--cs-border, #e5e7eb) !important;
}

/* Apply destination button - white text override */
.cloudstay-grid-widget .apply-destination-btn,
body.elementor-page .cloudstay-grid-widget .apply-destination-btn,
.elementor .cloudstay-grid-widget .apply-destination-btn {
    color: #ffffff !important;
}

/* Search bar text */
.cloudstay-grid-widget .search-field-value,
.cloudstay-grid-widget .search-field-label,
body.elementor-page .cloudstay-grid-widget .search-field-value,
body.elementor-page .cloudstay-grid-widget .search-field-label {
    color: var(--cs-text, #1f2937) !important;
}

.cloudstay-grid-widget .search-field-value.placeholder {
    color: var(--cs-text-light, #6b7280) !important;
}

/* ========================================
   Full Width Layout Override
   ======================================== */
body.cloudstay-full-width .site-content,
body.cloudstay-full-width .content-area,
body.cloudstay-full-width .entry-content,
body.cloudstay-full-width .page-content,
body.cloudstay-full-width main,
body.cloudstay-full-width article,
body.cloudstay-full-width .container,
body.cloudstay-full-width .wrapper,
body.cloudstay-full-width .wp-block-group__inner-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.cloudstay-full-width #primary,
body.cloudstay-full-width #main,
body.cloudstay-full-width .site-main {
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
}

body.cloudstay-full-width #secondary,
body.cloudstay-full-width .sidebar,
body.cloudstay-full-width aside {
    display: none !important;
}

/* Hide scrollbar for search page while keeping scroll functionality */
body.cloudstay-full-width {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.cloudstay-full-width::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Also hide scrollbar on the listings container */
.cloudstay-listings {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cloudstay-listings::-webkit-scrollbar {
    display: none;
}

/* ========================================
   Main Grid Container
   ======================================== */
.cloudstay-grid-widget {
    font-family: var(--e-global-typography-text-font-family, inherit);
    font-size: var(--cs-font-size);
    background: var(--cs-background);
    color: var(--cs-text);
    line-height: 1.5;
    min-height: 100vh;
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

.cloudstay-grid-widget *,
.cloudstay-grid-widget *::before,
.cloudstay-grid-widget *::after {
    box-sizing: border-box;
}

/* ========================================
   Search Widget (Shortcode)
   ======================================== */
.cloudstay-search-widget {
    font-family: var(--e-global-typography-text-font-family, inherit);
    font-size: var(--cs-font-size);
}

.cloudstay-search-form {
    width: 100%;
}

.search-bar-fields {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background-color: var(--sb-container-bg, white) !important;
    border-width: var(--sb-container-border-width, 0) !important;
    border-style: solid !important;
    border-color: var(--sb-container-border-color, #e5e7eb) !important;
    border-radius: var(--sb-container-radius, 0) !important;
    box-shadow: var(--sb-container-shadow, none) !important;
    overflow: visible !important;
}

.search-field-wrapper {
    flex: 1 1 0 !important;
    padding: var(--sb-field-padding, 12px) !important;
    padding-left: calc(var(--sb-field-padding, 12px) + var(--sb-field-padding-left, 0px)) !important;
    min-width: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    background-color: var(--sb-field-bg, #ffffff) !important;
    border: var(--sb-field-border-width, 1px) solid var(--sb-field-border, #e5e7eb) !important;
    border-radius: var(--sb-field-radius, 0) !important;
}

.search-field-wrapper .search-field-label {
    font-size: var(--sb-label-size, 10px);
    font-weight: var(--sb-label-weight, 500);
    color: var(--sb-label-color, var(--cs-text-light));
    text-transform: none;
    letter-spacing: 0.05em;
    margin-bottom: 0;
    margin-right: 4px;
    display: inline-flex;
    flex-shrink: 0;
    white-space: nowrap;
}

.search-field-wrapper .search-field-input {
    width: 100%;
    border: none;
    background: none;
    font-size: 14px;
    color: var(--cs-text);
    padding: 0;
    outline: none;
}

.search-field-wrapper .search-field-input::placeholder {
    color: var(--cs-text-light);
}

/* Search field button (for dropdown triggers) */
.search-field-wrapper .search-field-btn {
    width: 100%;
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    font-size: 14px;
    color: var(--cs-text) !important;
    padding: 0 !important;
    text-align: left;
    cursor: pointer;
    display: block;
}

.search-field-wrapper .search-field-btn:hover,
.search-field-wrapper .search-field-btn:focus,
.search-field-wrapper .search-field-btn:active,
.search-field-wrapper .search-field-btn.active {
    background: none !important;
    background-color: transparent !important;
    color: var(--cs-text) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.search-field-wrapper .search-field-btn .field-value {
    color: var(--sb-value-color, var(--cs-text)) !important;
    font-size: var(--sb-value-size, 14px) !important;
    font-weight: var(--sb-value-weight, 400) !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-field-wrapper .search-field-btn:hover {
    background: none;
}

/* Search widget dropdowns - use modal overlay style */
.cloudstay-search-widget .search-dropdown {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--sb-modal-overlay, rgba(0, 0, 0, 0.5)) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.cloudstay-search-widget .search-dropdown.active {
    display: flex !important;
}

/* Search widget destination dropdown */
.cloudstay-search-widget .destination-dropdown {
    min-width: 300px;
    padding: 16px;
}

.cloudstay-search-widget .destination-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--sp-dropdown-border, var(--cs-border));
    font-size: 14px;
    outline: none;
    background: var(--sp-dropdown-bg, #ffffff) !important;
    color: var(--sp-dropdown-text, var(--cs-text)) !important;
}

.cloudstay-search-widget .destination-input:focus {
    border-color: var(--cs-secondary);
}

.cloudstay-search-widget .destination-suggestions {
    margin-top: 12px;
    max-height: 250px;
    overflow-y: auto;
}

.cloudstay-search-widget .suggestions-hint {
    color: var(--cs-text-muted);
    font-size: 13px;
    margin: 0;
    padding: 8px 0;
}

.cloudstay-search-widget .destination-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid var(--sb-modal-border, var(--cs-border-light));
    font-size: var(--sb-modal-text-size, 14px);
    color: var(--sb-modal-text, var(--cs-text));
}

.cloudstay-search-widget .destination-item:last-child {
    border-bottom: none;
}

.cloudstay-search-widget .destination-item:hover {
    background-color: #f3f4f6;
}

.cloudstay-search-widget .destination-item:first-child {
    font-weight: 600;
}

/* Search widget date picker dropdown */
.cloudstay-search-widget .date-picker-dropdown {
    min-width: 600px;
    padding: 20px;
}

.cloudstay-search-widget .date-picker-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    width: 100%;
}

.cloudstay-search-widget .date-nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cloudstay-search-widget .date-nav-btn:hover {
    background-color: var(--sp-dropdown-hover-bg, #f3f4f6);
}

.cloudstay-search-widget .date-nav-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--sp-dropdown-text, #000);
    pointer-events: none;
}

.cloudstay-search-widget .date-month-title {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--sp-dropdown-text, #000);
}

.cloudstay-search-widget .date-calendars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.cloudstay-search-widget .calendar-month {
    min-width: 250px;
}

.cloudstay-search-widget .calendar-weekdays,
.cloudstay-search-widget .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(40px, 1fr));
    gap: 0;
}

.cloudstay-search-widget .calendar-weekdays {
    margin-bottom: 8px;
}

.cloudstay-search-widget .calendar-weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--cs-text-light);
    min-width: 40px;
    min-height: 32px;
}

.cloudstay-search-widget .calendar-day {
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: none;
    outline: none;
    box-shadow: none;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--sp-dropdown-text, var(--cs-text));
}

.cloudstay-search-widget .calendar-day.empty {
    cursor: default;
}

.cloudstay-search-widget .calendar-day:hover:not(.disabled):not(.selected):not(.check-in):not(.check-out):not(.empty) {
    background-color: var(--cs-accent, #000) !important;
    color: #fff !important;
}

.cloudstay-search-widget .calendar-day.disabled {
    color: var(--sp-dropdown-border, #d1d5db);
    cursor: not-allowed;
    opacity: 0.5;
}

.cloudstay-search-widget .calendar-day.today {
    font-weight: 600;
}

.cloudstay-search-widget .calendar-day.selected,
.cloudstay-search-widget .calendar-day.check-in,
.cloudstay-search-widget .calendar-day.check-out {
    background-color: var(--cs-accent, #000) !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.cloudstay-search-widget .calendar-day.in-range {
    background-color: var(--sp-dropdown-hover-bg, #f7f7f7) !important;
}

.cloudstay-search-widget .date-picker-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cs-border);
}

.cloudstay-search-widget .clear-dates-btn {
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--sp-dropdown-text, var(--cs-text));
    cursor: pointer;
    font-size: 14px;
}

.cloudstay-search-widget .clear-dates-btn:hover {
    text-decoration: underline;
}

.cloudstay-search-widget .apply-dates-btn {
    padding: 8px 24px;
    border: none;
    background: var(--cs-accent, var(--cs-secondary));
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.cloudstay-search-widget .apply-dates-btn:hover {
    background: var(--sp-dropdown-text, #333);
}

/* Search widget guest dropdown */
.cloudstay-search-widget .guest-dropdown {
    min-width: 320px;
    padding: 16px;
}

.cloudstay-search-widget .guest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--cs-border-light);
}

.cloudstay-search-widget .guest-row:last-of-type {
    border-bottom: none;
}

.cloudstay-search-widget .guest-info h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-text);
    margin: 0 0 2px 0;
}

.cloudstay-search-widget .guest-info p {
    font-size: 12px;
    color: var(--cs-text-muted);
    margin: 0;
}

.cloudstay-search-widget .guest-counter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cloudstay-search-widget .guest-counter-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--cs-border);
    background: white;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloudstay-search-widget .guest-counter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cloudstay-search-widget .guest-counter-btn:not(:disabled):hover {
    border-color: var(--cs-secondary);
}

.cloudstay-search-widget .guest-counter-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--cs-text);
    stroke-width: 2;
    fill: none;
}

.cloudstay-search-widget .guest-count {
    min-width: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--cs-text);
}

.cloudstay-search-widget .guest-dropdown-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cs-border);
    display: flex;
    justify-content: flex-end;
}

.cloudstay-search-widget .guest-dropdown-footer .apply-btn {
    padding: 8px 24px;
    border: none;
    background: var(--cs-secondary);
    color: white !important;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.cloudstay-search-widget .guest-dropdown-footer .apply-btn:hover {
    background: #333;
}

/* Filter button */
.search-filter-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--sp-dropdown-text, var(--cs-text)) !important;
    background-color: var(--sp-dropdown-bg, #ffffff) !important;
    border: none !important;
    border-left: 1px solid var(--sp-dropdown-border, var(--cs-border)) !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: background-color 0.2s !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.search-filter-btn:hover {
    background-color: var(--sp-dropdown-hover-bg, #f9fafb) !important;
}

.search-filter-btn svg {
    flex-shrink: 0 !important;
    stroke: var(--sp-dropdown-text, var(--cs-text)) !important;
}

/* Search submit button */
.search-submit-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 32px !important;
    font-size: var(--sb-btn-font-size, 14px) !important;
    font-weight: var(--sb-btn-font-weight, 500) !important;
    color: var(--sb-btn-text, white) !important;
    background-color: var(--sb-btn-bg, var(--cs-accent, #66B5AB)) !important;
    border: none !important;
    border-radius: var(--sb-btn-radius, 0) !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: background-color 0.2s, filter 0.2s !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    align-self: stretch !important;
    margin: 0 !important;
}

.search-submit-btn:hover {
    background-color: var(--sb-btn-bg, var(--cs-accent, #66B5AB)) !important;
    filter: brightness(0.9) !important;
}

.search-submit-btn span,
.search-submit-btn svg {
    color: inherit !important;
    fill: currentColor !important;
}

.search-submit-btn svg {
    flex-shrink: 0 !important;
}

/* Hero style search */
.cloudstay-search-widget.search-hero .search-bar-fields {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.cloudstay-search-widget.search-hero .search-field-wrapper {
    padding: 16px 24px;
}

.cloudstay-search-widget.search-hero .search-submit-btn {
    padding: 20px 40px;
    font-size: 16px;
}

/* Compact style search */
.cloudstay-search-widget.search-compact .search-bar-fields {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cloudstay-search-widget.search-compact .search-field-wrapper {
    padding: 8px 12px;
}

.cloudstay-search-widget.search-compact .search-submit-btn {
    padding: 12px 20px;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .search-bar-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .search-bar-fields .search-bar-divider {
        width: 100%;
        height: 1px;
    }

    .search-field-wrapper {
        padding: 12px 16px;
    }

    .search-submit-btn {
        justify-content: center;
    }
}

/* ========================================
   Search Bar (Grid Page & Standalone Shortcode)
   ======================================== */
.cloudstay-search-bar,
.cloudstay-search-widget.cloudstay-search-bar {
    position: relative !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
}

/* Ensure standalone search bar is properly visible */
.cloudstay-search-widget.cloudstay-search-bar .grid-search-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background-color: var(--sb-container-bg, #ffffff) !important;
    border: var(--sb-field-border-width, 0) solid var(--sb-field-border, #dddddd) !important;
    border-radius: var(--sb-container-radius, 0) !important;
    box-shadow: var(--sb-container-shadow, none) !important;
    overflow: visible !important;
    position: relative !important;
    padding: var(--sb-container-padding, 0) !important;
    gap: var(--sb-field-gap, 0) !important;
}

.cloudstay-search-widget.cloudstay-search-bar .search-field {
    flex: 1 !important;
    padding: var(--sb-inner-padding-y, 12px) var(--sb-inner-padding-x, 16px) !important;
    min-height: var(--sb-field-height, 56px) !important;
    text-align: left !important;
    border: none !important;
    background: var(--sb-field-bg, #ffffff) !important;
    background-color: var(--sb-field-bg, #ffffff) !important;
    border-radius: var(--sb-field-radius, 32px) !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    position: relative !important;
    color: var(--sb-value-color, #222222) !important;
    outline: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

.cloudstay-search-widget.cloudstay-search-bar .search-field:hover {
    background-color: var(--sb-field-bg-hover, #f7f7f7) !important;
}

.cloudstay-search-widget.cloudstay-search-bar .search-field-label {
    font-size: var(--sb-label-size, 12px) !important;
    font-weight: var(--sb-label-weight, 600) !important;
    color: var(--sb-label-color, #222222) !important;
    text-transform: none !important;
    margin: 0 !important;
    margin-right: 4px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.cloudstay-search-widget.cloudstay-search-bar .search-field-value {
    font-size: var(--sb-placeholder-size, 14px) !important;
    color: var(--sb-value-color, #222222) !important;
    font-weight: var(--sb-value-weight, 400) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.cloudstay-search-widget.cloudstay-search-bar .search-field-value.placeholder {
    color: var(--sb-placeholder-color, #717171) !important;
}

.cloudstay-search-widget.cloudstay-search-bar .search-bar-divider {
    width: 1px !important;
    background: var(--sb-divider-color, #dddddd) !important;
    margin: 8px 0 !important;
    flex-shrink: 0 !important;
}

.cloudstay-search-widget.cloudstay-search-bar .search-btn {
    padding: 0 24px !important;
    font-size: var(--sb-btn-size, 16px) !important;
    font-weight: var(--sb-btn-weight, 600) !important;
    color: var(--sb-btn-text, #ffffff) !important;
    -webkit-text-fill-color: var(--sb-btn-text, #ffffff) !important;
    background-color: var(--sb-btn-bg, #ff385c) !important;
    border: none !important;
    border-radius: var(--sb-btn-radius, 32px) !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    flex-shrink: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 0 !important;
}

.cloudstay-search-widget.cloudstay-search-bar .search-btn:hover {
    background-color: var(--sb-btn-bg-hover, #e31c5f) !important;
}

/* Reset for search bar elements to prevent Elementor/WP overrides */
.cloudstay-search-bar *,
.grid-search-bar *,
.cloudstay-grid-widget .grid-search-bar *,
.elementor .grid-search-bar *,
body.elementor-page .grid-search-bar * {
    padding: 0 !important;
    margin: 0 !important;
}

.grid-search-bar .search-field,
.cloudstay-grid-widget .search-field,
.elementor .cloudstay-grid-widget .search-field,
body.elementor-page .cloudstay-grid-widget .search-field {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    flex: 1 !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.4 !important;
    gap: 8px !important;
}

.grid-search-bar .search-field-label,
.cloudstay-grid-widget .search-field-label {
    padding: 0 !important;
    margin: 0 !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.grid-search-bar .search-field-value,
.cloudstay-grid-widget .search-field-value {
    padding: 0 !important;
    margin: 0 !important;
}

.grid-search-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background-color: var(--sb-container-bg, white) !important;
    border: var(--sb-field-border-width, 1px) solid var(--sb-field-border, var(--cs-border)) !important;
    border-radius: var(--sb-container-radius, 0) !important;
    box-shadow: var(--sb-container-shadow, none) !important;
    overflow: visible !important;
    position: relative !important;
    padding: var(--sb-container-padding, 0) !important;
    gap: var(--sb-field-gap, 0) !important;
}

/* Search bar fields white background on search page */
.cloudstay-grid-widget .grid-search-bar .search-field,
.cloudstay-grid-widget .cloudstay-search-bar .search-field {
    background-color: #ffffff !important;
}

.search-field {
    flex: 1;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: var(--sb-inner-padding-y, 12px) var(--sb-inner-padding-x, 16px) !important;
    min-height: var(--sb-field-height, 56px) !important;
    text-align: left;
    border: none !important;
    background: var(--sb-field-bg, white) !important;
    background-color: var(--sb-field-bg, white) !important;
    border-radius: var(--sb-field-radius, 0) !important;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative !important;
    color: var(--sb-value-color, var(--cs-text)) !important;
    outline: none !important;
    box-shadow: none !important;
}

.search-field:hover {
    background-color: var(--sb-field-bg-hover, #f9fafb) !important;
}

.search-field:focus,
.search-field:active,
.search-field.active {
    background: var(--sb-field-bg-focus, white) !important;
    background-color: var(--sb-field-bg-focus, white) !important;
    color: var(--sb-value-color, var(--cs-text)) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Elementor override for search fields */
.elementor .search-field,
.elementor-widget-container .search-field,
body.elementor-page .search-field {
    background: var(--sb-field-bg, white) !important;
    background-color: var(--sb-field-bg, white) !important;
    color: var(--sb-value-color, var(--cs-text)) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.elementor .search-field:hover,
body.elementor-page .search-field:hover {
    background-color: var(--sb-field-bg-hover, #f9fafb) !important;
}

.elementor .search-field:focus,
.elementor .search-field:active,
body.elementor-page .search-field:focus,
body.elementor-page .search-field:active {
    background: var(--sb-field-bg-focus, white) !important;
    background-color: var(--sb-field-bg-focus, white) !important;
}

.search-field-label {
    font-size: var(--sb-label-size, 10px) !important;
    font-weight: var(--sb-label-weight, 500) !important;
    color: var(--sb-label-color, var(--cs-text-light)) !important;
    text-transform: none !important;
    letter-spacing: 0.05em;
    margin-bottom: 0 !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.search-field-value {
    font-size: var(--sb-placeholder-size, 14px) !important;
    font-weight: var(--sb-value-weight, 400) !important;
    color: var(--sb-value-color, var(--cs-text)) !important;
}

.search-field-value.placeholder {
    color: var(--sb-placeholder-color, var(--cs-text-light)) !important;
}

.search-bar-divider {
    width: 1px !important;
    min-width: 1px !important;
    align-self: stretch !important;
    background-color: var(--sb-divider-color, var(--cs-border)) !important;
    flex-shrink: 0 !important;
    min-height: 24px !important;
    display: block !important;
    margin: 0 !important;
}

.search-btn,
.cloudstay-search-bar .search-btn,
.cloudstay-grid-widget .search-btn,
button.search-btn {
    padding: 0 32px !important;
    font-size: 14px !important;
    font-weight: var(--sb-btn-weight, 500) !important;
    color: var(--sb-btn-text, #ffffff) !important;
    -webkit-text-fill-color: var(--sb-btn-text, #ffffff) !important;
    background-color: var(--sb-btn-bg, var(--cs-accent, #66B5AB)) !important;
    border: none !important;
    border-radius: var(--sb-btn-radius, 0) !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: background-color 0.2s, filter 0.2s !important;
    flex-shrink: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    /* Override Elementor/theme button styles */
    box-shadow: none !important;
    text-decoration: none !important;
}

.search-btn:hover,
.cloudstay-search-bar .search-btn:hover,
.cloudstay-grid-widget .search-btn:hover,
button.search-btn:hover {
    background-color: var(--sb-btn-bg-hover, var(--sb-btn-bg, var(--cs-accent, #66B5AB))) !important;
    filter: brightness(0.9) !important;
    color: var(--sb-btn-text, #ffffff) !important;
    -webkit-text-fill-color: var(--sb-btn-text, #ffffff) !important;
}

/* ========================================
   Search Dropdowns (Modal Style)
   ======================================== */
/* Body scroll lock when modal is open */
body.search-modal-open {
    overflow: hidden !important;
    padding-right: var(--scrollbar-width, 0px) !important;
}

/* Search dropdowns - minimal display handling */
.search-dropdown {
    display: none;
}

/* Remove any double-container styling from grid CSS */
.search-dropdown-content {
    /* Styling handled by cloudstay-search-bar.css */
    font-family: var(--e-global-typography-text-font-family, inherit) !important;
}

.search-dropdown-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--sb-modal-border, var(--cs-border)) !important;
}

.search-dropdown-header h3 {
    margin: 0 !important;
    font-size: var(--sb-modal-title-size, 18px) !important;
    font-weight: var(--sb-modal-title-weight, 600) !important;
    color: var(--sb-modal-text, var(--cs-text)) !important;
}

.search-dropdown-close {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background 0.2s !important;
}

.search-dropdown-close:hover {
    background: #f3f4f6 !important;
}

.search-dropdown-close svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--sb-modal-close-color, #000) !important;
    stroke-width: 2 !important;
    pointer-events: none !important;
}

.search-dropdown-body {
    padding: 24px !important;
}

/* Date picker modal improvements */
.date-picker-dropdown .search-dropdown-content {
    width: 700px !important;
    max-width: 95vw !important;
}

.date-picker-dropdown .search-dropdown-body {
    position: relative !important;
    padding: 24px 32px !important;
}

/* Position nav row to align with month titles */
.date-picker-dropdown .date-picker-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
    height: 32px !important;
}

/* Hide empty title placeholder in nav */
.date-picker-dropdown .date-picker-nav .date-picker-title {
    display: none !important;
}

/* Position months container to overlap with nav */
.date-picker-dropdown .date-picker-months {
    margin-top: -32px !important;
    padding-top: 0 !important;
}

/* Add padding to month titles to make room for arrows */
.date-picker-dropdown .date-picker-month-title {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.date-picker-dropdown .date-month-title {
    flex: 1 !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--sp-dropdown-text, #000) !important;
}

.date-picker-dropdown .date-nav-btn {
    flex-shrink: 0 !important;
}

.date-picker-dropdown .date-picker-nav-btn {
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.date-picker-dropdown .date-picker-nav-btn:hover {
    background: #f3f4f6 !important;
    border-radius: 50% !important;
}

.date-picker-dropdown .date-picker-nav-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #000 !important;
    pointer-events: none !important;
}

/* Date picker title - expands to fill space between nav buttons */
.date-picker-title {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 48px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #000 !important;
}

.date-picker-dropdown .date-picker-titles {
    display: flex !important;
    flex: 1 !important;
}

.date-picker-dropdown .date-picker-title-left,
.date-picker-dropdown .date-picker-title-right {
    flex: 1 !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #000 !important;
}

/* Search bar date picker - uses date-month-title class */
.date-picker-dropdown .date-month-title {
    flex: 1 !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--sp-dropdown-text, #000) !important;
}

.date-picker-dropdown .date-nav-btn {
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
}

.date-picker-dropdown .date-nav-btn:hover {
    background: var(--sp-dropdown-hover-bg, #f3f4f6) !important;
}

.date-picker-dropdown .date-nav-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--sp-dropdown-text, #000) !important;
    pointer-events: none !important;
}

.date-picker-dropdown .date-calendars {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    margin-bottom: 20px !important;
}

.date-picker-dropdown .calendar-month {
    min-width: 250px !important;
}

.date-picker-dropdown .calendar-weekdays,
.date-picker-dropdown .calendar-days {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(40px, 1fr)) !important;
    gap: 0 !important;
}

.date-picker-dropdown .calendar-weekdays {
    margin-bottom: 8px !important;
    margin-top: 8px !important;
}

.date-picker-dropdown .calendar-weekday {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    min-width: 40px !important;
    min-height: 32px !important;
}

.date-picker-dropdown .calendar-day {
    height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    color: #000 !important;
    border-radius: 0 !important;
}

.date-picker-dropdown .calendar-day.empty {
    cursor: default !important;
}

.date-picker-dropdown .calendar-day:hover:not(.disabled):not(.selected):not(.check-in):not(.check-out):not(.empty) {
    background-color: #000 !important;
    color: #fff !important;
}

.date-picker-dropdown .calendar-day.selected,
.date-picker-dropdown .calendar-day.check-in,
.date-picker-dropdown .calendar-day.check-out {
    background-color: #000 !important;
    color: #fff !important;
}

.date-picker-dropdown .calendar-day.in-range {
    background-color: #f7f7f7 !important;
}

.date-picker-dropdown .calendar-day.disabled {
    color: #d1d5db !important;
    cursor: default !important;
}

.date-picker-dropdown .date-picker-months {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
}

.date-picker-dropdown .date-picker-month {
    width: 280px !important;
    display: flex !important;
    flex-direction: column !important;
}

.date-picker-dropdown .date-picker-month > * {
    flex-shrink: 0 !important;
}

.date-picker-dropdown .date-picker-month-title {
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin-bottom: 20px !important;
    color: var(--sp-dropdown-text, #000) !important;
    line-height: 28px !important;
}

.date-picker-dropdown .date-picker-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    margin-bottom: 8px !important;
}

.date-picker-dropdown .date-picker-weekday {
    text-align: center !important;
    padding: 8px 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
}

.date-picker-dropdown .date-picker-days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
}

.date-picker-dropdown .date-picker-day {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.date-picker-dropdown .date-picker-day:hover:not(.disabled):not(.selected):not(.check-in):not(.check-out) {
    background-color: #000 !important;
    color: #fff !important;
}

.date-picker-dropdown .date-picker-day.disabled {
    color: #d1d5db !important;
    cursor: not-allowed !important;
}

.date-picker-dropdown .date-picker-day.today {
    font-weight: 600 !important;
}

.date-picker-dropdown .date-picker-day.selected,
.date-picker-dropdown .date-picker-day.check-in,
.date-picker-dropdown .date-picker-day.check-out {
    background-color: #000 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.date-picker-dropdown .date-picker-day.in-range {
    background-color: #f7f7f7 !important;
    border-radius: 0 !important;
}

.date-picker-dropdown .date-picker-footer {
    display: flex !important;
    justify-content: space-between !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--cs-border) !important;
}

.date-picker-dropdown .clear-dates-btn,
.date-picker-dropdown .close-datepicker-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid #e5e7eb !important;
    background: white !important;
    color: #000 !important;
    cursor: pointer !important;
}

.date-picker-dropdown .clear-dates-btn:hover,
.date-picker-dropdown .close-datepicker-btn:hover {
    background: #f3f4f6 !important;
}

/* Guest dropdown modal improvements */
.guest-dropdown .search-dropdown-body {
    padding: 24px !important;
}

.guest-dropdown .guest-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid var(--cs-border-light) !important;
}

.guest-dropdown .guest-row:first-child {
    padding-top: 0 !important;
}

.guest-dropdown .guest-row:last-of-type {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.guest-dropdown .guest-info h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--cs-text) !important;
    margin: 0 0 4px 0 !important;
}

.guest-dropdown .guest-info p {
    font-size: 13px !important;
    color: var(--cs-text-muted) !important;
    margin: 0 !important;
}

.guest-dropdown .guest-counter {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.guest-dropdown .guest-counter-btn {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    background: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000 !important;
}

.guest-dropdown .guest-counter-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.guest-dropdown .guest-counter-btn:not(:disabled):hover {
    border-color: #000 !important;
}

.guest-dropdown .guest-counter-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #000 !important;
    stroke-width: 2.5 !important;
    fill: none !important;
}

.guest-dropdown .guest-counter-value {
    min-width: 32px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--cs-text) !important;
}

.guest-dropdown .guest-dropdown-footer {
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--cs-border) !important;
}

.guest-dropdown .apply-btn {
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid #e5e7eb !important;
    background: white !important;
    color: #000 !important;
    cursor: pointer !important;
}

.guest-dropdown .apply-btn:hover {
    background: #f3f4f6 !important;
}

/* Destination modal content */
.destination-dropdown .search-dropdown-content {
    width: 400px !important;
}

/* Date picker modal content */
.date-picker-dropdown .search-dropdown-content {
    width: 700px !important;
}

/* Guest modal content */
.guest-dropdown .search-dropdown-content {
    width: 360px !important;
}

/* Mobile responsive modals */
@media (max-width: 767px) {
    .search-dropdown-content {
        width: calc(100vw - 40px) !important;
        max-width: 100% !important;
    }

    .date-picker-dropdown .search-dropdown-content {
        width: calc(100vw - 40px) !important;
    }
}

/* Ensure search bar wrapper allows overflow for dropdowns */
.cloudstay-search-bar {
    position: relative !important;
    overflow: visible !important;
    z-index: 1000 !important;
}

/* Force Elementor parent containers to allow dropdown overflow */
.elementor-widget-container:has(.cloudstay-search-widget),
.elementor-widget-container:has(.cloudstay-search-bar),
.elementor-widget-container:has(.grid-search-bar),
.e-con:has(.cloudstay-search-widget),
.e-con:has(.cloudstay-search-bar),
.elementor-element:has(.cloudstay-search-widget),
.elementor-element:has(.cloudstay-search-bar) {
    overflow: visible !important;
}

/* Fallback for browsers without :has() support - target common Elementor classes */
.elementor-widget-shortcode,
.elementor-shortcode,
.elementor-widget-text-editor {
    overflow: visible !important;
}

/* Also target the section/column containing search */
.elementor-section:has(.cloudstay-search-widget),
.elementor-column:has(.cloudstay-search-widget),
.elementor-container:has(.cloudstay-search-widget) {
    overflow: visible !important;
}

/* Destination Dropdown */
.destination-dropdown {
    padding: 16px;
}

.destination-dropdown input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--cs-border);
    font-size: 14px;
    outline: none;
}

.destination-dropdown input:focus {
    border-color: var(--cs-secondary);
}

/* Destination dropdown footer */
.destination-dropdown .search-dropdown-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    border-top: 1px solid var(--sb-modal-border, var(--cs-border)) !important;
    background: var(--sb-modal-bg, white) !important;
}

/* Clear button - matches calendar clear style */
.clear-destination-btn {
    background: transparent !important;
    border: none !important;
    color: var(--sb-modal-clear-color, #222222) !important;
    font-size: var(--sb-modal-text-size, 14px) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    padding: 12px 16px !important;
}

.clear-destination-btn:hover {
    filter: brightness(0.8) !important;
}

/* Apply button - uses modal apply button colors */
.apply-destination-btn {
    background-color: var(--sb-modal-apply-bg, #E35323) !important;
    color: var(--sb-modal-apply-text, #ffffff) !important;
    border: none !important;
    border-radius: var(--sb-btn-radius, 8px) !important;
    padding: 12px 24px !important;
    font-size: var(--sb-modal-text-size, 14px) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.apply-destination-btn:hover {
    filter: brightness(0.9) !important;
}

.destination-suggestions {
    margin-top: 12px;
    max-height: 300px;
    overflow-y: auto;
    padding: 8px 0;
}

.destination-suggestion,
.destination-item {
    padding: 12px 16px !important;
    margin: 4px 8px !important;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 8px;
    font-size: var(--sb-modal-text-size, 14px) !important;
    line-height: 1.5;
    color: var(--sb-modal-text, var(--cs-text, #1f2937)) !important;
    background: transparent;
}

.destination-suggestion:hover,
.destination-item:hover {
    background-color: #f3f4f6 !important;
}

.destination-item:first-child {
    font-weight: 600;
}

/* Date Picker Dropdown - Unified styling with search page modal */
.date-picker-dropdown {
    padding: 0 !important;
    min-width: 700px !important;
    width: auto;
    right: auto; /* Override search-dropdown right: 0 to allow overflow */
}

.date-picker-dropdown .search-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0 !important;
    border-bottom: none !important;
}

.date-picker-dropdown .search-dropdown-header h3 {
    font-size: var(--sb-modal-title-size, 18px) !important;
    font-weight: var(--sb-modal-title-weight, 600) !important;
    color: var(--sb-modal-text, var(--cs-text, #1f2937)) !important;
    margin: 0 !important;
}

.date-picker-dropdown .search-dropdown-close {
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--sb-modal-close-color, #000) !important;
    border-radius: 50% !important;
}

.date-picker-dropdown .search-dropdown-close:hover {
    background: #f3f4f6 !important;
}

.date-picker-dropdown .search-dropdown-close svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--sb-modal-close-color, #000) !important;
    pointer-events: none !important;
}

.date-picker-dropdown .search-dropdown-body {
    position: relative !important;
    padding: 24px 32px !important;
}

.date-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.date-picker-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.date-picker-nav-btn,
.prev-month-btn,
.next-month-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #222 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    transition: all 0.15s ease !important;
}

.date-picker-nav-btn:hover,
.prev-month-btn:hover,
.next-month-btn:hover {
    background-color: #f5f5f5 !important;
    border-color: #999 !important;
}

.date-picker-nav-btn svg,
.prev-month-btn svg,
.next-month-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #222 !important;
    stroke-width: 2 !important;
    fill: none !important;
    pointer-events: none !important;
}

.date-month-title {
    flex: 1 !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #000 !important;
}

.date-picker-months {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    position: relative !important;
}

.date-picker-month {
    width: 280px !important;
    display: flex !important;
    flex-direction: column !important;
}

.date-picker-month > * {
    flex-shrink: 0 !important;
}

.date-picker-month-title {
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin-bottom: 20px !important;
    color: #000 !important;
    line-height: 28px !important;
}

.date-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
}

.date-picker-weekday {
    text-align: center;
    padding: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cs-text-light, #6b7280);
}

.date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.date-picker-day {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 50%;
    color: var(--cs-text, #1f2937);
}

.date-picker-day:hover:not(.disabled):not(.selected):not(.check-in):not(.check-out) {
    background-color: #000 !important;
    color: #fff !important;
}

.date-picker-day.disabled {
    color: #d1d5db;
    cursor: not-allowed;
}

.date-picker-day.selected,
.date-picker-day.check-in,
.date-picker-day.check-out {
    background-color: #000 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.date-picker-day.in-range {
    background-color: #f7f7f7 !important;
    border-radius: 0 !important;
}

.date-picker-day.today {
    font-weight: 600;
}

.date-picker-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid var(--cs-border, #e5e7eb);
}

.date-picker-dropdown .clear-dates-btn,
.date-picker-dropdown .close-datepicker-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid #e5e7eb !important;
    background: white !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: #000 !important;
}

.date-picker-dropdown .clear-dates-btn:hover,
.date-picker-dropdown .close-datepicker-btn:hover {
    background: #f3f4f6 !important;
}

/* Guest Selector Dropdown */
.guest-dropdown {
    padding: 24px;
    min-width: 320px;
}

.guest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--cs-border);
}

.guest-row:last-child {
    border-bottom: none;
}

.guest-info h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-text) !important;
    margin: 0 0 2px;
}

.guest-info p {
    font-size: 11px;
    color: var(--cs-text-light) !important;
    margin: 0;
}

.guest-counter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guest-counter-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #ccc;
    border-radius: 0;
    background: white !important;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #1f2937 !important;
}

.guest-counter-btn svg {
    stroke: #1f2937 !important;
    stroke-width: 2 !important;
    width: 14px;
    height: 14px;
    fill: none !important;
}

.guest-counter-btn:hover:not(:disabled) {
    border-color: var(--cs-secondary);
}

.guest-counter-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.guest-counter-btn:disabled svg {
    stroke: #9ca3af !important;
}

.guest-counter-value {
    min-width: 20px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: var(--cs-text) !important;
}

.guest-dropdown-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cs-border);
}

.guest-dropdown-footer .apply-btn {
    padding: 8px 16px;
    border: 1px solid var(--cs-border);
    background: white;
    color: var(--cs-text, #1f2937) !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.guest-dropdown-footer .apply-btn:hover {
    border-color: var(--cs-secondary);
}

/* ========================================
   Filter Bar
   ======================================== */
.cloudstay-filter-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
}

.filter-bar-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--sp-toolbar-btn-border, var(--cs-border)) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: var(--sp-toolbar-btn-bg, white) !important;
    color: var(--sp-toolbar-btn-text, var(--cs-text)) !important;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    border-color: var(--sp-toolbar-btn-hover-border, var(--cs-secondary)) !important;
    color: var(--sp-toolbar-btn-hover-text, var(--cs-text)) !important;
}

.filter-btn.active {
    background-color: var(--cs-secondary);
    color: white;
}

/* Clear All Filters Button */
.clear-all-filters-btn {
    display: none;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--sp-toolbar-btn-border, var(--cs-border)) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: var(--sp-toolbar-btn-bg, white) !important;
    color: var(--sp-toolbar-btn-text, var(--cs-text)) !important;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0 !important;
}

.clear-all-filters-btn.visible {
    display: inline-flex !important;
}

.clear-all-filters-btn:hover {
    border-color: var(--sp-toolbar-btn-hover-border, #dc2626) !important;
    color: var(--sp-toolbar-btn-hover-text, #dc2626) !important;
}

.clear-all-filters-btn svg {
    width: 12px !important;
    height: 12px !important;
    stroke: currentColor !important;
    border-color: var(--cs-secondary);
}

.properties-count {
    font-size: var(--sp-count-font-size, 12px) !important;
    color: var(--sp-count-text-color, var(--cs-text-muted)) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Hide property count until listings are loaded to avoid showing "0 properties" */
.cloudstay-grid-widget:not(.listings-loaded) .properties-count {
    visibility: hidden !important;
}

.properties-count strong {
    font-weight: 500 !important;
    color: var(--sp-count-number-color, var(--cs-text)) !important;
}

/* Show all link for map filter reset */
.show-all-link {
    background: none !important;
    border: none !important;
    color: var(--cs-accent, #66B5AB) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    padding: 0 !important;
    margin: 0 !important;
}

.show-all-link:hover {
    color: var(--cs-secondary) !important;
}

/* Show all button in no results */
.show-all-btn {
    display: inline-block !important;
    background: var(--cs-accent, #66B5AB) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin-top: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.show-all-btn:hover {
    background: var(--cs-secondary) !important;
}

.filter-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sort-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    color: var(--sp-toolbar-btn-text, var(--cs-text-muted)) !important;
    text-transform: uppercase !important;
    background: var(--sp-toolbar-btn-bg, transparent) !important;
    border: 1px solid var(--sp-toolbar-btn-border, transparent) !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s !important;
}

.sort-btn:hover,
.sort-btn:focus,
.sort-btn:active,
.sort-btn.active {
    color: var(--sp-toolbar-btn-hover-text, var(--cs-text)) !important;
    border-color: var(--sp-toolbar-btn-hover-border, transparent) !important;
    background: var(--sp-toolbar-btn-bg, transparent) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sort-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--sp-dropdown-bg, #ffffff) !important;
    border: 1px solid var(--sp-dropdown-border, var(--cs-border)) !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 9999;
    display: none;
    overflow: hidden;
    color: var(--sp-dropdown-text, #1f1f1f) !important;
}

.sort-dropdown.active {
    display: block;
}

.sort-wrapper {
    position: relative;
}

.sort-option,
.cloudstay-grid-widget .sort-option,
.sort-dropdown .sort-option {
    display: block !important;
    width: 100% !important;
    padding: 10px 16px !important;
    text-align: left !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: var(--sp-dropdown-text, #999999) !important;
    transition: all 0.15s ease !important;
}

.sort-option:hover,
.sort-option:focus,
.cloudstay-grid-widget .sort-option:hover,
.cloudstay-grid-widget .sort-option:focus,
.sort-dropdown .sort-option:hover,
.sort-dropdown .sort-option:focus {
    background-color: var(--sp-dropdown-hover-bg, #f3f4f6) !important;
    color: var(--sp-dropdown-hover-text, #ffffff) !important;
}

.sort-option.active,
.cloudstay-grid-widget .sort-option.active,
.sort-dropdown .sort-option.active {
    font-weight: 600 !important;
    background-color: var(--sp-dropdown-hover-bg, #f3f4f6) !important;
    color: var(--sp-dropdown-hover-text, #ffffff) !important;
}

.map-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--sp-toolbar-btn-bg, white) !important;
    color: var(--sp-toolbar-btn-text, var(--cs-text)) !important;
    border: 1px solid var(--sp-toolbar-btn-border, var(--cs-border)) !important;
    padding: 8px 16px !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.map-toggle-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    stroke: var(--sp-toolbar-btn-text, var(--cs-text)) !important;
}

.map-toggle-btn:hover {
    border-color: var(--sp-toolbar-btn-hover-border, var(--cs-secondary)) !important;
    background: var(--sp-toolbar-btn-bg, white) !important;
    color: var(--sp-toolbar-btn-hover-text, var(--cs-text)) !important;
}

.map-toggle-btn:hover svg {
    stroke: var(--sp-toolbar-btn-hover-text, var(--cs-text)) !important;
}

/* ========================================
   Filter Modal
   ======================================== */
.filter-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.filter-modal-overlay.active {
    display: flex;
}

.filter-modal {
    background: var(--sp-dropdown-bg, #ffffff);
    color: var(--sp-dropdown-text, #1f1f1f);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.filter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--cs-border);
    flex-shrink: 0;
}

.filter-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--sp-dropdown-text, #1f1f1f);
}

.filter-modal-close {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--sp-dropdown-border, #e5e7eb) !important;
    border-radius: 50% !important;
    background: var(--sp-dropdown-bg, #ffffff) !important;
    cursor: pointer !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--sp-dropdown-text, #222) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.filter-modal-close:hover {
    background: var(--sp-dropdown-hover-bg, #f3f4f6) !important;
}

.filter-modal-close svg {
    width: 16px !important;
    height: 16px !important;
    stroke: var(--sp-dropdown-text, #222) !important;
    fill: none !important;
    display: block !important;
}

.filter-modal-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sp-dropdown-border, #ccc) var(--sp-dropdown-bg, #ffffff);
}

.filter-modal-body::-webkit-scrollbar {
    width: 8px;
}

.filter-modal-body::-webkit-scrollbar-track {
    background: var(--sp-dropdown-bg, #ffffff);
}

.filter-modal-body::-webkit-scrollbar-thumb {
    background-color: var(--sp-dropdown-border, #ccc);
    border-radius: 4px;
}

.filter-section {
    margin-bottom: 32px;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--sp-dropdown-text, var(--cs-text));
}

/* Price Range Slider */
.price-range-container {
    padding: 0 8px;
}

.price-range-inputs {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.price-input-group {
    flex: 1;
}

.price-input-group label {
    display: block;
    font-size: 12px;
    color: var(--cs-text-light);
    margin-bottom: 4px;
}

.price-input-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sp-dropdown-border, var(--cs-border));
    background: var(--sp-dropdown-bg, #ffffff);
    color: var(--sp-dropdown-text, #1f1f1f);
    font-size: 14px;
}

.price-slider {
    position: relative;
    height: 4px;
    background: var(--cs-border);
    margin: 24px 0;
}

.price-slider-track {
    position: absolute;
    height: 100%;
    background: var(--cs-secondary);
}

.price-slider-thumb {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--cs-secondary);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
}

/* Property Type Checkboxes */
.property-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--cs-secondary);
}

.checkbox-item label {
    font-size: 14px;
    cursor: pointer;
    color: var(--sp-dropdown-text, inherit);
}

/* Bedrooms/Bathrooms Counter */
.counter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--cs-border);
}

.counter-row:last-child {
    border-bottom: none;
}

.counter-label {
    font-size: 14px;
    color: var(--sp-dropdown-text, var(--cs-text));
}

.counter-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.filter-modal .counter-btn,
.counter-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--sp-dropdown-border, #e5e7eb) !important;
    border-radius: 50% !important;
    background: var(--sp-dropdown-bg, #ffffff) !important;
    cursor: pointer !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--sp-dropdown-text, #222) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.filter-modal .counter-btn:hover:not(:disabled),
.counter-btn:hover:not(:disabled) {
    border-color: var(--sp-dropdown-text, #222) !important;
    background: var(--sp-dropdown-hover-bg, #f3f4f6) !important;
}

.filter-modal .counter-btn:disabled,
.counter-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.filter-modal .counter-btn svg,
.counter-btn svg {
    width: 12px !important;
    height: 12px !important;
    stroke: var(--sp-dropdown-text, #222) !important;
    stroke-width: 2.5 !important;
    fill: none !important;
    display: block !important;
}

.counter-value {
    min-width: 24px;
    text-align: center;
    font-weight: 500;
    color: var(--sp-dropdown-text, inherit);
}

/* Amenities Checkboxes */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* ========================================
   Taxonomy Filter Accordions
   ======================================== */
.filter-section--accordion {
    border-top: 1px solid var(--cs-border);
    padding-top: 16px;
    margin-top: 16px;
}

.filter-section--accordion:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 24px;
}

/* Unique cs- prefix to prevent Elementor conflicts */
.filter-section--accordion .cs-filter-accordion-toggle,
.cs-filter-accordion-toggle {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--sp-dropdown-text, var(--cs-text, #222)) !important;
    text-align: left !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.filter-section--accordion .cs-filter-accordion-toggle:hover,
.cs-filter-accordion-toggle:hover {
    color: var(--sp-dropdown-hover-text, var(--cs-secondary)) !important;
    background: transparent !important;
}

.filter-section--accordion:not(.collapsed) .cs-filter-accordion-toggle,
.filter-section--accordion.active .cs-filter-accordion-toggle {
    color: var(--sp-dropdown-hover-text, var(--sp-dropdown-text, #222)) !important;
}

.filter-section--accordion .cs-filter-accordion-toggle:focus,
.cs-filter-accordion-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

.filter-section--accordion:focus-within {
    outline: none !important;
}

.filter-section--accordion .cs-filter-accordion-title,
.cs-filter-accordion-title {
    flex: 1 !important;
    color: inherit !important;
}

.filter-section--accordion .cs-filter-accordion-count,
.cs-filter-accordion-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    background: #e53935 !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    margin-left: 8px !important;
}

.filter-section--accordion .cs-filter-accordion-count.hidden,
.cs-filter-accordion-count.hidden {
    display: none !important;
}

.filter-section--accordion .cs-filter-accordion-chevron,
.cs-filter-accordion-chevron {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
}

.filter-section--accordion.collapsed .cs-filter-accordion-chevron {
    transform: rotate(-90deg) !important;
}

.filter-accordion-content {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding-bottom: 8px;
}

.filter-section--accordion.collapsed .filter-accordion-content {
    max-height: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* Full height option - no scrollbar, show all items */
.filter-section--full-height .filter-accordion-content {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Taxonomy Checkboxes */
.taxonomy-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 8px 0;
}

.taxonomy-checkboxes--hierarchical {
    grid-template-columns: 1fr;
    gap: 6px;
}

.taxonomy-checkboxes .checkbox-item {
    font-size: 14px;
}

.taxonomy-checkboxes .checkbox-item--parent {
    font-weight: 600;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--cs-border-light, #f3f4f6);
}

.taxonomy-checkboxes .checkbox-item--parent:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.taxonomy-checkboxes .checkbox-item--child {
    padding-left: 28px;
    font-weight: 400;
}

.term-count {
    color: var(--cs-text-light);
    font-size: 12px;
    font-weight: 400;
    margin-left: 4px;
}

/* Loading Skeleton */
.filter-loading-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.filter-loading-skeleton .skeleton-item {
    height: 24px;
    background: var(--sp-skeleton-highlight, #e0e0e0);
    border-radius: 4px;
}

.filter-loading-skeleton .skeleton-item:nth-child(1) {
    width: 70%;
}

.filter-loading-skeleton .skeleton-item:nth-child(2) {
    width: 85%;
}

.filter-loading-skeleton .skeleton-item:nth-child(3) {
    width: 60%;
}

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

.filter-no-terms,
.filter-error {
    padding: 16px 0;
    color: var(--cs-text-light);
    font-size: 14px;
    font-style: italic;
}

/* Toggle Filters (Instant Book, Superhost) */
.toggle-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.toggle-filter-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 12px 16px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-border-radius);
    transition: all 0.2s;
}

.toggle-filter-item:hover {
    border-color: var(--cs-text);
}

.toggle-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cs-text);
}

.toggle-filter-label svg {
    color: #f59e0b;
}

.toggle-filter-desc {
    display: block;
    font-size: 12px;
    color: var(--cs-text-light);
    margin-top: 4px;
    flex: 1;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    flex-shrink: 0;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    display: block;
    width: 48px;
    height: 28px;
    background: #d1d5db;
    border-radius: 14px;
    transition: all 0.2s;
    cursor: pointer;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--cs-secondary);
}

.toggle-switch input:checked + .toggle-slider::after {
    left: 24px;
}

/* Rating Filter Buttons */
.rating-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rating-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border: 1px solid var(--cs-border);
    background: white;
    border-radius: 24px;
    font-size: 14px;
    color: var(--cs-text);
    cursor: pointer;
    transition: all 0.2s;
}

.rating-filter-btn:hover {
    border-color: var(--cs-text);
}

.rating-filter-btn.active {
    background: var(--cs-secondary);
    border-color: var(--cs-secondary);
    color: white;
}

.rating-filter-btn svg {
    flex-shrink: 0;
}

.filter-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-top: 1px solid var(--sp-dropdown-border, var(--cs-border));
    background: var(--sp-dropdown-bg, #ffffff);
    flex-shrink: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.clear-filters-btn {
    font-size: 14px;
    color: var(--cs-text-muted);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
}

.apply-filters-btn {
    padding: 12px 32px;
    background: var(--cs-secondary);
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
}

/* ========================================
   Main Content Layout
   ======================================== */
.cloudstay-content {
    display: flex !important;
    flex: 1 !important;
    min-height: 0 !important;
    position: relative !important;
    align-items: flex-start !important;
    overflow: visible !important;
}

.cloudstay-content.map-hidden .cloudstay-map {
    display: none;
}

.cloudstay-content.map-hidden .cloudstay-listings {
    flex: 1;
}

.cloudstay-content.map-hidden .listings-grid {
    grid-template-columns: repeat(var(--sp-cols-full-desktop, 4), 1fr) !important;
}

/* ========================================
   Listings Grid
   ======================================== */
.cloudstay-listings {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: var(--sp-page-padding, 16px) !important;
    overflow: visible !important;
}

.listings-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--sp-cols-map-desktop, 2), 1fr) !important;
    row-gap: var(--sp-grid-gap-row, 24px) !important;
    column-gap: var(--sp-grid-gap-col, 24px) !important;
    width: 100% !important;
    padding: var(--sp-grid-padding, 0) !important;
}

/* ========================================
   Listing Card
   ======================================== */
.listing-card {
    background: var(--cs-card-bg, transparent) !important;
    border: var(--cs-border-width, 1px) solid var(--cs-border, #ccc) !important;
    border-radius: var(--cs-card-radius, 0) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: none !important;
    width: 100% !important;
    min-width: 0 !important;
    /* Use Elementor global font */
    font-family: var(--e-global-typography-text-font-family, inherit) !important;
}

.listing-card:hover {
    /* Hover shadow controlled by global styling */
    box-shadow: none !important;
    transform: none !important;
}

/* Card highlight when hovering/clicking map pin */
.listing-card.highlighted,
.cs-listing-card.highlighted,
article.listing-card.highlighted {
    box-shadow: 0 0 0 var(--sp-card-highlight-width, 2px) var(--sp-card-highlight, #222) !important;
    transition: box-shadow 0.2s ease !important;
    outline: none !important;
}

/* Image-only highlight when hovering/clicking map pin */
.card-image.highlighted {
    position: relative !important;
}
.card-image.highlighted::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border: var(--sp-card-highlight-width, 2px) solid var(--sp-card-highlight, #222) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.listing-card a {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

/* Image Carousel */
.card-image {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    border-radius: var(--cs-image-radius, 0) !important;
}

/* Image aspect ratio - default 4:3 */
.card-image[data-ratio="1:1"] { aspect-ratio: 1/1 !important; }
.card-image[data-ratio="4:3"],
.card-image:not([data-ratio]) { aspect-ratio: 4/3 !important; }
.card-image[data-ratio="3:2"] { aspect-ratio: 3/2 !important; }
.card-image[data-ratio="16:9"] { aspect-ratio: 16/9 !important; }
.card-image[data-ratio="custom"] {
    aspect-ratio: unset !important;
    height: var(--cs-image-height, 200px) !important;
}

.card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.carousel-images {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.carousel-image.active {
    opacity: 1;
}

.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sp-arrow-bg, rgba(255, 255, 255, 0.9));
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: var(--sp-arrow-color, #222);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.carousel-nav-btn svg {
    width: 12px;
    height: 12px;
    stroke: var(--sp-arrow-color, #222) !important;
    stroke-width: 2.5;
    fill: none;
}

.listing-card:hover .carousel-nav-btn {
    opacity: 1;
}

.carousel-prev {
    left: 8px;
}

.carousel-next {
    right: 8px;
}

.carousel-nav-btn:hover {
    background: rgba(255, 255, 255, 0.8);
}

.carousel-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 10;
}

.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.2s;
}

.carousel-dot.active {
    background: var(--sp-dot-color, white);
}

/* ========================================
   SwiperJS Card Image Carousel Styles
   ======================================== */
.card-image-swiper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.card-image-swiper .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.card-image-swiper .swiper-slide {
    width: 100%;
    height: 100%;
}

.card-image-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Swiper Navigation */
.card-image-swiper .swiper-button-prev,
.card-image-swiper .swiper-button-next {
    width: 28px;
    height: 28px;
    background: var(--sp-arrow-bg, rgba(255, 255, 255, 0.9));
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-image-swiper .swiper-button-prev::after,
.card-image-swiper .swiper-button-next::after {
    font-size: 12px;
    font-weight: bold;
    color: var(--sp-arrow-color, #222);
}

.listing-card:hover .card-image-swiper .swiper-button-prev,
.listing-card:hover .card-image-swiper .swiper-button-next {
    opacity: 1;
}

.card-image-swiper .swiper-button-prev:hover,
.card-image-swiper .swiper-button-next:hover {
    background: #fff;
    transform: scale(1.1);
}

.card-image-swiper .swiper-button-prev {
    left: 8px;
}

.card-image-swiper .swiper-button-next {
    right: 8px;
}

/* Card Swiper Pagination */
.card-image-swiper .swiper-pagination {
    bottom: 8px;
}

.card-image-swiper .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.card-image-swiper .swiper-pagination-bullet-active {
    background: var(--sp-dot-color, white);
}

/* Hide carousel nav on mobile - users swipe */
@media (max-width: 767px) {
    .card-image-swiper .swiper-button-prev,
    .card-image-swiper .swiper-button-next {
        display: none !important;
    }
}

/* Mobile peek offset - shows part of next card */
@media (max-width: 768px) {
    .cards-main-swiper[style*="--cs-mobile-peek-offset"] .swiper-slide {
        width: calc(100% - var(--cs-mobile-peek-offset, 0px) - var(--cs-column-gap, 10px)) !important;
    }
}

/* Card Content - uses CSS variables from Widget Builder */
.card-content {
    padding: var(--cs-content-padding, 16px) !important;
    /* Use Elementor global font */
    font-family: var(--e-global-typography-text-font-family, inherit) !important;
}

.card-content h3 {
    font-family: var(--cs-title-font, var(--e-global-typography-text-font-family, inherit)) !important;
    font-weight: var(--cs-title-weight, 600) !important;
    font-size: var(--cs-title-size, 18px) !important;
    color: var(--cs-title-color, #1f1f1f) !important;
    margin: 0 0 var(--cs-title-margin, 4px) !important;
    line-height: 1.3 !important;
}

.card-location {
    font-family: var(--cs-location-font, var(--e-global-typography-text-font-family, inherit)) !important;
    font-size: var(--cs-location-size, 13px) !important;
    font-weight: var(--cs-location-weight, 400) !important;
    color: var(--cs-location-color, #6b7280) !important;
    margin: 0 0 var(--cs-location-margin, 4px) !important;
}

.card-specs {
    font-family: var(--cs-meta-font, var(--e-global-typography-text-font-family, inherit)) !important;
    font-size: var(--cs-meta-size, 13px) !important;
    font-weight: var(--cs-meta-weight, 400) !important;
    color: var(--cs-meta-color, #6b7280) !important;
    margin: 0 0 var(--cs-meta-margin, 4px) !important;
}

/* Card Tags */
.card-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
}

.card-tag {
    display: inline-block !important;
    padding: 6px 12px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    color: var(--cs-text) !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
}

/* Card Amenities */
.card-amenities {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
}

.card-amenity {
    display: inline-block !important;
    padding: 6px 12px !important;
    background: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    color: #0369a1 !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
}

/* Card Favourite Button */
.card-favourite-btn,
.cloudstay-grid-widget .card-favourite-btn,
.listings-grid .card-favourite-btn {
    position: absolute !important;
    top: var(--sp-fav-position-top, 12px) !important;
    right: var(--sp-fav-position-right, 12px) !important;
    z-index: 10 !important;
    width: var(--sp-fav-size, 36px) !important;
    height: var(--sp-fav-size, 36px) !important;
    padding: 0 !important;
    background: var(--sp-fav-bg, rgba(255, 255, 255, 0.9)) !important;
    border: var(--sp-fav-border-width, 0px) solid var(--sp-fav-border-color, transparent) !important;
    border-radius: var(--sp-fav-radius, 50%) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    box-shadow: var(--sp-fav-shadow, 0 2px 4px rgba(0, 0, 0, 0.1)) !important;
}

.card-favourite-btn:hover,
.cloudstay-grid-widget .card-favourite-btn:hover,
.listings-grid .card-favourite-btn:hover {
    background: var(--sp-fav-hover-bg, #ffffff) !important;
    transform: scale(var(--sp-fav-hover-scale, 1.1)) !important;
    border-color: var(--sp-fav-hover-border-color, transparent) !important;
}

.card-favourite-btn svg,
.cloudstay-grid-widget .card-favourite-btn svg,
.listings-grid .card-favourite-btn svg {
    width: var(--sp-fav-icon-size, 20px) !important;
    height: var(--sp-fav-icon-size, 20px) !important;
    stroke: var(--sp-fav-icon-color, #374151) !important;
    fill: none !important;
    transition: all 0.2s ease !important;
}

.card-favourite-btn:hover svg,
.cloudstay-grid-widget .card-favourite-btn:hover svg,
.listings-grid .card-favourite-btn:hover svg {
    stroke: var(--sp-fav-icon-hover-color, #ef4444) !important;
}

.card-favourite-btn.is-favourite svg,
.cloudstay-grid-widget .card-favourite-btn.is-favourite svg,
.listings-grid .card-favourite-btn.is-favourite svg {
    stroke: var(--sp-fav-active-color, #ef4444) !important;
    fill: var(--sp-fav-active-color, #ef4444) !important;
}

/* Ensure card-image is positioned relative for favourite button */
.listing-card .card-image {
    position: relative !important;
}

/* CS Listing Card Tags (PHP template) */
.cs-listing-card__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 8px 0 !important;
}

.cs-listing-card__tag {
    display: inline-block !important;
    padding: 6px 12px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    color: var(--cs-text, #1f2937) !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
}

/* Card Price/Rating Row - price left, rating right */
.card-price-rating-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 8px !important;
    gap: 8px !important;
}

.card-price-rating-row .card-price {
    margin: 0 !important;
}

.card-price-rating-row .card-rating {
    margin-top: 0 !important;
}

/* Card Price - uses CSS variables from Widget Builder */
.card-price {
    font-family: var(--cs-price-font, var(--e-global-typography-text-font-family, inherit)) !important;
    font-size: var(--cs-price-size, 12px) !important;
    margin: var(--cs-price-margin, 4px) 0 0 0 !important;
}

.card-price .price-original {
    font-family: inherit !important;
    text-decoration: line-through !important;
    color: var(--cs-price-label-color, #6b7280) !important;
    font-weight: 400 !important;
    margin-right: 6px !important;
}

.card-price .price-amount {
    font-family: var(--cs-price-font, var(--e-global-typography-text-font-family, inherit)) !important;
    font-weight: var(--cs-price-weight, 600) !important;
    color: var(--cs-price-color, #1f1f1f) !important;
}

.card-price .price-info {
    font-family: inherit !important;
    color: var(--cs-price-label-color, #6b7280) !important;
    font-weight: 400 !important;
    margin-left: 4px !important;
}

.card-price .price-discount {
    display: block !important;
    width: 100% !important;
    font-family: inherit !important;
    font-size: 13px !important;
    color: #16a34a !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
}

.card-price .price-label {
    font-family: inherit !important;
    color: var(--cs-price-label-color, #6b7280) !important;
}

.card-price .price-period {
    font-family: inherit !important;
    color: var(--cs-price-label-color, #6b7280) !important;
}

.card-price .price-breakdown {
    display: block !important;
    width: 100% !important;
    font-family: inherit !important;
    font-size: 12px !important;
    color: var(--cs-text-muted) !important;
    font-weight: 400 !important;
}

/* Card Rating */
.card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 13px;
}

.card-rating svg {
    color: #facc15;
}

.card-rating .rating-value {
    font-weight: 500;
    color: var(--sp-text-color, #1f1f1f);
}

.card-rating .review-count {
    color: var(--sp-text-secondary, #6b7280);
}

/* ========================================
   Rating Position Variants
   ======================================== */

/* Title-Rating Row: title left (truncates with ellipsis), rating right */
.card-title-rating-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 8px !important;
}

.card-title-rating-row h3 {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

.card-title-rating-row .card-rating {
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Rating Overlay on Image */
.card-rating-overlay {
    position: absolute !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: flex-start !important;
}

.card-rating-overlay .card-rating {
    margin: 0 !important;
    font-size: 13px !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.card-rating-overlay .card-rating svg {
    width: 14px !important;
    height: 14px !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}

.card-rating-overlay .card-rating .rating-value,
.card-rating-overlay .card-rating .review-count {
    color: #ffffff !important;
}

/* Top Left Position */
.card-rating-overlay--top-left {
    top: 8px !important;
    left: 8px !important;
}

/* Bottom Right Position */
.card-rating-overlay--bottom-right {
    bottom: 8px !important;
    right: 8px !important;
}

/* Bottom Left Position */
.card-rating-overlay--bottom-left {
    bottom: 8px !important;
    left: 8px !important;
}

/* ========================================
   Availability States
   ======================================== */

/* Checking availability loading state */
.listing-card.checking-availability {
    position: relative;
}

.listing-card.checking-availability::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
    pointer-events: none;
}

.listing-card.checking-availability .card-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--cs-border);
    border-top-color: var(--cs-secondary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 11;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Checking availability loading state */
.listing-card.checking-availability {
    position: relative;
}

.listing-card.checking-availability::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s infinite;
    pointer-events: none;
    z-index: 10;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Unavailable listing */
.listing-card.unavailable {
    opacity: 0.6;
}

.listing-card.unavailable .card-image {
    filter: grayscale(50%);
}

.unavailable-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    z-index: 5;
    white-space: nowrap;
}

/* Available listing indicator */
.listing-card.available .card-price .price-amount {
    color: var(--cs-success, #16a34a);
}

/* Unavailable map marker - greyed out */
.map-price-marker.unavailable {
    background: #e5e7eb !important;
    color: #9ca3af !important;
    opacity: 0.6;
    text-decoration: line-through;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

.card-rating .review-count {
    color: var(--cs-text-light);
}

/* ========================================
   Pagination / Load More
   ======================================== */
.cloudstay-pagination {
    text-align: center;
    padding: 24px 0;
}

.load-more-btn {
    padding: 12px 32px;
    background: var(--cs-secondary);
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s;
}

.load-more-btn:hover {
    background: #333;
}

.load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
    margin-right: 8px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   Map Container
   ======================================== */
.cloudstay-map {
    width: var(--sp-map-width, 50%) !important;
    /* Use CSS variable for height with header offset - default 80px for typical header */
    height: var(--sp-map-height, calc(100vh - var(--sp-header-height, 80px))) !important;
    position: sticky !important;
    top: var(--sp-header-height, 0px) !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    overflow: visible !important;
}

.cloudstay-map #cloudstay-map-container {
    width: 100%;
    height: 100%;
}

/* Map Controls */
.map-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Leaflet Controls Override */
.cloudstay-map .leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.cloudstay-map .leaflet-control-zoom a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 18px !important;
    color: var(--cs-text) !important;
    background: white !important;
    border: none !important;
}

.cloudstay-map .leaflet-control-zoom a:hover {
    background: var(--cs-secondary) !important;
    color: white !important;
}

/* Leaflet Marker Clusters - Force circular shape with visible numbers */
.cloudstay-map .marker-cluster,
.marker-cluster,
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background: var(--sp-cluster-bg, var(--cs-accent, #66B5AB)) !important;
    background-clip: padding-box !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
}

.cloudstay-map .marker-cluster div,
.marker-cluster div {
    background: transparent !important;
    color: var(--sp-cluster-text, white) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    font-family: var(--e-global-typography-text-font-family, inherit) !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cloudstay-map .marker-cluster span,
.marker-cluster span {
    color: var(--sp-cluster-text, white) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.cloudstay-map .marker-cluster-small,
.marker-cluster-small {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
}

.cloudstay-map .marker-cluster-medium,
.marker-cluster-medium {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
}

.cloudstay-map .marker-cluster-large,
.marker-cluster-large {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
}

/* Cluster hover state when hovering a listing card */
.marker-cluster.cluster-hovered {
    transform: scale(1.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Custom Map Pin Markers */
.cloudstay-map .leaflet-marker-icon.price-marker {
    background: var(--sp-pin-bg, white) !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sp-pin-text, var(--cs-text)) !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.cloudstay-map .leaflet-marker-icon.price-marker:hover,
.cloudstay-map .leaflet-marker-icon.price-marker.active {
    background: var(--cs-secondary) !important;
    color: white !important;
    transform: scale(1.1) !important;
    z-index: 1000 !important;
    border-radius: 100px !important;
    border: none !important;
}

.map-control-btn {
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    background: white !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.map-control-btn svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
}

.map-control-btn:hover {
    background: var(--cs-secondary) !important;
    color: white !important;
}

.map-control-btn:hover svg {
    stroke: white !important;
}

.map-control-btn.active {
    background: var(--cs-secondary) !important;
    color: white !important;
}

.map-control-btn.active svg {
    stroke: white !important;
}

/* Fullscreen Map */
.cloudstay-map.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
}

.cloudstay-map.fullscreen .map-controls {
    top: 24px !important;
    right: 24px !important;
}

/* Fullscreen close button */
.fullscreen-close-btn {
    display: none !important;
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    width: 44px !important;
    height: 44px !important;
    background: white !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    z-index: 100000 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fullscreen close button removed - user can press Escape or use map controls */
.cloudstay-map.fullscreen .fullscreen-close-btn {
    display: none !important;
}

.fullscreen-close-btn svg {
    width: 24px !important;
    height: 24px !important;
    stroke: var(--cs-text) !important;
}

.fullscreen-close-btn:hover {
    background: #f3f4f6 !important;
}

/* Map Markers */
.map-price-marker-container {
    background: transparent !important;
    border: none !important;
}

.map-price-marker {
    background: var(--sp-pin-bg, #222222) !important;
    color: var(--sp-pin-text, #ffffff) !important;
    padding: 6px 12px !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.map-price-marker:hover,
.map-price-marker.hovered {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1000 !important;
}

.map-price-marker.active {
    background: var(--cs-secondary);
    color: white;
    border-color: var(--cs-secondary);
}

/* Map Popup / Info Box */
.map-popup {
    min-width: 200px;
    max-width: 280px;
    background: var(--sp-infobox-bg, white);
    border-radius: var(--sp-infobox-radius, 8px);
    overflow: hidden;
}

.map-popup-image {
    width: 100%;
    height: 120px;
    overflow: hidden;
}

.map-popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map-popup-content {
    padding: 10px 12px;
}

.map-popup-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.map-popup-link:hover {
    text-decoration: none;
}

.map-popup-link:hover .map-popup-content strong {
    color: var(--cs-primary, #2563eb);
}

.map-popup strong {
    display: block;
    font-size: var(--sp-infobox-title-size, 14px);
    font-weight: var(--sp-infobox-title-weight, 600);
    margin-bottom: 4px;
    color: var(--sp-infobox-title-color, var(--cs-text));
    line-height: 1.3;
}

.map-popup p {
    margin: 0;
    font-size: var(--sp-infobox-meta-size, 13px);
    color: var(--sp-infobox-meta-color, var(--cs-text-muted));
}

.map-popup-price {
    margin: 4px 0 0 0;
    font-size: var(--sp-infobox-meta-size, 13px);
    color: var(--sp-infobox-price-color, #1f1f1f);
}

/* Dark mode - infobox text */
body.dark-mode .map-popup p,
html.dark-mode .map-popup p,
.cs-dark-mode .map-popup p {
    color: var(--sp-infobox-meta-color, #999);
}

body.dark-mode .map-popup-price,
html.dark-mode .map-popup-price,
.cs-dark-mode .map-popup-price {
    color: var(--sp-infobox-price-color, #fff);
}

.cloudstay-map-popup .leaflet-popup-content,
.map-popup-container .leaflet-popup-content {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.leaflet-popup-content-wrapper,
.map-popup-container .leaflet-popup-content-wrapper {
    background: var(--sp-infobox-bg, white) !important;
    border-radius: var(--sp-infobox-radius, 8px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    overflow: hidden;
}

.leaflet-popup-tip,
.map-popup-container .leaflet-popup-tip {
    background: var(--sp-infobox-bg, white) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure popup image displays correctly */
.map-popup-container .map-popup {
    padding: 0 !important;
    margin: 0 !important;
}

.map-popup-container .map-popup-image {
    width: 100%;
    height: 140px;
    overflow: hidden;
    margin: 0;
    position: relative;
}

.map-popup-container .map-popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Close button inside popup image - top right */
.map-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease;
    z-index: 10;
}

.map-popup-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

.map-popup-close svg {
    stroke: white;
}

/* Close button when no image - position in content area */
.map-popup-close.no-image {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.1);
    color: #666;
}

.map-popup-close.no-image:hover {
    background: rgba(0, 0, 0, 0.2);
}

.map-popup-close.no-image svg {
    stroke: #666;
}

/* Ensure popup has relative positioning for no-image close button */
.map-popup {
    position: relative;
}

/* Map Cluster (legacy) */
.marker-cluster {
    background: var(--sp-cluster-bg, rgba(31, 31, 31, 0.8));
    border-radius: 50%;
    color: var(--sp-cluster-text, white);
    font-weight: 600;
    text-align: center;
}

/* ========================================
   Loading States / Skeleton Loaders
   ======================================== */
.listings-loading,
.cloudstay-grid-widget .listings-loading,
.cloudstay-listings .listings-loading {
    display: grid !important;
    /* Use same CSS variables as .listings-grid for consistency */
    grid-template-columns: repeat(var(--sp-cols-map-desktop, 2), 1fr) !important;
    gap: var(--sp-grid-gap-row, 24px) var(--sp-grid-gap-col, 24px) !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 !important;
    /* Span all columns when inside .listings-grid parent */
    grid-column: 1 / -1 !important;
}

/* Match listings grid when map is hidden */
.cloudstay-content.map-hidden .listings-loading,
.cloudstay-grid-widget .cloudstay-content.map-hidden .listings-loading {
    grid-template-columns: repeat(var(--sp-cols-full-desktop, 4), 1fr) !important;
}

.skeleton-card,
.cloudstay-grid-widget .skeleton-card,
.listings-loading .skeleton-card {
    background: var(--sp-card-bg, var(--cs-card-bg, white)) !important;
    border-radius: var(--sp-card-radius, var(--cs-card-radius, 12px)) !important;
    overflow: hidden !important;
    border: var(--sp-card-border-width, 0) solid var(--sp-card-border-color, transparent) !important;
    box-shadow: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.skeleton-image {
    width: 100%;
    aspect-ratio: var(--sp-card-image-ratio, 4/3);
    border-radius: var(--sp-card-image-radius, var(--cs-image-radius, 0));
    background: var(--sp-skeleton-bg, #EAEAEA);
}

.skeleton-content,
.cloudstay-grid-widget .skeleton-content,
.listings-loading .skeleton-content {
    padding: 0 !important;
}

.skeleton-line {
    height: 12px;
    background: var(--sp-skeleton-highlight, #e0e0e0);
    border-radius: 4px;
    margin-bottom: 12px;
}

.skeleton-line:last-child {
    margin-bottom: 0;
}

.skeleton-line.short {
    width: 40%;
    height: 10px;
}

.skeleton-line.medium {
    width: 70%;
}

.skeleton-line.long {
    width: 90%;
}

/* Staggered animation for multiple lines */
.skeleton-line:nth-child(1) { animation-delay: 0s; }
.skeleton-line:nth-child(2) { animation-delay: 0.1s; }
.skeleton-line:nth-child(3) { animation-delay: 0.2s; }
.skeleton-line:nth-child(4) { animation-delay: 0.3s; }

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

/* Skeleton for inline elements */
.skeleton-text {
    display: inline-block;
    height: 1em;
    min-width: 100px;
    background: var(--sp-skeleton-highlight, #e0e0e0);
    border-radius: 4px;
    vertical-align: middle;
}

/* Skeleton for circular elements (avatars, icons) */
.skeleton-circle {
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        #EAEAEA 0%,
        #f5f5f5 50%,
        #EAEAEA 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
}

.skeleton-circle.small {
    width: 32px;
    height: 32px;
}

.skeleton-circle.medium {
    width: 48px;
    height: 48px;
}

.skeleton-circle.large {
    width: 64px;
    height: 64px;
}

/* ========================================
   No Results
   ======================================== */
.no-results {
    text-align: center;
    padding: 80px 20px;
    grid-column: 1 / -1;
}

.no-results-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    color: var(--cs-text-light);
}

.no-results h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--cs-text);
    margin: 0 0 8px;
}

.no-results p {
    font-size: 14px;
    color: var(--cs-text-muted);
    margin: 0 0 24px;
}

.no-results-btn {
    padding: 12px 24px;
    background: var(--cs-secondary);
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
}

/* ========================================
   Responsive Styles
   ======================================== */

/* Tablet (768px - 1023px to match JavaScript breakpoints) */
@media (max-width: 1023px) {
    .cloudstay-content {
        flex-direction: column;
        height: auto;
    }

    .cloudstay-map {
        width: 100%;
        height: 400px;
        position: relative;
        display: none;
    }

    .cloudstay-map.active {
        display: block;
    }

    .cloudstay-listings {
        order: 2;
    }

    .listings-grid,
    .cloudstay-grid-widget .listings-grid,
    .cloudstay-listings .listings-grid {
        grid-template-columns: repeat(var(--sp-cols-map-tablet, 2), 1fr) !important;
    }

    .cloudstay-content.map-hidden .listings-grid,
    .cloudstay-grid-widget.map-hidden .listings-grid,
    .cloudstay-grid-widget .cloudstay-content.map-hidden .listings-grid {
        grid-template-columns: repeat(var(--sp-cols-full-tablet, 2), 1fr) !important;
    }

    /* Skeleton loader - tablet - must match parent selector specificity */
    .listings-loading,
    .cloudstay-grid-widget .listings-loading,
    .cloudstay-listings .listings-loading {
        grid-template-columns: repeat(var(--sp-cols-map-tablet, 2), 1fr) !important;
    }

    .cloudstay-content.map-hidden .listings-loading,
    .cloudstay-grid-widget.map-hidden .listings-loading,
    .cloudstay-grid-widget .cloudstay-content.map-hidden .listings-loading {
        grid-template-columns: repeat(var(--sp-cols-full-tablet, 2), 1fr) !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .grid-search-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-bar-divider {
        width: 100%;
        height: 1px;
    }

    .search-field {
        padding: 12px 16px;
    }

    .search-btn {
        margin: 0;
    }

    /* Mobile listings grid - single column */
    .listings-grid,
    .cloudstay-grid-widget .listings-grid,
    .cloudstay-listings .listings-grid {
        grid-template-columns: repeat(var(--sp-cols-map-mobile, 1), 1fr) !important;
    }

    .cloudstay-content.map-hidden .listings-grid,
    .cloudstay-grid-widget.map-hidden .listings-grid,
    .cloudstay-grid-widget .cloudstay-content.map-hidden .listings-grid {
        grid-template-columns: repeat(var(--sp-cols-full-mobile, 1), 1fr) !important;
    }

    /* Skeleton loader - mobile - must match parent selector specificity */
    .listings-loading,
    .cloudstay-grid-widget .listings-loading,
    .cloudstay-listings .listings-loading {
        grid-template-columns: repeat(var(--sp-cols-map-mobile, 1), 1fr) !important;
        gap: 16px;
    }

    .cloudstay-content.map-hidden .listings-loading,
    .cloudstay-grid-widget.map-hidden .listings-loading,
    .cloudstay-grid-widget .cloudstay-content.map-hidden .listings-loading {
        grid-template-columns: repeat(var(--sp-cols-full-mobile, 1), 1fr) !important;
    }

    .date-picker-dropdown {
        min-width: 100%;
    }

    .date-picker-months {
        flex-direction: column;
        gap: 24px;
    }

    .filter-modal {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
    }

    .property-type-grid,
    .amenities-grid,
    .taxonomy-checkboxes {
        grid-template-columns: 1fr;
    }

    .filter-accordion-content {
        max-height: 300px;
        overflow-y: auto;
    }
}

/* ========================================
   Active Filter Tags
   ======================================== */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0 16px;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f3f4f6;
    font-size: 12px;
    color: var(--cs-text);
}

.filter-tag-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-tag-remove:hover {
    color: var(--cs-primary);
}

/* ========================================
   SEO Content Section
   ======================================== */
.cloudstay-seo-content {
    padding: 0 16px 24px 16px;
    max-width: 800px;
}

.cloudstay-seo-content__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--cs-text, #1f1f1f);
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.cloudstay-seo-content__description {
    font-size: 15px;
    color: var(--cs-text-secondary, #6b7280);
    line-height: 1.6;
}

.cloudstay-seo-content__description p {
    margin: 0 0 12px 0;
}

.cloudstay-seo-content__description p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .cloudstay-seo-content {
        padding: 0 16px 16px 16px;
    }

    .cloudstay-seo-content__title {
        font-size: 22px;
    }

    .cloudstay-seo-content__description {
        font-size: 14px;
    }
}

/* ========================================
   Map Position Left
   ======================================== */
.cloudstay-grid-widget.map-position-left .cloudstay-content {
    flex-direction: row-reverse;
}

/* ========================================
   Map Hidden by Default
   ======================================== */
.cloudstay-grid-widget.map-hidden-default .cloudstay-content .cloudstay-map {
    display: none;
}

.cloudstay-grid-widget.map-hidden-default .cloudstay-content .cloudstay-listings {
    flex: 1;
}

/* ========================================
   Back to Top Button
   ======================================== */
.cloudstay-back-to-top {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
    background: var(--cs-secondary, #1f1f1f);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cloudstay-back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.cloudstay-back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.cloudstay-back-to-top svg {
    stroke: #fff;
}

/* ========================================
   Widescreen (1920px+ for ultra-wide displays)
   ======================================== */
@media (min-width: 1920px) {
    .listings-grid,
    .cloudstay-grid-widget .listings-grid,
    .cloudstay-listings .listings-grid {
        grid-template-columns: repeat(var(--sp-cols-map-widescreen, 2), 1fr) !important;
    }

    .cloudstay-content.map-hidden .listings-grid,
    .cloudstay-grid-widget.map-hidden .listings-grid,
    .cloudstay-grid-widget .cloudstay-content.map-hidden .listings-grid {
        grid-template-columns: repeat(var(--sp-cols-full-widescreen, 4), 1fr) !important;
    }

    /* Skeleton loader - must match parent selector specificity */
    .listings-loading,
    .cloudstay-grid-widget .listings-loading,
    .cloudstay-listings .listings-loading {
        grid-template-columns: repeat(var(--sp-cols-map-widescreen, 2), 1fr) !important;
    }

    .cloudstay-content.map-hidden .listings-loading,
    .cloudstay-grid-widget.map-hidden .listings-loading,
    .cloudstay-grid-widget .cloudstay-content.map-hidden .listings-loading {
        grid-template-columns: repeat(var(--sp-cols-full-widescreen, 4), 1fr) !important;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .cloudstay-search-bar,
    .cloudstay-filter-bar,
    .cloudstay-map,
    .cloudstay-pagination,
    .carousel-nav-btn,
    .carousel-dots,
    .cloudstay-back-to-top {
        display: none !important;
    }

    .cloudstay-content {
        height: auto;
    }

    .cloudstay-listings {
        overflow: visible;
    }

    .listings-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .listing-card {
        break-inside: avoid;
    }
}

/* ========================================
   CRITICAL OVERRIDES - Date Picker Fix
   ======================================== */
.date-picker-dropdown .date-picker-month,
.search-dropdown .date-picker-month,
div.date-picker-month {
    display: flex !important;
    flex-direction: column !important;
    width: 280px !important;
}

.date-picker-dropdown .date-picker-month-title,
.search-dropdown .date-picker-month-title,
div.date-picker-month-title {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin-bottom: 16px !important;
    color: #000 !important;
    order: -1 !important;
}

.date-picker-dropdown .date-picker-weekdays,
.search-dropdown .date-picker-weekdays,
div.date-picker-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100% !important;
}

.date-picker-dropdown .date-picker-days,
.search-dropdown .date-picker-days,
div.date-picker-days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100% !important;
}

/* Close button fix */
.search-dropdown-close,
.search-dropdown-close *,
button.search-dropdown-close {
    cursor: pointer !important;
}

.search-dropdown-close svg,
.search-dropdown-close line,
.search-dropdown-close path {
    pointer-events: none !important;
}

/* ========================================
   SEARCH BAR V1.1 - BEM Prefixed Styles
   ======================================== */

/* Base container */
.cs-search-bar {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
    z-index: 1000;
    font-family: var(--e-global-typography-text-font-family, inherit);
}

/* Main search bar container */
.cs-search-bar__container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: var(--sb-container-bg, #fff);
    border: var(--sb-field-border-width, 0) solid var(--sb-field-border, #ddd);
    border-radius: var(--sb-container-radius, 0);
    box-shadow: var(--sb-container-shadow, none);
    overflow: hidden;
}

/* Search field button */
.cs-search-bar__field {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 16px;
    min-height: 56px;
    background: var(--sb-field-bg, #fff);
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.cs-search-bar__field:hover {
    background-color: var(--sb-field-bg-hover, #f7f7f7);
}

.cs-search-bar__field:focus,
.cs-search-bar__field.active {
    background-color: var(--sb-field-bg-focus, #fff);
    outline: none;
    box-shadow: inset 0 0 0 2px var(--cs-accent, #222);
}

/* Field label */
.cs-search-bar__label {
    display: block;
    font-size: var(--sb-label-size, 10px);
    font-weight: var(--sb-label-weight, 600);
    color: var(--sb-label-color, #222);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

/* Field value */
.cs-search-bar__value {
    display: block;
    font-size: var(--sb-placeholder-size, 14px);
    font-weight: var(--sb-value-weight, 400);
    color: var(--sb-value-color, #222);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-search-bar__value.placeholder {
    color: var(--sb-placeholder-color, #717171);
}

/* Divider between fields */
.cs-search-bar__divider {
    width: 1px;
    background-color: var(--sb-divider-color, #ddd);
    align-self: stretch;
    margin: 8px 0;
}

/* Search button */
.cs-search-bar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: var(--sb-btn-bg, var(--cs-accent, #222));
    color: var(--sb-btn-text, #fff);
    border: none;
    border-radius: var(--sb-btn-radius, 0);
    font-size: var(--sb-btn-size, 14px);
    font-weight: var(--sb-btn-weight, 600);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.cs-search-bar__btn:hover {
    background-color: var(--sb-btn-bg-hover, var(--cs-accent-hover, #000));
}

.cs-search-bar__btn:active {
    transform: scale(0.98);
}

.cs-search-bar__btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Dropdown base styles */
.cs-search-bar__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--sb-modal-border, #ddd);
    border-radius: var(--sb-modal-radius, 12px);
    box-shadow: var(--sb-modal-shadow, 0 4px 24px rgba(0,0,0,0.15));
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    max-height: 400px;
    overflow-y: auto;
}

.cs-search-bar__dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown header */
.cs-search-bar__dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.cs-search-bar__dropdown-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0;
}

/* Close button */
.cs-search-bar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cs-search-bar__close:hover {
    background-color: #f7f7f7;
    border-color: #999;
}

.cs-search-bar__close svg {
    width: 18px;
    height: 18px;
    stroke: #222;
}

/* Dropdown body */
.cs-search-bar__dropdown-body {
    padding: 16px;
}

/* Destination input */
.cs-search-bar__destination-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s ease;
}

.cs-search-bar__destination-input:focus {
    border-color: var(--cs-accent, #222);
}

/* Suggestions */
.cs-search-bar__suggestions {
    margin-top: 12px;
}

.cs-search-bar__suggestions-hint {
    font-size: 14px;
    color: #717171;
    margin: 0;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .cs-search-bar__container {
        flex-direction: column;
        border-radius: 12px;
    }

    .cs-search-bar__field {
        padding: 14px 16px;
        border-bottom: 1px solid #eee;
    }

    .cs-search-bar__field:last-of-type {
        border-bottom: none;
    }

    .cs-search-bar__divider {
        display: none;
    }

    .cs-search-bar__btn {
        width: 100%;
        padding: 16px;
        border-radius: 0 0 12px 12px;
        justify-content: center;
    }

    /* Dropdowns slide up from bottom on mobile */
    .cs-search-bar__dropdown {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        max-height: 80vh;
        transform: translateY(100%);
    }

    .cs-search-bar__dropdown.active {
        transform: translateY(0);
    }
}

/* Elementor overrides */
.elementor .cs-search-bar__field,
body.elementor-page .cs-search-bar__field {
    background: var(--sb-field-bg, #fff) !important;
    border: none !important;
}

.elementor .cs-search-bar__field:hover,
body.elementor-page .cs-search-bar__field:hover {
    background-color: var(--sb-field-bg-hover, #f7f7f7) !important;
}

.elementor .cs-search-bar__btn,
body.elementor-page .cs-search-bar__btn {
    background-color: var(--sb-btn-bg, var(--cs-accent, #222)) !important;
    color: var(--sb-btn-text, #fff) !important;
}

/* ========================================
   DATE PICKER V1.1 - BEM Prefixed Styles
   ======================================== */

.cs-date-picker {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    max-width: 650px;
    overflow: hidden;
}

.cs-date-picker.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Header */
.cs-date-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.cs-date-picker__title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0;
}

/* Close button - visible with border */
.cs-date-picker__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid #999;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cs-date-picker__close:hover {
    background-color: #f0f0f0;
}

.cs-date-picker__close svg {
    width: 18px;
    height: 18px;
    stroke: #222;
}

/* Navigation - inline with month centered */
.cs-date-picker__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 8px;
}

.cs-date-picker__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cs-date-picker__nav-btn:hover:not(:disabled) {
    background-color: #f0f0f0;
    border-color: #999;
}

.cs-date-picker__nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cs-date-picker__nav-btn svg {
    width: 20px;
    height: 20px;
    stroke: #222;
}

/* Month title - centered */
.cs-date-picker__month-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    text-align: center;
    flex: 1;
}

/* Calendar months grid */
.cs-date-picker__months {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 16px 20px;
}

/* Calendar day - square selection */
.cs-date-picker .date-picker-day,
.cs-date-picker__day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 14px;
    color: #222;
    background: transparent;
    border: none;
    border-radius: 4px; /* Square with slight radius */
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cs-date-picker .date-picker-day:hover:not(.disabled):not(.selected):not(.check-in):not(.check-out) {
    background-color: #f0f0f0;
}

.cs-date-picker .date-picker-day.selected,
.cs-date-picker .date-picker-day.check-in,
.cs-date-picker .date-picker-day.check-out {
    background-color: #222;
    color: #fff;
}

.cs-date-picker .date-picker-day.in-range {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 0;
}

.cs-date-picker .date-picker-day.disabled {
    color: #ccc;
    cursor: not-allowed;
}

/* Footer buttons */
.cs-date-picker__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid #eee;
}

.cs-date-picker__btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cs-date-picker__btn--clear {
    background: transparent;
    border: 1px solid #ddd;
    color: #222;
}

.cs-date-picker__btn--clear:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

.cs-date-picker__btn--apply {
    background: transparent;
    border: 1px solid var(--cs-accent, #222);
    color: var(--cs-accent, #222);
}

.cs-date-picker__btn--apply:hover {
    background: var(--cs-accent, #222);
    color: #fff;
}

/* Mobile */
@media (max-width: 767px) {
    .cs-date-picker {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        border-radius: 0;
        transform: none;
        max-height: 100vh;
        overflow-y: auto;
    }

    .cs-date-picker.active {
        transform: none;
    }

    .cs-date-picker__months {
        grid-template-columns: 1fr;
    }

    .cs-date-picker__footer {
        position: sticky;
        bottom: 0;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
}

/* ========================================
   GUEST SELECTOR V1.1 - BEM Prefixed Styles
   ======================================== */

.cs-guest-selector {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    min-width: 320px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.cs-guest-selector.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Header */
.cs-guest-selector__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.cs-guest-selector__title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0;
}

/* Close button - visible with border */
.cs-guest-selector__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid #999;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cs-guest-selector__close:hover {
    background-color: #f0f0f0;
}

.cs-guest-selector__close svg {
    width: 18px;
    height: 18px;
    stroke: #222;
}

/* Body */
.cs-guest-selector__body {
    padding: 8px 0;
}

/* Guest rows */
.cs-guest-selector__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
}

.cs-guest-selector__info {
    flex: 1;
}

.cs-guest-selector__label {
    font-size: 15px;
    font-weight: 500;
    color: #222;
    margin: 0 0 2px 0;
}

.cs-guest-selector__desc {
    font-size: 13px;
    color: #717171;
    margin: 0;
}

/* Counter */
.cs-guest-selector__counter {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Plus/minus buttons - 32px with grey border */
.cs-guest-selector__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid #999;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cs-guest-selector__btn:hover:not(:disabled) {
    background-color: #f0f0f0;
}

.cs-guest-selector__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #ddd;
}

.cs-guest-selector__btn svg {
    width: 12px;
    height: 12px;
    stroke: #222;
}

.cs-guest-selector__value {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    min-width: 24px;
    text-align: center;
}

/* Footer */
.cs-guest-selector__footer {
    padding: 16px 20px;
    border-top: 1px solid #eee;
}

.cs-guest-selector__apply {
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--cs-accent, #222);
    color: var(--cs-accent, #222);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cs-guest-selector__apply:hover {
    background: var(--cs-accent, #222);
    color: #fff;
}

/* Mobile */
@media (max-width: 767px) {
    .cs-guest-selector {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        min-width: 100%;
        border-radius: 0;
        max-height: 80vh;
        transform: translateY(100%);
    }

    .cs-guest-selector.active {
        transform: translateY(0);
    }
}

/* ========================================
   SEARCH PAGE V1.1 FIXES
   ======================================== */

/* Fix: Default columns when map is hidden - uses CSS variable from Widget Builder */
.cloudstay-content.map-hidden .listings-grid,
.cloudstay-grid-widget.map-hidden .listings-grid {
    grid-template-columns: repeat(var(--sp-cols-full-desktop, 4), 1fr) !important;
}

/* Fix: Skeleton cards fill container width */
.cloudstay-grid-widget .listings-loading,
.cloudstay-content .listings-loading {
    width: 100%;
    min-height: 200px;
}

.cloudstay-grid-widget .cs-loader,
.cloudstay-content .cs-loader {
    margin: 0 auto;
}

/* Fix: Location dropdown spacing */
.cloudstay-search-bar .destination-dropdown .search-dropdown-body {
    padding: 16px;
}

/* Fix: Clear All search terms button */
.cs-clear-all-btn,
.clear-search-terms-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #717171;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-clear-all-btn:hover,
.clear-search-terms-btn:hover {
    color: #222;
    border-color: #999;
    background-color: #f7f7f7;
}

/* Fix: Back to Top button - proper visibility and z-index */
.cloudstay-back-to-top {
    position: fixed !important;
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    z-index: 99999 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

.cloudstay-back-to-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix: Map info box - add featured image */
.map-info-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 200px;
}

.map-info-card__image {
    width: 100%;
    height: 120px;
    overflow: hidden;
}

.map-info-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map-info-card__content {
    padding: 12px;
}

/* Fix: Mobile search bar wrap */
@media (max-width: 767px) {
    .cs-search-bar__container,
    .grid-search-bar {
        flex-wrap: wrap;
    }

    /* Fix: Mobile map display - ensure proper height when active */
    .cloudstay-map {
        width: 100% !important;
        height: 350px !important;
        min-height: 350px;
        position: relative !important;
        display: none;
        order: 1;
    }

    .cloudstay-map.active {
        display: block !important;
    }

    /* Hide filter button on mobile - filters are in mobile search bar modal */
    .cloudstay-filter-bar .filter-btn {
        display: none !important;
    }

    /* Hide sort dropdown on mobile */
    .cloudstay-filter-bar .sort-wrapper,
    .cloudstay-filter-bar .sort-btn {
        display: none !important;
    }

    /* Hide map toggle button on mobile */
    .cloudstay-filter-bar .map-toggle-btn {
        display: none !important;
    }

    /* Hide right section completely on mobile (sort + map toggle) */
    .cloudstay-filter-bar .filter-bar-right {
        display: none !important;
    }

    /* Simplified mobile filter bar - only show properties count and clear all */
    .cloudstay-filter-bar {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: auto !important;
        padding: 8px 0 !important;
    }

    /* Left section contains properties count and clear all */
    .cloudstay-filter-bar .filter-bar-left {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Properties count styling on mobile */
    .cloudstay-filter-bar .properties-count {
        flex: 0 0 auto;
        order: 1;
        margin: 0;
    }

    /* Clear all button shows inline after properties count */
    .cloudstay-filter-bar .clear-all-filters-btn {
        order: 2;
    }

    .cloudstay-filter-bar .clear-all-filters-btn.visible {
        display: inline-flex !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    /* Collapse filter bar completely when no listings loaded */
    .cloudstay-grid-widget:not(.listings-loaded) .cloudstay-filter-bar {
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ========================================
   FILTER MODAL V1.1 FIXES
   ======================================== */

/* Fix: Close button visibility */
.filter-modal .modal-close,
.filter-modal__close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--sp-dropdown-border, #999);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.filter-modal .modal-close:hover,
.filter-modal__close:hover {
    background-color: var(--sp-dropdown-hover-bg, #f0f0f0);
}

.filter-modal .modal-close svg {
    width: 18px;
    height: 18px;
    stroke: var(--sp-dropdown-text, #222);
}

/* Fix: Bedrooms/bathrooms styling - borders and icons */
.filter-modal .filter-options .filter-option,
.filter-modal__option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-dropdown-text, #222);
    background: transparent;
    border: 1px solid var(--sp-dropdown-border, #ddd);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-modal .filter-options .filter-option:hover,
.filter-modal__option:hover {
    border-color: var(--sp-dropdown-text, #222);
}

.filter-modal .filter-options .filter-option.selected,
.filter-modal__option.selected {
    background: var(--cs-accent, #222);
    border-color: var(--cs-accent, #222);
    color: #fff;
}

/* Fix: Sticky Apply/Clear buttons at bottom */
.filter-modal .modal-footer,
.filter-modal__footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--sp-dropdown-bg, #fff);
    border-top: 1px solid var(--sp-dropdown-border, #eee);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

/* Apply button - outlined style */
.filter-modal .apply-btn,
.filter-modal__apply {
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--cs-accent, #222);
    color: var(--cs-accent, #222);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-modal .apply-btn:hover,
.filter-modal__apply:hover {
    background: var(--cs-accent, #222);
    color: #fff;
}

/* Clear button */
.filter-modal .clear-btn,
.filter-modal__clear {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--sp-dropdown-border, #ddd);
    color: var(--sp-dropdown-text, #222);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-modal .clear-btn:hover,
.filter-modal__clear:hover {
    background-color: var(--sp-dropdown-hover-bg, #f0f0f0);
    border-color: var(--sp-dropdown-border, #999);
}

/* ========================================
   MAP V1.1 FIXES
   ======================================== */

/* Fix: Price pin color when dates selected */
.map-marker.has-price {
    background: var(--cs-accent, #222);
    color: #fff;
}

/* Fix: Map z-index to prevent overlapping header/footer */
.cloudstay-map {
    z-index: 10;
}

.leaflet-pane,
.leaflet-top,
.leaflet-bottom {
    z-index: 10 !important;
}

/* Fix: Remove fullscreen map close button */
.map-fullscreen-close {
    display: none !important;
}

/* Fix: Map tags on listing cards */
.map-listing-card .cs-listing-card__tags {
    display: flex;
}

/* ========================================
   LISTING PAGE V1.1 FIXES
   ======================================== */

/* ----------------------------------------
   Gallery Fixes
   ---------------------------------------- */

/* Fix: Wishlist heart icon - controlled by setting */
.cloudstay-listing .listing-wishlist-btn,
.cs-listing__wishlist {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.cloudstay-listing .listing-wishlist-btn:hover {
    background: #fff;
    transform: scale(1.1);
}

.cloudstay-listing .listing-wishlist-btn svg {
    width: 20px;
    height: 20px;
    stroke: #222;
    fill: none;
}

.cloudstay-listing .listing-wishlist-btn.is-active svg {
    fill: #ef4444;
    stroke: #ef4444;
}

/* Fix: Gallery image captions - grey text, persistent */
.cloudstay-listing .gallery-caption,
.cs-gallery__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    color: #ddd;
    font-size: 14px;
    font-weight: 400;
}

/* Fix: Gallery close button - larger with border and background */
.cloudstay-listing .gallery-close,
.cs-gallery__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 100;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(255,255,255,0.95);
    border: 1px solid #999;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.cloudstay-listing .gallery-close:hover {
    background: #fff;
    border-color: #222;
}

.cloudstay-listing .gallery-close svg {
    width: 20px;
    height: 20px;
    stroke: #222;
}

/* Fix: Gallery navigation hover state - no persistent green */
.cloudstay-listing .gallery-nav,
.cs-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.cloudstay-listing .gallery-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}

.cloudstay-listing .gallery-nav:focus,
.cloudstay-listing .gallery-nav:active {
    background: rgba(255,255,255,0.95);
    outline: none;
    box-shadow: none;
}

.cloudstay-listing .gallery-nav svg {
    width: 20px;
    height: 20px;
    stroke: #222;
}

/* ----------------------------------------
   Description & Accordions Fixes
   ---------------------------------------- */

/* Fix: Show More button - outlined style */
.cloudstay-listing .show-more-btn,
.cs-listing__show-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    background: transparent;
    border: 1px solid #222;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 12px;
}

.cloudstay-listing .show-more-btn:hover {
    background: #222;
    color: #fff;
}

/* Fix: Accordion section divider and heading */
.cloudstay-listing .accordion-section,
.cs-listing__accordion {
    border-top: 1px solid #eee;
    padding-top: 24px;
    margin-top: 24px;
}

.cloudstay-listing .accordion-section h3,
.cs-listing__accordion-title {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 16px;
}

/* Fix: Accordion text formatting */
.cloudstay-listing .accordion-content p,
.cs-listing__accordion-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 12px;
}

.cloudstay-listing .accordion-content p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------
   Calendar Fixes
   ---------------------------------------- */

/* Fix: Hide minimum nights indicator dot */
.cloudstay-listing .min-nights-indicator,
.cs-calendar__min-nights {
    display: none !important;
}

/* Fix: Calendar navigation arrows alignment - inline with month */
.cloudstay-listing .calendar-nav,
.cs-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cloudstay-listing .calendar-nav-btn,
.cs-calendar__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cloudstay-listing .calendar-nav-btn:hover:not(:disabled) {
    border-color: #222;
    background: #f7f7f7;
}

.cloudstay-listing .calendar-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cloudstay-listing .calendar-month-title,
.cs-calendar__month-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    text-align: center;
}

/* Fix: Calendar selected date colors - black bg, white text */
.cloudstay-listing .calendar-day.selected,
.cloudstay-listing .calendar-day.check-in,
.cloudstay-listing .calendar-day.check-out,
.cs-calendar__day.selected {
    background-color: #222 !important;
    color: #fff !important;
    border-radius: 4px;
}

.cloudstay-listing .calendar-day.in-range {
    background-color: rgba(0,0,0,0.05);
    border-radius: 0;
}

/* Fix: Prevent range selection across booked dates */
.cloudstay-listing .calendar-day.booked {
    color: #ccc;
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
}

/* Fix: Mobile calendar - single month view */
@media (max-width: 767px) {
    .cloudstay-listing .calendar-months {
        grid-template-columns: 1fr !important;
    }

    .cloudstay-listing .calendar-month:nth-child(2) {
        display: none;
    }
}

/* ----------------------------------------
   Map, Reviews, Similar Fixes
   ---------------------------------------- */

/* Fix: Map pin brand/accent color */
.cloudstay-listing .listing-map-marker {
    background: var(--cs-accent, #222);
    border-color: var(--cs-accent, #222);
}

/* Fix: Rename "The Surroundings" to "Location" - handled via PHP/JS */

/* Fix: Map z-index - prevent overlapping header/footer */
.cloudstay-listing .listing-map {
    position: relative;
    z-index: 1;
}

.cloudstay-listing .listing-map .leaflet-pane,
.cloudstay-listing .listing-map .leaflet-top,
.cloudstay-listing .listing-map .leaflet-bottom {
    z-index: 1 !important;
}

/* ----------------------------------------
   Mobile Layout Fixes
   ---------------------------------------- */

@media (max-width: 767px) {
    /* Fix: Mobile layout alignment - edge-aligned, not centered */
    .cloudstay-listing .listing-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cloudstay-listing .listing-section {
        margin-left: 0;
        margin-right: 0;
    }

    /* Fix: Mobile date picker modal */
    .cloudstay-listing .date-picker-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10000;
        background: #fff;
        overflow-y: auto;
    }

    .cloudstay-listing .date-picker-modal .modal-close {
        display: flex !important;
        position: absolute;
        top: 16px;
        right: 16px;
    }

    /* Fix: Mobile "Check Availability" / "Book Now" button logic */
    .cloudstay-listing .mobile-book-btn {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 16px;
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .cloudstay-listing .mobile-book-btn button {
        width: 100%;
        padding: 16px;
        font-size: 16px;
        font-weight: 600;
        background: var(--cs-accent, #222);
        color: #fff;
        border: none;
        border-radius: 8px;
        cursor: pointer;
    }

    /* Add padding to bottom of content for fixed button */
    .cloudstay-listing .listing-content {
        padding-bottom: 100px;
    }
}

/* ========================================
   BOOKING FORM / SIDEBAR V1.1 FIXES
   ======================================== */

/* Fix: Remove repeated listing title */
.cloudstay-booking-sidebar .sidebar-title-duplicate {
    display: none;
}

/* Fix: Simplify instant book text */
.cloudstay-booking-sidebar .instant-book-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #222;
    background: #f7f7f7;
    border-radius: 20px;
}

.cloudstay-booking-sidebar .instant-book-badge svg {
    width: 14px;
    height: 14px;
    fill: #f59e0b;
}

/* Fix: Prevent page shift when opening date picker */
.cloudstay-booking-sidebar {
    position: relative;
    overflow: visible;
}

/* Fix: Guest modal apply button border */
.cloudstay-booking-sidebar .guest-dropdown .apply-btn {
    border: 1px solid var(--cs-accent, #222);
}

/* Fix: Price breakdown background color - white, no accent */
.cloudstay-booking-sidebar .price-breakdown {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
}

.cloudstay-booking-sidebar .price-breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #333;
}

.cloudstay-booking-sidebar .price-breakdown-total {
    border-top: 1px solid #eee;
    padding-top: 12px;
    margin-top: 8px;
    font-weight: 600;
}

/* Fix: Send enquiry button styling - outlined */
.cloudstay-booking-sidebar .enquiry-btn,
.cs-booking__enquiry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    background: transparent;
    border: 1px solid #222;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cloudstay-booking-sidebar .enquiry-btn:hover {
    background: #222;
    color: #fff;
}

/* Fix: Book Now button - solid style */
.cloudstay-booking-sidebar .book-now-btn,
.cs-booking__book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--cs-accent, #222);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cloudstay-booking-sidebar .book-now-btn:hover {
    filter: brightness(0.9);
}

/* Fix: Button order - Book Now first, then Enquiry */
.cloudstay-booking-sidebar .booking-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cloudstay-booking-sidebar .book-now-btn {
    order: 1;
}

.cloudstay-booking-sidebar .enquiry-btn {
    order: 2;
}

/* Fix: "Have a Question" section - move to body handled via PHP */
.cloudstay-booking-sidebar .have-question-popup {
    padding: 20px;
}

/* Fix: "Send a Question" button styling */
.cloudstay-booking-sidebar .send-question-btn {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    background: transparent;
    border: 1px solid #222;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cloudstay-booking-sidebar .send-question-btn:hover {
    background: #222;
    color: #fff;
}

/* Fix: Discount display values (prevent ridiculous percentages) */
.cloudstay-booking-sidebar .discount-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cloudstay-booking-sidebar .discount-badge[data-discount] {
    /* Cap visual display to reasonable values */
}

/* ==========================================================================
   V1.1 COMPONENT CONSISTENCY SECTION
   Unified styling for date pickers, guest selectors, and buttons across
   all v1.1 widgets (search bar, listing page, stepper booking, checkout)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DATE PICKER / CALENDAR CONSISTENCY
   Selected dates: black (#111) background, white text
   In-range dates: light gray background
   Hover: gray background
   Disabled: muted styling
   --------------------------------------------------------------------------- */

/* Universal selected date styling */
.calendar-day.selected,
.calendar-day.check-in,
.calendar-day.check-out,
.calendar-day.start,
.calendar-day.end,
.date-picker-day.selected,
.date-picker-day.check-in,
.date-picker-day.check-out,
.cs-date-picker .date-picker-day.selected,
.stepper-calendar .calendar-day.selected,
.stepper-calendar .calendar-day.start,
.stepper-calendar .calendar-day.end {
    background: #111 !important;
    color: #fff !important;
    font-weight: 600;
}

/* Universal in-range styling */
.calendar-day.in-range,
.date-picker-day.in-range,
.cs-date-picker .date-picker-day.in-range,
.stepper-calendar .calendar-day.in-range {
    background: #f0f0f0 !important;
    color: #111 !important;
}

/* Universal hover styling */
.calendar-day:hover:not(.disabled):not(.selected):not(.check-in):not(.check-out):not(.start):not(.end),
.date-picker-day:hover:not(.disabled):not(.selected):not(.check-in):not(.check-out),
.stepper-calendar .calendar-day:hover:not(.disabled):not(.selected):not(.start):not(.end) {
    background: #f5f5f5;
    color: #111;
}

/* Universal disabled styling */
.calendar-day.disabled,
.calendar-day.past,
.calendar-day.unavailable,
.date-picker-day.disabled,
.stepper-calendar .calendar-day.disabled,
.stepper-calendar .calendar-day.past,
.stepper-calendar .calendar-day.unavailable {
    color: #ccc !important;
    cursor: not-allowed;
    background: #fafafa;
}

/* Calendar navigation arrows - consistent size and hover */
.calendar-nav-btn,
.date-picker-nav-btn,
.cs-date-picker__nav-btn,
.stepper-calendar .calendar-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.calendar-nav-btn:hover:not(:disabled),
.date-picker-nav-btn:hover:not(:disabled),
.cs-date-picker__nav-btn:hover:not(:disabled),
.stepper-calendar .calendar-nav-btn:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #ccc;
}

.calendar-nav-btn:disabled,
.date-picker-nav-btn:disabled,
.cs-date-picker__nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.calendar-nav-btn svg,
.date-picker-nav-btn svg,
.cs-date-picker__nav-btn svg,
.stepper-calendar .calendar-nav-btn svg {
    width: 16px;
    height: 16px;
}

/* ---------------------------------------------------------------------------
   2. GUEST SELECTOR CONSISTENCY
   Counter buttons: 32px circles, gray border
   Disabled state: muted styling
   --------------------------------------------------------------------------- */

/* Guest counter buttons - unified */
.guest-counter-btn,
.cs-guest-selector__btn,
.guest-btn,
.stepper-guest-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: 1px solid #bbb;
    border-radius: 50%;
    background: #fff;
    color: #222;
    cursor: pointer;
    transition: all 0.15s ease;
}

.guest-counter-btn:hover:not(:disabled),
.cs-guest-selector__btn:hover:not(:disabled),
.guest-btn:hover:not([disabled]),
.stepper-guest-btn:hover:not([disabled]) {
    border-color: #222;
    background: #f5f5f5;
}

.guest-counter-btn:disabled,
.cs-guest-selector__btn:disabled,
.guest-btn[disabled],
.stepper-guest-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #ddd;
}

.guest-counter-btn svg,
.cs-guest-selector__btn svg,
.guest-btn svg,
.stepper-guest-btn svg {
    width: 12px;
    height: 12px;
}

/* ---------------------------------------------------------------------------
   3. MODAL CLOSE BUTTON CONSISTENCY
   Circle button with X icon, positioned top-right
   --------------------------------------------------------------------------- */

.search-dropdown-close,
.cs-date-picker__close,
.cs-guest-selector__close,
.modal-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-dropdown-close:hover,
.cs-date-picker__close:hover,
.cs-guest-selector__close:hover,
.modal-close-btn:hover {
    background: #eee;
    color: #111;
}

.search-dropdown-close svg,
.cs-date-picker__close svg,
.cs-guest-selector__close svg,
.modal-close-btn svg {
    width: 18px;
    height: 18px;
}

/* ---------------------------------------------------------------------------
   4. BUTTON CONSISTENCY
   Primary: solid dark background, white text
   Secondary: outlined, dark border, transparent background
   --------------------------------------------------------------------------- */

/* Primary buttons (Book Now, Apply, Reserve, etc.) */
.cs-btn-primary,
.apply-btn,
.cs-guest-selector__apply,
.cs-date-picker__btn--apply,
.close-datepicker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #111;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-btn-primary:hover,
.apply-btn:hover,
.cs-guest-selector__apply:hover,
.cs-date-picker__btn--apply:hover,
.close-datepicker-btn:hover {
    background: #333;
}

/* Secondary buttons (Enquiry, Clear, etc.) */
.cs-btn-secondary,
.clear-dates-btn,
.cs-date-picker__btn--clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    background: transparent;
    border: 1px solid #222;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-btn-secondary:hover,
.clear-dates-btn:hover,
.cs-date-picker__btn--clear:hover {
    background: #222;
    color: #fff;
}

/* ---------------------------------------------------------------------------
   5. DROPDOWN/MODAL CONSISTENCY
   White background, subtle shadow, rounded corners
   --------------------------------------------------------------------------- */

.search-dropdown,
.cs-date-picker,
.cs-guest-selector,
.dropdown-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.search-dropdown-content,
.cs-date-picker__content,
.cs-guest-selector__content {
    background: #fff;
}

/* Modal headers */
.search-dropdown-header,
.cs-date-picker__header,
.cs-guest-selector__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.search-dropdown-header h3,
.cs-date-picker__title,
.cs-guest-selector__title {
    font-size: var(--sb-modal-title-size, 18px);
    font-weight: var(--sb-modal-title-weight, 600);
    color: var(--sb-modal-text, #111);
    margin: 0;
}

/* Modal body */
.search-dropdown-body,
.cs-date-picker__body,
.cs-guest-selector__body {
    padding: 20px;
}

/* Modal footer */
.search-dropdown-footer,
.cs-date-picker__footer,
.cs-guest-selector__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #eee;
}

/* ---------------------------------------------------------------------------
   6. FORM INPUT CONSISTENCY
   Consistent border, padding, and focus states
   --------------------------------------------------------------------------- */

.cs-input,
.destination-input,
.search-input,
.coupon-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    color: #111;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s ease;
}

.cs-input:focus,
.destination-input:focus,
.search-input:focus,
.coupon-input:focus {
    border-color: #111;
}

.cs-input::placeholder,
.destination-input::placeholder,
.search-input::placeholder,
.coupon-input::placeholder {
    color: #999;
}

/* ---------------------------------------------------------------------------
   7. LOADING STATE CONSISTENCY
   --------------------------------------------------------------------------- */

.cs-loading,
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #111;
    border-radius: 50%;
    animation: cs-spin 1s linear infinite;
}

@keyframes cs-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   8. TYPOGRAPHY CONSISTENCY
   --------------------------------------------------------------------------- */

.cs-label,
.guest-info h4,
.cs-guest-selector__label {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin: 0;
}

.cs-desc,
.guest-info p,
.cs-guest-selector__desc {
    font-size: 12px;
    color: #666;
    margin: 4px 0 0 0;
}

/* ---------------------------------------------------------------------------
   9. MOBILE RESPONSIVE CONSISTENCY
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* Full-screen modals on mobile */
    .search-dropdown.active,
    .cs-date-picker.active,
    .cs-guest-selector.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        z-index: 9999 !important;
    }

    .search-dropdown-content,
    .cs-date-picker__content,
    .cs-guest-selector__content {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .search-dropdown-body,
    .cs-date-picker__body,
    .cs-guest-selector__body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Sticky footer on mobile modals */
    .search-dropdown-footer,
    .cs-date-picker__footer,
    .cs-guest-selector__footer {
        position: sticky;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #eee;
        padding: 16px;
    }

    /* Full-width buttons on mobile */
    .cs-btn-primary,
    .cs-btn-secondary,
    .apply-btn,
    .clear-dates-btn {
        flex: 1;
        padding: 14px;
    }
}

/* End V1.1 Consistency Section */

/* ==========================================================================
   DESIGN TOKEN MIGRATION v1.1
   Updates all hardcoded values to use CSS custom properties
   This section overrides previous styles with token-based values
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Typography Token Application
   --------------------------------------------------------------------------- */

/* Headings */
.cloudstay-grid-widget h1,
.cloudstay-search-widget h1 {
    font-size: var(--cs-text-3xl) !important;
    font-weight: var(--cs-font-bold) !important;
    line-height: var(--cs-leading-tight) !important;
}

.cloudstay-grid-widget h2,
.cloudstay-search-widget h2 {
    font-size: var(--cs-text-2xl) !important;
    font-weight: var(--cs-font-semibold) !important;
    line-height: var(--cs-leading-tight) !important;
}

.cloudstay-grid-widget h3,
.cloudstay-search-widget h3 {
    font-size: var(--cs-text-xl) !important;
    font-weight: var(--cs-font-semibold) !important;
    line-height: var(--cs-leading-tight) !important;
}

.cloudstay-grid-widget h4,
.cloudstay-search-widget h4 {
    font-size: var(--cs-text-lg) !important;
    font-weight: var(--cs-font-semibold) !important;
    line-height: var(--cs-leading-normal) !important;
}

/* Body text sizes */
.cloudstay-grid-widget,
.cloudstay-search-widget {
    font-size: var(--cs-text-sm) !important;
    line-height: var(--cs-leading-normal) !important;
    color: var(--cs-text-primary) !important;
}

/* Small/muted text */
.cloudstay-grid-widget .text-muted,
.cloudstay-grid-widget .text-secondary,
.cloudstay-search-widget .text-muted {
    color: var(--cs-text-muted) !important;
    font-size: var(--cs-text-xs) !important;
}

/* ---------------------------------------------------------------------------
   Color Token Application
   --------------------------------------------------------------------------- */

/* Primary backgrounds */
.cloudstay-grid-widget,
.cloudstay-search-widget,
.search-dropdown-content,
.filter-dropdown-content {
    background-color: var(--cs-bg-primary) !important;
}

/* Secondary backgrounds */
.cloudstay-grid-widget .bg-secondary,
.filter-chip,
.tag-pill {
    background-color: var(--cs-bg-secondary) !important;
}

/* Borders */
.cloudstay-grid-widget [class*="border"],
.search-dropdown,
.filter-dropdown {
    border-color: var(--cs-border-primary) !important;
}

/* Success states */
.cloudstay-grid-widget .success,
.price-discount,
.discount-badge {
    color: var(--cs-success) !important;
}

/* Error states */
.cloudstay-grid-widget .error,
.cloudstay-grid-widget .error-message {
    color: var(--cs-error) !important;
}

/* ---------------------------------------------------------------------------
   Spacing Token Application
   --------------------------------------------------------------------------- */

/* Container padding */
.cloudstay-grid-widget .container-padding {
    padding: var(--cs-space-4) !important;
}

/* Section spacing */
.cloudstay-grid-widget section,
.cloudstay-search-widget section {
    margin-bottom: var(--cs-space-6) !important;
}

/* Card content padding */
.card-content,
.listing-card-content {
    padding: var(--cs-space-3) !important;
}

/* Modal/dropdown padding */
.search-dropdown-header,
.filter-dropdown-header {
    padding: var(--cs-space-4) var(--cs-space-5) !important;
}

.search-dropdown-body,
.filter-dropdown-body {
    padding: var(--cs-space-5) !important;
}

.search-dropdown-footer,
.filter-dropdown-footer {
    padding: var(--cs-space-4) var(--cs-space-5) !important;
}

/* Gap standardization */
.cloudstay-grid-widget .flex-gap-1 { gap: var(--cs-space-1) !important; }
.cloudstay-grid-widget .flex-gap-2 { gap: var(--cs-space-2) !important; }
.cloudstay-grid-widget .flex-gap-3 { gap: var(--cs-space-3) !important; }
.cloudstay-grid-widget .flex-gap-4 { gap: var(--cs-space-4) !important; }

/* ---------------------------------------------------------------------------
   Border Radius Token Application
   --------------------------------------------------------------------------- */

/* Small radius - inputs, small buttons, tags */
.cloudstay-grid-widget input,
.cloudstay-grid-widget select,
.cloudstay-grid-widget textarea,
.filter-chip,
.tag-pill {
    border-radius: var(--cs-radius-sm) !important;
}

/* Medium radius - buttons, cards */
.cloudstay-grid-widget button,
.cloudstay-grid-widget .btn,
.listing-card,
.card {
    border-radius: var(--cs-radius-md) !important;
}

/* Large radius - modals, dropdowns - CONTENT only, not containers */
.search-dropdown-content,
.filter-dropdown-content,
.date-picker-content,
.guest-dropdown-content {
    border-radius: var(--cs-radius-xl) !important;
}

/* Full radius - circular elements */
.cloudstay-grid-widget .rounded-full,
.guest-counter-btn,
.nav-btn,
.close-btn {
    border-radius: var(--cs-radius-full) !important;
}

/* ---------------------------------------------------------------------------
   Shadow Token Application
   --------------------------------------------------------------------------- */

/* Card shadows */
.listing-card,
.card {
    box-shadow: var(--cs-shadow-sm) !important;
}

.listing-card:hover,
.card:hover {
    box-shadow: var(--cs-shadow-lg) !important;
}

/* Dropdown shadows - CONTENT only, not containers */
.search-dropdown-content,
.filter-dropdown-content,
.date-picker-content,
.guest-dropdown-content {
    box-shadow: var(--cs-shadow-xl) !important;
}

/* Elevated elements */
.cloudstay-grid-widget .elevated {
    box-shadow: var(--cs-shadow-md) !important;
}

/* ---------------------------------------------------------------------------
   Transition Token Application
   --------------------------------------------------------------------------- */

/* Standard transitions */
.cloudstay-grid-widget button,
.cloudstay-grid-widget a,
.cloudstay-grid-widget input,
.listing-card,
.card {
    transition: var(--cs-transition-all) !important;
}

/* Color transitions */
.cloudstay-grid-widget .transition-colors {
    transition: var(--cs-transition-colors) !important;
}

/* Transform transitions */
.cloudstay-grid-widget .transition-transform {
    transition: var(--cs-transition-transform) !important;
}

/* ---------------------------------------------------------------------------
   Button Token Application
   --------------------------------------------------------------------------- */

/* Primary button */
.cloudstay-grid-widget .btn-primary,
.cloudstay-search-widget .btn-primary,
.search-btn,
.apply-btn,
.book-now-btn,
.reserve-btn {
    height: var(--cs-btn-height-md) !important;
    padding: var(--cs-btn-padding-md) !important;
    font-size: var(--cs-text-sm) !important;
    font-weight: var(--cs-font-semibold) !important;
    color: var(--cs-text-inverse) !important;
    background-color: var(--cs-gray-900) !important;
    border: 1px solid var(--cs-gray-900) !important;
    border-radius: var(--cs-btn-radius) !important;
}

.cloudstay-grid-widget .btn-primary:hover,
.search-btn:hover,
.apply-btn:hover,
.book-now-btn:hover,
.reserve-btn:hover {
    background-color: var(--cs-gray-800) !important;
    border-color: var(--cs-gray-800) !important;
}

/* Secondary button */
.cloudstay-grid-widget .btn-secondary,
.cloudstay-search-widget .btn-secondary,
.clear-btn,
.clear-dates-btn,
.enquiry-btn {
    height: var(--cs-btn-height-md) !important;
    padding: var(--cs-btn-padding-md) !important;
    font-size: var(--cs-text-sm) !important;
    font-weight: var(--cs-font-semibold) !important;
    color: var(--cs-text-primary) !important;
    background-color: transparent !important;
    border: 1px solid var(--cs-gray-900) !important;
    border-radius: var(--cs-btn-radius) !important;
}

.cloudstay-grid-widget .btn-secondary:hover,
.clear-btn:hover,
.clear-dates-btn:hover,
.enquiry-btn:hover {
    background-color: var(--cs-gray-900) !important;
    color: var(--cs-text-inverse) !important;
}

/* Ghost button */
.cloudstay-grid-widget .btn-ghost {
    height: var(--cs-btn-height-md) !important;
    padding: var(--cs-btn-padding-md) !important;
    font-size: var(--cs-text-sm) !important;
    font-weight: var(--cs-font-semibold) !important;
    color: var(--cs-text-primary) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--cs-btn-radius) !important;
}

.cloudstay-grid-widget .btn-ghost:hover {
    background-color: var(--cs-bg-hover) !important;
}

/* Small button */
.cloudstay-grid-widget .btn-sm {
    height: var(--cs-btn-height-sm) !important;
    padding: var(--cs-btn-padding-sm) !important;
    font-size: var(--cs-text-xs) !important;
}

/* Large button */
.cloudstay-grid-widget .btn-lg {
    height: var(--cs-btn-height-lg) !important;
    padding: var(--cs-btn-padding-lg) !important;
    font-size: var(--cs-text-base) !important;
}

/* ---------------------------------------------------------------------------
   Input Token Application
   --------------------------------------------------------------------------- */

/* Standard inputs */
.cloudstay-grid-widget input[type="text"],
.cloudstay-grid-widget input[type="email"],
.cloudstay-grid-widget input[type="tel"],
.cloudstay-grid-widget input[type="number"],
.cloudstay-grid-widget input[type="search"],
.cloudstay-grid-widget select,
.cloudstay-grid-widget textarea,
.destination-input,
.search-input,
.coupon-input {
    height: var(--cs-input-height) !important;
    padding: var(--cs-input-padding) !important;
    font-size: var(--cs-text-sm) !important;
    color: var(--cs-text-primary) !important;
    background-color: var(--cs-bg-primary) !important;
    border: 1px solid var(--cs-border-secondary) !important;
    border-radius: var(--cs-input-radius) !important;
    transition: var(--cs-transition-colors) !important;
}

.cloudstay-grid-widget input:focus,
.cloudstay-grid-widget select:focus,
.cloudstay-grid-widget textarea:focus,
.destination-input:focus,
.search-input:focus {
    border-color: var(--cs-border-focus) !important;
    outline: none !important;
}

.cloudstay-grid-widget input::placeholder,
.destination-input::placeholder,
.search-input::placeholder {
    color: var(--cs-text-muted) !important;
}

/* ---------------------------------------------------------------------------
   Card Token Application
   --------------------------------------------------------------------------- */

/* Listing cards */
.listing-card,
.cs-listing-card {
    background: var(--cs-card-bg, transparent);
    border-radius: var(--cs-card-radius);
    box-shadow: var(--cs-card-shadow, none);
    overflow: hidden;
    transition: var(--cs-transition, none);
}

.listing-card:hover,
.cs-listing-card:hover {
    /* Hover effects controlled by global styling - disabled by default */
    box-shadow: none !important;
    transform: none !important;
}

/* Card content */
.listing-card .card-content,
.cs-listing-card__content {
    padding: var(--cs-space-3) !important;
}

/* Card title */
.listing-card .card-title,
.cs-listing-card__title {
    font-size: var(--cs-text-base) !important;
    font-weight: var(--cs-font-semibold) !important;
    color: var(--cs-text-primary) !important;
    margin: 0 0 var(--cs-space-1) 0 !important;
}

/* Card location */
.listing-card .card-location,
.cs-listing-card__location {
    font-size: var(--cs-text-sm) !important;
    color: var(--cs-text-secondary) !important;
    margin: 0 0 var(--cs-space-2) 0 !important;
}

/* Card specs */
.listing-card .card-specs,
.cs-listing-card__specs {
    font-size: var(--cs-text-xs) !important;
    color: var(--cs-text-muted) !important;
    margin: 0 0 var(--cs-space-2) 0 !important;
}

/* Card price */
.listing-card .card-price,
.cs-listing-card__price {
    font-size: var(--cs-text-sm) !important;
    color: var(--cs-price-color, var(--cs-text-primary)) !important;
}

.listing-card .card-price .price-amount,
.cs-listing-card__price-amount {
    font-weight: var(--cs-font-semibold) !important;
    color: var(--cs-price-color, inherit) !important;
}

.listing-card .card-price .price-label,
.listing-card .card-price .price-period,
.cs-listing-card__price-label,
.cs-listing-card__price-period {
    color: var(--cs-price-label-color, var(--cs-text-muted)) !important;
    font-weight: var(--cs-font-normal) !important;
}

/* ---------------------------------------------------------------------------
   Modal/Dropdown Token Application
   --------------------------------------------------------------------------- */

/* Modal container */
.search-dropdown,
.filter-dropdown,
.date-picker-dropdown,
.guest-dropdown,
.cs-date-picker,
.cs-guest-selector {
    background-color: var(--cs-bg-primary) !important;
    border-radius: var(--cs-modal-radius) !important;
    box-shadow: var(--cs-modal-shadow) !important;
    overflow: hidden !important;
}

/* Modal header */
.search-dropdown-header,
.filter-dropdown-header,
.cs-date-picker__header,
.cs-guest-selector__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: var(--cs-modal-header-padding) !important;
    border-bottom: 1px solid var(--cs-border-light) !important;
}

/* Modal title */
.search-dropdown-header h3,
.filter-dropdown-header h3,
.cs-date-picker__title,
.cs-guest-selector__title {
    font-size: var(--sb-modal-title-size, var(--cs-text-base, 18px)) !important;
    font-weight: var(--sb-modal-title-weight, var(--cs-font-semibold, 600)) !important;
    color: var(--sb-modal-text, var(--cs-text-primary)) !important;
    margin: 0 !important;
}

/* Modal close button */
.search-dropdown-close,
.filter-dropdown-close,
.cs-date-picker__close,
.cs-guest-selector__close,
.modal-close-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    color: var(--cs-text-secondary) !important;
    background-color: var(--cs-bg-secondary) !important;
    border: none !important;
    border-radius: var(--cs-radius-full) !important;
    cursor: pointer !important;
    transition: var(--cs-transition-colors) !important;
}

.search-dropdown-close:hover,
.filter-dropdown-close:hover,
.cs-date-picker__close:hover,
.cs-guest-selector__close:hover,
.modal-close-btn:hover {
    background-color: var(--cs-bg-active) !important;
    color: var(--cs-text-primary) !important;
}

/* Modal body */
.search-dropdown-body,
.filter-dropdown-body,
.cs-date-picker__body,
.cs-guest-selector__body {
    padding: var(--cs-modal-body-padding) !important;
}

/* Modal footer */
.search-dropdown-footer,
.filter-dropdown-footer,
.cs-date-picker__footer,
.cs-guest-selector__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--cs-space-3) !important;
    padding: var(--cs-modal-footer-padding) !important;
    border-top: 1px solid var(--cs-border-light) !important;
}

/* ---------------------------------------------------------------------------
   Icon Token Application
   --------------------------------------------------------------------------- */

/* Small icons */
.cloudstay-grid-widget .icon-sm,
.cloudstay-grid-widget svg.icon-sm {
    width: var(--cs-icon-sm) !important;
    height: var(--cs-icon-sm) !important;
}

/* Medium icons (default) */
.cloudstay-grid-widget .icon-md,
.cloudstay-grid-widget svg:not([width]):not([class*="icon-"]) {
    width: var(--cs-icon-md) !important;
    height: var(--cs-icon-md) !important;
}

/* Large icons */
.cloudstay-grid-widget .icon-lg,
.cloudstay-grid-widget svg.icon-lg {
    width: var(--cs-icon-lg) !important;
    height: var(--cs-icon-lg) !important;
}

/* ---------------------------------------------------------------------------
   Z-Index Token Application
   --------------------------------------------------------------------------- */

.cloudstay-grid-widget .z-dropdown { z-index: var(--cs-z-dropdown) !important; }
.cloudstay-grid-widget .z-sticky { z-index: var(--cs-z-sticky) !important; }
.cloudstay-grid-widget .z-modal { z-index: var(--cs-z-modal) !important; }
.cloudstay-grid-widget .z-tooltip { z-index: var(--cs-z-tooltip) !important; }

.search-dropdown,
.filter-dropdown,
.date-picker-dropdown,
.guest-dropdown {
    z-index: var(--cs-z-dropdown) !important;
}

/* Full-screen mobile modals */
@media (max-width: 767px) {
    .search-dropdown.active,
    .filter-dropdown.active,
    .date-picker-dropdown.active,
    .guest-dropdown.active,
    .cs-date-picker.active,
    .cs-guest-selector.active {
        z-index: var(--cs-z-modal) !important;
    }
}

/* ---------------------------------------------------------------------------
   Loading State Token Application
   --------------------------------------------------------------------------- */

.cloudstay-grid-widget .loading-spinner,
.cs-loading,
.cs-spinner {
    width: var(--cs-icon-md) !important;
    height: var(--cs-icon-md) !important;
    border: 2px solid var(--cs-gray-200) !important;
    border-top-color: var(--cs-gray-900) !important;
    border-radius: var(--cs-radius-full) !important;
    animation: cs-spin 0.8s linear infinite !important;
}

/* ---------------------------------------------------------------------------
   Badge/Tag Token Application
   --------------------------------------------------------------------------- */

.cloudstay-grid-widget .badge,
.cloudstay-grid-widget .tag,
.filter-chip,
.card-tag,
.cs-listing-card__tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--cs-space-1) !important;
    padding: var(--cs-space-1) var(--cs-space-2) !important;
    font-size: var(--cs-text-xs) !important;
    font-weight: var(--cs-font-medium) !important;
    line-height: 1 !important;
    color: var(--cs-text-secondary) !important;
    background-color: var(--cs-bg-tertiary) !important;
    border-radius: var(--cs-radius-sm) !important;
}

/* Success badge */
.cloudstay-grid-widget .badge-success,
.price-discount {
    color: var(--cs-success) !important;
    background-color: var(--cs-success-bg) !important;
}

/* Error badge */
.cloudstay-grid-widget .badge-error {
    color: var(--cs-error) !important;
    background-color: var(--cs-error-bg) !important;
}

/* End Design Token Migration */

/* ========================================
   CRITICAL: Modal Container Reset
   Ensure dropdown CONTAINERS are transparent
   Only .search-dropdown-content should have styling
   ======================================== */
/* Body-level dropdowns handled in cloudstay-search-bar.css */
body > .search-dropdown.active,
body > .destination-dropdown.active,
body > .date-picker-dropdown.active,
body > .guest-dropdown.active {
    display: flex !important;
}

/* Hide overlay completely */
.search-dropdown-overlay,
body > .search-dropdown-overlay,
.search-dropdown-overlay.active,
body > .search-dropdown-overlay.active {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ensure search field buttons are clickable */
.cloudstay-search-widget .search-field,
.cloudstay-search-widget [data-field],
.grid-search-bar .search-field,
.grid-search-bar [data-field] {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure search bar container doesn't block clicks */
.cloudstay-search-widget,
.cloudstay-search-bar,
.grid-search-bar {
    pointer-events: auto !important;
}

/* ========================================
   MODAL BORDER RADIUS - ZERO
   ======================================== */
.search-dropdown,
.search-dropdown-content,
.destination-dropdown,
.date-picker-dropdown,
.guest-dropdown,
.filter-modal,
body > .search-dropdown,
body > .search-dropdown .search-dropdown-content,
body > .destination-dropdown,
body > .date-picker-dropdown,
body > .guest-dropdown {
    border-radius: 0 !important;
}

/* ========================================
   MODAL BUTTON OVERRIDES
   ======================================== */

/* Clear button - dark text, transparent background */
.clear-dates-btn,
.date-clear-btn,
body > .search-dropdown .clear-dates-btn,
body > .search-dropdown .date-clear-btn,
.date-picker-dropdown .clear-dates-btn,
.cloudstay-search-widget .clear-dates-btn {
    background: transparent !important;
    border: none !important;
    color: var(--sb-modal-clear-color, #222222) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

.clear-dates-btn:hover,
.date-clear-btn:hover,
body > .search-dropdown .clear-dates-btn:hover,
body > .search-dropdown .date-clear-btn:hover,
.date-picker-dropdown .clear-dates-btn:hover,
.cloudstay-search-widget .clear-dates-btn:hover {
    filter: brightness(0.8);
}

/* Apply button - accent color background, white text */
.close-datepicker-btn,
.apply-btn,
.date-apply-btn,
body > .search-dropdown .close-datepicker-btn,
body > .search-dropdown .apply-btn,
body > .search-dropdown .date-apply-btn,
.date-picker-dropdown .close-datepicker-btn,
.cloudstay-search-widget .close-datepicker-btn,
.guest-dropdown .apply-btn,
.guest-dropdown-footer .apply-btn {
    background-color: var(--sb-modal-apply-bg, #E35323) !important;
    color: var(--sb-modal-apply-text, #ffffff) !important;
    border: none !important;
    border-radius: var(--sb-btn-radius, 8px) !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.close-datepicker-btn:hover,
.apply-btn:hover,
.date-apply-btn:hover,
body > .search-dropdown .close-datepicker-btn:hover,
body > .search-dropdown .apply-btn:hover,
body > .search-dropdown .date-apply-btn:hover,
.date-picker-dropdown .close-datepicker-btn:hover,
.cloudstay-search-widget .close-datepicker-btn:hover,
.guest-dropdown .apply-btn:hover,
.guest-dropdown-footer .apply-btn:hover {
    filter: brightness(0.9);
}

/* ========================================
   MOBILE/TABLET SEARCH BAR - STACKED LAYOUT
   ======================================== */
@media (max-width: 767px) {
    /* Stack search bar vertically on mobile/tablet */
    .grid-search-bar,
    .cloudstay-search-bar .grid-search-bar,
    .cloudstay-search-widget .grid-search-bar,
    .cloudstay-search-widget.cloudstay-search-bar .grid-search-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        border-radius: 16px !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Full width search fields */
    .grid-search-bar .search-field,
    .cloudstay-search-bar .search-field,
    .cloudstay-search-widget .search-field,
    .cloudstay-search-widget.cloudstay-search-bar .search-field {
        width: 100% !important;
        flex: none !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid #e0e0e0 !important;
        border-radius: 0 !important;
    }

    /* First field - rounded top */
    .grid-search-bar .search-field:first-child,
    .cloudstay-search-widget.cloudstay-search-bar .grid-search-bar .search-field:first-child {
        border-radius: 16px 16px 0 0 !important;
    }

    /* Hide vertical dividers on mobile */
    .grid-search-bar .search-bar-divider,
    .cloudstay-search-bar .search-bar-divider,
    .cloudstay-search-widget .search-bar-divider {
        display: none !important;
    }

    /* Full width search button */
    .grid-search-bar .search-btn,
    .cloudstay-search-bar .search-btn,
    .cloudstay-search-widget .search-btn,
    .cloudstay-search-widget.cloudstay-search-bar .search-btn {
        width: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
        border-radius: 0 0 16px 16px !important;
        flex: none !important;
    }

    /* Skeleton loader stacked on mobile */
    .cloudstay-search-widget .search-skeleton {
        flex-direction: column !important;
        border-radius: 16px !important;
        padding: 0 !important;
    }

    .cloudstay-search-widget .search-skeleton-field {
        width: 100% !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid #e0e0e0;
    }

    .cloudstay-search-widget .search-skeleton-divider {
        display: none !important;
    }

    .cloudstay-search-widget .search-skeleton-btn {
        width: 100% !important;
        height: 52px !important;
        border-radius: 0 0 16px 16px !important;
        margin: 0 !important;
    }
}

/* ========================================
   Widget Builder CSS Variable Overrides
   These MUST be at the end to override all other rules
   Uses --sp-* variables from Widget Builder Search Page settings
   ======================================== */

/* Page Background - applies to both frontend and admin preview */
.cloudstay-grid-widget,
.cloudstay-search-widget,
#cs-preview-container .cloudstay-grid-widget,
#cs-preview-container .cloudstay-search-widget {
    background-color: var(--sp-page-bg, #ffffff) !important;
}

/* Text Colors - Primary text */
.cloudstay-grid-widget,
.cloudstay-search-widget,
#cs-preview-container .cloudstay-grid-widget,
#cs-preview-container .cloudstay-search-widget,
.cloudstay-grid-widget .card-content,
.cloudstay-grid-widget .card-title,
.cloudstay-grid-widget .listing-card h3,
#cs-preview-container .cloudstay-grid-widget .card-content,
#cs-preview-container .cloudstay-grid-widget .card-title,
#cs-preview-container .cloudstay-grid-widget .listing-card h3 {
    color: var(--sp-text-color, #1f1f1f) !important;
}

/* Text Colors - Secondary text (meta, locations, specs) */
.cloudstay-grid-widget .card-location,
.cloudstay-grid-widget .card-specs,
.cloudstay-grid-widget .card-meta,
.cloudstay-grid-widget .listing-location,
.cloudstay-grid-widget .listing-meta,
#cs-preview-container .cloudstay-grid-widget .card-location,
#cs-preview-container .cloudstay-grid-widget .card-specs,
#cs-preview-container .cloudstay-grid-widget .card-meta,
#cs-preview-container .cloudstay-grid-widget .listing-location,
#cs-preview-container .cloudstay-grid-widget .listing-meta {
    color: var(--sp-text-secondary, #6b7280) !important;
}

/* Header Background */
.cloudstay-grid-widget .search-header,
.cloudstay-grid-widget .grid-header,
#cs-preview-container .cloudstay-grid-widget .search-header,
#cs-preview-container .cloudstay-grid-widget .grid-header {
    background-color: var(--sp-header-bg, #ffffff) !important;
}

/* Sidebar/Filter Panel Background */
.cloudstay-grid-widget .filters-sidebar,
.cloudstay-grid-widget .filter-panel,
.cloudstay-grid-widget .filter-sidebar,
#cs-preview-container .cloudstay-grid-widget .filters-sidebar,
#cs-preview-container .cloudstay-grid-widget .filter-panel,
#cs-preview-container .cloudstay-grid-widget .filter-sidebar {
    background-color: var(--sp-sidebar-bg, #ffffff) !important;
}

/* Listings Grid Container - transparent to show page background */
.cloudstay-grid-widget .listings-section,
.cloudstay-grid-widget .cloudstay-listings,
.cloudstay-grid-widget .listings-grid,
.cloudstay-grid-widget .cloudstay-content,
#cs-preview-container .cloudstay-grid-widget .listings-section,
#cs-preview-container .cloudstay-grid-widget .cloudstay-listings,
#cs-preview-container .cloudstay-grid-widget .listings-grid,
#cs-preview-container .cloudstay-grid-widget .cloudstay-content {
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Admin Preview Container - neutral background by default */
/* Individual widgets will apply their own page background colors */

/* ========================================
   SEARCH PAGE CARD STYLING (sp_card_*)
   These use dedicated --sp-card-* variables for complete isolation
   from the Listing Cards Widget styling
   ======================================== */

/* Search Page Card Container */
.cloudstay-grid-widget .listing-card,
.listings-grid .listing-card {
    background: var(--sp-card-bg, var(--cs-card-bg, transparent)) !important;
    border: var(--sp-card-border-width, 0) solid var(--sp-card-border-color, transparent) !important;
    border-radius: var(--sp-card-radius, var(--cs-card-radius, 0)) !important;
    box-shadow: var(--sp-card-shadow, none) !important;
}

/* Search Page Card Image */
.cloudstay-grid-widget .listing-card .card-image,
.listings-grid .listing-card .card-image {
    border-radius: var(--sp-card-image-radius, var(--cs-image-radius, 0)) !important;
}

/* Search Page Card Title - High specificity to override reset rules */
.cloudstay-grid-widget .listing-card .card-content h3,
.cloudstay-grid-widget .listing-card .card-title,
.cloudstay-grid-widget article.listing-card .card-content h3,
.cloudstay-grid-widget article.listing-card .card-title,
.listings-grid .listing-card .card-content h3,
.listings-grid .listing-card .card-title,
.listings-grid article.listing-card .card-content h3,
.listings-grid article.listing-card .card-title,
#cs-preview-container .cloudstay-grid-widget .listing-card .card-content h3,
#cs-preview-container .cloudstay-grid-widget article.listing-card .card-content h3,
#cs-preview-container .listings-grid .listing-card .card-content h3 {
    font-family: var(--sp-card-title-font, var(--cs-title-font, var(--e-global-typography-text-font-family, inherit))) !important;
    font-size: var(--sp-card-title-size, var(--cs-title-size, 18px)) !important;
    font-weight: var(--sp-card-title-weight, var(--cs-title-weight, 600)) !important;
    text-transform: var(--sp-card-title-transform, var(--cs-title-transform, none)) !important;
    color: var(--sp-card-title-color, var(--cs-title-color, #1f1f1f)) !important;
}

/* Search Page Card Location - High specificity to override reset rules */
.cloudstay-grid-widget .listing-card .card-location,
.cloudstay-grid-widget article.listing-card .card-location,
.listings-grid .listing-card .card-location,
.listings-grid article.listing-card .card-location,
#cs-preview-container .cloudstay-grid-widget .listing-card .card-location,
#cs-preview-container .cloudstay-grid-widget article.listing-card .card-location,
#cs-preview-container .listings-grid .listing-card .card-location {
    font-family: var(--sp-card-location-font, var(--cs-location-font, var(--e-global-typography-text-font-family, inherit))) !important;
    font-size: var(--sp-card-location-size, var(--cs-location-size, 13px)) !important;
    font-weight: var(--sp-card-location-weight, var(--cs-location-weight, 400)) !important;
    text-transform: var(--sp-card-location-transform, var(--cs-location-transform, none)) !important;
    color: var(--sp-card-location-color, var(--cs-location-color, #6b7280)) !important;
}

/* Search Page Card Meta/Specs - High specificity to override reset rules */
.cloudstay-grid-widget .listing-card .card-specs,
.cloudstay-grid-widget article.listing-card .card-specs,
.listings-grid .listing-card .card-specs,
.listings-grid article.listing-card .card-specs,
#cs-preview-container .cloudstay-grid-widget .listing-card .card-specs,
#cs-preview-container .cloudstay-grid-widget article.listing-card .card-specs,
#cs-preview-container .listings-grid .listing-card .card-specs {
    font-family: var(--sp-card-meta-font, var(--cs-meta-font, var(--e-global-typography-text-font-family, inherit))) !important;
    font-size: var(--sp-card-meta-size, var(--cs-meta-size, 13px)) !important;
    font-weight: var(--sp-card-meta-weight, var(--cs-meta-weight, 400)) !important;
    color: var(--sp-card-meta-color, var(--cs-meta-color, #6b7280)) !important;
}

/* Search Page Card Meta Icons */
.cloudstay-grid-widget .listing-card .card-specs svg,
.cloudstay-grid-widget .listing-card .card-specs .spec-icon,
.listings-grid .listing-card .card-specs svg,
.listings-grid .listing-card .card-specs .spec-icon {
    color: var(--sp-card-icon-color, var(--cs-icon-color, #6b7280)) !important;
    stroke: var(--sp-card-icon-color, var(--cs-icon-color, #6b7280)) !important;
}

/* Search Page Card Specs - Icon Format */
.cloudstay-grid-widget .listing-card .card-specs .spec-item,
.listings-grid .listing-card .card-specs .spec-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
    color: var(--sp-card-meta-color, var(--cs-meta-color, #6b7280)) !important;
}

.cloudstay-grid-widget .listing-card .card-specs .spec-item:last-child,
.listings-grid .listing-card .card-specs .spec-item:last-child {
    margin-right: 0;
}

.cloudstay-grid-widget .listing-card .card-specs .spec-item svg,
.listings-grid .listing-card .card-specs .spec-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Search Page Card Price */
.cloudstay-grid-widget .listing-card .card-price,
.listings-grid .listing-card .card-price {
    font-family: var(--sp-card-price-font, var(--cs-price-font, var(--e-global-typography-text-font-family, inherit))) !important;
    font-size: var(--sp-card-price-size, var(--cs-price-size, 12px)) !important;
    font-weight: var(--sp-card-price-weight, var(--cs-price-weight, 600)) !important;
    color: var(--sp-card-price-color, var(--cs-price-color, #1f1f1f)) !important;
}

.cloudstay-grid-widget .listing-card .card-price .price-amount,
.listings-grid .listing-card .card-price .price-amount {
    color: var(--sp-card-price-color, var(--cs-price-color, #1f1f1f)) !important;
}

.cloudstay-grid-widget .listing-card .card-price .price-label,
.cloudstay-grid-widget .listing-card .card-price .price-period,
.cloudstay-grid-widget .listing-card .card-price .price-info,
.listings-grid .listing-card .card-price .price-label,
.listings-grid .listing-card .card-price .price-period,
.listings-grid .listing-card .card-price .price-info {
    color: var(--sp-card-price-label-color, var(--cs-price-label-color, #6b7280)) !important;
}

/* Search Page Card Rating */
.cloudstay-grid-widget .listing-card .card-rating svg,
.listings-grid .listing-card .card-rating svg {
    color: var(--sp-card-rating-color, var(--cs-rating-color, #facc15)) !important;
    fill: var(--sp-card-rating-color, var(--cs-rating-color, #facc15)) !important;
}

/* Search Page Card Discount */
.cloudstay-grid-widget .listing-card .card-price .price-discount,
.cloudstay-grid-widget .listing-card .card-discounts,
.listings-grid .listing-card .card-price .price-discount,
.listings-grid .listing-card .card-discounts {
    color: var(--sp-card-discount-color, var(--cs-discount-color, #059669)) !important;
}

/* Search Page Card Tags Container */
.cloudstay-grid-widget .listing-card .card-tags,
.listings-grid .listing-card .card-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--sp-tag-gap, 6px) !important;
    margin: var(--sp-tag-margin, 0 0 8px 0) !important;
}

/* Search Page Card Tags */
.cloudstay-grid-widget .listing-card .card-tag,
.listings-grid .listing-card .card-tag {
    display: inline-block !important;
    background: var(--sp-tag-bg, #f3f4f6) !important;
    color: var(--sp-tag-color, #374151) !important;
    font-size: var(--sp-tag-font-size, 12px) !important;
    font-weight: var(--sp-tag-font-weight, 500) !important;
    padding: var(--sp-tag-padding-y, 4px) var(--sp-tag-padding-x, 10px) !important;
    border: var(--sp-tag-border-width, 0px) solid var(--sp-tag-border-color, transparent) !important;
    border-radius: var(--sp-tag-radius, 20px) !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.cloudstay-grid-widget .listing-card .card-tag:hover,
.listings-grid .listing-card .card-tag:hover {
    background: var(--sp-tag-hover-bg, #e5e7eb) !important;
    color: var(--sp-tag-hover-color, #1f2937) !important;
    border-color: var(--sp-tag-hover-border-color, transparent) !important;
}

/* Search Page Card Content Padding */
.cloudstay-grid-widget .listing-card .card-content,
.listings-grid .listing-card .card-content {
    padding-top: var(--sp-card-content-padding-top, 12px) !important;
    padding-bottom: var(--sp-card-content-padding-bottom, 0px) !important;
    padding-left: var(--sp-card-content-padding-left, 0px) !important;
    padding-right: var(--sp-card-content-padding-right, 0px) !important;
}

/* Search Page Card Image Height */
.cloudstay-grid-widget .listing-card .card-image,
.listings-grid .listing-card .card-image {
    height: var(--sp-card-image-height, auto) !important;
    aspect-ratio: var(--sp-card-image-ratio, 4/3) !important;
    overflow: hidden !important;
}

.cloudstay-grid-widget .listing-card .card-image img,
.listings-grid .listing-card .card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Search Page Card Hover Effects */
.cloudstay-grid-widget .listing-card,
.listings-grid .listing-card {
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.cloudstay-grid-widget .listing-card:hover,
.listings-grid .listing-card:hover {
    box-shadow: var(--sp-card-hover-shadow, none) !important;
    transform: scale(var(--sp-card-hover-scale, 1)) !important;
}

/* Search Page Card Discount Badge */
.cloudstay-grid-widget .listing-card .card-price .price-discount,
.listings-grid .listing-card .card-price .price-discount {
    display: inline-block !important;
    padding: 4px 8px !important;
    margin-top: 6px !important;
    background: var(--sp-card-discount-bg, #ecfdf5) !important;
    color: var(--sp-card-discount-color, #059669) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Search Page Card Element Margins - controlled by Element Gap setting */
.cloudstay-grid-widget .listing-card .card-content h3,
.listings-grid .listing-card .card-content h3 {
    margin: 0 0 var(--sp-card-element-gap, 0px) 0 !important;
}

.cloudstay-grid-widget .listing-card .card-location,
.listings-grid .listing-card .card-location {
    margin: 0 0 var(--sp-card-element-gap, 0px) 0 !important;
}

.cloudstay-grid-widget .listing-card .card-specs,
.listings-grid .listing-card .card-specs {
    margin: 0 0 var(--sp-card-element-gap, 0px) 0 !important;
}

/* Price-rating row container - margin before it controlled by element gap */
.cloudstay-grid-widget .listing-card .card-price-rating-row,
.listings-grid .listing-card .card-price-rating-row {
    margin-top: var(--sp-card-element-gap, 0px) !important;
}

.cloudstay-grid-widget .listing-card .card-price,
.listings-grid .listing-card .card-price {
    margin: 0 !important;
}

.cloudstay-grid-widget .listing-card .card-rating,
.listings-grid .listing-card .card-rating {
    margin: 0 !important;
}

/* ========================================
   SEARCH PAGE SEARCH BAR STYLING (sp_sb_*)
   These use dedicated --sp-sb-* variables for complete isolation
   from the Search Bar Widget styling
   ======================================== */

/* Search Page Search Bar Container */
/* Target search bars on search page via body class OR inside grid widget */
.cloudstay-grid-widget .search-bar-container,
.cloudstay-grid-widget .cloudstay-search-bar,
.listings-grid + .search-bar-container,
body.cloudstay-search-v2 .cloudstay-search-widget,
body.cloudstay-search-v2 .cloudstay-search-bar {
    background: var(--sp-sb-container-bg, var(--sb-container-bg, #ffffff)) !important;
    border: var(--sp-sb-container-border-width, 1px) solid var(--sp-sb-container-border, var(--sb-container-border-color, #e5e7eb)) !important;
    border-radius: var(--sp-sb-container-radius, var(--sb-container-radius, 0px)) !important;
    box-shadow: var(--sp-sb-container-shadow, var(--sb-container-shadow, none)) !important;
    padding: var(--sp-sb-container-padding, var(--sb-container-padding, 0px)) !important;
}

/* Search Page Search Bar Fields */
.cloudstay-grid-widget .search-bar-container .search-field,
.cloudstay-grid-widget .cloudstay-search-bar .search-field,
body.cloudstay-search-v2 .cloudstay-search-widget .search-field,
body.cloudstay-search-v2 .cloudstay-search-bar .search-field {
    background: var(--sp-sb-field-bg, var(--sb-field-bg, transparent)) !important;
    border-radius: var(--sp-sb-field-radius, var(--sb-field-radius, 0px)) !important;
    border-color: var(--sp-sb-field-border, var(--sb-field-border, transparent)) !important;
    min-height: var(--sp-sb-field-height, var(--sb-field-height, 56px)) !important;
}

.cloudstay-grid-widget .search-bar-container .search-field:hover,
.cloudstay-grid-widget .cloudstay-search-bar .search-field:hover,
body.cloudstay-search-v2 .cloudstay-search-widget .search-field:hover,
body.cloudstay-search-v2 .cloudstay-search-bar .search-field:hover {
    background: var(--sp-sb-field-bg-hover, var(--sb-field-bg-hover, #f3f4f6)) !important;
}

/* Search Page Search Bar Labels */
.cloudstay-grid-widget .search-bar-container .field-label,
.cloudstay-grid-widget .cloudstay-search-bar .field-label,
body.cloudstay-search-v2 .cloudstay-search-widget .search-field-label,
body.cloudstay-search-v2 .cloudstay-search-bar .search-field-label {
    color: var(--sp-sb-label-color, var(--sb-label-color, #1f1f1f)) !important;
    font-size: var(--sp-sb-label-size, var(--sb-label-size, 12px)) !important;
    font-weight: var(--sp-sb-label-weight, var(--sb-label-weight, 600)) !important;
}

/* Search Page Search Bar Values */
.cloudstay-grid-widget .search-bar-container .field-value,
.cloudstay-grid-widget .cloudstay-search-bar .field-value,
body.cloudstay-search-v2 .cloudstay-search-widget .search-field-value,
body.cloudstay-search-v2 .cloudstay-search-bar .search-field-value {
    color: var(--sp-sb-value-color, var(--sb-value-color, #1f1f1f)) !important;
}

/* Search Page Search Bar Placeholder */
.cloudstay-grid-widget .search-bar-container .field-placeholder,
.cloudstay-grid-widget .cloudstay-search-bar .field-placeholder,
body.cloudstay-search-v2 .cloudstay-search-widget .search-field-value.placeholder,
body.cloudstay-search-v2 .cloudstay-search-bar .search-field-value.placeholder {
    color: var(--sp-sb-placeholder-color, var(--sb-placeholder-color, #9ca3af)) !important;
}

/* Search Page Search Bar Button */
.cloudstay-grid-widget .search-bar-container .search-btn,
.cloudstay-grid-widget .cloudstay-search-bar .search-btn,
body.cloudstay-search-v2 .cloudstay-search-widget .search-btn,
body.cloudstay-search-v2 .cloudstay-search-bar .search-btn {
    background: var(--sp-sb-btn-bg, var(--sb-btn-bg, #1f1f1f)) !important;
    color: var(--sp-sb-btn-text, var(--sb-btn-text, #ffffff)) !important;
    border-radius: var(--sp-sb-btn-radius, var(--sb-btn-radius, 0px)) !important;
}

.cloudstay-grid-widget .search-bar-container .search-btn:hover,
.cloudstay-grid-widget .cloudstay-search-bar .search-btn:hover,
body.cloudstay-search-v2 .cloudstay-search-widget .search-btn:hover,
body.cloudstay-search-v2 .cloudstay-search-bar .search-btn:hover {
    background: var(--sp-sb-btn-hover-bg, var(--sb-btn-bg-hover, #000000)) !important;
}

/* Search Page Search Bar Dividers */
.cloudstay-grid-widget .search-bar-container .field-divider,
.cloudstay-grid-widget .cloudstay-search-bar .field-divider,
.cloudstay-grid-widget .search-bar-container .search-bar-divider,
.cloudstay-grid-widget .cloudstay-search-bar .search-bar-divider,
body.cloudstay-search-v2 .cloudstay-search-widget .search-bar-divider,
body.cloudstay-search-v2 .cloudstay-search-bar .search-bar-divider {
    background: var(--sp-sb-divider-color, var(--sb-divider-color, #e5e7eb)) !important;
    width: 1px !important;
    min-width: 1px !important;
    align-self: stretch !important;
    min-height: 32px !important;
    display: block !important;
}

/* Search Page Search Bar Icons */
.cloudstay-grid-widget .search-bar-container .field-icon,
.cloudstay-grid-widget .cloudstay-search-bar .field-icon {
    color: var(--sp-sb-field-icon-color, var(--sb-field-icon-color, #6b7280)) !important;
}

/* Search Page Search Bar Modal */
.cloudstay-grid-widget .search-dropdown,
.cloudstay-grid-widget .date-picker-dropdown,
.cloudstay-grid-widget .guest-dropdown {
    background: var(--sp-sb-modal-bg, var(--sb-modal-bg, #ffffff)) !important;
    border-color: var(--sp-sb-modal-border, var(--sb-modal-border, #e5e7eb)) !important;
    border-radius: var(--sp-sb-modal-radius, var(--sb-modal-radius, 16px)) !important;
    box-shadow: var(--sp-sb-modal-shadow, var(--sb-modal-shadow, 0 10px 40px rgba(0,0,0,0.15))) !important;
}

/* Search Page Modal Text */
.cloudstay-grid-widget .search-dropdown .modal-title,
.cloudstay-grid-widget .date-picker-dropdown .modal-title {
    color: var(--sp-sb-modal-text, var(--sb-modal-text, #1f1f1f)) !important;
}

.cloudstay-grid-widget .search-dropdown .modal-subtitle,
.cloudstay-grid-widget .date-picker-dropdown .modal-subtitle {
    color: var(--sp-sb-modal-text-secondary, var(--sb-modal-text-secondary, #6b7280)) !important;
}

/* Search Page Modal Hover */
.cloudstay-grid-widget .search-dropdown .option:hover,
.cloudstay-grid-widget .guest-dropdown .guest-row:hover {
    background: var(--sp-sb-modal-hover-bg, var(--sb-modal-hover-bg, #f3f4f6)) !important;
}

/* Search Page Modal Apply Button */
.cloudstay-grid-widget .search-dropdown .apply-btn,
.cloudstay-grid-widget .date-picker-dropdown .apply-btn {
    background: var(--sp-sb-modal-apply-bg, var(--sb-modal-apply-bg, #1f1f1f)) !important;
    color: var(--sp-sb-modal-apply-text, var(--sb-modal-apply-text, #ffffff)) !important;
}

/* Search Page Modal Clear Button */
.cloudstay-grid-widget .search-dropdown .clear-btn,
.cloudstay-grid-widget .date-picker-dropdown .clear-btn {
    color: var(--sp-sb-modal-clear-color, var(--sb-modal-clear-color, #6b7280)) !important;
}

/* Search Page Modal Close Button */
.cloudstay-grid-widget .search-dropdown .close-btn,
.cloudstay-grid-widget .date-picker-dropdown .close-btn {
    color: var(--sp-sb-modal-close-color, var(--sb-modal-close-color, #6b7280)) !important;
}

/* Search Page Calendar */
.cloudstay-grid-widget .date-picker-dropdown .calendar,
.cloudstay-grid-widget .search-dropdown .calendar {
    background: var(--sp-sb-cal-bg, var(--cal-bg, #ffffff)) !important;
    border-color: var(--sp-sb-cal-border, var(--cal-border, #e5e7eb)) !important;
}

.cloudstay-grid-widget .date-picker-dropdown .calendar-day,
.cloudstay-grid-widget .search-dropdown .calendar-day {
    color: var(--sp-sb-cal-day-color, var(--cal-day-text-color, #1f1f1f)) !important;
}

.cloudstay-grid-widget .date-picker-dropdown .calendar-weekday,
.cloudstay-grid-widget .search-dropdown .calendar-weekday {
    color: var(--sp-sb-cal-weekday-color, var(--cal-weekday-color, #6b7280)) !important;
}

.cloudstay-grid-widget .date-picker-dropdown .calendar-month-title,
.cloudstay-grid-widget .search-dropdown .calendar-month-title {
    color: var(--sp-sb-cal-month-color, var(--cal-month-title-color, #1f1f1f)) !important;
}

.cloudstay-grid-widget .date-picker-dropdown .calendar-day.selected,
.cloudstay-grid-widget .search-dropdown .calendar-day.selected {
    background: var(--sp-sb-cal-selected-bg, var(--cal-selected-bg, #1f1f1f)) !important;
    color: var(--sp-sb-cal-selected-text, var(--cal-selected-text, #ffffff)) !important;
}

.cloudstay-grid-widget .date-picker-dropdown .calendar-day.in-range,
.cloudstay-grid-widget .search-dropdown .calendar-day.in-range {
    background: var(--sp-sb-cal-range-bg, var(--cal-range-bg, #f3f4f6)) !important;
}

.cloudstay-grid-widget .date-picker-dropdown .calendar-day:hover:not(.disabled):not(.selected),
.cloudstay-grid-widget .search-dropdown .calendar-day:hover:not(.disabled):not(.selected) {
    background: var(--sp-sb-cal-hover-bg, var(--cal-hover-bg, #f3f4f6)) !important;
}

.cloudstay-grid-widget .date-picker-dropdown .calendar-day.disabled,
.cloudstay-grid-widget .search-dropdown .calendar-day.disabled {
    color: var(--sp-sb-cal-disabled-color, var(--cal-disabled-text, #d1d5db)) !important;
}

.cloudstay-grid-widget .date-picker-dropdown .calendar-nav svg,
.cloudstay-grid-widget .search-dropdown .calendar-nav svg {
    color: var(--sp-sb-cal-nav-color, var(--cal-nav-icon, #6b7280)) !important;
}