.ch-contact-field {
	margin: 0 0 1.25rem;
}

.ch-contact-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.ch-contact-field input[type="text"],
.ch-contact-field input[type="email"],
.ch-contact-field select,
.ch-contact-field textarea {
	width: 100%;
	max-width: 480px;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 6px;
	/* Inherited rather than left to the UA: a <select> otherwise renders in
	   the system font next to inputs that don't, which is the one control
	   that would look bolted on. `inherit` on font-size too, since some
	   browsers shrink select text independently. */
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background-color: var(--wp--preset--color--white);
}

/* The chevron is drawn here because `appearance: none` removes the native
   one along with the native styling we are replacing. Inlined as a data URI
   so the control needs no network request to look finished, and positioned
   with logical properties so it flips for the Farsi RTL locale. */
.ch-contact-field select {
	appearance: none;
	padding-inline-end: 2.25rem;
	background-image: url( 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path d="M1 1.5 6 6.5 11 1.5" fill="none" stroke="%234a5568" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>' );
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 0.7rem;
}

.ch-contact-field select:dir( rtl ) {
	background-position: left 0.85rem center;
}

.ch-contact-field input:user-invalid,
.ch-contact-field textarea:user-invalid {
	border-color: var(--wp--preset--color--state-error);
}

.ch-contact-hp {
	position: absolute;
	left: -9999px;
}

.ch-contact-checkbox label {
	font-weight: 400;
	/* Not display:flex — the consent sentence is a text run with an inline
	   <a> in it, and flex promotes each of those to its own item, breaking
	   one sentence into side-by-side columns. Hanging indent instead, so
	   the text stays a single wrapping paragraph beside the box. */
	display: block;
	position: relative;
	padding-left: 1.75rem;
}

.ch-contact-checkbox input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 0.3em;
	margin: 0;
}

.ch-contact-success {
	background: var(--wp--preset--color--surface-success);
	border: 1px solid var(--wp--preset--color--accent-action);
	color: var(--wp--preset--color--text-primary);
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}

.ch-contact-error {
	background: var(--wp--preset--color--surface-error);
	border: 1px solid var(--wp--preset--color--state-error);
	color: var(--wp--preset--color--state-error);
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}