/**
 * 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
 */

/* ========================================
   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(--cs-font-sans);
    --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 */
    font-family: var(--cs-font-family) !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 {
    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;
}

/* 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 .filter-btn,
.cloudstay-grid-widget .sort-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;
}

/* 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(--cs-font-family);
    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(--cs-font-family);
    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(--cs-border);
    font-size: 14px;
    outline: none;
    background: white !important;
    color: 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: #f3f4f6;
}

.cloudstay-search-widget .date-nav-btn svg {
    width: 20px;
    height: 20px;
    stroke: #000;
    pointer-events: none;
}

.cloudstay-search-widget .date-month-title {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: #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 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
}

.cloudstay-search-widget .calendar-weekday {
    text-align: center;
    padding: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cs-text-light);
}

.cloudstay-search-widget .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.cloudstay-search-widget .calendar-day {
    height: 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(--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: #000 !important;
    color: #fff !important;
}

.cloudstay-search-widget .calendar-day.disabled {
    color: #d1d5db;
    cursor: not-allowed;
}

.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: #000 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.cloudstay-search-widget .calendar-day.in-range {
    background-color: #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(--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-secondary);
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.cloudstay-search-widget .apply-dates-btn:hover {
    background: #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(--cs-text) !important;
    background-color: white !important;
    border: none !important;
    border-left: 1px solid 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: #f9fafb !important;
}

.search-filter-btn svg {
    flex-shrink: 0 !important;
    stroke: 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, 1px) solid var(--sb-field-border, #dddddd) !important;
    border-radius: var(--sb-container-radius, 40px) !important;
    box-shadow: var(--sb-container-shadow, 0 2px 8px rgba(0, 0, 0, 0.08)) !important;
    overflow: visible !important;
    position: relative !important;
    padding: var(--sb-container-padding, 8px) !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 */
}

.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: #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: #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: #f3f4f6 !important;
}

.date-picker-dropdown .date-nav-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #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 {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    margin-bottom: 8px !important;
    margin-top: 8px !important;
}

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

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

.date-picker-dropdown .calendar-day {
    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;
    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: #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(--cs-border) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: white !important;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

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

.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(--cs-border) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: white !important;
    color: 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: #dc2626 !important;
    color: #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: 12px !important;
    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(--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;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--cs-text-muted);
    text-transform: uppercase;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}

.sort-btn:hover {
    color: var(--cs-text);
}

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

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

.sort-wrapper {
    position: relative;
}

.sort-option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--sp-dropdown-text, var(--cs-text, #1f1f1f));
}

.sort-option:hover {
    background-color: var(--sp-dropdown-hover-bg, #f3f4f6);
}

.sort-option.active {
    font-weight: 600;
    background-color: var(--sp-dropdown-hover-bg, #f3f4f6);
}

.map-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: white !important;
    color: var(--cs-text) !important;
    border: 1px solid 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(--cs-text) !important;
}

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

.map-toggle-btn:hover svg {
    stroke: 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: white;
    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;
}

.filter-modal-close {
    width: 32px;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
}

.filter-modal-close:hover {
    background: #f3f4f6;
}

.filter-modal-close svg {
    width: 16px;
    height: 16px;
    stroke: #222 !important;
}

.filter-modal-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}

.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(--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(--cs-border);
    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;
}

/* 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(--cs-text);
}

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

.counter-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
}

.counter-btn:hover:not(:disabled) {
    border-color: #222;
    background: #f3f4f6;
}

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

.counter-btn svg {
    width: 12px;
    height: 12px;
    stroke: #222 !important;
    stroke-width: 2.5;
}

.counter-value {
    min-width: 24px;
    text-align: center;
    font-weight: 500;
}

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

/* 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(--cs-border);
    background: white;
    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;
}

.listing-card:hover {
    /* Hover shadow controlled by global styling */
    box-shadow: none !important;
    transform: none !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);
}

/* Touch device: always show nav on cards */
@media (hover: none) and (pointer: coarse) {
    .card-image-swiper .swiper-button-prev,
    .card-image-swiper .swiper-button-next {
        opacity: 1;
        min-width: 44px;
        min-height: 44px;
    }
}

