/* ─── RESET & TOKENS ─── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --red: #E31E24;
    --red-dark: #b91c1c;
    --red-soft: #fef2f2;
    --red-mid: #fecaca;
    --ink: #0f172a;
    --ink-mid: #374151;
    --ink-light: #6b7280;
    --ink-faint: #9ca3af;
    --border: #e5e7eb;
    --surface: #f9fafb;
    --white: #ffffff;
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, .06);
    --shadow-md: 0 4px 18px rgba(0, 0, 0, .09);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, .13);
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #f4f5f7;
    color: var(--ink);
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Poppins', sans-serif;
}

/* ─── TOPBAR ─── */
.topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.topbar-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--red);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Inline search strip */
.search-strip {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 50px;
    padding: 0 0.4rem 0 0;
    height: 44px;
    gap: 0;
    transition: border-color .2s, box-shadow .2s;
    max-width: 780px;
}

.search-strip:focus-within {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(227, 30, 36, .1);
}

.ss-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    border-right: 1px solid var(--border);
    height: 100%;
    cursor: pointer;
    min-width: 0;
}

.ss-field:last-of-type {
    border-right: none;
}

.ss-field i {
    color: var(--red);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.ss-field-text {
    min-width: 0;
}

.ss-field-text small {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-faint);
}

.ss-field-text span {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-search-btn {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 0 1.1rem;
    height: 36px;
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .2s;
    flex-shrink: 0;
}

.ss-search-btn:hover {
    background: var(--red-dark);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
}

.topbar-link {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-mid);
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    transition: background .15s;
}

.topbar-link:hover {
    background: var(--surface);
}

.topbar-btn {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: .45rem 1rem;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}

.topbar-btn:hover {
    background: var(--red-dark);
}

/* ─── BREADCRUMB ─── */
.breadcrumb-bar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: .55rem 0;
}

.breadcrumb-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: var(--ink-faint);
}

.breadcrumb a {
    color: var(--ink-light);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--red);
}

.breadcrumb i {
    font-size: .55rem;
}

.breadcrumb .current {
    color: var(--ink);
    font-weight: 600;
}

.result-count {
    font-size: .82rem;
    color: var(--ink-light);
}

.result-count strong {
    color: var(--ink);
    font-weight: 700;
}

/* ─── MAIN LAYOUT ─── */
.main-layout {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 992px) {
    .main-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .sidebar.mobile-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 500;
        background: var(--white);
        overflow-y: auto;
        padding: 1.5rem;
    }
}

/* ─── SIDEBAR ─── */
.sidebar {
    position: sticky;
    top: 80px;
    background: var(--white);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.sidebar-header {
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-header h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
}

.clear-all {
    font-size: .75rem;
    font-weight: 600;
    color: var(--red);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.filter-section {
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--border);
}

.filter-section:last-child {
    border-bottom: none;
}

.filter-title {
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-light);
    margin-bottom: .85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.filter-title i {
    font-size: .65rem;
    transition: transform .25s;
}

.filter-title.collapsed i {
    transform: rotate(-90deg);
}

/* Duration chips */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.chip {
    border: 1.5px solid var(--border);
    border-radius: 40px;
    padding: .3rem .85rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink-mid);
    cursor: pointer;
    transition: all .15s;
    background: var(--white);
    white-space: nowrap;
}

.chip:hover {
    border-color: var(--red);
    color: var(--red);
}

.chip.selected {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* Price range */
.price-range-wrap {
    padding-top: .4rem;
}

.price-labels {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--ink-light);
    margin-bottom: .6rem;
}

.price-labels span {
    font-weight: 600;
    color: var(--ink);
}

.range-track {
    position: relative;
    height: 4px;
    background: var(--border);
    border-radius: 4px;
    margin: .8rem 0;
}

.range-fill {
    position: absolute;
    left: 10%;
    right: 20%;
    top: 0;
    height: 100%;
    background: var(--red);
    border-radius: 4px;
}

.range-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background: var(--white);
    border: 2.5px solid var(--red);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(227, 30, 36, .25);
}

.range-thumb.left {
    left: 10%;
}

.range-thumb.right {
    left: 80%;
}

input[type="range"] {
    width: 100%;
    accent-color: var(--red);
    cursor: pointer;
}

/* Checkboxes */
.check-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.check-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    cursor: pointer;
}

.check-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--red);
    cursor: pointer;
    flex-shrink: 0;
}

.check-item label {
    font-size: .83rem;
    color: var(--ink-mid);
    cursor: pointer;
    flex: 1;
}

