/* ==========================================================================
   Стили под плагины.
   --------------------------------------------------------------------------
   ЕДИНСТВЕННЫЙ файл темы, который НЕ обёрнут в @layer и подключается
   последним. Причина: CSS плагинов тоже вне слоёв, а безслойные правила
   выигрывают у любого слоя — иначе тема не смогла бы их перекрыть.
   !important допустим только здесь и только с объяснением.
   ========================================================================== */

/* --- Calculator Builder --------------------------------------------------- */

/* Итоговая сумма скрыта осознанно: калькулятор работает как многошаговая
   форма заявки, цену показывают после замера. В старой теме это правило было
   продублировано инлайном в десяти шаблонах.

   Привязка была к .ccb-calculator — такого класса в установленной сборке
   плагина НЕТ, поэтому блок «Summary» с «Total 1 003,00 €» был виден
   на всех товарных страницах. Опираемся на собственную обёртку темы
   .al-calc: она есть всегда и не зависит от версии плагина.

   Структура блока:
     .calc-subtotal-wrapper > .calc-list-inner
        .calc-item-title.calc-accordion  — заголовок «Summary»
        .calc-subtotal-list              — перечень выбранных значений
        .calc-subtotal-list > .total     — сумма
        .calc-subtotal-list.calc-buttons — КНОПКА, её оставляем
*/
.al-calc .calc-subtotal-list:not(.calc-buttons),
.al-calc .calc-item-title.calc-accordion,
.al-calc .sub-list-item.total,
.al-calc .ccb-invoice-table__summary,
.al-calc .ccb-invoice-table__total,
.ccb-calculator .calc-subtotal-list:not(.calc-buttons) {
	display: none !important;
}

/* После скрытого итога плагин оставлял пустую полосу высотой с блок «Summary» */
.al-calc .calc-subtotal-wrapper { margin-top: 0 !important; padding-top: 0 !important; }
/* Плагин рисует внутри собственные белые панели. Карточку темы делаем тоже
   белой (см. .al-product__calc), а здесь только убираем лишние отступы
   и ограничения ширины, чтобы панели совпадали с краями карточки. */
.al-calc .calc-list-inner,
.al-calc .calc-total-wrapper {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	width: 100% !important;
	max-width: 100% !important;
}
.al-calc .calc-subtotal-list.calc-buttons { margin: var(--al-s-5) 0 0 !important; padding: 0 !important; }
.al-calc .sub-list-item.next-btn { margin: 0 !important; padding: 0 !important; }

/* Кнопка заявки — главная цель страницы. У плагина она была мелкой
   и с разрядкой букв, из-за которой не помещалась в две строки. */
.al-calc .calc-subtotal-list.calc-buttons button,
.al-calc .ccb_btn {
	width: 100% !important;
	max-width: 360px !important;
	letter-spacing: 0 !important;
	font-size: 16px !important;
}

.ccb-calculator,
#ccb-calculator {
	border-radius: var(--al-r-lg);
	background: var(--al-surface);
}

/* Плагин печатает свои радиусы инлайном */
.ccb-calculator input,
.ccb-calculator .ccb-select {
	border-radius: var(--al-r-sm) !important;
	min-height: 52px !important;
}

.ccb-calculator button[type="submit"],
.ccb-calculator .ccb_btn {
	min-height: 52px !important;
	border-radius: var(--al-r-pill) !important;
	background: var(--al-brand) !important;
	border-color: var(--al-brand) !important;
	color: #fff !important;
	font-weight: 700 !important;
}
.ccb-calculator button[type="submit"]:hover,
.ccb-calculator .ccb_btn:hover {
	background: var(--al-brand-600) !important;
}

/* Vue-шаблоны плагина попадают в разметку сырыми и видны поисковику
   как «pro Feature Available in Pro Version». Прячем от глаз. */
.ccb-calculator [v-cloak] { display: none !important; }

/* --- Contact Form 7 ------------------------------------------------------- */

/* В style.css старой темы кнопка описана селектором
   input.wpcf7-form-control.has-spinner.wpcf7-submit — специфичность (0,3,1).
   Чтобы не зависеть от порядка подключения, повторяем классы. */
.wpcf7 input.wpcf7-form-control.wpcf7-submit,
.wpcf7 input.wpcf7-submit[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: var(--al-s-3) var(--al-s-6);
	border: 1px solid var(--al-brand);
	border-radius: var(--al-r-pill);
	background: var(--al-brand);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--al-shadow-sm);
	transition: background-color var(--al-t), transform var(--al-t);
}
.wpcf7 input.wpcf7-form-control.wpcf7-submit:hover {
	background: var(--al-brand-600);
	border-color: var(--al-brand-600);
	transform: translateY(-1px);
}

.wpcf7 form .wpcf7-response-output {
	margin: var(--al-s-4) 0 0;
	padding: var(--al-s-3) var(--al-s-4);
	border-radius: var(--al-r-sm);
	border-width: 1px;
	font-size: var(--al-fs-sm);
}
.wpcf7-not-valid-tip { color: var(--al-err); font-size: 14px; }

