* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Instrument Sans', sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        h2 {
            text-align: center;
            padding: 25px 0;
            color: #0B644D;
            font-size: 2.2rem;
            font-weight: 600;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        h2::before {
            content: "🍽️";
            margin-right: 10px;
            font-size: 2rem;
        }

        /* Main container for two-column layout */
        .restaurant-container {
            display: flex;
            max-width: 1400px;
            margin: 0 auto 40px;
            padding: 0 20px;
            gap: 30px;
            min-height: 75vh;
        }

        /* Left column - Restaurant list */
        .restaurant-list {
            flex: 1;
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            max-width: 450px;
        }

        .restaurant-list-header {
            padding: 20px 25px;
            background: linear-gradient(135deg, #0B644D 0%, #0B644D 100%);
            color: white;
        }

        .restaurant-list-header h3 {
            font-size: 1.4rem;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        .restaurant-list-header h3::before {
            content: "📍";
            margin-right: 10px;
            font-size: 1.3rem;
        }

        .restaurant-list-header p {
            opacity: 0.9;
            font-size: 0.95rem;
            margin-top: 5px;
        }

        .restaurant-cards {
            padding: 0;
            overflow-y: auto;
            flex-grow: 1;
        }

        .restaurant-card {
            padding: 22px 25px;
            border-bottom: 1px solid #eee;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .restaurant-card:hover {
            background-color: #f8f9fa;
            transform: translateX(5px);
        }

        .restaurant-card.active {
            background-color: #e8f4fc;
            border-left: 4px solid #0B644D;
        }

        .restaurant-name {
            font-size: 1.2rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .restaurant-name::before {
            content: "🍴";
            margin-right: 10px;
            font-size: 1rem;
        }

        .restaurant-offer {
            background: linear-gradient(to right, #e8f4fc, #f0f8ff);
            padding: 12px 15px;
            border-radius: 10px;
            margin: 10px 0;
            border-left: 3px solid #0B644D;
        }

        .offer-tag {
            display: inline-block;
            background: #0B644D;
            color: white;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        .offer-details {
            color: #0B644D;
            font-weight: 500;
        }

        .restaurant-address {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-top: 8px;
            display: flex;
            align-items: flex-start;
        }

        .restaurant-address::before {
            content: "📍";
            margin-right: 6px;
            font-size: 0.8rem;
        }

        /* Right column - Map */
        .restaurant-map {
            flex: 2;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            min-height: 600px;
            position: relative;
        }

        #map {
            width: 100%;
            height: 100%;
            border-radius: 16px;
        }

        .map-overlay {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.95);
            padding: 15px 20px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            z-index: 10;
            max-width: 300px;
        }

        .map-overlay h4 {
            color: #0B644D;
            font-size: 1.1rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .map-overlay h4::before {
            content: "🗺️";
            margin-right: 8px;
        }

        .map-overlay p {
            color: #7f8c8d;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        /* Responsive design */
        @media (max-width: 1024px) {
            .restaurant-container {
                flex-direction: column;
                gap: 25px;
            }
            
            .restaurant-list {
                max-width: 100%;
            }
            
            .restaurant-map {
                min-height: 500px;
            }
            
            .map-overlay {
                position: relative;
                top: 0;
                left: 0;
                max-width: 100%;
                margin-bottom: 15px;
            }
        }

        @media (max-width: 768px) {
            h2 {
                font-size: 1.8rem;
                padding: 20px 15px;
            }
            
            .restaurant-container {
                padding: 0 15px;
            }
            
            .restaurant-card {
                padding: 18px 20px;
            }
            
            .restaurant-map {
                min-height: 400px;
            }
        }

        /* Custom scrollbar for restaurant list */
        .restaurant-cards::-webkit-scrollbar {
            width: 6px;
        }

        .restaurant-cards::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .restaurant-cards::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 10px;
        }

        .restaurant-cards::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }

        /* Empty state */
        .empty-state {
            padding: 40px 20px;
            text-align: center;
            color: #95a5a6;
        }

        .empty-state p {
            margin-top: 10px;
        }
        .GoMealsBTN {
    padding: 11px;
    background-color: #0B644D;
    color: white;
    border: solid 1px;
    border-radius: 7px;
    margin-left: auto;
    display: block; /* or inline-block */
}  
    .GoMealsBTN:hover {
     background-color:white ;
    color: #0B644D;
 
}
/* Ensure map container has proper mobile dimensions */
.restaurant-map {
    position: relative;
    width: 100%;
    height: 400px; /* Fixed height for mobile */
}

#map {
    width: 100%;
    height: 100%;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .restaurant-container {
        flex-direction: column;
    }
    
    .restaurant-list {
        width: 100%;
        height: 300px; /* Limit height on mobile */
    }
    
    .restaurant-map {
        height: 300px; /* Adjust map height for mobile */
        width: 100%;
    }
}