/**
 * Empex Form Builder - Core Styles
 */

:root {
	--empex-primary-color: #0073aa;
	--empex-border-color: #ccd0d4;
	--empex-border-radius: 4px;
	--empex-label-color: #333333;
	--empex-input-bg: #ffffff;
	--empex-error-color: #d63638;
	--empex-success-color: #00a32a;
}

/* -----------------------------------------------------------------------
   Fields Grid — Flex container for all field wrappers
   IMPORTANT: Must be display:flex, NOT display:grid
   Column classes use flex shorthand which requires a flex parent
------------------------------------------------------------------------ */
.empex-fields-row {
    display: flex;
    flex-wrap: wrap;
    /* Default gaps — overridden by Elementor-injected CSS custom properties
       when the user sets Column Gap and Row Gap in the style panel */
    column-gap: var( --empex-column-gap, 16px );
    row-gap:    var( --empex-row-gap, 16px );
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* -----------------------------------------------------------------------
   Field Wrapper — applied to every .empex-field-wrapper element
   box-sizing: border-box is critical — ensures padding and border are
   included INSIDE the flex-basis width, not added on top of it.
   Without this, two 50% fields + any border or padding exceeds 100%.
------------------------------------------------------------------------ */
.empex-field-wrapper {
    box-sizing: border-box;
    min-width: 0;              /* prevents flex children from overflowing */
}

/* -----------------------------------------------------------------------
   Column width classes
   Formula: calc( {percentage}% - ( {gap} * ( 1 - {percentage}/100 ) ) )
   Simplified with 16px gap default:
   20%  subtracts 12.8px  → rounded to 13px
   25%  subtracts 12px
   30%  subtracts 11.2px  → rounded to 11px
   33%  subtracts 10.7px  → rounded to 11px
   40%  subtracts  9.6px  → rounded to 10px
   50%  subtracts  8px
   55%  subtracts  7.2px  → rounded to  7px
   60%  subtracts  6.4px  → rounded to  6px
   66%  subtracts  5.4px  → rounded to  5px
   70%  subtracts  4.8px  → rounded to  5px
   80%  subtracts  3.2px  → rounded to  3px
   90%  subtracts  1.6px  → rounded to  2px
   100% subtracts  0px

   NOTE: These use the CSS custom property --empex-column-gap so that
   when the user changes the column gap via the style panel, the column
   widths automatically recalculate. This requires CSS calc() with var().
------------------------------------------------------------------------ */
.empex-fields-row > .empex-col-20 {
    flex: 0 0 calc( 20% - ( var( --empex-column-gap, 16px ) * 0.8 ) - 0.1px );
    max-width: calc( 20% - ( var( --empex-column-gap, 16px ) * 0.8 ) - 0.1px );
}
.empex-fields-row > .empex-col-25 {
    flex: 0 0 calc( 25% - ( var( --empex-column-gap, 16px ) * 0.75 ) - 0.1px );
    max-width: calc( 25% - ( var( --empex-column-gap, 16px ) * 0.75 ) - 0.1px );
}
.empex-fields-row > .empex-col-30 {
    flex: 0 0 calc( 30% - ( var( --empex-column-gap, 16px ) * 0.7 ) - 0.1px );
    max-width: calc( 30% - ( var( --empex-column-gap, 16px ) * 0.7 ) - 0.1px );
}
.empex-fields-row > .empex-col-33 {
    flex: 0 0 calc( 33.333% - ( var( --empex-column-gap, 16px ) * 0.667 ) - 0.1px );
    max-width: calc( 33.333% - ( var( --empex-column-gap, 16px ) * 0.667 ) - 0.1px );
}
.empex-fields-row > .empex-col-40 {
    flex: 0 0 calc( 40% - ( var( --empex-column-gap, 16px ) * 0.6 ) - 0.1px );
    max-width: calc( 40% - ( var( --empex-column-gap, 16px ) * 0.6 ) - 0.1px );
}
.empex-fields-row > .empex-col-50 {
    flex: 0 0 calc( 50% - ( var( --empex-column-gap, 16px ) * 0.5 ) - 0.1px );
    max-width: calc( 50% - ( var( --empex-column-gap, 16px ) * 0.5 ) - 0.1px );
}
.empex-fields-row > .empex-col-55 {
    flex: 0 0 calc( 55% - ( var( --empex-column-gap, 16px ) * 0.45 ) - 0.1px );
    max-width: calc( 55% - ( var( --empex-column-gap, 16px ) * 0.45 ) - 0.1px );
}
.empex-fields-row > .empex-col-60 {
    flex: 0 0 calc( 60% - ( var( --empex-column-gap, 16px ) * 0.4 ) - 0.1px );
    max-width: calc( 60% - ( var( --empex-column-gap, 16px ) * 0.4 ) - 0.1px );
}
.empex-fields-row > .empex-col-66 {
    flex: 0 0 calc( 66.666% - ( var( --empex-column-gap, 16px ) * 0.333 ) - 0.1px );
    max-width: calc( 66.666% - ( var( --empex-column-gap, 16px ) * 0.333 ) - 0.1px );
}
.empex-fields-row > .empex-col-70 {
    flex: 0 0 calc( 70% - ( var( --empex-column-gap, 16px ) * 0.3 ) - 0.1px );
    max-width: calc( 70% - ( var( --empex-column-gap, 16px ) * 0.3 ) - 0.1px );
}
.empex-fields-row > .empex-col-80 {
    flex: 0 0 calc( 80% - ( var( --empex-column-gap, 16px ) * 0.2 ) - 0.1px );
    max-width: calc( 80% - ( var( --empex-column-gap, 16px ) * 0.2 ) - 0.1px );
}
.empex-fields-row > .empex-col-90 {
    flex: 0 0 calc( 90% - ( var( --empex-column-gap, 16px ) * 0.1 ) - 0.1px );
    max-width: calc( 90% - ( var( --empex-column-gap, 16px ) * 0.1 ) - 0.1px );
}
.empex-fields-row > .empex-col-100 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* -----------------------------------------------------------------------
   Label — default bottom spacing between label and its input
   Overridden by --empex-label-spacing custom property via inline style
   when user sets Label Spacing in the style panel
------------------------------------------------------------------------ */
.empex-label {
    display: block;
    margin-bottom: 6px;        /* default label-to-input spacing */
    color: var(--empex-label-color);
	font-weight: 600;
	font-size: 14px;
}

.empex-required-star {
	color: var(--empex-error-color);
	margin-left: 3px;
}

.empex-input {
	width: 100%;
	padding: 10px 12px;
	background-color: var(--empex-input-bg);
	border: 1px solid var(--empex-border-color);
	border-radius: var(--empex-border-radius);
	font-size: 15px;
	color: #333;
	box-sizing: border-box;
	/* box-shadow is deliberately NOT transitioned: the only box-shadow this
	   stylesheet ever sets is the instant autofill-masking one below, which
	   must apply immediately, not ease in -- easing it is what read as a
	   shadow "growing"/"popping" into the field on focus/autofill. */
	transition: border-color 0.2s ease;
}

/* Defensive override for every field type that carries .empex-input
   (input, textarea, select), guarding against a host theme's own bare
   element-selector reset (e.g. a combined `input, textarea, select {
   border: ...; }` block, which nearly every theme ships and which can
   out-order a same-specificity class selector depending on the theme's
   own stylesheet).

   IMPORTANT: this is intentionally kept at single-class specificity
   (matching the base .empex-input rule above) and WITHOUT !important.
   That's still enough to beat a bare `input, textarea, select` type
   selector (lower specificity than any class), but it must never
   out-rank the Elementor "Input Fields" Style tab controls, which
   generate `{{WRAPPER}} .empex-input { background-color / color /
   border-color: ...; }` (two-class specificity, no !important). An
   earlier version of this rule used a compound selector + !important,
   which had higher precedence than those controls and silently
   overrode the Background Color / Border Color / Text Color settings
   regardless of what was set in the Style tab. Do not re-add
   !important or raise this selector's specificity above two classes
   for these three properties, or the Style tab controls will break
   again.

   UPDATE: a single class (0,1,0) was enough to beat a theme's *bare*
   `input, textarea, select {...}` reset, but not a theme reset written
   with attribute selectors, e.g. `input[type="text"], input[type=
   "email"] {...}` -- each `[type="..."]` counts the same as a class in
   specificity, so that kind of rule reaches (0,1,1), which still beats
   a plain `.empex-input` (0,1,0). That's why Name/Email (plain <input>
   fields, commonly targeted this way by theme CSS) could regress to
   the theme's border color while <textarea> (rarely targeted with a
   `type` attribute selector, since it has no `type` attribute) kept
   the correct #ccd0d4 default. Scoping to `.empex-field-wrapper
   .empex-input` raises this to two classes (0,2,0), which beats any
   single-class/attribute-qualified type selector while still staying
   exactly tied with -- never higher than -- Elementor's own generated
   `{{WRAPPER}} .empex-input` (0,2,0), so the Style tab controls still
   take over whenever the user actually sets a value there. */
.empex-field-wrapper .empex-input {
	background-color: var(--empex-input-bg);
	color: #333;
	border-color: var(--empex-border-color);
}

/* Focus States — border-color swap to --empex-primary-color is the sole
   focus indicator (still meets WCAG 2.4.7 on its own, since it's a visible,
   full-perimeter color change). No box-shadow "glow" is layered on top:
   that glow read as an unwanted bluish outline distinct from --empex-input-bg
   and wasn't something the Styles tab could ever touch or remove. */
.empex-input:focus {
	outline: 2px solid transparent;
	border-color: var(--empex-primary-color);
	box-shadow: none;
}

/* -----------------------------------------------------------------------
   Autofill override — Chrome/Edge/Safari paint their OWN background
   (#e8f0fe in Chromium) and text color on <input type="email"> and
   <input type="password"> the moment the browser's save-info/password-
   manager autofills or suggests a value for them. This is user-agent
   chrome, not anything in this plugin's markup or CSS -- background-color
   (even with !important, see the .empex-field-wrapper rule above) cannot
   touch it, because Chromium repaints -webkit-autofill fields via its own
   internal layer that sits outside the normal CSS cascade for
   background-color specifically. The only override surface browsers expose
   for this is -webkit-box-shadow: an opaque inset shadow large enough to
   fully cover the field can visually replace the browser's autofill fill
   with our own --empex-input-bg, and a very long background-color
   transition delay stops Chromium's autofill-yellow/blue flash from being
   visible at all during the swap. -webkit-text-fill-color re-asserts our
   normal text color, since autofill also overrides that independently of
   the `color` property. This only ever fires while the browser considers
   the field "autofilled" -- it has no effect on manually-typed input,
   which was never affected to begin with. */
.empex-input:-webkit-autofill,
.empex-input:-webkit-autofill:hover,
.empex-input:-webkit-autofill:focus,
.empex-input:-webkit-autofill:active {
	-webkit-text-fill-color: #333;
	-webkit-box-shadow: 0 0 0 1000px var(--empex-input-bg) inset;
	box-shadow: 0 0 0 1000px var(--empex-input-bg) inset;
	transition: background-color 600000s 0s, color 600000s 0s;
	caret-color: #333;
}

/* -----------------------------------------------------------------------
   Select & Time fields — background_color/border/color alone (set by
   .empex-input above) are NOT enough to make these match plain text
   inputs. Both render a native, OS-drawn control chrome on top of those
   properties by default (a <select>'s dropdown-arrow/button area, a
   time input's clock-icon/spinner area) that CSS color properties don't
   reach -- which is exactly what was reading as "dark" or "gray" next to
   the plain white text fields, even though every field shares the same
   .empex-input rule above. `appearance: none` strips that native chrome
   so these fields are drawn entirely from our own CSS instead, same as
   every other field. Removing the native dropdown arrow this way means
   a custom one has to be drawn back in by hand (below) so the select
   doesn't lose its visual "this is a dropdown" cue.
------------------------------------------------------------------------- */
.empex-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Custom dropdown arrow, drawn to match --empex-label-color so it reads
	   consistently regardless of theme color overrides. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23333333' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px 7px;
	padding-right: 36px; /* room for the custom arrow so option text never overlaps it */
}

