/* ============================================================
   Search Page - Left Filter Panel
   Scope: search.aspx (#search-property-filter, inside .filterblock)
   Mobile (<=768px) keeps the existing slide-up overlay filter
   behaviour untouched (see searchstylesheet.css + search.js).
   ============================================================ */

/* Filter option checkboxes — markup uses Bootstrap 5's native
   .form-check / .form-check-input / .form-check-label (replacing the
   old Bootstrap 4 .custom-control set, which the Bootstrap 5 CSS also
   loaded on this page does not style). Applies at every breakpoint
   since the same markup is reused for the mobile overlay. */
:root {
    --primary: #ffffff;
    --dark: #111111;
    --accent: #ffd400;
    --font-base: 'DM Sans', Inter, system-ui, -apple-system, sans-serif;
}
.tsh-display {
    font-family: Archivo Black, Archivo, sans-serif;
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1;
}
#search-property-filter .form-check {
    padding: 6px 15px 6px 2rem;
    margin-bottom: 0;
}

#search-property-filter .form-check-input {
    cursor: pointer;
}

#search-property-filter .form-check-input:checked {
    background-color: #ef0075;
    border-color: #ef0075;
}

#search-property-filter .form-check-label {
    font-size: 12px;
    text-transform: capitalize;
    cursor: pointer;
}
#dvVariantType ul {
padding-left:0px;
}
/* Some other stylesheet loaded on this page defines a bare
   ".collapse { visibility: collapse; }" (not part of Bootstrap 4 or 5 —
   neither ships that rule) which fights the show/hide toggle and makes
   every expanded filter group render with reserved height but no visible
   content. Force our filter groups back to visible regardless of it. */
#search-property-filter .collapse.show {
    visibility: visible !important;
}

/* ============================================================
   Search page — left Filters sidebar (Room Type / Monthly Rent /
   Location Radius / Amenities). See #search-property-filter markup
   in search.aspx and the price-slider + pill JS in searchcolive.js.
   ============================================================ */
#search-property-filter .search-fitler_title_sec {
    padding: 16px 15px 12px;
}

#search-property-filter .search-filter_title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
}

#search-property-filter .filter-clear-all {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#search-property-filter .filter-clear-all:hover {
    color: var(--dark);
}

#search-property-filter .filter-group-label {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
}

/* Room Type / Location Radius pills */
#search-property-filter .filter-pill-label,
#search-property-filter .location-radius-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

#search-property-filter .filter-pill input.peer:checked + .filter-pill-label {
    background-color: var(--dark);
    border-color: var(--dark);
    color: #ffffff;
}

#search-property-filter .location-radius-pill:hover {
    border-color: #cbd5e1;
}

#search-property-filter .location-radius-pill.is-active {
    background-color: var(--dark);
    border-color: var(--dark);
    color: #ffffff;
}

/* Monthly Rent dual-handle range slider */
#search-property-filter .price-range-value {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
}

#search-property-filter .price-range-slider {
    position: relative;
    height: 16px;
    margin: 0 6px 4px;
}

#search-property-filter .price-range-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    height: 4px;
    border-radius: 999px;
    background-color: #e5e7eb;
}

#search-property-filter .price-range-fill {
    position: absolute;
    top: 6px;
    height: 4px;
    border-radius: 999px;
    background-color: var(--dark);
}

#search-property-filter .price-range-input {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 16px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

#search-property-filter .price-range-input::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: transparent;
    height: 16px;
}

#search-property-filter .price-range-input::-moz-range-track {
    background: transparent;
    height: 16px;
    border: none;
}

#search-property-filter .price-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    margin-top: 0;
    border-radius: 50%;
    background-color: var(--dark);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

#search-property-filter .price-range-input::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--dark);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

/* Amenities checkbox list (populated dynamically — see FilterConfiguration
   in custom.js, which fills #divAmenities with .form-check items) */
#search-property-filter .amenities-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: scroll;
}

#search-property-filter .amenities-list .form-check-input {
    width: 16px;
    height: 16px;
    margin-top: 0;
    border-radius: 4px;
    border-color: #d1d5db;
}

#search-property-filter .amenities-list .form-check-input:checked {
    background-color: var(--dark);
    border-color: var(--dark);
}

#search-property-filter .amenities-list .form-check-label {
    font-size: 13px;
    text-transform: none;
    color: #374151;
}

@media (min-width: 769px) {
    /* .filterblock is now a normal Bootstrap col-md-3 column (sibling of
       the col-md-9 results column) — it handles the left placement and
       the 25%-ish width on its own, so the sidebar itself just fills it. */
    #search-property-filter.property_leftview {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 8px;
    }

    #search-property-filter .search-filter-inside {
        max-width: 100%;
        min-width: 100%;
        padding: 0;
    }

    #search-property-filter .search-fitler_title_sec {
        border-bottom: 1px solid #e0e6ed;
        padding: 14px 15px 10px;
    }

    #search-property-filter .search-filter_title {
        padding: 0;
        font-size: 16px;
    }

    /* On desktop there are no tabs to switch between filter groups
       (the tab nav is mobile-only), so show every filter group's
       header stacked instead of only the ones marked "active".
       Each group's own item list still opens/closes independently
       via its .collapse / .searchHeader[data-toggle=collapse] pair. */
    #search-property-filter #ulSearchFilters.tab-content > .tab-pane {
        display: block !important;
    }

    #search-property-filter .properties-filter_section,
    #search-property-filter .multiproperties_filter_view,
    #search-property-filter .mobile_search_filter,
    #search-property-filter .mobile_search,
    #search-property-filter .mobile-sorting {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================================
   Search results grid card — property name overlaid on the
   card image (single image, no carousel). See searchcolive.js
   GetPropertyCardSingleImage().
   ============================================================ */
