/*
 * AV-Security — regional UI (region selector modal + utility-bar trigger).
 * ----------------------------------------------------------------------------
 * Self-contained. Every selector is namespaced .av-region-*. Loaded AFTER
 * main.css. It does not reference or override any .av-header__* rule except by
 * inheriting values, and it touches nothing to do with the sticky / compact
 * header, the animated search, the hero or the header geometry.
 *
 * Colour tokens (--av-ink, --av-primary, --av-primary-hover, --av-accent,
 * --av-hairline) are the theme's, declared on :root in main.css; literal
 * fallbacks are given so this file also stands alone.
 */

/* ---- Utility-bar region item ---------------------------------------------
 * A button reset so it looks identical to the static text it replaced, but is
 * now focusable and clickable. It inherits font / gap / colour from
 * .av-header__util-item; the bar height stays fixed by .av-header__utility
 * (height + overflow:hidden), so nothing here can change the header layout.
 */
.av-region-field {
	white-space: nowrap;
	/* Match the other utility-bar texts (email, working hours) exactly.
	   Without this the region text renders at the inherited body 1rem,
	   because `.av-region-trigger { font: inherit }` overrides the
	   `.av-header__util-item` size from main.css. */
	font-size: 0.78rem;
}

.av-region-trigger {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	/* Same as .av-header__util-item / .av-header__util-link in main.css. */
	font-size: 0.78rem;
	letter-spacing: inherit;
	color: inherit;
	cursor: pointer;
}

/* `color: inherit` above does NOT achieve "same colour as the other utility
   items" — inherit takes the DOM PARENT's computed color (.av-header__util-info,
   full-opacity ink), not the value from .av-header__util-item's own rule in
   main.css that also matches this same button. Both rules are one class
   (0,1,0) and region.css loads after main.css, so `inherit` was winning the
   cascade and the city text rendered solid ink instead of ink/70% like the
   e-mail, hours and Вакансии/Новости/Блог text beside it. This compound
   selector (0,2,0) beats both unconditionally, regardless of load order, so
   the city text matches the same colour as everything else without touching
   .av-region-trigger itself (still used, unchanged, by the mobile-nav-menu
   trigger and its own colour). */
.av-header__util-item.av-region-trigger {
	color: rgba(11, 31, 51, 0.7);
}

