:root {
	--dmf-accent: #3e68ff;
	--dmf-accent-hover: #2f52d6;
	--dmf-danger: #ef3e63;
	--dmf-single-accent: #e0774a;
	--dmf-single-accent-hover: #cf6539;
}

.dmf-form { max-width: 640px; margin: 0 auto; }
.dmf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dmf-col-full { grid-column: 1 / -1; }
.dmf-col-half { grid-column: span 1; }
.dmf-field-wrap { display: flex; flex-direction: column; }
.dmf-field-wrap label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.dmf-req { color: var(--dmf-danger); }
.dmf-form input[type=text],
.dmf-form input[type=email],
.dmf-form input[type=tel],
.dmf-form input[type=number],
.dmf-form input[type=file],
.dmf-form select,
.dmf-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cad0da;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	box-sizing: border-box;
}
.dmf-form textarea { resize: vertical; }
.dmf-form input:focus, .dmf-form select:focus, .dmf-form textarea:focus { outline: none; border-color: var(--dmf-accent); box-shadow: 0 0 0 3px rgba(62, 104, 255, .12); }
.dmf-choices { display: flex; flex-direction: column; gap: 6px; }
.dmf-choice { font-weight: 400; font-size: 14px; }

/*
 * ⚠ NEVER park a hidden element at a negative PHYSICAL offset. `left:-9999px` is harmless in LTR,
 * because leftward overflow is not scrollable — so it survives every LTR test and review. In an
 * RTL document the physical-left side IS the scrollable one, and this single declaration added
 * ~10,000px of empty width to every page carrying a form. MEASURED on a live RTL site:
 * documentElement.scrollWidth 11264 against a 1265px viewport, and 10389 against a 390px phone,
 * with the page draggable sideways into blank space. Neutralising this one element collapsed
 * scrollWidth to exactly clientWidth in both cases.
 *
 * The honeypot must still be invisible to a human and fillable by a bot, so it stays in the DOM
 * and in flow-position, CLIPPED rather than moved. `clip` is kept alongside `clip-path` for old
 * engines. Do not "simplify" this back to an offset.
 */
.dmf-hp {
	position: absolute !important;
	inset-inline-start: 0 !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * A label that is present for assistive tech and invisible on screen. CLIPPED, in flow — the same
 * technique as .dmf-hp above and for the same reason: an offset would reintroduce the RTL
 * scroll-width bug. `:focus` is deliberately NOT restored here; this labels a field, it is not a
 * skip link, and nothing focuses it.
 */
.dmf-sr-only {
	position: absolute !important;
	inset-inline-start: 0 !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.dmf-actions { margin-top: 16px; }
/*
 * ⚠ SKINNABLE, and this one was measured as unreadable on a real site. The BACKGROUND was already
 * a custom property, so a host theme could set its own accent — but the INK stayed a `#fff`
 * literal. On any theme whose accent is light (a cyan brand colour here) the label then measured
 * **1.66:1** against its own button, on the primary submit of every form the site ships. A
 * property that lets a theme change half a colour pair is worse than none: it invites exactly the
 * combination it cannot survive. `--dmf-on-accent` keeps #fff as its fallback, so nothing moves
 * for an existing install.
 */
.dmf-submit { width: 100%; padding: 12px 18px; border: 0; border-radius: 9px; background: var(--dmf-accent); color: var(--dmf-on-accent, #fff); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.dmf-submit:hover { background: var(--dmf-accent-hover); }
.dmf-submit:disabled { opacity: .55; cursor: not-allowed; }
.dmf-submit.dmf-loading { opacity: .7; }

.dmf-form-msg { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.dmf-form-msg.dmf-ok { background: #e7f4ec; color: #1d7a52; border: 1px solid #bfe3cd; }
.dmf-form-msg.dmf-err { background: #faeaea; color: #a32d2d; border: 1px solid #f0c4c4; }

@media (max-width: 600px) {
	.dmf-grid { grid-template-columns: 1fr; }
	.dmf-col-half { grid-column: 1 / -1; }
}

form.dmf-form.dmf-form-single { max-width: 460px; width: 100%; margin: 0; }
.dmf-single-row {
	display: flex;
	align-items: stretch;
	background: #f4f5f7;
	border: 1px solid #e3e6ea;
	border-radius: 8px;
	overflow: hidden;
}
.dmf-single-field { flex: 1 1 auto; }
.dmf-form .dmf-single-field input {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 10px 14px;
	font-size: 13px;
	box-sizing: border-box;
	direction: rtl;
	text-align: right;
}
.dmf-form .dmf-single-field input:focus { outline: none; box-shadow: none; }
.dmf-single-submit {
	flex: 0 0 auto;
	width: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 10px 18px;
	border-radius: 0;
	background: var(--dmf-single-accent);
	color: var(--dmf-single-on-accent, var(--dmf-on-accent, #fff));
	white-space: nowrap;
}
.dmf-single-submit:hover { background: var(--dmf-single-accent-hover); }
.dmf-single-submit svg { flex: 0 0 auto; transform: scaleX(-1); }