/* ══ Villa list (Pages/VillaList) ═══════════════════════════════════════════
   Uses the filter field styles of villa-search.css and villa-select.css, which the
   page gets through the search bar partial (_Booking). */

#villaList .col-lg-8 { transition: opacity .2s; }
#villaList.is-loading .col-lg-8 { opacity: .45; pointer-events: none; }

.vl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.vl-count { font-family: "Gilda Display", serif; font-size: 26px; line-height: 1.3; color: var(--vr-ink); }
.vl-filter-btn {
    display: none; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 12px; cursor: pointer;
    background: #fff; border: 1px solid var(--vr-gold-border); color: var(--vr-ink);
    font-size: 15px; font-weight: 700; line-height: 1.4;
}
.vl-filter-btn i { color: var(--vr-gold); }
.vl-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--vr-gold); color: #fff; font-size: 12px; font-weight: 800;
}

.vl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 34px; }
.vl-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 30px; text-decoration: none;
    background: var(--vr-gold-soft); border: 1px solid var(--vr-gold-border); color: #6b4d24;
    font-size: 13px; font-weight: 700; line-height: 1.5; transition: background .2s, color .2s;
}
.vl-chip-key { font-weight: 500; color: var(--vr-muted); }
.vl-chip i { font-size: 10px; opacity: .7; }
.vl-chip:hover { background: var(--vr-gold); color: #fff; }
.vl-chip:hover .vl-chip-key { color: rgba(255, 255, 255, .8); }
.vl-clear { margin-left: 4px; font-size: 13px; font-weight: 700; color: var(--vr-gold-dark); text-decoration: underline; text-underline-offset: 3px; }
#villaList .vr-empty { margin-bottom: 40px; }

/* Filter panel; sticks below the theme's fixed header */
.vl-filters {
    position: sticky; top: 160px; max-height: calc(100vh - 180px); overflow: auto; scrollbar-width: thin;
    background: #fff; border: 1px solid var(--vr-line); border-radius: 18px; padding: 22px 22px 10px;
    box-shadow: 0 10px 34px rgba(20, 16, 10, .05);
}
.vl-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.vl-filters-head h3 { margin: 0; font-family: "Gilda Display", serif; font-size: 22px; color: var(--vr-ink); }
.vl-filters .vs-fsection:first-of-type { border-top: none; }
.vl-filters-foot { display: none; }

@media (max-width: 991.98px) {
    .vl-filter-btn { display: inline-flex; }
    .vl-filters {
        position: fixed; inset: 0; z-index: 1001; max-height: none; border-radius: 0; border: none; box-shadow: none;
        padding: 20px 20px 0; display: flex; flex-direction: column; overflow: hidden;
        transform: translateY(100%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s;
    }
    .vl-filters.is-open { transform: none; visibility: visible; transition: transform .3s ease; }
    .vl-filters-body { flex: 1; overflow: auto; padding-right: 14px; margin-right: -6px; }
    .vl-filters-foot {
        display: block; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--vr-line); background: #fff;
    }
    .vl-filters-foot .vr-btn-reserve { width: 100%; }
}

/* Cards: the facts in one column so "All Inclusive" or "Breakfast Included" don't break mid-phrase;
   villa names a size smaller (long ones took three lines). */
#villaList .rooms2 .item .title, #villaList .item h3.title { font-size: 26px; line-height: 1.25; }
#villaList .room-features > [class*="col-"] { width: 100%; }
#villaList .room-features ul { margin-bottom: 0; }
#villaList .room-features li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pagination in the theme colours (it was Bootstrap blue). */
#villaList .pagination { --bs-pagination-color: #141414; --bs-pagination-hover-color: #141414; --bs-pagination-hover-bg: #f6f1eb;
    --bs-pagination-active-bg: #BD945A; --bs-pagination-active-border-color: #BD945A; --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(189, 148, 90, .25);
    --bs-pagination-border-color: #e8ded0; gap: 6px; }
#villaList .pagination .page-link { border-radius: 8px; min-width: 40px; text-align: center; }