/* =========================================================================
   Discount Upholstery — contact.css
   Шаблон «Contact Us»: большой hero — слева контакты, справа форма (CF7).
   Подключается для шаблона page-contact.php (см. functions.php).
   ========================================================================= */

.contact-hero {
	position: relative;
	color: #fff;
	overflow: hidden;
}

.contact-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.contact-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.contact-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(18, 14, 11, 0.74) 0%,
		rgba(18, 14, 11, 0.4) 55%,
		rgba(18, 14, 11, 0.3) 100%
	);
}

.contact-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 620px;
	gap: 80px;
	align-items: start;
	padding-block: 200px 120px;
}

/* ------------------------------------------------------------------ */
/* Заголовки                                                          */
/* ------------------------------------------------------------------ */
.contact-hero__title,
.contact-hero__form-title {
	margin: 0 0 40px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 50px;
	line-height: 1;
	letter-spacing: 0;
	color: #e4d1ba;
}

/* ------------------------------------------------------------------ */
/* Левая колонка — контакты (2×2)                                     */
/* ------------------------------------------------------------------ */
.contact-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px 48px;
}

.contact-block__icon {
	display: inline-flex;
	margin-bottom: 18px;
	color: #d9b487;
}

.contact-block__label {
	margin: 0 0 12px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: 0;
	color: #fff;
}

