/* =========================================================================
   Fluent Forms in the TAGE form style (01-tokens.md › Fluent Forms mapping).
   Same look as the designed forms in base.css §4:
     .ff-el-input--label  = .tage-label       .ff-el-form-control = .tage-input
     .ff-el-is-error      = .is-error         .ff-el-help-message = .tage-help
     .ff-el-form-check    = chip choices      .ff-btn-submit      = primary button
     .ff-message-success  = success panel
   Scoped to .fluentform. Consent/terms (.ff-el-tc) stay a checkbox, not chips.
   ========================================================================= */

.fluentform { font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); }
.fluentform .ff-el-group { margin-bottom: var(--wp--preset--spacing--lg); }
.fluentform .ff-t-container { gap: 0 var(--wp--preset--spacing--md); }

/* Label, required mark, help */
.fluentform .ff-el-input--label { margin-bottom: 8px; }
.fluentform .ff-el-input--label label,
.fluentform .ff-el-section-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--ui);
	color: var(--wp--preset--color--ink);
}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before { color: var(--wp--preset--color--terracotta-text); }
.fluentform .ff-el-help-message {
	margin-top: 8px;
	font-size: 13px;
	font-style: normal;
	line-height: var(--wp--custom--line-height--small);
	color: var(--wp--preset--color--muted);
}

/* Text field */
.fluentform .ff-el-form-control {
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	padding: 0 14px;
	border: var(--wp--custom--border--input);
	border-radius: var(--wp--custom--radius--input);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px; /* no iOS zoom */
	font-weight: 400;
	line-height: var(--wp--custom--line-height--input);
	box-shadow: none;
	transition: border-color var(--wp--custom--motion--base) ease, box-shadow var(--wp--custom--motion--base) ease, background-color var(--wp--custom--motion--base) ease;
}
.fluentform textarea.ff-el-form-control { height: auto; min-height: 120px; padding: 14px; line-height: 1.5; }
.fluentform select.ff-el-form-control {
	padding-right: 44px;
	background-image: url("../icons/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
	-webkit-appearance: none;
	appearance: none;
}
.fluentform .ff-el-form-control::placeholder { color: var(--wp--preset--color--muted); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
	.fluentform .ff-el-form-control:hover { border-color: var(--wp--preset--color--subtle); }
}
.fluentform .ff-el-form-control.ff-el-form-control:focus-visible { outline: none !important; } /* green halo, not tage-motion's ring */
.fluentform .ff-el-form-control:focus {
	outline: none;
	border: var(--wp--custom--border--focus-field);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--focus--field-ring);
}
.fluentform .ff-el-form-control:disabled,
.fluentform .ff-el-form-control[readonly] {
	border: 1.5px dashed var(--wp--preset--color--stone);
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--muted);
}

/* Error: terracotta border + tint; message replaces help */
.fluentform .ff-el-is-error .ff-el-form-control {
	border: var(--wp--custom--border--error);
	background-color: var(--wp--preset--color--terracotta-tint);
	box-shadow: none;
}
.fluentform .ff-el-is-error .ff-el-help-message { display: none; }
.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	line-height: var(--wp--custom--line-height--small);
	color: var(--wp--preset--color--terracotta-text);
}
.fluentform .ff-el-is-error .text-danger::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 6px -3px 0;
	background-color: currentColor;
	-webkit-mask: url("../icons/alert.svg") center / contain no-repeat;
	mask: url("../icons/alert.svg") center / contain no-repeat;
}
.ff-errors-in-stack {
	padding: 16px 18px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--terracotta-tint);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
	color: var(--wp--preset--color--terracotta-text);
}

/* Radios + checkboxes as chips (pick one / pick any) */
.fluentform .ff-el-group:not(.ff-el-tc) .ff-el-input--content:has(> .ff-el-form-check) { display: flex; flex-wrap: wrap; gap: 8px; }
.fluentform .ff-el-group:not(.ff-el-tc) .ff-el-form-check { margin: 0; padding: 0; }
.fluentform .ff-el-group:not(.ff-el-tc) .ff-el-form-check-label { position: relative; display: inline-flex; margin: 0; padding: 0; cursor: pointer; }
.fluentform .ff-el-group:not(.ff-el-tc) .ff-el-form-check-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fluentform .ff-el-group:not(.ff-el-tc) .ff-el-form-check-label > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	border: var(--wp--custom--border--input);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
	transition: border-color var(--wp--custom--motion--base) ease, background-color var(--wp--custom--motion--base) ease, color var(--wp--custom--motion--base) ease;
}
@media (hover: hover) and (pointer: fine) {
	.fluentform .ff-el-group:not(.ff-el-tc) .ff-el-form-check-label:hover > span { border-color: var(--wp--preset--color--terracotta); color: var(--wp--preset--color--terracotta-text); }
}
/* Selected = green border, green tint, tick */
.fluentform .ff-el-group:not(.ff-el-tc) .ff-el-form-check-input:checked + span {
	border-color: var(--wp--preset--color--green);
	background: var(--wp--preset--color--green-tint);
	color: var(--wp--preset--color--green-ink);
	font-weight: 700;
}
.fluentform .ff-el-group:not(.ff-el-tc) .ff-el-form-check-input:checked + span::before {
	content: "";
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: url("../icons/check.svg") center / contain no-repeat;
	mask: url("../icons/check.svg") center / contain no-repeat;
}
.fluentform .ff-el-group:not(.ff-el-tc) .ff-el-form-check-input:focus-visible + span {
	outline: var(--wp--custom--focus--ring);
	outline-offset: var(--wp--custom--focus--offset);
}
.fluentform .ff-el-is-error .ff-el-form-check-label > span { border-color: var(--wp--preset--color--terracotta); background: var(--wp--preset--color--terracotta-tint); }
.fluentform .ff-el-form-check.ff_item_disabled .ff-el-form-check-label > span,
.fluentform .ff-el-form-check-input:disabled + span {
	border-color: var(--wp--preset--color--stone);
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--muted);
	text-decoration: line-through;
}

