/**
 * Contact form — Mueen enquiry fields.
 *
 * The theme styles inputs, textarea, select and input[type=radio] already,
 * but ships nothing for CF7's radio-group wrappers, and CF7's own default
 * (.wpcf7-list-item { margin: 0 0 0 1em }) is a physical margin that does
 * not mirror under RTL.
 */

/* ── Radio group (Client type) ───────────────────────────── */

.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	padding-block: 8px;
}

/* Replace CF7's physical left margin with nothing — the flex gap spaces them. */
.wpcf7-form .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7-form .wpcf7-list-item label {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 10px;
}

/* CF7 injects content:" " around the label text; the flex gap handles spacing. */
.wpcf7-form .wpcf7-list-item-label::before,
.wpcf7-form .wpcf7-list-item-label::after {
	content: none;
}

.wpcf7-form .wpcf7-list-item input[type="radio"],
.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
	flex: 0 0 auto;
}

.wpcf7-form .wpcf7-list-item-label {
	color: var(--jkd-heading);
	font-size: var(--jkd-font-small-size);
	line-height: 1.2;
}

/* ── Select arrow on the light colour scheme ─────────────────
   main.css hard-codes stroke='%23ffffff' with no light override, so the
   chevron disappears on a light background. Same SVG, dark stroke. */

[data-color-scheme="light"] .wpcf7-form select {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M6 9L12 15L18 9' stroke='%230F0F0F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

[data-color-scheme="light"] .wpcf7-form select:focus {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M6 15L12 9L18 15' stroke='%230F0F0F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* The arrow is pinned to the right in main.css — mirror it for Arabic. */
[dir="rtl"] .wpcf7-form select {
	background-position: left 18px center;
	padding-left: 44px;
	padding-right: 20px;
}

/* ── Blank select option should read as a placeholder ───────
   The theme paints every select with var(--jkd-heading), the same colour as
   a real answer, so CF7's empty first option looked like a made choice.
   Dim it to the placeholder colour until an actual option is picked.

   :invalid is not usable here — CF7 marks required fields with
   aria-required, never the native `required` attribute, so the control is
   never in the :invalid state. */

.wpcf7-form select:has(option[value=""]:checked) {
	color: var(--jkd-text);
}

/* Options in the open dropdown always keep full contrast. */
.wpcf7-form select option {
	color: var(--jkd-heading);
}

.wpcf7-form select option[value=""] {
	color: var(--jkd-text);
}

/* ── Latin-content fields inside the Arabic form ─────────────
   mueen-arabic pins email/url/tel inputs to direction:ltr so addresses and
   numbers keep their punctuation at the correct end. That is right, but it
   also left-aligns them, so their Arabic placeholders sat on the opposite
   side from every other field. Keeping ltr order while aligning to the right
   edge gives correct Latin text and a consistent column of placeholders. */

[dir="rtl"] .wpcf7-form input[type="email"],
[dir="rtl"] .wpcf7-form input[type="tel"],
[dir="rtl"] .wpcf7-form input[type="url"] {
	text-align: right;
}

/* ── Labels ──────────────────────────────────────────────── */

.wpcf7-form .form-row > label,
.wpcf7-form .form-row > div > label {
	color: var(--jkd-text);
	display: block;
	font-size: var(--jkd-font-xs-size);
	margin-bottom: 3px;
}