/* ==========================================================================
   TeamCNF booking form (every Fluent Forms form on the site)
   Fields, choice pills, the submit button, error messages and the thank-you
   message, matching the theme's glass form cards. The plugin's own look is
   switched off in "TeamCNF booking form (PHP)". Selectors start with
   .fluentform .frm-fluent-form so they win over the plugin's layout styles
   whichever loads last.
   Every value comes from the theme tokens (theme.json): --wp--preset--* and
   --wp--custom--*.
   ========================================================================== */

/* ---- Layout -------------------------------------------------------------- */
.fluentform .frm-fluent-form fieldset {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
}

.fluentform .frm-fluent-form .ff-el-group {
	display: grid;
	grid-column: 1 / -1;
	gap: var(--wp--preset--spacing--20);
	align-content: start;
	margin: 0;
}

/* The plugin's clearfix pseudo-elements would become extra grid rows */
.fluentform .frm-fluent-form .ff-el-group::before,
.fluentform .frm-fluent-form .ff-el-group::after {
	content: none;
}

/* Short single-line fields pair up from 640px: name beside company, email beside phone */
@media (min-width: 640px) {
	.fluentform .frm-fluent-form fieldset {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fluentform .frm-fluent-form .ff-el-group:has(> .ff-el-input--content > :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"])) {
		grid-column: auto;
	}
}

/* ---- Labels -------------------------------------------------------------- */
.fluentform .frm-fluent-form .ff-el-input--label {
	display: block;
	margin: 0;
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.fluentform .frm-fluent-form .ff-el-input--label label {
	margin: 0;
	color: inherit;
	font: inherit;
}

/* Every field is required unless its label says "(optional)", so no asterisks */
.fluentform .frm-fluent-form .ff-el-input--label.ff-el-is-required:is(.asterisk-left, .asterisk-right) label::before,
.fluentform .frm-fluent-form .ff-el-input--label.ff-el-is-required:is(.asterisk-left, .asterisk-right) label::after {
	content: none;
}

.fluentform .frm-fluent-form .tcnf-optional {
	color: var(--wp--custom--text--meta);
	font-weight: 400;
}

.fluentform .frm-fluent-form .ff-el-help-message {
	margin: 0;
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
}

/* ---- Text fields ---------------------------------------------------------- */
.fluentform .frm-fluent-form .ff-el-form-control {
	display: block;
	width: 100%;
	min-height: var(--wp--custom--size--control);
	margin: 0;
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--custom--glass--fill-subtle);
	color: var(--wp--custom--text--primary);
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	transition:
		border-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.fluentform .frm-fluent-form .ff-el-form-control::placeholder {
	color: var(--wp--custom--text--meta);
	opacity: 1;
}

.fluentform .frm-fluent-form .ff-el-form-control:hover {
	border-color: var(--wp--custom--glass--border-strong);
}

.fluentform .frm-fluent-form .ff-el-form-control:focus-visible {
	border-color: var(--wp--custom--glass--border-strong);
	background: var(--wp--custom--glass--fill);
}

.fluentform .frm-fluent-form textarea.ff-el-form-control {
	min-height: calc(var(--wp--custom--size--control) * 2.4);
	padding-block: var(--wp--preset--spacing--40);
	resize: vertical;
}

/* After them, so a field with a problem keeps its colours on hover and focus */
.fluentform .frm-fluent-form .ff-el-form-control[aria-invalid="true"],
.fluentform .frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: var(--wp--custom--accent-line);
	background: var(--wp--custom--accent-soft);
}

/* ---- Choice pills (checkboxes and radio buttons) ------------------------- */
.fluentform .frm-fluent-form .ff-el-input--content:has(> .ff-el-form-check) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.fluentform .frm-fluent-form .ff-el-form-check {
	position: relative;
	margin: 0;
}

.fluentform .frm-fluent-form .ff-el-form-check-label {
	display: flex;
	margin: 0;
	color: inherit;
	cursor: pointer;
}

/* The real box sits invisibly over the pill, so clicks and keys still reach it */
.fluentform .frm-fluent-form .ff-el-form-check-label .ff-el-form-check-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.fluentform .frm-fluent-form .ff-el-form-check-label > span {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--glass--fill-subtle);
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	line-height: var(--wp--custom--leading--snug);
	transition:
		background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		border-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

/* The tick grows in when the pill is chosen */
.fluentform .frm-fluent-form .ff-el-form-check-label > span::before {
	content: "";
	flex: none;
	width: 0;
	height: var(--wp--custom--size--icon--xs);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: width var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.fluentform .frm-fluent-form .ff-el-form-check-input:hover + span {
	border-color: var(--wp--custom--glass--border-strong);
}

.fluentform .frm-fluent-form .ff-el-form-check-input:checked + span {
	border-color: var(--wp--custom--accent-line);
	background: var(--wp--custom--accent-soft);
	color: var(--wp--custom--text--primary);
}

.fluentform .frm-fluent-form .ff-el-form-check-input:checked + span::before {
	width: var(--wp--custom--size--icon--xs);
}

.fluentform .frm-fluent-form .ff-el-form-check-input:focus-visible + span {
	box-shadow: var(--wp--custom--focus-ring);
}

/* ---- Messages under a field ---------------------------------------------- */
.fluentform .frm-fluent-form .ff-el-group .error.text-danger {
	display: flex;
	flex: 1 0 100%;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--x-small);
}

/* A red dot before the message */
.fluentform .frm-fluent-form .ff-el-group .error.text-danger::before {
	content: "";
	flex: none;
	width: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--preset--color--accent-hover);
}

