/* ==========================================================================
   UseAppy: Contact Section widget
   ========================================================================== */

.useappy-contact {
	--useappy-contact-red: var(--useappy-red, #e7000b);

	position: relative;
	padding: 18px 0 80px;
	color: #0c0c0c;
	background-color: #fff;
}

.useappy-contact-glow-yes .useappy-contact {
	background-image: radial-gradient(560px 340px at 0% 100%, rgba(231, 0, 11, 0.06) 0%, rgba(231, 0, 11, 0.025) 45%, rgba(231, 0, 11, 0) 100%);
}

.useappy-contact__grid {
	--useappy-contact-form-w: 900px;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--useappy-contact-form-w));
	column-gap: 60px;
	row-gap: 48px;
	align-items: center;
}

.useappy-contact-form-first-yes .useappy-contact__form-card {
	order: -1;
}

.useappy-contact-form-first-yes .useappy-contact__grid {
	grid-template-columns: minmax(0, var(--useappy-contact-form-w)) minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   Left column
   -------------------------------------------------------------------------- */

.useappy-contact__eyebrow {
	margin: 0 0 25px;
	font-family: var(--useappy-font, inherit);
	font-size: 33px;
	font-weight: 600;
	line-height: 40px;
	color: var(--useappy-contact-red);
}

.useappy-contact__title {
	margin: 0 0 8px;
	font-family: var(--useappy-font, inherit);
	font-size: 37px;
	font-weight: 500;
	line-height: 44px;
	color: #0c0c0c;
	letter-spacing: 0;
}

.useappy-contact__description {
	max-width: 620px;
	margin: 0 0 30px;
	font-family: var(--useappy-font, inherit);
	font-size: var(--useappy-p-size, 20px);
	font-weight: 400;
	line-height: var(--useappy-p-lh, 1.5);
	color: #5f5f5f;
}

/* Contact cards */

.useappy-contact__cards {
	display: flex;
	flex-direction: column;
	gap: 9px;
	max-width: 576px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.useappy-contact__card {
	display: flex;
	column-gap: 22px;
	align-items: center;
	min-height: 85px;
	padding: 16px 20px 16px 16px;
	color: inherit;
	text-decoration: none;
	background-color: #fde5e7;
	border: 1px solid rgba(231, 0, 11, 0.75);
	border-radius: 12px;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

a.useappy-contact__card:hover,
a.useappy-contact__card:focus-visible {
	color: inherit;
	background-color: #fcd9dc;
	border-color: var(--useappy-contact-red);
}

a.useappy-contact__card:focus-visible {
	outline: 2px solid var(--useappy-contact-red);
	outline-offset: 2px;
}

.useappy-contact__card-icon {
	--useappy-contact-icon: 30px;

	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 50px;
	height: 50px;
	color: #fff;
	background-color: var(--useappy-contact-red);
	border-radius: 8px;
}

.useappy-contact__card-icon svg,
.useappy-contact__card-icon i {
	width: var(--useappy-contact-icon);
	height: var(--useappy-contact-icon);
	font-size: var(--useappy-contact-icon);
	line-height: 1;
}

.useappy-contact__card-icon svg:not(.useappy-contact__svg) {
	fill: currentColor;
}

.useappy-contact__card-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.useappy-contact__card-label {
	font-family: var(--useappy-font, inherit);
	font-size: 14px;
	font-weight: 400;
	line-height: 19px;
	color: #6a6a6a;
}

.useappy-contact__card-value {
	font-family: var(--useappy-font, inherit);
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
	color: #0c0c0c;
	overflow-wrap: anywhere;
}

.useappy-contact__card-arrow {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 44px;
	height: 44px;
	color: #0c0c0c;
	background-color: #fff;
	border: 1px solid rgba(231, 0, 11, 0.75);
	border-radius: 50%;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--useappy-ease, ease);
}

.useappy-contact__card-arrow svg {
	width: 16px;
	height: 16px;
}

a.useappy-contact__card:hover .useappy-contact__card-arrow {
	color: #fff;
	background-color: var(--useappy-contact-red);
	border-color: var(--useappy-contact-red);
}

/* --------------------------------------------------------------------------
   Form card (Contact Form 7)
   -------------------------------------------------------------------------- */

.useappy-contact__form-card {
	padding: 40px 41px 44px;
	background-color: #fff;
	border: 1px solid #ececed;
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.useappy-contact__form-title {
	margin: 0 0 6px;
	font-family: var(--useappy-font, inherit);
	font-size: 17.5px;
	font-weight: 600;
	line-height: 24px;
	color: #0c0c0c;
	letter-spacing: 0;
}

.useappy-contact__form-description {
	max-width: 560px;
	margin: 0 0 22px;
	font-family: var(--useappy-font, inherit);
	font-size: var(--useappy-p-size, 20px);
	font-weight: 400;
	line-height: var(--useappy-p-lh, 1.5);
	color: #6f6f6f;
}

.useappy-contact__form {
	--useappy-contact-field-h: 53px;
	--useappy-contact-gap: 12px;
	--useappy-contact-submit-gap: 31px;
	--useappy-contact-error: var(--useappy-contact-red);
	--useappy-contact-success: #1f9d55;
}

.useappy-contact__form .wpcf7-form p {
	position: relative;
	margin: 0 0 var(--useappy-contact-gap);
}

.useappy-contact__form .wpcf7-form p:has([type=submit]) {
	margin: calc(var(--useappy-contact-submit-gap) - var(--useappy-contact-gap)) 0 0;
}

.useappy-contact__form .wpcf7-form br {
	display: none;
}

.useappy-contact__form .wpcf7-form-control-wrap {
	display: block;
}

.useappy-contact__form label {
	display: block;
	font-family: var(--useappy-font, inherit);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #0c0c0c;
}

.useappy-contact__form label .wpcf7-form-control-wrap {
	margin-top: 6px;
}

.useappy-contact-hide-labels-yes .useappy-contact__form label {
	font-size: 0;
	line-height: 0;
}

.useappy-contact-hide-labels-yes .useappy-contact__form label .wpcf7-form-control-wrap {
	margin-top: 0;
	font-size: 1rem;
	line-height: normal;
}

.useappy-contact__form input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
.useappy-contact__form textarea,
.useappy-contact__form select {
	display: block;
	width: 100%;
	height: var(--useappy-contact-field-h);
	margin: 0;
	padding: 0 20px;
	font-family: var(--useappy-font, inherit);
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: #0c0c0c;
	background-color: #f8f9fa;
	border: 1px solid #f1f2f4;
	border-radius: 6px;
	box-shadow: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	appearance: none;
}

.useappy-contact__form textarea {
	height: 127px;
	padding-top: 18px;
	padding-bottom: 18px;
	resize: none;
}

.useappy-contact__form ::placeholder {
	color: #7c7d7e;
	opacity: 1;
}

.useappy-contact__form input:not([type=submit]):focus,
.useappy-contact__form textarea:focus,
.useappy-contact__form select:focus {
	background-color: #fff;
	border-color: var(--useappy-contact-red);
	outline: none;
	box-shadow: 0 0 0 3px rgba(231, 0, 11, 0.1);
}

.useappy-contact__form [type=submit] {
	display: inline-block;
	height: 44px;
	padding: 0 32px;
	font-family: var(--useappy-font, inherit);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	background-color: var(--useappy-contact-red);
	border: 1px solid transparent;
	border-radius: 6px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	appearance: none;
}

.useappy-contact-submit-full-yes .useappy-contact__form [type=submit] {
	width: 100%;
}

.useappy-contact__form [type=submit]:hover,
.useappy-contact__form [type=submit]:focus-visible {
	background-color: var(--useappy-red-dark, #c10009);
}

.useappy-contact__form [type=submit]:focus-visible {
	outline: 2px solid var(--useappy-contact-red);
	outline-offset: 2px;
}

.useappy-contact__form [type=submit]:disabled {
	cursor: default;
	opacity: 0.7;
}

/* CF7 spinner sits inside the button instead of pushing it around. */
.useappy-contact__form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 14px;
	margin: -12px 0 0;
	background-color: rgba(255, 255, 255, 0.85);
}

/* Validation and response messages */

.useappy-contact__form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-family: var(--useappy-font, inherit);
	font-size: 13px;
	color: var(--useappy-contact-error);
}

.useappy-contact__form .wpcf7-not-valid {
	border-color: var(--useappy-contact-error) !important;
}

.useappy-contact__form .wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	font-family: var(--useappy-font, inherit);
	font-size: 14px;
	line-height: 1.5;
	border-width: 1px;
	border-radius: 6px;
}

.useappy-contact__form .wpcf7 form.invalid .wpcf7-response-output,
.useappy-contact__form .wpcf7 form.unaccepted .wpcf7-response-output,
.useappy-contact__form .wpcf7 form.failed .wpcf7-response-output,
.useappy-contact__form .wpcf7 form.aborted .wpcf7-response-output,
.useappy-contact__form .wpcf7 form.spam .wpcf7-response-output {
	color: var(--useappy-contact-error);
	border-color: var(--useappy-contact-error);
}

.useappy-contact__form .wpcf7 form.sent .wpcf7-response-output {
	color: var(--useappy-contact-success);
	border-color: var(--useappy-contact-success);
}

.useappy-contact__notice {
	margin: 0;
	padding: 14px 16px;
	font-size: 14px;
	color: #6a6a6a;
	background: #f8f9fa;
	border: 1px dashed #d5d7db;
	border-radius: 6px;
}

/* Breakpoint rules (Bootstrap sm / md / lg / xl / xxl): themes/useappy/assets/css/responsive.css */

/* ==========================================================================
   Color modes (Layout > Color mode): "Dark" puts the section on the theme's dark
   background (--useappy-dark-bg) with light text; "Light" on white with dark
   text. Style-tab colours still win (their selectors are stronger).
   ========================================================================== */

/* Dark */

.elementor-element.useappy-mode-dark .useappy-contact {
	--useappy-contact-red: var(--useappy-red, #e7000b);
	color: #fff;
	background: var(--useappy-dark-bg, var(--useappy-dark, #0d0d0d));
}

.elementor-element.useappy-mode-dark .useappy-contact__eyebrow {
	color: #ff4d55;
}

.elementor-element.useappy-mode-dark .useappy-contact__title {
	color: #fff;
}

.elementor-element.useappy-mode-dark .useappy-contact__description {
	color: #a3a3a3;
}

.elementor-element.useappy-mode-dark .useappy-contact__card {
	color: inherit;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(231, 0, 11, 0.75);
}

.elementor-element.useappy-mode-dark a.useappy-contact__card:hover,
.elementor-element.useappy-mode-dark a.useappy-contact__card:focus-visible {
	color: inherit;
	background-color: #fcd9dc;
	border-color: var(--useappy-contact-red);
}

.elementor-element.useappy-mode-dark .useappy-contact__card-icon {
	color: #fff;
	background-color: var(--useappy-contact-red);
}

.elementor-element.useappy-mode-dark .useappy-contact__card-icon svg:not(.useappy-contact__svg) {
	fill: currentColor;
}

.elementor-element.useappy-mode-dark .useappy-contact__card-label {
	color: #a3a3a3;
}

.elementor-element.useappy-mode-dark .useappy-contact__card-value {
	color: #fff;
}

.elementor-element.useappy-mode-dark .useappy-contact__card-arrow {
	color: #0c0c0c;
	background-color: #fff;
	border: 1px solid rgba(231, 0, 11, 0.75);
}

.elementor-element.useappy-mode-dark a.useappy-contact__card:hover .useappy-contact__card-arrow {
	color: #fff;
	background-color: var(--useappy-contact-red);
	border-color: var(--useappy-contact-red);
}

.elementor-element.useappy-mode-dark .useappy-contact__form-card {
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.elementor-element.useappy-mode-dark .useappy-contact__form-title {
	color: #fff;
}

.elementor-element.useappy-mode-dark .useappy-contact__form-description {
	color: #a3a3a3;
}

.elementor-element.useappy-mode-dark .useappy-contact__form label {
	color: #fff;
}

.elementor-element.useappy-mode-dark .useappy-contact__form input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
.elementor-element.useappy-mode-dark .useappy-contact__form textarea,
.elementor-element.useappy-mode-dark .useappy-contact__form select {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.elementor-element.useappy-mode-dark .useappy-contact__form ::placeholder {
	color: #a3a3a3;
}

.elementor-element.useappy-mode-dark .useappy-contact__form input:not([type=submit]):focus,
.elementor-element.useappy-mode-dark .useappy-contact__form textarea:focus,
.elementor-element.useappy-mode-dark .useappy-contact__form select:focus {
	background-color: #fff;
	border-color: var(--useappy-contact-red);
}

.elementor-element.useappy-mode-dark .useappy-contact__form [type=submit] {
	color: #fff;
	background-color: var(--useappy-contact-red);
	border: 1px solid transparent;
}

.elementor-element.useappy-mode-dark .useappy-contact__form [type=submit]:hover,
.elementor-element.useappy-mode-dark .useappy-contact__form [type=submit]:focus-visible {
	background-color: var(--useappy-red-dark, #c10009);
}

.elementor-element.useappy-mode-dark .useappy-contact__form .wpcf7-spinner {
	background-color: rgba(255, 255, 255, 0.85);
}

.elementor-element.useappy-mode-dark .useappy-contact__form .wpcf7-not-valid-tip {
	color: var(--useappy-contact-error);
}

.elementor-element.useappy-mode-dark .useappy-contact__form .wpcf7-not-valid {
	border-color: var(--useappy-contact-error) !important;
}

.elementor-element.useappy-mode-dark .useappy-contact__form .wpcf7 form.invalid .wpcf7-response-output,
.elementor-element.useappy-mode-dark .useappy-contact__form .wpcf7 form.unaccepted .wpcf7-response-output,
.elementor-element.useappy-mode-dark .useappy-contact__form .wpcf7 form.failed .wpcf7-response-output,
.elementor-element.useappy-mode-dark .useappy-contact__form .wpcf7 form.aborted .wpcf7-response-output,
.elementor-element.useappy-mode-dark .useappy-contact__form .wpcf7 form.spam .wpcf7-response-output {
	color: var(--useappy-contact-error);
	border-color: var(--useappy-contact-error);
}

.elementor-element.useappy-mode-dark .useappy-contact__form .wpcf7 form.sent .wpcf7-response-output {
	color: var(--useappy-contact-success);
	border-color: var(--useappy-contact-success);
}

.elementor-element.useappy-mode-dark .useappy-contact__notice {
	color: #a3a3a3;
	background: rgba(255, 255, 255, 0.05);
	border: 1px dashed rgba(255, 255, 255, 0.14);
}

/* Light */

.elementor-element.useappy-mode-light .useappy-contact {
	--useappy-contact-red: var(--useappy-red, #e7000b);
	color: #0c0c0c;
	background: #fff;
}

/* End color modes */