/* ===================================================================
   Банер на головній — додаткові стилі
   Файл: /wp-content/themes/proVikna/banner-custom.css
   =================================================================== */

/* Фікс: десь у шапці сайту є правило, яке помилково ховає
   .wc_payment_methods.payment_methods.methods та .checkout__form-title
   разом з іншими непов'язаними елементами. Перебиваємо тут, поки
   не знайдено й не виправлено оригінальне джерело. */
.wc_payment_methods.payment_methods.methods,
.checkout__form-title {
	display: block !important;
}

/* Відступи для заголовків h2 у тексті статей блогу — сайт має
   глобальне скидання margin:0 (* {margin:0}), і власні відступи
   раніше були задані тільки для h3 (.content p + h3 тощо).
   Статті, написані з h2 (як заголовки другого рівня), лишались
   без жодного відступу. Дзеркалимо той самий підхід для h2. */

.content h2,
.blog__content h2 {
	margin-top: 4rem;
	margin-bottom: 2rem;
}

.content p,
.blog__content p {
	margin-bottom: 2rem;
}

.content ul,
.blog__content ul,
.content ol,
.blog__content ol {
	margin-bottom: 2rem;
}

.content ul li,
.blog__content ul li {
	margin-bottom: 0.8rem;
}

/* Ефект fade накладає всі слайди один на одного в тій самій позиції.
   Неактивні мають opacity:0, але залишаються КЛІКАБЕЛЬНИМИ —
   через це кнопка невидимого слайда перехоплює клік
   (напр. "До каталогу" зі слайда 1 з'їдала клік по "Замовити дзвінок").
   Вимикаємо взаємодію з усіма слайдами, крім активного. */

.banner__slide {
	pointer-events: none;
}

.banner__slide.swiper-slide-active {
	pointer-events: auto;
}

.banner__slide--clickable.swiper-slide-active {
	cursor: pointer;
}

/* --- Підзаголовок слайда ------------------------------------------- */

.banner__subtitle {
	font-size: 1.8rem;
	line-height: 1.4;
	font-weight: 400;
	margin: 1.6rem 0 0 !important;
	opacity: 0.85;
}

.banner__slide-wrap h1,
.banner__slide-wrap h2 {
	margin-bottom: 0;
}

.banner__slide-wrap h1 + .banner__subtitle,
.banner__slide-wrap h2 + .banner__subtitle {
	margin-top: 1rem;
}

/* --- Проти "вилітання збоку" при завантаженні сторінки ------------- */
/* Поки Swiper ще не ініціалізувався, слайди лежать у звичайному ряду
   (як задумано в HTML/flex до того, як JS розставить fade-позиції).
   Ховаємо все, крім першого слайда, до появи класу swiper-initialized,
   який Swiper додає сам одразу після старту. */

.banner__slider:not(.swiper-initialized) .swiper-slide {
	display: none;
}

.banner__slider:not(.swiper-initialized) .swiper-slide:first-child {
	display: flex;
}

/* --- Повношириний фон банера (два шари з плавним crossfade) -------- */
/* .banner__bg — прямі діти .banner (НЕ всередині .container), тому
   тягнуться на всю ширину сторінки, а не обмежені шириною контейнера.
   JS (index.php) підмінює background-image неактивного шару і плавно
   перемикає клас is-active — синхронно з fade-переходом тексту. */

.banner {
	position: relative;
	overflow: hidden;
}

.banner__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 0;
}

.banner__bg.is-active {
	opacity: 1;
}

.banner--has-bg::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.65) 0%,
		rgba(0, 0, 0, 0.45) 35%,
		rgba(0, 0, 0, 0.1) 60%,
		rgba(0, 0, 0, 0) 100%
	);
	z-index: 1;
}

.banner--has-bg .container,
.banner--has-bg .banner__tip {
	position: relative;
	z-index: 2;
}

.banner--has-bg .banner__slide h1,
.banner--has-bg .banner__slide h2,
.banner--has-bg .banner__subtitle {
	color: #ffffff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.banner__slide--full {
	justify-content: flex-start;
}

