/* Тизер квиза: золотая плашка у нижнего края экрана, по клику открывает попап
   с квизом (js/quiz-teaser.js -> window.SmrQuizPopup.open). Эксперимент,
   живёт отдельно от попапа: свои классы, свои стили, свой скрипт.

   Размеры в CSS-пикселях с поправкой на zoom: 0.65 у body (см. style.css):
   плашка макета ~72 видимых пикселя высотой - здесь 112px. */

.quiz-teaser {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 28px;
	z-index: 190;

	display: flex;
	justify-content: center;
	padding: 0px 24px;
	/* Сам контейнер сквозной для кликов - страница под ним остаётся живой,
	   ловит клики только плашка. */
	pointer-events: none;

	opacity: 0;
	transform: translateY(140%);
	transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.quiz-teaser[hidden] {
	display: none;
}

.quiz-teaser.is-shown {
	opacity: 1;
	transform: none;
}

/* Плашка целиком кликабельна: это одна большая кнопка «открыть квиз», а не
   строка с одной маленькой кнопкой справа. Золотая рамка - градиентом через
   двойной фон, тёплое свечение - тенью. */
.quiz-teaser__bar {
	position: relative;
	pointer-events: auto;
	cursor: pointer;

	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1560px;
	min-height: 112px;
	padding: 14px 22px 14px 214px;
	border: 2px solid transparent;
	border-radius: 100px;
	background:
		linear-gradient(90deg, #fff1cf 0%, #fff9ea 38%, #fffdf7 70%, #fff6e2 100%) padding-box,
		linear-gradient(90deg, #f7d98a 0%, #d9a52a 35%, #f3cd6c 70%, #d9a52a 100%) border-box;
	box-shadow:
		0 18px 50px rgba(201, 143, 22, 0.32),
		0 4px 14px rgba(201, 143, 22, 0.18),
		0 0 0 6px rgba(240, 194, 90, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
	/* Мягкая пульсация золотого ореола: плашка «дышит» и цепляет взгляд. */
	animation: quiz-teaser-halo 2.8s ease-in-out infinite;
}

@keyframes quiz-teaser-halo {
	0%, 100% {
		box-shadow:
			0 18px 50px rgba(201, 143, 22, 0.32),
			0 4px 14px rgba(201, 143, 22, 0.18),
			0 0 0 6px rgba(240, 194, 90, 0.14),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}

	50% {
		box-shadow:
			0 22px 60px rgba(201, 143, 22, 0.42),
			0 6px 18px rgba(201, 143, 22, 0.22),
			0 0 0 12px rgba(240, 194, 90, 0.08),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}
}

@media (hover: hover) {
	.quiz-teaser__bar:hover {
		transform: translateY(-4px);
		box-shadow:
			0 26px 60px rgba(201, 143, 22, 0.36),
			0 6px 18px rgba(201, 143, 22, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}
}

/* Тёплое свечение под подарком - тот же приём, что на панели попапа. */
.quiz-teaser__glow {
	position: absolute;
	left: 10px;
	top: 50%;
	width: 260px;
	height: 260px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(255, 214, 110, 0.75) 0%, rgba(255, 230, 170, 0.35) 40%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}

/* Подарок выходит за верхний край плашки и слегка покачивается - взгляд
   цепляется за движение раньше, чем за текст. */
.quiz-teaser__gift {
	position: absolute;
	left: 36px;
	bottom: 6px;
	width: 156px;
	height: 156px;
	filter: drop-shadow(0 14px 22px rgba(160, 110, 20, 0.28));
	animation: quiz-teaser-float 3.2s ease-in-out infinite;
	pointer-events: none;
}

@keyframes quiz-teaser-float {
	0%, 100% {
		transform: translateY(0) rotate(-2deg);
	}

	50% {
		transform: translateY(-9px) rotate(2deg);
	}
}

.quiz-teaser__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

/* Блок калькулятора - единственный, кому можно ужиматься: его подпись
   переносится на вторую строку, когда кнопке не хватает места. */
.quiz-teaser__item--calc {
	flex: 1 1 auto;
	margin: 0px 24px 0px 0px;
}

.quiz-teaser__item--calc .quiz-teaser__text {
	white-space: normal;
}

.quiz-teaser__item-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.quiz-teaser__title {
	font-family: var(--second-family);
	font-weight: 800;
	font-size: 22px;
	line-height: 125%;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #c48c12;
	white-space: nowrap;
}

.quiz-teaser__title--dark {
	color: #303030;
}

.quiz-teaser__text {
	font-family: var(--second-family);
	font-weight: 500;
	font-size: 17px;
	line-height: 135%;
	color: #6f7889;
	white-space: nowrap;
}

.quiz-teaser__divider {
	flex: 0 0 auto;
	width: 1px;
	height: 64px;
	margin: 0px 36px;
	background: linear-gradient(180deg, rgba(217, 165, 42, 0) 0%, rgba(217, 165, 42, 0.55) 50%, rgba(217, 165, 42, 0) 100%);
}

/* Иконка калькулятора в золотом кружке - продолжает тему, а не спорит с ней
   синим, как в блоке на странице. */
.quiz-teaser__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: linear-gradient(145deg, #f3c862 0%, #d9a52a 60%, #c48c12 100%);
	box-shadow: 0 8px 18px rgba(201, 143, 22, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.quiz-teaser__icon svg {
	width: 28px;
	height: 28px;
}

/* Кнопка: золотой градиент и бегущий блик раз в несколько секунд - плашка
   должна звать нажать, а не просто лежать внизу. */
.quiz-teaser__btn {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0px 0px 0px auto;
	padding: 20px 36px 20px 40px;
	border-radius: 100px;
	background: linear-gradient(135deg, #f0c25a 0%, #d9a52a 55%, #c48c12 100%);
	box-shadow: 0 10px 24px rgba(201, 143, 22, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	overflow: hidden;

	font-family: var(--second-family);
	font-weight: 700;
	font-size: 19px;
	line-height: 130%;
	color: #fff;
	text-shadow: 0 1px 1px rgba(120, 80, 0, 0.25);
	white-space: nowrap;
	transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}

.quiz-teaser__btn::after {
	content: "";
	position: absolute;
	top: -40%;
	left: -80%;
	width: 50%;
	height: 180%;
	transform: skewX(-24deg);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
	animation: quiz-teaser-shine 3.6s ease-in-out infinite;
	pointer-events: none;
}

@keyframes quiz-teaser-shine {
	0%, 62% {
		left: -80%;
	}

	100% {
		left: 160%;
	}
}

.quiz-teaser__btn-arrow {
	width: 18px;
	height: 18px;
	transition: transform 0.25s ease;
}

@media (hover: hover) {
	.quiz-teaser__bar:hover .quiz-teaser__btn {
		filter: brightness(1.05);
		box-shadow: 0 14px 30px rgba(201, 143, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	}

	.quiz-teaser__bar:hover .quiz-teaser__btn-arrow {
		transform: translateX(4px);
	}
}

.quiz-teaser__btn:active {
	transform: scale(0.97);
}

/* Крестик - нейтральный и небольшой: он для тех, кому плашка мешает, и не
   должен перетягивать взгляд с золотой кнопки. */
.quiz-teaser__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0px 0px 0px 14px;
	border-radius: 50%;
	background: transparent;
	color: #9aa3b5;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.quiz-teaser__close svg {
	width: 16px;
	height: 16px;
}

@media (hover: hover) {
	.quiz-teaser__close:hover {
		background: rgba(201, 143, 22, 0.12);
		color: #303030;
	}
}

/* Плашка встаёт поверх баннера согласия на куки: он висит у того же нижнего
   края. Две шторки разом съедали бы пол-экрана на телефоне, а частичное
   перекрытие оставляло торчащие края и перекрытую кнопку «Принять». Поэтому
   пока плашка на экране, баннер убран целиком; закрыли плашку крестиком или
   отправили заявку - он возвращается на место. Файл подключается после
   style.css, поэтому правило перебивает .cookie-consent.active. */
.cookie-consent.is-under-quiz-teaser {
	display: none;
}

/* Короткая формулировка - только для телефона. */
.quiz-teaser__short {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.quiz-teaser {
		transition: none;
	}

	.quiz-teaser__bar,
	.quiz-teaser__gift,
	.quiz-teaser__btn::after {
		animation: none;
	}
}

/* Ниже 1024px zoom у body не действует, поэтому размеры здесь настоящие.
   Граница 1023px, а не 1024: на ровно 1024 уже включается zoom, и мобильная
   плашка растянулась бы на полтора экрана. */
@media (max-width: 1023px) {
	.quiz-teaser {
		bottom: 10px;
		padding: 0px 10px;
	}

	/* На телефоне остаётся одна мысль: подарок, две строки и золотая стрелка.
	   Калькулятор с разделителем уходят - на 375px им места нет. */
	/* На планшете плашка не растягивается на всю ширину - держим её как на
	   телефоне, по центру. */
	.quiz-teaser__bar {
		max-width: 520px;
		min-height: 86px;
		padding: 12px 14px 12px 104px;
		border-radius: 28px;
		animation: none;
	}

	.quiz-teaser__glow {
		left: -20px;
		width: 190px;
		height: 190px;
	}

	.quiz-teaser__gift {
		left: 8px;
		bottom: 4px;
		width: 96px;
		height: 96px;
	}

	.quiz-teaser__item--calc,
	.quiz-teaser__divider {
		display: none;
	}

	.quiz-teaser__item-body {
		gap: 3px;
	}

	/* На телефоне заголовок длиннее, чем на ПК («Калькулятор стоимости» против
	   «Бонус для вас»), и в одну строку рядом с подарком и кнопкой не влезает.
	   Запрет переноса снимаем только здесь: на ПК заголовок короткий и должен
	   оставаться в одну строку. */
	.quiz-teaser__title {
		font-size: 14px;
		white-space: normal;
	}

	.quiz-teaser__text {
		font-size: 13px;
		line-height: 130%;
		white-space: normal;
	}

	.quiz-teaser__long {
		display: none;
	}

	.quiz-teaser__short {
		display: inline;
	}

	/* Кнопка сжимается до золотого кружка со стрелкой. */
	.quiz-teaser__btn {
		width: 48px;
		height: 48px;
		margin-left: 12px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}

	.quiz-teaser__btn-label {
		display: none;
	}

	.quiz-teaser__btn-arrow {
		width: 20px;
		height: 20px;
	}

	/* Крестик выносим на угол плашки, чтобы не толкаться с кнопкой. */
	.quiz-teaser__close {
		position: absolute;
		top: -10px;
		right: 6px;
		width: 30px;
		height: 30px;
		margin: 0;
		background: #fff;
		box-shadow: 0 4px 12px rgba(120, 90, 20, 0.2);
		color: #7c8598;
	}

	.quiz-teaser__close svg {
		width: 11px;
		height: 11px;
	}
}

/* A/B-эксперимент quiz_popup_v1 (config/experiments.php). Атрибут
   data-ab-quiz_popup_v1 на <html> ставит js/experiments.js синхронно в <head>,
   до разбора body - поэтому ни блок, ни тизер не мигают при загрузке.
   A (и все вне эксперимента): блок квиза на странице, тизера нет.
   B: блока квиза нет вовсе, к квизу ведёт только тизер -> попап. */
html[data-ab-quiz_popup_v1="B"] .page__quiz {
	display: none;
}

html:not([data-ab-quiz_popup_v1="B"]) .quiz-teaser {
	display: none;
}