/* Card Content - uses CSS variables from Widget Builder */
.card-content {
    padding: var(--cs-content-padding, 16px) !important;
}

.card-content h3 {
    font-family: var(--cs-title-font, 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, 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, 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;
}

/* 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 - uses CSS variables from Widget Builder */
.card-price {
    font-family: var(--cs-price-font, inherit) !important;
    font-size: var(--cs-price-size, 14px) !important;
    margin: var(--cs-price-margin, 4px) 0 0 0 !important;
}

.card-price .price-original {
    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-weight: var(--cs-price-weight, 600) !important;
    color: var(--cs-price-color, #1f1f1f) !important;
}

.card-price .price-info {
    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-size: 13px !important;
    color: #16a34a !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
}

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

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

.card-price .price-breakdown {
    display: block !important;
    width: 100% !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(--cs-text);
}

/* ========================================
   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(--cs-font-family) !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;
}

/* 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 {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

.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: white !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 4/3;
    background: linear-gradient(
        90deg,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-content {
    padding: 16px;
}

.skeleton-line {
    height: 12px;
    background: linear-gradient(
        90deg,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 0;
    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: linear-gradient(
        90deg,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 0;
    vertical-align: middle;
}

/* Skeleton for circular elements (avatars, icons) */
.skeleton-circle {
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s 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, 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-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, 1), 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 {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   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;
    right: 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 (1440px+ to match JavaScript breakpoints)
   ======================================== */
@media (min-width: 1440px) {
    .listings-grid,
    .cloudstay-grid-widget .listings-grid,
    .cloudstay-listings .listings-grid {
        grid-template-columns: repeat(var(--sp-cols-map-widescreen, 3), 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, 3), 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(--cs-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* 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, 1px) solid var(--sb-field-border, #ddd);
    border-radius: var(--sb-container-radius, 8px);
    box-shadow: var(--sb-container-shadow, 0 1px 3px rgba(0,0,0,0.08));
    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;
    right: 24px !important;
    left: 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: Pin click card highlight */
.listing-card.highlighted,
.cs-listing-card.highlighted {
    box-shadow: 0 0 0 2px var(--cs-accent, #222) !important;
}

/* 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;
    }

    /* Fix: Mobile filters/counter alignment */
    .cloudstay-filter-bar {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .cloudstay-filter-bar .filter-bar-left {
        flex: 0 0 auto;
    }

    .cloudstay-filter-bar .filter-bar-right {
        flex: 1 1 auto;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    .cloudstay-filter-bar .properties-count {
        flex: 0 0 100%;
        order: 3;
        margin-top: 4px;
        justify-content: flex-start;
    }

    /* Fix: Compact filter/sort buttons on mobile */
    .filter-btn,
    .sort-btn {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }

    /* Fix: Compact map toggle button on mobile */
    .map-toggle-btn {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }

    .map-toggle-btn .map-toggle-text {
        display: none;
    }

    .map-toggle-btn svg {
        width: 18px !important;
        height: 18px !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 #999;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.filter-modal .modal-close:hover,
.filter-modal__close:hover {
    background-color: #f0f0f0;
}

.filter-modal .modal-close svg {
    width: 18px;
    height: 18px;
    stroke: #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: #222;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-modal .filter-options .filter-option:hover,
.filter-modal__option:hover {
    border-color: #222;
}

.filter-modal .filter-options .filter-option.selected,
.filter-modal__option.selected {
    background: #222;
    border-color: #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: #fff;
    border-top: 1px solid #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 #ddd;
    color: #222;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-modal .clear-btn:hover,
.filter-modal__clear:hover {
    background-color: #f0f0f0;
    border-color: #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-color: transparent !important;
    border-radius: var(--cs-card-radius) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: none !important;
}

.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-text-primary) !important;
}

.listing-card .card-price .price-amount,
.cs-listing-card__price-amount {
    font-weight: var(--cs-font-semibold) !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-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 */