/**
 * Form component styles (contact forms, Gravity Forms overrides, etc.)
 *
 * Elementor: add CSS class "contact-form" on the Form widget (Advanced tab).
 */

.contact-form {
	--contact-form-label: rgba(13, 63, 172, 0.5);
	--contact-form-text: #0d3fac;
	--contact-form-btn-bg: #ffb81c;
}

/* Grid spacing */
.contact-form .elementor-form-fields-wrapper {
	row-gap: 15px;
	margin-bottom: 0;
}

.contact-form .elementor-form .elementor-form-fields-wrapper .elementor-field-group {
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 20px;
}

.contact-form .elementor-form-fields-wrapper {
	margin-inline: calc(32px / -2);
}

/* Labels */
.contact-form .elementor-field-label {
	display: none;
}

/* Shared input / textarea / select */
.contact-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper):not([type="checkbox"]),
.contact-form .elementor-field-group .elementor-select-wrapper select {
	width: 100%;
	padding: 8px 0;
	border: none;
	border-bottom: 1px solid #0d3fac;
	border-radius: 0;
	background: transparent !important;
	color: var(--contact-form-text);
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.2s ease;
}

.contact-form .elementor-field-textual::placeholder {
	color: var(--contact-form-label);
	opacity: 1;
}

.contact-form .elementor-field-textual:focus,
.contact-form .elementor-field-group .elementor-select-wrapper select:focus {
	outline: none;
	border-bottom-color: var(--contact-form-text);
}

/* Select arrow */
.contact-form .elementor-select-wrapper {
	position: relative;
}

.contact-form .select-caret-down-wrapper {
	position: absolute;
	top: 50%;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 10px;
	margin: 0;
	padding: 0;
	pointer-events: none;
	transform: translateY(-50%);
}

.contact-form .select-caret-down-wrapper svg {
	display: none !important;
}

.contact-form .select-caret-down-wrapper::before {
	content: "";
	display: block;
	width: 18px;
	height: 10px;
	background-color: var(--contact-form-label);
	mask: url("../../svg/arrow-down.svg") center / contain no-repeat;
	-webkit-mask: url("../../svg/arrow-down.svg") center / contain no-repeat;
}

.contact-form .elementor-select-wrapper select {
	padding-right: 28px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	color: var(--contact-form-text);
}

/* Select placeholder — empty first option styled like input placeholders */
.contact-form .elementor-select-wrapper select option {
	color: var(--contact-form-text);
}

.contact-form .elementor-select-wrapper select option[value=""] {
	color: var(--contact-form-label);
}

.contact-form .elementor-select-wrapper select:has(option[value=""]:checked) {
	color: var(--contact-form-label);
}

/* Textarea */
.contact-form .elementor-field-type-textarea .elementor-field-textual {
	min-height: 96px;
	resize: vertical;
}

/* Acceptance checkbox */
.contact-form .elementor-field-type-acceptance .elementor-field-subgroup {
	margin-top: 4px;
}

