/* ============================================================
   Модалка-квиз «Подбор ковра» (десктоп), классы qz-*.
   Шаблон: themes/new2/quiz.tpl, скрипт: js/quiz.js
   ============================================================ */
.qz[hidden] { display: none; }
.qz,
.qz * { box-sizing: border-box; }
.qz {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow-y: auto;
	display: flex;
	padding: 24px 16px;
	font-family: "Mulish", "Proxima Nova", Arial, sans-serif;
}
.qz__overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 16, 12, .72);
}
.qz__dialog {
	position: relative;
	width: 800px;
	max-width: 100%;
	margin: auto;
}
.qz button { font-family: inherit; cursor: pointer; }
:where(.qz) h2, :where(.qz) p, :where(.qz) label { margin: 0; padding: 0; }
.qz a { text-decoration: none; }

/* карточка */
.qz-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 39px 38px;
	border-radius: 30px;
	background:
		radial-gradient(circle at 92% 8%, rgba(218, 175, 117, .22) 0, rgba(218, 175, 117, 0) 42%),
		linear-gradient(135deg, #fffdf9 0%, #fdf4de 100%);
	overflow: hidden;
	color: #000;
}
.qz-card[hidden] { display: none; }
.qz-x {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	width: 37px;
	height: 37px;
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	line-height: 0;
	opacity: .85;
}
.qz-x:hover { opacity: 1; }

