/**
 * Pop Commerce builder: pc-fields.css (R5).
 * Contract: docs/forms-builder/F2-contracts.md sections 3.5, 5.1, 5.8.
 * Variables (defaults = legacy): --pc-err-offset/size/color, --pc-ico-right/valid/invalid,
 * --pc-spinner-color, --pc-hover-overlay, --pc-active-overlay, --pc-ck-*, --pc-link-color.
 */

/* Field wrapper (email, phone, field_text, consent, survey). */
:where(.pc-field) {
	position: relative;
}

:where(.pc-input) {
	display: block;
	width: 100%;
	max-width: 100%;
	transition: border 0.3s, background 0.3s;
}

:where(.pc-input::placeholder) {
	opacity: 1;
}

/* Validation icons, only direct children of a field (close X, chevrons, ms icons, bar icon stay untouched). Legacy: 20x20, top 9, right 15). */
:where(.pc-field > .pc-ico) {
	display: none;
	position: absolute;
	top: 9px;
	right: var(--pc-ico-right, 15px);
	width: 20px;
	height: 20px;
	fill: currentcolor;
	pointer-events: none;
}

:where(.pc-field > .pc-ico-valid) {
	color: var(--pc-ico-valid, #4caf50);
}

:where(.pc-field > .pc-ico-invalid) {
	color: var(--pc-ico-invalid, #ff4949);
}

:where(.pc-field.is-valid > .pc-ico-valid, .pc-field.is-invalid > .pc-ico-invalid) {
	display: block;
}

/* Field error: visible when invalid and not focused. */
:where(.pc-field-error) {
	display: none;
	position: absolute;
	bottom: var(--pc-err-offset, -3px);
	left: 0;
	margin: 0;
	padding: 0;
	font-size: var(--pc-err-size, 13px);
	font-family: var(--pc-err-font, inherit);
	color: var(--pc-err-color, #ff0000);
}

:where(.pc-field.is-invalid:not(:focus-within) > .pc-field-error) {
	display: block;
}

/* Consent checkbox. */
:where(.pc-consent) {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

:where(.pc-ck) {
	position: relative;
	flex-shrink: 0;
	width: var(--pc-ck-size, 18px);
	height: var(--pc-ck-size, 18px);
	margin: 0;
	border: 1px solid var(--pc-ck-border, #767676);
	border-radius: 3px;
	background: var(--pc-ck-bg, #ffffff);
	cursor: pointer;
	appearance: none;
}

:where(.pc-ck)::after {
	content: "";
	display: none;
	position: absolute;
	top: 10%;
	left: 32%;
	width: 30%;
	height: 56%;
	border: solid var(--pc-ck-check, #000000);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

:where(.pc-ck:checked)::after {
	display: block;
}

:where(.pc-consent-text) {
	flex: 1;
	min-width: 0;
}

:where(.pc-consent-text a) {
	color: var(--pc-link-color, inherit);
	text-decoration: underline;
}

/* Button overlay (hover, active) and loading spinner. */
:where(.pc-b-button:hover:not(:disabled))::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--pc-hover-overlay, rgb(255 255 255 / 14%));
	transition: all 0.2s ease;
	pointer-events: none;
}

:where(.pc-b-button:active:not(:disabled))::after {
	background: var(--pc-active-overlay, rgb(0 0 0 / 5%));
}

:where(.pc-b-button.is-loading)::after {
	content: "";
	position: absolute;
	inset: auto;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid rgb(255 255 255 / 30%);
	border-top-color: var(--pc-spinner-color, #ffffff);
	border-radius: 50%;
	background: none;
	animation: pcSpin 0.8s linear infinite;
}

/* Reduced motion: no geometric transitions; spinner slowed, not stopped (F7-D15, F7-D43). */
@media (prefers-reduced-motion: reduce) {
	:where(.pc-b-button:hover:not(:disabled))::after {
		transition-property: color, background-color, border-color, box-shadow, opacity;
	}

	:where(.pc-b-button.is-loading)::after {
		animation-duration: 1.6s;
	}
}