/*
 * Digihandler Leads — form styling.
 *
 * The child theme already carries the ported site design system, so .lead-card,
 * .lead-head, .btn.btn-y, .honeypot, .warn and .lead-fine are styled there and
 * are NOT restyled here. This file only covers what the original React form
 * never had — a textarea, a server-rendered thank-you panel — plus a safety net
 * for the two rules the form's security and legibility actually depend on.
 *
 * Every colour is a theme custom property with a fallback, so the form matches
 * the site when the tokens are present and still looks deliberate if they are
 * not.
 */

/* --------------------------------------------------------------------------
 * Safety net.
 *
 * The honeypot MUST be invisible whatever else loads or fails to load. If the
 * theme stylesheet is missing, a visible "honeypot" box is a field real people
 * fill in, and every genuine enquiry is then silently discarded as a bot.
 * ----------------------------------------------------------------------- */
.dh-lead-card .dh-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.dh-lead-card {
	position: static; /* the shortcode can sit anywhere; sticky is a page decision */
}

/* --------------------------------------------------------------------------
 * Textarea — matches .lead-card input / select in the ported stylesheet.
 * ----------------------------------------------------------------------- */
.dh-lead-card .dh-lead-textarea {
	width: 100%;
	margin-top: 6px;
	padding: 14px 16px;
	border-radius: 13px;
	border: 1px solid var(--line, rgba(255, 255, 255, .10));
	background: rgba(255, 255, 255, .05);
	color: var(--white, #fff);
	font-family: var(--font-b, system-ui, -apple-system, "Segoe UI", sans-serif);
	font-size: 14.5px;
	line-height: 1.55;
	outline: none;
	resize: vertical;
	min-height: 84px;
	transition:
		border-color .18s var(--ease-out, cubic-bezier(.2, .8, .2, 1)),
		box-shadow .18s var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}

.dh-lead-card .dh-lead-textarea::placeholder {
	color: #5d677f;
}

.dh-lead-card .dh-lead-textarea:focus {
	border-color: var(--yellow, #ffd429);
	box-shadow: 0 0 0 3px rgba(255, 208, 40, .14);
}

/* Field the server rejected. Mirrors .lead-card .err. */
.dh-lead-card .err {
	border-color: #ff6b6b !important;
}

/* --------------------------------------------------------------------------
 * Server-rendered error banner.
 * ----------------------------------------------------------------------- */
.dh-lead-card .dh-lead-warn {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 107, 107, .34);
	background: rgba(255, 107, 107, .08);
	color: var(--yellow-soft, #ffe45c);
	font-size: 13.5px;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
 * Thank-you panel.
 * ----------------------------------------------------------------------- */
.dh-lead-card .dh-lead-thanks {
	padding: 40px 10px;
	text-align: center;
}

.dh-lead-card .dh-lead-thanks .tick {
	width: 54px;
	height: 54px;
	margin: 0 auto 18px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--yellow, #ffd429);
	color: #000;
	font-size: 26px;
	line-height: 1;
}

.dh-lead-card .dh-lead-thanks h3 {
	margin: 0 0 8px;
	font-family: var(--font-d, Georgia, "Times New Roman", serif);
	font-size: 22px;
	color: var(--white, #fff);
}

.dh-lead-card .dh-lead-thanks p {
	margin: 0;
	color: var(--grey, #8a8a8f);
	font-size: 14px;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
 * Submit state.
 * ----------------------------------------------------------------------- */
.dh-lead-card .btn[disabled],
.dh-lead-card .btn[aria-disabled="true"] {
	opacity: .6;
	cursor: progress;
	transform: none;
}

/* Light mode: the ported design system flips on html[data-theme="light"]. */
html[data-theme="light"] .dh-lead-card .dh-lead-textarea {
	background: rgba(11, 16, 32, .04);
	color: #0b1020;
	border-color: rgba(11, 16, 32, .14);
}

html[data-theme="light"] .dh-lead-card .dh-lead-thanks h3 {
	color: #0b1020;
}

@media (prefers-reduced-motion: reduce) {
	.dh-lead-card .dh-lead-textarea {
		transition: none;
	}
}