@charset "UTF-8";
/*
 * EFC Houbara Request Form - public stylesheet.
 * Prefix: .efc-hb-  |  text domain: efc-houbara
 * Defensive: every rule is scoped under .efc-hb-wrap / .efc-hb-form or an
 * .efc-hb-* class, so nothing leaks into the Wilddale theme and nothing here
 * depends on a theme reset existing. Mobile first. No @import, no framework.
 */

/* ------------------------------------------------------------- tokens - */

.efc-hb-wrap,
.efc-hb-form,
.efc-hb-success,
.efc-hb-errors {
	--efc-hb-ground: #fbfaf7;
	--efc-hb-surface: #ffffff;
	--efc-hb-band: #c9bfae;
	--efc-hb-band-soft: #ede8df;
	--efc-hb-ink: #1e1b16;
	--efc-hb-muted: #6b6154;
	--efc-hb-line: #d8d0c2;
	--efc-hb-accent: #8a6a3b;
	--efc-hb-accent-dark: #6f5430;
	--efc-hb-accent-ink: #ffffff;
	--efc-hb-accent-tint: #f4efe6;
	--efc-hb-error: #a32a1e;
	--efc-hb-error-line: #c9422f;
	--efc-hb-error-bg: #fdf1ef;
	--efc-hb-ok: #2c6a4d;
	--efc-hb-ok-line: #9ec7b3;
	--efc-hb-ok-bg: #f0f7f3;
	--efc-hb-radius: 10px;
	--efc-hb-radius-sm: 7px;
	--efc-hb-ar-font: "Segoe UI", "Noto Naskh Arabic", "Traditional Arabic", Tahoma, sans-serif;
}

/*
 * No prefers-color-scheme block.
 *
 * efcuae.com is a light-only site. Honouring the visitor's dark-mode
 * preference here flipped the form to a dark palette while the page
 * around it stayed light, so on any phone set to dark mode the form
 * appeared as a black slab in the middle of a white page. The form
 * follows the site, not the device.
 */

/* --------------------------------------------------------- foundation - */

.efc-hb-wrap {
	box-sizing: border-box;
	max-width: 880px;
	margin: 0 auto;
	color: var(--efc-hb-ink);
	font-size: 15px;
	line-height: 1.6;
	text-align: start;
}
.efc-hb-wrap *,
.efc-hb-wrap *::before,
.efc-hb-wrap *::after { box-sizing: border-box; }

/* Many themes drop the UA [hidden] rule; force it back. */
.efc-hb-wrap [hidden],
.efc-hb-form [hidden] { display: none !important; }

.efc-hb-form { margin: 0; padding: 0; background: transparent; color: var(--efc-hb-ink); }

.efc-hb-title {
	margin: 0 0 4px;
	color: var(--efc-hb-accent);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}
.efc-hb-intro { margin: 0 0 24px; color: var(--efc-hb-muted); font-size: 15px; }

/* -------------------------------------------------- bilingual labels - */

.efc-hb-l-en,
.efc-l-en {
	display: block;
	color: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}
