/* Piknikovich - site-header.css
   Зона шапки и меню: компактный режим десктопной шапки, пилл «Заявки»,
   кнопка «Моя заявка», меню владельца, платный слот мегаменю, однострочная
   мобильная шапка и бургер-меню.

   Грузится ПОСЛЕ layout.css и mega-menu.css: базовые правила шапки остаются
   в них, здесь только то, чего в теме не было, и точечные поправки под эталон.
   Футер и контент страниц этот файл не трогает. */

/* ================================================================
   Янтарная точка «есть новое» (motion.css эталона).
   Единственная циклическая анимация системы, кроме шиммера скелетонов.
   ================================================================ */
@keyframes pkNewPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.5); opacity: 0.45; }
}
.pk-front .pk-new-dot {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pk-star);
	box-shadow: 0 0 0 2px #fff;
	animation: pkNewPulse 2s var(--ease-std) infinite;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.pk-front .pk-new-dot { animation: none; }
}

/* ================================================================
   Десктопная шапка: компактный режим
   Слоган под логотипом уходит, кегли и отступы садятся, когда контейнер
   становится уже 1400px - иначе четыре пункта меню, пилл и три кнопки
   не встают в одну строку.
   ================================================================ */
.pk-front .pk-header__inner { height: var(--header-height); }

@media (max-width: 1400px) {
	.pk-front .pk-header__inner { gap: 14px; padding: 0 16px; }
	.pk-front .pk-logo img { height: 46px; }
	.pk-front .pk-logo__title { font-size: 20px; }
	.pk-front .pk-logo__sub { display: none; }
	.pk-front .pk-city { margin-left: 4px; }
	.pk-front .pk-nav { gap: 15px; margin: 0 14px 0 auto; }
	.pk-front .pk-nav__link { font-size: 15px; }
	.pk-front .pk-header__right { gap: 8px; }
	.pk-front .pk-header__right .pk-btn { font-size: 15px; padding: 12px 15px; }
}

/* ================================================================
   Пилл «Заявки»
   Мягкая зелёная заливка, высота 40px - ниже кнопок справа (46-48),
   чтобы средний приоритет читался геометрией, а не цветом.
   ================================================================ */