.check-item .count {
    font-size: .72rem;
    color: var(--ink-faint);
    background: var(--surface);
    border-radius: 20px;
    padding: .1rem .45rem;
}

/* Star rating filter */
.star-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    padding: .3rem 0;
}

.star-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--red);
    cursor: pointer;
}

.star-row .stars {
    color: #f59e0b;
    font-size: .8rem;
}

.star-row label {
    font-size: .82rem;
    color: var(--ink-mid);
    cursor: pointer;
}

/* Rating filter buttons */
.rating-chips {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.rating-chip {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: .3rem .7rem;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--ink-mid);
    display: flex;
    align-items: center;
    gap: .25rem;
    transition: all .15s;
}

.rating-chip i {
    color: #f59e0b;
    font-size: .7rem;
}

.rating-chip:hover,
.rating-chip.selected {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-soft);
}

/* ─── RESULTS PANEL ─── */
.results-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Sort + View bar */
.sort-bar {
    background: var(--white);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    padding: .75rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    box-shadow: var(--shadow-sm);
}

.sort-left {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.sort-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-light);
    white-space: nowrap;
}

.sort-btn {
    border: 1.5px solid var(--border);
    background: var(--white);
    border-radius: 40px;
    padding: .3rem .9rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink-mid);
    cursor: pointer;
    transition: all .15s;
}

.sort-btn:hover {
    border-color: var(--red);
    color: var(--red);
}

.sort-btn.active {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.sort-right {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.view-toggle {
    display: flex;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.view-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: none;
    cursor: pointer;
    font-size: .85rem;
    color: var(--ink-faint);
    transition: all .15s;
}

.view-btn.active {
    background: var(--red);
    color: #fff;
}

.mobile-filter-btn {
    display: none;
    align-items: center;
    gap: .4rem;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: .4rem .9rem;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--ink-mid);
}

@media (max-width: 992px) {
    .mobile-filter-btn {
        display: flex;
    }
}

/* ─── HOTEL CARDS ─── */
.hotels-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hotel-card {
    background: var(--white);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    display: grid;
    grid-template-columns: 300px 1fr;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s, transform .2s;
    position: relative;
}

.hotel-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Card entrance animation */
.hotel-card {
    animation: cardIn .4s ease both;
}

.hotel-card:nth-child(1) {
    animation-delay: .05s;
}

.hotel-card:nth-child(2) {
    animation-delay: .1s;
}

.hotel-card:nth-child(3) {
    animation-delay: .15s;
}

.hotel-card:nth-child(4) {
    animation-delay: .2s;
}

.hotel-card:nth-child(5) {
    animation-delay: .25s;
}

.hotel-card:nth-child(6) {
    animation-delay: .3s;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .hotel-card {
        grid-template-columns: 1fr;
    }
}

/* Image panel */
.card-img-wrap {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 220px;
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.hotel-card:hover .card-img-wrap img {
    transform: scale(1.05);
}

/* Badges on image */
.img-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.img-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    border-radius: 20px;
    padding: .22rem .65rem;
    font-size: .68rem;
    font-weight: 700;
    color: var(--ink);
    width: fit-content;
}

.img-badge.red {
    background: var(--red);
    color: #fff;
}

.img-badge.green {
    background: #16a34a;
    color: #fff;
}

.img-badge.amber {
    background: #f59e0b;
    color: #fff;
}

/* Wishlist */
.wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(6px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: var(--ink-faint);
    transition: all .2s;
}

.wishlist-btn:hover,
.wishlist-btn.active {
    color: var(--red);
    background: var(--red-soft);
}

/* Image thumbnail strip */
.img-thumbs {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}

.img-thumb {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .7);
    cursor: pointer;
    opacity: .8;
    transition: opacity .15s;
}

.img-thumb:first-child {
    opacity: 1;
    border-color: #fff;
}

.img-thumb:hover {
    opacity: 1;
}

.img-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card content */
.card-body {
    padding: 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .5rem;
}

.card-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.25;
}

.card-rating {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

.rating-badge {
    background: #16a34a;
    color: #fff;
    border-radius: 8px;
    padding: .25rem .55rem;
    font-size: .8rem;
    font-weight: 800;
}

.rating-text {
    font-size: .75rem;
    color: var(--ink-light);
    font-weight: 500;
}

.card-location {
    font-size: .8rem;
    color: var(--ink-light);
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .7rem;
}

.card-location i {
    color: var(--red);
    font-size: .7rem;
}

/* Tags */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .85rem;
}