.efc-hb-l-ar,
.efc-l-ar {
	display: block;
	margin-top: 2px;
	direction: rtl;
	unicode-bidi: isolate;
	color: var(--efc-hb-muted);
	font-family: var(--efc-hb-ar-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.65;
	text-align: right;
}
.efc-hb-req,
.efc-hb-required {
	color: var(--efc-hb-error);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	margin-inline-start: 3px;
}

/*
 * Visually hidden but still read aloud. Used for a group legend that would
 * otherwise repeat the section heading word for word: sighted users see the
 * heading once, screen-reader users still get the fieldset named.
 */
.efc-hb-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.efc-hb-hint { display: block; margin-top: 5px; color: var(--efc-hb-muted); font-size: 14px; }

/* --------------------------------------------------------- sections - */

.efc-hb-section,
.efc-hb-form fieldset {
	margin: 0 0 22px;
	padding: 0 0 16px;
	border: 1px solid var(--efc-hb-line);
	border-radius: var(--efc-hb-radius);
	background: var(--efc-hb-surface);
	overflow: hidden;
}
.efc-hb-section-head,
.efc-hb-sec-title,
.efc-hb-form legend {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	padding: 11px 16px;
	border: 0;
	border-bottom: 1px solid var(--efc-hb-line);
	border-inline-start: 4px solid var(--efc-hb-accent);
	background: var(--efc-hb-band-soft);
	color: var(--efc-hb-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}
.efc-hb-section-head .efc-hb-l-ar,
.efc-hb-section-head .efc-l-ar,
.efc-hb-sec-title .efc-hb-l-ar,
.efc-hb-sec-title .efc-l-ar,
.efc-hb-form legend .efc-hb-l-ar,
.efc-hb-form legend .efc-l-ar { color: var(--efc-hb-accent-dark); font-size: 15px; }

.efc-hb-section-body { padding: 16px; background: var(--efc-hb-ground); }

/* The template has no .efc-hb-section-body wrapper — fields sit directly in
   the <section> / <fieldset>. Inset those children instead so the heading
   band above them can still run full bleed. The bottom inset is padding on
   the container, because the last child is usually a hidden .efc-hb-err. */
.efc-hb-section > :not(.efc-hb-section-head):not(.efc-hb-sec-title):not(.efc-hb-section-body),
.efc-hb-form fieldset > :not(legend) { margin-inline: 16px; }
.efc-hb-section > .efc-hb-section-head + :not(.efc-hb-section-body),
.efc-hb-section > .efc-hb-sec-title + :not(.efc-hb-section-body),
.efc-hb-form fieldset > legend + * { margin-top: 16px; }

/* ----------------------------------------------------------- fields - */

.efc-hb-field { margin: 0 0 18px; }
.efc-hb-field:last-child { margin-bottom: 0; }
.efc-hb-label { display: block; margin: 0 0 6px; cursor: pointer; }

.efc-hb-form input[type="text"],
.efc-hb-form input[type="email"],
.efc-hb-form input[type="tel"],
.efc-hb-form input[type="number"],
.efc-hb-form input[type="date"],
.efc-hb-form input[type="datetime-local"],
.efc-hb-form input[type="file"],
.efc-hb-form select,
.efc-hb-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--efc-hb-line);
	border-radius: var(--efc-hb-radius-sm);
	background: var(--efc-hb-surface);
	color: var(--efc-hb-ink);
	font-family: inherit;
	/* 16px, not 15px: iOS Safari zooms the page when a focused input
	   is under 16px. Everything else on the form is 15px. */
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
}
.efc-hb-form textarea { min-height: 96px; resize: vertical; }
.efc-hb-form input[type="file"] { padding: 8px; font-size: 15px; }
.efc-hb-form input::placeholder,
.efc-hb-form textarea::placeholder { color: var(--efc-hb-muted); opacity: 1; }
.efc-hb-form input:not([type="checkbox"]):hover,
.efc-hb-form select:hover,
.efc-hb-form textarea:hover { border-color: var(--efc-hb-accent); }

/* Numbers, e-mail, phone and dates always read left to right. */
.efc-hb-form input[dir="ltr"],
.efc-hb-form textarea[dir="ltr"] { direction: ltr; text-align: left; unicode-bidi: isolate; }

/* -------------------------------------------------- checkbox groups - */

.efc-hb-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media ( min-width: 641px ) {
	.efc-hb-options { grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) ); }
}

.efc-hb-opt,
.efc-hb-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 52px;
	margin: 0;
	padding: 14px 14px;
	border: 1px solid var(--efc-hb-line);
	border-radius: var(--efc-hb-radius-sm);
	background: var(--efc-hb-surface);
	color: var(--efc-hb-ink);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.efc-hb-opt:hover,
.efc-hb-option:hover { border-color: var(--efc-hb-accent); background: var(--efc-hb-accent-tint); }
.efc-hb-opt-text,
.efc-hb-option-label { flex: 1 1 auto; min-width: 0; }

.efc-hb-form .efc-hb-opt input[type="checkbox"],
.efc-hb-form .efc-hb-option input[type="checkbox"],
.efc-hb-form .efc-hb-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin: 3px 0 0;
	accent-color: var(--efc-hb-accent);
	cursor: pointer;
}

