/*
 * Исправления вёрстки для мобильных и планшетов.
 * style.css шаблона не трогаем; подключается после site.css и ДО theme-green.css,
 * поэтому цвета здесь не задаём (или берём из переменных темы), чтобы тема могла их перекрасить.
 * Правила по возможности ограничены media-запросами — десктоп (≥1200px) почти не затрагивается.
 */

/* ===== Баннер на главной: заголовок 70–100px не помещался на телефонах/планшетах ===== */
/* длинное слово переносим, а не обрезаем (контейнер подписи в шаблоне с overflow: hidden) */
.swiper-slider-1 .swiper-slide-caption h1,
.swiper-slider-1 .swiper-slide-caption h2,
.swiper-slider-1 .swiper-slide-caption h5 { overflow-wrap: break-word; }
@media (max-width: 575.98px) {
	.swiper-slider-1 .swiper-slide-caption h1 { padding-top: .12em; font-size: clamp(40px, 13vw, 56px); line-height: 1.1; letter-spacing: .01em; hyphens: auto; }
	.swiper-slider-1 .swiper-slide-caption h2 { font-size: 24px; }
	.swiper-slider-1 .swiper-slide-caption h5 { font-size: 14px; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
	.swiper-slider-1 .swiper-slide-caption h1 { font-size: 62px; hyphens: auto; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.swiper-slider-1 .swiper-slide-caption h1 { font-size: 80px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.swiper-slider-1 .swiper-slide-caption h1 { font-size: 96px; }
}

/* ===== Тарифы: подписи переключателя «месяц/год» (длинные по-русски) прижаты к переключателю ===== */
@media (max-width: 575.98px) {
	.toggle-modern-text { font-size: 13px; line-height: 1.35; }
	.toggle-modern-text_default { text-align: right; }
	.toggle-modern-text_alternate { text-align: left; }
}

/* ===== Модальное окно (заказ тарифа / заявка) ===== */
/* modal-xl в Bootstrap до 992px — всего 500px: на планшете форма заказа сжималась до полей шириной 50px */
@media (min-width: 576px) and (max-width: 991.98px) {
	#popup_id .modal-dialog { max-width: calc(100% - 48px); }
}

/* Заказ: белый градиент шаблона (для горизонтальной прокрутки вкладок) ложился поверх правого края полей формы */
#popup_id .pt-modern .nav-tabs-outer::after { display: none; }

/* Телефоны: состав тарифа → форма → цены месяц/год в две колонки → кнопка «Оформить» на всю ширину */
@media (max-width: 767.98px) {
	#popup_id .pt-modern .nav-tabs { padding-bottom: 5px; }
	#popup_id .pt-modern .tab-pane { flex-direction: row; flex-wrap: wrap; }
	#popup_id .pt-modern-price-outer { width: 50%; padding: 14px 10px; text-align: center; }
	#popup_id .pt-modern-price-outer + .pt-modern-price-outer { border-left: 1px solid #ebebeb; }
	#popup_id .pt-modern-price-caption { margin: 4px 0 0; line-height: 1.3; }
	#popup_id .pt-modern-element { width: 100%; }
}

/* Планшеты: вместо трёх узких колонок — состав тарифа и форма рядом, цены и кнопка строкой под ними */
@media (min-width: 768px) and (max-width: 1199.98px) {
	#popup_id .pt-modern { display: block; }
	#popup_id .pt-modern .nav-tabs { padding-bottom: 30px; }
	#popup_id .pt-modern .tab-content { width: 100%; border-left: 0; border-top: 1px solid #ebebeb; }
	#popup_id .pt-modern .tab-pane { flex-direction: row; }
	#popup_id .pt-modern .tab-pane > * { flex: 1 1 0; min-width: 0; border-top: 0; }
	#popup_id .pt-modern .tab-pane > * + * { border-left: 1px solid #ebebeb; }
	#popup_id .pt-modern-price-outer { padding: 20px; }
	#popup_id .pt-modern-element { display: flex; align-items: center; justify-content: center; }
}

/* кнопка «Оформить заказ»: вся строка кликабельна, текст по центру (до 1200px) */
@media (max-width: 1199.98px) {
	#popup_id .pt-modern-element .checkout-submit { width: 100%; justify-content: center; align-items: center; font-weight: 600; }
}

/* ===== Ошибки валидации: в шаблоне текст 9px в правом верхнем углу поля — на узких полях
   длинное сообщение (особенно по-русски) переносилось на 2–3 строки поверх рамки и значения.
   На телефонах/планшетах и в модалке (там поля узкие при любой ширине) — выводим под полем. ===== */
@media (max-width: 991.98px) {
	.form-wrap .form-validation { position: static; display: block; margin: 5px 0 0; padding: 0 20px; font-size: 11px; line-height: 1.35; text-align: left; }
}
#popup_id .form-wrap .form-validation { position: static; display: block; margin: 5px 0 0; padding: 0 20px; font-size: 11px; line-height: 1.35; text-align: left; }

/* ===== Кабинет: список заказов ===== */
/* страховка: широкая таблица прокручивается внутри блока, а не обрезается краем страницы */
.table-custom-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 991.98px) {
	.table-orders th, .table-orders td { padding-left: 14px; padding-right: 14px; }
}
/* телефоны: каждая строка таблицы — карточка «подпись: значение» (подписи из data-label) */
@media (max-width: 575.98px) {
	.table-orders, .table-orders tbody, .table-orders tr, .table-orders td { display: block; width: 100%; }
	.table-orders thead { display: none; }
	.table-orders tr { border: 1px solid #ebebeb; border-radius: 7px; overflow: hidden; }
	.table-orders tr + tr { margin-top: 15px; }
	.table-orders tbody tr:first-child td, .table-orders td { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; padding: 10px 15px; border-top: 0; text-align: right; }
	.table-orders tr td:last-child { border-bottom: 0; }
	.table-orders td::before { content: attr(data-label); flex-shrink: 0; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #262f3c; }
	.table-orders td:first-child { background: #f9f8f8; }
}

/* ===== Кабинет: карточка заказа — таблица «поле: значение» на телефоне была слишком разреженной ===== */
@media (max-width: 575.98px) {
	.table-custom-bordered th, .table-custom-bordered td { padding: 12px 14px; }
	.table-custom-bordered th { width: 40%; letter-spacing: .1em; }
	.table-custom-bordered td { overflow-wrap: anywhere; }
}

/* ===== Текстовые страницы: подзаголовки прилипали к предыдущему абзацу ===== */
.page-content * + h2, .page-content * + h3, .page-content * + h4, .page-content * + h5 { margin-top: 1.4em; }
.page-content h2 + *, .page-content h3 + *, .page-content h4 + *, .page-content h5 + * { margin-top: .6em; }
.page-content table { display: block; max-width: 100%; overflow-x: auto; }
.page-content iframe { max-width: 100%; }

/* ===== Подвал: пробелы между <span> в копирайте давали «©  2026   OneTV .» ===== */
.footer-light p.rights { display: flex; flex-wrap: wrap; justify-content: center; }
@media (min-width: 768px) {
	.footer-light p.rights { justify-content: flex-end; }
}

/* Баннер на телефоне: текст поверх светлых участков фото — лёгкая тень для читаемости */
@media (max-width: 767.98px) {
	.swiper-slider-1 .swiper-slide-caption h1,
	.swiper-slider-1 .swiper-slide-caption h2,
	.swiper-slider-1 .swiper-slide-caption h5 { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
}