/* шапка шага */
.qz-head { display: flex; flex-direction: column; gap: 13px; width: 430px; max-width: 100%; margin-bottom: 26px; }
.qz-step { font-size: 16px; line-height: 21px; font-weight: 700; text-transform: uppercase; color: #daaf76; }
.qz-bar { display: flex; gap: 5px; width: 199px; }
.qz-bar i { flex: 1; height: 2px; border-radius: 10px; background: #efefee; }
.qz-bar i.on { background: #daaf76; }

.qz-title { font-size: 30px; line-height: 40px; font-weight: 700; color: #000; padding-right: 40px !important; }
.qz-title--done { font-size: 35px; line-height: 38px; }
.qz-title--done span { color: #daaf76; }
.qz-sub { margin-top: 17px !important; width: 493px; max-width: 100%; font-size: 14px; line-height: 18px; color: #666; }
.qz-title + .qz-opts, .qz-sub + .qz-opts { margin-top: 21px; }
.qz-opts:first-child { margin-top: 0; }

/* варианты */
.qz-opts { display: grid; gap: 14px; margin-top: 21px; margin-bottom: 32px; }
.qz-opts--1 { grid-template-columns: 1fr; }
.qz-opts--2 { grid-template-columns: 1fr 1fr; }
.qz-opts--3 { grid-template-columns: 1fr 1fr 1fr; }
.qz-opt {
	position: relative;
	display: block;
	min-height: 60px;
	cursor: pointer;
}
.qz-opts--tall .qz-opt { min-height: 78px; }
.qz-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qz-opt__body {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	min-height: inherit;
	padding: 16px 34px 16px 16px;
	background: #fcf9f8;
	border: 1px solid #f3ebe6;
	border-radius: 10px;
	transition: border-color .2s, background .2s;
}
.qz-opt:hover .qz-opt__body { border-color: #e6d3b8; }
.qz-opt__txt { display: flex; flex-direction: column; gap: 10px; }
.qz-opt__name { font-size: 15px; line-height: 1.2; font-weight: 600; color: #000; }
.qz-opt__desc { font-size: 13px; line-height: 1.25; font-weight: 400; color: #666; }
.qz-opt__sw { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 3px; }
.qz-opt__mark {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 20px;
	height: 20px;
	border: 1px solid #c9c4be;
	border-radius: 50%;
	background: #fff;
	transition: all .2s;
}
.qz-opt input[type=checkbox] ~ .qz-opt__mark { border-radius: 5px; }
.qz-opt input:checked ~ .qz-opt__body { border-color: #daaf76; background: #fff8ea; }
.qz-opt input:checked ~ .qz-opt__mark {
	border-color: #daaf76;
	background: #daaf76 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.qz-opt input:focus-visible ~ .qz-opt__body { outline: 2px solid #daaf76; outline-offset: 2px; }

/* кнопки */
.qz-nav { display: flex; align-items: center; justify-content: space-between; }
.qz-nav [data-qz-next]:only-child { margin-left: auto; }
.qz-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	border-radius: 50px;
	font-size: 14px;
	line-height: 24px;
	font-weight: 700;
	text-transform: uppercase;
	transition: opacity .2s, background .2s;
}
.qz-btn--gold { background: #daaf76; color: #000; padding: 9px 19px 9px 10px; }
.qz-btn--gold:hover { background: #e3bb85; }
.qz-btn--dark { background: #000; color: #fff; padding: 9px 10px 9px 19px; }
.qz-btn--dark:hover { background: #303131; }
.qz-btn:disabled { opacity: .35; cursor: default; }
.qz-btn--dark:disabled:hover { background: #000; }
.qz-btn--start { padding: 15px 21px 15px 30px; font-size: 17px; }
.qz-btn--send { padding: 20px 37px; font-size: 16px; }
.qz-btn--send:disabled { opacity: .6; }

/* стартовая карточка */
.qz-card--intro {
	min-height: 553px;
	padding: 39px 38px 56px 60px;
	justify-content: center;
	background:
		radial-gradient(circle at 88% 50%, rgba(218, 175, 117, .42) 0, rgba(218, 175, 117, .12) 28%, rgba(218, 175, 117, 0) 46%),
		repeating-radial-gradient(circle at 88% 50%, rgba(218, 175, 117, .16) 0 2px, transparent 2px 22px),
		#17120d;
}
.qz-intro__frame {
	position: absolute;
	inset: 16px;
	border: 2px solid #fff;
	border-radius: 30px;
	opacity: .13;
	pointer-events: none;
}
.qz-card--intro .qz-x { color: #fff; }
.qz-intro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 17px; width: 397px; }
.qz-intro__logo { display: block; box-shadow: 0 0 19px #daaf75; }
.qz-intro__title {
	margin-top: 9px !important;
	font-family: "Philosopher", Georgia, serif;
	font-size: 40px;
	line-height: 40px;
	font-weight: 700;
	text-align: center;
	color: #fff;
}
.qz-intro__title span { color: #daaf76; }
.qz-intro__line { display: block; width: 53px; height: 1px; margin: 9px 0; background: #daaf76; }
.qz-intro__text { font-size: 16px; line-height: 22px; font-weight: 500; text-align: center; color: #fff; }
.qz-intro__text b { font-weight: 500; color: #daaf76; }
.qz-btn--start { margin-top: 15px; }

/* форма контактов */
.qz-form { display: flex; flex-direction: column; }
.qz-form .qz-sub { margin-bottom: 23px; }
.qz-fields { display: flex; flex-direction: column; gap: 12px; }
.qz-row { display: flex; gap: 12px; }
.qz-input {
	flex: 1 1 0;
	min-width: 0;
	height: 54px;
	padding: 15px 24px;
	border: 1px solid #efefee;
	border-radius: 50px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	line-height: 21px;
	color: #000;
	outline: 0;
	transition: border-color .2s;
}
.qz-input::placeholder { color: #666; opacity: .5; }
.qz-input:focus { border-color: #daaf76; }
.qz-input--area { flex: none; width: 100%; height: 130px; padding-top: 21px; border-radius: 20px; resize: none; }
.qz-input.is-error { border-color: #d3392f; }
.qz-attach { display: flex; flex-direction: column; gap: 11px; }
.qz-attach__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 54px;
	padding: 15px 24px;
	border: 1px solid #666;
	border-radius: 50px;
	background: linear-gradient(-37.63deg, #fff 0%, #f9f9f9 100%);
	font-size: 15px;
	color: #666;
	cursor: pointer;
}
.qz-attach__btn:hover { border-color: #000; }
.qz-files { display: flex; flex-wrap: wrap; gap: 12px; padding-left: 24px; }
.qz-files:empty { display: none; }
.qz-file { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; line-height: 21px; color: #666; }
.qz-file button { width: 20px; height: 20px; padding: 0; border: 0; background: none; color: #666; font-size: 18px; line-height: 20px; }
.qz-file button:hover { color: #000; }
.qz-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.qz-error { margin-top: 14px; padding: 10px 16px; border-radius: 10px; background: #fdecea; color: #a52a22; font-size: 14px; line-height: 18px; }
.qz-error[hidden] { display: none; }
.qz-send { display: flex; align-items: center; gap: 20px; margin-top: 23px; }
.qz-agree { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 408px; font-size: 14px; line-height: 17px; color: #666; cursor: pointer; }
.qz-agree input { position: absolute; opacity: 0; }
.qz-agree i { flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid #666; border-radius: 3px; background: #fff; }
.qz-agree input:checked + i {
	background: #daaf76 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 11.5l3.5 3.5 7-7.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
	border-color: #daaf76;
}
.qz-agree.is-error i { border-color: #d3392f; }
.qz-agree a { color: #daaf76; text-decoration: underline; }
.qz-nav--form { margin-top: 26px; }
.qz-card--thanks .qz-nav { margin-top: 32px; justify-content: flex-start; }

body.qz-lock { overflow: hidden; }

/* сброс глобальных стилей h2/p/label сайта */
.qz h2 { text-transform: none; letter-spacing: normal; text-align: left; font-family: "Mulish", Arial, sans-serif; }
.qz .qz-intro__title { font-family: "Philosopher", Georgia, serif; text-align: center; }
:where(.qz) p { padding: 0; text-align: left; }
.qz .qz-intro__text { text-align: center; }
.qz ul, .qz li { margin: 0; padding: 0; }

/* ---- состояния элементов (макет «Шаги / Frame…») ---- */
.qz-opt__body { background: #fff9ea; border: 1px solid transparent; }
.qz-opt:hover .qz-opt__body { border-color: #ecd9b6; }
.qz-opt__mark { border: 1px solid #303131; background: transparent; }
.qz-opt input[type=checkbox] ~ .qz-opt__mark { border-radius: 50%; }
.qz-opt input:checked ~ .qz-opt__body { background: #fff9ea; border-color: #e0b873; }
.qz-opt input:checked ~ .qz-opt__body .qz-opt__name { color: #e3bd83; }
.qz-opt input:checked ~ .qz-opt__mark {
	border-color: #e0b873;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.4l3 3 5.4-6' fill='none' stroke='%23e0b873' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.qz-btn--dark:disabled, .qz-btn--dark:disabled:hover { background: #daaf76; color: #fff; opacity: 1; cursor: default; }
.qz-btn--dark:not(:disabled):hover { background: #303131; }
.qz-btn--gold:not(.qz-btn--start):not(.qz-btn--send):hover { background: #000; color: #fff; }

/* ---- фоновые картинки из макета ---- */
.qz-card {
	background: #fffcf6 url("/themes/new2/img/quiz/bg-light.png") right top / 800px auto no-repeat;
}
.qz-card--intro {
	background: #1a1a1c url("/themes/new2/img/quiz/bg-dark.png") center / cover no-repeat;
}

/* на первом шаге кнопки «Назад» нет */
.qz-card[data-qz-step="1"] [data-qz-prev] { display: none; }
.qz-nav [data-qz-next] { margin-left: auto; }

/* ковёр-логотип (PNG уже со свечением) и линия-разделитель из макета */
.qz-intro__logo { box-shadow: none; margin: -19px -19px -2px; }
.qz-intro__line { width: 65px; height: 12px; margin: 9px 0; background: none; }

/* шрифты: перебиваем глобальные правила сайта (Proxima Nova) */
.qz, .qz div, .qz span, .qz label, .qz p, .qz b, .qz a, .qz input, .qz textarea, .qz button, .qz h2 {
	font-family: "Mulish", Arial, sans-serif;
}
.qz .qz-intro__title, .qz .qz-intro__title span { font-family: "Philosopher", Georgia, serif; }
.qz .qz-opt__name { font-weight: 600; }

.qz-file button { display: inline-flex; align-items: center; justify-content: center; line-height: 0; opacity: .9; }
.qz-file button:hover { opacity: 1; }
.qz-file button svg { display: block; }

/* ---- состояния полей (макет Frame 142): по умолчанию / ховер / заполнено; без стрелки у текстовых полей ---- */
.qz-input, .cs-input, .pf .pf__field, .pf__select {
	background: #fff;
	border: 1px solid #f6efe6;
	color: #303131;
	transition: background 0.2s, border-color 0.2s;
}
.qz-input:hover, .cs-input:hover, .pf .pf__field:hover, .pf__select:hover {
	background: #fcf6ec;
	border-color: #f0e4d4;
}
.qz-input:focus, .cs-input:focus, .pf .pf__field:focus, .pf__select:focus-within {
	background: #fff;
	border-color: #666;
}
.qz-input:not(:placeholder-shown), .cs-input:not(:placeholder-shown), .pf .pf__field:not(:placeholder-shown),
.pf__select:has(select:valid) {
	background: #fff;
	border-color: #666;
	color: #303131;
}
.qz-input.is-error, .cs-input.is-error, .pf .pf__field.is-error, .pf__select.is-error { border-color: #d3392f; }

/* ---- «Прикрепить фото»: те же состояния, что у полей ---- */
.qz-attach__btn, .cs-attach__btn {
	background: #fff;
	border: 1px solid #f6efe6;
	color: #666;
	transition: background 0.2s, border-color 0.2s;
}
.qz-attach__btn:hover, .cs-attach__btn:hover {
	background: linear-gradient(322deg, #FFF 0%, #F9F9F9 98.95%);
	border-color: #f0e4d4;
}
.qz-attach.has-files .qz-attach__btn, .cs-attach.has-files .cs-attach__btn {
	border: 1px solid #666;
	background: linear-gradient(322deg, #FFF 0%, #F9F9F9 98.95%);
	backdrop-filter: blur(8.5px);
}

/* ---- единые состояния всех полей (итог): по умолчанию / ховер / заполнено ---- */
.qz-input, .cs-input, .pf .pf__field, .pf__select, .qz-attach__btn, .cs-attach__btn {
	background: #fff;
	border: 1px solid #efefee;
	transition: background 0.2s, border-color 0.2s;
}
.qz-input:hover, .cs-input:hover, .pf .pf__field:hover, .pf__select:hover, .qz-attach__btn:hover, .cs-attach__btn:hover {
	background: linear-gradient(322deg, #FFF 0%, #F9F9F9 98.95%);
	border-color: #efefee;
}
.qz-input:focus, .cs-input:focus, .pf .pf__field:focus, .pf__select:focus-within,
.qz-input:not(:placeholder-shown), .cs-input:not(:placeholder-shown), .pf .pf__field:not(:placeholder-shown),
.pf__select:has(select:valid),
.qz-attach.has-files .qz-attach__btn, .cs-attach.has-files .cs-attach__btn {
	background: linear-gradient(322deg, #FFF 0%, #F9F9F9 98.95%);
	border: 1px solid #666;
	backdrop-filter: blur(8.5px);
}
.qz-input.is-error, .cs-input.is-error, .pf .pf__field.is-error, .pf__select.is-error { border-color: #d3392f; }