.pk-front .pk-requests-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 17px;
	box-sizing: border-box;
	border-radius: var(--pk-radius-pill);
	background: var(--pk-green-soft);
	color: var(--pk-green-dark);
	font-size: var(--fs-nav);
	font-weight: var(--fw-semibold);
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background var(--dur-base), transform var(--dur-base) var(--ease-entrance);
}
.pk-front .pk-requests-pill svg { transition: transform var(--dur-mid) var(--ease-entrance); }
.pk-front .pk-requests-pill:hover { background: #dfece3; transform: translateY(-1px); }
.pk-front .pk-requests-pill:hover svg { transform: translate(2px, -2px); }
/* Посещённая ссылка не меняет цвет пилла (страховка от глобальных
   :visited-правил - грабли «тёмного текста Заявок»). */
.pk-front .pk-requests-pill:visited { color: var(--pk-green-dark); }
/* На своей странице пилл активен: плотная заливка и белый текст - тот же
   приём, что у активного пункта сайдбара кабинета. */
.pk-front .pk-requests-pill.is-active,
.pk-front .pk-requests-pill.is-active:hover,
.pk-front .pk-requests-pill.is-active:visited {
	background: var(--pk-green-dark);
	color: #fff;
}
.pk-front .pk-requests-pill .pk-new-dot { top: 2px; right: 4px; }
.pk-front .pk-requests-pill.is-active .pk-new-dot { box-shadow: 0 0 0 2px var(--pk-green-dark); }

/* Кнопка «Моя заявка» снесена вместе со своим скриптом (решение владельца
   2026-09-02): раздел заявок будет переписан заново, шапке хвосты старой
   механики не нужны. */

/* ================================================================
   Меню вошедшего владельца: иконки, счётчик, уголок-стрелка
   Базовые правила .pk-usermenu* живут в layout.css.
   ================================================================ */
.pk-front .pk-usermenu__btn { position: relative; }
.pk-front .pk-usermenu__dot { top: 0; left: 30px; width: 9px; height: 9px; }
.pk-front .pk-usermenu__panel::before {
	content: "";
	position: absolute;
	top: -7px;
	right: 18px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-left: 1px solid var(--pk-border);
	border-top: 1px solid var(--pk-border);
	transform: rotate(45deg);
}
.pk-front .pk-usermenu__panel a { gap: 10px; }
.pk-front .pk-usermenu__panel a svg { flex: none; color: var(--pk-green); }
.pk-front .pk-usermenu__panel a span { flex: 1; min-width: 0; }
.pk-front .pk-usermenu__panel a.is-muted svg { color: var(--pk-muted); }
.pk-front .pk-usermenu__count {
	flex: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 7px;
	border-radius: var(--pk-radius-pill);
	background: var(--pk-amber-bg);
	border: 1px solid var(--pk-amber-border);
	color: var(--pk-amber-text);
	font-size: var(--fs-ui-xs);
	font-weight: var(--fw-bold);
}

/* ================================================================
   Мегаменю: платный слот города
   Сигнал несёт кремово-янтарная подложка ВОКРУГ карточки, а не рамка
   на ней: фото внутри сохраняет полный контраст, высоты в сетке
   не расходятся (внешний слой -6px margin / +6px padding).
   ================================================================ */
.pk-front .pk-mm-slot {
	position: relative;
	display: block;
	margin: -6px;
	padding: 6px;
	border-radius: 16px;
	background: var(--pk-amber-bg);
}
.pk-front .pk-mm-slot__badge {
	position: absolute;
	left: 6px;
	top: 6px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 9px;
	border-radius: var(--pk-radius-pill);
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--pk-amber-border);
	color: var(--pk-amber-text);
	font-size: 10.5px;
	line-height: 1;
	font-weight: var(--fw-bold);
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.14);
}
.pk-front .pk-mm-slot__badge svg { color: var(--pk-star); }
.pk-front .pk-mm-slot .pk-mm-card:hover { background: #fff; border-color: var(--pk-amber-border); }

/* Мета мини-карточки: одна строка, лишнее срезается многоточием -
   от неё высота карточки не зависит. */
.pk-front .pk-mm-card__meta {
	display: block;
	margin-top: 4px;
	margin-bottom: auto;
	font-size: var(--fs-ui-xs);
	color: var(--pk-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pk-front .pk-mm-card--skeleton .pk-mm-card__meta { display: block; margin-top: 6px; }
.pk-front .pk-mm-card__sk-line--w60 { width: 60%; height: 9px; }

/* ================================================================
   Мобильная шапка
   Одна строка: логотип, избранное, бургер. Показывается на том же
   брейкпоинте, на котором тема прячет десктопную навигацию (1200px).
   ================================================================ */
.pk-front .pk-mhead { display: none; }

@media (max-width: 1200px) {
	/* Высота мобильной шапки нужна контенту главной: hero лежит под шапкой
	   и отступает от неё сверху (home-sections.css, .pk-hhero__inner). */
	:root { --pk-mhead-h: 60px; }
	.pk-front .pk-header__inner { display: none; }
	.pk-front .pk-mhead {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 60px;
		padding: 8px 12px 8px 14px;
		max-width: var(--pk-container);
		margin: 0 auto;
	}
	.pk-front .pk-mhead__logo {
		display: flex;
		align-items: center;
		gap: 9px;
		flex: 1;
		min-width: 0;
		text-decoration: none;
	}
	.pk-front .pk-mhead__logo img { height: 40px; width: auto; flex: none; }
	.pk-front .pk-mhead__logo span {
		font-size: 18px;
		font-weight: var(--fw-black);
		color: var(--pk-main);
		letter-spacing: -0.02em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.pk-front .pk-mhead .pk-icon-btn { flex: none; width: var(--tap-min); height: var(--tap-min); }
	.pk-front .pk-mhead__burger-wrap { position: relative; display: inline-flex; flex: none; }
	.pk-front .pk-mhead__dot { top: 8px; right: 8px; width: 8px; height: 8px; }
}

/* ================================================================
   Бургер-меню: полноэкранное окно с прокруткой
   Все окна лежат в DOM; скрываются атрибутом hidden (base.css делает
   из него display:none) - ссылки остаются в ответе сервера.
   ================================================================ */
.pk-front .pk-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
}
.admin-bar.pk-front .pk-drawer { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar.pk-front .pk-drawer { top: 46px; }
}
.pk-front .pk-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(29, 37, 48, 0.45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.pk-front .pk-drawer__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: var(--e4);
}
.pk-front .pk-drawer__bar {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 60px;
	padding: 8px 12px 8px 14px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--pk-border);
}
.pk-front .pk-drawer__logo { height: 40px; width: auto; flex: none; }
.pk-front .pk-drawer__title {
	flex: 1;
	min-width: 0;
	font-size: var(--fs-lead);
	font-weight: var(--fw-black);
	letter-spacing: -0.015em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pk-front .pk-drawer__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--tap-min);
	padding: 0 8px 0 4px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--fs-lead);
	font-weight: var(--fw-bold);
	color: var(--pk-text);
	cursor: pointer;
}
.pk-front .pk-drawer__back svg { color: var(--pk-green); }
/* На втором уровне вместо логотипа - «Назад», заголовок уезжает вправо. */
.pk-front .pk-drawer.is-level .pk-drawer__logo { display: none; }
.pk-front .pk-drawer.is-level .pk-drawer__title { flex: none; margin-left: auto; }
.pk-front .pk-drawer__close { flex: none; }