input[type="time"].empex-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* File Fields — background now matches --empex-input-bg exactly, the same
   variable every other field's resting background uses (previously a
   slightly different off-white, #fafafa, which is what was still reading
   as a color mismatch next to the rest of the form). The dashed border
   remains the visual cue that this field is a drop target; the hover
   state below still shifts slightly for drag-and-drop affordance, which
   is an interaction-state change, not a default-appearance one. */
.empex-dropzone-container {
	border: 2px dashed var(--empex-border-color);
	border-radius: var(--empex-border-radius);
	background: var(--empex-input-bg);
	padding: 30px 20px;
	text-align: center;
	color: #666;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.empex-dropzone-container:hover {
	background: #f0f0f1;
	border-color: var(--empex-primary-color);
}

/* Dropzone itself already toggles this class on the container automatically
 * (Dropzone.prototype._updateMaxFilesReachedClass(), called after every
 * addFile()/removeFile()) whenever the accepted-file count reaches the
 * configured max -- no custom JS state-tracking needed here, just styling
 * the class the library already maintains.
 *
 * This is a visual cue only. Both click-to-browse and drag-and-drop remain
 * fully functional at capacity -- attempting either still goes through
 * Dropzone's own accept()/maxfilesexceeded pipeline and is refused with the
 * same "Maximum number of allowed files has been reached." message either
 * way (see the maxfilesexceeded handler in empex-file-upload.js). Nothing
 * here disables the drop zone's event listeners, since removing them would
 * also remove the dragover/drop preventDefault handling and let the
 * browser navigate away on a drop instead of refusing it. */
