/*
 * Квіз підбору СЕС.
 * Своїх кольорів тут немає — усе через змінні Woodmart, щоб зміна палітри
 * в налаштуваннях теми підхоплювалась автоматично. Запасні значення після
 * коми потрібні лише на випадок, якщо тему колись замінять.
 */

.sq {
	--sq-gap: 14px;
	/* Тема робить усі <button> капсом через власну змінну — гасимо нею ж,
	   а не перебиванням специфічності. */
	--btn-transform: none;
	max-width: 780px;
	margin: 0 auto;
	font-family: var(--wd-text-font, inherit);
	color: var(--wd-text-color, #767676);
}

.sq .sq__head {
	text-align: center;
	margin-bottom: 26px;
}

.sq .sq__title {
	font-family: var(--wd-title-font, inherit);
	font-weight: var(--wd-title-font-weight, 600);
	color: var(--wd-title-color, #242424);
	margin: 0 0 10px;
}

.sq .sq__subtitle {
	margin: 0;
	font-size: var(--wd-text-font-size, 15px);
}

/* ── Прогрес ───────────────────────────────────────────────────────────── */

.sq .sq__progress {
	height: 4px;
	border-radius: 4px;
	background-color: var(--bgcolor-gray-300, #f1f1f1);
	overflow: hidden;
	margin-bottom: 28px;
}

.sq .sq__progress-bar {
	height: 100%;
	width: 0;
	background-color: var(--wd-primary-color, #ff9933);
	transition: width .35s ease;
}

/* ── Крок ──────────────────────────────────────────────────────────────── */

.sq .sq__step-title {
	font-family: var(--wd-title-font, inherit);
	font-weight: var(--wd-title-font-weight, 600);
	color: var(--wd-title-color, #242424);
	font-size: 22px;
	text-align: center;
	margin: 0 0 8px;
}

.sq .sq__hint {
	text-align: center;
	font-size: 14px;
	margin: 0 0 22px;
	opacity: .85;
}

.sq .sq__options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sq-gap);
	margin-bottom: 26px;
}

.sq .sq__option {
	/* Тема фарбує будь-який <button> при наведенні з цих змінних. */
	--btn-bgcolor-hover: var(--bgcolor-gray-100, #f7f7f7);
	--btn-color-hover: var(--wd-title-color, #242424);
	display: block;
	letter-spacing: normal;
	width: 100%;
	text-align: left;
	cursor: pointer;
	padding: 16px 18px;
	font: inherit;
	font-size: var(--wd-text-font-size, 15px);
	color: var(--wd-title-color, #242424);
	background-color: var(--wd-form-bg, transparent);
	border: var(--wd-form-brd-width, 2px) solid var(--wd-form-brd-color, rgba(0, 0, 0, .1));
	border-radius: var(--wd-form-brd-radius, 5px);
	transition: border-color .2s ease, background-color .2s ease;
}

.sq .sq__option:hover {
	border-color: var(--wd-form-brd-color-focus, rgba(0, 0, 0, .15));
	background-color: var(--bgcolor-gray-100, #f7f7f7);
}

.sq .sq__option.is-active {
	border-color: var(--wd-primary-color, #ff9933);
	background-color: var(--bgcolor-gray-100, #f7f7f7);
}

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

.sq .sq__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sq-gap);
}

.sq .sq__btn {
	--btn-bgcolor-hover: var(--btn-accented-bgcolor-hover, var(--wd-primary-color, #ff9933));
	--btn-color-hover: var(--btn-accented-color, #fff);
	cursor: pointer;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	font: inherit;
	font-weight: 600;
	padding: 0 32px;
	height: var(--wd-form-height, 42px);
	line-height: var(--wd-form-height, 42px);
	border: none;
	border-radius: var(--btn-accented-brd-radius, 5px);
	background-color: var(--btn-accented-bgcolor, var(--wd-primary-color, #ff9933));
	color: var(--btn-accented-color, #fff);
	transition: background-color .2s ease, opacity .2s ease;
}

.sq .sq__btn:hover:not(:disabled) {
	background-color: var(--btn-accented-bgcolor-hover, var(--wd-primary-color, #ff9933));
}

.sq .sq__btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.sq .sq__btn--ghost {
	--btn-bgcolor-hover: var(--btn-default-bgcolor-hover, #efefef);
	--btn-color-hover: var(--btn-default-color, #333);
	background-color: var(--btn-default-bgcolor, #f7f7f7);
	color: var(--btn-default-color, #333);
}

.sq .sq__btn--ghost:hover {
	background-color: var(--btn-default-bgcolor-hover, #efefef);
}

/* ── Контакти ──────────────────────────────────────────────────────────── */

.sq .sq__field {
	margin-bottom: var(--sq-gap);
}

.sq .sq__field input {
	width: 100%;
	height: var(--wd-form-height, 42px);
	padding: 0 16px;
	font: inherit;
	color: var(--wd-form-color, inherit);
	background-color: var(--wd-form-bg, transparent);
	border: var(--wd-form-brd-width, 2px) solid var(--wd-form-brd-color, rgba(0, 0, 0, .1));
	border-radius: var(--wd-form-brd-radius, 5px);
}

.sq .sq__field input:focus {
	outline: none;
	border-color: var(--wd-primary-color, #ff9933);
}

.sq .sq__error {
	color: var(--notices-warning-bg, #E0B252);
	font-size: 14px;
	margin: 0 0 var(--sq-gap);
}

.sq .sq__consent {
	font-size: 13px;
	opacity: .8;
	margin: 14px 0 0;
}

/* ── Результат ─────────────────────────────────────────────────────────── */

.sq .sq__result {
	text-align: center;
	padding: 34px 26px;
	border-radius: var(--wd-form-brd-radius, 5px);
	background-color: var(--bgcolor-gray-100, #f7f7f7);
}

.sq .sq__result-power {
	font-family: var(--wd-title-font, inherit);
	color: var(--wd-title-color, #242424);
	font-size: 30px;
	font-weight: 600;
	margin: 0 0 6px;
}

.sq .sq__result-price {
	font-family: var(--wd-title-font, inherit);
	color: var(--wd-primary-color, #ff9933);
	font-size: 40px;
	font-weight: 700;
	margin: 0 0 4px;
}

.sq .sq__result-note {
	font-size: 14px;
	margin: 0 0 22px;
	opacity: .85;
}

.sq .sq__spec {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 8px;
	text-align: left;
	max-width: 420px;
	margin-inline: auto;
}

.sq .sq__spec li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--brdcolor-gray-300, rgba(0, 0, 0, .105));
}

.sq .sq__spec b {
	color: var(--wd-title-color, #242424);
	font-weight: 600;
}

/* ── Мобільні ──────────────────────────────────────────────────────────── */

@media (max-width: 575px) {
	.sq .sq__options {
		grid-template-columns: 1fr;
	}

	.sq .sq__step-title {
		font-size: 19px;
	}

	.sq .sq__result-price {
		font-size: 32px;
	}

	.sq .sq__nav {
		flex-direction: column-reverse;
	}

	.sq .sq__nav .sq__btn {
		width: 100%;
	}
}

/* ── Спливаюче вікно ───────────────────────────────────────────────────── */

.sq-popup[hidden] {
	display: none;
}

.sq-popup {
	position: fixed;
	inset: 0;
	/* Вище за всі елементи теми: липкі соцмережі 390, наша кнопка контактів 340,
	   Magnific Popup теми 1042. */
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.sq-popup__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, .6);
	animation: sq-fade .25s ease;
}

.sq-popup__box {
	position: relative;
	width: 100%;
	max-width: 720px;
	/* dvh враховує панель браузера на телефоні, vh — запасний для старих. */
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	padding: 36px 30px 30px;
	border-radius: var(--wd-form-brd-radius, 5px);
	background-color: var(--bgcolor-white, #fff);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
	animation: sq-rise .28s ease;
}

/* Подвійний клас навмисно: правило теми для будь-якого <button> має таку саму
   вагу, як одиночний клас, і перебивало б нам відступи та висоту. */
.sq-popup .sq-popup__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	/* Тема фарбує будь-який <button> при наведенні власними змінними —
	   задаємо їх, а не воюємо зі специфічністю. */
	/* Тема тримає мінімальну висоту кнопки в цій змінній — задаємо її, а не
	   перебиваємо min-height зверху. */
	--btn-height: 34px;
	--btn-bgcolor: transparent;
	--btn-bgcolor-hover: var(--bgcolor-gray-100, #f7f7f7);
	--btn-color: var(--wd-title-color, #242424);
	--btn-color-hover: var(--wd-title-color, #242424);
	background-color: var(--btn-bgcolor);
	color: var(--btn-color);
}

.sq-popup .sq-popup__close svg {
	/* Без цього flex стискає іконку до нуля, коли місця обмаль. */
	flex: none;
}

.sq-popup .sq__head {
	margin-bottom: 20px;
}

/* Сторінка під вікном не прокручується. */
html.sq-popup-open {
	overflow: hidden;
}

@keyframes sq-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes sq-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 575px) {
	.sq-popup {
		padding: 10px;
	}

	.sq-popup__box {
		padding: 30px 16px 20px;
		max-height: calc(100vh - 20px);
		max-height: calc(100dvh - 20px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sq-popup__overlay,
	.sq-popup__box {
		animation: none;
	}
}