/*  Hotel List Css 

 <style>
        /* =========================================
          1. GLOBAL & RESET
          ========================================= */
        * { box-sizing: border-box; }
        body { 
            font-family: 'Roboto', sans-serif; 
            background-color: #f4f7fa; 
            margin: 0; 
            padding: 0; 
            overflow-x: hidden;
        }
        button { font-family: 'Roboto', sans-serif; }
        
        /* =========================================
          2. DESKTOP STYLES
          ========================================= */
        .page-container {
            max-width: 1650px;
            margin: 0 auto;
            display: flex;
            gap: 20px;
            margin-top: 30px;
            padding: 0 20px;
        }
        
        .main-content {
            display: flex;
            flex: 1;
            gap: 20px;
        }
        
        /* --- Sidebar --- */
        .filters-sidebar {
            width: 290px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 0;
            height: fit-content;
            flex-shrink: 0;
        }
        
        .filters-header {
            background-color: #004674;
            font-size: 22px !important;
            color: white !important;
            padding: 15px 20px;
            border-radius: 10px 10px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .filters-header h2 { 
            font-size: 20px; 
            color: #fff !important;
            margin: 0; 
        }
        .mob-clear-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 6px 12px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    position:relative;
    z-index: 10;
}

 @media (min-width: 768px) {
        .mob-clear-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 6px 12px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    position:relative;
    z-index: 10;
}
 }


        .clear-btn:hover { 
            background: rgba(90, 179, 252, 0.2); 
        }
        
        /* Mobile Close X (Hidden on Desktop) */
        .sidebar-close-icon { 
            display: none; 
            cursor: pointer; 
            font-size: 24px; 
            color: white; 
            margin-left: 15px; 
        }

        .filter-section { 
            padding: 20px; 
            border-bottom: 1px solid #e0e0e0; 
        }
        .filter-section:last-child { 
            border-bottom: none; 
        }
        .filter-section h3 { 
            font-size: 18px; 
            margin-bottom: 12px; 
            color: #333; 
            margin-top: 0;
        }
        
        .search-box-container { 
            display: flex; 
            gap: 0; 
            margin-bottom: 5px; 
        }
        .search-box { 
            width: 100%; 
            padding: 10px; 
            border: 1px solid #ddd; 
            border-top-left-radius: 6px; 
            border-bottom-left-radius: 6px; 
            font-size: 14px; 
            border-right: 0; 
            outline: none; 
        }
        .search-button { 
            background: #004674; 
            color: white; 
            padding: 10px 15px; 
            border: 1px solid #004674; 
            border-top-right-radius: 6px; 
            border-bottom-right-radius: 6px; 
            cursor: pointer; 
        }
        
        /* Star Rating */
        .star-rating-container { 
            display: flex; 
            gap: 8px; 
        }
        .star-square { 
            flex: 1; 
            aspect-ratio: 1; 
            background-color: #f5f5f5; 
            border-radius: 6px; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            cursor: pointer; 
            transition: all 0.2s ease; 
            border: 1px solid #e0e0e0; 
        }
        .star-square:hover { 
            background-color: #e6f0ff; 
            border-color: #a3daff; 
        }
        .star-square.active { 
            background-color: #004674; 
            color: white; 
        }
        .star-square.active .star-icon { 
            color: white; 
        }
        .star-number { 
            font-size: 16px; 
            font-weight: 600; 
        }
        .star-icon { 
            color: #ffc107; 
            font-size: 24px; 
        }
        
        /* Price Slider */
        .price-slider-container { 
            margin-top: 15px; 
            user-select: none; 
        }
        .price-inputs { 
            display: flex; 
            gap: 10px; 
            margin-bottom: 15px; 
            align-items: center; 
        }
        .price-input { 
            width: 110px; 
            padding: 0px; 
            border: 1px solid #ddd; 
            border-radius: 4px; 
            text-align: center; 
            font-size: 20px; 
        }
        .price-slider { 
            width: 100%; 
            height: 8px; 
            background: #ddd; 
            border-radius: 5px; 
            position: relative; 
            margin-top: 10px; 
        }
        .price-slider-track { 
            height: 8px; 
            background: #1a3a8f; 
            border-radius: 5px; 
            position: absolute; 
            left: 0; 
            width: 100%; 
        }
        .price-slider-thumb { 
            width: 25px; 
            height: 25px; 
            background: #1a3a8f; 
            border-radius: 50%; 
            position: absolute; 
            top: -7.5px; 
            cursor: pointer; 
            z-index: 1; 
            border: 2px solid white; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
        }
        .price-slider-thumb:active { 
            transform: scale(1.1); 
        }
        
        /* Checkboxes and Options - FIXED */
        .filter-options { 
            display: flex; 
            flex-direction: column; 
            gap: 10px; 
        }
        .filter-option { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            gap: 8px; 
            cursor: pointer; 
            padding: 0px 0;
            border-bottom:  none 1px solid #f5f5f5;
        }
        .filter-option:last-child {
            border-bottom: none;
        }
        .filter-option input { 
            width: 18px; 
            height: 18px; 
            cursor: pointer; 
        }
        .filter-option label { 
            font-size: 16px; 
            color: #555; 
            flex: 1; 
            cursor: pointer; 
        }
        .price-tag { 
            font-size: 16px; 
            color: #1a3a8f; 
            font-weight: 600; 
            background: #f0f4ff;
            padding: 2px 8px;
            border-radius: 10px;
            min-width: 40px;
            text-align: center;
        }
        
        /* View More/Show Less - FIXED */
        .view-more-container {
            margin-top: 10px;
        }
        
        .view-more-btn { 
            color: #1a3a8f; 
            font-size: 14px; 
            font-weight: 600; 
            cursor: pointer; 
            display: inline-block;
            padding: 5px 0;
            transition: all 0.3s ease;
        }
        .view-more-btn:hover { 
            color: #3a6fd9; 
            text-decoration: underline; 
        }
        
        .hidden-options { 
            display: none; 
            flex-direction: column; 
            gap: 10px; 
            margin-top: 10px; 
        }
        
        /* When hidden options are shown */
        .hidden-options.show {
            display: flex !important;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Results Header */
        .results-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 10px; 
        }
        .results-header h1 { 
            font-size: 24px; 
            color: #1a3a8f; 
            margin: 0; 
        }
        .sort-options { 
            display: flex; 
            gap: 10px; 
            align-items: center; 
        }
        .sort-options select { 
            padding: 8px 12px; 
            border: 1px solid #ddd; 
            border-radius: 6px; 
            background-color: white; 
        }
        
        /* --- Hotel Card --- */
        .hotels-container { 
            flex: 1; 
            display: flex; 
            flex-direction: column; 
            gap: 20px; 
            max-width: 1050px;
        }


