/**
 * Floating-label skin for Hafez_User_Field_Engine rows (front only).
 *
 * Loaded only while «برچسب شناور برای فیلدها» is on, so every rule here may
 * assume the engine printed the `.hafez-ff` markup:
 *
 *   .hafez-ff--float    text / email / tel / number / url / date / textarea:
 *                       the title sits inside the field and moves up onto the
 *                       top border on focus or when the field has a value.
 *   .hafez-ff--select   select / province / city: a select always shows a
 *                       value or its «انتخاب کنید» option, so the title stays
 *                       on the top border (same look as a floated label).
 *   .hafez-ff--group    radio choices: an outlined box with the title on its
 *                       top border and custom round choices inside.
 *   files / captcha / signature keep their own widgets with a static title
 *                       above (same typography as a floated title).
 *
 * Colours: engine tokens (--hafez-uf-*) → visual identity (--hafez-dp-*) →
 * site palette (--hafez-color-*) → fixed fallback. Dark mode follows those
 * tokens; the block at the end only fixes the hard-coded fallbacks.
 *
 * Selectors repeat `.hafez-ff` to outrank account.css / kyc.css / theme rules
 * without touching those files.
 */

.hafez-ff {
	--hafez-ff-h: var(--hafez-ff-height, 50px);
	--hafez-ff-px: 14px;
	--hafez-ff-size: 14px;
	--hafez-ff-label-size: 13.5px;
	--hafez-ff-float-size: 12px;
	--hafez-ff-font: var(--hafez-font-body, var(--hafez-dp-font, inherit));
	--hafez-ff-radius: var(--hafez-uf-input-radius, var(--hafez-dp-radius-field, var(--hafez-radius-md, 10px)));
	--hafez-ff-bg: var(--hafez-uf-input-bg, var(--hafez-color-surface, #fff));
	--hafez-ff-text: var(--hafez-uf-input-text, var(--hafez-dp-field-text, var(--hafez-color-text, #2c2624)));
	--hafez-ff-muted: var(--hafez-uf-placeholder, var(--hafez-dp-help, var(--hafez-color-text-muted, #6e6560)));
	--hafez-ff-label: var(--hafez-uf-label-color, var(--hafez-dp-label, var(--hafez-color-text, #2c2624)));
	--hafez-ff-border: var(--hafez-uf-input-border, var(--hafez-dp-box-border-color, var(--hafez-color-border, #e6dfda)));
	--hafez-ff-accent: var(--hafez-uf-focus-border, var(--hafez-dp-primary-bg, var(--hafez-color-primary, #f15a24)));
	--hafez-ff-danger: var(--hafez-color-danger, #dc2626);
	--hafez-ff-danger-text: var(--hafez-color-danger-text, #b91c1c);
	--hafez-ff-success: var(--hafez-color-success, #16a34a);
	/* Focus is shown by the border colour only (no glow), as the owner asked. */
	--hafez-ff-ring: 0 0 0 0 transparent;
	--hafez-ff-speed: 0.18s;
	--hafez-ff-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Easy-buy popup: follow its own palette. */
.hafez_buy__field--engine .hafez-ff {
	--hafez-ff-radius: var(--hb-input-radius, 12px);
	--hafez-ff-bg: var(--hb-input, #fff);
	--hafez-ff-text: var(--hb-text, #1c1917);
	--hafez-ff-border: var(--hb-border, #e7e5e4);
	--hafez-ff-accent: var(--hb-accent, #f15a24);
	--hafez-ff-danger: var(--hb-error, #b91c1c);
}

/* ---------------------------------------------------------------------------
 * Row: one rhythm for every engine field.
 * ------------------------------------------------------------------------ */

.hafez-ff.hafez-ff.hafez-user-fields__row {
	position: relative;
	box-sizing: border-box;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 var(--hafez-ff-gap, 20px) !important;
	padding: 0 !important;
	border: 0;
	min-width: 0;
}

/* Room for the title that sits on the top border of the first field. */
.hafez-ff.hafez-ff.hafez-user-fields__row:is(.hafez-ff--float, .hafez-ff--select, .hafez-ff--group) {
	padding-top: 11px !important;
}

.hafez-ff .hafez-ff__box {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Controls.
 * ------------------------------------------------------------------------ */

/* :where() keeps the type filter out of the specificity, so hover / focus / state rules win. */
.hafez-ff.hafez-ff .hafez-ff__box > :is(input, select, textarea):where(:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"])) {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: var(--hafez-ff-h) !important;
	min-height: var(--hafez-ff-h) !important;
	margin: 0 !important;
	padding: 0 var(--hafez-ff-px) !important;
	color: var(--hafez-ff-text) !important;
	-webkit-text-fill-color: var(--hafez-ff-text) !important;
	font-family: var(--hafez-ff-font) !important;
	font-size: var(--hafez-ff-size) !important;
	font-weight: 400 !important;
	line-height: normal !important;
	background-color: var(--hafez-ff-bg) !important;
	border: 1px solid var(--hafez-ff-border) !important;
	border-radius: var(--hafez-ff-radius) !important;
	outline: none !important;
	box-shadow: 0 0 0 0 transparent !important;
	transition:
		border-color var(--hafez-ff-speed) var(--hafez-ff-ease),
		box-shadow var(--hafez-ff-speed) var(--hafez-ff-ease),
		background-color var(--hafez-ff-speed) var(--hafez-ff-ease);
}

.hafez-ff.hafez-ff .hafez-ff__box > textarea {
	height: auto !important;
	min-height: 112px !important;
	padding: 18px var(--hafez-ff-px) 10px !important;
	line-height: 1.75 !important;
	resize: vertical;
}

/*
 * Hafez Jalali date picker (jalali-datepicker.js): the engine input becomes a
 * hidden carrier inside .hafez-jdp and the picker's text field is the control.
 * It gets the same look; the title floats through :focus-within / .is-filled
 * (field-float.js reads the visible field) and the :has() rule below.
 */
.hafez-ff.hafez-ff .hafez-ff__box > .hafez-jdp {
	display: flex;
	inline-size: 100%;
	max-inline-size: 100%;
}

.hafez-ff.hafez-ff .hafez-ff__box > .hafez-jdp input.hafez-jdp__input {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-inline-size: 0 !important;
	height: var(--hafez-ff-h) !important;
	min-height: var(--hafez-ff-h) !important;
	margin: 0 !important;
	padding-block: 0 !important;
	padding-inline: var(--hafez-ff-px) calc(var(--hafez-ff-px) + 30px) !important;
	color: var(--hafez-ff-text) !important;
	-webkit-text-fill-color: var(--hafez-ff-text) !important;
	font-family: var(--hafez-ff-font) !important;
	font-size: var(--hafez-ff-size) !important;
	font-weight: 400 !important;
	line-height: normal !important;
	background-color: var(--hafez-ff-bg) !important;
	border: 1px solid var(--hafez-ff-border) !important;
	border-radius: var(--hafez-ff-radius) !important;
	outline: none !important;
	box-shadow: 0 0 0 0 transparent !important;
	cursor: pointer;
	transition:
		border-color var(--hafez-ff-speed) var(--hafez-ff-ease),
		box-shadow var(--hafez-ff-speed) var(--hafez-ff-ease);
}

.hafez-ff.hafez-ff .hafez-ff__box > .hafez-jdp input.hafez-jdp__input:hover {
	border-color: color-mix(in srgb, var(--hafez-ff-text) 28%, var(--hafez-ff-border)) !important;
}

.hafez-ff.hafez-ff .hafez-ff__box > .hafez-jdp input.hafez-jdp__input:focus,
.hafez-ff.hafez-ff .hafez-ff__box > .hafez-jdp.is-open input.hafez-jdp__input {
	border-color: var(--hafez-ff-accent) !important;
	box-shadow: var(--hafez-ff-ring) !important;
}

.hafez-ff.hafez-ff .hafez-ff__box > .hafez-jdp input.hafez-jdp__input::placeholder {
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	opacity: 1;
}

.hafez-ff.hafez-ff .hafez-ff__box > .hafez-jdp input.hafez-jdp__input:focus::placeholder {
	color: var(--hafez-ff-muted) !important;
	-webkit-text-fill-color: var(--hafez-ff-muted) !important;
}

.hafez-ff.hafez-ff .hafez-ff__box > .hafez-jdp .hafez-jdp__toggle {
	inset-inline-end: 8px;
	color: var(--hafez-ff-muted);
}

.hafez-ff.hafez-ff .hafez-ff__box > .hafez-jdp .hafez-jdp__note {
	padding-inline: var(--hafez-ff-px);
	font-family: var(--hafez-ff-font);
}

.hafez-ff.hafez-ff:is(.is-invalid, .woocommerce-invalid) .hafez-ff__box > .hafez-jdp input.hafez-jdp__input,
.hafez-ff.hafez-ff .hafez-ff__box > .hafez-jdp[data-hafez-jdp-invalid] input.hafez-jdp__input {
	border-color: var(--hafez-ff-danger) !important;
}

.hafez-ff.hafez-ff.is-valid .hafez-ff__box > .hafez-jdp:not(.is-open) input.hafez-jdp__input:not(:focus) {
	border-color: color-mix(in srgb, var(--hafez-ff-success) 55%, var(--hafez-ff-border)) !important;
}

.hafez-ff.hafez-ff .hafez-ff__box > :is(input, select, textarea):hover {
	border-color: color-mix(in srgb, var(--hafez-ff-text) 28%, var(--hafez-ff-border)) !important;
}

.hafez-ff.hafez-ff .hafez-ff__box > :is(input, select, textarea):focus {
	border-color: var(--hafez-ff-accent) !important;
	box-shadow: var(--hafez-ff-ring) !important;
}

/* Placeholders (date hint, blank " ") only show while the field is focused. */
.hafez-ff.hafez-ff .hafez-ff__box > :is(input, textarea)::placeholder {
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	opacity: 1;
	transition: color var(--hafez-ff-speed) var(--hafez-ff-ease);
}

.hafez-ff.hafez-ff .hafez-ff__box > :is(input, textarea):focus::placeholder {
	color: var(--hafez-ff-muted) !important;
	-webkit-text-fill-color: var(--hafez-ff-muted) !important;
}

/* Browser autofill: keep the field colours; the animation lets field-float.js notice it. */
@keyframes hafez-ff-autofill {
	from { opacity: 1; }
	to { opacity: 1; }
}

.hafez-ff.hafez-ff .hafez-ff__box > input:-webkit-autofill {
	animation-name: hafez-ff-autofill;
	animation-duration: 1ms;
	-webkit-text-fill-color: var(--hafez-ff-text) !important;
	caret-color: var(--hafez-ff-text);
	box-shadow: 0 0 0 1000px var(--hafez-ff-bg) inset !important;
	transition: background-color 99999s ease-out 0s;
}

.hafez-ff.hafez-ff .hafez-ff__box > input:-webkit-autofill:focus {
	box-shadow: 0 0 0 1000px var(--hafez-ff-bg) inset, var(--hafez-ff-ring) !important;
}

/* Selects: own chevron on the inline-end side (left in RTL). */
.hafez-ff.hafez-ff .hafez-ff__box > select {
	-webkit-appearance: none !important;
	appearance: none !important;
	padding-inline-end: calc(var(--hafez-ff-px) + 22px) !important;
	background-image: none !important;
	cursor: pointer;
}

.hafez-ff.hafez-ff--select .hafez-ff__box::after {
	content: "";
	position: absolute;
	inset-inline-end: calc(var(--hafez-ff-px) + 2px);
	top: calc(var(--hafez-ff-h) / 2 - 6px);
	width: 7px;
	height: 7px;
	border: solid var(--hafez-ff-muted);
	border-width: 0 0 1.6px 1.6px;
	transform: rotate(-45deg);
	pointer-events: none;
	transition: border-color var(--hafez-ff-speed) var(--hafez-ff-ease), transform var(--hafez-ff-speed) var(--hafez-ff-ease);
}

.hafez-ff.hafez-ff--select .hafez-ff__box:focus-within::after {
	border-color: var(--hafez-ff-accent);
}

/* Empty choice («انتخاب کنید») reads as a hint. */
.hafez-ff.hafez-ff .hafez-ff__box > select.is-empty {
	color: var(--hafez-ff-muted) !important;
	-webkit-text-fill-color: var(--hafez-ff-muted) !important;
}

.hafez-ff.hafez-ff .hafez-ff__box > select option {
	color: var(--hafez-ff-text) !important;
	-webkit-text-fill-color: var(--hafez-ff-text) !important;
	background-color: var(--hafez-ff-bg) !important;
}

/* Select2 (province) matches the native select. */
.hafez-ff.hafez-ff .hafez-ff__box .select2-container {
	display: block;
	width: 100% !important;
}

.hafez-ff.hafez-ff .hafez-ff__box .select2-container .select2-selection--single {
	box-sizing: border-box;
	display: flex !important;
	align-items: center;
	height: var(--hafez-ff-h) !important;
	min-height: var(--hafez-ff-h) !important;
	padding: 0 var(--hafez-ff-px) !important;
	padding-inline-end: calc(var(--hafez-ff-px) + 22px) !important;
	background: var(--hafez-ff-bg) !important;
	border: 1px solid var(--hafez-ff-border) !important;
	border-radius: var(--hafez-ff-radius) !important;
	outline: none !important;
	transition: border-color var(--hafez-ff-speed) var(--hafez-ff-ease), box-shadow var(--hafez-ff-speed) var(--hafez-ff-ease);
}

.hafez-ff.hafez-ff .hafez-ff__box .select2-container .select2-selection__rendered {
	padding: 0 !important;
	color: var(--hafez-ff-text) !important;
	font-family: var(--hafez-ff-font) !important;
	font-size: var(--hafez-ff-size) !important;
	line-height: calc(var(--hafez-ff-h) - 2px) !important;
}

.hafez-ff.hafez-ff .hafez-ff__box .select2-container .select2-selection__placeholder {
	color: var(--hafez-ff-muted) !important;
}

.hafez-ff.hafez-ff .hafez-ff__box .select2-container .select2-selection__arrow {
	display: none !important;
}

.hafez-ff.hafez-ff .hafez-ff__box .select2-container:is(.select2-container--focus, .select2-container--open) .select2-selection--single {
	border-color: var(--hafez-ff-accent) !important;
	box-shadow: var(--hafez-ff-ring) !important;
}

.hafez-ff.hafez-ff--select .hafez-ff__box:has(.select2-container--open)::after {
	transform: translateY(3px) rotate(135deg);
}

/* ---------------------------------------------------------------------------
 * Title (label / legend).
 * ------------------------------------------------------------------------ */

.hafez-ff.hafez-ff .hafez-ff__box > .hafez-ff__label {
	position: absolute !important;
	inset-inline-start: calc(var(--hafez-ff-px) - 5px) !important;
	inset-inline-end: auto !important;
	top: calc(var(--hafez-ff-h) / 2) !important;
	z-index: 2;
	display: block !important;
	box-sizing: border-box;
	width: auto !important;
	max-width: calc(100% - (var(--hafez-ff-px) * 2)) !important;
	margin: 0 !important;
	padding: 0 5px !important;
	overflow: hidden;
	overflow: clip;
	overflow-clip-margin: 6px;
	color: var(--hafez-ff-muted) !important;
	font-family: var(--hafez-ff-font) !important;
	font-size: var(--hafez-ff-label-size) !important;
	font-weight: 500 !important;
	/* Tall enough for Persian dots: overflow (for the ellipsis) must not clip them. */
	line-height: 1.7 !important;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: start;
	letter-spacing: normal;
	text-transform: none;
	background: transparent;
	border: 0 !important;
	border-radius: 4px;
	float: none !important;
	transform: translateY(-50%) !important;
	pointer-events: none;
	cursor: text;
	transition:
		top var(--hafez-ff-speed) var(--hafez-ff-ease),
		font-size var(--hafez-ff-speed) var(--hafez-ff-ease),
		color var(--hafez-ff-speed) var(--hafez-ff-ease),
		background-color var(--hafez-ff-speed) var(--hafez-ff-ease);
}

.hafez-ff.hafez-ff--textarea .hafez-ff__box > .hafez-ff__label {
	top: 26px !important;
}

/*
 * Floated title. Kept in separate rules: a selector the browser does not
 * know (:has, :-webkit-autofill) must not cancel the others.
 * The background covers the border line only under the title's lower half.
 */
.hafez-ff.hafez-ff--select .hafez-ff__box > .hafez-ff__label,
.hafez-ff.hafez-ff .hafez-ff__box:focus-within > .hafez-ff__label,
.hafez-ff.hafez-ff .hafez-ff__box.is-filled > .hafez-ff__label {
	top: 0 !important;
	color: var(--hafez-ff-label) !important;
	font-size: var(--hafez-ff-float-size) !important;
	font-weight: 600 !important;
	background: linear-gradient(to bottom, transparent calc(50% - 1px), var(--hafez-ff-bg) calc(50% - 1px)) !important;
}

.hafez-ff.hafez-ff .hafez-ff__box:has(> :is(input, textarea):not(:placeholder-shown)) > .hafez-ff__label {
	top: 0 !important;
	color: var(--hafez-ff-label) !important;
	font-size: var(--hafez-ff-float-size) !important;
	font-weight: 600 !important;
	background: linear-gradient(to bottom, transparent calc(50% - 1px), var(--hafez-ff-bg) calc(50% - 1px)) !important;
}

/* Resting title keeps clear of the calendar button. */
.hafez-ff.hafez-ff .hafez-ff__box:has(> .hafez-jdp) > .hafez-ff__label {
	max-width: calc(100% - (var(--hafez-ff-px) * 2) - 30px) !important;
}

/* Floated while the calendar is open (on a phone the grid holds the focus) or the field has a date. */
.hafez-ff.hafez-ff .hafez-ff__box:has(> .hafez-jdp.is-open) > .hafez-ff__label,
.hafez-ff.hafez-ff .hafez-ff__box:has(> .hafez-jdp input.hafez-jdp__input:not(:placeholder-shown)) > .hafez-ff__label {
	top: 0 !important;
	color: var(--hafez-ff-label) !important;
	font-size: var(--hafez-ff-float-size) !important;
	font-weight: 600 !important;
	background: linear-gradient(to bottom, transparent calc(50% - 1px), var(--hafez-ff-bg) calc(50% - 1px)) !important;
}

.hafez-ff.hafez-ff .hafez-ff__box:has(> input:-webkit-autofill) > .hafez-ff__label {
	top: 0 !important;
	color: var(--hafez-ff-label) !important;
	font-size: var(--hafez-ff-float-size) !important;
	font-weight: 600 !important;
	background: linear-gradient(to bottom, transparent calc(50% - 1px), var(--hafez-ff-bg) calc(50% - 1px)) !important;
}

.hafez-ff.hafez-ff .hafez-ff__box:focus-within > .hafez-ff__label {
	color: var(--hafez-ff-accent) !important;
}

.hafez-ff.hafez-ff .hafez-ff__label .required {
	color: var(--hafez-ff-danger) !important;
	font-weight: 600;
	text-decoration: none;
	border: 0;
}

/* KYC «نیازمند استعلام» badge stays readable inside the small title. */
.hafez-ff.hafez-ff .hafez-ff__label .hafez-user-fields__label-badge {
	margin-inline-start: 4px;
	font-size: 10.5px !important;
	line-height: 1.4;
	vertical-align: 1px;
}

/* ---------------------------------------------------------------------------
 * Radio choices (outlined group).
 * ------------------------------------------------------------------------ */

.hafez-ff.hafez-ff.hafez-ff--group {
	display: block !important;
}

.hafez-ff.hafez-ff.hafez-ff--group > .hafez-ff__label {
	position: absolute !important;
	inset-inline-start: calc(var(--hafez-ff-px) - 5px) !important;
	inset-inline-end: auto !important;
	top: 11px !important;
	z-index: 2;
	display: block !important;
	width: auto !important;
	max-width: calc(100% - (var(--hafez-ff-px) * 2)) !important;
	margin: 0 !important;
	padding: 0 5px !important;
	overflow: hidden;
	overflow: clip;
	overflow-clip-margin: 6px;
	color: var(--hafez-ff-label) !important;
	font-family: var(--hafez-ff-font) !important;
	font-size: var(--hafez-ff-float-size) !important;
	font-weight: 600 !important;
	/* Tall enough for Persian dots: overflow (for the ellipsis) must not clip them. */
	line-height: 1.7 !important;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: linear-gradient(to bottom, transparent calc(50% - 1px), var(--hafez-ff-bg) calc(50% - 1px)) !important;
	border: 0 !important;
	float: none !important;
	transform: translateY(-50%);
	transition: color var(--hafez-ff-speed) var(--hafez-ff-ease);
}

.hafez-ff.hafez-ff.hafez-ff--group:focus-within > .hafez-ff__label {
	color: var(--hafez-ff-accent) !important;
}

.hafez-ff.hafez-ff.hafez-ff--group .hafez-user-fields__radios {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 !important;
	padding: 16px 10px 10px !important;
	background: var(--hafez-ff-bg);
	border: 1px solid var(--hafez-ff-border);
	border-radius: var(--hafez-ff-radius);
	outline: none !important;
	transition: border-color var(--hafez-ff-speed) var(--hafez-ff-ease), box-shadow var(--hafez-ff-speed) var(--hafez-ff-ease);
}

.hafez-ff.hafez-ff.hafez-ff--group:focus-within .hafez-user-fields__radios {
	border-color: var(--hafez-ff-accent);
	box-shadow: var(--hafez-ff-ring);
}

.hafez-ff.hafez-ff.hafez-ff--group .hafez-user-fields__radio {
	display: inline-flex !important;
	align-items: center !important;
	gap: 9px;
	box-sizing: border-box;
	height: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	color: var(--hafez-ff-text) !important;
	font-family: var(--hafez-ff-font) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	white-space: nowrap;
	cursor: pointer;
	background: transparent !important;
	border: 1px solid var(--hafez-ff-border) !important;
	border-radius: calc(var(--hafez-ff-radius) - 2px) !important;
	transition:
		border-color var(--hafez-ff-speed) var(--hafez-ff-ease),
		background-color var(--hafez-ff-speed) var(--hafez-ff-ease),
		color var(--hafez-ff-speed) var(--hafez-ff-ease);
}

.hafez-ff.hafez-ff.hafez-ff--group .hafez-user-fields__radio:hover {
	border-color: color-mix(in srgb, var(--hafez-ff-accent) 45%, var(--hafez-ff-border)) !important;
}

.hafez-ff.hafez-ff.hafez-ff--group .hafez-user-fields__radio:has(input:checked) {
	color: var(--hafez-ff-text) !important;
	background: color-mix(in srgb, var(--hafez-ff-accent) 10%, var(--hafez-ff-bg)) !important;
	border-color: var(--hafez-ff-accent) !important;
}

.hafez-ff.hafez-ff.hafez-ff--group .hafez-user-fields__radio input[type="radio"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: relative !important;
	flex: 0 0 18px !important;
	display: inline-block !important;
	box-sizing: border-box !important;
	width: 18px !important;
	min-width: 18px !important;
	max-width: 18px !important;
	height: 18px !important;
	min-height: 18px !important;
	max-height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--hafez-ff-bg) !important;
	border: 1.5px solid color-mix(in srgb, var(--hafez-ff-text) 30%, var(--hafez-ff-border)) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	transition: border-color var(--hafez-ff-speed) var(--hafez-ff-ease), box-shadow var(--hafez-ff-speed) var(--hafez-ff-ease);
}

.hafez-ff.hafez-ff.hafez-ff--group .hafez-user-fields__radio input[type="radio"]:checked {
	border-color: var(--hafez-ff-accent) !important;
	box-shadow: inset 0 0 0 4px var(--hafez-ff-bg), inset 0 0 0 9px var(--hafez-ff-accent) !important;
}

.hafez-ff.hafez-ff.hafez-ff--group .hafez-user-fields__radio input[type="radio"]:focus-visible {
	box-shadow: var(--hafez-ff-ring) !important;
}

.hafez-ff.hafez-ff.hafez-ff--group .hafez-user-fields__radio input[type="radio"]:checked:focus-visible {
	box-shadow: inset 0 0 0 4px var(--hafez-ff-bg), inset 0 0 0 9px var(--hafez-ff-accent), var(--hafez-ff-ring) !important;
}

/* ---------------------------------------------------------------------------
 * Validation states (user-field-validation.js / WooCommerce checkout).
 * ------------------------------------------------------------------------ */

.hafez-ff.hafez-ff:is(.is-invalid, .woocommerce-invalid) .hafez-ff__box > :is(input, select, textarea),
.hafez_buy__field.is-invalid > .hafez-ff.hafez-ff .hafez-ff__box > :is(input, select, textarea),
.hafez-ff.hafez-ff .hafez-ff__box > [aria-invalid="true"],
.hafez-ff.hafez-ff:is(.is-invalid, .woocommerce-invalid) .hafez-ff__box .select2-selection--single,
.hafez-ff.hafez-ff.hafez-ff--group.is-invalid .hafez-user-fields__radios {
	border-color: var(--hafez-ff-danger) !important;
}

.hafez-ff.hafez-ff:is(.is-invalid, .woocommerce-invalid) .hafez-ff__box > :is(input, select, textarea):focus,
.hafez-ff.hafez-ff.hafez-ff--group.is-invalid:focus-within .hafez-user-fields__radios {
	border-color: var(--hafez-ff-danger) !important;
	box-shadow: none !important;
}

/* Three .hafez-ff to outrank the floated-title rules (incl. the :has() one). */
.hafez-ff.hafez-ff.hafez-ff:is(.is-invalid, .woocommerce-invalid) .hafez-ff__box > .hafez-ff__label,
.hafez-ff.hafez-ff.hafez-ff--group.is-invalid > .hafez-ff__label {
	color: var(--hafez-ff-danger) !important;
}

.hafez-ff.hafez-ff.is-valid .hafez-ff__box > :is(input, select, textarea):not(:focus),
.hafez-ff.hafez-ff.is-valid .hafez-ff__box .select2-container:not(.select2-container--focus) .select2-selection--single,
.hafez-ff.hafez-ff.hafez-ff--group.is-valid:not(:focus-within) .hafez-user-fields__radios {
	border-color: color-mix(in srgb, var(--hafez-ff-success) 55%, var(--hafez-ff-border)) !important;
	box-shadow: none !important;
}

/* Small shake when a field turns invalid (field-float.js adds .is-shaking). */
@keyframes hafez-ff-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

.hafez-ff .hafez-ff__box.is-shaking,
.hafez-ff.hafez-ff--group.is-shaking .hafez-user-fields__radios {
	animation: hafez-ff-shake 0.28s var(--hafez-ff-ease) 1;
}

/* ---------------------------------------------------------------------------
 * Help text and messages under the field.
 * ------------------------------------------------------------------------ */

.hafez-ff .hafez-ff__help {
	display: block;
	margin: 6px 0 0;
	padding-inline: 2px;
	color: var(--hafez-ff-muted);
	font-family: var(--hafez-ff-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
}

@keyframes hafez-ff-msg-in {
	from { opacity: 0; transform: translateY(-3px); }
	to { opacity: 1; transform: translateY(0); }
}

.hafez-ff.hafez-ff .hafez-user-fields__msg {
	display: flex !important;
	align-items: flex-start;
	gap: 6px;
	margin: 7px 0 0 !important;
	padding-inline: 2px !important;
	color: var(--hafez-ff-danger-text) !important;
	font-family: var(--hafez-ff-font);
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	animation: hafez-ff-msg-in 0.2s var(--hafez-ff-ease) 1;
}

.hafez-ff.hafez-ff .hafez-user-fields__msg::before {
	content: "!";
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	background: var(--hafez-ff-danger);
	border-radius: 50%;
}

.hafez-ff.hafez-ff .hafez-user-fields__msg[hidden],
.hafez-ff.hafez-ff .hafez-user-fields__msg:empty {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Widgets that keep a static title (files, captcha): same title type.
 * ------------------------------------------------------------------------ */

.hafez-user-fields__row[data-hafez-field-type="files"] .hafez-fu__label,
.hafez-user-fields__row--captcha .hafez-captcha label,
.hafez-user-fields__row--captcha > label {
	display: block;
	margin: 0 0 8px !important;
	color: var(--hafez-uf-label-color, var(--hafez-dp-label, var(--hafez-color-text, #2c2624))) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

.hafez-user-fields__row[data-hafez-field-type="files"] .hafez-fu {
	--hafez-fu-accent: var(--hafez-uf-focus-border, var(--hafez-dp-primary-bg, var(--hafez-color-primary, #f15a24)));
	--hafez-fu-radius: var(--hafez-uf-input-radius, var(--hafez-dp-radius-field, 12px));
}

.hafez-user-fields__row[data-hafez-field-type="files"] .hafez-fu__zone:focus-within {
	border-color: var(--hafez-fu-accent);
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Checkboxes inside engine forms: custom boxes in the same palette.
 * ------------------------------------------------------------------------ */

.hafez-user-fields-form input[type="checkbox"]:not([role="switch"]) {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	box-sizing: border-box;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	vertical-align: -4px;
	background: var(--hafez-uf-input-bg, var(--hafez-color-surface, #fff));
	border: 1.5px solid color-mix(in srgb, var(--hafez-color-text, #2c2624) 30%, var(--hafez-uf-input-border, var(--hafez-color-border, #e6dfda)));
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hafez-user-fields-form input[type="checkbox"]:not([role="switch"]):checked {
	background: var(--hafez-uf-focus-border, var(--hafez-dp-primary-bg, var(--hafez-color-primary, #f15a24)));
	border-color: var(--hafez-uf-focus-border, var(--hafez-dp-primary-bg, var(--hafez-color-primary, #f15a24)));
}

.hafez-user-fields-form input[type="checkbox"]:not([role="switch"]):checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 4px;
	height: 8px;
	border: solid var(--hafez-dp-primary-text, var(--hafez-color-on-primary, #fff));
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.hafez-user-fields-form input[type="checkbox"]:focus-visible {
	outline: none;
	border-color: var(--hafez-uf-focus-border, var(--hafez-color-primary, #f15a24));
	box-shadow: none;
}

/* Yes/no consent as a switch: <input type="checkbox" role="switch">. */
.hafez-user-fields-form input[type="checkbox"][role="switch"] {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	box-sizing: border-box;
	flex: 0 0 38px;
	width: 38px;
	height: 22px;
	margin: 0;
	vertical-align: middle;
	background: color-mix(in srgb, var(--hafez-color-text, #2c2624) 22%, var(--hafez-uf-input-bg, #fff));
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.hafez-user-fields-form input[type="checkbox"][role="switch"]::after {
	content: "";
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: inset-inline-start 0.18s ease;
}

.hafez-user-fields-form input[type="checkbox"][role="switch"]:checked {
	background: var(--hafez-uf-focus-border, var(--hafez-dp-primary-bg, var(--hafez-color-primary, #f15a24)));
}

.hafez-user-fields-form input[type="checkbox"][role="switch"]:checked::after {
	inset-inline-start: 19px;
}

/* ---------------------------------------------------------------------------
 * Reduced motion and dark mode.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.hafez-ff {
		--hafez-ff-speed: 0s;
	}

	.hafez-ff .hafez-ff__box.is-shaking,
	.hafez-ff.hafez-ff--group.is-shaking .hafez-user-fields__radios,
	.hafez-ff.hafez-ff .hafez-user-fields__msg {
		animation: none;
	}
}

:is(html[data-dark-mode="true"], body[data-dark-mode="true"], body.hafez-dark) .hafez-ff {
	--hafez-ff-bg: var(--hafez-uf-input-bg, var(--hafez-color-surface, #1f1b19));
	--hafez-ff-text: var(--hafez-uf-input-text, var(--hafez-dp-field-text, var(--hafez-color-text, #ece7e4)));
	--hafez-ff-muted: var(--hafez-uf-placeholder, var(--hafez-dp-help, var(--hafez-color-text-muted, #a8a09b)));
	--hafez-ff-label: var(--hafez-uf-label-color, var(--hafez-dp-label, var(--hafez-color-text, #ece7e4)));
	--hafez-ff-border: var(--hafez-uf-input-border, var(--hafez-dp-box-border-color, var(--hafez-color-border, #3a3431)));
	--hafez-ff-danger: #f87171;
	--hafez-ff-danger-text: #fca5a5;
	--hafez-ff-success: #4ade80;
	color-scheme: dark;
}