/* Map Section - No Header */
.leaflet-control-attribution {
  display: none;
}
        .map-section {
            position: relative;
            width: 100%;
            height: 80vh
        }

        /* Floating Control Panel - Top Right */
        .map-controls {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 12px 20px;
            border-radius: 50px;
            flex-flow: column-reverse;
        }

        /* Filter Buttons */
        .filter-group {
            display: flex;
            gap: 8px;
            flex-direction: column;
        }

        .filter-btn {
            border: 1px solid rgba(255, 255, 255, .25);
            color: rgba(255, 255, 255, .8);
            padding: 8px 18px;
            font-size: .75rem;
            letter-spacing: 1.3px;
            cursor: pointer;
            transition: all .3s ease;
            text-transform: uppercase;
            border-radius: 20px;
            font-weight: 500;
            white-space: nowrap;
            background: rgba(21, 52, 42, .92);
        }

        .filter-btn:hover {
            background: rgba(177, 141, 86, .3);
            border-color: rgba(177, 141, 86, .6);
            color: #fff;
            transform: translateY(-1px)
        }

        .filter-btn.active {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
            box-shadow: 0 2px 10px rgba(177, 141, 86, .4)
        }

        /* Theme Toggle Icon */
        .theme-toggle {
            background: transparent;
            border: 1px solid rgba(21, 52, 42, .92);
            color: #fff;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            transition: all .3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            padding: 0;
        }

        /* .theme-toggle:hover {
            background: rgba(177, 141, 86, .3);
            border-color: rgba(177, 141, 86, .6);
            transform: scale(1.1) rotate(15deg)
        } */

        /* Map Container */
        #map {
            width: 100%;
            height: 100%
        }

        /* Custom Pin Styles */
        .custom-pin .pin-wrapper {
            width: 20px;
            height: 20px;
            position: relative
        }

        .pin-core {
            width: 14px;
            height: 14px;
            background: var(--secondary);
            border-radius: 50%;
            border: 2px solid #fffaf0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            box-shadow: 0 0 6px rgba(242, 215, 163, 1), 0 0 15px rgba(217, 181, 124, .6);
        }

        .pin-glow {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 8px;
            height: 8px;
            background: #f2d7a3;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: smoothWave 2.5s ease-in-out infinite;
            pointer-events: none;
            opacity: .9;
            box-shadow: 0 0 15px rgba(255, 243, 214, .9), 0 0 25px rgba(242, 215, 163, .7), 0 0 40px rgba(217, 181, 124, .5)
        }

        @keyframes smoothWave {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: .9
            }

            50% {
                transform: translate(-50%, -50%) scale(2.8);
                opacity: .3
            }

            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: .9
            }
        }

        .custom-pin:hover .pin-core {
            transform: translate(-50%, -50%) scale(1.25);
            transition: .25s;
            box-shadow: 0 0 14px rgba(255, 243, 214, 1), 0 0 28px rgba(242, 215, 163, .9), 0 0 50px rgba(217, 181, 124, .7)
        }

        /* Popup Styling */
        .leaflet-popup-content-wrapper {
            background: rgba(21, 52, 42, 0.98);
            color: #ffffff;
            /* Ensure this is white */
            border-radius: 12px;
            border: 2px solid var(--primary);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        }

        .leaflet-popup-content p,
        .leaflet-popup-content,
        .leaflet-popup-content div {
            color: #ffffff !important;
            opacity: 1 !important;
        }

        .leaflet-popup-content {
            padding: 15px 20px
        }

        .leaflet-popup-content strong {
            color: var(--primary);
            font-size: 1.1rem;
            display: block;
            margin-bottom: 8px
        }

        .leaflet-popup-tip {
            background: rgba(21, 52, 42, .98);
            border: 2px solid var(--primary)
        }

        .leaflet-popup-close-button {
            color: var(--primary) !important;
            font-size: 22px !important
        }

        .leaflet-tile-pane {
            filter: brightness(1) contrast(1.2);
        }

        /* Zoom Controls */
        .leaflet-control-zoom {
            border: 2px solid var(--primary) !important;
            border-radius: 8px !important;
            overflow: hidden
        }

        .leaflet-control-zoom a {
            background: rgba(21, 52, 42, .9) !important;
            color: var(--primary) !important;
            border: none !important
        }

        .leaflet-control-zoom a:hover {
            background: var(--primary) !important;
            color: #fff !important
        }

        /* Responsive */
        @media(max-width:1024px) {
            .filter-btn {
                padding: 7px 14px;
                font-size: .7rem;
                letter-spacing: 1px
            }

            .map-controls {
                padding: 10px 16px;
                gap: 12px
            }
        }

        @media(max-width:768px) {
            .map-section {
                height: 60vh
            }

            .map-controls {
                top: 10px;
                right: 10px;
                border-radius: 12px;
                padding: 12px
            }

            .filter-group {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                padding-right: 0;
                padding-bottom: 12px;
                border-right: none;
            }

            .filter-btn {
                width: 100%;
                text-align: center;
                padding: 8px;
            }
            .leaflet-popup-content {
              padding: 10px 15px !important;
              margin: 0 !important;
              max-width: 230px !important;
            }

            .theme-toggle {
                width: 100%;
                border-radius: 20px;
                padding: 10px;
                height: auto
            }
        }

        @media(max-width:480px) {
            .map-section {
                height: 50vh
            }

            .filter-group {
                grid-template-columns: 1fr
            }
        }

        .bright-labels {
            filter: brightness(1) contrast(2) grayscale(0.8);
        }