/*
 * Выбор города и страница «Города».
 * Своё окно вместо Bootstrap-модалки с select2.
 */

/* ═══ окно выбора города ═══════════════════════════════════════════════════ */

.citypick {position: fixed; inset: 0; z-index: 20000; display: none; padding: 32px 16px; overflow-y: auto; background: rgba(16, 26, 10, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);}
.citypick.is-open {display: block; animation: kpFade .22s ease;}
body.citypick-open {overflow: hidden;}

@keyframes kpFade {from {opacity: 0;} to {opacity: 1;}}
@keyframes kpRise {from {opacity: 0; transform: translateY(18px) scale(.99);} to {opacity: 1; transform: none;}}

.citypick__box {position: relative; max-width: 980px; margin: 0 auto; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(8, 20, 4, .42); animation: kpRise .26s cubic-bezier(.22, .61, .36, 1);}

/* шапка окна — фирменный градиент */
.citypick__head {position: relative; padding: 26px 64px 24px 30px; background: linear-gradient(115deg, #37701f 0%, #2f7d3b 55%, #1f6f45 100%); color: #fff; overflow: hidden;}
.citypick__head::after {content: ""; position: absolute; right: -60px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: rgba(164, 208, 32, .16);}
.citypick__title {position: relative; margin: 0 0 7px; font-size: 27px; line-height: 1.15; font-weight: 700; color: #fff;}
.citypick__sub {position: relative; margin: 0; max-width: 560px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .82);}
.citypick__close {position: absolute; top: 18px; right: 18px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .16s, transform .16s;}
.citypick__close:hover {background: rgba(255, 255, 255, .3); transform: rotate(90deg);}

/* поиск */
.citypick__search {position: relative; display: flex; align-items: center; gap: 11px; margin: -24px 30px 0; padding: 0 18px; border-radius: 14px; background: #fff; color: #98a583; box-shadow: 0 10px 30px rgba(20, 40, 10, .16); z-index: 3; transition: box-shadow .18s;}
.citypick__search:focus-within {box-shadow: 0 10px 30px rgba(77, 155, 66, .3), 0 0 0 2px var(--kp-lime, #a4d020);}
.citypick__search input {flex: 1; min-width: 0; padding: 16px 0; border: 0; outline: 0; font-size: 17px; color: #1c2410; background: none; -webkit-appearance: none;}
.citypick__search input::-webkit-search-cancel-button {display: none;}
.citypick__clear {display: none; padding: 0 2px; border: 0; background: none; color: #9aa58a; font-size: 24px; line-height: 1; cursor: pointer;}
.citypick__search.has-text .citypick__clear {display: block;}

.citypick__body {max-height: 58vh; overflow-y: auto; padding: 22px 30px 28px; overscroll-behavior: contain;}
.citypick__body::-webkit-scrollbar {width: 8px;}
.citypick__body::-webkit-scrollbar-thumb {border-radius: 8px; background: #dfe7cf;}
.citypick__loading, .citypick__empty {padding: 40px 0; text-align: center; color: #8a8a8a; font-size: 16px; line-height: 1.55;}

/* группы */
.citypick__group {margin-top: 22px;}
.citypick__group:first-child {margin-top: 0;}
.citypick__group.is-top {padding: 18px 20px; border: 1px solid #e9f0d8; border-radius: 16px; background: linear-gradient(180deg, #f8fbef 0%, #f3f8e6 100%);}
.citypick__group-name {display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6f8046;}
.citypick__group-name::before {content: ""; width: 16px; height: 3px; border-radius: 3px; background: var(--kp-lime, #a4d020);}
.citypick__count {min-width: 22px; padding: 2px 8px; border-radius: 20px; background: #eef4df; color: #6f7d51; font-size: 11.5px; font-weight: 700; text-align: center; letter-spacing: 0;}

.citypick__list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 10px; margin: 0; padding: 0; list-style: none;}
.citypick__list a {display: block; padding: 9px 12px; border-radius: 10px; color: #2b3320; font-size: 15.5px; line-height: 1.3; text-decoration: none; transition: background .14s, color .14s, transform .14s;}
.citypick__list a:hover {background: #eef6dc; color: #3f7a10; transform: translateX(2px);}
.citypick__list a.is-current {position: relative; padding-right: 30px; background: var(--kp-lime, #a4d020); color: #1e2c05; font-weight: 700;}
.citypick__list a.is-current::after {content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 11px; margin-top: -7px; border-right: 2.5px solid #1e2c05; border-bottom: 2.5px solid #1e2c05; transform: rotate(45deg);}
.citypick__list mark {background: #e2f3b0; color: inherit; padding: 0 2px; border-radius: 4px;}

@media (max-width: 1023px) {
	.citypick__list {grid-template-columns: repeat(3, minmax(0, 1fr));}
}

@media (max-width: 767px) {
	.citypick {padding: 0;}
	.citypick__box {min-height: 100%; max-width: none; border-radius: 0; animation: none;}
	.citypick__head {padding: 18px 58px 20px 16px;}
	.citypick__title {font-size: 21px;}
	.citypick__sub {font-size: 13.5px;}
	.citypick__close {top: 14px; right: 14px; width: 36px; height: 36px;}
	.citypick__search {margin: -22px 16px 0; padding: 0 14px;}
	.citypick__search input {padding: 14px 0; font-size: 16px;}
	.citypick__body {max-height: none; padding: 18px 16px 34px;}
	.citypick__group.is-top {padding: 14px 14px 16px;}
	.citypick__list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px;}
	.citypick__list a {padding: 11px 10px;}
}

/* ═══ страница «Города» ════════════════════════════════════════════════════ */

.geostats {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px;}
.geostat {padding: 18px 20px; border: 1px solid #e9efdc; border-radius: 16px; background: linear-gradient(180deg, #f8fbef 0%, #f2f7e4 100%);}
.geostat b {display: block; font-size: 30px; line-height: 1.1; font-weight: 700; color: #3f7a10;}
.geostat span {font-size: 13.5px; color: #6f7d51;}
.geolead {max-width: 68ch; margin: 0 0 22px; font-size: 16.5px; line-height: 1.6; color: #3a3a3a;}

.geosearch {position: relative; display: flex; align-items: center; gap: 11px; max-width: 560px; margin: 0 0 10px; padding: 0 18px; border-radius: 14px; background: #fff; color: #98a583; box-shadow: 0 10px 30px rgba(20, 40, 10, .16); z-index: 3;}
.geosearch:focus-within {box-shadow: 0 10px 30px rgba(77, 155, 66, .28), 0 0 0 2px var(--kp-lime, #a4d020);}
.geosearch input {flex: 1; min-width: 0; padding: 15px 0; border: 0; outline: 0; font-size: 17px; color: #1c2410; background: none; -webkit-appearance: none;}
.geosearch input::-webkit-search-cancel-button {display: none;}
.geosearch__hint {margin: 0 0 26px; font-size: 14px; color: #8a8a8a;}
.geosearch__empty {padding: 26px 0; font-size: 17px; color: #6a6a6a;}

.geogroup {margin-bottom: 16px; padding: 20px 22px; border: 1px solid #edf1e4; border-radius: 16px; background: #fff; transition: box-shadow .18s;}
.geogroup:hover {box-shadow: 0 8px 26px rgba(20, 40, 10, .07);}
.geogroup--top {border-color: #e4eecd; background: linear-gradient(180deg, #f8fbef 0%, #f3f8e6 100%);}
.geogroup__name {display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6f8046;}
.geogroup__name::before {content: ""; width: 16px; height: 3px; border-radius: 3px; background: var(--kp-lime, #a4d020);}
.geogroup__count {min-width: 22px; padding: 2px 8px; border-radius: 20px; background: #eef4df; color: #6f7d51; font-size: 11.5px; font-weight: 700; text-align: center; letter-spacing: 0;}
.geogroup__list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px 12px; margin: 0; padding: 0; list-style: none;}
.geogroup__list a {display: block; padding: 8px 11px; border-radius: 10px; color: #2b3320; font-size: 15.5px; line-height: 1.35; text-decoration: none; transition: background .14s, color .14s, transform .14s;}
.geogroup__list a:hover {background: #eef6dc; color: #3f7a10; transform: translateX(2px);}
.geogroup__list a.is-current {background: var(--kp-lime, #a4d020); color: #1e2c05; font-weight: 700;}

.geonote {margin-top: 26px; padding: 26px 28px; border-radius: 18px; background: #f7faf1; border: 1px solid #e9efdc;}
.geonote p {margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: #3a3a3a;}
.geonote p:last-child {margin-bottom: 0;}
.geonote strong {color: #1c2410;}
.geonote__tel {display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; padding: 13px 24px; border-radius: 999px; background: linear-gradient(135deg, #a6d120 0%, #7ab52f 45%, #2b8750 100%); color: #fff !important; font-size: 17px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(77, 155, 66, .28); transition: transform .15s, box-shadow .18s;}
.geonote__tel:hover {transform: translateY(-1px); box-shadow: 0 9px 24px rgba(77, 155, 66, .34); color: #fff !important;}

.is-off {display: none !important;}

@media (max-width: 1023px) {
	.geogroup__list {grid-template-columns: repeat(3, minmax(0, 1fr));}
}

@media (max-width: 767px) {
	.geostats {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px;}
	.geostat {padding: 13px 15px;}
	.geostat b {font-size: 23px;}
	.geolead {font-size: 15.5px;}
	.geostat span {font-size: 12px;}
	.geosearch {margin: 0 0 10px; padding: 0 14px;}
	.geosearch input {padding: 14px 0; font-size: 16px;}
	.geosearch__hint {margin-left: 0;}
	.geogroup {padding: 16px 15px;}
	.geogroup__list {grid-template-columns: repeat(2, minmax(0, 1fr));}
	.geogroup__list a {padding: 10px 9px;}
	.geonote {padding: 20px 17px;}
}

/* Виджет мессенджеров сидит в правом нижнем углу: даём странице поле,
   чтобы он не накрывал последние ссылки списка. */
.geopage {padding-bottom: 90px;}
@media (max-width: 767px) {.geopage {padding-bottom: 76px;}}

.geonote__time {margin-top: 12px;}