/* ОКНО ЗАРЯДКИ — В СТИЛЕ САЙТА, А НЕ В СТИЛЕ GOOGLE.
 *
 * Владелец: «при нажатии на станцию чарджера открывается окошко, которое не
 * соответствует нашему стилю и тёмной теме, надо исправить; все такого рода
 * окошки должны соответствовать стилю сайта».
 *
 * И правда: содержимое мы рисуем сами (`js/map/infoWindow.js`), а РАМКУ вокруг
 * рисует Google — белый пузырь со своим хвостиком, крестиком и тенью. На тёмной
 * карте он бьёт по глазам.
 *
 * Перекрасить его можно только снаружи: свои имена классов Google не даёт,
 * поэтому цепляемся за его собственные (`gm-style-iw`). Это хрупко — при смене
 * их разметки правило перестанет действовать, но не сломает страницу: окно
 * просто снова станет белым. Другого пути нет: заменять окно своим значило бы
 * переписать всю работу с нажатиями по значкам.
 */

/* Сам пузырь: тёмное стекло с нашей рамкой и тенью. */
.gm-style .gm-style-iw-c {
  padding: 0 !important;
  border-radius: 16px !important;
  background: rgba(16, 32, 37, .97) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55) !important;
  color: var(--text);
}

/* Внутренняя обёртка Google добавляет свои поля и полосу прокрутки. */
.gm-style .gm-style-iw-d {
  overflow: auto !important;
  padding: 14px 16px 16px !important;
  background: transparent !important;
  max-height: 60vh !important;
}

/* Хвостик пузыря — он рисуется отдельным элементом и оставался белым. */
.gm-style .gm-style-iw-tc::after {
  background: rgba(16, 32, 37, .97) !important;
}

/* Крестик: у Google он тёмный на тёмном, то есть невидимый. */
.gm-style .gm-style-iw-c button.gm-ui-hover-effect {
  top: 6px !important;
  right: 6px !important;
  opacity: 1 !important;
  border-radius: 9px !important;
}
.gm-style .gm-style-iw-c button.gm-ui-hover-effect > span {
  background-color: var(--text-mute) !important;
}
.gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover > span {
  background-color: var(--text) !important;
}

/* --- Содержимое: то, что рисуем мы сами --- */
.iw-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.iw-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; }
.iw-sub { font-size: 12px; color: var(--text-mute); margin-top: 2px; }