/* Checked state. Driven entirely by :has() — form.js never toggles a class
   here, so the previous .is-checked block was dead and has been removed. */
.efc-hb-opt:has( input:checked ),
.efc-hb-option:has( input:checked ),
.efc-hb-check:has( input:checked ) {
	border-color: var(--efc-hb-accent);
	background: var(--efc-hb-accent-tint);
	box-shadow: inset 0 0 0 1px var(--efc-hb-accent);
}
.efc-hb-opt:has( input:checked ) .efc-hb-l-en,
.efc-hb-opt:has( input:checked ) .efc-l-en,
.efc-hb-option:has( input:checked ) .efc-hb-l-en,
.efc-hb-option:has( input:checked ) .efc-l-en { color: var(--efc-hb-accent-dark); }

/* ------------------------------------------------ consent check rows - */

.efc-hb-check {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0 0 14px;
	padding: 14px;
	border: 1px solid var(--efc-hb-line);
	border-radius: var(--efc-hb-radius-sm);
	background: var(--efc-hb-surface);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.efc-hb-check-text,
.efc-hb-check-label { flex: 1 1 auto; min-width: 0; font-size: 15px; }

/* ------------------------------------------------------ terms panel - */

.efc-hb-terms {
	max-height: 260px;
	margin: 0 0 14px;
	padding: 14px 16px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--efc-hb-line);
	border-radius: var(--efc-hb-radius-sm);
	background: var(--efc-hb-surface);
	font-size: 14px;
}
.efc-hb-terms ol { margin: 0; padding-inline-start: 22px; list-style: decimal; }
.efc-hb-terms li { margin: 0 0 14px; padding: 0; }
.efc-hb-terms li:last-child { margin-bottom: 0; }
.efc-hb-terms .efc-hb-l-en,
.efc-hb-terms .efc-l-en { font-weight: 500; }
.efc-hb-terms .efc-hb-l-ar,
.efc-hb-terms .efc-l-ar { margin-top: 4px; color: var(--efc-hb-ink); }

.efc-hb-undertaking,
.efc-hb-note {
	margin: 0 0 14px;
	padding: 13px 16px;
	border: 1px solid var(--efc-hb-band);
	border-inline-start: 4px solid var(--efc-hb-accent);
	border-radius: var(--efc-hb-radius-sm);
	background: var(--efc-hb-band-soft);
	color: var(--efc-hb-ink);
	font-size: 14px;
}
.efc-hb-note .efc-hb-l-ar,
.efc-hb-note .efc-l-ar,
.efc-hb-undertaking .efc-hb-l-ar,
.efc-hb-undertaking .efc-l-ar { color: var(--efc-hb-ink); }

/* ----------------------------------------------------- error states - */

.efc-hb-err {
	display: block;
	margin-top: 6px;
	color: var(--efc-hb-error);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}
.has-error > .efc-hb-label { color: var(--efc-hb-error); }
.has-error input[type="text"],
.has-error input[type="email"],
.has-error input[type="tel"],
.has-error input[type="number"],
.has-error input[type="date"],
.has-error input[type="datetime-local"],
.has-error input[type="file"],
.has-error select,
.has-error textarea,
.has-error .efc-hb-opt,
.has-error .efc-hb-option,
.has-error .efc-hb-check,
.has-error .efc-hb-terms { border-color: var(--efc-hb-error-line); }
.has-error .efc-hb-options {
	padding: 9px;
	border: 1px solid var(--efc-hb-error-line);
	border-radius: var(--efc-hb-radius-sm);
	background: var(--efc-hb-error-bg);
}

.efc-hb-errors {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--efc-hb-error-line);
	border-inline-start: 4px solid var(--efc-hb-error-line);
	border-radius: var(--efc-hb-radius-sm);
	background: var(--efc-hb-error-bg);
	color: var(--efc-hb-error);
	font-size: 15px;
}
.efc-hb-errors ul { margin: 6px 0 0; padding-inline-start: 19px; list-style: disc; }
.efc-hb-errors li { margin: 0 0 4px; }
.efc-hb-errors a { color: var(--efc-hb-error); text-decoration: underline; }

