/* ==========================================================================
   Contact Form widget — ported from pestcontrolgroupusa_core_old
   (components.css .contact__form*, responsive.css "contact form 2-col
   fields" @640px block). Field markup/classes are new (this widget's
   fields are dynamic, the original's were fixed), but every visual value
   below — radii, padding, colors, breakpoints — matches the original
   .contact__form design exactly. The only intentional visual departure
   from the original is the submit button, upgraded from the original's
   flat "ghost" button to the site's established solid-brand CTA look
   (same --gradient-call/--shadow-call tokens used by .cta-call and the
   Emergency CTA button) per explicit request for a more prominent button.
   ---- */

.pcgu-contact-form {
	border-radius: var(--radius-3xl);
	border: 1px solid var(--border);
	background-color: var(--card);
	padding: 1.5rem;
	box-shadow: var(--shadow-lift);
}

.pcgu-contact-form__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--foreground);
}
.pcgu-contact-form__subtitle {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

.pcgu-contact-form__grid {
	margin-top: 1.25rem;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
}

.pcgu-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: 0.875rem;
	grid-column: span 12;
}
.pcgu-contact-form__field--w-100 { grid-column: span 12; }
.pcgu-contact-form__field--w-75,
.pcgu-contact-form__field--w-66,
.pcgu-contact-form__field--w-50,
.pcgu-contact-form__field--w-33,
.pcgu-contact-form__field--w-25 { grid-column: span 12; }

.pcgu-contact-form__field-label {
	font-weight: 500;
	color: var(--foreground);
}

.pcgu-contact-form__field-input {
	width: 100%;
	border-radius: var(--radius-xl);
	border: 1px solid var(--input);
	background-color: var(--background);
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	font-family: inherit;
	color: var(--foreground);
	outline: none;
	transition: border-color 200ms, box-shadow 200ms;
}
.pcgu-contact-form__field-input::placeholder {
	color: var(--muted-foreground);
	opacity: 1;
}
.pcgu-contact-form__field-input:focus {
	border-color: var(--secondary);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--secondary) 15%, transparent);
}
.pcgu-contact-form__field-input.is-invalid {
	border-color: color-mix(in oklab, #dc2626 65%, var(--input));
}
select.pcgu-contact-form__field-input {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 1rem;
	padding-right: 2.5rem;
}

.pcgu-contact-form__field-textarea {
	resize: vertical;
	min-height: 110px;
}

.pcgu-contact-form__options {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.125rem;
}
.pcgu-contact-form__checkbox-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--foreground);
	cursor: pointer;
}
.pcgu-contact-form__checkbox-option input {
	accent-color: var(--secondary);
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.pcgu-contact-form__help {
	margin: 0;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}

.pcgu-contact-form__field-error {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: #dc2626;
}
.pcgu-contact-form__field-error:empty {
	display: none;
}

.pcgu-contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Submit button — intentionally upgraded from the original's flat
   "ghost" button to the site's established solid-brand CTA treatment
   (same tokens as .cta-call / Emergency CTA button) for stronger
   visual prominence, per explicit request. ---- */
.pcgu-contact-form__submit {
	margin-top: 1.25rem;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	border: none;
	border-radius: var(--radius-2xl);
	background-image: var(--gradient-call);
	padding: 0.875rem;
	text-align: center;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--primary-foreground);
	box-shadow: var(--shadow-call);
	cursor: pointer;
	transition: transform 300ms, filter 300ms, box-shadow 300ms;
}
.pcgu-contact-form__submit:hover {
	transform: scale(1.02);
	filter: brightness(1.08);
}
.pcgu-contact-form__submit:active {
	transform: scale(0.99);
}
.pcgu-contact-form__submit:disabled {
	cursor: not-allowed;
	opacity: 0.75;
	transform: none;
}
.js-pcgu-contact-form.is-submitting .pcgu-contact-form__submit-text {
	visibility: hidden;
}
.js-pcgu-contact-form.is-submitting .pcgu-contact-form__submit {
	position: relative;
}
.js-pcgu-contact-form.is-submitting .pcgu-contact-form__submit::after {
	content: "";
	position: absolute;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	border: 2px solid color-mix(in oklab, var(--primary-foreground) 35%, transparent);
	border-top-color: var(--primary-foreground);
	animation: pcgu-contact-form-spin 700ms linear infinite;
}
@keyframes pcgu-contact-form-spin {
	to { transform: rotate(360deg); }
}

.pcgu-contact-form__notice {
	margin-top: 1rem;
	border-radius: var(--radius-xl);
	padding: 0.875rem 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
}
.pcgu-contact-form__notice[hidden] {
	display: none !important;
}
.pcgu-contact-form__notice--success {
	color: #15803d;
	background-color: color-mix(in oklab, #22c55e 14%, transparent);
}
.pcgu-contact-form__notice--error {
	color: #b91c1c;
	background-color: color-mix(in oklab, #ef4444 12%, transparent);
}

/* ---- Responsive — matches the original's exact sm:640px "2-col fields,
   wide spans 2" breakpoint (independent of the outer .contact__grid's own
   1024px breakpoint, ported as-is in this widget's parent layout). ---- */
@media (min-width: 640px) {
	.pcgu-contact-form__field--w-75 { grid-column: span 9; }
	.pcgu-contact-form__field--w-66 { grid-column: span 8; }
	.pcgu-contact-form__field--w-50 { grid-column: span 6; }
	.pcgu-contact-form__field--w-33 { grid-column: span 4; }
	.pcgu-contact-form__field--w-25 { grid-column: span 3; }
}