/* ==========================================================================
   Редизайн «сайт как приложение» (с 29.09.2026)
   Правила: www/kupitak.ru/FRONTEND_CONVENTIONS.md. Макет:
   https://claude.ai/artifact/DWC7sWLCLi7TmMaE6t6Lhe (Header.dc.html).
   Только внешний вид: все классы/привязки main.js сохранены, стили
   действуют лишь на .header--v2 (админка остаётся со старой шапкой).
   Цвета — только переменные vars.css.
   ========================================================================== */

[hidden].app-strip,
[hidden].city-picker,
.city-picker__back[hidden] {
	display: none !important;
}

/* ---------- Полоска «Скачайте приложение» (только ПК) ---------- */
.app-strip {
	background: var(--black);
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
}

.app-strip__inner {
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	position: relative;
}

.app-strip__icon {
	width: 20px;
	height: 20px;
	border-radius: 5px;
}

.app-strip__store {
	color: var(--white);
	font-weight: 600;
	height: 24px;
	padding: 0 10px;
	border-radius: 12px;
	background: rgb(255 255 255 / 14%);
	display: flex;
	align-items: center;
	transition: background 0.2s;
}

.app-strip__store:hover {
	background: rgb(255 255 255 / 26%);
}

.app-strip__close {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: none;
	color: var(--label-gray);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}

@media (max-width: 768px) {
	.app-strip {
		display: none !important;
	}
}