/* Тело формы хранится в базе с классами Bootstrap (row / col-md-*), а сам
   Bootstrap из темы убран. Без замены строки схлопывались друг к другу:
   поля шли сплошняком, чекбокс согласия лип к последнему полю, кнопка
   висела слева мелкой плашкой. Здесь — полная раскладка формы. */
.wpcf7 form {
	display: flex;
	flex-direction: column;
	gap: var(--al-s-4);
}
/* У Contact Form 7 каждое поле обёрнуто в <p> с браузерным отступом 1em,
   из-за него вертикальный ритм ломался. Отступы задаёт gap. */
.wpcf7 form p { margin: 0; }
.wpcf7 .row {
	display: grid;
	gap: var(--al-s-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.wpcf7 .col-md-12 { grid-column: 1 / -1; }
.wpcf7 .wpcf7-form-control-wrap { display: block; }

/* Поля. Форма стоит в тёмном подвале, поэтому фон белый, а не прозрачный. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	min-height: 52px;
	padding: var(--al-s-3) var(--al-s-4);
	border: 1px solid var(--al-line-strong);
	border-radius: var(--al-r-sm);
	background: #fff;
	color: var(--al-ink);
	font: inherit;
	/* 16px — ниже этого размера iOS увеличивает страницу при фокусе */
	font-size: 16px;
	line-height: 1.3;
}
.wpcf7 textarea { min-height: 120px; resize: vertical; }
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible {
	outline: 2px solid var(--al-brand);
	outline-offset: 2px;
	border-color: var(--al-brand);
}
.wpcf7 ::placeholder { color: var(--al-ink-500); opacity: 1; }

/* Согласие с условиями: галочка и текст стояли впритык */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: var(--al-s-3);
	font-size: var(--al-fs-sm);
	line-height: 1.5;
	cursor: pointer;
}
.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--al-brand);
}

/* Кнопка на всю ширину узкой колонки, по центру — на широкой */
.wpcf7 input.wpcf7-form-control.wpcf7-submit,
.wpcf7 input.wpcf7-submit[type="submit"] { width: 100%; max-width: 320px; margin-inline: auto; }

/* --- Ajax Search Lite ----------------------------------------------------- */

/* Плагин печатает собственные размеры инлайном (ширина в px, высота 28px),
   поэтому поле вылезало из колонки, а кнопка лупы прилипала к краю. */
.al-header__search .asl_w_container,
.al-header__search div.asl_w,
.al-header__search div.asl_w .probox { width: 100% !important; max-width: 100% !important; }

.al-header__search div.asl_w {
	margin: 0 !important;
	border-radius: var(--al-r-pill) !important;
	box-shadow: none !important;
	border: 0 !important;
	background: transparent !important;
}
.al-header__search div.asl_w .probox {
	height: 44px !important;
	border: 1px solid var(--al-line-strong) !important;
	border-radius: var(--al-r-pill) !important;
	background: var(--al-surface-alt) !important;
	overflow: hidden;
	transition: border-color var(--al-t), background-color var(--al-t);
}
.al-header__search div.asl_w .probox:focus-within {
	border-color: var(--al-brand) !important;
	background: var(--al-surface) !important;
}
/* Поле у плагина 28px высотой — ниже нормы касания; 16px шрифт, иначе
   iOS увеличивает страницу при фокусе. */
.al-header__search div.asl_w input.orig {
	height: 42px !important;
	padding: 0 var(--al-s-2) 0 var(--al-s-4) !important;
	font-size: 15px !important;
	background: transparent !important;
	color: var(--al-ink) !important;
}
.al-header__search div.asl_w .promagnifier,
.al-header__search div.asl_w .prosettings {
	height: 42px !important;
	width: 42px !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}
.al-header__search div.asl_w .promagnifier .innericon,
.al-header__search div.asl_w .prosettings .innericon {
	height: 42px !important;
	width: 42px !important;
	background: transparent !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
/* Лупу плагин рисует светло-серой поверх светлого поля — её не видно.
   Цвет задан у самого <svg> и у вложенных <path>, поэтому перекрываем оба. */
.al-header__search div.asl_w .promagnifier svg,
.al-header__search div.asl_w .promagnifier svg * {
	fill: var(--al-ink) !important;
	stroke: none !important;
	opacity: 1 !important;
}
.al-header__search div.asl_w .promagnifier:hover svg,
.al-header__search div.asl_w .promagnifier:hover svg * { fill: var(--al-brand) !important; }
.al-header__search div.asl_w .promagnifier { cursor: pointer; }
/* Кнопка лупы — отдельная цель нажатия, её ширины хватает */
.al-header__search div.asl_w .promagnifier svg { width: 18px !important; height: 18px !important; }
/* Полоса загрузки плагина рисовалась поверх рамки */
.al-header__search div.asl_w .proloading,
.al-header__search div.asl_w .proclose { height: 42px !important; }

/* --- Переключатель языка (MSLS) ------------------------------------------- */

.al-topbar__lang ul { display: flex; gap: var(--al-s-3); margin: 0; padding: 0; list-style: none; }
.al-topbar__lang a {
	display: inline-flex; align-items: center; gap: var(--al-s-2);
	min-height: 44px; color: rgba(255,255,255,.92); text-decoration: none;
}
.al-topbar__lang a:hover { color: #fff; }
.al-topbar__lang img { border-radius: 2px; }