/**
 * DataJam Pulse - Maps Styles
 * Phase 5 - CSS Extraction (Batch 4)
 * Extracted: Dec 15, 2025
 * Source: index.html lines 1660-1889
 * Version: v5.4.10
 */

        /* === v4.0.0: POI SEARCH PANEL === */
        .poi-panel {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .poi-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .poi-panel-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .poi-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }

        .poi-category-btn {
            padding: 8px 14px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            background: var(--bg-primary);
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .poi-category-btn:hover {
            border-color: rgba(230, 47, 110, 0.5);
            color: var(--text-primary);
        }

        .poi-category-btn.active {
            background: rgba(230, 47, 110, 0.15);
            border-color: #E62F6E;
            color: #E62F6E;
        }

        .poi-category-btn .poi-count {
            background: var(--bg-tertiary);
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
        }

        .poi-category-btn.active .poi-count {
            background: rgba(230, 47, 110, 0.3);
        }

        .poi-radius-control {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--bg-primary);
            border-radius: 8px;
        }

        .poi-radius-label {
            font-size: 13px;
            color: var(--text-secondary);
            white-space: nowrap;
        }

        .poi-radius-slider {
            flex: 1;
            height: 6px;
            -webkit-appearance: none;
            background: var(--bg-tertiary);
            border-radius: 3px;
            outline: none;
        }

        .poi-radius-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            background: linear-gradient(135deg, #E62F6E, #E94B52);
            border-radius: 50%;
            cursor: pointer;
        }

        .poi-radius-value {
            font-size: 14px;
            font-weight: 600;
            color: #E62F6E;
            min-width: 50px;
            text-align: right;
        }

        .poi-results-summary {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border-color);
        }

        .poi-loading {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            font-size: 13px;
        }

        .poi-loading-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid var(--border-color);
            border-top-color: #E62F6E;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* POI Marker Styles */
        .poi-marker {
            background: white;
            border: 2px solid;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }

        .poi-marker.restaurant { border-color: #ef4444; }
        .poi-marker.cafe { border-color: #f59e0b; }
        .poi-marker.shop { border-color: #3b82f6; }
        .poi-marker.transport { border-color: #10b981; }
        .poi-marker.entertainment { border-color: #8b5cf6; }
        .poi-marker.hotel { border-color: #ec4899; }

        /* v5.4.14: POI Emoji Marker - removes Leaflet default divIcon styling */
        /* v5.4.21: Added .leaflet-div-icon specificity to override Leaflet defaults */
        .poi-emoji-marker,
        .leaflet-div-icon.poi-emoji-marker {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Ensure device markers maintain their pink circle appearance */
        .leaflet-div-icon.custom-marker {
            background: transparent !important;
            border: none !important;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.05);
                opacity: 0.9;
            }
        }

        .logo:hover img {
            animation: pulse 2s ease-in-out infinite;
        }

        .toggle-btn {
            background: #2d3748;
            border: 1px solid #2d3748;
            color: #FEFAF9;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-family: 'Poppins', sans-serif;
            font-size: 13px;
            transition: all 0.3s;
            margin-bottom: 20px;
        }

        .toggle-btn:hover {
            background: #E62F6E;
            border-color: #E62F6E;
        }

        .toggle-btn.active {
            background: linear-gradient(135deg, #E62F6E 0%, #E94B52 100%);
            border-color: #E62F6E;
        }