/* --------------------------------------------------------- honeypot - */
/* Hidden from people, still present for bots. Never display:none. */

.efc-hb-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	margin: 0;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

/* ---------------------------------------------------------- actions - */

.efc-hb-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin: 24px 0 0;
}
@media ( min-width: 641px ) {
	.efc-hb-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

.efc-hb-form .efc-hb-submit,
.efc-hb-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border: 1px solid var(--efc-hb-accent-dark);
	border-radius: var(--efc-hb-radius-sm);
	background: var(--efc-hb-accent);
	color: var(--efc-hb-accent-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, opacity .15s ease;
}
.efc-hb-form .efc-hb-submit:hover,
.efc-hb-form .efc-hb-submit:focus { background: var(--efc-hb-accent-dark); color: var(--efc-hb-accent-ink); }
.efc-hb-form .efc-hb-submit:disabled,
.efc-hb-submit[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.efc-hb-submit.is-loading { pointer-events: none; opacity: .85; }
.efc-hb-submit.is-loading::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: efc-hb-spin .7s linear infinite;
}
@keyframes efc-hb-spin { to { transform: rotate( 360deg ); } }

.efc-hb-status { color: var(--efc-hb-muted); font-size: 14px; }

/* ---------------------------------------------------- success panel - */

.efc-hb-success {
	margin: 0;
	padding: 20px 22px;
	border: 1px solid var(--efc-hb-ok-line);
	border-inline-start: 4px solid var(--efc-hb-ok);
	border-radius: var(--efc-hb-radius);
	background: var(--efc-hb-ok-bg);
	color: var(--efc-hb-ink);
}
.efc-hb-success-title {
	margin: 0 0 8px;
	color: var(--efc-hb-ok);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}
.efc-hb-success-body { margin: 0; font-size: 15px; }
.efc-hb-success .efc-hb-l-ar,
.efc-hb-success .efc-l-ar { margin-top: 8px; color: var(--efc-hb-ink); }
.efc-hb-ref {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--efc-hb-band-soft);
	color: var(--efc-hb-accent-dark);
	font-family: ui-monospace, Consolas, "Courier New", monospace;
	font-weight: 700;
	direction: ltr;
	unicode-bidi: isolate;
}

/* ------------------------------------------------------------ focus - */

.efc-hb-wrap :focus { outline: 2px solid var(--efc-hb-accent); outline-offset: 2px; }
.efc-hb-wrap :focus:not( :focus-visible ) { outline: none; }
.efc-hb-wrap :focus-visible { outline: 2px solid var(--efc-hb-accent); outline-offset: 2px; }
.efc-hb-opt:focus-within,
.efc-hb-option:focus-within,
.efc-hb-check:focus-within { outline: 2px solid var(--efc-hb-accent); outline-offset: 2px; }

/* -------------------------------------------------------- RTL pages - */

[dir="rtl"] .efc-hb-wrap,
.efc-hb-wrap[dir="rtl"] { text-align: right; }
[dir="rtl"] .efc-hb-form .efc-hb-l-en,
[dir="rtl"] .efc-hb-form .efc-l-en { direction: ltr; unicode-bidi: isolate; text-align: right; }
[dir="rtl"] .efc-hb-opt,
[dir="rtl"] .efc-hb-option,
[dir="rtl"] .efc-hb-check,
[dir="rtl"] .efc-hb-note,
[dir="rtl"] .efc-hb-undertaking { text-align: right; }
[dir="rtl"] .efc-hb-hp { left: auto !important; right: -9999px !important; }
/* but LTR data keeps its own alignment */
[dir="rtl"] .efc-hb-form input[dir="ltr"],
[dir="rtl"] .efc-hb-form textarea[dir="ltr"] { direction: ltr; text-align: left; unicode-bidi: isolate; }

/* -------------------------------------------------- narrow viewports - */