.pk-front .pk-drawer__scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 16px 16px 24px;
}
.pk-front .pk-drawer__level { display: flex; flex-direction: column; gap: 8px; min-height: 100%; }

/* ---- Кнопки входа и подачи ---- */
.pk-front .pk-drawer__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.pk-front .pk-drawer__cta .pk-btn { width: 100%; min-height: var(--tap-min); }
.pk-front .pk-drawer__wide { width: 100%; min-height: var(--tap-min); gap: 8px; }

/* ---- Карточка профиля владельца ---- */
.pk-front .pk-drawer__profile {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 72px;
	padding: 12px 14px;
	box-sizing: border-box;
	text-align: left;
	border: 0;
	border-radius: var(--pk-radius);
	background: var(--pk-cream);
	color: var(--pk-text);
	font-family: inherit;
	cursor: pointer;
}
.pk-front .pk-drawer__avatar {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--pk-green-dark);
	color: #fff;
	font-size: 19px;
	font-weight: var(--fw-black);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pk-front .pk-drawer__profile-body { flex: 1; min-width: 0; }
.pk-front .pk-drawer__profile-body strong {
	display: block;
	font-size: var(--fs-lead);
	font-weight: var(--fw-bold);
	letter-spacing: -0.015em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pk-front .pk-drawer__profile-body span {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-ui-xs);
	color: var(--pk-muted);
}

/* ---- Выбор города: триггер единого окна ----
   Аккордеон со своим списком хабов снят 2026-09-04 (перенос transfer-16):
   выбор города в меню открывает то же окно, что кнопка «Все города» на
   главной и выбор города в десктопной шапке. Строка осталась той же
   геометрии, чтобы меню не поехало. */
