/* ─── 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: 640px;
}


.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: 100vw;
    }

}


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

}

/* ===== FINAL MOBILE UX FIXES: hamburger, search strip, sticky booking ===== */
.site-hamburger{display:none;width:42px;height:42px;border:1.5px solid var(--border);background:#fff;border-radius:12px;color:var(--red);align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.site-menu-backdrop{display:none;position:fixed;inset:0;background:rgba(17,24,39,.48);z-index:1098;opacity:0;transition:opacity .2s ease}.site-menu-backdrop.open{display:block;opacity:1}.site-mobile-menu{position:fixed;top:0;left:0;bottom:0;width:min(84vw,330px);background:#fff;z-index:1099;transform:translateX(-105%);transition:transform .25s ease;box-shadow:12px 0 30px rgba(0,0,0,.18);padding:14px;display:flex;flex-direction:column;gap:8px}.site-mobile-menu.open{transform:translateX(0)}.smm-head{display:flex;align-items:center;justify-content:space-between;padding:10px 6px 14px;border-bottom:1px solid var(--border);margin-bottom:6px}.smm-head strong{font-family:'Poppins',sans-serif;color:var(--red);font-size:1.1rem}.smm-head button{width:38px;height:38px;border:0;border-radius:50%;background:#fee2e2;color:var(--red)}.site-mobile-menu a{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:14px;color:#111827;text-decoration:none;font-weight:800;font-size:.95rem}.site-mobile-menu a i{width:20px;color:var(--red);text-align:center}.site-mobile-menu a:hover{background:#f9fafb}.site-mobile-menu .smm-login{background:var(--red);color:#fff;margin-top:8px;justify-content:center}.site-mobile-menu .smm-login i{color:#fff}
@media(max-width:768px){
  .site-hamburger{display:inline-flex!important}.topbar{position:sticky!important;top:0!important;z-index:900!important;background:#fff!important}.topbar-inner{height:auto!important;min-height:72px!important;padding:10px 14px 12px!important;gap:10px!important;flex-wrap:wrap!important;align-items:center!important}.brand,.topbar-brand{font-size:1.18rem!important;flex:1!important;min-width:0!important}.topbar-right,.topbar-actions{margin-left:auto!important}.topbar-right .t-link,.topbar-actions .topbar-link{display:none!important}.t-btn,.topbar-btn{border-radius:14px!important;padding:10px 14px!important;font-size:.78rem!important;white-space:nowrap!important}.search-strip{order:5!important;flex:0 0 100%!important;max-width:none!important;width:100%!important;height:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;background:#fff!important;border:0!important;border-radius:0!important;padding:8px 0 0!important;box-shadow:none!important}.search-strip .ss-item,.search-strip .ss-field{height:58px!important;border:1px solid #eef0f4!important;border-radius:18px!important;background:#fff!important;padding:10px 12px!important;box-shadow:0 8px 24px rgba(17,24,39,.06)!important}.search-strip .ss-item:last-of-type,.search-strip .ss-field:last-of-type{grid-column:1/2!important}.ss-label,.ss-field-text small{font-size:.62rem!important;color:#94a3b8!important;letter-spacing:.09em!important}.ss-val,.ss-field-text span{font-size:.9rem!important;font-weight:900!important;color:#111827!important}.ss-ico,.ss-field i{font-size:1rem!important}.ss-go,.ss-search-btn{grid-column:2/3!important;grid-row:2!important;height:58px!important;border-radius:18px!important;justify-content:center!important;font-size:1rem!important;font-weight:900!important;box-shadow:0 10px 24px rgba(227,30,36,.26)!important}.bc,.gallery-meta-bar{display:none!important}body{padding-bottom:92px!important}
}
@media(max-width:420px){.topbar-inner{padding-left:10px!important;padding-right:10px!important}.brand,.topbar-brand{font-size:1.05rem!important}.t-btn,.topbar-btn{padding:9px 10px!important}.search-strip{gap:8px!important}.search-strip .ss-item,.search-strip .ss-field,.ss-go,.ss-search-btn{height:54px!important;border-radius:16px!important}.ss-val,.ss-field-text span{font-size:.82rem!important}}
@media(max-width:768px){
  .right-col{display:block!important;width:100%!important}.right-col .cancel-card,.right-col .help-card{display:none!important}.bwidget#bookingWidget{position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:100%!important;margin:0!important;z-index:1200!important;background:#fff!important;border-radius:22px 22px 0 0!important;box-shadow:0 -12px 34px rgba(0,0,0,.18)!important;border:1px solid #eef0f4!important;overflow:hidden!important;transition:max-height .25s ease, transform .25s ease!important}.bwidget#bookingWidget .mobile-booking-head{display:block!important;padding:12px 16px 14px!important;background:#fff!important;border-bottom:1px solid #eef0f4!important}.mobile-slot-toggle{width:100%!important;border:0!important;background:transparent!important;display:flex!important;align-items:center!important;justify-content:space-between!important;color:#4b5563!important;font-size:1.05rem!important;font-weight:900!important;padding:0 0 8px!important}.mobile-price-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}.mobile-price-row strong{font-size:1.55rem!important;line-height:1!important;color:#111827!important;font-weight:900!important}.mobile-price-row small{font-size:.86rem!important;color:#4b5563!important;font-weight:800!important}.mobile-price-row a{display:block!important;color:#0ea5e9!important;font-size:.78rem!important;font-weight:800!important;text-decoration:underline!important;margin-top:4px!important}.mobile-reserve-btn{height:54px!important;min-width:148px!important;border:0!important;border-radius:16px!important;background:var(--red)!important;color:#fff!important;font-size:1rem!important;font-weight:900!important;box-shadow:0 10px 24px rgba(227,30,36,.32)!important}.bwidget#bookingWidget.mobile-collapsed{max-height:116px!important}.bwidget#bookingWidget:not(.mobile-collapsed){max-height:88vh!important;overflow-y:auto!important}.bwidget#bookingWidget.mobile-collapsed .bw-top,.bwidget#bookingWidget.mobile-collapsed .bw-form,.bwidget#bookingWidget.mobile-collapsed .bw-cta-wrap,.bwidget#bookingWidget.mobile-collapsed .bw-trust,.bwidget#bookingWidget.mobile-collapsed>div[style*="padding:1.2rem"]{display:none!important}.bwidget#bookingWidget:not(.mobile-collapsed) .bw-top{display:block!important;background:#111827!important;color:#fff!important;padding:18px 20px!important}.bwidget#bookingWidget:not(.mobile-collapsed)>div[style*="padding:1.2rem"]{display:block!important;padding:16px!important}.bwidget#bookingWidget:not(.mobile-collapsed) .bw-form{display:block!important;padding:0 16px 14px!important}.bwidget#bookingWidget:not(.mobile-collapsed) .bw-cta-wrap{display:block!important;padding:0 16px 18px!important}.bwidget#bookingWidget:not(.mobile-collapsed) .bw-trust{display:none!important}.bwidget#bookingWidget:not(.mobile-collapsed) .bw-cta{height:56px!important;border-radius:16px!important}.bwidget#bookingWidget:not(.mobile-collapsed) .mobile-slot-toggle i{transform:rotate(180deg)}.tab-book-cta{position:fixed!important;right:14px!important;bottom:22px!important;z-index:1190!important;border-radius:18px!important;height:54px!important;padding:0 18px!important;box-shadow:0 10px 24px rgba(227,30,36,.32)!important}.booking-panel-open .tab-book-cta{display:none!important}.float-btns{bottom:120px!important}.booking-panel-open .float-btns{display:none!important}
}