/* Значки состояния — те же «таблетки», что в приложении. */
.iw-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.iw-badges > span {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  color: var(--text-dim, #9fb4b8);
}

.iw-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

/* Кнопка маршрута во всю ширину: это главное действие окна. */
.iw-route {
  flex: 1;
  padding: 10px 14px;
  border-radius: 11px;
  border: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #04231f;
  background: var(--accent);
  cursor: pointer;
}
.iw-route:hover { background: var(--accent-2, #2dd4bf); }

/* --- ОДИН ЦВЕТ НА ОДИН СМЫСЛ. ---
 *
 * Владелец: «цвет текста badge разные при лайках, сами лайки и так далее —
 * полный хаос по цветам». Так и было: значки красились кто во что горазд,
 * потому что собирались в разное время и в разных местах.
 *
 * Правило простое, как в приложении: зелёный — хорошо (свободно, бесплатно),
 * синий — быстрая зарядка, оранжевый — осторожно, красный — беда. Всё
 * остальное серое. Цвет несёт смысл, а не украшает. */
.gm-style .iw-badges > span,
.gm-style .iw-badge { color: var(--text-dim, #9fb4b8); }

.gm-style .iw-badge-free,
.gm-style .iw-badge-available {
  color: #37d99a;
  background: rgba(12, 166, 120, .16);
  border-color: rgba(12, 166, 120, .4);
}

.gm-style .iw-badge-fast {
  color: #63a9f0;
  background: rgba(28, 126, 214, .16);
  border-color: rgba(28, 126, 214, .4);
}

.gm-style .iw-badge-busy,
.gm-style .iw-badge-out {
  color: #ff8787;
  background: rgba(224, 49, 49, .16);
  border-color: rgba(224, 49, 49, .4);
}

/* Голоса «работает / не работает»: две одинаковые кнопки, разница только в
   цвете числа. Раньше они были разной формы и разной яркости. */
.gm-style .iw-vote,
.gm-style .iw-likes button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .05);
  color: var(--text-dim, #9fb4b8);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.gm-style .iw-vote:hover,
.gm-style .iw-likes button:hover { border-color: var(--accent); color: var(--text); }
.gm-style .iw-vote.is-up { color: #37d99a; border-color: rgba(12, 166, 120, .45); }
.gm-style .iw-vote.is-down { color: #ff8787; border-color: rgba(224, 49, 49, .45); }

/* Все всплывающие окна проекта — с одинаковой тенью и рамкой. */
dialog.mp-dialog,
dialog.spot-dialog,
dialog {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(16, 32, 37, .98);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }

/* --- НАСТОЯЩИЕ КЛАССЫ ОКНА ЗАРЯДКИ ---
 *
 * Первый заход красил выдуманные имена (`iw-title`, `iw-badges`) — их в
 * разметке нет, поэтому окно осталось прежним. Ниже те, что действительно
 * рисует `js/map/infoWindow.js`: `.iw`, `.op`, список разъёмов, звезда.
 * Проверено в браузере на живой станции. */
.gm-style .iw { color: var(--text); font-size: 13px; }
.gm-style .iw h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.gm-style .iw .op { margin-top: 2px; font-size: 12px; color: var(--text-mute); }

/* Звезда «в избранное»: серая, пока не в списке, и жёлтая, когда в нём. */
.gm-style .iw-fav {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text-mute);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.gm-style .iw-fav[aria-pressed='true'] { color: #f59f00; }
.gm-style .iw-fav:hover { color: #f59f00; }

/* Разъёмы списком: один цвет на всё, никаких пёстрых значков. */
.gm-style .iw ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gm-style .iw li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  color: var(--text-dim, #9fb4b8);
  font-size: 12.5px;
}
.gm-style .iw .conn-ico { color: var(--accent-2, #2dd4bf); flex: none; }

/* Цена, адрес и прочие строки — приглушённые, но читаемые. */
.gm-style .iw .price,
.gm-style .iw .addr,
.gm-style .iw small { color: var(--text-mute); font-size: 12px; }

/* --- БЕЛЫЕ ПЛАШКИ ВНУТРИ ОКНА — ГЛАВНАЯ ПРИЧИНА «НЕ В СТИЛЕ». ---
 *
 * По снимку владельца видно: само окно уже тёмное, но внутри белыми пятнами
 * сидят кнопка «сохранить место», лайки и причины отказа. Они рисуются другими
 * модулями (`my-places.js`, `feedback.js`) и до сих пор жили на светлых
 * умолчаниях браузера.
 *
 * Правило то же, что и везде: одна форма, один тёмный фон, цвет только там,
 * где он несёт смысл. */

/* «Сохранить это место» — действие второе по важности после маршрута,
   поэтому спокойная кнопка с рамкой, а не заливка. */
.gm-style .iw-place {
  padding: 10px 14px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.gm-style .iw-place:hover { border-color: var(--accent); color: var(--accent-2, #2dd4bf); }

.gm-style .iw .route { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* Значки состояния: белые «таблетки» превращаются в свои, по смыслу. */
.gm-style .iw .badge {
  display: inline-block;
  padding: 5px 10px;
  margin: 8px 6px 0 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  color: var(--text-dim, #9fb4b8);
}
.gm-style .iw .badge.free { color: #37d99a; background: rgba(12, 166, 120, .16); border-color: rgba(12, 166, 120, .4); }
.gm-style .iw .badge.fast { color: #ff9f5a; background: rgba(232, 89, 12, .16); border-color: rgba(232, 89, 12, .4); }
.gm-style .iw .badge.st-available { color: #37d99a; background: rgba(12, 166, 120, .16); border-color: rgba(12, 166, 120, .4); }
.gm-style .iw .badge.st-occupied { color: #ffc078; background: rgba(245, 159, 0, .16); border-color: rgba(245, 159, 0, .4); }
.gm-style .iw .badge.st-out_of_service { color: #ff8787; background: rgba(224, 49, 49, .16); border-color: rgba(224, 49, 49, .4); }

/* Отзывы: «работает / не работает» и причины — тем же тёмным набором. */
.gm-style .fb { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.gm-style .fb-buttons { display: flex; gap: 8px; }
.gm-style .fb-btn,
.gm-style .fb-chip {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .05);
  color: var(--text-dim, #9fb4b8);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.gm-style .fb-btn:hover,
.gm-style .fb-chip:hover { border-color: var(--accent); color: var(--text); }
.gm-style .fb-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gm-style .fb-pick,
.gm-style .fb-thanks { margin-top: 10px; font-size: 12px; color: var(--text-mute); }

/* Кнопка «в избранное» в окне точки была ярко-оранжевой заливкой — это цвет
   беды в нашем языке. Звезде хватает тонкой рамки. */
.gm-style .sp-fav,
.gm-style .spot-fav,
.gm-style .iw-fav-btn {
  padding: 10px 14px;
  border-radius: 11px;
  border: 1px solid rgba(245, 159, 0, .5);
  background: rgba(245, 159, 0, .14);
  color: #ffc078;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* ПОДХОДИТ ЛИ ТОЧКА МОЕЙ МАШИНЕ. Три ответа, три цвета: зелёный — да,
   серый — тип разъёма неизвестен (источник не назвал), красный — уверенное нет.
   Серый намеренно не тревожный: незнание не повод пугать. */
.gm-style .iw .badge.fit-yes { color: #37d99a; background: rgba(12, 166, 120, .16); border-color: rgba(12, 166, 120, .4); }
.gm-style .iw .badge.fit-no { color: #ff8787; background: rgba(224, 49, 49, .16); border-color: rgba(224, 49, 49, .4); }
.gm-style .iw .badge.fit-unknown { color: var(--text-mute); }