/* Start:/local/templates/vine/css/referral-page.css?178872733520780*/
/* =========================================================================
   Страница «Реферальная программа» — /about/referral/
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 338:5609 (1280×3881).
   Разбор — wiki/referral-spec.md.

   Из макета взято дословно:
     подложка секций #C4C4C4, радиус 16, padding 16;
     шаг между секциями 16 (даёт общий .vine-section);
     карточки #FFFFFF, радиус 8;
     шкала Roboto 48 / 40 / 34 / 28 Bold / 18 / 16 Bold / 14 Italic / 12.

   ОБЩЕЕ ПРАВИЛО ЗАГОЛОВКОВ ШАБЛОНА ПЕРЕБИВАЕТ МАКЕТНЫЙ КЕГЛЬ (грабля,
   встречалась пятый раз): `.vine-main h2` задаёт 34px, поэтому заголовки
   секций 40px пишутся селектором с .referral и двойным классом.

   Адаптива у экрана нет (решение от 21.08.2026) — правила ниже рассчитаны
   на ширину контента 1248, но собраны на flex/grid, поэтому на узком экране
   складываются, а не ломаются.
   ========================================================================= */

.referral {
	--referral-card-bg: var(--vine-color-card, #C4C4C4);
	--referral-field-h: 32px;
}

/* Заголовок страницы 338:5614 в макете погашен: дизайнер заменил его
   баннером. Для SEO и скринридера H1 оставлен в разметке, но визуально
   скрыт — раскладка при этом совпадает с макетом до пикселя.
   Классом .vine-visually-hidden из общего слоя. */

/* --------------------------------------------------------- СЕКЦИЯ-ПЛИТА */
/* Общая серая плита пяти верхних секций (1873:8406, 1880:8484, 338:5775,
   1893:8846, 1893:9040). Секция FAQ (1894:8559) её НЕ получает — она
   единственная нарисована на белом. */
.referral__plate {
	box-sizing: border-box;
	padding: var(--vine-gap, 16px);
	border-radius: var(--vine-gap, 16px);
	background: var(--referral-card-bg);
}

/* заголовок секции 40px — перебиваем .vine-main h2 (34px) */
.referral .referral__title {
	margin: 0;
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* ------------------------------------------------- 1. ПЕРВЫЙ ЭКРАН 1873:8406 */
/* 1248×302: строка, gap 16, левая колонка 429, иллюстрация 771×270. */
.referral-hero {
	display: flex;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
}

.referral-hero__text {
	display: flex;
	flex: 0 1 429px;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
	min-width: 0;
	max-width: 429px;
}

/* 338:5774 — 48px Regular, две строки */
.referral .referral-hero__title {
	margin: 0;
	font-size: var(--vine-fz-detail, 48px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* 1873:8404 — 18px, две строки; перенос задан макетом, а не шириной */
.referral-hero__lead {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* 1873:8473 — ряд кнопок, зазор в макете 64 (не базовые 16) */
.referral-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
}

/* 1873:8408 — растровая иллюстрация 771×270, экспорт узла */
.referral-hero__pic {
	display: block;
	flex: 0 0 auto;
	width: 771px;
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------ 2. «ПОДХОДИТ КАЖДОМУ» 1880:8484 */
.referral-roles {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

/* ------------------------------------------------------- ПОЛОСА ВКЛАДОК */
/* 1880:8501 и 1893:9109 — один и тот же элемент макета: рамка 1px сверху и
   с боков, верхние углы 8, padding 10, текст 18px; активная вкладка чёрная
   с белым текстом. Полоса стоит впритык к панели, поэтому нижней рамки у
   вкладки нет — её роль играет рамка панели. */
.referral-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.referral-tabs__btn {
	box-sizing: border-box;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--vine-color-text, #000000);
	border-bottom: 0;
	border-radius: var(--vine-radius, 8px) var(--vine-radius, 8px) 0 0;
	background: var(--vine-color-bg, #FFFFFF);
	color: var(--vine-color-text, #000000);
	font-family: var(--vine-font, "Roboto", Arial, sans-serif);
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	white-space: nowrap;
	cursor: pointer;
}

/* соседние вкладки в макете стоят вплотную — общая рамка не задваивается */
.referral-tabs__btn + .referral-tabs__btn {
	border-left: 0;
}

.referral-tabs__btn[aria-selected="true"] {
	background: var(--vine-color-text, #000000);
	color: var(--vine-color-bg, #FFFFFF);
	cursor: default;
}

.referral-tabs__btn:focus-visible {
	outline: 2px solid var(--vine-color-link, #0077FF);
	outline-offset: -4px;
}

/* --------------------------------------------------- ПАНЕЛЬ ВКЛАДКИ РОЛИ */
/* 1880:8500 — 1216×343, рамка 1px со всех сторон, строка gap 16 */
.referral-roles__panel {
	display: flex;
	box-sizing: border-box;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
	border: 1px solid var(--vine-color-text, #000000);
	background: var(--vine-color-bg, #FFFFFF);
}

.referral-roles__panel[hidden] {
	display: none;
}

/* 1880:8485 — колонка 594, padding 8, gap 16 */
.referral-roles__body {
	display: flex;
	flex: 1 1 594px;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
	box-sizing: border-box;
	padding: var(--vine-pad-card, 8px);
	min-width: 0;
}

/* 1880:8487 — 34px Regular */
.referral .referral-roles__heading {
	margin: 0;
	font-size: var(--vine-fz-h2, 34px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* 1880:8532 — один абзац 18px */
.referral-roles__text {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* кнопка «Как начать» 118×40 прижата к левому краю колонки */
.referral-roles__cta {
	align-self: flex-start;
}

/* Панель вкладки без иллюстрации — «Физ. лицо» и «Юр. лицо». Картинка блока
   нарисована про блогера и на этих вкладках была бы не к месту, а без неё
   панель схлопнулась бы по высоте текста: блок прыгал бы при переключении,
   а строка растянулась бы на все 1216. Держим высоту панели макета (343) и
   ширину колонки текста макета (594 + 8+8 padding). */
.referral-roles__panel--stub {
	min-height: 343px;
}

.referral-roles__panel--stub .referral-roles__body {
	flex: 0 1 610px;
}

/* 1880:8491 — иллюстрация 606×343 во всю высоту панели */
.referral-roles__pic {
	display: block;
	flex: 0 0 auto;
	width: 606px;
	max-width: 100%;
	height: auto;
}

/* ------------------------------------- 3. «СКОЛЬКО МЫ ПЛАТИМ» 338:5775 */
/* Плита секции: заголовок 40px и сетка карточек с шагом 8 (у первых двух
   секций страницы шаг 16 — здесь дизайнер поставил меньший). Саму сетку
   и кнопку «Показать ещё» рисует шаблон catalog.section/referral-events. */
.referral-pay {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
}

/* ---------------------------------------- 4. «КАК РАБОТАЕТ ПРОГРАММА» 1893:8846 */
/* Секция с шагом 8 (у первых двух — 16). */
.referral-how {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
}

/* 1893:8848 — три колонки, gap-x 16, gap-y 8 */
.referral-how__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--vine-gap, 16px);
	row-gap: var(--vine-gap-sm, 8px);
}

/* 1893:9031 — контейнер 394.67×50 без заливки, круг по центру */
.referral-how__num {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	height: 50px;
}

/* 1893:9032 — круг 50×50, фон #FFF, радиус 25, цифра 18px */
.referral-how__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background: var(--vine-color-bg, #FFFFFF);
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* 1893:8849 — карточка 394.67×95, padding 16, текст по центру в три строки */
.referral-how__card {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: 95px;
	padding: var(--vine-gap, 16px);
	border-radius: var(--vine-radius, 8px);
	background: var(--vine-color-bg, #FFFFFF);
}

.referral-how__card p {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	text-align: center;
	color: var(--vine-color-text, #000000);
}

/* --------------------------------------- 5. «ПОЧЕМУ ЭТО ВЫГОДНО?» 1893:9040 */
/* Раскладка 1 / 2 / 2 с зеркальными ширинами 805 и 395 — не сетка, а ручной
   ритм: во втором ряду широкая плитка слева, в третьем — справа. */
.referral-why {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
}

.referral-why__rows {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
}

.referral-why__row {
	display: flex;
	gap: var(--vine-gap, 16px);
}

/* 1893:9049 / 9072 / 9077 / 9082 / 9087 — плитка #FFF, радиус 8, padding 16,
   зазор заголовок→текст 16, содержимое по вертикали по центру */
.referral-why__tile {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: center;
	gap: var(--vine-gap, 16px);
	padding: var(--vine-gap, 16px);
	border-radius: var(--vine-radius, 8px);
	background: var(--vine-color-bg, #FFFFFF);
	min-width: 0;
}

/* ширины из макета: 1216 / 805 / 395 при контенте 1216 и зазоре 16 */
.referral-why__tile--full  { flex: 1 1 100%; min-height: 140px; }
.referral-why__tile--wide  { flex: 0 1 805px; min-height: 160px; }
.referral-why__tile--narrow{ flex: 0 1 395px; min-height: 160px; }

/* Roboto Bold 28px — перебиваем .vine-main h3 двойным классом на всякий
   случай: общий слой задаёт h3 те же 28px Bold, но кегль тут макетный. */
.referral .referral-why__tile-title {
	margin: 0;
	font-size: var(--vine-fz-h3, 28px);
	font-weight: 700;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

.referral-why__tile-text {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* ------------------------------- 6. ФОРМА РЕГИСТРАЦИИ ПАРТНЁРА 1893:8937 */
/* Секция без серой подложки: полоса вкладок + панель с рамкой 1px. */
.referral-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* 1893:9133 — панель 1248×549, рамка 1px, padding 16, столбец gap 16 */
.referral-form__panel {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
	padding: var(--vine-gap, 16px);
	border: 1px solid var(--vine-color-text, #000000);
	background: var(--vine-color-bg, #FFFFFF);
}

.referral-form__panel[hidden] {
	display: none;
}

/* 1871:10716 / 1893:9137 — колонка полей шириной 400, gap 16.
   Рамка панели тянется на все 1248, а поля занимают 400 слева —
   так нарисовано в макете, справа сознательная пустота. */
.referral-form__fields {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
	width: 400px;
	max-width: 100%;
}

/* пара «метка + поле»: метка 12px, зазор 4 */
.referral-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.referral-form__label {
	font-size: 12px;
	line-height: 12px;
	color: var(--vine-color-text, #000000);
}

/* поле 400×32: белое, рамка 1px, БЕЗ скругления, padding 8, текст 18px */
.referral-form__input {
	box-sizing: border-box;
	width: 100%;
	height: var(--referral-field-h);
	margin: 0;
	padding: 0 var(--vine-pad-card, 8px);
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 0;
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font, "Roboto", Arial, sans-serif);
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

.referral-form__input::placeholder {
	color: var(--vine-color-card, #C4C4C4);
	opacity: 1;
}

/* Ошибка поля 2017:9931…9940 — 18px, цвет в макете задан словом `red`,
   токена под него нет, поэтому пишем ровно его. */
.referral-form__error {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: red;
}

.referral-form__error[hidden] {
	display: none;
}

/* 1871:10674…10676 — «Выбор» 1216×24, зазор 8; чекбокс 24×24 квадратный,
   белый, рамка 3px чёрная. Собственная галка нужна потому, что системный
   чекбокс рамку 3px не показывает. */
.referral-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--vine-gap-sm, 8px);
	cursor: pointer;
}

.referral-form__checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.referral-form__box {
	position: relative;
	display: block;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 3px solid var(--vine-color-text, #000000);
	background: var(--vine-color-bg, #FFFFFF);
}

/* галка нарисована двумя гранями рамки — вектора у неё в макете нет */
.referral-form__checkbox:checked + .referral-form__box::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 5px;
	width: 6px;
	height: 11px;
	border: solid var(--vine-color-text, #000000);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.referral-form__checkbox:focus-visible + .referral-form__box {
	outline: 2px solid var(--vine-color-link, #0077FF);
	outline-offset: 2px;
}

.referral-form__consent-text {
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

.referral-form__consent-link {
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
}

/* «Пользовательское соглашение» в макете синее, но БЕЗ подчёркивания —
   при двух подчёркнутых соседях. Переносим дословно (вопрос Р13). */
.referral-form__consent-link--plain,
.referral-form__consent-link--plain:hover,
.referral-form__consent-link--plain:focus {
	text-decoration: none;
}

/* 1871:10677 — тёмная кнопка 400×40 */
.referral-form__submit {
	width: 400px;
	max-width: 100%;
	height: 40px;
}

/* Общая ошибка формы (нет в макете: состояний, кроме «все ошибки разом»,
   дизайнер не нарисовал — пробел 8 разбора). */
.referral-form__note {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: red;
}

.referral-form__note[hidden] {
	display: none;
}

/* ------------------------------------------------------- 7. FAQ 1894:8559 */
/* Единственная секция без плиты. Разметка и поведение — общие классы
   шаблона news.list/faq-accordion, его style.css и script.js подключает
   сама страница: контента в инфоблоке ещё нет (вопрос Р5), а вопросы
   в макете есть. */
.referral-faq {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

/* ----------------------------------------- ОКНА РЕГИСТРАЦИИ 338:5941/5954 */
/* Габариты окна задаются модификатором ключа — так устроена оболочка
   contacts-modal (окно строит скрипт, вешать размеры больше не на что). */
.contacts-modal__window.contacts-modal__window--partner {
	box-sizing: border-box;
	gap: 0; /* контент начинается сразу под крестиком: 16 + 32 = y 48 */
	width: 344px;
	max-width: 100%;
	/* базовое окно оболочки — контакты, 1280×986; здесь высота по содержимому */
	min-height: 0;
	padding: var(--vine-gap, 16px);
	background: var(--vine-color-bg, #FFFFFF);
}

.contacts-modal__window--partner .contacts-modal__content {
	gap: 0;
	padding: 0;
}

.partner-modal__step {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.partner-modal__step[hidden] {
	display: none;
}

/* 338:5944 / 1965:9019 — заголовок 34px по центру, в макете в две строки */
.partner-modal__title {
	margin: 0;
	font-size: var(--vine-fz-h2, 34px);
	font-weight: 400;
	line-height: normal;
	text-align: center;
	color: var(--vine-color-text, #000000);
}

/* 338:5945 / 338:5958 — 18px */
.partner-modal__hint {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* 338:5946 — четыре поля 60×32, зазор 24 */
.partner-modal__code {
	display: flex;
	gap: 24px;
}

.partner-modal__code-input {
	box-sizing: border-box;
	width: 60px;
	height: var(--referral-field-h);
	padding: 0 var(--vine-pad-card, 8px);
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 0;
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font, "Roboto", Arial, sans-serif);
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	text-align: center;
	color: var(--vine-color-text, #000000);
}

/* 338:5951 — «Неверный код», 18px red */
.partner-modal__error {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: red;
}

.partner-modal__error[hidden] {
	display: none;
}

/* 1871:10652 — ссылка «Назад», 18px #0077FF подчёркнутая */
.partner-modal__back {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--vine-font, "Roboto", Arial, sans-serif);
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	text-align: left;
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
	cursor: pointer;
}

/* 338:5959 — тёмная кнопка 178×40. Колонка окна в макете выключена по
   центру (338:5956, items-center), а кнопка по ширине не растянута —
   значит стоит она по центру, а не у левого края. */
.partner-modal__next {
	align-self: center;
}

/* Режим стенда: почта отсюда не уходит, поэтому код показывается в окне.
   Строку печатает скрипт только когда сервер прислал debug_code. */
.partner-modal__debug {
	margin: 0;
	font-size: var(--vine-fz-small, 14px);
	line-height: normal;
	color: var(--vine-color-line, #777777);
}

.partner-modal__debug[hidden] {
	display: none;
}

/* End */


/* Start:/local/templates/vine/css/contacts-modal.css?17873146455499*/
/* =========================================================================
   ОБОЛОЧКА МОДАЛКИ «Контакты — Город» (макет 2023:13109).

   Здесь только каркас окна: подложка, само окно 1280x986, кнопка закрытия,
   шапка с ней и служебное скрытие неактивных панелей городов.
   Содержимое (заголовок, вкладки, панель офиса, карта, карусель
   сотрудников) размечает и оформляет шаблон компонента
   news.list/contacts-city — его классы в этом файле не описаны.

   Разметку подложки и окна строит на лету js/contacts-modal.js вокруг
   контейнера [data-contacts-modal], который уже стоит на странице.

   Габариты макета (узел 2023:13109):
     окно            1280 x 986, белое, padding 16, без рамки и скругления;
     кнопка закрытия 2063:17660 — 32x32, рамка 1px #000, радиус 5,
                     иконка 24x24, отступы сверху и справа по 16;
     контент         2023:13111 — 1248 x 912, начинается на y=58,
                     то есть 16 (padding) + 32 (кнопка) + 10 (зазор).

   ВНЕ МАКЕТА: затемнённой подложки в макете нет — сделана
   rgba(0, 0, 0, 0.4), это решение вёрстки, а не значение из Figma.
   ========================================================================= */

/* ------------------------------------------------------------- подложка */

.contacts-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: auto;
	padding: 16px 0;
	background: rgba(0, 0, 0, 0.4);
}

.contacts-modal[hidden] {
	display: none;
}

/* Пока окно открыто, страница под ним не прокручивается.
   Класс вешает скрипт на <html> и <body>. */
.contacts-modal__body-lock {
	overflow: hidden;
}

/* ----------------------------------------------------------------- окно */

.contacts-modal__window {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 1280px;
	max-width: 100%;
	min-height: 986px;
	margin: auto;
	padding: 16px;
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font, "Roboto", "Helvetica Neue", Arial, sans-serif);
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* Шапка 32px: в макете в ней только кнопка закрытия, прижатая вправо. */
.contacts-modal__head {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 32px;
}

.contacts-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: var(--vine-radius-btn, 5px);
	background: var(--vine-color-bg, #FFFFFF);
	cursor: pointer;
}

.contacts-modal__close img {
	display: block;
	width: 24px;
	height: 24px;
}

/* До того как скрипт обернёт контейнер в окно, он не должен мелькать в
   потоке страницы: класс contacts-modal__content ставит на него скрипт. */
[data-contacts-modal]:not(.contacts-modal__content) {
	display: none;
}

/* Контейнер [data-contacts-modal] — фрейм 2023:13111 1248x912.
   Ширину и внутренние отступы задаёт скрипт этим классом, чтобы шаблон
   контента не зависел от того, чем его обернули. */
.contacts-modal__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	padding: 0 16px;
}

/* --------------------------------------------- переключение городов */
/* Активную вкладку и панель отмечает классом is-active скрипт, а рисует их
   style.css шаблона contacts-city. Здесь только скрытие неактивных панелей:
   без него все города показались бы разом. Правило намеренно не назначает
   display активной панели — её раскладку задаёт шаблон. */

[data-city-panel]:not(.is-active) {
	display: none;
}

/* -------------------------------------------------------------- узкий экран */
/* В макете мобильных состояний модалки нет. Ниже 1312px (1280 окна + 2x16
   подложки) окно занимает всю доступную ширину, а жёсткая высота снимается,
   чтобы содержимое не обрезалось. */

@media (max-width: 1311px) {
	.contacts-modal {
		padding: 16px;
	}

	.contacts-modal__window {
		width: 100%;
		min-height: 0;
	}
}

@media (max-width: 640px) {
	.contacts-modal {
		padding: 8px;
	}

	.contacts-modal__window {
		padding: 8px;
	}

	.contacts-modal__content {
		padding: 0;
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/faq-accordion/style.css?17867178372833*/
/* =========================================================================
   Часто задаваемые вопросы — bitrix:news.list / faq-accordion
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 1894:8503 (1248×356).

   Из макета: заголовок 40px; вопрос 18px, цвет #0077FF, подчёркивание
   пунктирное; ответ 18px, цвет #000000; шаг между вопросами 16px,
   от вопроса до ответа 8px; иконок-переключателей нет.
   Пунктир, сброс кнопки и цвет ссылки берём из общего слоя
   (.vine-pseudo-link / .vine-pseudo-link--link в template_styles.css).
   ========================================================================= */

.faq {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

/* двойной класс — перебить .vine-main h2 (34px) из базового слоя */
.faq .faq__title {
	margin: 0;
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

.faq__item {
	margin: 0;
}

/* -------------------------------------------------------------- ВОПРОС */
/* Сброс кнопки и пунктир уже в .vine-pseudo-link; здесь только кегль,
   перенос длинных вопросов и зона клика по всей строке. */
.faq .faq__question {
	display: inline;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	word-break: break-word;
}

/* Вопрос без ответа: цвет и кегль как в макете, но без пунктира и без
   курсора-руки — раскрывать нечего, обещать интерактив нельзя. */
.faq .faq__question--plain {
	display: block;
	margin: 0;
	color: var(--vine-color-link, #0077FF);
	text-decoration: none;
	cursor: auto;
}

/* фокус с клавиатуры виден — в макете состояний фокуса нет,
   поэтому берём системную рамку, а не свой цвет */
.faq .faq__question[data-faq-toggle]:focus-visible {
	outline: 2px solid var(--vine-color-text, #000000);
	outline-offset: 2px;
}

/* -------------------------------------------------------------- ОТВЕТ */
.faq__answer {
	margin: var(--vine-gap-sm, 8px) 0 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.faq__answer p {
	margin: 0 0 var(--vine-gap-sm, 8px);
}

.faq__answer p:last-child {
	margin-bottom: 0;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/system.pagenavigation/vine_more/style.css?1787502081471*/
/*
	Кнопка «Показать ещё» (макет 1279:7435, 143×40).

	Оформление — общая кнопка проекта `.vine-btn` (белая, рамка 1px #000,
	радиус 5, текст 18px). Здесь только габариты из макета: общая кнопка
	тянется по содержимому, а в макете ширина фиксированная.
*/

.vine-more {
	min-width: 143px;
	min-height: 40px;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/catalog.section/referral-events/style.css?17875870813609*/
/* =========================================================================
   Блок «Сколько мы платим» — bitrix:catalog.section / referral-events
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узлы 338:5775, 1892:8650, 1892:8652.

   Из макета: сетка 3 колонки, gap 16 по обеим осям, карточка 394.67 шириной;
   карточка — фон #FFFFFF, радиус 8, padding 8, столбец gap 16;
   строки: тег Roboto Italic 14px, название 34px, две строки по 18px,
   бонус Roboto Bold 16px.

   Высота ряда в макете задана содержимым (338 и 298) — фиксировать её здесь
   нельзя: реальные названия короче и длиннее макетных. Ряд выравнивается
   сеткой сам, карточки в ряду одной высоты (stretch по умолчанию).
   ========================================================================= */

.referral-events {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

.referral-events__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vine-gap, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.referral-events__item {
	display: flex;
	margin: 0;
	min-width: 0;
}

/* --------------------------------------------------------------- КАРТОЧКА */
.referral-card {
	display: flex;
	box-sizing: border-box;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
	padding: var(--vine-pad-card, 8px);
	border-radius: var(--vine-radius, 8px);
	background: var(--vine-color-bg, #FFFFFF);
	min-width: 0;
}

/* тег типа мероприятия «Очный курс» — Roboto Italic 14px, чёрный */
.referral-card__type {
	margin: 0;
	font-size: var(--vine-fz-small, 14px);
	font-style: italic;
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* название 34px Regular — двойной класс перебивает .vine-main h3 (28px Bold) */
.referral-card .referral-card__title {
	margin: 0;
	font-size: var(--vine-fz-h2, 34px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	overflow-wrap: anywhere;
}

/* Ссылки на карточке в макете нет — название набрано обычным текстом.
   Но карточка ведёт на мероприятие, и ссылка тут полезнее мёртвого
   заголовка, поэтому вид ссылки повторяет вид текста: цвет и отсутствие
   подчёркивания — макетные, интерактив добавлен. */
.referral-card__title-link,
.referral-card__title-link:hover,
.referral-card__title-link:focus {
	color: inherit;
	text-decoration: none;
}

.referral-card__title-link:hover {
	text-decoration: underline;
}

.referral-card__line {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* «Бонус: 50 ₽» — Roboto Bold 16px */
.referral-card__bonus {
	margin: 0;
	font-size: var(--vine-fz-price, 16px);
	font-weight: 700;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* --------------------------------------------------------- «ПОКАЗАТЬ ЕЩЁ» */
/* Кнопка 143×40 прижата к левому краю секции (1893:8828). */
.referral-events__pager {
	display: flex;
}

/* End */
/* /local/templates/vine/css/referral-page.css?178872733520780 */
/* /local/templates/vine/css/contacts-modal.css?17873146455499 */
/* /local/templates/vine/components/bitrix/news.list/faq-accordion/style.css?17867178372833 */
/* /local/templates/vine/components/bitrix/system.pagenavigation/vine_more/style.css?1787502081471 */
/* /local/templates/vine/components/bitrix/catalog.section/referral-events/style.css?17875870813609 */