.empex-dropzone-container.dz-max-files-reached {
	cursor: not-allowed;
	background: #f5f5f5;
	border-color: #ccc;
	opacity: 0.7;
}

.empex-dropzone-container.dz-max-files-reached:hover {
	background: #f5f5f5;
	border-color: #ccc;
}

.empex-dropzone-message {
	width: 100%;
}

/* Preview list: a normal wrapping row of compact chips, the same pattern
 * most upload fields use (thumbnail/icon + name + size + a small remove
 * badge). This replaces Dropzone's default card entirely -- see the
 * previewTemplate override in empex-file-upload.js -- rather than trying to
 * reskin the vendor default (which is designed around a dark circular
 * badge behind its white checkmark/X icons; without that dark background
 * those icons render as the barely-visible white marks reported earlier). */
.empex-dropzone-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
	text-align: left;
}

.empex-dropzone-previews:empty {
	margin-top: 0;
}

.empex-file-chip {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 200px;
	max-width: 100%;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--empex-border-color);
	border-radius: 6px;
	cursor: default;
	box-sizing: border-box;
}

.empex-file-chip.dz-error {
	border-color: var(--empex-error-color);
}

.empex-file-icon {
	flex: none;
	font-size: 18px;
	line-height: 1;
}

.empex-file-icon::before {
	content: "\1F4C4";
}

