/* Woo Product Order Fields — lightweight storefront UI */
.wpof-product-fields,
.wpof-checkout-fields {
	--wpof-border: color-mix(in srgb, currentColor 14%, transparent);
	--wpof-bg: color-mix(in srgb, currentColor 4%, transparent);
	--wpof-focus: #2563eb;
	--wpof-err: #b42318;
	--wpof-radius: 10px;
	margin: 0 0 1.15em;
	clear: both;
	direction: inherit;
}

.wpof-panel {
	border: 1px solid var(--wpof-border, rgba(0, 0, 0, 0.1));
	background: var(--wpof-bg, rgba(0, 0, 0, 0.02));
	border-radius: var(--wpof-radius);
	padding: 0.9em 1em 1em;
}

.wpof-panel__head {
	font-weight: 600;
	font-size: 0.95em;
	margin: 0 0 0.75em;
	letter-spacing: 0;
}

.wpof-checkout-fields {
	border: 1px solid var(--wpof-border, rgba(0, 0, 0, 0.1));
	background: var(--wpof-bg, rgba(0, 0, 0, 0.02));
	border-radius: var(--wpof-radius);
	padding: 1em 1.1em 1.15em;
	margin: 1.25em 0;
}

.wpof-checkout-title {
	margin: 0 0 0.35em;
	font-size: 1.05em;
	font-weight: 700;
}

.wpof-checkout-desc {
	margin: 0 0 0.9em;
	opacity: 0.85;
	font-size: 0.9em;
	line-height: 1.5;
}

.wpof-checkout-line + .wpof-checkout-line {
	margin-top: 1em;
	padding-top: 0.9em;
	border-top: 1px solid var(--wpof-border, rgba(0, 0, 0, 0.08));
}

.wpof-checkout-product {
	font-weight: 600;
	margin: 0 0 0.65em;
	font-size: 0.92em;
}

.wpof-field {
	margin: 0 0 0.85em;
}

.wpof-field:last-child {
	margin-bottom: 0;
}

.wpof-label {
	display: block;
	font-weight: 600;
	margin: 0 0 0.4em;
	font-size: 0.92em;
	line-height: 1.35;
}

.wpof-req {
	color: var(--wpof-err);
	font-weight: 700;
	margin-inline-start: 0.15em;
}

.wpof-input {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wpof-border, rgba(0, 0, 0, 0.14));
	border-radius: 8px;
	padding: 0.55em 0.75em;
	min-height: 2.5em;
	background: #fff;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpof-input:focus {
	outline: none;
	border-color: var(--wpof-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpof-focus) 22%, transparent);
}

.wpof-input--invalid {
	border-color: var(--wpof-err) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpof-err) 15%, transparent);
}

textarea.wpof-input {
	min-height: 4.5em;
	resize: vertical;
}

select.wpof-input {
	appearance: auto;
	cursor: pointer;
}

.wpof-help {
	display: block;
	margin-top: 0.35em;
	opacity: 0.78;
	font-size: 0.86em;
	line-height: 1.45;
}

.wpof-error {
	display: block;
	margin-top: 0.35em;
	color: var(--wpof-err);
	font-size: 0.86em;
	line-height: 1.4;
	font-weight: 500;
}

.wpof-error[hidden] {
	display: none !important;
}

.wpof-radio-group {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.wpof-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.45em;
	font-weight: 400;
	margin: 0;
	cursor: pointer;
	line-height: 1.4;
}

.wpof-choice input {
	margin-top: 0.2em;
	flex-shrink: 0;
}

/* Fallback when color-mix unsupported */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.wpof-panel,
	.wpof-checkout-fields {
		border-color: #e5e7eb;
		background: #f9fafb;
	}
	.wpof-input {
		border-color: #d1d5db;
	}
	.wpof-input:focus {
		box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
	}
}