/**
 * Tattoo Owl Fluent Forms presentation.
 *
 * Uses Kadence global palette variables and purpose-based wrapper classes.
 * No form IDs are required, so imported forms may receive new database IDs.
 */

.tattoo-owl-contact-form,
.tattoo-owl-consultation-form {
	--tattoo-form-accent: var(--global-palette1);
	--tattoo-form-dark: var(--global-palette3);
	--tattoo-form-dark-secondary: var(--global-palette4);
	--tattoo-form-cream: var(--global-palette8);
	--tattoo-form-light: var(--global-palette9);
	color: var(--tattoo-form-dark);
}

.tattoo-owl-consultation-form .frm-fluent-form,
.tattoo-owl-contact-form .frm-fluent-form {
	max-width: 860px;
	margin-inline: auto;
	padding: clamp(24px, 4vw, 48px);
	border: 1px solid color-mix(in srgb, var(--tattoo-form-dark) 18%, transparent);
	border-radius: 14px;
	background: var(--tattoo-form-cream);
	box-shadow: 0 16px 36px color-mix(in srgb, var(--tattoo-form-dark) 10%, transparent);
}

.tattoo-owl-consultation-form .ff-el-group,
.tattoo-owl-contact-form .ff-el-group {
	margin-bottom: 22px;
}

.tattoo-owl-consultation-form .ff-el-input--label label,
.tattoo-owl-contact-form .ff-el-input--label label {
	color: var(--tattoo-form-dark);
	font-weight: 700;
}

.tattoo-owl-consultation-form .ff-el-form-control,
.tattoo-owl-contact-form .ff-el-form-control {
	min-height: 48px;
	border: 1px solid color-mix(in srgb, var(--tattoo-form-dark) 30%, transparent);
	border-radius: 8px;
	background: var(--tattoo-form-light);
	color: var(--tattoo-form-dark);
}

.tattoo-owl-consultation-form textarea.ff-el-form-control,
.tattoo-owl-contact-form textarea.ff-el-form-control {
	min-height: 140px;
}

.tattoo-owl-consultation-form .ff-el-form-control:focus,
.tattoo-owl-contact-form .ff-el-form-control:focus {
	border-color: var(--tattoo-form-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tattoo-form-accent) 20%, transparent);
}

.tattoo-owl-consultation-form .ff-btn-submit,
.tattoo-owl-contact-form .ff-btn-submit {
	min-height: 46px;
	padding: 11px 24px;
	border: 1px solid var(--tattoo-form-accent);
	border-radius: 4px;
	background: var(--tattoo-form-accent);
	color: var(--tattoo-form-light);
	font-family: var(--global-heading-font-family);
	font-weight: 700;
	letter-spacing: .04em;
}

.tattoo-owl-consultation-form .ff-btn-submit:hover,
.tattoo-owl-consultation-form .ff-btn-submit:focus-visible,
.tattoo-owl-contact-form .ff-btn-submit:hover,
.tattoo-owl-contact-form .ff-btn-submit:focus-visible {
	border-color: var(--tattoo-form-dark);
	background: var(--tattoo-form-dark);
	color: var(--tattoo-form-light);
}

.tattoo-owl-form-notice {
	padding: 16px;
	border-left: 4px solid var(--global-palette1);
	background: var(--global-palette8);
	color: var(--global-palette3);
}

/* Fluent Forms conversational view, intentionally not scoped to a form ID. */
.ff_conv_app,
.ff_conv_app .f-form-wrap {
	background: var(--global-palette3) !important;
	color: var(--global-palette9);
}

.ff_conv_app .f-answer input,
.ff_conv_app .f-answer textarea,
.ff_conv_app .f-answer select {
	border-color: var(--global-palette1) !important;
	color: var(--global-palette9) !important;
}

.ff_conv_app .f-btn,
.ff_conv_app button {
	border-color: var(--global-palette1) !important;
	background: var(--global-palette1) !important;
	color: var(--global-palette9) !important;
}

/*
 * Tattoo Owl conversational form colors.
 * Keep text and controls readable on the charcoal form while replacing the
 * plugin's default blue progress/footer treatment with the global palette.
 */
.tattoo-owl-contact-form .ff_conv_app,
.tattoo-owl-contact-form .ff_conv_app .vff,
.tattoo-owl-contact-form .ff_conv_app .f-form-wrap,
.tattoo-owl-contact-form .ff_conv_app .f-field,
.tattoo-owl-contact-form .ff_conv_app .f-question,
.tattoo-owl-contact-form .ff_conv_app .f-label,
.tattoo-owl-contact-form .ff_conv_app .f-answer,
.tattoo-owl-contact-form .ff_conv_app label,
.tattoo-owl-contact-form .ff_conv_app a,
.tattoo-owl-contact-form .ff_conv_app .ffc_progress_label,
.tattoo-owl-contact-form .ff_conv_app .ffc_power {
	color: var(--global-palette9) !important;
}

.tattoo-owl-contact-form .ff_conv_app .f-answer input,
.tattoo-owl-contact-form .ff_conv_app .f-answer textarea,
.tattoo-owl-contact-form .ff_conv_app .f-answer select {
	border-color: var(--global-palette1) !important;
	color: var(--global-palette9) !important;
	caret-color: var(--global-palette9);
}

.tattoo-owl-contact-form .ff_conv_app .f-answer input::placeholder,
.tattoo-owl-contact-form .ff_conv_app .f-answer textarea::placeholder {
	color: color-mix(in srgb, var(--global-palette9) 78%, transparent) !important;
	opacity: 1;
}

.tattoo-owl-contact-form .ff_conv_app .vff-footer,
.tattoo-owl-contact-form .ff_conv_app .footer-inner-wrap {
	background: var(--global-palette4) !important;
}

.tattoo-owl-contact-form .ff_conv_app .f-progress-bar {
	background: color-mix(in srgb, var(--global-palette9) 24%, transparent) !important;
}

.tattoo-owl-contact-form .ff_conv_app .f-progress-bar-inner,
.tattoo-owl-contact-form .ff_conv_app .f-nav {
	background: var(--global-palette1) !important;
}

.tattoo-owl-contact-form .ff_conv_app .f-nav,
.tattoo-owl-contact-form .ff_conv_app .f-nav a,
.tattoo-owl-contact-form .ff_conv_app .f-nav button {
	color: var(--global-palette9) !important;
}

.tattoo-owl-contact-form .ff_conv_app .f-nav svg,
.tattoo-owl-contact-form .ff_conv_app .f-nav svg * {
	color: var(--global-palette9) !important;
	fill: currentColor !important;
	stroke: currentColor !important;
}

@media (max-width: 767px) {
	.tattoo-owl-consultation-form .frm-fluent-form,
	.tattoo-owl-contact-form .frm-fluent-form {
		padding: 22px 18px;
	}
}