.right-sidebar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: fixed;    /* stay in viewport */
    top: 180px;         /* distance from top */
    right: 480px;        /* distance from right edge of viewport or container */


    /* optional: align content inside sidebar */
    align-items: flex-start; /* left-aligned inside sidebar */
}


        .hotel-card { 
            width: 100%; 
            height: 250px; 
            background-color: white; 
            border-radius: 10px; 
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
            display: flex; 
            overflow: hidden; 
            transition: transform 0.3s ease, box-shadow 0.3s ease; 
        }
        .hotel-card:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); 
        }
        
        /* Image Slider CSS */
        .image-container { 
            width: 300px; 
            height: 250px; 
            position: relative; 
            overflow: hidden; 
            flex-shrink: 0; 
        }
        .slider-wrapper { 
            display: flex; 
            width: 100%; 
            height: 100%; 
            transition: transform 0.4s ease-in-out; 
        }
        .slider-wrapper img { 
            min-width: 100%; 
            height: 100%; 
            object-fit: cover; 
        }
        
        .slider-btn { 
            position: absolute; 
            top: 50%; 
            transform: translateY(-50%); 
            width: 30px; 
            height: 30px; 
            background: rgba(255,255,255,0.8); 
            border-radius: 50%; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            cursor: pointer; 
            z-index: 10; 
            color: #1a3a8f; 
            font-size: 14px; 
            transition: background 0.3s; 
        }
        .slider-btn:hover { 
            background: white; 
        }
        .slider-btn.prev { 
            left: 10px; 
        }
        .slider-btn.next { 
            right: 10px; 
        }

        .wishlist-heart { 
            position: absolute; 
            top: 15px; 
            right: 15px; 
            width: 32px; 
            height: 32px; 
            background: rgba(255, 255, 255, 0.8); 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            cursor: pointer; 
            transition: all 0.3s ease; 
            z-index: 10; 
        }
        .wishlist-heart:hover { 
            background: white; 
            transform: scale(1.1); 
        }
        .hotel-badge { 
            position: absolute; 
            top: 15px; 
            left: 15px; 
            background-color: rgba(255, 255, 255, 0.9); 
            padding: 6px 12px; 
            border-radius: 15px; 
            font-size: 14px; 
            font-weight: 600; 
            color: #1a3a8f; 
            z-index: 5; 
        }
        
        .info-container { 
            flex: 1; 
            padding: 15px; 
            display: flex; 
            flex-direction: column; 
            position: relative; 
        }
        .hotel-name { 
            font-size: 22px; 
            font-weight: 700; 
            color: #1a3a8f; 
            margin-bottom: 6px; 
            margin-top: 0; 
        }
        .hotel-address { 
            color: #666; 
            margin-bottom: 10px; 
            font-size: 15px; 
        }
        .map-link { 
            position: absolute; 
            right: 15px; 
            top: 15px; 
            color: #3a6fd9; 
            text-decoration: none; 
            font-size: 16px; 
            transition: color 0.2s; 
            cursor: pointer; 
        }
        .map-link:hover { 
            color: #1a3a8f; 
            text-decoration: underline; 
        }
        
        .rating-container { 
            display: flex; 
            align-items: center; 
            margin-bottom: 15px; 
        }
        .rating-badge { 
            background-color: #1a3a8f; 
            color: white; 
            padding: 6px 12px; 
            border-radius: 4px; 
            font-weight: 600; 
            margin-right: 12px; 
            font-size: 16px; 
        }
        .rating-text { 
            font-weight: 600; 
            font-size: 16px; 
        }
        .reviews { 
            color: #666; 
            margin-left: 12px; 
            font-size: 14px; 
        }
        
        .services { 
            display: flex; 
            margin-bottom: 5px; 
            gap: 18px; 
        }
        .service i { 
            color: #1a3a8f; 
            font-size: 18px; 
        }
        
        .option-1 { 
            display: flex; 
            align-items: center; 
            color: #2e7d32; 
            font-weight: 600; 
            font-size: 14px; 
            margin-top: auto; 
        }
        .option-1-icon { 
            margin-right: 8px; 
            font-size: 16px; 
        }
        .amenities-row {
    display: flex;
    gap: 20px; /* Adjust this space between the two items */
    align-items: center;
    flex-wrap: wrap; /* Ensures they stack nicely on very small mobile screens */
    margin-top: 10px;
}
.option-2 { 
            display: flex; 
            align-items: center; 
            color: #2e7d32; 
            font-weight: 600; 
            font-size: 14px; 
            margin-top: auto; 
        }
          .option-2-icon { 
            margin-right: 8px; 
            font-size: 16px; 
        }


        .pricing-container { 
            text-align: center;
            width: 250px; 
            height: 220px; 
            padding: 15px; 
            background-color: #f9f9f9; 
            border-left: 1px solid #e0e0e0; 
            display: flex; 
            flex-direction: column; 
            justify-content: space-between; 
            flex-shrink: 0;
        }

        .pricing-container {
    text-align: center;
}

