/* Start:/local/templates/new100del/components/bitrix/form.result.new/feedback/style.css?176975265510002*/
:root {
	--gap: 20px;
	--border: 1px solid #EBEBEB;
	--color-text: #4A4A49;
	--color-field: #878785;
	--color-accent: #EA5B0C;
	--color-white: #fff;
	--color-border-hover: #d0d0d0;
	--color-danger: #ff4444;

	--input-height: 57px;

	--fs-h1: 2.5rem;
	--fs-h2: 1.5rem;
	--fs-input: 1.125rem;
	--fs-button: 1.125rem;
	--fs-base: 1rem;
	--fs-label: 0.75rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

select {
	background: transparent none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23878785' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 7px;
}

select:focus {
	background-color: #EBEBEB;
	outline: none;
	border-color: var(--color-text);
}

select option {
	background-color: #f8f8f8;
	padding: 0.625rem;
}

.feedback {
	font-size: var(--fs-base);
	margin-bottom: 11vh;
}

.feedback__title {
	font-weight: 500;
	font-size: var(--fs-h1);
	line-height: 1.3;
	margin-bottom: 1rem;
	color: var(--color-text);
}

.feedback__desc {
	font-weight: 400;
	font-size: var(--fs-h2);
	line-height: 1.4;
	margin-bottom: 2.5rem;
	color: var(--color-text);
}

.feedback__body {
	display: flex;
	gap: var(--gap);
	align-items: flex-start;
}

.feedback__form {
	flex: 0 0 66%;
	width: 100%;
}

.feedback__contacts {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: var(--gap);
	border: none;
	padding: 0;
	margin: 0;
}

.feedback__field,
.feedback__field-input-file,
.feedback__message {
	font-size: var(--fs-input);
	color: var(--color-text);
	border: var(--border);
	transition: border-color 0.2s ease;
}

.feedback__field {
	flex: 0 0 calc(50% - var(--gap) / 2);
	width: 100%;
	min-height: var(--input-height);
	padding: 0 0.625rem;
}

.feedback__field::placeholder,
.feedback__message::placeholder {
	color: var(--color-field);
}

input:not(:placeholder-shown),
textarea:not(:placeholder-shown),
select:not(:placeholder-shown) {
	border-color: #878785;
	outline: none;
}

.feedback__field:hover,
.feedback__field-input-file:hover,
.feedback__message:hover {
	border-color: var(--color-border-hover);
}

.feedback__field:focus,
.feedback__message:focus {
	outline: none;
	border-color: var(--color-text);
}

.feedback__field-input-file {
	display: flex;
	flex: 0 0 calc(50% - var(--gap) / 2);
	align-items: center;
	gap: 0.5rem;
	min-height: var(--input-height);
	padding-left: 0.625rem;
	cursor: pointer;
	background-color: #fff;
	user-select: none;
	color: var(--color-field);
	border: var(--border);
	transition: all 0.2s ease;
}

.feedback__field-input-file svg {
	flex-shrink: 0;
	transition: stroke 0.2s ease;
}

.feedback__field-input-file:hover svg path {
	stroke: #000;
}

.feedback__field-input-file:hover {
	color: var(--color-text);
	border-color: var(--color-border-hover);
}

#feedback-file {
	display: none;
}


.feedback__fields {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: var(--gap);
}

/* Наследуем цвет текста для иконки */
.feedback__field-input-file svg path {
	stroke: currentColor;
}

/* Состояние, когда файл загружен (добавляется через JS) */
.feedback__field-input-file.is-active {
	color: var(--color-text);
	border-color: var(--color-field); /* Становится #878785 */
}

/* Ховер-эффект для активного состояния */
.feedback__field-input-file.is-active:hover {
	border-color: var(--color-text);
}

.feedback__label {
	font-weight: 400;
	font-size: 0.75em;
	line-height: 1.4;
	color: var(--color-field);
	margin-bottom: 0.5rem;
	display: block;
}

.feedback__message {
	width: 100%;
	height: 7.5rem;
	padding: 0.625rem;
	margin-top: var(--gap);
	margin-bottom: var(--gap);
	font-family: inherit;
}

.feedback__policy {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 2rem;
	cursor: pointer;
}

.feedback__policy-text {
	font-weight: 400;
	font-size: var(--fs-label);
	line-height: 1.4;
	color: var(--color-field);
	margin: 0;
	padding-top: 0.0625rem;
	cursor: pointer;
}

.feedback__policy-text a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color 0.2s ease;
}

.feedback__policy-text a:hover {
	text-decoration: underline;
}

.feedback__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--input-height);
	padding: 0 4.94rem;
	font-family: 'Stolzlmedium', serif;
	font-size: var(--fs-button);
	font-weight: 500;
	color: var(--color-white);
	background: var(--color-accent);
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	white-space: nowrap;
}

.feedback__submit:hover {
	background-color: #d9520b;
}

.feedback__submit:active {
	background-color: #c3490a;
	transform: translateY(1px);
}

.feedback__image {
	flex: 1;
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 500px;
}