.empex-file-details {
	min-width: 0;
	flex: 1;
}

.empex-file-name {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.empex-file-size {
	display: block;
	font-size: 11px;
	color: #888;
	margin-top: 2px;
}

.empex-file-progress {
	display: none;
	height: 3px;
	margin-top: 6px;
	background: #eee;
	border-radius: 2px;
	overflow: hidden;
}

.dz-processing .empex-file-progress {
	display: block;
}

.empex-file-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--empex-primary-color);
	transition: width 0.2s linear;
}

.empex-file-error {
	display: none;
	margin-top: 4px;
	font-size: 11px;
	color: var(--empex-error-color);
}

.dz-error .empex-file-error {
	display: block;
}

/* The small "x" badge Dropzone auto-appends (addRemoveLinks: true) */
.empex-file-chip .dz-remove {
	position: absolute;
	top: -7px;
	right: -7px;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	border-radius: 50%;
	background: var(--empex-error-color);
	color: #fff !important;
	font-size: 10px;
	text-decoration: none !important;
	cursor: pointer;
}

/* Validation Output */
.empex-error-message {
	display: none;
	opacity: 0;
	color: var(--empex-error-color);
	font-size: 12px;
	margin-top: 5px;
	transition: opacity 0.3s ease;
}

/* Live running-total warning shown under a file-upload field once the
   combined size of all attached files exceeds the configured limit. Uses
   the same red as every other validation error in the form for consistency,
   rather than introducing a separate warning color. */
