/**
 * Contact block — 2 варіанти без компіляції.
 *
 * Спосіб 1 (рекомендовано): клас contact-form-inline додається до форми автоматично (фільтр у темі).
 * Спосіб 2: додай клас до РЯДКА в WPBakery: contact-layout-inline або contact-layout-twocolumn.
 *
 * Варіант A: один ряд (Name, Email, Submit), менше квадратів, сірий фон
 * Варіант B: contact-layout-twocolumn — дві колонки (форма + карта)
 */

/* ---------- Коли форма має клас contact-form-inline (додається автоматично) ---------- */
/* Скидаємо великі відступи колонки WPBakery (Design Options), щоб форма не була стиснута */
.vc_column-inner:has(.wpcf7 form.contact-form-inline) {
	padding-left: 20px !important;
	padding-right: 20px !important;
}
.wpcf7:has(form.contact-form-inline) {
	background-color: #f5f5f5;
	padding: 44px 24px;
	margin-top: 2rem;
	margin-bottom: 2rem;
	border-radius: 8px;
	box-sizing: border-box;
	text-align: center;
}
.wpcf7:has(form.contact-form-inline) .wpcf7-form {
	background: #ffffff;
	border: 1px solid #e7e7e7;
	border-radius: 12px;
	padding: 26px 22px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
form.wpcf7-form.contact-form-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
	row-gap: 20px;
	align-items: flex-end;
	justify-content: center;
	max-width: 900px;
	margin: 0 auto;
	text-align: left;
}
form.wpcf7-form.contact-form-inline p {
	margin: 0;
	flex: 0 0 auto;
}
/* Якщо в одному p два поля (name + email) — ставимо їх в один ряд */
form.wpcf7-form.contact-form-inline p:has(.wpcf7-form-control-wrap) {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 20px;
	align-items: flex-end;
}
form.wpcf7-form.contact-form-inline p .wpcf7-form-control-wrap,
form.wpcf7-form.contact-form-inline p label {
	min-width: 160px;
	flex: 0 0 auto;
}
form.wpcf7-form.contact-form-inline p label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #313131;
}
form.wpcf7-form.contact-form-inline p:has(textarea) {
	flex: 1 1 100%;
	width: 100%;
}
form.wpcf7-form.contact-form-inline p:has(textarea) textarea {
	width: 100%;
	max-width: 100%;
}
form.wpcf7-form.contact-form-inline p:has(input[type="text"]) input,
form.wpcf7-form.contact-form-inline p:has(input[type="email"]) input {
	min-width: 160px;
	height: 44px;
}
form.wpcf7-form.contact-form-inline p:has(input[type="submit"]) {
	margin-left: 8px;
}
/* Поля Name та Email — видима нижня лінія, щоб не зливались в одну */
form.wpcf7-form.contact-form-inline input[type="text"],
form.wpcf7-form.contact-form-inline input[type="email"],
form.wpcf7-form.contact-form-inline .wpcf7-form-control-wrap input[type="text"],
form.wpcf7-form.contact-form-inline .wpcf7-form-control-wrap input[type="email"] {
	display: block;
	width: 100%;
	min-width: 160px;
	height: 44px;
	background: #ffffff !important;
	border: 1px solid #d7d7d7 !important;
	border-radius: 8px;
	padding: 10px 12px !important;
	margin: 0 !important;
	box-shadow: none !important;
	font-size: 15px;
	color: #201f1f;
}
form.wpcf7-form.contact-form-inline input[type="text"]:focus,
form.wpcf7-form.contact-form-inline input[type="email"]:focus {
	outline: none;
	border-color: #3b3b3b !important;
	box-shadow: 0 0 0 3px rgba(32, 31, 31, 0.12) !important;
}
form.wpcf7-form.contact-form-inline textarea {
	background: #fff !important;
	border: 1px solid #e1e1e1 !important;
	border-radius: 4px;
	padding: 10px 12px;
	min-height: 80px;
}
form.wpcf7-form.contact-form-inline input[type="submit"] {
	display: inline-block;
	min-height: 46px;
	padding: 12px 30px;
	border-radius: 50px;
	border: 2px solid #323232;
	background: #323232;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
form.wpcf7-form.contact-form-inline input[type="submit"]:hover {
	background: #201f1f;
	border-color: #201f1f;
	transform: translateY(-1px);
}

/* ---------- Загальне (коли клас на рядку): світлий сірий фон ---------- */
.section-element.contact-layout-inline,
.section-element.contact-layout-twocolumn,
.contact-layout-inline,
.contact-layout-twocolumn {
	background-color: #f5f5f5;
	padding-top: 50px;
	padding-bottom: 50px;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* Менше "квадратів": поля з нижньою рамкою замість повного бордера */
.section-element.contact-layout-inline .wpcf7-form input[type="text"],
.section-element.contact-layout-inline .wpcf7-form input[type="email"],
.contact-layout-inline .wpcf7-form input[type="text"],
.contact-layout-inline .wpcf7-form input[type="email"],
.contact-layout-inline .wpcf7-form textarea,
.section-element.contact-layout-twocolumn .wpcf7-form input[type="text"],
.section-element.contact-layout-twocolumn .wpcf7-form input[type="email"],
.contact-layout-twocolumn .wpcf7-form input[type="text"],
.contact-layout-twocolumn .wpcf7-form input[type="email"],
.contact-layout-twocolumn .wpcf7-form textarea {
	background: transparent;
	border: 0;
	border-bottom: 1px solid #ddd;
	border-radius: 0;
	padding: 10px 0;
	margin-top: 0;
	box-shadow: none;
}
.section-element.contact-layout-inline .wpcf7-form textarea,
.contact-layout-inline .wpcf7-form textarea,
.section-element.contact-layout-twocolumn .wpcf7-form textarea,
.contact-layout-twocolumn .wpcf7-form textarea {
	min-height: 80px;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	padding: 10px 12px;
}

/* Кнопка Submit — компактна, без великого квадрата */
.section-element.contact-layout-inline .wpcf7-form input[type="submit"],
.contact-layout-inline .wpcf7-form input[type="submit"],
.section-element.contact-layout-twocolumn .wpcf7-form input[type="submit"],
.contact-layout-twocolumn .wpcf7-form input[type="submit"] {
	padding: 12px 28px;
	border-radius: 50px;
	font-weight: 600;
	letter-spacing: 0.03em;
	cursor: pointer;
}


/* ========== Варіант A: один ряд (Name, Email, Submit) ========== */
.section-element.contact-layout-inline .wpcf7-form,
.contact-layout-inline .wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
	row-gap: 20px;
	align-items: flex-end;
}

/* Усі поля в один ряд, крім блоку з textarea */
.section-element.contact-layout-inline .wpcf7-form p,
.contact-layout-inline .wpcf7-form p {
	margin: 0;
	flex: 0 0 auto;
}
/* Тільки блок з textarea (Повідомлення) — на повну ширину знизу */
.section-element.contact-layout-inline .wpcf7-form p:has(textarea),
.contact-layout-inline .wpcf7-form p:has(textarea) {
	flex: 1 1 100%;
	width: 100%;
}
.section-element.contact-layout-inline .wpcf7-form p:has(textarea) textarea,
.contact-layout-inline .wpcf7-form p:has(textarea) textarea {
	width: 100%;
	max-width: 100%;
}
/* Поля Name, Email — ширина для одного ряду */
.section-element.contact-layout-inline .wpcf7-form p:has(input[type="text"]) input,
.section-element.contact-layout-inline .wpcf7-form p:has(input[type="email"]) input,
.contact-layout-inline .wpcf7-form p:has(input[type="text"]) input,
.contact-layout-inline .wpcf7-form p:has(input[type="email"]) input {
	min-width: 160px;
	height: 44px;
}
/* Кнопка Submit — в тому ж рядку, відступ зліва */
.section-element.contact-layout-inline .wpcf7-form p:has(input[type="submit"]),
.contact-layout-inline .wpcf7-form p:has(input[type="submit"]) {
	margin-left: 8px;
}

.section-element.contact-layout-inline .wpcf7,
.contact-layout-inline .wpcf7 {
	padding: 0 20px;
	max-width: 900px;
	margin: 0 auto;
}
.section-element.contact-layout-inline .wpcf7 form.wpcf7-form,
.contact-layout-inline .wpcf7 form.wpcf7-form,
.section-element.contact-layout-twocolumn .wpcf7 form.wpcf7-form,
.contact-layout-twocolumn .wpcf7 form.wpcf7-form {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	padding: 24px 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.section-element.contact-layout-inline .wpcf7 h3,
.contact-layout-inline .wpcf7 h3 {
	margin-bottom: 0.75rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: #1f1f1f;
	text-align: center;
}
.section-element.contact-layout-inline .wpcf7 h3 + p,
.contact-layout-inline .wpcf7 h3 + p {
	margin-bottom: 1rem;
	text-align: center;
	color: #5a5a5a;
}

.wpcf7 form input::placeholder,
.wpcf7 form textarea::placeholder {
	color: #8a8a8a;
	opacity: 1;
}

.wpcf7 form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
}


/* ========== Варіант B: двоколонковий layout (форма + карта) ========== */
.contact-layout-twocolumn.vc_row,
.contact-layout-twocolumn .vc_row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
}
.contact-layout-twocolumn .vc_column_container,
.contact-layout-twocolumn .vc_col-sm-6,
.contact-layout-twocolumn .vc_col-md-6,
.contact-layout-twocolumn .wpb_column {
	flex: 1 1 50%;
	min-width: 280px;
}
.contact-layout-twocolumn .wpcf7 {
	padding: 0 24px 0 0;
}
.contact-layout-twocolumn .wpcf7-form p {
	margin-bottom: 1rem;
}
.contact-layout-twocolumn .wpcf7-form p:last-of-type {
	margin-bottom: 0;
}
.contact-layout-twocolumn .wpcf7-form input[type="text"],
.contact-layout-twocolumn .wpcf7-form input[type="email"] {
	width: 100%;
	max-width: 100%;
	height: 44px;
}
.contact-layout-twocolumn .wpb_gmaps_widget,
.contact-layout-twocolumn .wpb_map_wraper {
	min-height: 280px;
	border-radius: 8px;
	overflow: hidden;
}