@media ( max-width: 640px ) {
	.efc-hb-title { font-size: 19px; }
	.efc-hb-section-body { padding: 14px; }
	.efc-hb-section,
	.efc-hb-form fieldset { padding-bottom: 14px; }
	.efc-hb-section > :not(.efc-hb-section-head):not(.efc-hb-sec-title):not(.efc-hb-section-body),
	.efc-hb-form fieldset > :not(legend) { margin-inline: 14px; }
	.efc-hb-section > .efc-hb-section-head + :not(.efc-hb-section-body),
	.efc-hb-section > .efc-hb-sec-title + :not(.efc-hb-section-body),
	.efc-hb-form fieldset > legend + * { margin-top: 14px; }
	.efc-hb-terms { max-height: 220px; }
	.efc-hb-form .efc-hb-submit,
	.efc-hb-submit { width: 100%; }
}
@media ( min-width: 641px ) {
	.efc-hb-row { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 16px; }
}

/* --------------------------------------------------- motion / print - */

@media ( prefers-reduced-motion: reduce ) {
	.efc-hb-wrap *,
	.efc-hb-wrap *::before,
	.efc-hb-wrap *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.efc-hb-actions,
	.efc-hb-hp { display: none !important; }
	.efc-hb-terms { max-height: none; overflow: visible; }
	.efc-hb-section,
	.efc-hb-form fieldset { break-inside: avoid; }
}

/* ------------------------------------------------- blocks the template
 * emits that the base rules above do not cover: the read-only order date,
 * checkbox-group wrappers, the helper line, the notice panels, the consent
 * rows, the numbered terms list, the privacy block and the Turnstile slot.
 * All colours come from the tokens, so dark mode follows automatically.
 * -------------------------------------------------------------------- */

/* Read-only Date of Order (rendered as text, not an input). */
.efc-hb-static {
	margin: 0;
	padding: 9px 12px;
	border: 1px dashed var(--efc-hb-line);
	border-radius: var(--efc-hb-radius-sm);
	background: var(--efc-hb-band-soft);
	color: var(--efc-hb-ink);
	font-variant-numeric: tabular-nums;
	direction: ltr;
	text-align: left;
}

/* Wrapper around each checkbox group (holds legend + helper + options). */
.efc-hb-group {
	margin: 0 0 18px;
}

.efc-hb-group:last-child {
	margin-bottom: 0;
}

/* "Select all that apply" helper line under a group legend. */
.efc-hb-help {
	margin: 0 0 8px;
	color: var(--efc-hb-muted);
	font-size: 0.86em;
	line-height: 1.45;
}

.efc-hb-help .efc-hb-l-ar,
.efc-hb-help .efc-l-ar {
	font-family: var(--efc-hb-ar-font);
	direction: rtl;
	unicode-bidi: isolate;
}

/* Notice panels: the delivery note, the CITES note, the page-2 manual note. */
.efc-hb-notice {
	margin: 0 0 16px;
	padding: 13px 15px;
	border: 1px solid var(--efc-hb-line);
	border-inline-start: 3px solid var(--efc-hb-accent);
	border-radius: var(--efc-hb-radius-sm);
	background: var(--efc-hb-accent-tint);
	color: var(--efc-hb-ink);
	font-size: 0.92em;
	line-height: 1.55;
}

.efc-hb-notice .efc-hb-l-ar,
.efc-hb-notice .efc-l-ar {
	font-family: var(--efc-hb-ar-font);
	direction: rtl;
	unicode-bidi: isolate;
	display: block;
	margin-top: 5px;
	color: var(--efc-hb-muted);
}

.efc-hb-notice--manual {
	background: var(--efc-hb-band-soft);
	border-inline-start-color: var(--efc-hb-band);
}

/* Consent rows: undertaking, terms, privacy. */
.efc-hb-consent {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--efc-hb-line);
	border-radius: var(--efc-hb-radius);
	background: var(--efc-hb-surface);
}

.efc-hb-consent:last-child {
	margin-bottom: 0;
}

.efc-hb-consent.has-error {
	border-color: var(--efc-hb-error-line);
	background: var(--efc-hb-error-bg);
}

