/* Filter Modal Spacing Fixes - Mobile Only */
/* Keep desktop/tablet spacing as-is, only reduce spacing for mobile view */

/* Mobile specific adjustments - Apply ONLY on mobile screens */
@media (max-width: 1027px) {
    /* Reduce wrapper padding */
    .listing-sidebar--modal .listing-sidebar--wrapper {
        padding: 0.5rem !important;
    }

    /* Reduce content padding from 1.5rem (24px) to 0.5rem (8px) on sides */
    .listing-sidebar--modal .listing-sidebar__content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Override the large bottom padding on content area - more specific selector */
    .listing-sidebar--modal .listing-sidebar--wrapper .listing-sidebar__content {
        padding-bottom: 0.5rem !important;
    }

    /* Also target without modal class for wider coverage */
    .listing-sidebar__content {
        padding-bottom: 0.5rem !important;
    }

    /* Override desktop media query that sets 5rem padding-bottom */
    @media (min-width: 1024px) {
        .listing-sidebar__content {
            padding-bottom: 0.5rem !important;
        }
    }

    /* Reduce header padding */
    .listing-sidebar--modal .listing-sidebar--header {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Set accordion header padding to exactly 16px top and bottom */
    .listing-sidebar__filter-accordion__header {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        border-top: 0.5px solid #EBEBEB !important;
    }

    /* First filter section - remove top padding entirely */
    .listing-sidebar__filter:first-child .listing-sidebar__filter-accordion__header {
        padding-top: 0 !important;
        border-top: none !important;
    }

    /* Reduce filter accordion inner padding - modal only */
    .listing-sidebar--modal .listing-sidebar__filter-accordion__inner {
        padding-top: 0.5rem !important;
        padding-bottom: 1rem !important;
    }

    /* Guarantee exactly 1rem spacing above the divider by removing bottom margin from the last child */
    .listing-sidebar--modal .listing-sidebar__filter-accordion__inner > *:last-child {
        margin-bottom: 0 !important;
    }

    /* Remove padding from last filter section */
    .listing-sidebar__filter:last-child .listing-sidebar__filter-accordion__inner {
        padding-bottom: 0 !important;
    }

    /* Remove bottom margin from last filter */
    .listing-sidebar__filter:last-child {
        margin-bottom: 0 !important;
    }



    /* Reduce bottom bar padding */
    .listing-sidebar--modal .listing-sidebar__bottom-bar {
        padding-left: 0 !important;
        padding-right: 0.75rem !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Remove left padding from Clear button to move it left on mobile */
    .listing-sidebar__bottom-bar__clear-btn,
    .listing__clear-btn {
        padding-left: 0 !important;
    }

    /* Reduce filter subsection spacing */
    .listing-sidebar__filter__subtitle {
        margin-bottom: 0.5rem !important;
    }

    /* Reduce checkbox/option item spacing */
    .listing-sidebar__filter__checkbox,
    .listing-sidebar__filter-group-checkbox__item,
    .listing-sidebar__filter-radio__item {
        margin-bottom: 0.375rem !important;
    }

    /* Tighten spacing for premium badges grid */
    .filter-badges-grid {
        gap: 0.5rem !important;
    }

    .filter-badge-row {
        gap: 0.5rem !important;
    }

    /* Reduce property type row spacing */
    .filter-property-row {
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Reduce environment filter spacing */
    .filter-environment {
        gap: 0.5rem !important;
    }

    /* Add rounded corners to dropdown panel on mobile */
    .filter-toolbar__chip-dropdown__panel {
        border-radius: 20px 20px 0 0 !important;
        overflow: hidden;
    }

    /* Header for location and attendees dropdown - Mobile Only */
    .filter-toolbar__chip-dropdown__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        background: #fff;
        position: relative;
        z-index: 10;
        border-radius: 20px 20px 0 0;
        min-height: 56px;
    }

    /* Title styling */
    .filter-toolbar__chip-dropdown__title {
        font-size: 14px;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0%;
        color: #262626;
        margin: 0;
        display: flex;
        align-items: center;
        font-family: 'Neue Plak', 'Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    /* Close button positioning and styling */
    .filter-toolbar__chip-dropdown__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        color: #4B5563;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .filter-toolbar__chip-dropdown__close:hover {
        background: rgba(0, 0, 0, 0.05);
        color: #1A1A1A;
    }

    .filter-toolbar__chip-dropdown__close svg,
    .filter-toolbar__chip-dropdown__close img {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Adjust content padding to account for header */
    .filter-toolbar__chip-dropdown__content {
        padding-top: 0 !important;
    }

    /* Remove any handle lines from content */
    .filter-toolbar__chip-dropdown__content::before,
    .filter-toolbar__chip-dropdown__content::after,
    .filter-toolbar__chip-dropdown__panel::before,
    .filter-toolbar__chip-dropdown__panel::after {
        display: none !important;
        content: none !important;
    }

    /* Remove gaps at the top of the page - but preserve header positioning */
    /* Ensure no spacing from any element above the listing section */
    .listing-map__header + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .listing--section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .listing--section__inner {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Adjust sticky filter bar to sit right below header with no gap */
    .listing__top-bar {
        top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 10 !important; /* Lower than sidebar modal (9200) so modal appears on top */
    }

    /* Ensure filter sidebar modal appears above the filter toolbar */
    .listing-sidebar--open,
    .listing-sidebar--modal {
        z-index: 9200 !important;
    }

    /* Remove any extra spacing from listing content */
    .listing__content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Remove extra spacing from filter toolbar */
    .filter-toolbar {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .filter-toolbar__filter-bar {
        margin-top: 0 !important;
        padding-top: 8px !important;
        gap: 0.5rem !important;
    }

    /* Remove spacing from listing banner if present */
    .listing-banner {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
    }

    .listing-banner__inner {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .listing-banner--sidebar {
        margin-top: 0 !important;
    }

    /* Remove extra gap between elements */
    .listing-map__header {
        margin-bottom: 0 !important;
    }

    /* Hide Sort by and Show Map buttons when any filter dropdown is open */
    /* Using :has() selector to detect when dropdown is open anywhere in the page */
    body:has(.filter-toolbar__chip-dropdown.is-open) .listing__content--header__controls .listing-sort__wrapper,
    body:has(.filter-toolbar__chip-dropdown.is-open) .listing__content--header__controls .listing__top-bar__map-btn {
        display: none !important;
    }

    /* Keep filter toolbar visible when location/capacity dropdown is open */
    /* The toolbar needs to stay on top of the modal overlay */
    .filter-toolbar__chip-dropdown.is-open ~ * .filter-toolbar,
    .filter-toolbar {
        position: relative;
        z-index: 10001 !important; /* Higher than the modal overlay (10000) */
    }

    /* Ensure the filter buttons container stays visible */
    .listing__top-bar,
    .filter-toolbar__filter-bar {
        position: relative;
        z-index: 10001 !important;
    }

    /* Override hidden/auto overflow causing clipping of dropdowns */
    body:has(.filter-toolbar__chip-dropdown.is-open) .listing__top-bar,
    body.dropdown-active-mobile .listing__top-bar,
    body:has(.filter-toolbar__chip-dropdown.is-open) .filter-toolbar,
    body.dropdown-active-mobile .filter-toolbar,
    body:has(.filter-toolbar__chip-dropdown.is-open) .filter-toolbar__filter-bar,
    body.dropdown-active-mobile .filter-toolbar__filter-bar {
        overflow: visible !important;
        -webkit-overflow-scrolling: auto !important;
    }

    /* BUT: When the main filter sidebar modal is open, lower the toolbar z-index */
    /* so the modal appears on top */
    body.listing-filters-open .listing__top-bar,
    body.listing-filters-open .filter-toolbar,
    body.listing-filters-open .filter-toolbar__filter-bar,
    body.quick-inquiry-modal-open .listing__top-bar,
    body.quick-inquiry-modal-open .filter-toolbar,
    body.quick-inquiry-modal-open .filter-toolbar__filter-bar,
    body:has(.app-navigation__menu--active) .listing__top-bar,
    body:has(.app-navigation__menu--active) .filter-toolbar,
    body:has(.app-navigation__menu--active) .filter-toolbar__filter-bar {
        z-index: 10 !important;
    }

    /* Center align X icon in attendees filter min/max text fields */
    .listing-sidebar__filter__range-input__clear {
        /* The label has font-size 0.875rem with margin-bottom: 0.5rem */
        /* Input field is 3rem (48px) tall */
        /* Position icon vertically centered within the input field only */
        /* Label height ~1.2rem + margin 0.5rem = 1.7rem above input */
        /* Input center is at 1.7rem + 1.5rem = 3.2rem from container top */
        top: calc(1.2rem + 0.5rem + 1.5rem) !important; /* Approx label height + margin + half input */
        transform: translateY(-50%) !important;
    }
}

/* Desktop and tablet styles */
@media (min-width: 1028px) {
    /* Panel border radius on desktop/tablet */
    .filter-toolbar__chip-dropdown__panel {
        border-radius: 8px !important;
    }

    /* Show header on desktop with appropriate styling */
    .filter-toolbar__chip-dropdown__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        background: #fff;
    }

    .filter-toolbar__chip-dropdown__title {
        font-size: 14px;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0%;
        color: #262626;
        margin: 0;
        font-family: 'Neue Plak', 'Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .filter-toolbar__chip-dropdown__close {
        display: none !important;
    }

    /* Center align X icon in attendees filter min/max text fields - Desktop */
    .listing-sidebar__filter__range-input__clear {
        /* The label has font-size 0.875rem with margin-bottom: 0.5rem */
        /* Input field is 3rem (48px) tall */
        /* Position icon vertically centered within the input field only */
        /* Label height ~1.2rem + margin 0.5rem = 1.7rem above input */
        /* Input center is at 1.7rem + 1.5rem = 3.2rem from container top */
        top: calc(1.2rem + 0.5rem + 1.5rem) !important; /* Approx label height + margin + half input */
        transform: translateY(-50%) !important;
    }

    /* Thin divider lines between filter sections */
    .listing-sidebar__filter-accordion__header {
        border-top: 0.5px solid #EBEBEB !important;
        /* padding-top: 1rem !important;
        padding-bottom: 1rem !important; */
    }

    .listing-sidebar__filter:first-child .listing-sidebar__filter-accordion__header {
        border-top: none !important;
    }

    /* Reduce spacing between Show more/less and next section divider - modal only */
    .listing-sidebar--modal .listing-sidebar__filter .collapsable-btn {
        margin-top: 0.25rem !important;
    }

    .listing-sidebar--modal .listing-sidebar__filter-accordion__inner {
        padding-bottom: 1rem !important;
    }

    /* Guarantee exactly 1rem spacing above the divider by removing bottom margin from the last child */
    .listing-sidebar--modal .listing-sidebar__filter-accordion__inner > *:last-child {
        margin-bottom: 0 !important;
    }

    /* Reduce whitespace at bottom of filter sidebar on desktop */
    .listing-sidebar--modal .listing-sidebar__bottom-bar {
        padding-left: 12px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .listing-sidebar--modal .listing-sidebar__content {
        padding-bottom: 2rem !important;
    }
}

/* =================================================================
   CHECKBOX & TEXT ALIGNMENT FIXES
   ================================================================= */

/* Align checkbox and text center for all filter types */
.listing-sidebar__filter__checkbox,
.listing-sidebar__filter-group-checkbox__item,
.listing-sidebar__filter-radio__item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important; /* Standard spacing between checkbox and label */
    margin-bottom: 0.5rem !important;
}

/* Ensure checkbox input doesn't have offset margins and stays at its size */
.listing-sidebar__filter__checkbox input[type="checkbox"],
.listing-sidebar__filter-group-checkbox__item input[type="checkbox"],
.listing-sidebar__filter-radio__item input[type="radio"],
.form-checkbox {
    margin: 0 !important;
    flex-shrink: 0 !important;
    --checkbox-border-color: #D9D9D9;
    --checkbox-width: 16px;
    --checkbox-height: 16px;
    width: 16px !important;
    height: 16px !important;
    border-width: 1px !important;
}

/* Ensure labels are also centered if they contain images/icons (e.g., Food & Beverage) */
.listing-sidebar__filter__checkbox label,
.listing-sidebar__filter-group-checkbox__item label,
.listing-sidebar__filter-radio__item label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
    line-height: normal !important;
    transform: translateY(0px) !important; /* Optical correction for text vertical metrics */
}

/* Fix for icons/images inside labels (e.g., Star icons, Food & Beverage icons) */
.listing-sidebar__filter-group-checkbox__item label img,
.listing-sidebar__filter__checkbox label img {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Tighten mobile spacing for alignment items */
@media (max-width: 1027px) {
    .listing-sidebar__filter__checkbox,
    .listing-sidebar__filter-group-checkbox__item,
    .listing-sidebar__filter-radio__item {
        margin-bottom: 0.5rem !important;
        gap: 4px !important;
    }
}

/* =================================================================
   HOTEL RATE STAR ICON — SELECTED / UNSELECTED STATES
   ================================================================= */

/* By default: show unselected, hide selected */
.listing-sidebar__filter-group-checkbox__item .star-icon--selected {
    display: none !important;
}
.listing-sidebar__filter-group-checkbox__item .star-icon--unselected {
    display: inline-block !important;
}

/* When checkbox is checked: show selected star, hide unselected */
.listing-sidebar__filter-group-checkbox__item input[type="checkbox"]:checked
    ~ label .star-icon--unselected {
    display: none !important;
}
.listing-sidebar__filter-group-checkbox__item input[type="checkbox"]:checked
    ~ label .star-icon--selected {
    display: inline-block !important;
}