/* Адаптив для обох варіантів */
@media (max-width: 991px) {
	.vc_column-inner:has(.wpcf7 form.contact-form-inline) {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.wpcf7:has(form.contact-form-inline) {
		padding: 40px 20px;
	}
	form.wpcf7-form.contact-form-inline {
		flex-direction: column;
		align-items: stretch;
	}
	form.wpcf7-form.contact-form-inline p {
		flex: 1 1 100%;
		width: 100%;
		margin-left: 0;
	}
	form.wpcf7-form.contact-form-inline p:has(input[type="text"]) input,
	form.wpcf7-form.contact-form-inline p:has(input[type="email"]) input {
		min-width: 0;
		width: 100%;
	}
	.contact-layout-inline,
	.contact-layout-twocolumn {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.section-element.contact-layout-inline .wpcf7-form,
	.contact-layout-inline .wpcf7-form {
		flex-direction: column;
		align-items: stretch;
	}
	.section-element.contact-layout-inline .wpcf7-form p,
	.contact-layout-inline .wpcf7-form p {
		flex: 1 1 100%;
		width: 100%;
		margin-left: 0;
	}
	.section-element.contact-layout-inline .wpcf7-form p:has(input[type="text"]) input,
	.section-element.contact-layout-inline .wpcf7-form p:has(input[type="email"]) input,
	.contact-layout-inline .wpcf7-form p:has(input[type="text"]) input,
	.contact-layout-inline .wpcf7-form p:has(input[type="email"]) input {
		min-width: 0;
		width: 100%;
	}
	.contact-layout-twocolumn .vc_column_container,
	.contact-layout-twocolumn .vc_col-sm-6,
	.contact-layout-twocolumn .vc_col-md-6,
	.contact-layout-twocolumn .wpb_column {
		flex: 1 1 100%;
	}
	.contact-layout-twocolumn .wpcf7 {
		padding: 0 0 24px 0;
	}
}

@media (max-width: 767px) {
	.vc_column-inner:has(.wpcf7 form.contact-form-inline) {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.wpcf7:has(form.contact-form-inline) {
		padding: 32px 16px;
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
	}
	.contact-layout-inline,
	.contact-layout-twocolumn {
		padding-top: 32px;
		padding-bottom: 32px;
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
	}
}