.contact-form .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.contact-form .elementor-field-type-acceptance .elementor-acceptance-field {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	border: 1px solid #0d3fac;
	border-radius: 2px;
	background-color: transparent !important;
	background-image: none !important;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.contact-form .elementor-field-type-acceptance .elementor-acceptance-field:checked {
	border-color: var(--contact-form-text) !important;
	background-color: var(--contact-form-text) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2L4.2 8.4L11 1.6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 8px;
}

.contact-form .elementor-field-type-acceptance .elementor-field-option > label {
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}

/* Submit */
.contact-form .elementor-field-type-submit {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

.contact-form .elementor-field-type-submit .elementor-button {
	width: auto;
	min-width: 220px;
	max-width: 220px;
	padding: 12px 32px;
	border: none;
	border-radius: 999px;
	background-color: var(--contact-form-btn-bg) !important;
	color: var(--contact-form-text) !important;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: none;
	box-shadow: 0 4px 4px rgba(13, 63, 172, 0.1);
}

.contact-form .elementor-field-type-submit .elementor-button-content-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.contact-form .elementor-field-type-submit .elementor-button-icon {
	position: absolute;
	right: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.contact-form .elementor-field-type-submit .elementor-button-icon svg {
	display: block;
	width: 23px;
	height: 22px;
}

.contact-form .elementor-field-type-submit .elementor-button-text {
	transition: transform 0.35s ease;
}

.contact-form .elementor-field-type-submit .elementor-button:hover,
.contact-form .elementor-field-type-submit .elementor-button:focus-visible {
	color: var(--contact-form-text) !important;
	background-color: var(--contact-form-btn-bg) !important;
}

.contact-form .elementor-field-type-submit .elementor-button:hover .elementor-button-icon,
.contact-form .elementor-field-type-submit .elementor-button:focus-visible .elementor-button-icon {
	opacity: 1;
	transform: translateX(0);
}

.contact-form .elementor-field-type-submit .elementor-button:hover .elementor-button-text,
.contact-form .elementor-field-type-submit .elementor-button:focus-visible .elementor-button-text {
	transform: translateX(-12px);
}

.contact-form .elementor-field-type-submit .elementor-button svg * {
	fill: var(--contact-form-text) !important;
}

@media (max-width: 767px) {
	.contact-form {
		--contact-form-gap-x: 0px;
		--contact-form-gap-y: 22px;
	}

	.contact-form .elementor-field-group[class*="elementor-col-"] {
		width: 100%;
	}
}

.contact-form .elementor-field-type-html {
	font-size: 14px;
	font-weight: 400;
	color: var(--contact-form-label);
	margin-top: -15px;
}

/* ------------------------------------------------------------------
   Demo form reveal — #toggle-form opens/closes .form-wrapper
   ------------------------------------------------------------------ */
.form-wrapper {
	--form-wrapper-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--form-wrapper-duration: 0.55s;
	overflow: hidden;
	max-height: 0;
	margin-top: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	/* Padding/margin must transition with max-height — otherwise open/close
	   looks like two steps (spacing pops, then height catches up). */
	transition:
		max-height var(--form-wrapper-duration) var(--form-wrapper-ease),
		margin-top var(--form-wrapper-duration) var(--form-wrapper-ease),
		padding-top var(--form-wrapper-duration) var(--form-wrapper-ease),
		padding-bottom var(--form-wrapper-duration) var(--form-wrapper-ease);
}

.form-wrapper.is-open {
	margin-top: var(--margin-top, -10px) !important;
	padding-top: var(--padding-top, 60px) !important;
	padding-bottom: var(--padding-bottom, 50px) !important;
}

#toggle-form.is-open .elementor-button-icon svg,
#toggle-form[aria-expanded="true"] .elementor-button-icon svg {
	transform: scaleY(-1);
}

.request-demo {
	position: relative;
	z-index: 3;
}

/* ------------------------------------------------------------------
   CTA form — .cta-form__block swaps with .form-wrapper via #toggle-open
   ------------------------------------------------------------------ */
.cta-form .cta-form__block,
.cta-form #cta-form__block {
	display: grid;
	grid-template-rows: 1fr;
	opacity: 1;
	overflow: hidden;
	transition:
		grid-template-rows var(--form-wrapper-duration, 0.55s) var(--form-wrapper-ease, cubic-bezier(0.33, 1, 0.68, 1)),
		opacity var(--form-wrapper-duration, 0.55s) var(--form-wrapper-ease, cubic-bezier(0.33, 1, 0.68, 1)),
		max-height var(--form-wrapper-duration, 0.55s) var(--form-wrapper-ease, cubic-bezier(0.33, 1, 0.68, 1)),
		margin-top var(--form-wrapper-duration, 0.55s) var(--form-wrapper-ease, cubic-bezier(0.33, 1, 0.68, 1)),
		margin-bottom var(--form-wrapper-duration, 0.55s) var(--form-wrapper-ease, cubic-bezier(0.33, 1, 0.68, 1)),
		padding-top var(--form-wrapper-duration, 0.55s) var(--form-wrapper-ease, cubic-bezier(0.33, 1, 0.68, 1)),
		padding-bottom var(--form-wrapper-duration, 0.55s) var(--form-wrapper-ease, cubic-bezier(0.33, 1, 0.68, 1));
}

.cta-form .cta-form__block > .e-con-inner,
.cta-form #cta-form__block > .e-con-inner {
	overflow: hidden;
	min-height: 0;
	transition: transform var(--form-wrapper-duration, 0.55s) var(--form-wrapper-ease, cubic-bezier(0.33, 1, 0.68, 1));
}

.cta-form__block .elementor-widget-text-editor .elementor-widget-container {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.cta-form.is-form-open {
	--row-gap: 0px;
	--gap: 0px;
	gap: 0 !important;
}

.cta-form.is-form-open .cta-form__block,
.cta-form.is-form-open #cta-form__block {
	grid-template-rows: 0fr;
	max-height: 0;
	min-height: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--margin-top: 0px;
	--margin-bottom: 0px;
	opacity: 0;
	pointer-events: none;
}