.price-per-night {
    font-size: 28px !important; /* $198 */
    color: #db9601 !important;
}

.price-per-night .cents {
    font-size: 18px; /* 50 */
}

.price-per-night .per-night {
    font-size: 18px; /* / Night */
    color: grey !important;
}

.total-price {
    font-size: 28px; /* $1,378 */
}

.total-price .total-label {
    font-size: 20px; /* Total */
    margin-right: 6px;
}
        .price-info-1{ 
            text-align: center; 
        }
.mob-price-left {
    flex: 1;
}

.mob-price-right {
    flex: 1;
}

        .price-info-1{
    display: flex;
    align-items: baseline;
    flex-direction: column;
}

.mobile-price-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Left price ($198 /night) */
@media (max-width: 768px) {
.mob-price-left strong {
    font-size: 24px;   /* $198 */
}

.mob-price-left small {
    font-size: 18px;   /* /night */
}

/* Right total (Total $1,378) */
.mob-total-label {
    font-size: 20px;   /* Total */
}

.mob-total-val {
    font-size: 28px;   /* $1,378 */
    font-weight: 600;
}

.mob-total-display {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.mob-price-left {
    line-height: 1.2;
}
}

        .price-per-night { 
            font-size: 20px; 
            margin-bottom: 0px; 
            font-weight:500; 
        }
        .total-price { 
            font-size: 28px; 
            font-weight: 700; 
            color: #1a3a8f; 
            margin-bottom: 0px; 
        }
        .taxes { 
            font-size: 16px; 
            color: #666; 
            margin-bottom: 0px; 
        }
        .no-fee { 
            color: #2e7d32; 
            font-size: 16px; 
            font-weight: 500; 
        }
        
        .hotel-select-button { 
            background: linear-gradient(to right, #1a3a8f, #3a6fd9); 
            color: white; 
            border: none; 
            border-radius: 6px; 
            padding: 0px 0; 
            font-size: 24px; 
            font-weight: 600; 
            cursor: pointer; 
            transition: all 0.3s ease; 
            box-shadow: none; 
            width: 100%; 
            text-align: center; 
            display: block; 
            text-decoration: none;
        }
        .hotel-select-button:hover { 

            transform: translateY(-2px); 
            box-shadow: 0 6px 15px rgba(26, 58, 143, 0.4); 
            color: white; 
        }

        /* Banners */
        .signup-custom-banner-container { 
            display: flex; 
            flex-direction: row; 
            width: 100%; 
            height: 180px !important; 
            background: #fff; 
            border: 1px solid #86e7ff; 
            border-radius: 8px; 
            margin: 0; 
            overflow: hidden; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
        }
        .banner-image-container { 
            width: 100%; 
            height: 100%; 
            position: relative; 
            overflow: hidden; 
        }
        .banner-image-container img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
        }
        .banner-content-container { 
            flex: 1; 
            padding: 20px; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            text-align: left; 
        }
        .banner-content-container h1 { 
            font-size: 24px; 
            margin: 0 0 10px 0; 
            color: #1a3a8f; 
        }
        .banner-content-container h2 { 
            font-size: 18px; 
            margin: 0 0 15px 0; 
            color: #333; 
            font-weight: 400; 
        }
        .highlight { 
            font-weight: bold; 
            color: #1a3a8f; 
        }
        .banner-form { 
            display: flex; 
            width: 100%; 
            max-width: 400px; 
        }
        .banner-form input { 
            flex: 1; 
            height: 40px; 
            padding: 0 10px; 
            border: 1px solid #ccc; 
            border-radius: 4px 0 0 4px; 
        }
        .banner-form button { 
            height: 40px; 
            padding: 0 20px; 
            background: #004c9c; 
            color: white; 
            border: none; 
            border-radius: 0 4px 4px 0; 
            cursor: pointer; 
            font-weight: bold; 
        }

        .narrow-banner { 
            width: 100%; 
            height: 40px; 
            background: linear-gradient(90deg, #ff6b6b, #ff8e8e); 
            border-radius: 6px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-weight: 600; 
            font-size: 14px; 
            margin-bottom: 0px; 
        }
        
        .travel-banner { 
            width: 100%; 
            height: 200px; 
            background: white; 
            border-radius: 10px; 
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
            overflow: hidden; 
            display: flex; 
        }
        .travel-banner-image { 
            width: 40%; 
            height: 100%; 
        }
        .travel-banner-image img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
        }
        .travel-banner-content { 
            flex: 1; 
            padding: 20px; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
        }
        .travel-banner-title { 
            font-size: 22px; 
            font-weight: 700; 
            color: #1a3a8f; 
            margin-bottom: 10px; 
        }
        .travel-banner-button { 
            background: linear-gradient(135deg, #1a3a8f, #3a6fd9); 
            color: white; 
            border: none; 
            border-radius: 6px; 
            padding: 10px 20px; 
            font-size: 14px; 
            font-weight: 600; 
            cursor: pointer; 
            width: fit-content; 
        }


        .advert-banner, .top-banner { 
            width: 100%; 
            background: white; 
            border-radius: 10px; 
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
            overflow: hidden; 
            display: flex; 
            flex-direction: column; 
        }
        .advert-header { 
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e); 
            color: white; 
            padding: 10px; 
            text-align: center; 
        }
        .top-banner-header { 
            background: linear-gradient(135deg, #1a3a8f, #3a6fd9); 
            color: white; 
            padding: 10px; 
            text-align: center; 
        }
        .advert-content, .top-banner-content { 
            padding: 15px; 
            flex: 1; 
            display: flex; 
            flex-direction: column; 
        }
        .advert-image, .top-banner-image { 
            width: 100%; 
            height: 120px; 
            border-radius: 8px; 
            overflow: hidden; 
            margin-bottom: 12px; 
        }
        .advert-image img, .top-banner-image img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
        }
        .advert-button, .top-banner-button { 
            color: white; 
            border: none; 
            border-radius: 6px; 
            padding: 8px; 
            font-size: 14px; 
            font-weight: 600; 
            cursor: pointer; 
            width: 100%; 
            text-align: center; 
        }
        .advert-button { 
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e); 
        }
        .top-banner-button { 
            background: linear-gradient(135deg, #1a3a8f, #3a6fd9); 
        }
        .advert-price { 
            text-align: center; 
            margin-bottom: 12px; 
        }
        .new-price { 
            font-size: 20px; 
            font-weight: 700; 
            color: #e74c3c; 
        }

        /* =========================================
          MAP MODAL FIXES
          ========================================= */
        
        /* Map Modal Container - Centered 95% width, 85% height */
        #mapModal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8); /* Dark overlay */
            z-index: 99999;
            display: none;
            justify-content: center;
            align-items: center;
            font-family: 'Roboto', sans-serif;
        }
        
        .map-modal-content {
            width: 95%;
            height: 85%;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            padding: 30px;
        }
        
        /* Map Sidebar */
        .map-modal-sidebar {
            width: 100%;
            height: 40%;
            background: white;
            border-bottom: 1px solid #ddd;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        
        .map-sidebar-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            background: #1a3a8f;
        }
        
        .map-sidebar-header h3 {
            margin: 0 0 5px 0;
            color: #ffffff;
            font-size: 20px;
        }
        
        .map-sidebar-header p {
            margin: 0;
            color: #ffffff;
            font-size: 14px;
        }
        
        .map-hotel-list {
            flex: 1;
            overflow-y: auto;
        }
        
        .map-hotel-item {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .map-hotel-item:hover {
            background-color: #f5f9ff;
            transform: translateX(5px);
        }
        
        .map-hotel-item.active {
            background-color: #e6f0ff;
            border-left: 4px solid #1a3a8f;
        }
        
        .map-hotel-item h4 {
            margin: 0 0 5px 0;
            color: #1a3a8f;
            font-size: 16px;
        }
        
        .map-hotel-address {
            color: #666;
            font-size: 14px;
            margin-bottom: 8px;
        }
        
        .map-hotel-rating {
            background: #1a3a8f;
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .map-hotel-price {
            font-size: 16px;
            font-weight: bold;
            color: #1a3a8f;
        }
        
        /* Map Main Area */
        .map-modal-main {
            flex: 1;
            height: 60%;
            position: relative;
            background: #f0f0f0;
        }
        
        /* Map Container - Fit to parent */
        #hotelMap {
            width: 100% !important;
            height: 100% !important;
            position: absolute !important;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #e0e0e0;
            z-index: 1;
        }
        
        /* Override Leaflet styles */
        .leaflet-container {
            width: 100% !important;
            height: 100% !important;
            font-family: 'Roboto', sans-serif !important;
            background: #e0e0e0 !important;
        }
        
        .leaflet-tile-container img {
            width: 256px !important;
            height: 256px !important;
        }
        
        .leaflet-control-container {
            display: block !important;
        }
        
        .leaflet-control-zoom {
            margin: 10px !important;
            border: none !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
        }
        
        /* Custom Marker Styles */
        .hotel-marker {
            background: transparent !important;
            border: none !important;
            transition: transform 0.3s ease !important;
        }
        
        .hotel-marker div {
            pointer-events: auto !important;
            transition: all 0.3s ease !important;
        }
        
        /* Hover effect for markers */
        .hotel-marker:hover div {
            transform: scale(1.1) !important;
            background: linear-gradient(135deg, #1a3a8f, #3a6fd9) !important;
            box-shadow: 0 4px 12px rgba(26, 58, 143, 0.4) !important;
            z-index: 1000 !important;
        }
        
        /* Highlighted marker style */
        .hotel-marker.highlighted div {
            transform: scale(1.15) !important;
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e) !important;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.5) !important;
            z-index: 1001 !important;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 4px 15px rgba(255, 107, 107, 0.5); }
            50% { box-shadow: 0 4px 20px rgba(255, 107, 107, 0.8); }
            100% { box-shadow: 0 4px 15px rgba(255, 107, 107, 0.5); }
        }
        
        /* Leaflet popup custom styling */
        .leaflet-popup-content-wrapper {
            border-radius: 10px !important;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
            transition: all 0.3s ease !important;
        }
        
        .leaflet-popup-content {
            margin: 15px !important;
            font-family: 'Roboto', sans-serif !important;
            
        }
        
        /* Close Button */
        .map-modal-close {
            position: absolute;
            top: 15px;
            right: 45px;
            z-index: 1000;
            background: white;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            font-size: 20px;
            color: #333;
            transition: all 0.3s ease;
        }
        
        .map-modal-close:hover {
            background: #f8f8f8;
            transform: scale(1.05);
        }
        
        /* Responsive Layout */
        @media (min-width: 768px) {
            .map-modal-content {
                flex-direction: row;
            }
            
            .map-modal-sidebar {
                width: 350px;
                height: 100%;
                border-right: 1px solid #ddd;
                border-bottom: none;
            }
            
            .map-modal-main {
                height: 100%;
            }
            
            .map-modal-close {
                top: 20px;
                right: 50px;
            }
        }
        
        /* Mobile responsiveness */
        @media (max-width: 767px) {
            .map-modal-content {
                width: 98%;
                height: 90%;
            }
            
            .map-sidebar-header {
                padding: 15px;
            }
            
            .map-hotel-item {
                padding: 12px 15px;
            }
            
            .map-modal-close {
                top: 10px;
                right: 10px;
                width: 40px;
                height: 40px;
                font-size: 18px;
            }
        }

        /* Hide Mobile Elements on Desktop */
        .mobile-only-container, .mobile-filter-sort-row, .bottom-sheet { display: none !important; }

        /* =========================================
           3. MOBILE-SPECIFIC STYLES
           ========================================= */

        @media (max-width: 991px) {
            /* Toggle Visibility */
            .mobile-only-container { display: block !important; }
            .desktop-only-element { display: none !important; }
            
            /* HIDE DEFAULT SIDEBAR IN FLOW (We make it fixed below) */
            .filters-sidebar { 
                display: block !important; 
                position: fixed;
                top: 0;
                left: -350px; /* Hide off-screen */
                width: 85%;
                max-width: 320px;
                height: 100vh;
                z-index: 10001;
                transition: left 0.3s ease;
                overflow-y: auto;
                margin: 0;
                border-radius: 0;
                border: none;
            }
            
            /* Slide-in Active State */
            .filters-sidebar.active {
                left: 0;
            }
            
            /* Show Sidebar Close Button */
            .sidebar-close-icon { display: block; }

            /* Layout */
            .page-container { 
                flex-direction: column; 
                margin-top: 10px; 
                padding: 10px; 
                gap: 15px; 
            }
            .main-content { 
                flex-direction: column; 
                gap: 20px; 
            }

            /* 1. Header Bar (Flex Layout Fixed) */
            .mobile-header-bar {
                background: white; 
                padding: 12px 15px; 
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
                display: flex !important; 
                flex-direction: row !important;
                align-items: center !important; 
                justify-content: space-between !important;
                flex-wrap: nowrap;
                font-size: 16px; 
                font-weight: 600; 
                color: #333; 
                margin-bottom: 0px;
            }
            .header-text { 
                flex: 1; 
                display: flex; 
                flex-direction: row; 
                justify-content: center; 
                gap:10px; 
            }
            .header-row { display: block; }
            .edit-icon-inline { 
                flex-shrink: 0; 
                background: #f0f4ff; 
                color: #1a3a8f; 
                width: 35px; 
                height: 35px; 
                font-size: 20px;
                border-radius: 50%; 
                display: flex; 
                align-items: center; 
                justify-content: center; 
                text-decoration: none; 
                margin-left: 10px; 
            }

            /* 2. Filter & Sort Buttons (RESTORED) */
            .mobile-filter-sort-row {
                display: flex !important; 
                gap: 0.5px; 
                margin-bottom: 0px; 
                width: 100%;
            }
            .mob-action-btn {
                flex: 1; 
                background: rgb(255, 255, 255); 
                border: none  1px solid #ddd; 
                border-radius: 0px;
                padding: 10px; 
                text-align: center; 
                font-weight: 600; 
                font-size: 16px;
                color: #333; 
                cursor: pointer; 
                box-shadow: 0 8px 4px rgba(0, 0, 0, 0.048);
                display: flex; 
                align-items: center; 
                justify-content: center; 
                gap: 8px;
            }

             #mob-filter-trigger {
              flex: 0 0 25%;
           }

            #mob-sort-trigger {
              flex: 0 0 75%;
           }

            .mob-action-btn i { color: #004674; }

            /* 3. Slider Chips (Bottom Sheet Triggers) */
            .mobile-chips-slider {
                display: flex !important; 
                overflow-x: auto; 
                gap: 5px; 
                padding-bottom: 5px; 
                margin-bottom: 0px;
                -webkit-overflow-scrolling: touch; 
                scrollbar-width: none;
            }
            .mobile-chips-slider::-webkit-scrollbar { display: none; }
            .chip-btn {
                background: white; 
                border: 1px solid #eee; 
                padding: 8px 16px; 
                border-radius: 20px;
                font-size: 15px; 
                color: #555; 
                white-space: nowrap; 
                cursor: pointer; 
                box-shadow: 0 2px 4px rgba(0,0,0,0.05);
                transition: all 0.3s ease;
            }
            .chip-btn.active { 
                background-color: #003274; 
                color: white; 
                border-color: #004674; 
            }

            /* 4. Results & Map Bar */
            .mobile-results-bar {
                display: flex !important; 
                justify-content: space-between; 
                align-items: center;
                background: white; 
                padding: 10px 15px; 
                border-radius: 8px; 
                margin-bottom: 0px; 
                border: 1px solid #f0f0f0;
            }
            .map-btn {
                background: #004674; 
                color: white !important; 
                padding: 6px 15px; 
                border-radius: 20px;
                font-size: 13px; 
                text-decoration: none; 
                display: flex; 
                align-items: center; 
                gap: 5px;
            }

            /* 5. Hotel Card Modifications */
            .hotel-card { 
                flex-direction: column; 
                height: auto; 
                margin-bottom: 0; 
            }
            .image-container { 
                width: 100%; 
                height: 160px; 
            }
            .info-container { 
                padding: 15px; 
            }
            .pricing-container { 
                display: none; 
            }
            
            /* Mobile Pricing Grid */
            .mobile-price-container {
                display: block !important; 
                padding: 15px; 
                background: #fcfcfc;
                border-top: 1px solid #eee; 
                border-radius: 0 0 10px 10px;
            }
@media (max-width: 768px) {
    .banner-content-container {
        flex: unset !important;
        height: 130px !important;
        padding: 12px !important;
        justify-content: flex-start !important;
    }
}

            /* 6. Banners & Adverts Modifications */
            .signup-custom-banner-container { 
                flex-direction: column; 
                height: auto; 
            }
            .banner-image-container { 
                width: 100%; 
                height: 80px !important; 
            }
            .travel-banner { 
                flex-direction: column; 
                height: auto; 
            }
            .travel-banner-image { 
                width: 100%; 
                height: 150px; 
            }
            .hotel-address { 
                color: #666; 
                margin-bottom: 10px; 
                font-size: 15px; 
            }

            /* Advert styling (Image Left, Content Right) */
            .right-sidebar { 
                width: 100%; 
                order: 3; 
            } 
            .advert-banner, .top-banner { 
                flex-direction: row; 
                height: auto; 
                min-height: 100px; 
                padding: 10px; 
                align-items: center; 
            }
            .advert-header, .top-banner-header { 
                display: none; 
            } 
            .advert-image, .top-banner-image { 
                width: 100px; 
                height: 80px; 
                margin: 0; 
                flex-shrink: 0; 
            }
            .advert-content, .top-banner-content { 
                padding: 0 0 0 15px; 
                justify-content: center; 
                align-items: flex-start; 
            }
            .advert-button, .top-banner-button { 
                display: none; 
            }
            
            /* Bottom Sheet (General) */
            .bottom-sheet-overlay { 
                display: none; 
                position: fixed; 
                top: 0; 
                left: 0; 
                width: 100%; 
                height: 100%; 
                background: rgba(0,0,0,0.5); 
                z-index: 9998; 
            }
            .bottom-sheet-overlay.active { 
                display: block; 
            }
            
            .bottom-sheet {
                display: flex !important;
                flex-direction: column;
                position: fixed; 
                bottom: -100%; 
                left: 0; 
                width: 100%; 
                background: white; 
                z-index: 9999;
                border-radius: 20px 20px 0 0; 
                transition: bottom 0.3s ease; 
                max-height: 80vh;
                box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
            }
            .bottom-sheet.active { 
                bottom: 0; 
            }
            
            .sheet-header { 
                padding: 15px; 
                border-bottom: 1px solid #eee; 
                display: flex; 
                justify-content: space-between; 
                align-items: center; 
                font-weight: bold; 
                color: #004674; 
            }
            
            .sheet-close { 
                cursor: pointer; 
                font-size: 20px; 
                padding: 5px; 
            }
            
            .sheet-content { 
                padding: 20px; 
                overflow-y: auto; 
            }
            
            /* Sort Options */
            .sort-list-item { 
                display: flex; 
                align-items: center; 
                padding: 12px 0; 
                border-bottom: 1px solid #eee; 
                color: #333; 
                font-size: 14px; 
            }
            
            .sort-list-item:last-child { 
                border-bottom: none; 
            }
            
            .sort-list-item input { 
                margin-right: 10px; 
                transform: scale(1.2); 
            }
            .narrow-banner { 
                width: 100%; 
                height: 40px; 
                background: linear-gradient(90deg, #ff6b6b, #ff8e8e); 
                border-radius: 6px; 
                display: flex; 
                align-items: center; 
                justify-content: center; 
                color: white; 
                font-weight: 600; 
                font-size: 14px; 
                margin-bottom: 0px; 
            }

        }




        #bundle-status-bar {
    width: 100%;
    background: #0232cf; /* Theme Blue */
    color: #fff;
    padding: 12px 0;
    font-size: 15px;
    z-index: 999;
    border-bottom: 2px solid #ffcc00; /* Nice gold accent */
}

.bundle-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#bundle-text strong {
    color: #ffcc00;
}

.bundle-cancel {
    background: rgba(255,255,255,0.2);
    border: 1px solid #fff;
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.bundle-cancel:hover {
    background: #fff;
    color: #0232cf;
}