.empex-dropzone-size-warning {
	display: none;
	color: var(--empex-error-color);
	background-color: rgba(214, 54, 56, 0.08);
	border: 1px solid var(--empex-error-color);
	border-radius: var(--empex-border-radius);
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 600;
	margin-top: 8px;
}

.empex-input.empex-invalid {
	border-color: var(--empex-error-color);
}

/* -----------------------------------------------------------------------
   Submit Group — wraps the spam-protection widget (Turnstile / reCAPTCHA)
   and the submit button together. flex-direction is set explicitly (not
   left to inherit) so this can never collapse into a single row even if
   an ancestor element elsewhere on the page applies display:flex.
------------------------------------------------------------------------ */
.empex-submit-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	width: 100%;
}

.empex-cf-turnstile,
.empex-recaptcha-v2 {
	margin-bottom: 0; /* spacing now handled by .empex-submit-group's gap */
}

/* Defends against third-party spam-protection plugins that generically
   locate a form's submit button and inject their own widget markup as a
   direct sibling of it (a common technique used by "works with every
   form" CAPTCHA add-ons that have no dedicated Empex integration). That
   injected element lands inside .empex-submit-wrapper -- the row-direction
   flex box whose only job is aligning .empex-submit-button left/center/
   right/justified via justify-content. Without this rule, the injected
   widget and the button are forced to share that single flex row and
   fight over its width, which is the "clashes with the submit button"
   symptom. Any child of the wrapper that ISN'T the submit button itself
   is pushed onto its own full-width row (via flex-basis: 100%) and placed
   above the button (via order), so the two can never occupy the same row
   no matter which side injects markup into the DOM first. */
.empex-submit-wrapper > *:not(.empex-submit-button) {
	flex: 1 0 100%;
	max-width: 100%;
	order: -1;
	margin-bottom: 10px;
}

/* Reserve the Turnstile widget's documented "normal" footprint (matches
   the explicit size:'normal' passed to turnstile.render() in
   empex-form.js) so this container already occupies its final space in
   the flex column before Cloudflare finishes populating it. Without
   this, an empty div contributes ~0px height at initial layout, and the
   widget "arriving" after layout reads as it jumping into the gap next
   to the submit button. */
.empex-cf-turnstile {
	min-height: 65px;
}

/* The iframe Cloudflare injects into .empex-cf-turnstile is not
   something we control the internals of, but its default CSS box
   behavior is: iframe elements default to display:inline, which adds
   baseline-alignment whitespace beneath them independent of the gap
   declared on .empex-submit-group above. Forcing block display removes
   that inconsistent extra spacing regardless of what Cloudflare renders
   inside the iframe or if Cloudflare changes the iframe's own dimensions
   later. */
.empex-cf-turnstile iframe {
	display: block;
}

/* Button & Loading State */
.empex-submit-button {
	background-color: var(--empex-primary-color);
	color: #fff;
	border: none;
	border-radius: var(--empex-border-radius);
	cursor: pointer;
	position: relative;
	transition: background-color 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.empex-submit-button.elementor-size-sm {
	padding: 10px 20px;
	font-size: 14px;
}

.empex-submit-button.elementor-size-md {
	padding: 12px 24px;
	font-size: 16px;
}

.empex-submit-button.elementor-size-lg {
	padding: 15px 30px;
	font-size: 18px;
}

.empex-submit-button:hover {
	opacity: 0.9;
}

.empex-submit-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.empex-submit-button.empex-loading::after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border: 2px solid #fff;
	border-top-color: transparent;
	border-radius: 50%;
	animation: empex-spin 0.8s linear infinite;
}

@keyframes empex-spin {
	to { transform: translateY(-50%) rotate(360deg); }
}