.av-region-trigger:hover,
.av-region-trigger:hover .av-header__util-icon {
	color: var(--av-accent, #c8102e);
}

/* Match the theme's existing header focus ring. */
.av-region-trigger:focus-visible {
	outline: 2px solid var(--av-primary, #1a5fb4);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- Modal shell ----------------------------------------------------------
 * ONE shared shell for every state this dialog can show: the GeoIP confirm
 * ("Ваш город — X?"), the region list ("Выберите ваш регион") and the city
 * search ("Выберите ваш город"). Width, radius, padding, title position,
 * close-button position, background, shadow and spacing all live here,
 * unconditionally — no per-state override. Only genuinely state-specific
 * CONTENT (the .av-region-city__* search/list/back bits) is scoped
 * separately, inside .av-region-city, so switching steps never reads as a
 * different modal opening — only the content inside the same box changes.
 *
 * The site's own controls (buttons, focus rings) use a flat 2px radius
 * (see main.css) — deliberately kept for .av-region-btn below. This box
 * itself uses a softer 12px: a restrained "card" radius, clearly more
 * compact than this dialog's old 16-18px city variant, still visibly
 * distinct from the sharp inline controls it contains.
 */
.av-region-dialog,
.av-region-dialog * {
	box-sizing: border-box;
}

.av-region-dialog {
	width: min(calc(100vw - 32px), 400px);
	max-width: calc(100vw - 32px);
	/* dvh progressive-enhances over vh — browsers that don't know `dvh` just
	   ignore that whole declaration and keep the vh one above it. */
	max-height: 86vh;
	max-height: 86dvh;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #fff;
	color: var(--av-ink, #0b1f33);
	box-shadow: 0 16px 40px -14px rgba(6, 17, 31, 0.26);
}

.av-region-dialog::backdrop {
	background: rgba(6, 17, 31, 0.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* Keep it hidden when closed, including the non-modal fallback path. */
.av-region-dialog:not([open]) {
	display: none;
}

/* Fixed-height flex column: title + close button stay put; only .av-region-
   dialog__body (and, within it, the city list) scrolls. */
.av-region-dialog__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: 86vh;
	max-height: 86dvh;
	padding: 1.5rem 1.5rem 1.25rem; /* 24px 24px 20px */
	overflow: hidden; /* clip to the rounded corner; content scrolls, not this */
}

.av-region-dialog__close {
	position: absolute;
	top: 1.125rem; /* 18px */
	right: 1.125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.625rem; /* 26px */
	height: 1.625rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: rgba(11, 31, 51, 0.45);
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.av-region-dialog__close:hover {
	color: var(--av-accent, #c8102e);
	background: rgba(11, 31, 51, 0.07);
}

.av-region-dialog__title {
	flex: 0 0 auto;
	margin: 0 0 1.125rem; /* 18px */
	padding-right: 2rem;
	font-size: 1.25rem; /* 20px */
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--av-ink, #0b1f33);
}

.av-region-dialog__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	/* NOT overflow:hidden — that would clip the city search field's focus
	   ring at the top. Scroll is contained by min-height:0 + the city
	   list's own overflow-y (see .av-region-city__popular/__listbox). */
	/* The step-switch micro-transition (region <-> city <-> confirm). Only
	   content fades/slides — the box itself is never animated in size.
	   Driven by animateStepIn() in region.js adding/removing
	   .is-step-enter right after new content is set. */
	transition: opacity 0.18s ease, transform 0.18s ease;
	opacity: 1;
	transform: translateY(0);
}

.av-region-dialog__body.is-step-enter {
	opacity: 0;
	transform: translateY(5px);
}

.av-region-dialog__actions {
	display: flex;
	gap: 0.75rem;
}

.av-region-btn {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 auto;
	padding: 0.7rem 1.2rem;
	border: 1px solid transparent;
	border-radius: 2px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.av-region-btn--primary {
	background: var(--av-primary, #1a5fb4);
	color: #fff;
}

.av-region-btn--primary:hover {
	background: var(--av-primary-hover, #12488c);
}

.av-region-btn--ghost {
	background: #fff;
	border-color: var(--av-hairline, rgba(11, 31, 51, 0.2));
	color: var(--av-ink, #0b1f33);
}

.av-region-btn--ghost:hover {
	border-color: var(--av-ink, #0b1f33);
}

/* ---- Region list (STATE 1) — same pill-row language as the city rows
   below (.av-region-city__pop): borderless, rounded hover fill, no boxed
   borders. Slightly taller than the dense city rows since there are only
   ever 2-3 of these and they're the primary choice, not a scanned list. */
.av-region-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.av-region-option {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 2.75rem; /* 44px */
	padding: 0 0.75rem;
	border: 0;
	border-radius: 9px;
	background: transparent;
	text-align: left;
	/* Buttons don't inherit font-family by default (UA stylesheet falls back
	   to the platform control font — Arial here), unlike the city rows below
	   which already set `font: inherit`. Same base, then the same weight as
	   the city rows (500, not 600) so this list doesn't read heavier. */
	font: inherit;
	font-size: 0.9375rem; /* 15px — matches .av-region-city__pop/__name */
	font-weight: 500;
	line-height: 1.3;
	color: var(--av-ink, #0b1f33);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.av-region-option:hover {
	background: #eef3f8;
}

.av-region-option:focus-visible {
	outline-offset: -2px;
	background: #eef3f8;
}

.av-region-error {
	margin: 1rem 0 0;
	color: var(--av-accent, #c8102e);
	font-size: 0.85rem;
	line-height: 1.4;
}

.av-region-dialog.is-busy {
	pointer-events: none;
}

.av-region-dialog :focus-visible {
	outline: 2px solid var(--av-primary, #1a5fb4);
	outline-offset: 2px;
	/* NB: no `border-radius` here — it used to leak onto the focused city
	   search input (Chrome gives text inputs :focus-visible) and square its
	   corners. The city field owns its own radius + :focus-within style. */
}

/* Visually-hidden text for the close button's accessible name backup. */
.av-region-dialog__close .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ======================================================================
 * City search content (STATE 2). Same shell as above (width, radius,
 * padding, title, close button, background, shadow, spacing) — only what
 * lives inside .av-region-city (search field, popular list, autocomplete
 * list, back link) is specific to this step. No dialog-level modifier
 * class is needed any more: .av-region-city itself (present only while
 * this step is rendered) is scope enough.
 * ==================================================================== */
.av-region-city {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* Visible label removed by design; kept in the DOM for screen readers. */
.av-region-city__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Search field = the rounded capsule. It carries the border, radius, height
   and the focus treatment; the <input> inside is a transparent, border-less
   fill. The leading icon is absolutely positioned over the left padding. */
.av-region-city__field {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	width: 100%;
	height: 2.8125rem; /* 45px */
	border: 1.5px solid #172333;
	border-radius: 0.8125rem; /* 13px */
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The only visible focus indicator — on the capsule, not the input.
   Compact: thin brand-blue border + a very soft outer glow. */
.av-region-city__field:focus-within {
	border-color: var(--av-primary, #1a5fb4);
	box-shadow: 0 0 0 2px rgba(26, 95, 180, 0.14);
}

.av-region-city__field-icon {
	position: absolute;
	left: 0.875rem; /* 14px */
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: var(--av-primary, #1a5fb4);
	pointer-events: none;
}

.av-region-city__input {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 0.875rem 0 2.625rem; /* 0 14px 0 42px */
	border: 0;
	outline: 0;
	border-radius: inherit;
	background: transparent;
	box-shadow: none;
	font: inherit;
	font-size: 0.9375rem; /* 15px on desktop; mobile forces 16px below (Safari zoom) */
	color: var(--av-ink, #0b1f33);
}

.av-region-city__input::placeholder {
	font-size: 0.9375rem; /* 15px */
	color: rgba(11, 31, 51, 0.45); /* soft grey */
}

/* The input itself never draws focus — the capsule's :focus-within does.
   Overrides the generic `.av-region-dialog :focus-visible` outline too. */
.av-region-city__input:focus,
.av-region-city__input:focus-visible {
	outline: 0;
	border: 0;
	box-shadow: none;
}

/* ---- «ПОПУЛЯРНЫЕ ГОРОДА» (initial state) ---- */
.av-region-city__popular-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	margin-top: 1.25rem; /* 20px */
}

.av-region-city__popular-wrap[hidden] {
	display: none;
}

.av-region-city__popular-title {
	flex: 0 0 auto;
	margin: 0 0 0.375rem; /* 6px */
	font-size: 0.6875rem; /* 11px */
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b; /* grey-blue */
}

/* The ONLY scrollable area. Thin, unobtrusive scrollbar. */
.av-region-city__popular,
.av-region-city__listbox {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 340px; /* stays well under the 86vh modal cap */
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(11, 31, 51, 0.22) transparent;
}

.av-region-city__listbox {
	margin-top: 1.25rem; /* 20px */
}

.av-region-city__listbox[hidden] {
	display: none;
}

.av-region-city__popular::-webkit-scrollbar,
.av-region-city__listbox::-webkit-scrollbar {
	width: 6px;
}

.av-region-city__popular::-webkit-scrollbar-thumb,
.av-region-city__listbox::-webkit-scrollbar-thumb {
	background: rgba(11, 31, 51, 0.18);
	border-radius: 3px;
}

.av-region-city__popular::-webkit-scrollbar-track,
.av-region-city__listbox::-webkit-scrollbar-track {
	background: transparent;
}

/* Compact rows shared by popular items and autocomplete options. Nothing is
   highlighted by default — only :hover / :focus-visible / .is-active. */
.av-region-city__pop {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	width: 100%;
	height: 1.8125rem; /* 29px */
	margin: 0;
	padding: 0 0.625rem; /* 0 10px */
	text-align: left;
	border: 0;
	border-radius: 7px;
	background: transparent;
	font: inherit;
	font-size: 0.9375rem; /* 15px — matches .av-region-option */
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--av-ink, #0b1f33);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.av-region-city__pop:hover {
	background: #eef3f8; /* very light grey-blue */
}

.av-region-city__pop:focus-visible {
	outline: 2px solid var(--av-primary, #1a5fb4);
	outline-offset: -2px;
	background: #eef3f8;
}

/* Autocomplete result rows — same compact rhythm, but two lines
   (city name + region), so height grows a little instead of being fixed. */
.av-region-city__option {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.05rem;
	min-height: 1.8125rem; /* 29px; grows for the 2-line name+region */
	padding: 0.25rem 0.625rem; /* sides 10px */
	border-radius: 7px;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.av-region-city__option.is-active,
.av-region-city__option:hover {
	background: #eef3f8;
}

.av-region-city__name {
	font-size: 0.9375rem; /* 15px — matches .av-region-option / __pop, not heavier */
	font-weight: 500;
	line-height: 1.2;
	color: var(--av-ink, #0b1f33);
}

.av-region-city__region {
	font-size: 0.6875rem; /* 11px */
	color: rgba(11, 31, 51, 0.55);
}

.av-region-city__status {
	flex: 0 0 auto;
	margin: 0.625rem 0 0;
	min-height: 1.2em;
	font-size: 0.75rem; /* 12px */
	color: rgba(11, 31, 51, 0.55);
}

/* Back link — always visible at the bottom, above a hairline divider, never
   part of the scroll area. */
.av-region-city__back {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	align-self: stretch;
	margin: 0.625rem 0 0; /* 10px */
	padding: 0.75rem 0 0; /* 12px above the divider */
	border: 0;
	border-top: 1px solid rgba(11, 31, 51, 0.08); /* very light grey */
	background: none;
	font: inherit;
	font-size: 0.8125rem; /* 13px */
	font-weight: 500;
	text-align: center;
	color: var(--av-primary, #1a5fb4);
	cursor: pointer;
}

.av-region-city__back::before {
	content: "← ";
}

.av-region-city__back:hover {
	color: var(--av-primary-hover, #12488c);
}

.av-region-city__back:focus-visible {
	outline: 2px solid var(--av-primary, #1a5fb4);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ======================================================================
 * Mobile — ONE shell, every state. Comfortable touch sizes; the search
 * input is forced to a literal 16px so iOS Safari never auto-zooms the
 * page on focus (its own zoom heuristic reads computed px, not rem, so
 * this is deliberately not relative to the root font size).
 * ==================================================================== */
@media (max-width: 600px) {
	.av-region-dialog {
		width: calc(100vw - 24px);
		/* The base rule's max-width (100vw - 32px) is tighter than this at
		   some widths and would silently clamp it back down — override so
		   the 24px mobile margin actually applies. */
		max-width: calc(100vw - 24px);
		max-height: 90vh;
		max-height: 90dvh;
		border-radius: 16px;
	}

	.av-region-dialog__inner {
		max-height: 90vh;
		max-height: 90dvh;
		padding: 1.375rem 1.25rem 1.125rem; /* 22px 20px 18px */
	}

	.av-region-dialog__title {
		margin: 0 0 1rem;
		padding-right: 2.25rem;
		font-size: 1.375rem; /* 22px */
	}

	.av-region-dialog__close {
		top: 0.875rem;
		right: 0.875rem;
		width: 2rem;
		height: 2rem;
	}

	.av-region-dialog__close svg {
		width: 20px;
		height: 20px;
	}

	.av-region-dialog__actions {
		flex-direction: column;
	}

	.av-region-option {
		min-height: 3rem; /* 48px touch target */
		padding: 0 0.875rem;
		border-radius: 10px;
		font-size: 1rem; /* 16px */
	}

	.av-region-city__field {
		height: 3.25rem; /* 52px */
		border-radius: 0.875rem; /* 14px */
	}

	.av-region-city__field-icon {
		left: 1rem; /* 16px */
		width: 20px;
		height: 20px;
	}

	.av-region-city__input {
		padding: 0 1rem 0 2.75rem;
		/* >=16px — below this, iOS Safari auto-zooms the whole page on
		   focus. Literal px, not rem: intentional, see block comment. */
		font-size: 16px;
	}

	.av-region-city__input::placeholder {
		font-size: 16px;
	}

	.av-region-city__popular-wrap {
		margin-top: 1.25rem;
	}

	.av-region-city__popular-title {
		font-size: 0.75rem; /* 12px */
	}

	.av-region-city__pop {
		height: 2.5rem; /* 40px touch target */
		padding: 0 0.75rem; /* 12px */
		border-radius: 9px;
		font-size: 1rem; /* 16px */
	}

	.av-region-city__option {
		min-height: 2.5rem;
		padding: 0.4rem 0.75rem;
		border-radius: 9px;
	}

	.av-region-city__name {
		font-size: 1rem; /* 16px */
	}

	.av-region-city__region {
		font-size: 0.8125rem; /* 13px */
	}

	.av-region-city__status {
		font-size: 0.8125rem; /* 13px */
	}

	.av-region-city__back {
		padding-top: 1rem; /* 16px */
		font-size: 0.875rem; /* 14px */
	}

	.av-region-city__popular,
	.av-region-city__listbox {
		max-height: 55vh;
		max-height: 55dvh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.av-region-dialog__close,
	.av-region-dialog__body,
	.av-region-btn,
	.av-region-option,
	.av-region-city__field,
	.av-region-city__pop,
	.av-region-city__option {
		transition: none;
	}
}

/* ---- Mobile navigation overlay region control -----------------------------
 * A separate functional block above the main nav list inside the core
 * Navigation block's mobile overlay (see inc/region-render.php, which
 * injects the markup only into that overlay's own container — this CSS is a
 * second, belt-and-suspenders guarantee that it can never show on desktop
 * even if the markup itself is ever reachable there). Deliberately quieter
 * than the primary nav links: smaller text, muted white, no fill/background,
 * so it reads as a utility row rather than a CTA. A hairline separates it
 * from "Главная" below; the overlay's own dark background (var(--av-ink) in
 * main.css) is inherited, not repainted here.
 */
.av-mobile-nav-region {
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.av-mobile-nav-region__btn {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.78);
	text-align: left;
}

.av-mobile-nav-region__btn:hover,
.av-mobile-nav-region__btn:hover .av-mobile-nav-region__icon,
.av-mobile-nav-region__btn:hover .av-mobile-nav-region__chevron {
	color: #fff;
}

.av-mobile-nav-region__icon,
.av-mobile-nav-region__chevron {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.6);
}

.av-mobile-nav-region__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* Overrides the 0.78rem set on .av-region-field for the utility bar —
	   this copy sits at the mobile overlay's own, larger scale. */
	font-size: inherit;
}

.av-mobile-nav-region__chevron {
	margin-left: auto;
}

@media (min-width: 900px) {
	/* Desktop reuses this same overlay container (see main.css comment above
	   .wp-block-navigation__responsive-container.is-menu-open) — belt and
	   suspenders so the control never appears there. */
	.av-mobile-nav-region {
		display: none;
	}
}