/* Страница /price — прайс на рекламу с выбором услуг и заявкой.
   Подключается только на этой странице (libs/_add.php). */

/* .wrapper темы имеет overflow:hidden — при нём sticky в правой колонке не липнет
   (браузер считает .wrapper границей прокрутки). На этой странице ничего за края
   не вылезает, поэтому здесь — и только здесь — возвращаем overflow: visible.
   overflow: clip не подходит: sticky с ним ведёт себя так же, как с hidden. */
.page-price .wrapper { overflow: visible; }

.price-page { font-variant-numeric: normal; }
.price-page .num { font-variant-numeric: tabular-nums; }
.price-page *,
.price-sheet *,
.price-bar * { box-sizing: border-box; }

/* align-items оставляем stretch: колонка с калькулятором должна быть высотой
   со всю сетку, иначе sticky внутри некуда «липнуть» — он сразу упирается в низ. */
.price-layout { display: grid; gap: 24px; grid-template-columns: 1fr; padding-bottom: 110px; }
@media (min-width: 1000px) {
	.price-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; padding-bottom: 40px; }
	.price-side { height: 100%; }
}

/* ── Шапка ─────────────────────────────────────────────────────────── */
.price-hero {
	color: #fff; border-radius: 20px; padding: 32px 24px; position: relative; overflow: hidden; margin-bottom: 36px;
	background:
		radial-gradient(115% 130% at 82% -20%, rgba(101, 214, 220, .42), rgba(101, 214, 220, 0) 58%),
		linear-gradient(142deg, #0A2E33 0%, #0D4B52 46%, #0A6D75 78%, #00A7B0 130%);
}
@media (min-width: 700px) { .price-hero { padding: 48px 44px; } }
.price-hero__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7FE3E8; margin: 0 0 14px; }
/* без max-width: заголовок встаёт в одну строку, когда места хватает,
   и переносится сам, когда нет (мобилка) */
