/**
 * airihub — Fluent Forms design system for the oAIRI assessment.
 *
 * Ported from the AIRI ecosystem stylesheet (aiready.sg) and rebound to the sub-brand accent: every
 * accent reference is var(--global-palette1) (via --airi-ff), so the network renders #C00000 and each
 * sub-brand's Kadence palette re-themes its own form. Neutrals / radii / shadows are the ecosystem tokens.
 * `!important` is required throughout to beat Fluent Forms' defaults + per-form inline styles.
 *
 * The form renders as a centred WHITE CARD with a slim accent progress bar, CARD-STYLE radio options,
 * styled labels/inputs, and filled/outline nav buttons. Button text uses the contrast-aware
 * --airi-on-accent (task-20260710-002) so it stays legible on any brand colour.
 *
 * NOTE: aiready.sg's teaching components (.airi-welcome / .airi-callout / .airi-dimension-*) are NOT
 * included — airihub's imported oAIRI form has no such HTML. Add them here if that HTML is ported later.
 */

.fluentform {
	/* Accent — follows the sub-brand's Kadence palette; contrast-aware companions from task-20260710-002. */
	--airi-ff:       var(--global-palette1, #C00000);
	--airi-ff-hover: color-mix(in srgb, var(--airi-ff) 82%, #000);
	--airi-ff-06:    color-mix(in srgb, var(--airi-ff) 6%, transparent);
	--airi-ff-10:    color-mix(in srgb, var(--airi-ff) 10%, transparent);
	--airi-on-ff:    var(--airi-on-accent, #ffffff);
	--airi-ff-text:  var(--airi-accent-text, var(--airi-ff));
	/* Neutrals + shape (ecosystem tokens). */
	--airi-ink: #1A1A1A; --airi-strong: #404040; --airi-med: #6B6B6B; --airi-subtle: #999999;
	--airi-line: #E5E5E5; --airi-bg-subtle: #F2F2F2; --airi-bg-lighter: #F9F9F9; --airi-white: #FFFFFF;
	--airi-radius: 8px; --airi-radius-lg: 12px;
	--airi-shadow: 0 4px 16px rgba(26,26,26,.08); --airi-shadow-sm: 0 2px 8px rgba(26,26,26,.04);
	--airi-transition: all .25s ease-in-out;

	/* Container card. */
	max-width: 760px; margin: 0 auto; box-sizing: border-box;
	background: var(--airi-white); border-radius: var(--airi-radius-lg);
	box-shadow: var(--airi-shadow); padding: 40px 48px;
}
@media (max-width: 600px) { .fluentform { padding: 26px 20px; } }

/* --- step header --- */
.fluentform .ff-step-header,
.fluentform .ff_step_progress_label {
	color: var(--airi-med) !important; font-size: .85rem !important; text-transform: uppercase;
	letter-spacing: .06em; font-weight: 600; margin-bottom: 16px !important;
}
.fluentform .ff-step-header:empty,
.fluentform .ff_step_progress_label:empty { display: none !important; }

/* --- progress bar --- */
.fluentform .ff-el-progress {
	background-color: var(--airi-bg-subtle) !important; border-radius: 3px !important;
	height: 6px !important; margin-bottom: 32px !important; overflow: hidden;
}
.fluentform .ff-el-progress-bar {
	background-color: var(--airi-ff) !important; border-radius: 3px !important;
	transition: width .4s ease-in-out; height: 100% !important;
}
.fluentform .ff-el-progress-status { display: none !important; }

/* --- question labels + required asterisk + tooltip --- */
.fluentform .ff-el-input--label label,
.fluentform .ff-el-input--label > label {
	font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--airi-ink) !important;
	line-height: 1.45 !important; margin-bottom: 16px !important; display: block !important;
}
.fluentform .ff-el-is-required.asterisk-right label::after,
.fluentform label .ff-el-is-required-asterisk { color: var(--airi-ff) !important; font-weight: 400 !important; margin-left: 4px; }
.fluentform .ff-el-help-message,
.fluentform .ff-el-tooltip {
	font-size: .85rem !important; color: var(--airi-med) !important; font-style: italic;
	margin-top: -8px !important; margin-bottom: 16px !important;
}

/* --- CARD-STYLE RADIO BUTTONS (the standout) --- */
.fluentform .ff-el-form-check { display: block !important; margin: 0 0 10px 0 !important; padding: 0 !important; background: transparent !important; border: none !important; }
.fluentform .ff-el-form-check label.ff-el-form-check-label,
.fluentform .ff-el-form-check label {
	display: flex !important; align-items: flex-start !important; gap: 14px !important; width: 100% !important;
	padding: 16px 18px !important; background: var(--airi-white) !important; border: 1.5px solid var(--airi-line) !important;
	border-radius: var(--airi-radius) !important; cursor: pointer !important; transition: var(--airi-transition);
	margin: 0 !important; font-weight: 400 !important; color: var(--airi-ink) !important; font-size: .95rem !important;
	line-height: 1.5 !important; position: relative;
}
.fluentform .ff-el-form-check label:hover { border-color: var(--airi-subtle) !important; background: var(--airi-bg-lighter) !important; }
.fluentform .ff-el-form-check input[type="radio"]:checked + label,
.fluentform .ff-el-form-check input[type="radio"]:checked ~ label,
.fluentform .ff-el-form-check label:has(input[type="radio"]:checked) { border-color: var(--airi-ff) !important; background: var(--airi-ff-06) !important; }
.fluentform .ff-el-form-check input[type="radio"] { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px; height: 1px; margin: 0; }
.fluentform .ff-el-form-check label::before {
	content: '' !important; flex-shrink: 0; display: inline-block; width: 20px; height: 20px;
	border: 2px solid var(--airi-subtle); border-radius: 50%; margin-top: 2px; background: var(--airi-white);
	transition: var(--airi-transition); box-sizing: border-box;
}
.fluentform .ff-el-form-check label:has(input[type="radio"]:checked)::before {
	border-color: var(--airi-ff) !important;
	background: radial-gradient(circle, var(--airi-ff) 0%, var(--airi-ff) 40%, var(--airi-white) 45%, var(--airi-white) 100%);
}
.fluentform .ff-el-form-check input[type="radio"]::before,
.fluentform .ff-el-form-check input[type="radio"]::after { display: none !important; }
.fluentform ul.ff-el-form-check-list { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }
.fluentform ul.ff-el-form-check-list li { list-style: none !important; background: none !important; padding-left: 0 !important; }
.fluentform ul.ff-el-form-check-list li::before,
.fluentform ul.ff-el-form-check-list li::marker { display: none !important; content: none !important; }

/* --- consent checkbox — excluded from the radio-card styling --- */
.fluentform .ff-el-form-check:has(input[type="checkbox"]) label {
	display: inline-flex !important; padding: 0 !important; background: transparent !important; border: none !important;
	border-radius: 0 !important; gap: 8px !important; font-size: .9rem !important; align-items: center !important;
}
.fluentform .ff-el-form-check:has(input[type="checkbox"]) label::before { display: none !important; }
.fluentform .ff-el-form-check:has(input[type="checkbox"]) label:hover { background: transparent !important; border: none !important; }
.fluentform .ff-el-form-check:has(input[type="checkbox"]) input[type="checkbox"] {
	position: static !important; opacity: 1 !important; width: 18px !important; height: 18px !important;
	pointer-events: auto !important; margin: 0 !important; accent-color: var(--airi-ff);
}

/* --- text inputs --- */
.fluentform .ff-el-input,
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="url"],
.fluentform input[type="password"],
.fluentform input[type="tel"],
.fluentform select,
.fluentform textarea {
	border-radius: var(--airi-radius) !important; border: 1.5px solid var(--airi-line) !important;
	padding: 12px 14px !important; font-size: .95rem !important; color: var(--airi-ink) !important;
	background: var(--airi-white) !important; transition: var(--airi-transition); box-shadow: none !important;
}
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus { border-color: var(--airi-ff) !important; box-shadow: 0 0 0 3px var(--airi-ff-10) !important; outline: none !important; }

/* --- navigation row --- */
.fluentform .ff-el-group.ff-text-right,
.fluentform .step-nav,
.fluentform .ff_nav_btns {
	display: flex !important; justify-content: space-between !important; align-items: center !important;
	margin-top: 32px !important; padding-top: 24px !important; border-top: 1px solid var(--airi-line); gap: 12px; flex-wrap: wrap;
}
/* NEXT + SUBMIT — filled accent (broad selector coverage across FF versions). */
.fluentform .ff-btn-submit,
.fluentform .ff-btn.ff-btn-submit,
.fluentform .ff-btn-next,
.fluentform button.ff_btn_next,
.fluentform button[class*="ff_btn_next"],
.fluentform button[class*="ff-btn-next"],
.fluentform button[type="submit"] {
	background-color: var(--airi-ff) !important; background-image: none !important; border: 2px solid var(--airi-ff) !important;
	color: var(--airi-on-ff) !important; border-radius: var(--airi-radius) !important; padding: 12px 28px !important;
	font-size: .95rem !important; font-weight: 600 !important; transition: var(--airi-transition); cursor: pointer;
	box-shadow: none !important; text-transform: none !important;
	margin-left: auto !important; /* keep Next/Submit hard right; our flex nav overrides FF's ff-float-right, so a lone Next would otherwise fall left. Previous (no auto-margin) stays left. */
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-next:hover,
.fluentform button[class*="ff_btn_next"]:hover,
.fluentform button[class*="ff-btn-next"]:hover,
.fluentform button[type="submit"]:hover {
	background-color: var(--airi-ff-hover) !important; border-color: var(--airi-ff-hover) !important;
	color: var(--airi-on-ff) !important; transform: translateY(-1px); box-shadow: var(--airi-shadow-sm) !important;
}
/* PREVIOUS — accent outline. */
.fluentform .ff-btn-prev,
.fluentform button[class*="ff_btn_back"],
.fluentform button[class*="ff_btn_prev"],
.fluentform button[class*="ff-btn-prev"],
.fluentform .ff-btn-secondary {
	background-color: var(--airi-white) !important; background-image: none !important; color: var(--airi-ff-text) !important;
	border: 2px solid var(--airi-ff) !important; border-radius: var(--airi-radius) !important; padding: 12px 28px !important;
	font-size: .95rem !important; font-weight: 600 !important; transition: var(--airi-transition); cursor: pointer;
	box-shadow: none !important; text-transform: none !important;
}
.fluentform .ff-btn-prev:hover,
.fluentform button[class*="ff_btn_back"]:hover,
.fluentform button[class*="ff-btn-prev"]:hover,
.fluentform .ff-btn-secondary:hover {
	background-color: var(--airi-ff) !important; border-color: var(--airi-ff) !important;
	color: var(--airi-on-ff) !important; transform: translateY(-1px); box-shadow: var(--airi-shadow-sm) !important;
}
/* SAVE & RESUME — HIDDEN. The oAIRI assessment does not use Fluent Forms' "Save & Resume" (it's disabled at
   source via form_save_state_status=no on the template + every clone). This is the belt-and-suspenders: hide
   the button network-wide regardless of the FF Pro version / render condition or if a clone re-enables the
   flag. Broad class match, scoped to .fluentform so nothing else is affected. */
.fluentform .ff-save-resume-button,
.fluentform .ff_save_progress_btn,
.fluentform .ff-el-form-save-progress-btn,
.fluentform .ff_save_button,
.fluentform .ff-btn-save-progress,
.fluentform [class*="save_progress"],
.fluentform [class*="save-progress"],
.fluentform [class*="save-resume"],
.fluentform [class*="save_resume"],
.fluentform [data-save_action],
.fluentform .ff_submit_btn_wrapper:has(.ff-btn-save-progress) { display: none !important; }

/* --- links inside the form --- */
.fluentform a { color: var(--airi-ff-text); }