.fluentform .frm-fluent-form .ff-el-group .error-clear {
	display: none;
}

/* Problems that belong to no single field (the plugin shows the box when needed) */
.fluentform .ff-errors-in-stack {
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--accent-line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--custom--accent-soft);
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

.fluentform .ff-errors-in-stack .error {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* ---- Submit button ------------------------------------------------------- */
.fluentform .frm-fluent-form .ff_submit_btn_wrapper {
	text-align: center;
}

/* The red primary button at the large size, full width with an arrow. Clipped so
   the plugin's sending bar keeps to the rounded ends. */
.fluentform .frm-fluent-form .ff-btn.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	min-height: var(--wp--custom--size--control-lg);
	margin: 0;
	padding: 0 var(--wp--preset--spacing--50);
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--custom--text--on-accent);
	box-shadow: var(--wp--preset--shadow--glow), var(--wp--custom--inset-sheen);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: var(--wp--custom--leading--snug);
	text-align: center;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	transition:
		transform var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		box-shadow var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		background-color var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		border-color var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		opacity var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

/* The arrow, after the label (::after is the plugin's sending bar) */
.fluentform .frm-fluent-form .ff-btn.ff-btn-submit::before {
	content: "";
	order: 1;
	flex: none;
	width: var(--wp--custom--size--icon--sm);
	height: var(--wp--custom--size--icon--sm);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.fluentform .frm-fluent-form .ff-btn.ff-btn-submit:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--custom--text--on-accent);
	transform: translateY(calc(var(--wp--custom--nudge) * -1));
	box-shadow: var(--wp--preset--shadow--glow-strong), var(--wp--custom--inset-sheen);
}

.fluentform .frm-fluent-form .ff-btn.ff-btn-submit:hover::before {
	transform: translateX(var(--wp--preset--spacing--10));
}

.fluentform .frm-fluent-form .ff-btn.ff-btn-submit:active {
	background-color: var(--wp--preset--color--accent-deep);
}

.fluentform .frm-fluent-form .ff-btn.ff-btn-submit:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--focus-ring);
}

/* While sending */
.fluentform .frm-fluent-form .ff-btn.ff-btn-submit:is(.ff-working, .disabled, :disabled) {
	opacity: var(--wp--custom--opacity--muted);
	transform: none;
	cursor: progress;
}

/* ---- Thank-you message ---------------------------------------------------- */
/* Takes the form's place: a tick badge, then the message from the form's settings */
.fluentform .ff-message-success {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
	align-content: center;
	min-height: var(--wp--custom--size--form-success-h);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: var(--wp--custom--leading--snug);
}

.fluentform .ff-message-success:focus {
	outline: none;
}

.fluentform .ff-message-success > * {
	margin: 0;
}

/* The badge and its tick share the first row; the message follows below */
.fluentform .ff-message-success::before,
.fluentform .ff-message-success::after {
	content: "";
	grid-row: 1;
	grid-column: 1;
	align-self: center;
}

.fluentform .ff-message-success::before {
	width: var(--wp--custom--size--icon-badge);
	height: var(--wp--custom--size--icon-badge);
	border: 1px solid var(--wp--custom--accent-line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--gradient--sheen), var(--wp--custom--glass--fill-accent);
	box-shadow: var(--wp--custom--inset-sheen);
}

.fluentform .ff-message-success::after {
	width: var(--wp--custom--size--icon--md);
	height: var(--wp--custom--size--icon--md);
	margin-left: calc((var(--wp--custom--size--icon-badge) - var(--wp--custom--size--icon--md)) / 2);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fluentform .ff-message-success :is(h2, h3, h4) {
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--xx-large);
}

.fluentform .ff-message-success :is(h2, h3, h4) ~ p {
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
}

/* Once sent, the card's title and note make way for the thank-you message */
.tcnf-consult__form:has(.ff-message-success) :is(.tcnf-consult__form-head, .tcnf-consult__note),
.tcnf-contact-form:has(.ff-message-success) :is(.tcnf-contact-form__head, .tcnf-contact-form__note) {
	display: none;
}