.ctag {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .18rem .6rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--ink-mid);
}

.ctag.highlight {
    background: var(--red-soft);
    border-color: var(--red-mid);
    color: var(--red);
}

/* Amenities */
.amenities {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.amenity {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    color: var(--ink-light);
}

.amenity i {
    font-size: .72rem;
    color: var(--ink-faint);
}

/* Duration price tabs */
.card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: auto;
}

.duration-tabs {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.dtab {
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: .4rem .8rem;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
    min-width: 72px;
}

.dtab:hover {
    border-color: var(--red);
}

.dtab.active {
    border-color: var(--red);
    background: var(--red-soft);
}

.dtab-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-faint);
    display: block;
}

.dtab.active .dtab-label {
    color: var(--red);
}

.dtab-price {
    font-size: .95rem;
    font-weight: 800;
    color: var(--ink);
    display: block;
    line-height: 1.2;
}

.dtab.active .dtab-price {
    color: var(--red);
}

.dtab-sub {
    font-size: .62rem;
    color: var(--ink-faint);
    display: block;
}

/* Book button */
.book-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
}

.btn-book {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    padding: .7rem 1.6rem;
    font-family: 'Poppins', sans-serif;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(227, 30, 36, .3);
}

.btn-book:hover {
    background: var(--red-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(227, 30, 36, .4);
}

.btn-view-more {
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: .5rem 1.2rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-mid);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.btn-view-more:hover {
    border-color: var(--red);
    color: var(--red);
}

.pay-now-badge {
    font-size: .68rem;
    color: #16a34a;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .2rem;
}

/* ─── FEATURED CARD (premium variant) ─── */
.hotel-card.featured {
    border-color: #fcd34d;
    box-shadow: 0 0 0 2px #fcd34d, var(--shadow-md);
}

.featured-crown {
    position: absolute;
    top: -1px;
    right: 20px;
    background: #f59e0b;
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    padding: .25rem .7rem;
    border-radius: 0 0 8px 8px;
    text-transform: uppercase;
    letter-spacing: .06em;
    z-index: 10;
}

/* ─── MAP TOGGLE BUTTON ─── */
.map-toggle-fab {
    display: none;
    position: fixed;
    bottom: 80px;
    right: 24px;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: .75rem 1.4rem;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    gap: .4rem;
    align-items: center;
}

@media (max-width: 992px) {
    .map-toggle-fab {
        display: flex;
    }
}

/* ─── PAGINATION ─── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 1rem 0 .5rem;
}

.pg-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--white);
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-mid);
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-btn:hover {
    border-color: var(--red);
    color: var(--red);
}

.pg-btn.active {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.pg-btn.nav {
    font-size: .7rem;
}

/* ─── MAP PANEL (side-by-side mode) ─── */
.map-panel {
    display: none;
    width: 100%;
    height: 500px;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    position: relative;
    background: #e8ecef;
    box-shadow: var(--shadow-sm);
}

.map-panel.visible {
    display: block;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .8rem;
    background: linear-gradient(135deg, #e8ecef 0%, #d1d5db 100%);
    color: var(--ink-light);
}

.map-placeholder i {
    font-size: 3rem;
    color: var(--red);
    opacity: .5;
}

.map-placeholder p {
    font-size: .85rem;
    font-weight: 600;
}

/* Pin markers on fake map */
.map-pin {
    position: absolute;
    background: var(--red);
    color: #fff;
    border-radius: 20px;
    padding: .25rem .65rem;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
    transform: translateX(-50%) translateY(-100%);
    transition: transform .2s, z-index .2s;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(227, 30, 36, .4);
}

.map-pin::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--red);
    border-bottom: none;
}

.map-pin:hover {
    transform: translateX(-50%) translateY(-105%) scale(1.1);
    z-index: 10;
}

/* ─── PROMO BANNER ─── */
.promo-banner {
    background: linear-gradient(105deg, #1e1b4b 0%, #312e81 100%);
    border-radius: var(--r-lg);
    padding: 1.2rem 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border: 1px solid rgba(255, 255, 255, .08);
}

.promo-text h4 {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .2rem;
}

.promo-text p {
    font-size: .8rem;
    color: rgba(255, 255, 255, .7);
}

.promo-code {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.code-pill {
    background: rgba(255, 255, 255, .12);
    border: 1.5px dashed rgba(255, 255, 255, .4);
    border-radius: 10px;
    padding: .4rem 1rem;
    font-size: .85rem;
    font-weight: 800;
    color: #fbbf24;
    letter-spacing: .08em;
}

.promo-copy-btn {
    background: #fbbf24;
    color: #1e1b4b;
    border: none;
    border-radius: 10px;
    padding: .45rem 1rem;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s;
}

.promo-copy-btn:hover {
    background: #f59e0b;
}

/* ─── SKELETON LOADER ─── */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* ─── ACTIVE FILTER PILLS ─── */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.af-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--red-soft);
    border: 1px solid var(--red-mid);
    border-radius: 40px;
    padding: .25rem .7rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--red);
}