.contact-block__note {
	margin: 0 0 10px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.contact-block__note--gap {
	margin-top: 22px;
}

.contact-block__value {
	display: block;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
	word-break: break-word;
}

a.contact-block__value {
	transition: color 0.2s ease;
}

a.contact-block__value:hover {
	color: #e4d1ba;
}

.contact-block__lines .contact-block__value + .contact-block__value {
	margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/* Правая колонка — форма                                             */
/* ------------------------------------------------------------------ */
.contact-hero__form-card {
	padding: 40px;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
	color: var(--color-text);
}

/* Общая стилизация полей Contact Form 7 внутри карточки */
.contact-hero__form-card .wpcf7 p {
	margin: 0 0 20px;
}

.contact-hero__form-card label {
	display: block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: #344054;
}

/* Обёртка контрола CF7 — блочная, чтобы поле занимало всю ширину */
.contact-hero__form-card .wpcf7-form-control-wrap {
	display: block;
}

/* Ряд «First name / Last name» (обёртка .first-line в CF7-шаблоне) */
.contact-hero__form-card .first-line {
	display: flex;
	gap: 20px;
}

.contact-hero__form-card .first-line > p {
	flex: 1 1 0;
	min-width: 0;
	margin: 0 0 20px;
}

.contact-hero__form-card input[type="text"],
.contact-hero__form-card input[type="email"],
.contact-hero__form-card input[type="tel"],
.contact-hero__form-card input[type="url"],
.contact-hero__form-card input[type="number"],
.contact-hero__form-card input[type="date"],
.contact-hero__form-card select,
.contact-hero__form-card textarea {
	width: 100%;
	margin-top: 8px;
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.4;
	color: #667085;
	background: #fff;
	border: 1px solid #dcd7d0;
	border-radius: 10px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-hero__form-card textarea {
	min-height: 150px;
	resize: vertical;
}

.contact-hero__form-card input:focus,
.contact-hero__form-card select:focus,
.contact-hero__form-card textarea:focus {
	outline: none;
	border-color: #c09570;
	box-shadow: 0 0 0 3px rgba(192, 149, 112, 0.18);
}

.contact-hero__form-card input::placeholder,
.contact-hero__form-card textarea::placeholder {
	color: #667085;
}

/* Ряд из двух полей (обернуть в CF7: <span class="cf7-row"> … </span>) */
.contact-hero__form-card .cf7-row {
	display: flex;
	gap: 20px;
}

.contact-hero__form-card .cf7-row > * {
	flex: 1 1 0;
	min-width: 0;
}

/* Файл — кастомная дропзона (иконка + подпись), чистый CSS.
   Реальный input делаем прозрачным и растягиваем на всю зону:
   он ловит клик и системный drag&drop. */
.contact-hero__form-card .wpcf7-form-control-wrap[data-name^="file"] {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 190px;
	margin-top: 8px;
	padding: 82px 20px 26px;
	text-align: center;
	background: #fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='46'%20height='46'%3E%3Crect%20x='1'%20y='1'%20width='44'%20height='44'%20rx='12'%20fill='white'%20stroke='%23e2ddd5'/%3E%3Cpath%20d='M23%2027V17M18.5%2021.5%2023%2017l4.5%204.5'%20fill='none'%20stroke='%23464460'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M15%2028v2a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-2'%20fill='none'%20stroke='%23464460'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center 26px;
	background-size: 46px 46px;
	border: 1px solid #e2ddd5;
	border-radius: 14px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.contact-hero__form-card .wpcf7-form-control-wrap[data-name^="file"]:hover {
	border-color: #c09570;
	background-color: #fbf8f4;
}

.contact-hero__form-card input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	opacity: 0;
	cursor: pointer;
}

/* Первая строка подписи (акцент) */
.contact-hero__form-card .wpcf7-form-control-wrap[data-name^="file"]::before {
	content: "Click to upload or drag and drop";
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: #c09570;
}

/* Вторая строка — допустимые форматы */
.contact-hero__form-card .wpcf7-form-control-wrap[data-name^="file"]::after {
	content: "SVG, PNG, JPG or GIF (max. 800×400px)";
	margin-top: 6px;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.4;
	color: #7c7c7c;
}

/* Состояние «файл выбран»: галочка + имя файла (класс is-filled ставит main.js) */
.contact-hero__form-card .wpcf7-form-control-wrap[data-name^="file"].is-filled {
	border-color: #c09570;
	background-color: #fbf8f4;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='46'%20height='46'%3E%3Crect%20x='1'%20y='1'%20width='44'%20height='44'%20rx='12'%20fill='%23f2e8dc'%20stroke='%23c09570'/%3E%3Cpath%20d='M16%2023.5l4.5%204.5%209-9'%20fill='none'%20stroke='%23c09570'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.contact-hero__form-card .wpcf7-form-control-wrap[data-name^="file"].is-filled::before {
	content: "File added";
	color: #c09570;
	font-weight: 600;
}

.contact-hero__form-card .wpcf7-form-control-wrap[data-name^="file"].is-filled::after {
	content: attr(data-file);
	color: #464460;
	font-weight: 500;
	word-break: break-word;
}

/* Кнопка отправки */
.contact-hero__form-card input[type="submit"],
.contact-hero__form-card button[type="submit"],
.contact-hero__form-card .wpcf7-submit {
	width: 100%;
	margin-top: 6px;
	padding: 18px 28px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.02em;
	color: #fff;
	background: #d9b489;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.2s ease;
}

.contact-hero__form-card input[type="submit"]:hover,
.contact-hero__form-card button[type="submit"]:hover,
.contact-hero__form-card .wpcf7-submit:hover {
	background: #c79f70;
	transform: translateY(-1px);
}

/* Спиннер/сообщения CF7 */
.contact-hero__form-card .wpcf7-spinner {
	margin: 12px auto 0;
	display: block;
}

.contact-hero__form-card .wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	border-radius: 8px;
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Адаптив                                                            */
/* ------------------------------------------------------------------ */
@media (max-width: 1200px) {
	.contact-hero__inner {
		grid-template-columns: 1fr 520px;
		gap: 56px;
	}
}

@media (max-width: 1024px) {
	.contact-hero__inner {
		grid-template-columns: 1fr;
		gap: 56px;
		padding-block: 150px 80px;
	}

	.contact-hero__title,
	.contact-hero__form-title {
		margin-bottom: 32px;
		font-size: 40px;
	}

	.contact-hero__overlay {
		background: rgba(18, 14, 11, 0.6);
	}
}

@media (max-width: 768px) {
	.contact-hero__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.contact-hero__form-card {
		padding: 28px 22px;
	}

	.contact-hero__title,
	.contact-hero__form-title {
		font-size: 34px;
	}
}

@media (max-width: 600px) {
	.contact-hero__inner {
		padding-block: 130px 56px;
	}

	.contact-hero__form-card .cf7-row,
	.contact-hero__form-card .first-line {
		flex-direction: column;
		gap: 0;
	}
}