:root {
     --primary: #008cff;
     --secondary: #ff664b;
     --dark: #0a223d;
     --bg: #f2f5f7;
 }

 body {
     font-family: 'Plus Jakarta Sans', sans-serif;
     background-color: var(--bg);
     color: var(--dark);
 }



 .filter-sidebar {
     background: white;
     border-radius: 20px;
     padding: 25px;
     border: 1px solid #eef2f6;
     position: sticky;
     top: 20px;
 }

 .hotel-card-premium {
     background: white;
     border-radius: 20px;
     border: 1px solid #eef2f6;
     overflow: hidden;
     margin-bottom: 25px;
     transition: all 0.3s ease;
 }

 .hotel-card-premium:hover {
     transform: scale(1.01);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
 }

 .hotel-img {
     object-fit: cover;
     min-height: 250px;
 }

 .rating-box {
     background: #008cff;
     color: white;
     padding: 5px 10px;
     border-radius: 8px 8px 8px 0;
     font-weight: 800;
     font-size: 18px;
 }

 .hotel-name {
     font-size: 22px;
     font-weight: 800;
     color: #1a1a1a;
     letter-spacing: -0.5px;
 }

 .tag-pill {
     background: #f0f7ff;
     color: #006ce4;
     padding: 4px 12px;
     border-radius: 6px;
     font-size: 11px;
     font-weight: 600;
     margin-right: 5px;
     display: inline-block;
     margin-bottom: 5px;
 }

 .price-big {
     font-size: 28px;
     font-weight: 900;
     color: #1a1a1a;
 }

 .featured-badge {
     position: absolute;
     top: 15px;
     left: 15px;
     background: #ff4757;
     color: white;
     padding: 4px 12px;
     border-radius: 5px;
     font-size: 11px;
     font-weight: bold;
     z-index: 2;
 }

 .extra-small {
     font-size: 11px;
 }

 .bg-light-end {
     background-color: #fbfcfd;
 }

 .photo-overlay {
     position: absolute;
     bottom: 15px;
     left: 15px;
     background: rgba(0, 0, 0, 0.6);
     color: white;
     padding: 2px 10px;
     border-radius: 15px;
     font-size: 11px;
 }

 /* Filter Range Customization */
 .custom-range::-webkit-slider-thumb {
     background: #008cff;
 }

 .custom-checkbox .form-check-input:checked {
     background-color: #008cff;
     border-color: #008cff;
 }

 .hotel-card {
     background: #fff;
     border-radius: 16px;
     overflow: hidden;
     display: flex;
     margin-bottom: 24px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease;
     border: 1px solid #eee;
 }

 .hotel-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 /* Photo Section */
 .hotel-gallery {
     width: 320px;
     height: 220px;
     position: relative;
     flex-shrink: 0;
 }

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

 .photo-count {
     position: absolute;
     bottom: 12px;
     right: 12px;
     background: rgba(0, 0, 0, 0.7);
     color: #fff;
     padding: 4px 10px;
     border-radius: 20px;
     font-size: 12px;
 }

 /* Info Section */
 .hotel-info {
     padding: 20px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .rating-badge {
     background: #0052cc;
     color: #fff;
     padding: 2px 8px;
     border-radius: 4px;
     font-weight: bold;
     font-size: 14px;
 }

 .amenities span {
     font-size: 13px;
     color: #26a541;
     margin-right: 12px;
     font-weight: 500;
 }

 /* Pricing Section */
 .hotel-pricing {
     width: 220px;
     padding: 20px;
     border-left: 1px dashed #ddd;
     text-align: right;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .price-tag {
     font-size: 24px;
     font-weight: 800;
     color: var(--text-dark);
 }

 .price-tag span {
     font-size: 14px;
     color: var(--text-light);
     font-weight: 400;
 }

 .btn-view {
     background: var(--primary);
     color: #fff;
     border: none;
     padding: 10px;
     border-radius: 8px;
     font-weight: 600;
     margin-top: 15px;
     cursor: pointer;
     text-align: center;
     text-decoration: none;
 }

 .top-promo-banner {
     background: linear-gradient(90deg, #001529 0%, #008cff 100%);
     color: white;
     padding: 10px 0;
     font-size: 13px;
     position: relative;
     z-index: 1100;
 }

 .banner-content {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .badge-new {
     background: #ffffff;
     color: #008cff;
     padding: 2px 8px;
     border-radius: 4px;
     font-weight: 900;
     font-size: 10px;
 }

 .banner-link {
     color: #fff;
     text-decoration: underline;
     font-weight: 700;
     margin-left: 10px;
     transition: 0.3s;
 }

 .banner-link:hover {
     color: #ffd700;
     /* Gold touch on hover */
 }

 .close-banner {
     background: transparent;
     border: none;
     color: rgba(255, 255, 255, 0.7);
     cursor: pointer;
     font-size: 16px;
     transition: 0.2s;
 }

 .close-banner:hover {
     color: white;
     transform: rotate(90deg);
 }

 /* Jab banner ho, toh sticky nav ko adjust karne ke liye */
 .sticky-top {
     top: 0;
 }

 /* multtyphoto handlign */
 /* Middle Section Grid */
 .detail-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
     margin-top: 15px;
 }

 .detail-item {
     font-size: 12px;
     color: #4b5563;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .detail-item i {
     color: #059669;
     font-size: 14px;
 }

 /* Alert Pill */
 .alert-pill {
     background: #fff1f2;
     color: #be123c;
     padding: 6px 12px;
     border-radius: 8px;
     font-size: 11px;
     font-weight: 700;
     display: inline-block;
 }

 /* Rating Box */
 .rating-box {
     background: #000;
     color: #fff;
     font-weight: 900;
     padding: 5px 10px;
     border-radius: 8px;
     font-size: 16px;
 }

 /* Photo Navigation */
 .slider-nav {
     position: absolute;
     top: 50%;
     width: 100%;
     display: flex;
     justify-content: space-between;
     padding: 0 10px;
     transform: translateY(-50%);
     z-index: 5;
     opacity: 0;
     transition: 0.3s;
 }

 .hotel-card-premium:hover .slider-nav {
     opacity: 1;
 }

 .nav-btn {
     background: rgba(255, 255, 255, 0.9);
     border: none;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 .photo-counter {
     position: absolute;
     bottom: 12px;
     left: 12px;
     background: rgba(0, 0, 0, 0.6);
     color: white;
     padding: 2px 10px;
     border-radius: 20px;
     font-size: 11px;
     backdrop-filter: blur(4px);
 }

 /* sidebar filter to hotel list page */
 /* Sidebar Parent */
 .sticky-sidebar {
     position: sticky;
     top: 100px;
     /* Header ke niche rahega */
     background: #fff;
     border-radius: 20px;
     border: 1px solid #eef2f6;
     display: flex;
     flex-direction: column;
     max-height: calc(100vh - 120px);
     /* Screen height ke hisab se adjust hoga */
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
 }

 /* Header fix rahega */
 .sticky-filter-header {
     padding: 20px 20px 10px 20px;
     background: #fff;
     border-radius: 20px 20px 0 0;
     z-index: 10;
 }

 /* Scrollable part */
 .filter-scroll-container {
     padding: 0 20px 20px 20px;
     overflow-y: auto;
     scrollbar-width: thin;
     /* Firefox */
     scrollbar-color: #008cff #f1f1f1;
 }

 /* Custom Scrollbar for Chrome/Safari */
 .filter-scroll-container::-webkit-scrollbar {
     width: 6px;
 }

 .filter-scroll-container::-webkit-scrollbar-track {
     background: #f1f1f1;
     border-radius: 10px;
 }

 .filter-scroll-container::-webkit-scrollbar-thumb {
     background: #ced4da;
     border-radius: 10px;
 }

 .filter-scroll-container::-webkit-scrollbar-thumb:hover {
     background: #008cff;
 }

 /* Filter Group Styling */
 .filter-group h6 {
     font-size: 14px;
     color: #1a1a1a;
     margin-bottom: 15px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .search-box-sm .form-control {
     border-radius: 8px;
     background: #f8f9fa;
     border: 1px solid #eee;
     font-size: 12px;
 }

 /* filrer */
 .result-title {
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.bg-success-light {
    background-color: #e6f7ed;
    font-weight: 700;
    padding: 4px 10px;
    font-size: 10px;
}

/* Sort Pill Container */
.sort-pills {
    display: flex;
    background: #fff;
    border-radius: 12px;
    padding: 4px;
    background: #f8f9fa;
}

.sort-pill {
    background: transparent;
    border: none;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #5e6d77;
    border-radius: 10px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sort-pill:hover {
    color: #008cff;
}

.sort-pill.active {
    background: #fff;
    color: #008cff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.sort-label {
    font-size: 12px;
    font-weight: 800;
    color: #adb5bd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Bento Gallery */
.gallery-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
}
.main-img img, .side-imgs img { width: 100%; height: 100%; object-fit: cover; }
.side-imgs { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.more-photos { position: relative; }
.more-photos span {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.4); color:#fff;
    display: flex; align-items: center; justify-content: center; font-weight: bold;
}

/* Nav Links */
.nav-link-custom {
    color: #666; font-weight: 600; text-decoration: none;
    border-bottom: 3px solid transparent; padding-bottom: 5px;
}
.nav-link-custom.active, .nav-link-custom:hover {
    color: #008cff; border-color: #008cff;
}

/* Room Cards */
.room-card { transition: transform 0.2s; }
.room-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

/* Badge Highlights */
.badge-highlight {
    background: #f0f7ff; color: #008cff;
    padding: 8px 15px; border-radius: 10px; font-size: 13px; font-weight: 600;
}
/* Mobile Responsive */
@media (max-width: 576px) {
    .sort-pills {
        width: 100%;
        overflow-x: auto;
    }
}




    

        /* TABS */
        .sticky-tabs-container {
            position: sticky;
            top: 0;
            z-index: 999;
        }

        .tab-trigger {
            background: none;
            border: none;
            padding: 15px 0;
            font-weight: 700;
            color: #888;
            border-bottom: 3px solid transparent;
            transition: 0.3s;
        }

        .tab-trigger.active {
            color: #9b111e;
            border-color: #9b111e;
        }

        /* ELEMENTS */
        .badge-tag {
            background: #f0f4f8;
            color: #444;
            padding: 6px 12px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 12px;
        }

        .rating-pill {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #003b95;
            color: #fff;
            padding: 10px 15px;
            border-radius: 12px;
        }

        .rating-pill .score {
            font-size: 24px;
            font-weight: 800;
        }

        .room-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            min-height: 200px;
        }

        .feature-dot {
            font-size: 10px;
            background: #fff;
            border: 1px solid #ddd;
            padding: 4px 10px;
            border-radius: 50px;
            font-weight: 600;
        }

/* BENTO GALLERY */
.bento-grid-custom { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; height: 500px; }
.bento-main { border-radius: 20px; overflow: hidden; cursor: pointer; position: relative; }
.bento-main img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.bento-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.side-box { border-radius: 16px; overflow: hidden; cursor: pointer; position: relative; }
.side-box img { width: 100%; height: 100%; object-fit: cover; }
.count-overlay-minimal { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.bento-badge { position: absolute; top: 20px; left: 20px; background: #fff; padding: 5px 12px; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* STICKY NAV */
.sticky-nav-bar { position: sticky; top: 0; z-index: 1000; padding: 0; }
.nav-link-custom { text-decoration: none; color: #777; font-weight: 700; font-size: 14px; padding: 20px 0; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav-link-custom.active { color: #9b111e; border-color: #9b111e; }

/* ELEMENTS */
.section-target { scroll-margin-top: 80px; }
.badge-tag { background: #f3f6f9; color: #333; padding: 8px 16px; border-radius: 12px; font-weight: 600; font-size: 13px; }
.rating-box { background: #003b95; color: #fff; padding: 10px 18px; border-radius: 14px; display: flex; align-items: center; gap: 12px; }
.rating-box .score { font-size: 24px; font-weight: 800; }
.room-img-fixed { height: 100%; width: 100%; object-fit: cover; min-height: 250px; }
.feature-pill { font-size: 10px; background: #fff; border: 1px solid #eee; padding: 4px 10px; border-radius: 50px; font-weight: 700; text-uppercase: uppercase; color: #666; }
.border-bottom-dashed { border-bottom: 1px dashed #e0e0e0; }
.hover-up:hover { transform: translateY(-5px); transition: 0.3s; box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; }

/* EXPANDED FILMSTRIP */
.expanded-filmstrip { background: #f8f9fa; padding: 30px; border-radius: 24px; margin-bottom: 30px; }
.filmstrip-scroll { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 15px; }
.film-item { flex: 0 0 80%; height: 450px; }
.film-item img { width: 100%; height: 100%; object-fit: cover; }

/* WIDGETS */
.form-control-minimal { border: 1px solid #eee; padding: 10px 15px; border-radius: 12px; }
.form-control-minimal label { display: block; font-size: 9px; font-weight: 800; color: #999; margin-bottom: 2px; }
.grid-4-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .bento-grid-custom { height: 350px; grid-template-columns: 1fr; }
    .film-item { flex: 0 0 90%; height: 300px; }
}