/* Выбор города.
 *
 * Раньше каждый из 104 городов сидел в своей рамке — при таком количестве
 * это давало сплошную рябь и выглядело как таблица, а не как выбор.
 * Стало: крупные чипы для частых направлений и лёгкие колонки ссылок
 * для остального списка, буквы — как навигация.
 */

.citypick {--ck-green: #7cb32f; --ck-green-soft: #f2f8ea; --ck-ink: #2b3a26; --ck-muted: #5f6a58; --ck-line: #e6ebe2;}

/* ─── Поиск ─────────────────────────────────────────────────────────────── */
.citypick__search-wrap {position: relative; max-width: 560px; margin: 0 0 26px;}
.citypick__search-wrap svg {position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); stroke: var(--ck-muted); pointer-events: none;}
.citypick__search {width: 100%; height: 56px; padding: 0 18px 0 50px; border: 2px solid var(--ck-line); border-radius: 14px; background: #fff; font-size: 16px; color: var(--ck-ink); transition: border-color .2s, box-shadow .2s;}
.citypick__search::placeholder {color: var(--ck-muted);}
.citypick__search:focus {outline: 0; border-color: var(--ck-green); box-shadow: 0 0 0 4px rgba(124, 179, 47, .14);}

/* ─── Блоки ─────────────────────────────────────────────────────────────── */
.citypick__group {margin-bottom: 26px;}
.citypick__label {margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ck-muted);}

/* ─── Частые направления: чипы ──────────────────────────────────────────── */
.citypick__chips {display: flex; flex-wrap: wrap; gap: 10px;}
.citypick__chip {display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1.5px solid var(--ck-line); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 500; line-height: 1; color: var(--ck-ink); text-decoration: none; transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;}
.citypick__chip:before {content: ""; width: 7px; height: 7px; border-radius: 50%; background: #cfe3ab; transition: background .18s, transform .18s;}
.citypick__chip:hover {border-color: var(--ck-green); background: var(--ck-green-soft); color: var(--ck-ink); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(124, 179, 47, .16);}
.citypick__chip:hover:before {background: var(--ck-green); transform: scale(1.25);}
.citypick__chip.is-current {border-color: var(--ck-green); background: var(--ck-green); color: #fff; font-weight: 600;}
.citypick__chip.is-current:before {background: #fff;}

/* ─── Алфавит ───────────────────────────────────────────────────────────── */
/* Буквы идут столбцами в общей сетке: при строгих рядах на букву с двумя
   городами справа оставалось пустое поле почти во всю ширину. */
/* Колонки, а не сетка: в сетке ряд тянулся по самой длинной букве, и рядом
   с короткими («Е», «Ж») зияли дыры в десяток строк. Колонки укладывают
   блоки букв плотно, одна за другой. */
.citypick__alpha {columns: 5; column-gap: 26px; margin-top: 4px; padding-top: 22px; border-top: 1px solid var(--ck-line);}
.citypick__letters {display: inline-block; width: 100%; margin: 0 0 20px; break-inside: avoid;}
.citypick__letter {display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; margin-bottom: 8px; padding: 0 8px; border-radius: 9px; background: var(--ck-green-soft); color: var(--ck-green); font-size: 15px; font-weight: 700; line-height: 1;}
.citypick__cols {display: block;}
.citypick__item {display: block; padding: 6px 0; font-size: 15px; line-height: 1.3; color: #3a4436; text-decoration: none; transition: color .15s, padding-left .15s;}
.citypick__item:hover {color: var(--ck-green); padding-left: 5px;}
.citypick__item.is-current {color: var(--ck-ink); font-weight: 700;}
.citypick__item.is-current:after {content: "вы здесь"; margin-left: 8px; padding: 2px 7px; border-radius: 6px; background: var(--ck-green-soft); color: var(--ck-green); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;}

.citypick__empty {margin: 6px 0 0; padding: 16px 18px; border-radius: 12px; background: var(--ck-green-soft); font-size: 15px; color: #4a5544;}
.citypick__empty a {font-weight: 700; color: var(--ck-ink); text-decoration: none;}

.citypick__item[hidden], .citypick__group[hidden], .citypick__letters[hidden] {display: none !important;}

/* ─── Модалка ───────────────────────────────────────────────────────────── */
.citypick--modal {max-height: 68vh; overflow-y: auto; padding-right: 6px;}
/* Общий список в модалке без букв — раскладываем колонками, иначе 104 города
   встают одной лентой и до нужного надо крутить полстраницы. */
.citypick--modal .citypick__cols {columns: 3; column-gap: 26px;}
.citypick--modal .citypick__item {break-inside: avoid;}

.citypick--modal::-webkit-scrollbar {width: 8px;}
.citypick--modal::-webkit-scrollbar-thumb {border-radius: 8px; background: #dfe6d8;}

/* ─── Страница «Регионы работы» ─────────────────────────────────────────── */
.geo__head {margin-bottom: 28px;}
.geo__lead {max-width: 720px; margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: #4a5544;}
.geo__lead b {color: var(--ck-ink, #2b3a26);}

.geo__cta {display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: center; margin-top: 36px; padding: 28px 32px; border-radius: 18px; background: linear-gradient(135deg, #f4f8f0 0%, #eaf3e0 100%);}
.geo__cta-title {margin-bottom: 6px; font-size: 23px; font-weight: 700; color: #2b3a26;}
.geo__cta-text p {margin: 0; font-size: 15px; line-height: 1.55; color: #4a5544;}
.geo__cta-actions {display: flex; flex-direction: column; gap: 12px;}
.geo__cta-phone {text-align: center; font-size: 21px; font-weight: 700; color: #2b3a26; text-decoration: none;}

@media (max-width: 1199px) { .citypick__alpha {columns: 4;} }
@media (max-width: 991px) {
	.citypick__alpha {columns: 3;}
	.geo__cta {grid-template-columns: 1fr; padding: 24px;}
}
@media (max-width: 767px) {
	.citypick__alpha {columns: 2;}
	.citypick__search {height: 50px; padding-left: 46px; font-size: 15px;}
	.citypick__chip {padding: 9px 14px; font-size: 14px;}
	.geo__lead {font-size: 15px;}
}
@media (max-width: 479px) { .citypick__alpha {columns: 2;} }

/* ─── Текст под списком городов ─────────────────────────────────────────── */
.geo__text {max-width: 900px; margin: 40px 0 0; padding-top: 32px; border-top: 1px solid var(--ck-line, #e6ebe2);}
.geo__text h2 {margin: 28px 0 12px; font-size: 24px; color: var(--ck-ink, #2b3a26);}
.geo__text h2:first-child {margin-top: 0;}
.geo__text p {margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: #4a5544;}
.geo__text ul {margin: 0 0 16px; padding-left: 20px;}
.geo__text li {margin-bottom: 8px; font-size: 16px; line-height: 1.55; color: #4a5544;}
@media (max-width: 767px) {.geo__text {margin-top: 28px; padding-top: 24px;} .geo__text h2 {font-size: 20px;} .geo__text p, .geo__text li {font-size: 15px;}}