#map { height: 600px; width: 100%; background: var(--tg-block-bg); border-bottom: 4px solid var(--tg-red); }
#map { outline: none !important; }
.marker-tgc { width: 12px; height: 12px; background-color: var(--tg-map-btn-tgc); border: 1px solid white; border-radius: 50%; box-shadow: 0 0 10px var(--tg-map-btn-tgc-a); position: relative; }
.marker-tgc::after { content: ''; position: absolute; width: 100%; height: 100%; top: -2px; left: -2px; border: 2px solid var(--tg-map-btn-tgc); border-radius: 50%; animation: marker-pulse 2s infinite; }
.marker-wh { width: 12px; height: 12px; background-color: var(--tg-map-btn-wh); border: 1px solid white; border-radius: 50%; box-shadow: 0 0 10px var(--tg-map-btn-wh-a); position: relative; }
.marker-wh::after { content: ''; position: absolute; width: 100%; height: 100%; top: -2px; left: -2px; border: 2px solid var(--tg-map-btn-wh); border-radius: 50%; animation: marker-pulse 2s infinite; }
.marker-of { width: 12px; height: 12px; background-color: var(--tg-map-btn-of); border: 1px solid white; border-radius: 50%; box-shadow: 0 0 10px var(--tg-map-btn-of-a); position: relative; }
.marker-of::after { content: ''; position: absolute; width: 100%; height: 100%; top: -2px; left: -2px; border: 2px solid var(--tg-map-btn-of); border-radius: 50%; animation: marker-pulse 2s infinite; }
.marker-air { width: 12px; height: 12px; background-color: var(--tg-map-btn-air); border: 1px solid white; border-radius: 50%; box-shadow: 0 0 10px var(--tg-map-btn-air-a); position: relative; }
.marker-air::after { content: ''; position: absolute; width: 100%; height: 100%; top: -2px; left: -2px; border: 2px solid var(--tg-map-btn-air); border-radius: 50%; animation: marker-pulse 2s infinite; }
.marker-mp { width: 12px; height: 12px; background-color: var(--tg-map-btn-mp); border: 1px solid white; border-radius: 50%; box-shadow: 0 0 10px var(--tg-map-btn-mp-a); position: relative; }
.marker-mp::after { content: ''; position: absolute; width: 100%; height: 100%; top: -2px; left: -2px; border: 2px solid var(--tg-map-btn-mp); border-radius: 50%; animation: marker-pulse 2s infinite; }
@keyframes marker-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.5); opacity: 0; } }
.hero-text { padding: 60px 20px; text-align: center; background: var(--tg-black); color: var(--tg-white); } .hero-text h1 { color: var(--tg-red); margin: 0; font-size: 2.8rem; text-transform: uppercase; letter-spacing: 2px; } .hero-text p { color: var(--tg-light-bg); opacity: 0.8; margin-top: 10px; font-size: 1.1rem; }
.leaflet-popup-content-wrapper { background: var(--tg-block-bg) !important; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border: 1px solid #ddd; }
.leaflet-popup-tip { background: var(--tg-block-bg) !important; }
.leaflet-popup-content { margin: 15px 20px; width: 320px !important; font-family: Arial, sans-serif; color: var(--tg-black); }
/* --- Map Popup Styles --- */
.map-popup { font-family: Arial, sans-serif; color: var(--tg-black); line-height: 1.5; padding: 5px; }
.map-popup-title { color: var(--tg-black); font-size: 18px; display: block; margin-bottom: 2px; }
.map-popup-subtitle { color: var(--tg-red); font-size: 14px; font-weight: bold; display: block; margin-bottom: 12px; font-style: italic; }
.map-popup-features { margin: 0; padding-left: 18px; font-size: 13px; color: var(--tg-black); }
.map-popup-features li { margin-bottom: 4px; }
@media (max-width: 768px) {
    #map { height: 400px; }
    .map-popup { font-size: 12px; }
    .map-popup-title { font-size: 16px; }
    .map-popup-subtitle { font-size: 12px; }
    .map-popup-features { font-size: 11px; }
}