/* Interactive Map Widget */
.map-container-wrapper {
    overflow: hidden; /* To ensure the map radius matches the glass panel radius */
    padding: 0;
    height: 450px;
}

#network-map {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Custom Leaflet Popup Styles */
.leaflet-popup-content-wrapper {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(28, 36, 51, 0.1);
    padding: 4px;
}
.leaflet-popup-content {
    font-family: 'Inter', sans-serif;
    margin: 12px;
    font-size: 0.9rem;
    color: var(--text-main);
    line-height: 1.4;
    min-width: 180px;
}
.leaflet-popup-tip {
    background: rgba(255, 255, 255, 0.95);
}

/* Custom Popup Content Styling */
.popup-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--text-main);
}

.popup-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}
.popup-badge.operational {
    background-color: rgba(52, 199, 89, 0.15);
    color: #28a745;
}
.popup-badge.upcoming {
    background-color: #F0F4F8;
    color: var(--text-muted);
}

.popup-info {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.popup-info i {
    margin-top: 0.2rem;
    color: var(--primary-blue);
}

/* Pulse animation for train marker */
.train-marker {
    background-color: var(--primary-blue);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 15px var(--primary-blue);
    position: relative;
}
.train-marker::after {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%;
    border: 2px solid var(--primary-blue);
    animation: trainPulse 1.5s infinite ease-out;
}
@keyframes trainPulse {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Station marker styling - Operational */
.station-marker {
    background-color: white;
    border: 3px solid var(--secondary-orange);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Station marker styling - Upcoming */
.station-marker-upcoming {
    background-color: #E2E8F0;
    border: 2px solid #A0ABC0;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Map specific responsive fix */
@media (max-width: 900px) {
    .map-section {
        grid-column: 1 / -1;
    }
}