/* Cities.aspx page styles - extracted from inline */
        /* Scoped to #map-container — NOT :root to avoid --border-color / --shadow global leaks */
        #map-container {
            --primary-color: #464655;
            --primary-dark: #134c91;
            --text-primary: #2d2d2d;
            --text-secondary: #5e5c64;
            --text-light: #9a9996;
            --bg-light: #f6f5f4;
            --border-color: #e0e0e0;
            --border-radius: 8px;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            --transition: all 0.2s ease;
        }



        #map-container {
            display: flex !important;
            height: calc(100vh - 60px);
            width: 100% !important;
            position: relative;
            min-height: 900px;
        }

        #left-panel {
            width: 350px !important;
            min-width: 350px !important;
            background: white !important;
            overflow-y: auto;
            display: flex !important;
            flex-direction: column;
            border-right: 1px solid var(--border-color);
            position: relative;
            z-index: 10;
            flex-shrink: 0;
        }

        #rightPanel {
            flex: 1;
            position: relative;
            height: 100%;
            background: #e5e3df;
            overflow: hidden;
        }

        /* Custom Map Controls Styling */
        .gm-fullscreen-control,
        .gm-zoom-control {
            margin: 10px !important;
        }

            .gm-fullscreen-control button,
            .gm-zoom-control button {
                background-color: white !important;
                border: 1px solid rgba(0, 0, 0, 0.2) !important;
                border-radius: 4px !important;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
                color: var(--text-primary) !important;
                font-size: 18px !important;
                height: 40px !important;
                width: 40px !important;
                cursor: pointer !important;
                transition: all 0.2s ease !important;
            }

                .gm-fullscreen-control button:hover,
                .gm-zoom-control button:hover {
                    background-color: #f5f5f5 !important;
                    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
                    transform: translateY(-1px) !important;
                }

                .gm-fullscreen-control button:active,
                .gm-zoom-control button:active {
                    transform: translateY(0) !important;
                }

                /* Fullscreen icon styling */
                .gm-fullscreen-control button::before {
                    content: "⛶";
                    font-size: 20px;
                }

                .gm-fullscreen-control button[title*="Exit"]::before {
                    content: "✕";
                }


        #map {
            height: 100% !important;
            width: 100% !important;
            min-height: 600px !important;
            position: absolute !important;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        /* Panel Header - Enhanced Design */
        .panel-header {
            padding: 24px 20px;
            border-bottom: 2px solid var(--border-color);
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .main-title {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 0;
        }

        .title-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            width: 100%;
        }

        .main-stats-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1;
        }

        .main-number {
            font-size: 42px;
            font-weight: 800;
            color: var(--primary-color);
            line-height: 1;
            letter-spacing: -1px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .main-subtitle {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 0;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .country-info-group {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
            min-width: 0;
        }

        .country-header {
            display: flex;
            align-items: center;
            gap: 8px;
            background: white;
            padding: 8px 12px;
            border-radius: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
            border: 1px solid var(--border-color);
        }

        #country-flag-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        /* Cities Count Header - Simple Style */
        .cities-count-header {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0;
        }

            .cities-count-header .fourty-space {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                color: #fff;
            }

            .cities-count-header .CityNum {
                font-size: 3em;
                font-weight: 600;
                color: #fff;
                font-family: georgia;
            }

            .cities-count-header .numbertg.green {
                font-size: 16px;
                font-weight: 700;
                padding: 4px 10px;
                border-radius: 4px;
            }


        /* Filter Panel */
        #filter-panel {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            position: relative;
        }

        .search-city-input {
            width: 100%;
            padding: 10px 14px 10px 40px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 14px;
            transition: var(--transition);
            background-color: var(--bg-light);
        }

            .search-city-input:focus {
                outline: none;
                border-color: var(--primary-color);
                box-shadow: 0 0 0 2px rgba(26, 95, 180, 0.1);
            }

        .search-icon {
            position: absolute;
            left: 30px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
        }

        /* Cities List */
        #cities-list {
            flex: 1;
            overflow-y: auto;
        }

        .city-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            border-bottom: 1px solid var(--border-color);
            transition: var(--transition);
            cursor: pointer;
            position: relative;
        }

            .city-item:hover {
                background-color: var(--bg-light);
            }

        .city-item-highlighted {
            background-color: rgba(152, 206, 68, 0.15) !important;
            border-left: 4px solid #98ce44;
            animation: highlightPulse 1.5s ease-in-out;
        }

        @keyframes highlightPulse {
            0%, 100% {
                background-color: rgba(152, 206, 68, 0.15);
            }

            50% {
                background-color: rgba(152, 206, 68, 0.25);
            }
        }

        /* Bottom cities list highlight */
        .city-list-item-highlighted {
            background-color: rgba(152, 206, 68, 0.2) !important;
            border-left: 3px solid #98ce44;
            animation: highlightPulse 1.5s ease-in-out;
        }

        .city-list-item-highlighted a {
            color: var(--primary-color) !important;
            font-weight: 700;
        }

        .city-flag {
            width: 32px;
            height: 22px;
            border-radius: 4px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

            .city-flag img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .city-name {
            flex-grow: 1;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
            padding: 0;
        }

        .city-type-icon {
            flex-shrink: 0;
        }

        .city-tenders {
            font-size: 11px;
            color: var(--primary-color);
            font-weight: 600;
            flex-shrink: 0;
            white-space: nowrap;
            background: rgba(26, 95, 180, 0.08);
            padding: 3px 8px;
            border-radius: 6px;
            min-width: -webkit-fill-available;
            min-width: max-content;
        }

        /* Map Legend */
        .map-legend {
            padding: 12px 20px;
            border-top: 1px solid var(--border-color);
            background-color: var(--bg-light);
        }

            .map-legend h4 {
                font-size: 14px;
                margin-bottom: 5px;
                color: var(--text-primary);
                text-align: center;
            }

        .legend-items {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
        }

        .map-legend-item {
            display: flex;
            align-items: center;
            font-size: 12px;
        }

        .map-legend-color {
            width: 12px;
            height: 12px;
            border-radius: 2px;
            margin-left: 5px;
        }

        /* Scrollbar Styling */
        #cities-list::-webkit-scrollbar {
            width: 6px;
        }

        #cities-list::-webkit-scrollbar-track {
            background: var(--bg-light);
        }

        #cities-list::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 3px;
        }

            #cities-list::-webkit-scrollbar-thumb:hover {
                background: var(--text-light);
            }

        /* Hide footer on Cities page only */
        #footer {
            display: none !important;
        }

        .hidden-panel {
            display: none;
        }

        .map-control-btn {
            display: none;
        }

        .legend-color-green {
            background-color: #4CAF50;
        }

        .legend-color-yellow {
            background-color: #FFC107;
        }

        .legend-color-orange {
            background-color: #FF9800;
        }

        .legend-color-red {
            background-color: #F44336;
        }

        .map-control-btn {
            display: none;
        }