/* Agile Themes shop forms. Colours come from the theme's presets so the form follows the site's look. */
.agile-form { display: grid; gap: 1rem; max-width: 36rem; }
.agile-form__field { display: grid; gap: .35rem; }
.agile-form label { font-weight: 600; }
.agile-form__optional { font-weight: 400; color: var(--wp--preset--color--accent-4, #5a605d); }
.agile-form input[type="text"],
.agile-form input[type="email"],
.agile-form select,
.agile-form textarea {
	box-sizing: border-box; width: 100%; min-height: 2.75rem; padding: .55rem .75rem;
	font: inherit; color: var(--wp--preset--color--contrast, #1c211f);
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--accent-4, #5a605d); border-radius: 6px;
}
.agile-form textarea { min-height: 9rem; resize: vertical; }
.agile-form ::placeholder { color: var(--wp--preset--color--accent-4, #5a605d); font-style: italic; opacity: 1; }
.agile-form :focus-visible { outline: 3px solid var(--wp--preset--color--accent-1, #1e5e5a); outline-offset: 2px; }
.agile-form [aria-invalid="true"] { border-color: #a4262c; border-width: 2px; }
.agile-form__error { margin: 0; color: #a4262c; font-weight: 600; }
.agile-form__help, .agile-form__note { margin: 0; font-size: .9em; color: var(--wp--preset--color--accent-4, #5a605d); }
.agile-form__summary { margin: 0; padding: .75rem 1rem; border-left: 4px solid #a4262c; background: #fbeeee; color: #1c211f; }
.agile-form__thanks { margin: 0; padding: 1rem 1.25rem; border-left: 4px solid var(--wp--preset--color--accent-1, #1e5e5a); background: var(--wp--preset--color--accent-2, #efe9dd); font-weight: 600; }
.agile-form__submit { cursor: pointer; min-height: 2.75rem; }
.agile-form--notify { grid-template-columns: 1fr; }
@media (min-width: 720px) {
	.agile-form--notify { max-width: 48rem; grid-template-columns: 1fr 1fr auto; align-items: end; }
	.agile-form--notify .agile-form__summary, .agile-form--notify .agile-form__note { grid-column: 1 / -1; }
}

/* Honeypot: clipped like .sr-only where it stands (security.md), never moved off-screen. */
.agile-form .hp { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

/* "Tell us in a few words" shows only when "Something else" is chosen (forms.md pattern 7). Without :has(), it stays visible. */
@supports selector(:has(*)) {
	.agile-form .agile-form__field--conditional { display: none; }
	.agile-form:has(select[name="agile_reason"] option[value="other"]:checked) .agile-form__field--conditional { display: grid; }
}