/* Оформление страниц-писем и прогревочных материалов.
   Один файл на два места: страницы /balakovo/, /okup/ … (page-mail.php)
   и персональные ссылки прогрева /pdf/{token}/ (page-preview.php),
   плюс предпросмотр в студии. Стили самого письма приходят отдельно —
   их отдаёт nd_mail_build() уже в scope .nd-mail-content. */
/* Шапка/футер темы — обычные, полной ширины. Содержание письма — колонкой
   по центру. Стили писем ниже scope-нуты префиксом .nd-mail-content — иначе
   их .container{width:600px} стянул бы шапку/футер. */
.nd-mail-section {
	padding: 32px 0 56px;
	background: var(--bg, #F7F4EE);
}
.nd-mail-content {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 20px;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}
/* Видео — обёртка держит ширину/aspect, video растягивается по обёртке.
   До loadedmetadata aspect-ratio 9/16 (fallback для portrait — самый частый
   формат в письмах); JS ниже подменит на реальный сразу после metadata. */
.nd-mail-content .nd-mail-video {
	width: 100%;
	max-width: 400px;
	margin: 30px auto 0;
	aspect-ratio: 9 / 16;
	border-radius: 14px;
	overflow: hidden;
	background: transparent;
	display: block;
	position: relative;
}
/* Большая круглая play-кнопка поверх видео. Скрывается при первом play
   (класс .is-playing на обёртке). */
.nd-mail-content .nd-mail-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	border: 0;
	background: var(--accent, #C8A063);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 6px rgba(255, 255, 255, .15);
	transition: transform .2s ease, background .2s ease;
	z-index: 2;
	padding: 0;
}
.nd-mail-content .nd-mail-play:hover  { transform: scale(1.06); background: #b78d52; }
.nd-mail-content .nd-mail-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.nd-mail-content .nd-mail-play svg    { width: 36px; height: 36px; margin-left: 5px; }
.nd-mail-content .nd-mail-video.is-playing .nd-mail-play { display: none; }
@media (max-width: 480px) {
	.nd-mail-content .nd-mail-play    { width: 72px; height: 72px; }
	.nd-mail-content .nd-mail-play svg { width: 30px; height: 30px; margin-left: 4px; }
}
.nd-mail-content .nd-mail-video video {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	display: block;
	background: transparent;
	object-fit: contain;
}
/* Reset глобальных классов темы, случайно совпавших с классами письма.
   У темы `.video-wrap` = чёрный бокс 16/10 (см. style.css) — если письмо
   использует тот же класс на <td>, ландшафтный бокс с чёрным фоном душит
   портретное видео внутри. Возвращаем нейтральный td. То же для `.button`
   если она где-то осталась (мы кнопки удаляем, но на всякий). */
.nd-mail-content .video-wrap {
	aspect-ratio: auto !important;
	background: transparent !important;
	border-radius: 0 !important;
	overflow: visible !important;
	box-shadow: none !important;
	cursor: default !important;
	position: static !important;
}
.nd-mail-content .video-wrap::after { content: none !important; display: none !important; }
.nd-mail-content .video-wrap img   { width: auto; height: auto; object-fit: initial; transition: none; }
/* Оригинальный шаблон использует таблицы для вёрстки — обнуляем border. */
.nd-mail-content table { border-collapse: collapse; border-spacing: 0; margin: 0 auto; }
.nd-mail-content img   { display: block; border: 0; outline: 0; height: auto; max-width: 100%; margin: 0 auto; }
.nd-mail-content a     { text-decoration: none; color: inherit; }
/* Оригинальный .wrapper из письма — серый фон, теперь мешает: наш .nd-mail-section
   и так задаёт фон темы. Обнуляем; фон .container (белый) тоже гасим — читаем
   на фоне бежевого var(--bg). */
.nd-mail-content .wrapper   { background: transparent !important; }
.nd-mail-content .container { background: transparent !important; }

/* Inline лид-форма внутри письма (плейсхолдер NDLEADFORM в HTML). Обычные
   стили формы (.form-input/.btn/.form-checkbox) — из темы, здесь только
   контейнер: белая карточка с золотой рамкой + типографика на общесайтовом
   шрифте (Geologica) — иначе кнопка наследовала бы Arial от .nd-mail-content
   и визуально «выпадала» из остального сайта. */
.nd-mail-content .nd-mail-leadform-box {
	background: #fff;
	border: 1px solid rgba(200, 160, 99, .45);
	border-radius: 14px;
	padding: 22px 24px 20px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
	font-family: 'Geologica', -apple-system, sans-serif;
	text-align: center;
}
.nd-mail-content .nd-mail-leadform-title {
	margin: 0 0 8px;
	font-family: 'Oswald', sans-serif;
	font-size: 22px;
	line-height: 1.2;
	color: var(--text, #1a1a1a);
	text-transform: uppercase;
	letter-spacing: .02em;
}
.nd-mail-content .nd-mail-leadform-phone {
	display: inline-block;
	margin: 0 0 12px;
	font-family: 'Oswald', sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	color: var(--gold, #C8A063);
	text-decoration: none;
	letter-spacing: .02em;
}
.nd-mail-content .nd-mail-leadform-phone:hover { color: var(--bordo, #C17F3B); }
.nd-mail-content .nd-mail-leadform-lead {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--muted, #5a5a5a);
}
/* Наследуется на форму и её потомков — все inputs / кнопка / label текст
   идут в Geologica, как на всём сайте. */
.nd-mail-content .nd-mail-leadform {
	font-family: 'Geologica', -apple-system, sans-serif;
	text-align: left;
}
/* Универсальный MAX-стандарт (см. redesign.css строки 1966-2043): форма 600px,
   поля и submit 55×10. IDs у mail-форм динамические (mailLeadForm-{src}),
   поэтому применяем через класс .nd-mail-leadform. Без этого submit-кнопка
   меньшей высоты чем airtg-виджет и они разной ширины. */
.nd-mail-content .nd-mail-leadform {
	max-width: 600px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
.nd-mail-content .nd-mail-leadform .form-input {
	width: 100% !important;
	max-width: 600px !important;
	height: 55px !important;
	border-radius: 10px !important;
	padding: 0 18px !important;
	font-size: 16px !important;
	box-sizing: border-box !important;
}
.nd-mail-content .nd-mail-leadform button[type="submit"] {
	width: 100% !important;
	max-width: 600px !important;
	height: 55px !important;
	border-radius: 10px !important;
	padding: 0 20px !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-transform: none !important;
}
@media (max-width: 600px) {
	.nd-mail-content .nd-mail-leadform button[type="submit"] { font-size: 18px !important; }
}
/* Отступ между submit и Max-виджетом — как в #leadModalForm. Хотя submit тут
   и по 55px, airtg-виджет иногда всё равно садится впритык — на скринах у
   владельца зазора не было. Гарантируем 12px. */
.nd-mail-content .nd-mail-leadform button[type="submit"] + [data-airtg-widget] {
	margin-top: 12px !important;
}
@media (max-width: 480px) {
	.nd-mail-content .nd-mail-leadform-box   { padding: 18px 16px 16px; }
	.nd-mail-content .nd-mail-leadform-title { font-size: 19px; }
	.nd-mail-content .nd-mail-leadform-phone { font-size: 24px; }
}

/* Chat-стиль диалога двух спикеров (см. /orenburg/): круглые аватары,
   белые «пузыри» с брендовой обводкой и tail-треугольником, указывающим
   на аватар — как в Telegram. Тrail сделан парой псевдоэлементов: outer
   (цвет обводки) + inner (fill), inner чуть сдвинут — по контуру видна
   тонкая линия обводки. */
.nd-mail-content .nd-mail-dialog { display: flex; flex-direction: column; gap: 22px; }
.nd-mail-content .nd-mail-msg {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	width: 100%;
}
/* Novak Decor (host) — реплики справа. Аватар в конце (order 2), bubble
   слева от аватара с margin-left:auto для гарантированного прижатия
   к правому краю. Спикеры (guest/guest2) — слева, дефолтный flex-порядок. */
.nd-mail-content .nd-mail-msg--host   { justify-content: flex-end !important; }
.nd-mail-content .nd-mail-msg--host  > .nd-mail-msg-avatar { order: 2; }
.nd-mail-content .nd-mail-msg--host  > .nd-mail-msg-body   { order: 1; margin-left: auto !important; }
.nd-mail-content .nd-mail-msg--guest,
.nd-mail-content .nd-mail-msg--guest2  { justify-content: flex-start; }
.nd-mail-content .nd-mail-msg-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(15,23,42,.15);
	/* Гасим унаследованное `.nd-mail-content img { margin: 0 auto }`. Без этого
	   margin-auto центрирует аватар как flex-item, и вся группа перестаёт
	   прижиматься к правому краю у guest-реплик. */
	margin: 0;
}
/* Hover-зум на аватарках: 4× увеличение с плавностью, тень для отделения
   от фона. transform-origin выбираем так, чтобы увеличенная версия
   «выпадала» внутрь страницы, а не за экран:
     • спикеры слева → origin: 0% (выпадает вправо);
     • Novak Decor справа → origin: 100% (выпадает влево). */
.nd-mail-content .nd-mail-msg .nd-mail-msg-avatar {
	transition: transform .25s ease, box-shadow .25s ease;
}
.nd-mail-content .nd-mail-msg--guest  .nd-mail-msg-avatar,
.nd-mail-content .nd-mail-msg--guest2 .nd-mail-msg-avatar { transform-origin: 0% 50%; }
.nd-mail-content .nd-mail-msg--host   .nd-mail-msg-avatar { transform-origin: 100% 50%; }
/* Зум только там, где есть настоящий hover (мышь). На touch-устройствах
   тап случайно триггерит :hover и увеличение «застревает» — на мобиле не
   нужен. */
@media (hover: hover) and (pointer: fine) {
	.nd-mail-content .nd-mail-msg .nd-mail-msg-avatar:hover {
		transform: scale(4);
		position: relative;
		z-index: 10;
		box-shadow: 0 10px 30px rgba(15,23,42,.35);
		border-width: 1px;
	}
}
.nd-mail-content .nd-mail-msg-body {
	position: relative;
	background: #fff;
	border: 1px solid rgba(193, 127, 59, .5);
	border-radius: 16px;
	padding: 12px 16px 14px;
	/* width: fit-content обязательно, иначе bubble как block-элемент растянется
	   до max-width и justify-content на родителе не сможет прижать группу
	   к краю — нечего сжимать. С fit-content bubble сжимается по контенту. */
	width: fit-content;
	max-width: calc(100% - 72px);
}
.nd-mail-content .nd-mail-msg--guest  .nd-mail-msg-body { border-color: rgba(47, 125, 91, .5); }
.nd-mail-content .nd-mail-msg--guest2 .nd-mail-msg-body { border-color: rgba(74, 109, 181, .5); }
/* Tail хоста (Novak Decor справа — хвост из правой стороны bubble указывает
   на аватар справа). Outer треугольник — цвет обводки; inner меньше и
   смещён на 1 px внутрь, так по контуру виден тонкий кант того же
   полупрозрачного цвета. */
.nd-mail-content .nd-mail-msg--host .nd-mail-msg-body::before,
.nd-mail-content .nd-mail-msg--host .nd-mail-msg-body::after { content: ''; position: absolute; width: 0; height: 0; }
.nd-mail-content .nd-mail-msg--host .nd-mail-msg-body::before {
	right: -9px; top: 14px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 9px solid rgba(193, 127, 59, .5);
}
.nd-mail-content .nd-mail-msg--host .nd-mail-msg-body::after {
	right: -7px; top: 15px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 8px solid #fff;
}
/* Tail гостя (спикер слева — хвост из левой стороны bubble указывает
   на аватар слева). */
.nd-mail-content .nd-mail-msg--guest  .nd-mail-msg-body::before,
.nd-mail-content .nd-mail-msg--guest  .nd-mail-msg-body::after,
.nd-mail-content .nd-mail-msg--guest2 .nd-mail-msg-body::before,
.nd-mail-content .nd-mail-msg--guest2 .nd-mail-msg-body::after { content: ''; position: absolute; width: 0; height: 0; }
.nd-mail-content .nd-mail-msg--guest .nd-mail-msg-body::before {
	left: -9px; top: 14px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 9px solid rgba(47, 125, 91, .5);
}
.nd-mail-content .nd-mail-msg--guest .nd-mail-msg-body::after {
	left: -7px; top: 15px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 8px solid #fff;
}
.nd-mail-content .nd-mail-msg--guest2 .nd-mail-msg-body::before {
	left: -9px; top: 14px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 9px solid rgba(74, 109, 181, .5);
}
.nd-mail-content .nd-mail-msg--guest2 .nd-mail-msg-body::after {
	left: -7px; top: 15px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 8px solid #fff;
}
.nd-mail-content .nd-mail-msg-name {
	font-size: 13px;
	font-weight: 700;
	color: #c17f3b;
	margin-bottom: 4px;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.nd-mail-content .nd-mail-msg--guest  .nd-mail-msg-name { color: #2f7d5b; }
.nd-mail-content .nd-mail-msg--guest2 .nd-mail-msg-name { color: #4a6db5; }
.nd-mail-content .nd-mail-msg-body .text { font-size: 16px; line-height: 1.5; }
@media (max-width: 600px) {
	.nd-mail-content .nd-mail-msg { gap: 10px; }
	.nd-mail-content .nd-mail-msg-avatar { width: 44px; height: 44px; }
	.nd-mail-content .nd-mail-msg-body   { max-width: calc(100% - 58px); padding: 10px 14px 12px; }
	.nd-mail-content .nd-mail-msg-body .text { font-size: 15px; }
	.nd-mail-content .nd-mail-msg--host  .nd-mail-msg-body::before { top: 10px; }
	.nd-mail-content .nd-mail-msg--host  .nd-mail-msg-body::after  { top: 11px; }
	.nd-mail-content .nd-mail-msg--guest .nd-mail-msg-body::before { top: 10px; }
	.nd-mail-content .nd-mail-msg--guest .nd-mail-msg-body::after  { top: 11px; }
}

@media (max-width: 600px) {
	.nd-mail-content { padding: 0 16px; }
}

/* ---------- Каталог комплектов (nd_sirie_oborud.html) ----------
   Письмо свёрстано под почтовые клиенты: карточки товаров — ячейки <td>
   фиксированной ширины, высота картинки задана жёстко. В браузере эта
   раскладка ломалась сразу в трёх местах, поэтому карточки переводятся на
   flex. Селекторы привязаны к `table.cards` — такая таблица есть только в
   этом письме, соседние материалы правила не заденут (класс .card сам по
   себе занят и в других рассылках). */

/* 1. Картинка вылезала на плашку с ценой. У .card-img высота 148px, но тема
      задаёт box-sizing:border-box — в эти 148px попадают ещё и вертикальные
      padding'и, на картинку остаётся 128px. Сама картинка при этом честно
      тянулась до max-height:148px и на 10px наезжала на оранжевую полосу.
      content-box возвращает исходную почтовую логику: 148px — это высота
      области под картинку, padding сверх неё. */
.nd-mail-content table.cards .card-img {
	box-sizing: content-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nd-mail-content table.cards .card-img img { max-height: 100%; width: auto; }
/* На телефоне письмо снимает ограничение высоты (`.card-img{height:auto}` в
   его собственной мобильной медиа-секции) — в один столбец картинка
   растягивалась во всю ширину карточки и занимала пол-экрана, ради одного
   товара приходилось листать. Возвращаем компактную область. */
@media (max-width: 720px) {
	.nd-mail-content table.cards .card-img { height: 190px !important; }
	.nd-mail-content table.cards .card-img img {
		max-height: 100% !important;
		width: auto !important;
		height: auto !important;
	}
}

/* 2. Цены стояли лесенкой. Заголовок карточки в одну строку занимает 42px,
      в две — 59px, и всё, что ниже, съезжало: у соседних карточек одного
      ряда оранжевые полосы оказывались на разной высоте. Карточка становится
      колонкой, цена прижимается к низу — низ выравнивается по всему ряду
      независимо от длины заголовка.
   3. Заодно уходит вторая беда: ширины карточек прыгали от секции к секции
      (три товара — узкие, два — растянутые во всю ширину). Общая основа
      + потолок дают одинаковый размер во всех пяти секциях. */
.nd-mail-content table.cards,
.nd-mail-content table.cards tbody { display: block; }
/* auto-fit + потолок ширины у самой карточки. Пустые колонки схлопываются,
   поэтому три товара занимают всю строку без дыры справа, а секции из одного
   («Мраморная штукатурка») и двух товаров не раздувают карточку на пол-экрана:
   она упирается в max-width и встаёт по центру своей колонки. На узком экране
   колонка остаётся одна, карточки идут друг под другом. */
.nd-mail-content table.cards tr {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	justify-items: center;
	gap: 16px;
}
.nd-mail-content table.cards td.card {
	display: flex;
	flex-direction: column;
	width: 100% !important;
	max-width: 320px;
}
.nd-mail-content table.cards td.card .price { margin-top: auto; }
/* Ячейки-распорки шириной 2% между карточками — вместо них gap. */
.nd-mail-content table.cards td:not(.card) { display: none; }

/* 4. Таблицы «Из чего состоит полный комплект» подбирали ширину колонок по
      содержимому, поэтому в каждой секции границы стояли по-своему и столбцы
      не читались как один список. Фиксируем: количество и цена — постоянной
      ширины, название занимает остаток. */
.nd-mail-content .comp-table { table-layout: fixed; width: 100%; }
.nd-mail-content .comp-table td:nth-child(2) { width: 92px; }
.nd-mail-content .comp-table td:nth-child(3) { width: 140px; }
@media (max-width: 560px) {
	.nd-mail-content .comp-table td:nth-child(2) { width: 62px; }
	.nd-mail-content .comp-table td:nth-child(3) { width: 104px; }
}

/* 5. Плашка секции («Гибкий кирпич», «Гибкая доска» …). В письме она
      прижата к краям конверта и отбита толстой рамкой цвета фона; на
      странице это выглядит как случайный разрыв, поэтому рамку меняем на
      честный отступ и скругляем углы. */
.nd-mail-content .section-head {
	border-top: 0;
	margin: 38px 0 20px;
	padding: 18px 26px 16px;
	border-radius: 14px;
}
.nd-mail-content .section-head:first-child { margin-top: 8px; }
.nd-mail-content .section-head h2 { color: #fff; }
@media (max-width: 560px) {
	.nd-mail-content .section-head { padding: 15px 18px 13px; margin: 28px 0 16px; }
}

/* ---------- Мобильная версия писем ----------
   Письма свёрстаны таблицами фиксированной ширины (стандарт рассылок:
   .container 600px, у ячеек жёсткие width). На телефоне такая таблица не
   сжимается и распирает страницу — контент уезжал за правый край, а вместе с
   ним «ехала» и шапка портала.

   Здесь письмо переводится в резиновую вёрстку: таблицы и ячейки во всю
   доступную ширину, картинки не шире экрана, боковые поля уменьшены. Правила
   намеренно с !important — они перебивают инлайновые width из самого письма,
   которые иначе не побороть. */
@media (max-width: 720px) {
	.nd-mail-content,
	.nd-mail-content table,
	.nd-mail-content .container {
		width: 100% !important;
		max-width: 100% !important;
	}
	.nd-mail-content table { table-layout: auto !important; }
	.nd-mail-content td,
	.nd-mail-content th {
		width: auto !important;
		max-width: 100% !important;
		word-break: break-word;
	}
	/* Ячейки с картинкой-иконкой (аватары, значки) не растягиваем. */
	.nd-mail-content td[width="32"],
	.nd-mail-content td[width="75"] { width: auto !important; }
	.nd-mail-content img {
		max-width: 100% !important;
		height: auto !important;
	}
	/* Подстраховка: ни один потомок письма не шире экрана. В рассылках
	   встречаются инлайновые width на произвольных блоках, перечислять их
	   поимённо бессмысленно. */
	.nd-mail-content * { max-width: 100% !important; }
	.nd-mail-content .nd-mail-video { max-width: 100% !important; }
	/* Боковые поля письма на телефоне съедали половину ширины. */
	.nd-mail-content .content { padding-left: 14px !important; padding-right: 14px !important; }
	.nd-mail-content h1 { font-size: 26px !important; line-height: 1.2 !important; }
	.nd-mail-content h2 { font-size: 21px !important; line-height: 1.25 !important; }
	.nd-mail-content .text,
	.nd-mail-content p,
	.nd-mail-content li { font-size: 16px !important; line-height: 1.55 !important; }
}