.banner__slide--full .banner__slide-wrap {
	max-width: 60rem;
}

/* --- Десктоп: текст full-bg слайда по центру ---------------------- */
/* Обмежено min-width:577px, щоб не зачепити мобільну версію, де
   .banner__slide перемикається на flex-direction:column і
   justify-content відповідає вже за вертикальну вісь. */

@media only screen and (min-width: 577px) {
	.banner__slide--full {
		justify-content: center;
	}

	.banner__slide--full .banner__slide-wrap {
		text-align: center;
	}

	.banner__slide--full .banner__slide-bttn {
		justify-content: center;
	}

	/* autoHeight у Swiper (додали заради мобільної версії) виставляє
	   висоту слайдера під висоту самого тексту — через це на десктопі
	   текст лип до верху, а решта фото лишалась порожньою.
	   Повертаємо слайдеру повну висоту банера, щоб спрацювало
	   вертикальне центрування з базового banner.css (align-items:center).
	   !important потрібен, бо Swiper пише висоту в inline-стиль. */
	.banner__slider,
	.banner__slider .swiper-wrapper {
		height: 100% !important;
	}

	.banner__slide {
		height: 100% !important;
	}
}

/* --- СТРІЛКИ: перебиваємо swiper-button-lock, який їх ховає -------- */
/* Swiper додає display:none стрілкам, бо вони поза його контейнером.
   Показуємо їх примусово (крім випадку одного слайда). */

.banner .banner__nav-bttn {
	display: flex !important;
	width: 5rem;
	pointer-events: auto;
	z-index: 5;
}

.banner .banner__nav-bttn.banner__prev {
	left: 0;
}

.banner .banner__nav-bttn.banner__next {
	right: 0;
}

/* Іконка стрілки — гарантуємо видимий розмір */
.banner .banner__nav-bttn img {
	width: 2.4rem;
	height: auto;
	display: block;
}

/* Один слайд — ховаємо стрілки і пагінацію */
.banner--single .banner__nav-bttn,
.banner--single .banner__pagination {
	display: none !important;
}

/* Білі стрілки на темному фото (клас banner--has-bg перемикається
   легким JS лише для кольору стрілок/крапок, фон він більше не чіпає) */
