/* модалка квиза — жёсткие правила поверх общих .popup-outer-box / .text-page img */
.popup-outer-box.quiz-popup-outer {
	display: none !important;
	position: fixed !important;
	z-index: 1000 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 15px !important;
	background: rgba(0, 0, 0, 0.7) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	float: none !important;
	max-width: none !important;
}
.popup-outer-box.quiz-popup-outer.active {
	display: -ms-flexbox !important;
	display: flex !important;
}
.popup-outer-box.quiz-popup-outer .popup-box.quiz-modal {
	display: -ms-flexbox !important;
	display: flex !important;
	flex-direction: column !important;
	flex-shrink: 0 !important;
	margin: auto !important;
	position: relative !important;
	z-index: 1001 !important;
	float: none !important;
	/* Figma: карточка на всю ширину контента; сайт default popup = 1170px */
	width: 1170px !important;
	min-width: 0 !important;
	max-width: calc(100vw - 30px) !important;
	max-height: calc(100vh - 30px) !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}
	.quiz-plate-wrap {
		background: #F3FCFF;
		padding: 20px 10px;
	}
	.quiz-plate {
		max-width: 1420px;
		margin: 0 auto;
	}
	.quiz-plate__card {
		background: #fff;
		border-radius: 20px;
		padding: 30px 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
	}
	.quiz-plate__head {
		display: flex;
		align-items: center;
		gap: 15px;
		min-width: 0;
	}
	.quiz-plate__icon {
		flex: 0 0 70px;
		width: 70px;
		height: 70px;
	}
	.quiz-plate__icon img {
		display: block;
		width: 70px;
		height: 70px;
		border-radius: 100px;
		object-fit: cover;
	}
	.quiz-plate__title {
		font: 700 18px/1 Charter, serif;
		color: #000;
		margin-bottom: 10px;
	}
	.quiz-plate__desc {
		font: 300 16px/1.35 'Gotham Pro', sans-serif;
		color: #000;
	}
	.quiz-plate__disclaimer {
		display: flex;
			align-items: flex-start;
		gap: 10px;
		opacity: .3;
		padding: 15px 10px 0;
	}
	.quiz-plate__disclaimer img {
		flex: 0 0 20px;
		margin-top: 1px;
	}
	.quiz-plate__disclaimer span {
		font: 300 14px/1.35 'Gotham Pro', sans-serif;
		color: #000;
	}

	/* кнопка (двойная обводка как в макете) */
	.quiz-btn {
		display: inline-block;
		border: 2px solid #2BAFE6;
		background: #fff;
		border-radius: 40px;
		padding: 4px;
		cursor: pointer;
		text-align: center;
		max-width: 100%;
	}
	.quiz-btn__in {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		background: #2BAFE6;
		color: #fff;
		border-radius: 50px;
		padding: 9px 40px;
		font: 500 16px/1.2 'Gotham Pro', sans-serif;
	}
	.quiz-btn--lg .quiz-btn__in {
		padding: 16px 50px;
	}
	.quiz-btn--urgent,
	a.quiz-btn--urgent {
		border-color: #C42225 !important;
	}
	.quiz-btn--urgent .quiz-btn__in,
	a.quiz-btn--urgent .quiz-btn__in {
		background: #C42225 !important;
		color: #fff !important;
	}
	.quiz-btn[disabled] {
		display: none;
	}
	.quiz-btn[hidden] {
		display: none !important;
	}
	.quiz-btn[disabled] {
		display: inline-block;
		opacity: .45;
		cursor: default;
	}
	.quiz-btn__arrow {
		flex: none;
	}

	/* модалка */
	.quiz-popup-outer {
		overflow-y: auto;
	}
	.quiz-popup-outer .popup-box.quiz-modal {
		width: 1170px;
		max-width: calc(100vw - 30px);
		background: #fff;
		border-radius: 20px;
		overflow: visible;
	}
	.quiz-modal__close {
		position: absolute;
		top: -14px;
		right: -14px;
		width: 36px;
		height: 36px;
		border: none;
		border-radius: 50%;
		background: #fff;
		color: #2BAFE6;
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
		z-index: 5;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	}
	.quiz-screen {
		display: none;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
	.quiz-screen.is-active {
		display: block;
	}
	/* Figma: gap 30 между Frame 10 (9-105) и Frame 8 (9-83);
	   .quiz-screen.is-active {display:block} иначе перебивает flex+gap у .quiz-start */
	.quiz-screen.quiz-start.is-active,
	.quiz-start.is-active {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 30px;
	}
	.quiz-start:not(.is-active) {
		display: none !important;
	}
	.quiz-q:not(.is-active) {
		display: none !important;
	}
	.quiz-q.is-active {
		display: -ms-flexbox !important;
		display: flex !important;
	}


	/* стартовый экран */
	.quiz-start {
		padding: 30px 40px;
		/* display только через .is-active — иначе старт не прячется при вопросах */
	}
	.quiz-start__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
		margin-bottom: 0;
		min-width: 0;
	}
	/* Figma 6:8 Frame 1 — horizontal: hug (по контенту), не fill */
	.quiz-start__top > div:first-child {
		flex: 0 1 auto;
		min-width: 0;
		max-width: 100%;
	}
	.quiz-start__title {
		font: 700 35px/1 Charter, serif;
		color: #000;
		margin: 0 0 10px;
		max-width: 100%;
	}
	.quiz-start__sub {
		font: 300 16px/1.3 'Gotham Pro', sans-serif;
		color: #000;
		margin: 0;
		max-width: 100%;
	}
	.quiz-start__illustration {
		flex: 0 0 291px;
		width: 291px;
		height: 130px;
		max-width: 291px;
		max-height: 130px;
		overflow: hidden;
	}
	.quiz-start__illustration img {
		display: block;
		width: 291px;
		height: 130px;
		max-width: 291px !important;
		max-height: 130px !important;
		border-radius: 30px;
		object-fit: contain;
		background: #F3F9FD;
		border: 1px solid rgba(0, 0, 0, .05);
		box-sizing: border-box;
		float: none !important;
		margin: 0 !important;
	}
	.quiz-start__bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 30px;
	}
	.quiz-start__teasers {
		display: flex;
		align-items: stretch;
		gap: 15px;
		flex: 1;
		min-width: 0;
		margin-bottom: 0;
	}
	.quiz-teaser {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		flex: 1;
		min-width: 0;
	}
	.quiz-teaser + .quiz-teaser {
		border-left: 1px solid #00699C;
		padding-left: 15px;
	}
	.quiz-teaser__icon {
		flex: none;
		width: 22px;
		height: 22px;
	}
	.quiz-teaser__title {
		font: 500 16px/1.2 'Gotham Pro', sans-serif;
		color: #00699C;
		margin-bottom: 6px;
	}
	.quiz-teaser__text {
		font: 300 14px/1.3 'Gotham Pro', sans-serif;
		color: #000;
	}
	.quiz-start__cta {
		display: block;
		width: auto;
		flex: none;
	}
	.quiz-start__cta .quiz-btn__in {
		width: auto;
	}

	/* вопрос */
	.quiz-q {
		padding: 30px 40px;
		min-height: 313px;
		display: none;
		flex-direction: column;
		gap: 25px;
	}
	.quiz-q.is-active {
		display: flex;
	}
	.quiz-q__top {
		display: flex;
		align-items: center;
		gap: 30px;
	}
	.quiz-q__counter {
		flex: none;
		width: 65px;
		font: 500 16px/1 'Gotham Pro', sans-serif;
		color: #000;
		opacity: .3;
	}
	.quiz-q__bar {
		flex: 1;
		height: 8px;
		background: #F3F9FD;
		border-radius: 50px;
		overflow: hidden;
	}
	.quiz-q__bar-fill {
		height: 100%;
		width: 0;
		background: #2BAFE6;
		border-radius: 40px;
		transition: width .3s ease;
	}
	.quiz-q__body {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}
	.quiz-q__text {
		font: 400 22px/1.2 Charter, serif;
		color: #000;
	}
	.quiz-q__opts {
		display: flex;
		align-items: stretch;
		gap: 24px;
	}
	.quiz-opt {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: 1;
		min-width: 0;
		padding: 20px;
		background: #fff;
		border: 1px solid #D7E5EF;
		border-radius: 12px;
		font: 300 16px/1.3 'Gotham Pro', sans-serif;
		color: #1F2937;
		cursor: pointer;
		text-align: left;
	}
	.quiz-opt.is-active {
		border-color: #00699C;
	}
	.quiz-opt__radio {
		flex: none;
		position: relative;
		width: 20px;
		height: 20px;
		border: 1px solid #D7E5EF;
		border-radius: 50%;
		background: #fff;
	}
	.quiz-opt.is-active .quiz-opt__radio {
		border: 2px solid #00699C;
	}
	.quiz-opt.is-active .quiz-opt__radio::after {
		content: "";
		position: absolute;
		left: 3px;
		top: 3px;
		right: 3px;
		bottom: 3px;
		border-radius: 50%;
		background: #00699C;
	}
	.quiz-q__nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 15px;
	}
	.quiz-q__back {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		background: none;
		border: none;
		padding: 0;
		font: 500 16px/1 'Gotham Pro', sans-serif;
		color: #2BAFE6;
		cursor: pointer;
	}

	/* результат */
	.quiz-result {
		padding: 30px 40px;
	}
	.quiz-result__grid {
		display: flex;
		align-items: stretch;
		gap: 50px;
	}
	.quiz-result__left {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 20px;
	}
	.quiz-result__info {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.quiz-result__head {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-width: 0;
	}
	.quiz-result__icon {
		flex: none;
		display: block;
		width: 30px;
		height: 30px;
	}
	.quiz-result__title {
		margin: 0;
		font: 400 25px/1.2 Charter, serif;
		color: #000;
	}
	/* Figma 9-874: заголовок опасного результата #C42225 */
	.quiz-result.is-urgent .quiz-result__title {
		color: #C42225;
	}
	.quiz-result__text {
		margin: 0;
		font: 300 16px/1.2 'Gotham Pro', sans-serif;
		color: #000;
	}
	/* Figma 9:874 — <a> внутри .text-page: гасим .text-page a и site link-стили */
	.popup-outer-box.quiz-popup-outer a.quiz-result__urgent,
	.popup-outer-box.quiz-popup-outer .quiz-btn.quiz-btn--urgent.quiz-result__urgent,
	a.quiz-btn.quiz-btn--urgent.quiz-result__urgent {
		align-self: flex-start;
		display: inline-block !important;
		box-sizing: border-box !important;
		border: 2px solid #C42225 !important;
		border-bottom: 2px solid #C42225 !important;
		background: #fff !important;
		border-radius: 40px !important;
		padding: 4px !important;
		margin: 0 !important;
		text-decoration: none !important;
		color: #fff !important;
		vertical-align: top;
		line-height: 1.2 !important;
		height: auto !important;
		max-width: 100% !important;
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
	}
	.popup-outer-box.quiz-popup-outer a.quiz-result__urgent .quiz-btn__in,
	a.quiz-btn.quiz-btn--urgent.quiz-result__urgent .quiz-btn__in {
		display: -ms-flexbox !important;
		display: flex !important;
		-webkit-box-align: center !important;
		-ms-flex-align: center !important;
		align-items: center !important;
		-webkit-box-pack: center !important;
		-ms-flex-pack: center !important;
		justify-content: center !important;
		gap: 10px;
		background: #C42225 !important;
		color: #fff !important;
		border: none !important;
		border-bottom: none !important;
		border-radius: 50px !important;
		padding: 10px 20px !important;
		margin: 0 !important;
		font: 500 16px/1.2 'Gotham Pro', sans-serif !important;
		text-decoration: none !important;
		text-align: center;
		width: auto !important;
		min-width: 0;
		min-height: 0 !important;
		height: auto !important;
		box-sizing: border-box !important;
		opacity: 1 !important;
	}
	/* [hidden] должен побеждать display:inline-block !important у самой кнопки
	   (специфичность (0,3,1) > (0,2,0)) — иначе кнопка видна на всех рангах */
	.popup-outer-box.quiz-popup-outer a.quiz-btn.quiz-btn--urgent.quiz-result__urgent[hidden],
	.popup-outer-box.quiz-popup-outer .quiz-btn.quiz-btn--urgent.quiz-result__urgent[hidden],
	a.quiz-btn.quiz-btn--urgent.quiz-result__urgent[hidden],
	.quiz-result__urgent[hidden] {
		display: none !important;
	}
	.quiz-result__restart {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		background: none;
		border: none;
		padding: 0;
		font: 500 16px/1 'Gotham Pro', sans-serif;
		color: #2BAFE6;
		cursor: pointer;
	}
	.quiz-form {
		flex: 0 0 340px;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}
	.quiz-form__input {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 15px;
		border: 1px solid #2BAFE6;
		border-radius: 15px;
		font: 300 16px/1.3 'Gotham Pro', sans-serif;
		color: #1F2937;
		outline: none;
	}
	.quiz-form__input::placeholder {
		color: #828282;
	}
	.quiz-form__input.input-error {
		border-color: #C42225;
	}
	.quiz-form__submit {
		width: 100%;
		border: none;
		padding: 4px;
		background: none;
	}
	.quiz-form__submit .quiz-btn__in {
		width: 100%;
		padding: 14px 30px;
	}
	.quiz-form__consent {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		cursor: pointer;
	}
	.quiz-form__consent input {
		flex: none;
		margin: 0;
		width: 20px;
		height: 20px;
		accent-color: #2BAFE6;
	}
	.quiz-form__consent span {
		font: 300 12px/1.4 'Gotham Pro', sans-serif;
		color: #828282;
	}
	.quiz-form__consent a {
		color: #2BAFE6;
		text-decoration: underline;
	}
	.quiz-form__error {
		font: 300 13px/1.3 'Gotham Pro', sans-serif;
		color: #C42225;
	}
	.quiz-form__success {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 150px;
		text-align: center;
		font: 500 16px/1.4 'Gotham Pro', sans-serif;
		color: #00699C;
		border: 1px solid #D7E5EF;
		border-radius: 15px;
		padding: 20px;
	}

	@media (max-width: 768px) {
		.quiz-plate-wrap {
			padding: 20px 10px;
		}
		.quiz-plate__card {
			flex-direction: column;
			align-items: stretch;
			gap: 20px;
			padding: 15px;
		}
		.quiz-plate__head {
			flex-direction: column;
			align-items: flex-start;
			gap: 20px;
		}
		.quiz-plate__card .quiz-btn {
			width: 100%;
		}
		.quiz-plate__card .quiz-btn__in {
			width: 100%;
		}
		.quiz-plate__disclaimer {
			padding: 15px 0 0;
		}
		.quiz-popup-outer .popup-box.quiz-modal {
			width: 100%;
		}
		.quiz-modal__close {
			top: -20px;
			right: 8px;
		}
		.quiz-start {
			padding: 15px;
		}
		.quiz-start__top {
			flex-direction: column;
			align-items: stretch;
			gap: 25px;
			margin-bottom: 25px;
		}
		.quiz-start__title {
			font-size: 30px;
		}
		.quiz-start__illustration {
			display: none;
		}
		.quiz-start__bottom {
			flex-direction: column;
			align-items: stretch;
			gap: 25px;
		}
		.quiz-start__teasers {
			flex-direction: column;
			gap: 11px;
			margin-bottom: 0;
		}
		.quiz-start__cta,
		.quiz-start__cta .quiz-btn__in {
			width: 100%;
		}
		.quiz-teaser {
			padding: 0;
		}
		.quiz-teaser + .quiz-teaser {
			border-left: none;
			border-top: 1px solid #00699C;
			padding-left: 0;
			padding-top: 11px;
		}
		.quiz-btn--lg .quiz-btn__in {
			padding: 16px 50px;
		}
		.quiz-q {
			padding: 15px;
			min-height: 403px;
			gap: 30px;
		}
		.quiz-q__text {
			font-size: 20px;
		}
		.quiz-q__opts {
			flex-direction: column;
			gap: 10px;
		}
		.quiz-result {
			padding: 15px;
		}
		.quiz-result__grid {
			flex-direction: column;
			gap: 30px;
		}
		.quiz-result__left {
			display: contents;
		}
		.quiz-result__info {
			order: 1;
		}
		.quiz-result__urgent {
			order: 2;
			margin-top: 10px;
		}
		.quiz-form {
			order: 3;
			flex: none;
		}
		.quiz-result__restart {
			order: 4;
		}
		.quiz-result__title {
			font-size: 18px;
		}
		.quiz-result__icon {
			width: 28px;
			height: 28px;
		}
	}

/* перебиваем .text-page img:not(...){width:100%!important} — спека (0,7,1) */
/* .skip-template входит в :not() исходного правила — оно просто не применяется */
.text-page img.skip-template,
.text-page .quiz-popup-outer img,
.text-page .quiz-plate-wrap img,
.popup-outer-box.quiz-popup-outer img,
.quiz-popup-outer img.skip-template,
.quiz-plate-wrap img.skip-template,
.quiz-teaser__icon.skip-template,
img.quiz-teaser__icon.skip-template,
img.skip-template.quiz-result__icon,
img.skip-template.quiz-start__illustration,
.quiz-start__illustration img.skip-template,
img.skip-template.quiz-plate-icon {
	float: none !important;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	float: none;
}

img.quiz-teaser__icon.skip-template,
.text-page img.quiz-teaser__icon.skip-template,
.popup-outer-box.quiz-popup-outer img.quiz-teaser__icon {
	float: none !important;
	display: block !important;
	width: 22px !important;
	height: 22px !important;
	max-width: 22px !important;
	min-width: 22px !important;
	margin: 0 !important;
	margin-right: 0 !important;
	object-fit: contain !important;
	border: 0 !important;
}

img.skip-template.quiz-plate-icon,
.quiz-plate__icon img.skip-template,
.text-page .quiz-plate__icon img.skip-template {
	float: none !important;
	width: 70px !important;
	height: 70px !important;
	max-width: 70px !important;
	margin: 0 !important;
	margin-right: 0 !important;
}

.quiz-start__illustration img.skip-template,
.text-page .quiz-start__illustration img.skip-template,
.popup-outer-box.quiz-popup-outer .quiz-start__illustration img,
.text-page .quiz-start__illustration img.skip-template {
	float: none !important;
	display: block !important;
	width: 291px !important;
	height: 130px !important;
	max-width: 291px !important;
	max-height: 130px !important;
	margin: 0 !important;
	margin-right: 0 !important;
	border: 1px solid rgba(0, 0, 0, .05) !important;
	box-sizing: border-box !important;
	object-fit: contain !important;
}

img.quiz-result__icon.skip-template,
.text-page img.quiz-result__icon.skip-template,
.popup-outer-box.quiz-popup-outer img.quiz-result__icon {
	float: none !important;
	width: 30px !important;
	height: 30px !important;
	max-width: 30px !important;
	margin: 0 !important;
	margin-right: 0 !important;
}