.pk-front .pk-drawer__city {
	flex: none;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-sm);
	background: #fff;
	overflow: hidden;
}
.pk-front .pk-drawer__city-btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--tap-min);
	padding: 0 14px;
	box-sizing: border-box;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	text-align: left;
	cursor: pointer;
}
.pk-front .pk-drawer__city-btn svg { flex: none; color: var(--pk-green); }
.pk-front .pk-drawer__city-value { flex: 1; min-width: 0; }
.pk-front .pk-drawer__city-all {
	flex: none;
	font-size: var(--fs-ui-sm);
	font-weight: var(--fw-medium);
	color: var(--pk-muted);
}
.pk-front .pk-drawer__city-chev { color: var(--pk-muted); }

/* ---- Строки меню ---- */
.pk-front .pk-drawer__caps {
	margin: 24px 2px 2px;
	font-size: var(--fs-meta);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--pk-muted);
}
.pk-front .pk-drawer__group { flex: none; display: flex; flex-direction: column; }

.pk-front .pk-drawer__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	padding: 13px 14px;
	box-sizing: border-box;
	border-radius: var(--pk-radius-sm);
	background: var(--pk-bg-soft);
	color: var(--pk-text);
	font-size: var(--fs-lead);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}
.pk-front .pk-drawer__row.is-accent { background: var(--pk-green-soft); color: var(--pk-green-dark); font-weight: var(--fw-bold); }
.pk-front .pk-drawer__row svg { flex: none; }
.pk-front .pk-drawer__row-label { flex: 1; min-width: 0; }
.pk-front .pk-drawer__chev { color: var(--pk-muted); }
.pk-front .pk-drawer__count { flex: none; font-size: var(--fs-ui-sm); font-weight: var(--fw-bold); color: var(--pk-muted); }
.pk-front .pk-drawer__badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	border-radius: var(--pk-radius-pill);
	background: var(--pk-amber-bg);
	border: 1px solid var(--pk-amber-border);
	color: var(--pk-amber-text);
	font-size: var(--fs-ui-xs);
	font-weight: var(--fw-bold);
}
.pk-front .pk-drawer__row .pk-drawer__dot { top: 12px; right: 12px; box-shadow: 0 0 0 2px var(--pk-green-soft); }

.pk-front .pk-drawer__group--cab .pk-drawer__row { min-height: 48px; padding: 11px 14px; font-size: var(--fs-body); }
.pk-front .pk-drawer__group--cab .pk-drawer__row + .pk-drawer__row { margin-top: 8px; }

/* Строка каталога: круглая миниатюра типа, волосяной разделитель. */
.pk-front .pk-drawer__type {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 60px;
	padding: 8px 10px;
	box-sizing: border-box;
	text-align: left;
	border: 0;
	border-top: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-sm);
	background: transparent;
	color: var(--pk-text);
	font-family: inherit;
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	cursor: pointer;
}
.pk-front .pk-drawer__type:first-child { border-top: 0; }
.pk-front .pk-drawer__type:active { background: var(--pk-bg-soft); }
.pk-front .pk-drawer__type-thumb {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--pk-bg-soft);
}
.pk-front .pk-drawer__type-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Вторичная строка: тише каталога - только текст и волосяная линия. */
.pk-front .pk-drawer__quiet {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 0 10px;
	box-sizing: border-box;
	border-top: 1px solid var(--pk-border);
	background: none;
	color: var(--pk-ink-soft);
	font-size: var(--fs-body);
	text-decoration: none;
}
.pk-front .pk-drawer__quiet:first-child { border-top: 0; }
.pk-front .pk-drawer__quiet.is-muted { color: var(--pk-muted); }
.pk-front .pk-drawer__quiet svg { flex: none; }
.pk-front .pk-drawer__foot { margin-top: auto; padding-top: 16px; }

