/* ==========================================================================
   ГЕО-переключатель: кнопка в шапке + модальное окно выбора города
   Неймспейс .geo-* — не конфликтует с template_styles.css
   Подключить в header.php или добавить в конец template_styles.css
   ========================================================================== */

.geo-switch {
	--geo-maroon: #56130D;
	--geo-gold: #F2B01E;
	--geo-ink: #2A2A2A;
	--geo-line: #E4E4E4;
	display: inline-flex;
	align-items: center;
}

/* --- Кнопка города в шапке (тёмная шапка → светлый текст) --- */
.geo-switch__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 40px;
	background: transparent;
	color: #fff;
	font: 400 14px/1 "Open Sans", Arial, sans-serif;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .2s ease, background .2s ease;
}
.geo-switch__btn:hover { border-color: var(--geo-gold); background: rgba(255, 255, 255, .06); }
.geo-switch__pin { color: var(--geo-gold); flex: none; }
.geo-switch__label { color: rgba(255, 255, 255, .7); }
.geo-switch__city {
	font-weight: 700;
	border-bottom: 1px dashed rgba(255, 255, 255, .5);
	padding-bottom: 1px;
}
.geo-switch__caret { color: rgba(255, 255, 255, .7); flex: none; }

/* --- Модалка --- */
.geo-modal { position: fixed; inset: 0; z-index: 10000; }
.geo-modal[hidden] { display: none; }

.geo-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 8, 6, .78);
	animation: geoFade .2s ease;
}
.geo-modal__box {
	position: relative;
	z-index: 2;
	width: min(720px, calc(100% - 32px));
	max-height: 82vh;
	margin: 8vh auto 0;
	background: #fff;
	border-radius: 10px;
	padding: 34px 36px 30px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
	overflow: auto;
	animation: geoPop .22s ease;
	font-family: "Open Sans", Arial, sans-serif;
	color: var(--geo-ink);
}

.geo-modal__close {
	position: absolute;
	top: 16px; right: 18px;
	width: 36px; height: 36px;
	border: 0;
	background: none;
	font-size: 30px;
	line-height: 1;
	color: #9A9A9A;
	cursor: pointer;
	transition: color .2s ease;
}
.geo-modal__close:hover { color: var(--geo-maroon); }

.geo-modal__title {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 700;
	color: var(--geo-maroon);
}

.geo-modal__search { margin-bottom: 22px; }
.geo-modal__input {
	width: 100%;
	min-height: 46px;
	padding: 11px 18px;
	border: 1px solid var(--geo-line);
	border-radius: 40px;
	font: 400 15px/1.3 "Open Sans", Arial, sans-serif;
	color: var(--geo-ink);
}
.geo-modal__input:focus { outline: none; border-color: var(--geo-gold); }

.geo-modal__group + .geo-modal__group { margin-top: 22px; }
.geo-modal__region {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #9A9A9A;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--geo-line);
}

.geo-modal__cities {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px 18px;
}
.geo-modal__city {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	text-decoration: none;
	color: var(--geo-ink);
	font-size: 15px;
	transition: background .15s ease, color .15s ease;
}
.geo-modal__city:hover { background: #F5F3F1; color: var(--geo-maroon); }
.geo-modal__city.is-active {
	background: var(--geo-maroon);
	color: #fff;
	font-weight: 700;
}
.geo-modal__city-item[hidden] { display: none; }

.geo-modal__empty {
	padding: 20px 0;
	color: #9A9A9A;
	text-align: center;
}

@keyframes geoFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes geoPop  { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* блокировка прокрутки фона, когда модалка открыта */
body.geo-lock { overflow: hidden; }

/* --- Адаптив --- */
@media (max-width: 640px) {
	.geo-switch__label { display: none; }
	.geo-switch__btn { padding: 7px 12px; }
	.geo-modal__box { padding: 26px 20px 22px; margin-top: 5vh; max-height: 88vh; }
	.geo-modal__title { font-size: 20px; }
	.geo-modal__cities { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
	.geo-modal__cities { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.geo-modal__overlay, .geo-modal__box { animation: none; }
}