/* Consent / terms checkbox (22px, radius 6) */
.fluentform .ff-el-tc .ff-el-form-check-label { display: flex; gap: 12px; align-items: flex-start; font-size: var(--wp--preset--font-size--ui); line-height: 1.5; color: var(--wp--preset--color--ink); }
.fluentform .ff-el-tc .ff-el-form-check-input {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	border: var(--wp--custom--border--input);
	border-radius: 6px;
	background: var(--wp--preset--color--white) no-repeat center / 14px 14px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.fluentform .ff-el-tc .ff-el-form-check-input:checked {
	border-color: var(--wp--preset--color--green);
	background-color: var(--wp--preset--color--green);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.fluentform .ff-el-tc.ff-el-is-error .ff-el-form-check-input { border-color: var(--wp--preset--color--terracotta); background-color: var(--wp--preset--color--terracotta-tint); }
.fluentform .ff-el-tc .ff-el-form-check-input:focus-visible { outline: var(--wp--custom--focus--ring); outline-offset: var(--wp--custom--focus--offset); }
.fluentform .ff-el-tc a { color: var(--wp--preset--color--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* File upload: dashed drop area look on the upload button */
.fluentform .ff_upload_btn.ff-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 110px;
	padding: 14px;
	border: 1.5px dashed var(--wp--preset--color--subtle);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--green);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.fluentform .ff_upload_btn.ff-btn::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: var(--wp--preset--color--ink);
	-webkit-mask: url("../icons/upload.svg") center / contain no-repeat;
	mask: url("../icons/upload.svg") center / contain no-repeat;
}
.fluentform .ff-uploaded-list .ff-upload-preview {
	border: 1.5px solid var(--wp--preset--color--sand-deep);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--white);
}
.fluentform .ff-upload-progress-inline { height: 4px; border-radius: 2px; background: var(--wp--preset--color--sand-deep); }
.fluentform .ff-upload-progress-inline .ff-el-progress-bar { background: var(--wp--preset--color--green); }

/* Submit = primary button. !important beats Fluent's per-form colour picker:
   the brand colour always wins. Never disabled for missing fields. */
.fluentform .ff_submit_btn_wrapper .ff-btn-submit,
.fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 30px;
	border: 1.5px solid var(--wp--preset--color--green) !important;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--green) !important;
	color: var(--wp--preset--color--cream) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	opacity: 1;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--base) ease, border-color var(--wp--custom--motion--base) ease, transform var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}
@media (hover: hover) and (pointer: fine) {
	.fluentform .ff-btn-submit:not(.ff_btn_no_style):hover {
		border-color: var(--wp--preset--color--terracotta) !important;
		background: var(--wp--preset--color--terracotta) !important;
		color: var(--wp--preset--color--white) !important;
		opacity: 1;
	}
}
.fluentform .ff-btn-submit:not(.ff_btn_no_style):active {
	border-color: var(--wp--preset--color--terracotta) !important;
	background: var(--wp--preset--color--terracotta) !important;
	color: var(--wp--preset--color--white) !important;
	transform: scale(0.98);
}
.fluentform .ff-btn-submit:focus-visible { outline: var(--wp--custom--focus--ring); outline-offset: var(--wp--custom--focus--offset); }
/* Sending */
.fluentform .ff-btn-submit.disabled,
.fluentform .ff-btn-submit[disabled] { opacity: 1; cursor: progress; }
.fluentform .ff-btn-submit .ff-btn-spinner,
.fluentform .ff-working .ff-btn-submit::before { border-color: currentColor; border-right-color: transparent; }
@media (max-width: 479px) {
	.fluentform .ff-btn-submit:not(.ff_btn_no_style) { width: 100%; }
}

/* Success panel: replaces the form */
.ff-message-success {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
	border: 1.5px solid var(--wp--preset--color--green-line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--green-tint);
	box-shadow: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--body);
}
.ff-message-success::before {
	content: "";
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--round);
	background: var(--wp--preset--color--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
.ff-message-success :is(h1, h2, h3, h4, strong):first-child {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 600;
	line-height: var(--wp--custom--line-height--h-4);
	color: var(--wp--preset--color--ink);
}
.ff-message-success p { margin: 0; }