.cta-form.is-form-open .cta-form__block > .e-con-inner,
.cta-form.is-form-open #cta-form__block > .e-con-inner {
	transform: translateY(-10px);
}

.cta-form .form-wrapper {
	opacity: 0;
	transition:
		max-height var(--form-wrapper-duration) var(--form-wrapper-ease),
		opacity var(--form-wrapper-duration) var(--form-wrapper-ease),
		margin-top var(--form-wrapper-duration) var(--form-wrapper-ease),
		padding-top var(--form-wrapper-duration) var(--form-wrapper-ease),
		padding-bottom var(--form-wrapper-duration) var(--form-wrapper-ease);
}

.cta-form .form-wrapper.is-open {
	opacity: 1;
}

.cta-form .form-wrapper > .e-con-inner {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity var(--form-wrapper-duration) var(--form-wrapper-ease),
		transform var(--form-wrapper-duration) var(--form-wrapper-ease);
}

.cta-form .form-wrapper.is-open > .e-con-inner {
	opacity: 1;
	transform: translateY(0);
}

.cta-form [id="toggle-open"] .elementor-button-icon svg,
.cta-form [id="toggle-open"] .elementor-button-icon svg path,
.cta-form [id="toggle-close"] .elementor-button-icon svg,
.cta-form [id="toggle-close"] .elementor-button-icon svg path {
	transition: fill 0.35s ease, transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.cta-form [id="toggle-open"].is-open .elementor-button-icon svg,
.cta-form [id="toggle-open"][aria-expanded="true"] .elementor-button-icon svg {
	transform: scaleY(-1);
}

@media (prefers-reduced-motion: reduce) {
	.form-wrapper,
	.cta-form .cta-form__block,
	.cta-form #cta-form__block,
	.cta-form .form-wrapper,
	.cta-form .form-wrapper > .e-con-inner,
	.cta-form .cta-form__block > .e-con-inner,
	.cta-form #cta-form__block > .e-con-inner {
		transition-duration: 0.01ms !important;
	}
}

/* Shared fill motion. #toggle-form keeps the outline button.
   #toggle-open (copied CTAs) is the filled state at rest. */
.toggle-big .elementor-button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}

.toggle-big .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-big .elementor-button:hover::before,
.toggle-big .elementor-button:focus-visible::before {
	transform: scaleY(1);
}

.toggle-big .elementor-button .elementor-button-content-wrapper {
	position: relative;
	z-index: 1;
}

.toggle-big .elementor-button .elementor-button-icon svg,
.toggle-big .elementor-button .elementor-button-icon svg path {
	transition: fill 0.35s ease, transform 0.35s ease;
}

.toggle-big #toggle-form::before {
	background-color: #f7f7f5;
}

.toggle-big #toggle-form:hover,
.toggle-big #toggle-form:focus-visible {
	color: #0d3fac !important;
	border-color: #f7f7f5 !important;
}

.toggle-big #toggle-form:hover .elementor-button-icon svg path,
.toggle-big #toggle-form:focus-visible .elementor-button-icon svg path {
	fill: #0d3fac;
}

.toggle-big #toggle-form:hover .elementor-button-icon svg,
.toggle-big #toggle-form:focus-visible .elementor-button-icon svg {
	transform: translateY(2px);
}

.toggle-big #toggle-form.is-open:hover .elementor-button-icon svg,
.toggle-big #toggle-form.is-open:focus-visible .elementor-button-icon svg,
.toggle-big #toggle-form[aria-expanded="true"]:hover .elementor-button-icon svg,
.toggle-big #toggle-form[aria-expanded="true"]:focus-visible .elementor-button-icon svg {
	transform: scaleY(-1);
}

.toggle-big #toggle-open {
	background-color: #f7f7f5 !important;
	color: #0d3fac !important;
	border-color: #f7f7f5 !important;
}

.toggle-big #toggle-open .elementor-button-icon svg,
.toggle-big #toggle-open .elementor-button-icon svg path {
	fill: #0d3fac;
}

.toggle-big #toggle-open::before {
	background-color: #0d3fac;
}

.toggle-big #toggle-open:hover,
.toggle-big #toggle-open:focus-visible {
	color: #f7f7f5 !important;
	border-color: #0d3fac !important;
}

.toggle-big #toggle-open:hover .elementor-button-icon svg path,
.toggle-big #toggle-open:focus-visible .elementor-button-icon svg path {
	fill: #f7f7f5;
}

.toggle-big #toggle-open:hover .elementor-button-icon svg,
.toggle-big #toggle-open:focus-visible .elementor-button-icon svg {
	transform: translateY(2px);
}