.efc-hb-form .efc-hb-consent-box {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--efc-hb-accent);
	cursor: pointer;
}

/* The nine terms, numbered, inside the scrollable .efc-hb-terms panel. */
.efc-hb-terms-list {
	margin: 0;
	padding-inline-start: 22px;
	list-style: decimal;
}

.efc-hb-terms-list > li {
	margin: 0 0 11px;
	padding: 0;
	color: var(--efc-hb-ink);
	font-size: 0.9em;
	line-height: 1.6;
}

.efc-hb-terms-list > li:last-child {
	margin-bottom: 0;
}

.efc-hb-terms-list .efc-hb-l-ar,
.efc-hb-terms-list .efc-l-ar {
	font-family: var(--efc-hb-ar-font);
	direction: rtl;
	unicode-bidi: isolate;
	display: block;
	margin-top: 4px;
	color: var(--efc-hb-muted);
}

/* Privacy consent copy block. */
.efc-hb-privacy {
	margin: 0 0 10px;
	color: var(--efc-hb-ink);
	font-size: 0.88em;
	line-height: 1.6;
}

.efc-hb-privacy .efc-hb-l-ar,
.efc-hb-privacy .efc-l-ar {
	font-family: var(--efc-hb-ar-font);
	direction: rtl;
	unicode-bidi: isolate;
	display: block;
	margin-top: 5px;
	color: var(--efc-hb-muted);
}

/* Cloudflare Turnstile slot (only rendered when the site key is defined). */
.efc-hb-turnstile {
	margin: 0 0 16px;
	min-height: 65px;
}

/* JS-applied fallback for browsers without :has() support. */
.efc-hb-opt.is-checked,
.efc-hb-option.is-checked,
.efc-hb-check.is-checked {
	border-color: var(--efc-hb-accent);
	background: var(--efc-hb-accent-tint);
	box-shadow: inset 0 0 0 1px var(--efc-hb-accent);
}

/* ------------------------------------------- success panel paragraphs -
 * The confirmation message is bilingual and multi-paragraph: English block
 * first, Arabic below it, each paragraph spaced. The reference code sits
 * last as a small monospace line.
 * -------------------------------------------------------------------- */

.efc-hb-success-body .efc-l-en,
.efc-hb-success-body .efc-l-ar {
	display: block;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
}

.efc-hb-success-body .efc-l-ar {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--efc-hb-line);
	font-family: var(--efc-hb-ar-font);
	direction: rtl;
	unicode-bidi: isolate;
	text-align: right;
}

.efc-hb-success-body p {
	margin: 0 0 10px;
}

.efc-hb-success-body p:last-child {
	margin-bottom: 0;
}

.efc-hb-success-title .efc-l-en,
.efc-hb-success-title .efc-l-ar {
	display: block;
}

.efc-hb-success-title .efc-l-ar {
	margin-top: 4px;
	font-family: var(--efc-hb-ar-font);
	direction: rtl;
	unicode-bidi: isolate;
	text-align: right;
}

.efc-hb-success-ref {
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--efc-hb-line);
	color: var(--efc-hb-muted);
	font-family: ui-monospace, Consolas, "Courier New", monospace;
	font-size: 14px;
	letter-spacing: 0.04em;
	direction: ltr;
	text-align: start;
}

/* ------------------------------------------------ label / marker flow -
 * The label holds three children: the English text, the Arabic text and the
 * required marker. All three were block-level, so the asterisk dropped onto a
 * third line of its own. Lay the label out as a wrapping flex row and order
 * them explicitly: English, then the asterisk beside it, then Arabic forced
 * onto its own line by a 100% basis.
 * -------------------------------------------------------------------- */

.efc-hb-label,
.efc-hb-form legend {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 6px;
}

.efc-hb-label > .efc-hb-l-en,
.efc-hb-label > .efc-l-en,
.efc-hb-form legend > .efc-hb-l-en,
.efc-hb-form legend > .efc-l-en {
	order: 1;
	flex: 0 1 auto;
}

.efc-hb-label > .efc-hb-required,
.efc-hb-label > .efc-hb-req,
.efc-hb-form legend > .efc-hb-required,
.efc-hb-form legend > .efc-hb-req {
	order: 2;
	flex: 0 0 auto;
	margin-inline-start: 0;
}