/* Mobile Responsiveness */
@media screen and ( max-width: 767px ) {
    .empex-fields-row > .empex-col-20,
    .empex-fields-row > .empex-col-25,
    .empex-fields-row > .empex-col-30,
    .empex-fields-row > .empex-col-33,
    .empex-fields-row > .empex-col-40,
    .empex-fields-row > .empex-col-50,
    .empex-fields-row > .empex-col-55,
    .empex-fields-row > .empex-col-60,
    .empex-fields-row > .empex-col-66,
    .empex-fields-row > .empex-col-70,
    .empex-fields-row > .empex-col-80,
    .empex-fields-row > .empex-col-90,
    .empex-fields-row > .empex-col-100 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Print Styles */
@media print {
	.empex-submit-button {
		display: none !important;
	}
	.empex-fields-row {
		display: block;
	}
	.empex-field-wrapper {
		margin-bottom: 15px;
		page-break-inside: avoid;
	}
	.empex-input {
		border: 1px solid #000;
	}
}

/* -----------------------------------------------------------------------
   Radio & Checkbox — Fieldset reset
   Remove default fieldset browser styling
------------------------------------------------------------------------ */
.empex-options-fieldset {
    border: none !important;
    border-width: 0 !important;
    margin: 0 !important;      /* some themes add fieldset margin */
    padding: 0 !important;     /* some themes add fieldset padding */
    min-width: 0;
}

/* -----------------------------------------------------------------------
   Fieldset border — shown only when user enables it via widget control
   Applied via inline style on the fieldset element (see PHP render method)
   This class acts as the enabler — inline styles set the actual values
------------------------------------------------------------------------ */
.empex-options-fieldset--has-border {
    border: var( --empex-fieldset-border-width, 1px )
            solid
            var( --empex-fieldset-border-color, #dcdcde ) !important;
    border-radius: var( --empex-fieldset-border-radius, 4px );
    padding: 12px 16px !important;  /* add inner padding when border is visible */
}

/* -----------------------------------------------------------------------
   Radio & Checkbox — Options list container
   Controls stacked vs inline layout
------------------------------------------------------------------------ */
.empex-options-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

/* Stacked (vertical) layout — default */
.empex-options-list--block {
	flex-direction: column;
	gap: 10px;
}

/* -----------------------------------------------------------------------
   Inline (horizontal) layout — increased gap for clear visual separation
------------------------------------------------------------------------ */
.empex-options-list--inline {
    flex-direction: row;
    gap: 6px;              /* gap between items — padding-right handles breathing room */
    align-items: center;
    flex-wrap: wrap;
}

/* In inline layout, each option item gets right padding for separation */
.empex-options-list--inline .empex-option-item {
    padding-right: 16px;       /* space between this item's text and next item's input */
    border-right: none;        /* no divider — spacing only */
}

/* Remove padding-right from the last inline item — no trailing space needed */
.empex-options-list--inline .empex-option-item:last-child {
    padding-right: 0;
}

/* -----------------------------------------------------------------------
   Option item — base styles (applies to both block and inline)
------------------------------------------------------------------------ */
.empex-option-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;                  /* space between the input element and the label text */
    cursor: pointer;
    line-height: 1;
    font-weight: normal;
    margin: 0;
    padding: 0;                /* base: no padding — inline adds padding-right above */
}

/* -----------------------------------------------------------------------
   Radio & Checkbox — The input element itself
------------------------------------------------------------------------ */
.empex-radio,
.empex-checkbox {
	flex-shrink: 0;
	margin: 0;
	cursor: pointer;
	width: 16px;
	height: 16px;
	accent-color: var(--empex-primary-color, #2271b1);
}

/* Focus state — accessible outline for keyboard navigation */
.empex-radio:focus-visible,
.empex-checkbox:focus-visible {
	outline: 2px solid var(--empex-primary-color, #2271b1);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
   Radio & Checkbox — The label text span
------------------------------------------------------------------------ */
.empex-option-label {
	display: inline;
	vertical-align: middle;
	line-height: 1.4;
	color: inherit;
}

/* -----------------------------------------------------------------------
   Accessibility — Screen reader only utility class
   Used for fieldset <legend> that provides semantic grouping without
   duplicating the visible label rendered by field-wrapper.php
------------------------------------------------------------------------ */
.empex-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -----------------------------------------------------------------------
   Responsive — On very narrow containers, inline layout wraps gracefully
------------------------------------------------------------------------ */
@media screen and (max-width: 480px) {
	.empex-options-list--inline {
		gap: 12px;
	}
}