/* ============================================================
   Contact form block — Elementor (tf-contact-form-*)
   Точні значення з оригіналу (o-band / o-card / form / c-btn)
   ============================================================ */

/* ---- base (xs) ---- */

/* Секція: сірий фон + вертикальний band + бокові гутери */
.tf-contact-form-block{
	--tf-blue:#3273eb;
	--tf-accent:#eb6049;
	background:#f9f9fd;
	padding:4.6875rem 1.5625rem;
}

/* Біла картка + сітка */
.e-con.tf-contact-form-inner{
	display:grid;
	grid-template-columns:1fr;          /* mobile: стек */
	gap:3.125rem;
	width:100%;
	padding:3.125rem 1.5625rem;
	background:#fff;
}

.e-con.tf-contact-form-copy,
.e-con.tf-contact-form-fields{ padding:0; gap:0; }

/* Ліва колонка: subtitle (heading) */
.tf-contact-form-title .elementor-heading-title{
	margin:0 0 .625rem;
	color:var(--tf-blue);
	font-size:.625rem;
	font-weight:500;
	letter-spacing:.15em;
	line-height:1.6;
	text-transform:uppercase;
}

/* Ліва колонка: текст */
.tf-contact-form-text{ color:#000; font-size:1rem; line-height:1.6666666667; }
.tf-contact-form-text p{ margin:0; }

/* ---- ФОРМА ---- */

/* Відступи між полями (замість дефолтних Elementor) */
.tf-contact-form .elementor-form-fields-wrapper{ margin:0; row-gap:.78125rem; }
.tf-contact-form .elementor-field-group{ margin:0; padding:0; }



/* Інпути / textarea (form-control) */
.tf-contact-form .elementor-field-textual{
	width:100%;
	height:3.75rem;
	padding:.1875rem 2.1875rem;
	border:.0625rem solid #e6e6e6;
	border-radius:.625rem;
	background:#fff;
	color:#000;
	font-size:.875rem;
	font-weight:350;
	line-height:3.625rem;
	box-shadow:none;
	transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.tf-contact-form textarea.elementor-field-textual{
	height:auto;
	line-height:1.6;
	padding-top:1.125rem;
	padding-bottom:1.125rem;
	height: 182px;
}
.tf-contact-form .elementor-field-textual:focus{
	outline:none;
	background:#fff;
	color:#000;
	border-color:var(--tf-blue);
	box-shadow:0 0 0 .1875rem rgba(50,115,235,.15);
}
.tf-contact-form .elementor-field-textual::placeholder{ color:#4d4e55; opacity:1; }

/* Кнопка (c-btn--ghost, full width) */
.tf-contact-form .elementor-button{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:3.75rem;
	padding:0 2.1875rem;
	border:.0625rem solid var(--tf-accent);
	border-radius:.625rem;
	background-color:transparent;
	color:var(--tf-accent);
	font-size:.8125rem;
	font-weight:500;
	letter-spacing:.15em;
	line-height:3.625rem;
	text-transform:uppercase;
	transition:background-color .5s cubic-bezier(.22,.61,.36,1),
	border-color .5s cubic-bezier(.22,.61,.36,1),
	color .5s cubic-bezier(.22,.61,.36,1);
}
.tf-contact-form .elementor-button:hover,
.tf-contact-form .elementor-button:focus{
	background-color:var(--tf-blue);
	border-color:var(--tf-blue);
	color:#fff;
}

/* ---- ≥768px ---- */
@media (min-width:768px){
	.tf-contact-form-block{ padding:6rem 3rem; }
	.e-con.tf-contact-form-inner{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:2rem;
		padding:3rem;
	}
	.tf-contact-form-title .elementor-heading-title{ font-size:.6875rem; }
	.tf-contact-form-text{ font-size:1.125rem; line-height:1.875rem; }
}

/* ---- ≥992px ---- */
@media (min-width:992px){
	.tf-contact-form-block{ padding:8rem 4rem; }
	.e-con.tf-contact-form-inner{ gap:6rem; padding:6rem; }
}

/* ---- ≥1200px ---- */
@media (min-width:1200px){
	.tf-contact-form-block{ padding:10rem 6rem; }
	.tf-contact-form-title .elementor-heading-title{
		font-size:.8125rem;
		margin-bottom:.9375rem;
	}
	.tf-contact-form-text{ font-size:1.25rem; line-height:2.25rem; }
}

/* ---- ≥1550px ---- */
@media (min-width:1550px){
	.tf-contact-form-block{ padding:12.5rem 17.5rem; }
	.e-con.tf-contact-form-inner{ gap:7.5rem; padding:7.5rem; }
	.tf-contact-form-text{ font-size:1.5rem; line-height:2.5rem; }
}

/* ---- ≥1800px ---- */
@media (min-width:1800px){
	.tf-contact-form-block{ padding:12.5rem 25rem; }
}

/* Кнопка (c-btn--ghost) з ефектом заливки колом */
.tf-contact-form .elementor-button{
	position:relative;
	overflow:hidden;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:3.75rem;
	padding:0 2.1875rem;
	border:.0625rem solid var(--tf-accent);
	border-radius:.625rem;
	background-color:transparent;
	color:var(--tf-accent);
	font-size:.8125rem;
	font-weight:500;
	letter-spacing:.15em;
	line-height:3.625rem;
	text-transform:uppercase;
	transition:color .5s cubic-bezier(.22,.61,.36,1),
	border-color .5s cubic-bezier(.22,.61,.36,1);
}

/* саме "коло" (js-btn-bg) */
.tf-contact-form .elementor-button::before{
	content:"";
	position:absolute;
	z-index:-1;
	top:var(--y,50%);
	left:var(--x,50%);
	width:0;
	height:0;
	border-radius:50%;
	background:var(--tf-blue);
	transform:translate(-50%,-50%);
	transition:width .4s ease-in-out, height .4s ease-in-out;
}

/* текст завжди над колом */
.tf-contact-form .elementor-button .elementor-button-content-wrapper{
	position:relative;
	z-index:1;
}

/* hover: коло розтікається, бордер синій, текст білий */
.tf-contact-form .elementor-button:hover,
.tf-contact-form .elementor-button:focus{
	color:#fff;
	border-color:var(--tf-blue);
	background-color:transparent;
}
.tf-contact-form .elementor-button:hover::before,
.tf-contact-form .elementor-button:focus::before{
	width:250%;
	height:250%;
}