/**
 * Fluent Form — surface tokens (dark default + light modifier) and modern field UX.
 *
 * Containers:
 *   .tnt-fluent-form--dark  — footer / dark bands (default brand)
 *   .tnt-fluent-form--light — cream / off-white sections (e.g. Book Nat contact page)
 *
 * Rollback to neon/typewriter: add .tnt-fluent-form--legacy on the same container and
 * enqueue fluent-form-legacy.css (see functions.php).
 */

/* —— Dark surface (footer default) —— */
.tnt-fluent-form--dark {
	--tnt-ff-label: var(--tnt-foreground, #f4f4f4);
	--tnt-ff-label-focus: color-mix(in srgb, var(--tnt-foreground, #f4f4f4) 55%, transparent);
	--tnt-ff-text: var(--tnt-foreground, #f4f4f4);
	--tnt-ff-placeholder: rgba(244, 244, 244, 0.32);
	--tnt-ff-border: color-mix(in srgb, var(--tnt-foreground, #f4f4f4) 35%, transparent);
	--tnt-ff-border-focus: var(--tnt-gold, #e6b75d);
	--tnt-ff-filled-text: color-mix(in srgb, var(--tnt-foreground, #f4f4f4) 94%, var(--tnt-gold, #e6b75d));
	--tnt-ff-filled-border: color-mix(in srgb, var(--tnt-gold, #e6b75d) 52%, transparent);
	--tnt-ff-focus-shadow: 0 3px 10px -6px rgba(230, 183, 93, 0.45);
	--tnt-ff-input-bg: transparent;
	--tnt-ff-input-radius: 3px;
	--tnt-ff-input-pad-y: 0.45rem;
	--tnt-ff-input-pad-x: 0.65rem;
	--tnt-ff-submit-bg: var(--tnt-off-white, #f7f7f7);
	--tnt-ff-submit-fg: var(--tnt-stout, #1b1b1b);
	--tnt-ff-submit-border: var(--tnt-off-white, #f7f7f7);
	--tnt-ff-submit-ready-bg: var(--tnt-gold, #e6b75d);
	--tnt-ff-submit-ready-fg: var(--tnt-stout, #1b1b1b);
	--tnt-ff-select-bg: var(--tnt-charcoal, #2a2a2a);
}

/* —— Light surface (contact page paper card) —— */
.tnt-fluent-form--light {
	--tnt-ff-label: var(--tnt-taupe, #8a7b6c);
	--tnt-ff-label-focus: var(--tnt-ink-brown, #4a4038);
	--tnt-ff-text: var(--tnt-stout, #1b1b1b);
	--tnt-ff-placeholder: rgba(27, 27, 27, 0.38);
	--tnt-ff-border: rgba(27, 27, 27, 0.16);
	--tnt-ff-border-focus: var(--tnt-gold, #e6b75d);
	--tnt-ff-filled-text: var(--tnt-stout, #1b1b1b);
	--tnt-ff-filled-border: color-mix(in srgb, var(--tnt-gold, #e6b75d) 62%, transparent);
	--tnt-ff-focus-shadow: 0 0 0 3px rgba(230, 183, 93, 0.22);
	--tnt-ff-ring-idle: 0 0 0 3px transparent;
	--tnt-ff-input-bg: rgba(255, 255, 255, 0.78);
	--tnt-ff-input-radius: 4px;
	--tnt-ff-input-pad-y: 0.55rem;
	--tnt-ff-input-pad-x: 0.75rem;
	--tnt-ff-submit-bg: var(--tnt-stout, #1b1b1b);
	--tnt-ff-submit-fg: var(--tnt-foreground, #f4f4f4);
	--tnt-ff-submit-border: var(--tnt-stout, #1b1b1b);
	--tnt-ff-submit-ready-bg: var(--tnt-forest, #1b7a4a);
	--tnt-ff-submit-ready-fg: var(--tnt-foreground, #f4f4f4);
	--tnt-ff-select-bg: rgba(255, 255, 255, 0.92);
}

/* —— Modern surface tokens (not legacy) —— */
.tnt-fluent-form:not(.tnt-fluent-form--legacy) .ff-el-input--label label {
	color: var(--tnt-ff-label) !important;
}

.tnt-fluent-form:not(.tnt-fluent-form--legacy) .ff-el-group:focus-within .ff-el-input--label label {
	opacity: 1;
	color: var(--tnt-ff-label-focus) !important;
}

.tnt-fluent-form:not(.tnt-fluent-form--legacy) .ff-el-form-control {
	box-sizing: border-box;
	color: var(--tnt-ff-text) !important;
	background: var(--tnt-ff-input-bg) !important;
	border-radius: var(--tnt-ff-input-radius);
	padding: var(--tnt-ff-input-pad-y) var(--tnt-ff-input-pad-x) !important;
	caret-color: var(--tnt-ff-text);
	transition:
		color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.tnt-fluent-form--dark:not(.tnt-fluent-form--legacy) .ff-el-form-control {
	border: none;
	border-bottom: 2px solid var(--tnt-ff-border);
	box-shadow: none;
}

.tnt-fluent-form--light:not(.tnt-fluent-form--legacy) .ff-el-form-control {
	border: 1px solid var(--tnt-ff-border) !important;
	box-shadow: var(--tnt-ff-ring-idle, 0 0 0 3px transparent);
}

.tnt-fluent-form:not(.tnt-fluent-form--legacy) .ff-el-form-control::placeholder {
	font-family: soleil, Montserrat, sans-serif !important;
	font-size: 11px !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--tnt-ff-placeholder);
	opacity: 1;
}

.tnt-fluent-form:not(.tnt-fluent-form--legacy) .ff-el-form-control:focus {
	outline: none;
	font-family: soleil, Montserrat, sans-serif !important;
	font-size: 14px !important;
	letter-spacing: 0.01em;
	color: var(--tnt-ff-text) !important;
	border-color: var(--tnt-ff-border-focus);
	box-shadow: var(--tnt-ff-focus-shadow);
}

.tnt-fluent-form--dark:not(.tnt-fluent-form--legacy) .ff-el-form-control:focus {
	border-bottom-color: var(--tnt-ff-border-focus);
}

.tnt-fluent-form:not(.tnt-fluent-form--legacy) .ff-el-form-control.tnt-fluent-valued:not(:focus) {
	font-family: soleil, Montserrat, sans-serif !important;
	font-size: 14px !important;
	letter-spacing: 0.01em;
	color: var(--tnt-ff-filled-text) !important;
}

.tnt-fluent-form--dark:not(.tnt-fluent-form--legacy) .ff-el-form-control.tnt-fluent-valued:not(:focus) {
	border-bottom-color: var(--tnt-ff-filled-border);
	box-shadow: none;
}

.tnt-fluent-form--light:not(.tnt-fluent-form--legacy) .ff-el-form-control.tnt-fluent-valued:not(:focus) {
	background: rgba(255, 255, 255, 0.95) !important;
	border-color: var(--tnt-ff-filled-border) !important;
	box-shadow: var(--tnt-ff-ring-idle, 0 0 0 3px transparent);
}

.tnt-fluent-form:not(.tnt-fluent-form--legacy) textarea.ff-el-form-control {
	min-height: 4.5rem;
	resize: vertical;
}

.tnt-fluent-form--dark:not(.tnt-fluent-form--legacy) textarea.ff-el-form-control {
	border: none;
	border-bottom: 2px solid var(--tnt-ff-border);
	padding: 0.5rem 0.65rem !important;
}

.tnt-fluent-form--light:not(.tnt-fluent-form--legacy) textarea.ff-el-form-control {
	padding: 0.65rem 0.75rem !important;
}

.tnt-fluent-form:not(.tnt-fluent-form--legacy) .ff-btn-submit,
.tnt-fluent-form:not(.tnt-fluent-form--legacy) button[type='submit'] {
	background: var(--tnt-ff-submit-bg) !important;
	color: var(--tnt-ff-submit-fg) !important;
	border: 2px solid var(--tnt-ff-submit-border) !important;
}

.tnt-fluent-form:not(.tnt-fluent-form--legacy).is-all-filled-done .ff-btn-submit,
.tnt-fluent-form:not(.tnt-fluent-form--legacy).is-all-filled-done button[type='submit'],
.tnt-fluent-form:not(.tnt-fluent-form--legacy) .fluentform_wrapper.is-all-filled-done .ff-btn-submit,
.tnt-fluent-form:not(.tnt-fluent-form--legacy) .fluentform_wrapper.is-all-filled-done button[type='submit'] {
	transition:
		background-color 0.35s ease,
		border-color 0.35s ease,
		color 0.35s ease !important;
	background-image: none !important;
	--tnt-submit-bg: var(--tnt-ff-submit-ready-bg);
	--tnt-submit-fg: var(--tnt-ff-submit-ready-fg);
	background-color: var(--tnt-ff-submit-ready-bg) !important;
	border-color: var(--tnt-ff-submit-ready-bg) !important;
	color: var(--tnt-ff-submit-ready-fg) !important;
	animation: tnt-fluent-ready-glow 2.4s ease-in-out infinite;
}

.tnt-fluent-form--light:not(.tnt-fluent-form--legacy).is-all-filled-done .ff-btn-submit,
.tnt-fluent-form--light:not(.tnt-fluent-form--legacy).is-all-filled-done button[type='submit'],
.tnt-fluent-form--light:not(.tnt-fluent-form--legacy) .fluentform_wrapper.is-all-filled-done .ff-btn-submit,
.tnt-fluent-form--light:not(.tnt-fluent-form--legacy) .fluentform_wrapper.is-all-filled-done button[type='submit'] {
	animation: tnt-fluent-ready-glow-light 2.4s ease-in-out infinite;
}

@keyframes tnt-fluent-ready-glow-light {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(27, 122, 74, 0.35);
	}
	50% {
		box-shadow: 0 0 0 7px rgba(27, 122, 74, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnt-fluent-form:not(.tnt-fluent-form--legacy).is-all-filled-done .ff-btn-submit,
	.tnt-fluent-form:not(.tnt-fluent-form--legacy).is-all-filled-done button[type='submit'],
	.tnt-fluent-form:not(.tnt-fluent-form--legacy) .fluentform_wrapper.is-all-filled-done .ff-btn-submit,
	.tnt-fluent-form:not(.tnt-fluent-form--legacy) .fluentform_wrapper.is-all-filled-done button[type='submit'] {
		animation: none;
		box-shadow: 0 0 0 2px rgba(27, 122, 74, 0.28);
	}
}

.tnt-fluent-form:not(.tnt-fluent-form--legacy) select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--tnt-ff-input-bg) !important;
	color: var(--tnt-ff-text) !important;
	border-radius: var(--tnt-ff-input-radius);
	padding: var(--tnt-ff-input-pad-y) var(--tnt-ff-input-pad-x) !important;
	padding-right: 1.75rem !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e6b75d' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.15rem center;
	background-size: 12px 8px;
}

.tnt-fluent-form--dark:not(.tnt-fluent-form--legacy) select.ff-el-form-control {
	border: none !important;
	border-bottom: 2px solid var(--tnt-ff-border) !important;
	box-shadow: none;
	background-color: transparent !important;
	padding-left: 0 !important;
	padding-right: 1.5rem !important;
	border-radius: 3px;
}

.tnt-fluent-form--dark:not(.tnt-fluent-form--legacy) select.ff-el-form-control:focus {
	border-bottom-color: var(--tnt-ff-border-focus);
}

.tnt-fluent-form--dark:not(.tnt-fluent-form--legacy) select.ff-el-form-control.tnt-fluent-valued:not(:focus) {
	border-bottom-color: var(--tnt-ff-filled-border);
}

.tnt-fluent-form:not(.tnt-fluent-form--legacy) select.ff-el-form-control option[value=''] {
	color: var(--tnt-ff-placeholder);
}

.tnt-fluent-form--dark:not(.tnt-fluent-form--legacy) select.ff-el-form-control option {
	background-color: var(--tnt-charcoal, #2a2a2a);
	color: var(--tnt-foreground, #f4f4f4);
}