.af-pill button {
    background: none;
    border: none;
    color: var(--red);
    cursor: pointer;
    font-size: .65rem;
    padding: 0;
    line-height: 1;
    margin-left: .1rem;
}

/* ─── FLOAT CONTACT ─── */
.float-contact {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 300;
}

.float-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: transform .2s;
}

.float-btn:hover {
    transform: scale(1.1);
}

.float-wa {
    background: #25d366;
    color: #fff;
}

.float-call {
    background: var(--red);
    color: #fff;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
    .topbar-inner {
        gap: .8rem;
    }

    .search-strip {
        display: none;
    }

    .topbar-actions .topbar-link {
        display: none;
    }

    .sort-label {
        display: none;
    }
}



/*------ Responsive media Query ------*/

/* Tablet: 993px–1199px */
@media (max-width: 1199px) {
    .main-layout {
        grid-template-columns: 240px 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .hotel-card {
        grid-template-columns: 240px 1fr;
    }

    .search-strip .ss-field:nth-child(3),
    .search-strip .ss-field:nth-child(4) {
        display: none;
    }
}

/* Tablet: 993px–768px */
@media (max-width: 992px) {
    .main-layout {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .sidebar {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 500;
        background: var(--white);
        overflow-y: auto;
        padding: 1rem;
        border-radius: 0;
        max-height: 100vh;
        top: 0;
    }

    .sidebar.mobile-open {
        display: block;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 499;
    }

    .sidebar-overlay.show {
        display: block;
    }

    .mobile-filter-btn {
        display: flex !important;
    }

    .map-toggle-fab {
        display: flex;
    }

    .search-strip {
        display: none;
    }

    .mobile-search-bar {
        display: block;
    }

    .topbar-actions .topbar-link {
        display: none;
    }
}

/* Mobile: ≤ 768px */
@media (max-width: 768px) {
    .topbar-inner {
        padding: 0 1rem;
        gap: .6rem;
    }

    .topbar-brand {
        font-size: 1.05rem;
    }

    .topbar-btn {
        padding: .38rem .75rem;
        font-size: .75rem;
    }

    .breadcrumb-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
        padding: 0 1rem;
    }

    .breadcrumb-bar {
        padding: .6rem 0;
    }

    .main-layout {
        padding: .75rem;
    }

    /* Cards stack vertically */
    .hotel-card {
        grid-template-columns: 1fr;
    }

    .card-img-wrap {
        min-height: 200px;
        max-height: 220px;
    }

    .card-body {
        padding: 1rem;
    }

    .card-name {
        font-size: .95rem;
    }

    .card-top {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .book-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .btn-book,
    .btn-view-more {
        flex: 1;
        text-align: center;
    }

    .duration-tabs {
        gap: .3rem;
    }

    .dtab {
        min-width: 62px;
        padding: .32rem .6rem;
    }

    .sort-bar {
        padding: .6rem .9rem;
    }

    .sort-label {
        display: none;
    }

    .sort-btn:not(.active) {
        display: none;
    }

    .sort-btn.active {
        display: flex;
    }

    /* Show sort as select on mobile */
    .mobile-sort-select {
        display: block !important;
        border: 1.5px solid var(--border);
        border-radius: 40px;
        padding: .28rem .85rem;
        font-size: .72rem;
        font-weight: 600;
        color: var(--ink-mid);
        background: var(--white);
        cursor: pointer;
        outline: none;
    }

    .promo-banner {
        padding: .9rem 1rem;
    }

    .promo-text h4 {
        font-size: .85rem;
    }

    .promo-text p {
        display: none;
    }

    .pagination {
        gap: .25rem;
    }

    .pg-btn {
        width: 32px;
        height: 32px;
        font-size: .75rem;
    }

    .float-contact {
        right: 16px;
        bottom: 20px;
    }

    .map-toggle-fab {
        right: 16px;
        bottom: 70px;
        padding: .6rem 1rem;
        font-size: .75rem;
    }
}

/* Very small: ≤ 420px */
@media (max-width: 420px) {
    .msb-inner {
        grid-template-columns: 1fr;
    }

    .card-img-wrap {
        max-height: 190px;
    }

    .duration-tabs {
        gap: .25rem;
    }

    .dtab {
        min-width: 58px;
    }

    .img-thumbs {
        display: none;
    }
}

/* Mobile select (hidden on desktop) */
.mobile-sort-select {
    display: none;
}

/* Sidebar close button (mobile) */
.sidebar-close-btn {
    display: none;
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    background: var(--white);
    border: none;
    border-bottom: 1px solid var(--border);
    padding: .9rem 1.2rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink-mid);
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: .5rem;
}

@media (max-width: 992px) {
    .sidebar-close-btn {
        display: flex;
    }
}

/* ===============================
 PREMIUM RESPONSIVE UPGRADE 
================================= */


/* universal */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
}