.banner--has-bg .banner__nav-bttn img {
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

.banner--has-bg .banner__nav-bttn:hover img {
	opacity: 1;
}

/* --- Пагінація (крапки — скільки всього банерів) ------------------- */
/* Видима завжди, з двома варіантами кольору залежно від фону слайда */

.banner__pagination {
	position: relative;
	z-index: 5;
}

.banner__pagination .swiper-pagination-bullet {
	background: #3C4DA1;
	opacity: 0.35;
	width: 1rem;
	height: 1rem;
	margin: 0 0.4rem;
}

.banner__pagination .swiper-pagination-bullet-active {
	opacity: 1;
}

.banner--has-bg .banner__pagination .swiper-pagination-bullet {
	background: #ffffff;
	opacity: 0.5;
}

.banner--has-bg .banner__pagination .swiper-pagination-bullet-active {
	opacity: 1;
}

/* --- Кнопки ------------------------------------------------------- */

.banner__slide-bttn {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.banner--has-bg .banner__slide-bttn .bttn {
	background: #ffffff;
	color: #3C4DA1;
	border: none;
	padding: 1.4rem 3rem;
	font-weight: 600;
	border-radius: 8px;
	text-shadow: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.banner--has-bg .banner__slide-bttn .bttn:hover {
	background: #F0F2FA;
	transform: translateY(-2px);
}

.banner--has-bg .banner__slide-bttn .bttn:nth-child(2) {
	background: transparent;
	color: #ffffff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.banner--has-bg .banner__slide-bttn .bttn:nth-child(2):hover {
	background: rgba(255, 255, 255, 0.15);
}

/* --- Мобільна версія ---------------------------------------------- */

@media only screen and (max-width: 576px) {
	.banner__slide-bttn {
		gap: 1rem;
	}

	.banner__slide--full .banner__slide-wrap {
		max-width: 100%;
	}

	.banner--has-bg::before {
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.55) 0%,
			rgba(0, 0, 0, 0.35) 60%,
			rgba(0, 0, 0, 0.5) 100%
		);
	}

	.banner--has-bg .banner__slide-bttn .bttn {
		padding: 1.2rem 2rem;
		font-size: 1.4rem;
	}

	.banner .banner__nav-bttn {
		width: 3.5rem;
	}

	/* Заголовок банера на мобільному — трохи менший шрифт, ніж
	   на десктопі. Текст переноситься на стільки рядків, скільки
	   треба, без обрізання "..." — висоту банера тепер тримає
	   autoHeight у Swiper (app.js), тож "роздування" .banner
	   довгим текстом більше не проблема. */
	.banner__slide h1,
	.banner__slide h2 {
		font-size: 1.15rem !important;
		line-height: 1.2 !important;
	}

	.banner__subtitle {
		font-size: 0.95rem;
		line-height: 1.25;
		margin: 0.3rem 0 0 !important;
	}

	.banner__slide-wrap {
		padding: 1rem 0;
	}

	.banner--has-bg .banner__slide-wrap {
		padding: 0.5rem 0.75rem;
	}

	.banner__slide-bttn {
		margin-top: 0.6rem;
	}

	.banner__slide-bttn .bttn {
		padding: 1rem 1.6rem !important;
		font-size: 1.3rem !important;
	}

	/* Базовий banner.css задає контейнеру padding-top:11rem на 576px
	   (розраховано на старий, набагато вищий банер) і лише 1.5rem
	   зліва/справа — через це порожній простір зверху/знизу і текст
	   впритул до стрілок (стрілки шириною 3.5rem). Стискаємо вертикальний
	   відступ і розширюємо горизонтальний, щоб текст/фото не заходили
	   в зону стрілок. */
	.banner .container {
		padding-top: 1.2rem;
		padding-bottom: 1.2rem;
		padding-left: 4rem;
		padding-right: 4rem;
	}

	/* Текст сидів угорі фото замість по центру: .swiper-wrapper мав
	   висоту 210px, а сам слайд (position:relative, НЕ absolute) —
	   лише 116px замість успадкованих 100%. Swiper через JS керує
	   transform слайда (горизонтальна компенсація для fade-ефекту),
	   тому transform чіпати не можна - конфліктувало б з JS.
	   Форсуємо height через !important замість цього. */
	.banner__slide--full {
		height: 100% !important;
		display: flex !important;
		justify-content: center !important;
	}

	/* Слайд типу "side" (фото поруч із текстом) — базовий banner.css
	   перемикає .banner__slide на flex-direction:column на мобільному
	   (фото падає під текст). Тут повертаємо фото збоку, як на десктопі,
	   просто звужуючи обидві колонки замість стекання. */
	.banner__slide--side {
		flex-direction: row !important;
		gap: 1.5rem !important;
	}

	.banner__slide--side .banner__slide-wrap {
		max-width: 55%;
	}

	.banner__slide--side .banner__img {
		width: 42%;
		flex-shrink: 0;
	}

	.banner__slide--side .banner__img img {
		height: 100%;
	}
}


/* ===================================================================
   Форма CF7 всередині попапа
   Форма має класи footer__form-* (стилі під широкий футер),
   у вузькому попапі вони ламають верстку — перевизначаємо.
   =================================================================== */

.popup__form .footer__form-row {
	display: block !important;
	width: 100% !important;
}

.popup__form .wpcf7 {
	width: 100%;
}

.popup__form .wpcf7-form p,
.popup__form .wpcf7-form br {
	margin: 0;
}

.popup__form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	margin-bottom: 1.2rem;
}

.popup__form .wpcf7 input[type="text"],
.popup__form .wpcf7 input[type="tel"],
.popup__form .wpcf7 input[type="email"],
.popup__form .wpcf7 textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.popup__form .footer__form-bttn {
	width: 100%;
	margin-top: 0.5rem;
}

.popup__form .wpcf7 input[type="submit"] {
	width: auto;
	min-width: 16rem;
}

