/* Выбор города «Колодец-ВЛК».
   Список подгружается по запросу (см. city.js), в разметке страниц его нет.

   Что важно в раскладке: раньше блок «Часто выбирают» списком в четыре колонки
   съедал весь первый экран, и районы посетитель не видел вовсе. Теперь это
   компактные чипсы, а под ними сразу начинаются районы. */

:root {
	--cp-blue: #004dff;
	--cp-green: #8ef78d;
	--cp-ink: #14161f;
	--cp-muted: #6f7484;
	--cp-line: #e9ecf3;
	--cp-bg: #f6f7fb;
}

/* ☠️ Собственный display перебивает атрибут hidden — элемент остаётся видимым
   и пустым. В этом проекте ловушка сработала уже третий раз (список городов,
   стрелки каруселей, метка текущего города), поэтому гасим явно. */
.citypick [hidden] {display: none !important;}

/* ================================ Окно ================================== */
.citypick {position: fixed;inset: 0;z-index: 99998;display: none;align-items: center;justify-content: center;padding: 32px 16px;background: rgba(11, 14, 24, .55);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);opacity: 0;transition: opacity .2s ease;}
.citypick.is-open {display: flex;opacity: 1;}
.citypick__box {display: flex;flex-direction: column;width: 100%;max-width: 940px;max-height: 88vh;background: #fff;border-radius: 28px;box-shadow: 0 40px 100px rgba(6, 12, 30, .38);overflow: hidden;transform: translateY(16px) scale(.985);transition: transform .26s cubic-bezier(.2, .8, .25, 1);}
.citypick.is-open .citypick__box {transform: none;}
body.citypick-open {overflow: hidden;}

/* ================================ Шапка ================================= */
.citypick__head {position: relative;flex: 0 0 auto;padding: 28px 32px 0;}
.citypick__title {margin: 0;font-family: 'Noto Sans Display SemiBold', 'Noto Sans', sans-serif;font-size: 27px;line-height: 1.15;color: var(--cp-ink);}
.citypick__sub {margin: 7px 0 0;font-size: 14px;line-height: 1.5;color: var(--cp-muted);max-width: 62ch;}
.citypick__now {display: inline-flex;align-items: center;gap: 7px;margin-top: 12px;padding: 6px 14px 6px 11px;border-radius: 999px;background: linear-gradient(135deg, rgba(142, 247, 141, .22), rgba(0, 77, 255, .12));font-size: 13px;color: #1b2a4a;}
.citypick__now b {font-weight: 600;}
.citypick__now svg {flex: 0 0 auto;}
.citypick__close {position: absolute;top: 20px;right: 22px;display: flex;align-items: center;justify-content: center;width: 42px;height: 42px;border: 0;border-radius: 50%;background: #f1f2f6;color: #5a5c6b;font-size: 22px;line-height: 1;cursor: pointer;transition: background .15s ease, color .15s ease, transform .2s ease;}
.citypick__close:hover {background: var(--cp-blue);color: #fff;transform: rotate(90deg);}

/* =============================== Поиск ================================== */
.citypick__tools {position: sticky;top: 0;z-index: 3;flex: 0 0 auto;padding: 18px 32px 14px;background: #fff;border-bottom: 1px solid var(--cp-line);}
.citypick__search {position: relative;}
.citypick__search input {width: 100%;height: 54px;padding: 0 46px;border: 2px solid var(--cp-line);border-radius: 16px;background: var(--cp-bg);font: 16px/1 'Noto Sans', sans-serif;color: var(--cp-ink);outline: none;transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;}
.citypick__search input::placeholder {color: #9aa0b0;}
.citypick__search input:focus {border-color: var(--cp-blue);background: #fff;box-shadow: 0 0 0 4px rgba(0, 77, 255, .12);}
.citypick__search svg {position: absolute;left: 16px;top: 50%;transform: translateY(-50%);pointer-events: none;}
.citypick__clear {position: absolute;right: 10px;top: 50%;transform: translateY(-50%);display: none;align-items: center;justify-content: center;width: 32px;height: 32px;border: 0;border-radius: 50%;background: #e6e8ef;color: #6f7484;font-size: 17px;line-height: 1;cursor: pointer;}
.citypick__search.has-text .citypick__clear {display: flex;}
.citypick__clear:hover {background: #d8dbe6;}

/* Переключатель раскладки: по районам или сплошным алфавитом. */
.citypick__modes {display: flex;gap: 4px;margin-top: 12px;padding: 4px;border-radius: 12px;background: var(--cp-bg);}
.citypick__mode {flex: 1;padding: 9px 12px;border: 0;border-radius: 9px;background: none;font: 14px/1 'Noto Sans', sans-serif;color: var(--cp-muted);cursor: pointer;transition: background .15s ease, color .15s ease, box-shadow .15s ease;}
.citypick__mode.is-active {background: #fff;color: var(--cp-ink);font-weight: 600;box-shadow: 0 2px 8px rgba(16, 22, 44, .1);}
.citypick__found {margin-top: 10px;font-size: 13px;color: var(--cp-muted);}

/* =============================== Список ================================= */
.citypick__body {flex: 1 1 auto;overflow-y: auto;padding: 20px 32px 28px;overscroll-behavior: contain;scrollbar-width: thin;}
.citypick__body::-webkit-scrollbar {width: 8px;}
.citypick__body::-webkit-scrollbar-thumb {background: #dcdfe8;border-radius: 8px;}

.citypick__group {margin: 0 0 24px;}
.citypick__group-name {display: flex;align-items: center;gap: 8px;margin: 0 0 12px;font-family: 'Noto Sans SemiBold', 'Noto Sans', sans-serif;font-size: 12px;letter-spacing: .07em;text-transform: uppercase;color: var(--cp-blue);}
.citypick__count {display: inline-flex;align-items: center;justify-content: center;min-width: 22px;height: 20px;padding: 0 6px;border-radius: 999px;background: var(--cp-bg);color: #8b90a0;font-size: 11px;letter-spacing: 0;font-weight: 400;}
.citypick__list {display: grid;grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));gap: 2px 12px;margin: 0;padding: 0;list-style: none;}
.citypick__list a {display: block;padding: 8px 10px;border-radius: 11px;color: #2b2e3a;font-size: 15px;line-height: 1.35;text-decoration: none;transition: background .12s ease, color .12s ease;}
.citypick__list a:hover, .citypick__list a.is-cursor {background: #eef3ff;color: var(--cp-blue);}
.citypick__list a mark {padding: 0 1px;border-radius: 3px;background: var(--cp-green);color: #10131c;}
.citypick__list a.is-current {background: linear-gradient(90deg, var(--cp-green), var(--cp-blue));color: #fff;font-weight: 600;}

/* Часто выбираемые — чипсами: 46 городов списком занимали весь экран. */
.citypick__chips {display: flex;flex-wrap: wrap;gap: 8px;margin: 0 0 26px;padding: 0;list-style: none;}
.citypick__chips a {display: block;padding: 8px 15px;border: 1px solid var(--cp-line);border-radius: 999px;background: #fff;color: #2b2e3a;font-size: 14px;line-height: 1.2;text-decoration: none;white-space: nowrap;transition: border-color .14s ease, color .14s ease, background .14s ease, transform .14s ease;}
.citypick__chips a:hover, .citypick__chips a.is-cursor {border-color: var(--cp-blue);background: #eef3ff;color: var(--cp-blue);transform: translateY(-1px);}
.citypick__chips a.is-current {border-color: transparent;background: linear-gradient(90deg, var(--cp-green), var(--cp-blue));color: #fff;font-weight: 600;}

.citypick__letter {display: flex;align-items: center;gap: 10px;margin: 0 0 10px;font-family: 'Noto Sans Display SemiBold', 'Noto Sans', sans-serif;font-size: 17px;color: var(--cp-ink);}
.citypick__letter::after {content: '';flex: 1;height: 1px;background: var(--cp-line);}

.citypick__empty {padding: 44px 0;text-align: center;color: var(--cp-muted);font-size: 15px;line-height: 1.6;}
.citypick__empty a {color: var(--cp-blue);font-weight: 600;text-decoration: none;}

/* Скелетон вместо надписи «загружаем» — окно не прыгает, когда придут данные */
.citypick__skeleton {display: grid;grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));gap: 10px 12px;}
.citypick__skeleton i {display: block;height: 34px;border-radius: 11px;background: linear-gradient(90deg, #f1f3f7 25%, #e7eaf1 37%, #f1f3f7 63%);background-size: 400% 100%;animation: cpwave 1.3s ease infinite;}
@keyframes cpwave {0% {background-position: 100% 50%;} 100% {background-position: 0 50%;}}

/* ============================ Кнопка в шапке ============================ */
.citybtn {display: inline-flex;align-items: center;gap: 6px;padding: 6px 14px 6px 10px;border: 1px dashed #c7cede;border-radius: 999px;background: transparent;color: #333;font: 15px/1 'Noto Sans', sans-serif;cursor: pointer;transition: border-color .15s ease, color .15s ease, background .15s ease;}
.citybtn:hover {border-color: var(--cp-blue);color: var(--cp-blue);background: #f3f6ff;}
.citybtn svg {flex: 0 0 auto;}

/* =============================== Телефон ================================ */
@media (max-width: 767px) {
	/* окно выезжает снизу и занимает почти весь экран — привычная механика */
	.citypick {padding: 0;align-items: flex-end;}
	.citypick__box {max-width: none;height: 94vh;max-height: 94vh;border-radius: 24px 24px 0 0;transform: translateY(100%);}
	.citypick__head {padding: 20px 18px 0;}
	.citypick__head::before {content: '';position: absolute;top: 9px;left: 50%;width: 42px;height: 4px;margin-left: -21px;border-radius: 4px;background: #e0e3ec;}
	.citypick__title {font-size: 21px;}
	.citypick__sub {font-size: 13px;}
	.citypick__close {top: 16px;right: 14px;width: 38px;height: 38px;}
	.citypick__tools {padding: 14px 18px 12px;}
	.citypick__body {padding: 16px 18px 28px;}
	.citypick__list {grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}
	.citypick__skeleton {grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}
}

@media (prefers-reduced-motion: reduce) {
	.citypick, .citypick__box {transition: none;}
	.citypick__skeleton i {animation: none;}
}

/* ======================================================================== */
/* Страница со списком городов /geo/                                        */
/* Города печатаются в разметку целиком — это внутренние ссылки, нужные     */
/* поиску. Поиск фильтрует готовый HTML и ничего не подгружает.             */
/* ======================================================================== */

.geopage {padding-bottom: 56px;}
.geopage__intro {max-width: 820px;margin: 0 0 26px;color: #444;font-size: 17px;line-height: 1.6;}

/* Панель поиска липнет к верху: список длинный, и на середине страницы
   человек не должен возвращаться наверх, чтобы уточнить запрос. */
.geotools {position: sticky;top: 0;z-index: 20;margin: 0 0 24px;padding: 16px 0 14px;background: #fff;box-shadow: 0 10px 18px -14px rgba(12, 18, 40, .5);}
.geosearch {position: relative;display: flex;align-items: center;max-width: 620px;}
.geosearch svg {position: absolute;left: 18px;pointer-events: none;}
.geosearch input {width: 100%;height: 58px;padding: 0 78px 0 50px;border: 2px solid var(--cp-line);border-radius: 18px;background: var(--cp-bg);font: 16px/1 'Noto Sans', sans-serif;color: var(--cp-ink);outline: none;transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;}
.geosearch input::placeholder {color: #9aa0b0;}
.geosearch input:focus {border-color: var(--cp-blue);background: #fff;box-shadow: 0 0 0 4px rgba(0, 77, 255, .12);}
.geosearch__count {position: absolute;right: 18px;display: inline-flex;align-items: center;justify-content: center;min-width: 34px;height: 26px;padding: 0 9px;border-radius: 999px;background: #eceffa;color: #6f7484;font-size: 13px;}
.geosearch__empty {margin: 28px 0;padding: 26px;border: 1px dashed var(--cp-line);border-radius: 20px;color: var(--cp-muted);font-size: 16px;text-align: center;}

.geogroup {margin: 0 0 28px;}
.geogroup__name {display: flex;align-items: center;gap: 9px;margin: 0 0 14px;font-family: 'Noto Sans SemiBold', 'Noto Sans', sans-serif;font-size: 13px;letter-spacing: .07em;text-transform: uppercase;color: var(--cp-blue);}
.geogroup__count {display: inline-flex;align-items: center;justify-content: center;min-width: 24px;height: 21px;padding: 0 7px;border-radius: 999px;background: var(--cp-bg);color: #8b90a0;font-size: 11px;font-weight: 400;letter-spacing: 0;text-transform: none;}

/* Основные направления — чипсами, как в окне выбора города */
.geogroup--top {margin: 0 0 34px;padding: 24px 26px;background: linear-gradient(135deg, #f2f6ff, #f0fff5);border-radius: 24px;}
.geogroup--top .geogroup__name {color: var(--cp-ink);font-size: 14px;}
.geogroup--top .geolist {display: flex;flex-wrap: wrap;gap: 8px;}
.geogroup--top .geolist li {margin: 0;}
.geogroup--top .geolist a {padding: 9px 16px;border: 1px solid #fff;border-radius: 999px;background: #fff;color: #2b2e3a;font-size: 15px;font-weight: 500;white-space: nowrap;box-shadow: 0 1px 3px rgba(16, 22, 44, .06);}
.geogroup--top .geolist a:hover {border-color: var(--cp-blue);color: var(--cp-blue);transform: translateY(-1px);}

.geolist {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 2px 16px;margin: 0;padding: 0;list-style: none;}
.geolist a {display: block;padding: 9px 12px;border-radius: 13px;color: #2b2e3a;font-size: 16px;line-height: 1.35;text-decoration: none;transition: background .12s ease, color .12s ease, transform .12s ease, border-color .12s ease;}
.geolist a:hover {background: #eef3ff;color: var(--cp-blue);}
.geolist a.is-current {background: linear-gradient(90deg, var(--cp-green), var(--cp-blue));color: #fff;font-weight: 600;}
.geolist li.is-off, .geogroup.is-off, .geosearch__empty.is-off {display: none;}

.geocta {display: flex;align-items: center;justify-content: space-between;gap: 22px;flex-wrap: wrap;margin: 40px 0 0;padding: 28px 32px;border-radius: 24px;background: var(--cp-bg);}
.geocta__text {display: flex;flex-direction: column;gap: 5px;}
.geocta__text strong {font-family: 'Noto Sans SemiBold', 'Noto Sans', sans-serif;font-size: 20px;color: var(--cp-ink);}
.geocta__text span {color: var(--cp-muted);font-size: 15px;}
.geocta__btn {flex: 0 0 auto;padding: 16px 34px;border-radius: 999px;background: linear-gradient(90deg, var(--cp-green), var(--cp-blue));color: #fff;font-size: 18px;font-weight: 600;text-decoration: none;white-space: nowrap;transition: opacity .15s ease, transform .15s ease;}
.geocta__btn:hover {opacity: .93;transform: translateY(-1px);color: #fff;}

@media (max-width: 767px) {
	.geopage__intro {font-size: 16px;}
	.geotools {padding: 12px 0 10px;}
	.geosearch input {height: 52px;}
	.geolist {grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));gap: 0 10px;}
	.geolist a {padding: 8px 9px;font-size: 15px;}
	.geogroup--top {padding: 18px 16px;}
	.geogroup--top .geolist a {font-size: 14px;padding: 8px 13px;}
	.geocta {padding: 22px 20px;justify-content: center;text-align: center;}
	.geocta__text {align-items: center;}
}