/* ===== 1200px ===== */
@media (max-width:1200px) {

    .main-layout {
        grid-template-columns: 250px 1fr;
    }

    .hotel-card {
        grid-template-columns: 260px 1fr;
    }

    .search-strip {
        max-width: 600px;
    }

}


/* ===== 992px Tablet ===== */
@media (max-width:992px) {

    .main-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .sidebar.mobile-open {
        display: block;
        position: fixed;
        inset: 0;
        background: #fff;
        z-index: 999;
        overflow-y: auto;
        padding: 1rem;
        border-radius: 0;
    }

    .mobile-filter-btn {
        display: flex !important;
    }

    .topbar-actions .topbar-link {
        display: none;
    }

    .search-strip {
        display: none;
    }

    .hotel-card {
        grid-template-columns: 1fr;
    }

    .card-img-wrap {
        height: 250px;
    }

    .map-toggle-fab {
        display: flex;
    }

}


/* ===== 768px Mobile ===== */
@media (max-width:768px) {

    body {
        font-size: 14px;
    }

    .topbar {
        position: sticky;
        top: 0;
    }

    .topbar-inner {
        height: auto;
        padding: .8rem 1rem;
        flex-wrap: wrap;
        gap: .6rem;
    }

    .topbar-brand {
        font-size: 1rem;
    }

    .topbar-btn {
        padding: .45rem .8rem;
        font-size: .75rem;
    }

    .breadcrumb-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }

    .main-layout {
        padding: .8rem;
    }
      
    .sort-bar {
        padding: .8rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .sort-left,
    .sort-right {
        width: 100%;
        justify-content: space-between;
    }

    .sort-btn {
        font-size: .72rem;
        padding: .35rem .75rem;
    }

    .hotel-card {
        border-radius: 18px;
    }

    .card-img-wrap {
        height: 220px;
    }

    .card-body {
        padding: 1rem;
    }

    .card-top {
        flex-direction: column;
        gap: .4rem;
    }

    .card-name {
        font-size: 1rem;
    }

    .card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .book-actions {
        width: 100%;
        flex-direction: row;
        gap: .5rem;
    }

    .btn-book,
    .btn-view-more {
        flex: 1;
    }

    .duration-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .4rem;
    }

    .dtab {
        min-width: auto;
        padding: .45rem;
    }

    .promo-banner {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .promo-code {
        width: 100%;
        justify-content: space-between;
    }

    .float-contact {
        bottom: 18px;
        right: 18px;
    }

    .map-toggle-fab {
        bottom: 75px;
        right: 18px;
    }

}


/* ===== 576px ===== */
@media (max-width:576px) {

    .topbar-brand {
        font-size: .92rem;
    }

    .card-img-wrap {
        height: 190px;
    }

    .rating-text {
        font-size: .68rem;
    }

    .amenity,
    .ctag {
        font-size: .67rem;
    }

    .btn-book {
        padding: .7rem;
    }

    .btn-view-more {
        padding: .7rem;
    }

}


/* ===== 420px ===== */
@media (max-width:420px) {

    .img-thumbs {
        display: none;
    }

    .card-img-wrap {
        height: 170px;
    }

    .duration-tabs {
        grid-template-columns: 1fr;
    }

    .book-actions {
        flex-direction: column;
    }

    .btn-book,
    .btn-view-more {
        width: 100%;
    }

}


/* ===== Bottom Mobile Nav ===== */
.mobile-bottom-nav {
    display: none;
}

@media (max-width:768px) {

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #eee;
        z-index: 999;
        justify-content: space-around;
        padding: .7rem;
    }

    .mobile-bottom-nav a {
        text-decoration: none;
        color: #555;
        font-size: .75rem;
        font-weight: 600;
    }

}