/* ===========================================================================
   ceForms — the three public forms ({@see CEASAP\Forms\Renderer})

   ⚠ TOKENS ARE DECLARED ON THE COMPONENT, NOT BORROWED. faq.css scopes its tokens to `.ce-faq`,
   and reusing those names on a page without that wrapper produced declarations that were invalid
   at computed-value time and silently dropped — the "View package" button went transparent on
   hover and four screenshots missed it. Everything this file needs is defined on `.ce-form`.

   ⚠ ASTRA STYLES BARE ELEMENTS. `input`, `textarea`, `button` and `a` all carry theme rules, and
   `button:hover` sets BOTH colour and background. Every interactive rule here therefore states
   both halves, and every selector carries a class so it outranks the theme's element rules.
   ========================================================================= */

.ce-form {
	--cef-ink:    #0e2747;
	--cef-body:   #33415c;
	--cef-brand:  #046bd2;
	--cef-deep:   #02356f;
	--cef-line:   #cfdcec;
	--cef-soft:   #e6f1fb;
	--cef-err:    #b3261e;
	--cef-ok:     #0f6b3f;

	max-width: 640px;
	margin-inline: auto;
	padding-inline: 16px;
	padding-block: 1.5rem;
	color: var( --cef-body );
}

.ce-form__h {
	margin: 0 0 .4rem;
	font-size: clamp( 20px, 2.2vw, 26px );
	font-weight: 800;
	color: var( --cef-ink );
	text-wrap: balance;
}

.ce-form__intro { margin: 0 0 1.2rem; font-size: 15px; line-height: 1.6; }

/* One column on a phone, two where there is room. A textarea or an email always spans both, so
   the message box never ends up half-width beside a name. */
.ce-form__fields {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 14px 16px;
}
.ce-form__row { margin: 0; min-width: 0; }
.ce-form__row.is-wide { grid-column: 1 / -1; }

.ce-form__label {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 700;
	color: var( --cef-ink );
}
.ce-form__req { color: var( --cef-brand ); }

.ce-form .ce-form__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	border: 1px solid var( --cef-line );
	border-radius: 10px;
	background: #fff;
	color: var( --cef-ink );
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ce-form .ce-form__input--area { resize: vertical; min-height: 120px; }

.ce-form .ce-form__input:focus {
	outline: none;
	border-color: var( --cef-brand );
	box-shadow: 0 0 0 3px rgba( 4, 107, 210, .18 );
}
.ce-form .ce-form__input[aria-invalid="true"] {
	border-color: var( --cef-err );
	box-shadow: 0 0 0 3px rgba( 179, 38, 30, .14 );
}

.ce-form__err {
	display: block;
	margin-top: 5px;
	font-size: 13.5px;
	font-weight: 600;
	color: var( --cef-err );
}

/* The SMS consent paragraph is long legal text, so it is set smaller but still readable, with
   the checkbox pinned to the first line rather than centred against a five-line block. */
.ce-form__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: start;
	margin: 1.1rem 0 0;
	padding: 12px 14px;
	border: 1px solid var( --cef-line );
	border-radius: 10px;
	background: var( --cef-soft );
	font-size: 13px;
	line-height: 1.55;
}
.ce-form__consent input[type="checkbox"] { margin-top: 3px; width: 17px; height: 17px; }
.ce-form__consent .ce-form__err { grid-column: 2; }

/* ⚠ NOT display:none. A hidden input is skipped by some bots, which is the opposite of the point —
   the trap only works if a bot fills it. Moved off-screen, taken out of the a11y tree by
   aria-hidden on the wrapper, and out of the tab order by tabindex="-1". */
.ce-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ce-form .ce-form__submit {
	display: inline-block;
	margin-top: 1.2rem;
	padding: 12px 24px;
	border: 1px solid var( --cef-brand );
	border-radius: 10px;
	background: var( --cef-brand );
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
/* Both halves, always — Astra's `button:hover` supplies the other one otherwise. */
.ce-form .ce-form__submit:hover,
.ce-form .ce-form__submit:focus-visible {
	background: var( --cef-deep );
	border-color: var( --cef-deep );
	color: #fff;
}
.ce-form .ce-form__submit[disabled] {
	background: var( --cef-line );
	border-color: var( --cef-line );
	color: var( --cef-body );
	cursor: progress;
}

.ce-form__msg {
	margin: 0 0 1rem;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.5;
}
.ce-form__msg.is-done  { background: #e8f5ee; color: var( --cef-ok );  border: 1px solid #bfe3ce; }
.ce-form__msg.is-error { background: #fdecea; color: var( --cef-err ); border: 1px solid #f3c3bf; }

@media ( prefers-reduced-motion: reduce ) {
	.ce-form .ce-form__input,
	.ce-form .ce-form__submit { transition: none; }
}