.feedback__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.feedback__image--mobile {
	display: none;
}

.feedback__body .feedback__captcha-container {
	display: flex;
	flex-direction: row;
	gap: var(--gap);
	margin-bottom: var(--gap);
	width: 100%;
}

.feedback__body .feedback__captcha-image {
	display: flex;
	overflow: hidden;
}

.feedback__body .feedback__captcha-image img {
	display: block;
	height: var(--input-height);
	width: auto;
	max-width: 100%;
	border: none;
}

.feedback__body .feedback__captcha-input {
	min-width: 30%;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(100%);
	overflow: hidden;
	white-space: nowrap;
}

.custom-checkbox {
	position: absolute;
	z-index: -1;
	opacity: 0;
	margin: 0;
}

.custom-checkbox + label {
	display: inline-flex;
	align-items: center;
	user-select: none;
	cursor: pointer;
	margin: 0;
}

.custom-checkbox + label::before {
	content: '';
	display: inline-block;
	width: 1.7em;
	height: 1.7em;
	flex-shrink: 0;
	border: 1px solid var(--color-field);
	margin-right: 0.67em;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50% 50%;
	transition: all 0.2s ease-in-out;
}

.custom-checkbox:not(:disabled):not(:checked) + label:hover::before {
	border-color: var(--color-accent);
}

.custom-checkbox:not(:disabled):active + label::before {
	background-color: #f58b51;
	border-color: var(--color-accent);
}

.custom-checkbox:focus + label::before {
	box-shadow: 0 0 0 0.125rem rgba(234, 91, 12, 0.25);
	border-color: var(--color-accent);
}

.custom-checkbox:checked + label::before {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7'%3e%3cpath fill='%23fff' d='M2.9 7a.7.7 0 0 1-.5-.2L.3 4.6a.7.7 0 0 1 1-.9l2.1 2.2L6.4.9a.7.7 0 1 1 1 .9L3.5 6.7a.7.7 0 0 1-.5.3Z'/%3e%3c/svg%3e");
}

.custom-checkbox:disabled + label::before {
	background-color: #e9ecef;
	border-color: #adb5bd;
	cursor: not-allowed;
}

.custom-checkbox:disabled + label {
	cursor: not-allowed;
	opacity: 0.6;
}

.feedback__field.error {
	border-color: var(--color-danger);
}

.feedback__error-message {
	color: var(--color-danger);
	font-size: 0.75rem;
	margin-top: 0.25rem;
	display: none;
}

.feedback__field.error + .feedback__error-message {
	display: block;
}

@media (max-width: 1400px) {
	.feedback__form {
		flex: 0 0 60%;
	}
}

@media (max-width: 1310px) {
	.feedback__title {
		font-size: 1.8rem;
	}

	.feedback__desc {
		font-size: 1.125rem;
	}

	.feedback__field,
	.feedback__field-input-file,
	.feedback__message {
		font-size: 0.9rem;
	}
}

@media (max-width: 1200px) {
	.feedback__form {
		flex: 0 0 55%;
	}
}

@media (max-width: 1080px) {
	.feedback__form {
		flex: 0 0 53%;
	}
}

@media (max-width: 960px) {
	.feedback__title {
		font-size: 2rem;
	}

	.feedback__desc {
		font-size: 0.875rem;
		margin-bottom: 1.5rem;
	}

	.feedback__form {
		flex: none;
		width: 100%;
	}

	.feedback__submit {
		font-size: 0.875rem;
	}

	.feedback__image {
		display: none;
	}

	.feedback__policy-text {
		font-size: 0.5rem;
	}
}

@media (max-width: 576px) {
	.feedback__title {
		font-size: 1.25rem;
	}

	.feedback__contacts {
		flex-direction: column;
		gap: 8px;
	}

	.feedback__fields {
		margin-top: 8px;
	}

	.feedback__image {
		min-height: 0;
	}

	.feedback__image--mobile {
		display: block;
		margin-bottom: 1.5rem;
	}

	.feedback__label {
		display: none;
	}

	.feedback__field,
	.feedback__field-input-file,
	.feedback__message {
		font-size: 0.875rem;
		min-height: 48px;
		border: 1px solid var(--color-field);
	}

	.feedback__message {
		margin-top: 8px;
		margin-bottom: 8px;
	}

	.feedback__submit {
		width: 100%;
		height: 50px;
		font-size: 1rem;
	}

	.feedback__policy {
		margin-bottom: 1.5rem;
	}

	.feedback__field-input-file svg {
		width: 20px;
		height: 20px;
	}

	.feedback__body .feedback__captcha-container {
		flex-direction: row;
		gap: 8px;
		margin-bottom: 8px;
	}

	.feedback__body .feedback__captcha-input {
		flex: 1;
	}

	.feedback__body .feedback__captcha-input .feedback__field {
		min-height: 57px;
		border: 1px solid var(--color-field);
		width: 100%;
	}
}
/* End */
/* /local/templates/new100del/components/bitrix/form.result.new/feedback/style.css?176975265510002 */