/* Заголовок форми в попапі — без ліній, чиста картка (як у попапі входу/реєстрації) */
.popup__form .wpcf7 h3 {
	margin: 0 3rem 2rem 0;
	font-size: 2rem;
	color: #0d0e0e;
}

/* Прибираємо будь-який <hr>, вписаний вручну в контент форми CF7 */
.popup__form .wpcf7-form hr,
.footer__form .wpcf7-form hr {
	display: none !important;
}

/* Знайдено інспектором: "лінія" над формою — це браузерна рамка
   fieldset, яку CF7 5.9+ автоматично додає навколо прихованих полів
   для доступності (screen readers). Рамка не потрібна візуально. */
fieldset.hidden-fields-container {
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Округла картка, як у попапі акаунту (.popup__account).
   Базовий .popup має min-height:40rem — для короткої форми (3 поля +
   кнопка) це лишає купу порожнього простору знизу, тому прибираємо
   саме тут, не займаючи інші попапи сайту. */
.popup__form {
	border-radius: 1.6rem;
	padding: 2.4rem 2.4rem 2.8rem;
	min-height: auto;
	height: auto;
}

/* Повідомлення CF7 (помилки / успіх) */
.popup__form .wpcf7-response-output {
	margin: 1.5rem 0 0 !important;
	font-size: 1.3rem;
}

/* ===================================================================
   Єдиний стиль полів для форми зворотного зв'язку (CF7)
   Приводимо до того самого вигляду, що й попап входу/реєстрації
   (.popup__account): світла рамка #d4d4d4, радіус 0.3rem,
   тінь при фокусі — замість темнішої рамки #2c2c2c, яка була раніше.
   Стосується форми і у футері, і в попапі банера.
   =================================================================== */

.footer__form input[type="text"],
.footer__form input[type="tel"],
.footer__form input[type="email"],
.footer__form textarea,
.popup__form .wpcf7 input[type="text"],
.popup__form .wpcf7 input[type="tel"],
.popup__form .wpcf7 input[type="email"],
.popup__form .wpcf7 textarea {
	border: 1px solid #d4d4d4 !important;
	border-radius: 0.3rem;
	padding: 1.3rem 1.8rem;
	font-size: 1.4rem;
	color: #2c2c2c;
	background-color: #ffffff;
	transition: all 0.2s ease;
}

.footer__form input[type="text"]::placeholder,
.footer__form input[type="tel"]::placeholder,
.footer__form textarea::placeholder,
.popup__form .wpcf7 input::placeholder,
.popup__form .wpcf7 textarea::placeholder {
	color: #8a8a8a;
	font-size: 1.4rem;
}

.footer__form input[type="text"]:focus,
.footer__form input[type="tel"]:focus,
.footer__form input[type="text"]:active,
.footer__form input[type="tel"]:active,
.footer__form textarea:focus,
.popup__form .wpcf7 input:focus,
.popup__form .wpcf7 input:active,
.popup__form .wpcf7 textarea:focus {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	outline: none;
}

.footer__form textarea,
.popup__form .wpcf7 textarea {
	width: 100%;
	min-height: 9rem;
	resize: vertical;
	font-family: inherit;
}

/* ===================================================================
   Футер: поля "Ім'я" і телефон однакової ширини

   Поле телефону змінили з type="text" на type="tel" (щоб на мобільному
   відкривалась цифрова клавіатура). У браузера різні дефолтні розміри
   для цих типів, тому телефон почав займати більше місця, а "Ім'я"
   стислось. Задаємо ширину явно — по половині рядка кожному.

   .popup__form має власне правило з !important (display:block), тому
   в попапі поля лишаються один під одним, як і було.
   =================================================================== */

.footer__form .footer__form-row {
	display: flex;
	gap: 1.2rem;
	align-items: flex-start;
}

.footer__form .footer__form-row .wpcf7-form-control-wrap {
	flex: 1 1 0;
	min-width: 0;
}

.footer__form .footer__form-row input {
	width: 100%;
	box-sizing: border-box;
}

/* Заголовок форми у футері — без зайвої лінії */