/* ---------- Шапка ПК: фиолетовая, две строки ---------- */
@media (min-width: 769px) {
	.header--v2 {
		display: block;
		height: auto;
		background: var(--accent);
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		margin-bottom: 32px;
	}

	/* Две независимые строки (решения Амира 29.09.2026, вечер):
	   1) «Все города» слева … избранное, колокольчик, профиль — вправо;
	   2) логотип, каталог (только иконка ☰), поиск, «Подать объявление».
	   Flex с переносом, а не grid: в сетке у профиля и кнопки подачи был
	   бы общий столбец, и профиль отрывался от колокольчика. Разрыв строки
	   — псевдоэлемент на всю ширину (order 10), его высота = отступ между
	   строками. Разметка не менялась — только order. */
	.header--v2 .header-grid {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 12px;
		/* компактнее (Амир 29.09.2026): 10 + 36 + 10 + 52 + 16 = 124 px
		   вместо 152 — от этой высоты считаются «липкие» колонки ниже */
		padding: 10px 0 16px;
	}

	.header--v2 .header-grid::after {
		content: "";
		order: 10;
		flex-basis: 100%;
		height: 10px;
	}

	.header--v2 .hdr-city { order: 1; }
	.header--v2 .hdr-fav { order: 3; } /* margin-left: auto — ниже, после общего margin: 0 */
	.header--v2 .hdr-bell { order: 4; }
	.header--v2 .header-profile-button { order: 5; }
	.header--v2 .header-logo { order: 11; }
	.header--v2 .menu-button { order: 12; }
	.header--v2 .header-search-form { order: 13; flex: 1 1 0; min-width: 0; }
	.header--v2 .header-add-post { order: 14; }

	/* логотип — в начале второй строки, перед каталогом */
	.header--v2 .header-logo {
		width: auto;
		margin: 0 8px 0 0;
		color: var(--white);
	}

	.header--v2 .header-logo svg {
		height: 38px;
		width: 176px;
		/* спрайт #icon-logo цветной — в фиолетовой шапке делаем белым */
		filter: brightness(0) invert(1);
	}

	/* кнопки верхней строки — 36 px (было 44; Амир 29.09.2026) */
	.header--v2 .hdr-city,
	.header--v2 .header-link,
	.header--v2 .hdr-bell {
		height: 36px;
		border-radius: 10px; /* острее — единый угол шапки 10 (Амир 29.09.2026) */
		background: rgb(255 255 255 / 16%);
		color: var(--white);
		display: flex;
		align-items: center;
		gap: 7px;
		padding: 0 12px;
		margin: 0;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		border: 0;
		cursor: pointer;
		white-space: nowrap;
		transition: background 0.2s;
	}

	.header--v2 .hdr-city:hover,
	.header--v2 .header-link:hover,
	.header--v2 .hdr-bell:hover {
		background: rgb(255 255 255 / 26%);
		color: var(--white);
	}

	.header--v2 .hdr-city {
		font-family: inherit;
	}

	.header--v2 .hdr-city svg {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	.header--v2 .hdr-city .hdr-city-chevron {
		width: 12px;
		height: 12px;
	}

	.header--v2 .hdr-city-label {
		max-width: 220px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Избранное — только иконка, квадрат как у колокольчика (Амир 29.09.2026);
	   margin-left: auto прижимает избранное, колокольчик и профиль вправо */
	.header--v2 .hdr-fav {
		width: 36px;
		padding: 0;
		justify-content: center;
		margin-left: auto;
	}

	.header--v2 .header-link svg {
		width: 18px;
		height: 18px;
	}

	.header--v2 .hdr-bell {
		width: 36px;
		padding: 0;
		justify-content: center;
		position: relative;
	}

	.header--v2 .hdr-bell svg {
		width: 18px;
		height: 18px;
	}

	.header--v2 .hdr-badge {
		position: absolute;
		top: -5px;
		right: -5px;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 9px;
		border: 2px solid var(--accent);
		background: var(--badge-red);
		color: var(--white);
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: content-box;
	}

	.header--v2 .hdr-avatar {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: var(--white);
		color: var(--accent);
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		flex-shrink: 0;
		margin-left: -7px;
	}

	.header--v2 .hdr-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.header--v2 .hdr-avatar svg {
		width: 15px;
		height: 15px;
	}

	.header--v2 .hdr-profile-name {
		max-width: 160px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* меню профиля — прежнее, только привязано к новой кнопке профиля */
	.header--v2 .header-profile-popup {
		top: 52px; /* 10 (отступ) + 36 (кнопка) + 6 */
		right: 0; /* профиль — у правого края верхней строки */
	}

	/* во второй строке — высота как у поиска и «Каталога» */
	.header--v2 .header-add-post {
		justify-content: center;
		margin: 0;
		height: 52px;
		border-radius: 10px;
		background: var(--white);
		color: var(--pink);
		font-weight: 700;
		font-size: 15px;
		padding: 0 18px;
		gap: 8px;
	}

	.header--v2 .header-add-post:hover {
		background: var(--light);
		color: var(--pink-alternate);
	}

	.header--v2 .hdr-add-icon {
		width: 18px;
		height: 18px;
	}

	/* строка 2 */
	/* каталог — только иконка ☰, квадрат 52 (Амир 29.09.2026); подпись
	   «Каталог» спрятана визуально, но остаётся для экранного чтения */
	.header--v2 .menu-button {
		width: 52px;
		height: 52px;
		padding: 0;
		gap: 0;
		justify-content: center;
		flex-shrink: 0;
		/* каталог и поиск — один блок (Амир 29.09.2026): у кнопки
		   скруглены только левые углы, у поля — правые, между ними линия */
		border-radius: 10px 0 0 10px;
		background: var(--white);
		color: var(--black);
		font-weight: 600;
	}

	.header--v2 .menu-button:hover {
		background: var(--light);
	}

	.header--v2 .menu-button .menu-button-icon {
		width: 20px;
	}

	.header--v2 .menu-button .menu-button-icon span {
		background: var(--accent);
	}

	.header--v2 .hdr-catalog-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.header--v2 .header-search-form {
		max-width: none;
		/* -12px = зазор flex-строки: поле вплотную к кнопке каталога */
		margin: 0 0 0 -12px;
		height: 52px;
		background: var(--white);
		padding: 6px 6px 6px 20px;
		position: relative;
		/* продолжение блока каталога: скруглены только правые углы
		   (вместо «таблетки» 999px из header.blade.php) */
		border-radius: 0 10px 10px 0;
	}

	/* разделитель между каталогом и поиском — тонкая линия не на всю высоту */
	.header--v2 .header-search-form::before {
		content: "";
		position: absolute;
		left: 0;
		top: 12px;
		bottom: 12px;
		width: 1px;
		background: var(--light-gray);
	}

	.header--v2 .header-search-icon {
		color: var(--black);
		width: 20px;
		height: 20px;
	}

	.header--v2 .header-search-input {
		font-size: 16px;
		color: var(--black);
	}

	.header--v2 .header-search-button {
		/* острее вслед за полем (10): внутренний угол 6 */
		border-radius: 6px;
		height: 40px;
		padding: 0 26px;
		background: var(--accent);
		font-size: 15px;
	}

	.header--v2 .header-search-button:hover {
		background: var(--accent-alternate);
	}

	/* Меню категорий: раньше выпадало ровно из-под шапки высотой 70 px.
	   Новая шапка выше — верх задаёт kt-header.js (--kt-menu-top) по
	   фактическому низу шапки в момент открытия. */
	body:has(.header--v2) .main-menu {
		top: var(--kt-menu-top, 124px);
		height: calc(100% - var(--kt-menu-top, 124px));
	}

	body:has(.header--v2) .main-menu-wrap {
		max-height: calc(100vh - var(--kt-menu-top, 124px) - 40px);
	}

	/* «Липкие» колонки считали отступ от старой шапки 70 px (110 = 70 + 40,
	   90 = 70 + 20). Новая шапка при прокрутке — 124 px (полоска над ней
	   уезжает; было 152 до уменьшения 29.09), колонки — на 20 ниже неё.
	   То же число — в kt-account.js (BASE) и home-v2.css (якорь). */
	body:has(.header--v2) .item-page-sidebar,
	body:has(.header--v2) .profile-sidebar,
	body:has(.header--v2) .account .sidebar {
		top: 144px;
	}

	body:has(.header--v2) .partners-filters-button {
		top: 134px;
	}
}

@media (min-width: 769px) and (max-width: 1200px) {
	/* на средних ширинах подпись профиля прячется — остаётся аватар
	   (у «Избранного» подписи нет на всех ширинах) */
	.header--v2 .hdr-profile-name {
		font-size: 0;
		gap: 0;
	}

	.header--v2 .hdr-city-label {
		max-width: 120px;
	}
}

/* ==========================================================================
   ТЕЛЕФОН (≤768): шапка и нижнее меню как в приложении
   Источник размеров — Flutter: gradient_header.dart, app_tab_shell.dart.
   ========================================================================== */

.gs-top {
	display: none;
}

@media (max-width: 768px) {
	/* --- Шапка (global-search) --- */
	.global-search.gs-v2 {
		background: var(--accent);
		padding: 12px 0 0;
		margin-bottom: 0;
	}

	.gs-v2 .gs-top {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 16px;
	}

	/* старое правило `.global-search svg` ставит ЛЮБУЮ иконку блока
	   абсолютно (под значок поиска) — иконки ряда из-под него выводим */
	.gs-v2 .gs-top svg {
		position: static;
		transform: none;
		display: block;
		width: 22px;
		height: 22px;
	}

	.gs-v2 .gs-btn {
		width: 44px;
		height: 44px;
		flex-shrink: 0;
		border-radius: 14px;
		border: 0;
		background: rgb(255 255 255 / 20%);
		color: var(--white);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		cursor: pointer;
	}

	.gs-v2 .gs-city {
		flex-grow: 1;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 6px;
		border: 0;
		background: none;
		color: var(--white);
		font: inherit;
		font-size: 16px;
		font-weight: 600;
		text-align: left;
		padding: 0;
		cursor: pointer;
	}

	.gs-v2 .gs-city-label {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.gs-v2 .gs-top .gs-city svg {
		width: 10px;
		height: 16px;
		flex-shrink: 0;
	}

	.gs-v2 .gs-badge {
		position: absolute;
		top: -4px;
		right: -4px;
		min-width: 14px;
		height: 14px;
		padding: 0 3px;
		border-radius: 7px;
		background: var(--badge-red);
		color: var(--white);
		font-size: 9px;
		font-weight: 700;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* строка поиска: белая «пилюля» + квадрат каталога справа */
	.gs-v2 .search-form {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.gs-v2 .search-input {
		flex: 1 1 auto;
		height: 42px;
		border: 0;
		border-radius: 999px;
		background: var(--white);
		padding-left: 44px;
		padding-right: 14px;
		font-size: 14px;
	}

	.gs-v2 .search-form > svg {
		left: 14px;
		width: 18px;
		height: 18px;
		color: var(--black);
	}

	.gs-v2 .mobile-search-menu {
		position: relative;
		top: auto;
		right: auto;
		transform: none;
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		padding: 0;
		border-radius: 14px;
		background: var(--white);
		pointer-events: all;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* в покое — значок каталога (сетка 2×2), при открытом поиске — крестик */
	.gs-v2 .mobile-search-menu::before {
		content: "";
		width: 18px;
		height: 18px;
		background:
			radial-gradient(circle at 25% 25%, var(--black) 0 3.6px, transparent 3.8px),
			radial-gradient(circle at 75% 25%, var(--black) 0 3.6px, transparent 3.8px),
			radial-gradient(circle at 25% 75%, var(--black) 0 3.6px, transparent 3.8px),
			radial-gradient(circle at 75% 75%, var(--black) 0 3.6px, transparent 3.8px);
	}

	.gs-v2 .mobile-search-menu span {
		display: none;
		position: absolute;
		width: 18px;
	}

	.gs-v2 .search-input.focus ~ .mobile-search-menu::before {
		display: none;
	}

	.gs-v2 .search-input.focus ~ .mobile-search-menu span {
		display: block;
	}

	.gs-v2 .search-input.focus ~ .mobile-search-menu span:nth-child(1) {
		transform: rotate(45deg);
	}

	.gs-v2 .search-input.focus ~ .mobile-search-menu span:nth-child(2) {
		transform: rotate(-45deg);
	}

	/* нижний край шапки — начало светлого «листа» со скруглением 24 */
	.global-search.gs-v2::after {
		content: "";
		display: block;
		height: 24px;
		margin-top: 16px;
		background: var(--white);
		border-radius: 24px 24px 0 0;
	}

	/* открыт поиск/каталог — остаётся только строка поиска, как в
	   приложении; меню категорий встаёт сразу под неё */
	.gs-v2:has(.search-input.focus) .gs-top {
		display: none;
	}

	/* 12 (отступ) + 42 (поиск) + 16 + 24 (скругление листа) = 94 */
	body:has(.gs-v2) .main-menu-wrap {
		margin-top: 94px;
		max-height: calc(100dvh - 94px - 90px);
	}

	/* --- Нижнее меню как в приложении --- */
	.mobile-menu.mm-v2 {
		left: 0;
		transform: none;
		background: var(--white);
		box-shadow: 0 -1px 3px rgb(69 62 70 / 6%), 0 -2px 5px rgb(69 62 70 / 3%);
		padding: 10px max(0px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left));
	}

	.mobile-menu.mm-v2 ul {
		background: none;
		border-radius: 0;
		max-width: none;
		min-width: 0;
		padding: 0;
		margin: 0;
		gap: 0;
		align-items: start;
	}

	.mobile-menu.mm-v2 ul a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		color: var(--tab-inactive);
		font-size: 12px;
		line-height: 1.2;
	}

	.mobile-menu.mm-v2 ul a.active {
		color: var(--black);
	}

	.mobile-menu.mm-v2 .mm-icon {
		width: 24px;
		height: 24px;
		margin: 0;
	}

	.mobile-menu.mm-v2 ul a:has(.mm-create) {
		color: var(--pink);
		margin-top: -26px;
	}

	.mobile-menu.mm-v2 .mm-create {
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: var(--white);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mobile-menu.mm-v2 .mm-create-dot {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--pink);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mobile-menu.mm-v2 .mm-create-dot svg {
		width: 20px;
		height: 20px;
		margin: 0;
	}

	.mobile-menu.mm-v2 .new-messages-counter {
		top: -4px;
		left: calc(50% + 4px);
	}
}

/* ---------- Окно «Все города» ---------- */
.city-picker {
	position: fixed;
	inset: 0;
	z-index: 550;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.city-picker-open {
	overflow: hidden;
}

.city-picker__overlay {
	position: absolute;
	inset: 0;
	background: rgb(22 14 24 / 45%);
}

.city-picker__sheet {
	position: relative;
	width: min(440px, calc(100% - 32px));
	max-height: 70vh;
	background: var(--white);
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.city-picker__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 20px 12px 8px 20px;
}

.city-picker__title {
	flex-grow: 1;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.city-picker__back,
.city-picker__close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: var(--light);
	color: var(--black);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}

.city-picker__back svg {
	width: 18px;
	height: 18px;
}

.city-picker__list {
	overflow-y: auto;
	padding: 4px 8px 16px;
}

.city-picker__list.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

.city-picker__item {
	width: 100%;
	min-height: 52px;
	border: 0;
	background: none;
	text-align: left;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	color: var(--black);
	padding: 12px;
	border-radius: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.city-picker__item:hover {
	background: var(--light);
}

.city-picker__item--all {
	color: var(--accent);
}

.city-picker__item--next::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--gray);
	border-top: 2px solid var(--gray);
	transform: rotate(45deg);
	margin-right: 6px;
}

.city-picker__msg {
	padding: 20px 12px;
	color: var(--gray);
}

@media (max-width: 768px) {
	/* на телефоне — окно снизу, как в приложении (city_picker.dart) */
	.city-picker {
		align-items: flex-end;
	}

	.city-picker__sheet {
		width: 100%;
		height: 70vh;
		max-height: none;
		border-radius: 24px 24px 0 0;
	}
}

/* ==========================================================================
   Шапка страниц на телефоне — components/main/page-mhead.blade.php
   (как GradientPageShell приложения: фиолетовая полоса 20/12/20/14,
   «назад» 40, название 16/600 белым; ниже — светлый лист r24 сверху).
   Страница задаёт --page-gutter = боковой отступ своего контейнера,
   чтобы полоса вышла на всю ширину экрана.
   ========================================================================== */
.page-mhead {
	display: none;
}

@media (max-width: 768px) {
	.page-mhead {
		display: flex;
		align-items: center;
		gap: 11px;
		margin: 0 calc(-1 * var(--page-gutter, 15px));
		padding: calc(12px + env(safe-area-inset-top)) 20px 38px; /* 14 + 24 под скругление листа */
		background: var(--accent);
		color: var(--white);
	}

	.page-mhead__back {
		display: flex;
		width: 40px;
		height: 40px;
		flex-shrink: 0;
		color: var(--white);
	}

	.page-mhead__back svg {
		width: 40px;
		height: 40px;
	}

	.page-mhead__title {
		font-size: 16px;
		font-weight: 600;
		line-height: 1;
		color: var(--white);
	}

	.page-msheet {
		position: relative;
		margin: -24px calc(-1 * var(--page-gutter, 15px)) 0;
		padding: 20px 20px 0;
		border-radius: 24px 24px 0 0;
		background: var(--light);
	}
}