/* Интерактивная схема минского метро в фильтре */
.metro-map-container { width: 100%; overflow-x: auto; }
.metro-map-svg { width: 100%; height: auto; display: block; min-width: 480px; }
.metro-map-label {
    font-size: 18px; font-weight: 500; font-family: inherit;
    /* белая подложка-обводка, чтобы подписи читались поверх линий */
    paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round;
}
.metro-map-station { cursor: pointer; }
.metro-map-station circle { transition: fill .12s, stroke .12s; }
.metro-map-station:hover circle { stroke-width: 5; }

/* Три уровня цвета:
   — доступная-невыбранная: приглушённый («тухлый») цвет линии;
   — выбранная: яркий цвет линии + жирная подпись + залитый кружок;
   — недоступная: серая, бледная, не кликабельна. */

/* по умолчанию (доступна, не выбрана) — приглушённый цвет линии */
.metro-map-station[data-line="red"]   .metro-map-label { fill: #EE8B95; }
.metro-map-station[data-line="red"]   circle { stroke: #EE8B95; }
.metro-map-station[data-line="blue"]  .metro-map-label { fill: #74AEE6; }
.metro-map-station[data-line="blue"]  circle { stroke: #74AEE6; }
.metro-map-station[data-line="green"] .metro-map-label { fill: #62C596; }
.metro-map-station[data-line="green"] circle { stroke: #62C596; }

/* выбранная — яркий цвет линии */
.metro-map-station[data-line="red"].metro-map-selected   .metro-map-label { fill: #E4002B; }
.metro-map-station[data-line="red"].metro-map-selected   circle { stroke: #E4002B; }
.metro-map-station[data-line="blue"].metro-map-selected  .metro-map-label { fill: #0072CE; }
.metro-map-station[data-line="blue"].metro-map-selected  circle { stroke: #0072CE; }
.metro-map-station[data-line="green"].metro-map-selected .metro-map-label { fill: #00A94F; }
.metro-map-station[data-line="green"].metro-map-selected circle { stroke: #00A94F; }
.metro-map-selected .metro-map-label { font-weight: 700; }

/* недоступные (нет в фильтре) — серые, бледные, не кликабельны; имя читается */
.metro-map-inactive { pointer-events: none; opacity: .45; }
.metro-map-inactive circle { stroke: #c2c2ca !important; fill: #fff !important; }
.metro-map-inactive .metro-map-label { fill: #a9a9b2 !important; }

/* верхняя панель: переключатель вида + легенда линий */
/* меньше отступы метро-блока сверху (вкладки↔переключатель) и снизу (список↔край) */
.filter-dropdown.metro-dropdown { padding-top: 8px !important; padding-bottom: 12px !important; }
.metro-controls {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px 16px; margin: 0 0 35px;
}
/* схема вплотную к панели — без лишнего отступа сверху */
.metro-dropdown .metro-map-container { margin-top: 0; }
.metro-map-svg { margin-top: 0; }
.metro-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: #444; }
.metro-legend span { display: inline-flex; align-items: center; white-space: nowrap; }
.metro-legend i { display: inline-block; width: 20px; height: 5px; border-radius: 3px; margin-right: 7px; }

/* переключатель вида «Схема / Список» */
.metro-view-toggle {
    display: inline-flex; border: 1px solid #d3d3db;
    border-radius: 8px; overflow: hidden; background: #fff;
}
.metro-view-toggle button {
    border: 0; background: transparent; color: #555; font: inherit; font-size: 14px;
    line-height: 1; padding: 8px 18px; cursor: pointer; transition: background .12s, color .12s;
}
.metro-view-toggle button + button { border-left: 1px solid #d3d3db; }
.metro-view-toggle button.active { background: #0072CE; color: #fff; }

/* режимы: по умолчанию схема (список скрыт), в режиме списка — наоборот */
.metro-dropdown:not(.metro-list-mode) .metro-sublist { display: none; }
.metro-dropdown.metro-list-mode .metro-map-container { display: none; }