/* ---- Горизонтальная лента карточек ---- */
.pk-front .pk-mstrip { flex: none; margin: 16px 0 4px; }
.pk-front .pk-mstrip__head {
	margin: 0 2px 8px;
	font-size: var(--fs-meta);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--pk-muted);
}
.pk-front .pk-mstrip__track {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	touch-action: pan-x;
	overscroll-behavior-x: contain;
	margin: 0 -16px;
	padding: 2px 16px 10px;
	scrollbar-width: none;
}
.pk-front .pk-mstrip__track::-webkit-scrollbar { display: none; }
.pk-front .pk-mstrip__item { flex: none; display: block; scroll-snap-align: start; }
.pk-front .pk-mm-slot--strip { margin: 0; }
.pk-front .pk-mstrip__card {
	display: flex;
	flex-direction: column;
	width: 200px;
	background: #fff;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius);
	overflow: hidden;
	color: var(--pk-text);
	text-decoration: none;
}
.pk-front .pk-mstrip__media { display: block; flex: none; height: 125px; background: var(--pk-bg-soft); overflow: hidden; }
.pk-front .pk-mstrip__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-front .pk-mstrip__body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.pk-front .pk-mstrip__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.pk-front .pk-mstrip__meta {
	font-size: var(--fs-ui-xs);
	color: var(--pk-muted);
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pk-front .pk-mstrip__price { font-size: var(--fs-body); font-weight: var(--fw-black); letter-spacing: -0.015em; }

/* Прокрутка фона под открытым меню блокируется. */
.pk-front.pk-drawer-open { overflow: hidden; }

/* Меню - мобильный контрол: на десктопе его нет вовсе. */
@media (min-width: 1201px) {
	.pk-front .pk-drawer { display: none !important; }
}

/* ================================================================
   Гость в шапке (окно transfer-24)

   Меню вошедшего ЗАЯВИТЕЛЯ - свой блок, а не режим меню владельца: у них
   разные аудитории и разные пункты. Геометрия та же, отличается акцент -
   янтарный, это суб-бренд раздела «Заявки на отдых».

   Тарифа, цен и бейджа тарифа здесь нет ни в одном состоянии.
   ================================================================ */
.pk-front .pk-guestmenu .pk-usermenu__initials {
	background: var(--pk-amber-bg);
	border: 1px solid var(--pk-amber-border);
	color: var(--pk-amber-text);
}
.pk-front .pk-guestmenu .pk-usermenu__panel a svg { color: var(--pk-amber-text); }
.pk-front .pk-guestmenu .pk-usermenu__panel a.is-muted svg { color: var(--pk-muted); }
.pk-front .pk-guestmenu .pk-usermenu__owner svg { color: var(--pk-green) !important; }
.pk-front .pk-usermenu__mail {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-ui-xs);
	color: var(--pk-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Кнопка «Моя заявка». Живёт ровно для состояния «заявка подана, почта не
 * подтверждена»: аккаунта в этот момент ещё нет, поэтому ведёт на публичный
 * экран подтверждения, а не в кабинет. Стоит на месте «Добавить объект».
 *
 * Своей заливки у неё НЕТ: это обычная ghost-кнопка шапки той же геометрии,
 * что «Добавить объект» (SiteHeader.jsx: «остаётся ghost-белой: шапка не
 * спорит с янтарным акцентом раздела»). Прежний янтарный фон с жирным
 * текстом и постоянной точкой из кита не следовал.
 */
.pk-front a.pk-myreq-pill { position: relative; gap: 8px; }
.pk-front a.pk-myreq-pill svg { flex: none; }

/* ---- Блок гостя в мобильной шторке ---- */
.pk-front .pk-drawer__guest {
	display: grid;
	gap: 2px;
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--pk-border);
}
.pk-front .pk-drawer__guest-head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 72px;
	padding: 12px 14px;
	box-sizing: border-box;
	border-radius: var(--pk-radius);
	background: var(--pk-amber-bg);
}
.pk-front .pk-drawer__avatar--amber {
	background: #fff;
	border: 1px solid var(--pk-amber-border);
	color: var(--pk-amber-text);
}
.pk-front .pk-drawer__guest-head .pk-drawer__profile-body strong { color: var(--pk-text); }
.pk-front .pk-drawer__guest-head .pk-drawer__profile-body span { color: var(--pk-amber-text); }