.property-grid-view-property-sorting .card .product-carousel {
    position: relative;
    overflow: hidden;
}

/* Source images come in whatever aspect ratio the property photo was
   uploaded at (searchstylesheet.css's own height/aspect-ratio rule for
   .card-img-top is commented out), so without a fixed ratio here every
   card's image — and therefore every card — ends up a different height.
   object-fit: cover keeps a uniform ratio without distorting the photo. */
.property-grid-view-property-sorting .card .product-carousel .property-img {
    display: block;
    width: 100%;
    aspect-ratio: 19 / 14;
    object-fit: cover;
}

.property-grid-view-property-sorting .card .product-carousel .property-card-name-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.property-grid-view-property-sorting .card .product-carousel .card-title.property-card-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    margin: 0;
    padding: 0 14px;
    float: none;
    width: auto;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.card .gridcard a {
text-decoration:none!important;
}

/* Whole card navigates to the property page (see the delegated click
   handler in searchcolive.js) — the cursor should say so everywhere on
   it, not just over the location/price row's own link. */
.property-grid-view-property-sorting #PropListCards .card.gridcard {
    cursor: pointer;
}

/* ...except the share popover, which still needs its own controls to
   behave like normal clickable UI rather than triggering navigation. */
.property-grid-view-property-sorting #PropListCards .card.gridcard .cardshare-dv {
    cursor: auto;
}

/* ============================================================
   Search results grid card — location highlights (from
   GetPropertyDetailsById, lazy-loaded — see searchcolive.js
   InitPropertyHighlightsLazyLoad()) and the location/price row
   beneath it.
   ============================================================ */
.property-grid-view-property-sorting .card .card-body .property-highlights {
    margin: 6px 0 10px;
    width: 100%;
    min-height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* LocationHighlights is CMS-authored rich text injected via .html() (see
   FetchPropertyLocationHighlights in searchcolive.js) — some properties'
   content carries its own inline font/color spans (e.g. pasted from Word),
   which otherwise makes that one card's highlights look different from
   every other card. Force the same look regardless, on the element and
   everything inside it. */
    .property-grid-view-property-sorting .card .card-body .property-highlights,
    .property-grid-view-property-sorting .card .card-body .property-highlights * {
        font-family: var(--font-base) !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        font-style: normal !important;
        color: #6b7280 !important;
        line-height: 1.6 !important;
        margin-bottom: 1.25rem;
    }

/* Placeholder copy shown while a card's real highlight text is being
   fetched (searchcolive.js sets the text and adds/removes this class —
   see PROPERTY_HIGHLIGHTS_PLACEHOLDER_TEXT there). It's real text, not an
   empty bar, but still needs to visibly read as "loading" rather than
   final content, hence the soft opacity pulse instead of a solid color. */
.property-grid-view-property-sorting .card .card-body .property-highlights.property-highlights--loading {
    animation: propertyHighlightsPulse 1.4s ease-in-out infinite;
}

@keyframes propertyHighlightsPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.9; }
}

.property-grid-view-property-sorting .card .card-body .property-card-meta-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.property-grid-view-property-sorting .card .card-body .property-card-meta-row .cords {
    color: #4b5563;
    width: auto;
    margin-bottom: 0;
}

.property-grid-view-property-sorting .card .card-body .property-card-meta-row .cords i {
    color: #9ca3af;
    margin-right: 4px;
}

.property-grid-view-property-sorting .card .card-body .property-card-meta-row .price {
    width: auto;
    margin-top: 0 !important;
}
.card.gridcard .card-body {
padding:1.5rem;
}
ul#MRent, ul#divRoomType, #CityListview, #LoctionDiv {
    padding-left: 0px !important;
}
    ul#MRent ul, ul#divRoomType ul, ul#ulCityList, ul#RoomTypebutton, #ulCityList, #LoctionDiv ul, ul#divAmenities, ul#PropertyAmenities, ul#divLanguages, ul#PropertyLanguage, ul#divhobbies, ul#Propertyhobbies, ul#ulFoodhabits, ul#PropertyFoodhobbies {
        padding-left: 0px !important;
    }
.collapse {
visibility:visible!important;
}
.fixed-filters {
top:120px!important;
}
.price-right h6.pricing span {
    font-weight: 500;
    color: #000;
}
.product-carousel h5.property-card-name {
    font-family: Archivo Black, Archivo, sans-serif!important;
    font-weight: 900!important;
    font-size:24px!important;
}
.card-contents {
position:relative;
}
.rotate-45 {
    position: absolute;
    top: -4%;
    width: 16px;
    height: 16px;
    background-color: #F2F0EC;
    transform: rotate(-45deg);
}
.fa-magnifying-glass {
padding-left:10px;
}
/*#searchHeroSection {
    padding: 7rem 4rem 2.5rem 3rem!important;
}*/
@media (max-width: 768px) {
    .filterblock {
        position: static !important;
        height: auto!important;
        margin-bottom:20px;
    }
}