.price-hero__title { font-size: 27px; font-weight: 700; line-height: 1.06; letter-spacing: -.03em; margin: 0 0 16px; color: #fff; }
@media (min-width: 700px) { .price-hero__title { font-size: 44px; } }
.price-hero__lead { font-size: 16px; line-height: 1.6; color: #C2D5D7; margin: 0; max-width: 48ch; }
.price-hero__lead_long { max-width: none; }

/* ── Секции ────────────────────────────────────────────────────────── */
.price-sec { margin-top: 40px; }
.price-sec__title { font-size: 24px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 14px; padding-top: 14px; position: relative; color: #000; }
.price-sec__title::before { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 4px; border-radius: 2px; background: #00A7B0; }

/* ── Строка-услуга ─────────────────────────────────────────────────── */
.price-rows { background: #fff; border-radius: 16px; padding: 6px 10px; }
@media (min-width: 700px) { .price-rows { padding: 8px 14px; } }

.price-item {
	width: 100%; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 18px; border-radius: 14px;
	transition: background .16s ease;
}
.price-item + .price-item { box-shadow: inset 0 1px 0 #EDEFEF; }
@media (hover: hover) { .price-item:hover { background: #F4F7F7; } }
.price-item:focus-visible { outline: 2px solid #00A7B0; outline-offset: 2px; }
.price-item__box { width: 24px; height: 24px; border-radius: 8px; border: 2px solid #C6CCCD; background: #fff; flex: none; display: flex; align-items: center; justify-content: center; transition: border-color .16s ease, background .16s ease; }
.price-item__box svg { width: 13px; height: 10px; opacity: 0; transition: opacity .16s ease; }
.price-item__text { flex: 1 1 220px; min-width: 0; }
.price-item__name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.price-item__meta { display: block; font-size: 13px; font-weight: 400; color: #7C8286; margin-top: 5px; line-height: 1.45; }
.price-item__price { font-size: 21px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; margin-left: auto; }
.price-item[aria-pressed="true"] { background: #E7F6F7; box-shadow: inset 3px 0 0 #00A7B0; }
.price-item[aria-pressed="true"] .price-item__box { background: #00A7B0; border-color: #00A7B0; }
.price-item[aria-pressed="true"] .price-item__box svg { opacity: 1; }
.price-item[aria-pressed="true"] .price-item__price { color: #00787E; }
.price-item__tag { display: inline-block; margin-left: 9px; vertical-align: 2px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: #00A7B0; border-radius: 20px; padding: 3px 9px; }

/* ── Карточки ──────────────────────────────────────────────────────── */
.price-cards { display: grid; gap: 12px; margin-top: 4px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) {
	.price-cards_4 { grid-template-columns: repeat(4, 1fr); }
	.price-cards_3 { grid-template-columns: repeat(3, 1fr); }
}
.price-cards + .price-cards { margin-top: 12px; }
@media (max-width: 619px) { .price-cards_3 .price-card_accent { grid-column: 1 / -1; } }
.price-card {
	position: relative; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
	background: #fff; border-radius: 16px; padding: 16px; min-height: 120px;
	display: flex; flex-direction: column; gap: 10px; border: 2px solid transparent;
	transition: border-color .16s ease;
}
@media (hover: hover) { .price-card:hover { border-color: #CFE9EB; } }
.price-card:focus-visible { outline: 2px solid #00A7B0; outline-offset: 2px; }
.price-card__mark { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.price-card__mark svg { display: block; width: 18px; height: 18px; }
.price-card__mark svg path { fill: #fff; }
.price-card__mark_vk { background: #0077FF; }
.price-card__mark_vk svg { width: 20px; height: 13px; }
.price-card__mark_max { background: linear-gradient(135deg, #471AFF, #9500FF); }
.price-card__mark_ok { background: #FF7700; }
.price-card__mark_ok svg { width: 11px; height: 17px; }
.price-card__mark_dzen { background: #1B1D20; }
.price-card__mark_clock { background: #1B1D20; }
.price-card__mark_clock svg { width: 17px; height: 17px; }
.price-card__mark_pack { background: #00A7B0; font-size: 14px; font-weight: 700; color: #fff; }
.price-card__name { font-size: 14px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; padding-right: 26px; }
.price-card__price { margin-top: auto; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.price-card__box { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #C6CCCD; background: #fff; display: flex; align-items: center; justify-content: center; }
.price-card__box svg { width: 12px; height: 9px; opacity: 0; }
.price-card[aria-pressed="true"] { border-color: #00A7B0; }
.price-card[aria-pressed="true"] .price-card__box { background: #00A7B0; border-color: #00A7B0; }
.price-card[aria-pressed="true"] .price-card__box svg { opacity: 1; }
.price-card[aria-pressed="true"] .price-card__price { color: #00787E; }

/* ── Калькулятор ───────────────────────────────────────────────────── */
.price-calc { background: #fff; border-radius: 18px; padding: 22px; }
/* Шапка сайта — fixed, 97px: sticky-колонка должна вставать под неё, а не под неё «залезать».
   Отсюда top = 97 + 16 отступа, и та же поправка в max-height. */
@media (min-width: 1000px) {
	.price-side .price-calc { position: sticky; top: 113px; max-height: calc(100vh - 133px); overflow-y: auto; }
}
.price-calc__title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.price-calc__hint { font-size: 13px; color: #7C8286; margin: 0 0 16px; line-height: 1.45; }
.price-calc__list { list-style: none; margin: 0 0 14px; padding: 0; }
.price-calc__row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; font-size: 14px; line-height: 1.35; margin: 0; }
.price-calc__row + .price-calc__row { border-top: 1px solid #EFEFEF; }
.price-calc__row-name { flex: 1; font-weight: 500; }
.price-calc__row-price { font-weight: 700; white-space: nowrap; }
.price-calc__del { border: 0; background: transparent; color: #A9B0B2; cursor: pointer; font-size: 17px; line-height: 1; padding: 2px 3px; border-radius: 6px; }
@media (hover: hover) { .price-calc__del:hover { color: #D04248; } }
.price-calc__del:focus-visible { outline: 2px solid #00A7B0; outline-offset: 1px; }
.price-calc__empty { font-size: 13.5px; color: #8A9092; background: #F7F8F8; border-radius: 12px; padding: 14px; line-height: 1.5; margin-bottom: 14px; }
.price-calc__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 16px; border-top: 2px solid #111; }
.price-calc__total span { font-size: 14px; font-weight: 600; }
.price-calc__total b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

.price-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.price-field label { font-size: 12.5px; font-weight: 600; color: #5F6668; }
.price-field input,
.price-field textarea {
	font: inherit; font-size: 15px; color: #000; background: #F5F7F7; border: 1.5px solid #E2E7E7; border-radius: 11px;
	padding: 11px 13px; width: 100%; transition: border-color .16s ease, background .16s ease;
}
.price-field textarea { min-height: 72px; resize: vertical; line-height: 1.45; }
.price-field input:focus,
.price-field textarea:focus { outline: 0; border-color: #00A7B0; background: #fff; }
.price-field input[aria-invalid="true"] { border-color: #D04248; background: #FDF5F5; }
.price-field__err { font-size: 12px; color: #D04248; display: none; }
.price-field__err.is-on { display: block; }
.price-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.price-btn { width: 100%; font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: #00A7B0; border: 0; border-radius: 26px; padding: 15px 20px; cursor: pointer; transition: background .16s ease; }
@media (hover: hover) { .price-btn:hover { background: #000; } }
.price-btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.price-btn[disabled] { background: #B9C1C2; cursor: default; }
.price-form__err { font-size: 13px; color: #D04248; line-height: 1.45; margin: 10px 0 0; }
.price-legal { font-size: 11.5px; color: #8A9092; line-height: 1.45; margin: 11px 0 0; }
.price-legal a { color: #00787E; }
.price-calc__ok { text-align: center; padding: 12px 6px; }
.price-calc__ok-mark { width: 52px; height: 52px; border-radius: 50%; background: #E7F6F7; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.price-calc__ok-mark svg { width: 22px; height: 16px; }
.price-calc__ok h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.price-calc__ok p { font-size: 13.5px; color: #7C8286; line-height: 1.5; margin: 0; }

/* ── Мобильная панель и шторка ─────────────────────────────────────── */
.price-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .13);
	padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
	display: flex; align-items: center; gap: 14px;
	transition: bottom .2s ease;
}
@media (min-width: 1000px) { .price-bar { display: none; } }
.price-bar__sum { flex: 1; min-width: 0; cursor: pointer; background: transparent; border: 0; font: inherit; text-align: left; padding: 2px 0; color: inherit; }
.price-bar__sum:focus-visible { outline: 2px solid #00A7B0; outline-offset: 3px; border-radius: 6px; }
.price-bar__count { display: block; font-size: 12.5px; color: #7C8286; }
.price-bar__total { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.price-bar__btn { width: auto; padding: 13px 22px; flex: none; }

.price-sheet { position: fixed; inset: 0; z-index: 10050; }
.price-sheet[hidden] { display: none; }
.price-sheet__veil { position: absolute; inset: 0; background: rgba(10, 20, 22, .5); }
.price-sheet__panel {
	position: absolute; left: 0; right: 0; bottom: 0; background: #F2F2F2; border-radius: 20px 20px 0 0;
	max-height: 88vh; overflow-y: auto; padding: 8px 14px; padding-bottom: calc(20px + env(safe-area-inset-bottom));
	animation: price-sheet-up .22s ease;
}
@keyframes price-sheet-up { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }
.price-sheet__grip { display: block; width: 42px; height: 4px; border-radius: 2px; background: #C9CFD0; margin: 8px auto 14px; }
.price-sheet__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #E5E9E9; color: #4A5254; font-size: 17px; line-height: 1; cursor: pointer; }
.price-sheet__close:focus-visible { outline: 2px solid #00A7B0; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.price-sheet__panel { animation: none; }
	.price-item, .price-card, .price-btn, .price-field input, .price-field textarea { transition: none; }
}