.efc-hb-label > .efc-hb-l-ar,
.efc-hb-label > .efc-l-ar,
.efc-hb-form legend > .efc-hb-l-ar,
.efc-hb-form legend > .efc-l-ar {
	order: 3;
	flex: 1 0 100%;
}

/* The section heading carries the marker for a group whose legend is hidden. */
.efc-hb-sec-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 6px;
}

.efc-hb-sec-title > .efc-hb-l-en,
.efc-hb-sec-title > .efc-l-en { order: 1; flex: 0 1 auto; }
.efc-hb-sec-title > .efc-hb-required { order: 2; flex: 0 0 auto; margin-inline-start: 0; }
.efc-hb-sec-title > .efc-hb-l-ar,
.efc-hb-sec-title > .efc-l-ar { order: 3; flex: 1 0 100%; }

/* ------------------------------------------------------ nested frames -
 * A checkbox group is a <fieldset> sitting inside a <section>, and both were
 * given the same border, radius and background — drawing a second box inside
 * the first. The section owns the frame; the fieldset inside it does not.
 * -------------------------------------------------------------------- */

.efc-hb-section fieldset,
.efc-hb-section > fieldset {
	margin-block: 0;
	margin-inline: 16px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

.efc-hb-section fieldset > :not(legend),
.efc-hb-form .efc-hb-section fieldset > :not(legend) {
	margin-inline: 0;
}

/* ------------------------------------------------- submit button text -
 * The Arabic half of a bilingual label is muted by default, which left the
 * button reading white over bronze on one line and grey on the next.
 * -------------------------------------------------------------------- */

.efc-hb-form .efc-hb-submit .efc-hb-l-ar,
.efc-hb-form .efc-hb-submit .efc-l-ar,
.efc-hb-submit .efc-hb-l-ar,
.efc-hb-submit .efc-l-ar {
	color: var(--efc-hb-accent-ink);
	opacity: 0.92;
}

.efc-hb-form .efc-hb-submit .efc-hb-l-en,
.efc-hb-form .efc-hb-submit .efc-l-en,
.efc-hb-submit .efc-hb-l-en,
.efc-hb-submit .efc-l-en {
	color: var(--efc-hb-accent-ink);
}

.efc-hb-form .efc-hb-submit,
.efc-hb-submit {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	row-gap: 2px;
}

/* =====================================================================
 * PHONES
 * Appended last so these win over the earlier narrow-viewport block.
 * Goals: nothing overflows sideways, every tappable thing clears 44px,
 * the bilingual label pair stays readable, and the vertical rhythm tightens
 * without the sections collapsing into each other.
 * ================================================================== */

@media ( max-width: 640px ) {

	/* Long unbroken strings (emails, URLs, Arabic runs) must not push the
	   page sideways. */
	.efc-hb-wrap,
	.efc-hb-wrap * {
		min-width: 0;
		overflow-wrap: break-word;
	}

	.efc-hb-wrap { font-size: 15px; }

	/* --- section frames ------------------------------------------- */

	.efc-hb-section,
	.efc-hb-form fieldset {
		margin: 0 0 16px;
		padding: 0 0 12px;
		border-radius: 8px;
	}

	.efc-hb-section-head,
	.efc-hb-sec-title,
	.efc-hb-form legend {
		padding: 10px 12px;
		border-inline-start-width: 3px;
		font-size: 16px;
	}

	.efc-hb-section-body { padding: 12px; }

	.efc-hb-section > :not(.efc-hb-section-head):not(.efc-hb-sec-title):not(.efc-hb-section-body),
	.efc-hb-form fieldset > :not(legend) { margin-inline: 12px; }

	.efc-hb-section > .efc-hb-section-head + :not(.efc-hb-section-body),
	.efc-hb-section > .efc-hb-sec-title + :not(.efc-hb-section-body),
	.efc-hb-form fieldset > legend + * { margin-top: 12px; }

	.efc-hb-section fieldset > :not(legend),
	.efc-hb-form .efc-hb-section fieldset > :not(legend) { margin-inline: 0; }

	/* --- labels ---------------------------------------------------- */

	.efc-hb-field { margin: 0 0 14px; }

	.efc-hb-label,
	.efc-hb-form legend,
	.efc-hb-sec-title { column-gap: 5px; }

	.efc-hb-l-en,
	.efc-l-en { font-size: 15px; line-height: 1.3; }

	.efc-hb-l-ar,
	.efc-l-ar { margin-top: 3px; font-size: 14px; line-height: 1.7; }

	.efc-hb-hint { font-size: 13px; }

	/* --- inputs ---------------------------------------------------- */

	.efc-hb-form input:not([type="checkbox"]),
	.efc-hb-form select,
	.efc-hb-form textarea {
		width: 100%;
		padding: 11px 12px;
		min-height: 46px;
	}

	.efc-hb-form input[type="file"] {
		padding: 10px;
		font-size: 14px;
	}

	.efc-hb-static { padding: 10px 12px; }

	/* --- choice options -------------------------------------------- */

	.efc-hb-options { grid-template-columns: 1fr; gap: 8px; }

	.efc-hb-opt,
	.efc-hb-option {
		min-height: 48px;
		padding: 12px;
		gap: 10px;
		align-items: center;
	}

	.efc-hb-form .efc-hb-opt input[type="checkbox"],
	.efc-hb-form .efc-hb-option input[type="checkbox"] {
		width: 22px;
		height: 22px;
		flex: 0 0 22px;
	}

	.efc-hb-option-label .efc-hb-l-en,
	.efc-hb-opt-text .efc-hb-l-en { font-size: 15px; }

	.efc-hb-option-label .efc-hb-l-ar,
	.efc-hb-opt-text .efc-hb-l-ar { font-size: 14px; }

	/* --- notices, terms, consent ----------------------------------- */

	.efc-hb-note,
	.efc-hb-notice {
		padding: 10px 12px;
		font-size: 14px;
	}

	.efc-hb-terms {
		max-height: 240px;
		padding: 12px;
		-webkit-overflow-scrolling: touch;
	}

	.efc-hb-terms-list { padding-inline-start: 18px; }
	.efc-hb-terms-list > li { font-size: 14px; line-height: 1.65; }

	.efc-hb-consent { padding: 12px; }
	.efc-hb-undertaking { font-size: 14px; }

	.efc-hb-check { align-items: flex-start; gap: 10px; }
	.efc-hb-form .efc-hb-consent-box { width: 22px; height: 22px; flex: 0 0 22px; }

	/* --- errors ----------------------------------------------------- */

	.efc-hb-errors { padding: 12px; font-size: 14px; }
	.efc-hb-err { font-size: 13px; }

	/* --- actions ---------------------------------------------------- */

	.efc-hb-actions { margin-top: 18px; }

	.efc-hb-form .efc-hb-submit,
	.efc-hb-submit {
		width: 100%;
		min-height: 52px;
		padding: 12px 18px;
	}

	/* --- success ---------------------------------------------------- */

	.efc-hb-success { padding: 16px; }
	.efc-hb-success-title { font-size: 17px; }
	.efc-hb-success-body .efc-l-en,
	.efc-hb-success-body .efc-l-ar { font-size: 14px; }
	.efc-hb-success-ref { font-size: 13px; }
}

/* Very narrow phones (iPhone SE and similar). */
@media ( max-width: 400px ) {

	.efc-hb-section-head,
	.efc-hb-sec-title,
	.efc-hb-form legend { padding: 9px 10px; font-size: 15px; }

	.efc-hb-section-body { padding: 10px; }

	.efc-hb-section > :not(.efc-hb-section-head):not(.efc-hb-sec-title):not(.efc-hb-section-body),
	.efc-hb-form fieldset > :not(legend) { margin-inline: 10px; }

	.efc-hb-opt,
	.efc-hb-option { padding: 11px 10px; }

	.efc-hb-terms { max-height: 200px; padding: 10px; }
	.efc-hb-consent { padding: 10px; }
}