/* ============================================================
   Модалка «Получить консультацию» и «Успешно отправлено» (cs-*).
   Шаблон: themes/new2/consult.tpl, скрипт: js/consult.js
   ============================================================ */
.cs[hidden] { display: none; }
.cs, .cs * { box-sizing: border-box; }
.cs {
	position: fixed;
	inset: 0;
	z-index: 100001;
	overflow-y: auto;
	display: flex;
	padding: 24px 16px;
}
.cs, .cs div, .cs span, .cs label, .cs p, .cs a, .cs input, .cs textarea, .cs button, .cs h2 {
	font-family: "Mulish", Arial, sans-serif;
}
.cs__overlay { position: fixed; inset: 0; background: rgba(20, 16, 12, .6); }
.cs__dialog { position: relative; width: 564px; max-width: 100%; margin: auto; }
.cs button { cursor: pointer; }
:where(.cs) h2, :where(.cs) p, :where(.cs) label { margin: 0; padding: 0; }
.cs a { text-decoration: none; }

.cs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 25px;
	padding: 50px;
	border-radius: 30px;
	background: #fff;
	color: #000;
}
.cs-card[hidden] { display: none; }
.cs-x {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 37px;
	height: 37px;
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	line-height: 0;
	opacity: .85;
}
.cs-x:hover { opacity: 1; }

.cs-head { display: flex; flex-direction: column; gap: 21px; }
.cs .cs-title { font-size: 45px; line-height: 42px; font-weight: 600; text-transform: none; letter-spacing: normal; text-align: left; color: #000; padding-right: 36px; }
.cs .cs-title--done { font-size: 33px; line-height: 34px; font-weight: 500; padding-right: 0; }
.cs .cs-sub { font-size: 15px; line-height: 21px; font-weight: 400; text-align: left; color: #666; }

.cs-form { display: flex; flex-direction: column; gap: 25px; }
.cs-fields { display: flex; flex-direction: column; gap: 12px; }
.cs-input {
	width: 100%;
	height: 54px;
	padding: 15px 24px;
	border: 1px solid #efefee;
	border-radius: 50px;
	background: #fff;
	font-size: 15px;
	line-height: 21px;
	color: #000;
	outline: 0;
	transition: border-color .2s;
}
.cs-input::placeholder { color: #666; opacity: .5; }
.cs-input:focus { border-color: #daaf76; }
.cs-input--area { height: 130px; padding-top: 21px; border-radius: 20px; resize: none; }
.cs-input.is-error { border-color: #d3392f; }

.cs-attach { display: flex; flex-direction: column; gap: 11px; }
.cs-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;
	line-height: 21px;
	color: #666;
	cursor: pointer;
}
.cs-attach__btn:hover { border-color: #000; }
.cs-files { display: flex; flex-wrap: wrap; gap: 12px; padding-left: 24px; }
.cs-files:empty { display: none; }
.cs-file { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; line-height: 21px; color: #666; }
.cs-file button { display: inline-flex; width: 20px; height: 20px; padding: 0; border: 0; background: none; line-height: 0; opacity: .9; }
.cs-file button:hover { opacity: 1; }
.cs-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.cs-error { padding: 10px 16px; border-radius: 10px; background: #fdecea; color: #a52a22; font-size: 14px; line-height: 18px; }
.cs-error[hidden] { display: none; }

.cs-agree { position: relative; display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 17px; color: #666; cursor: pointer; }
.cs-agree input { position: absolute; opacity: 0; }
.cs-agree i { flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid #666; border-radius: 3px; background: #fff; }
.cs-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;
}
.cs-agree.is-error i { border-color: #d3392f; }
.cs-agree a { color: #daaf76; text-decoration: underline; }

.cs-btn {
	align-self: flex-start;
	padding: 20px 37px;
	border: 0;
	border-radius: 50px;
	background: #daaf76;
	font-size: 16px;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
	color: #000;
	transition: background .2s;
}
.cs-btn:hover { background: #e3bb85; }
.cs-btn:disabled { opacity: .6; cursor: default; }

/* окно успеха */
.cs-card--done { gap: 22px; padding: 22px 50px 42px; }
.cs-card--done .cs-x { display: none; }
.cs-done__ico { display: block; margin-bottom: -16px; }

body.cs-lock { overflow: hidden; }

@media (max-width: 600px) {
	.cs { padding: 12px 10px; }
	.cs-card { padding: 30px 20px 28px; gap: 20px; border-radius: 24px; }
	.cs-x { top: 14px; right: 14px; width: 32px; height: 32px; }
	.cs-x svg { width: 32px; height: 32px; }
	.cs .cs-title { font-size: 32px; line-height: 34px; }
	.cs .cs-title--done { font-size: 26px; line-height: 30px; }
	.cs-card--done { padding: 22px 20px 30px; }
	.cs-btn { align-self: stretch; text-align: center; }
}

/* ---- состояния полей (макет 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; }

/* длинные заголовки (название кнопки) */
.cs .cs-title--long { font-size: 34px; line-height: 38px; }
@media (max-width: 600px) { .cs .cs-title--long { font-size: 26px; line-height: 30px; } }