/* Casalingo Product Options — front-end option fields, styled with the
   theme's design tokens (tokens.css is enqueued site-wide). RTL via logical
   properties. */

.cpo-fields { margin-block: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; }

.cpo-field { border: 0; padding: 0; margin: 0; min-width: 0; }

.cpo-legend {
	padding: 0;
	margin-bottom: var(--sp-2);
	font-weight: var(--fw-body-medium);
	color: var(--color-text);
	font-size: var(--fs-small);
}
.cpo-req { color: var(--cl-terracotta, var(--color-primary)); }
.cpo-hint { color: var(--cl-ink-faint); font-weight: var(--fw-body); font-size: var(--fs-xs); }

/* checkbox / radio rows */
.cpo-option-row {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	cursor: pointer;
	margin-bottom: var(--sp-2);
	transition: border-color .12s ease, background .12s ease;
}
.cpo-option-row:hover { border-color: var(--cl-ink-faint); }
.cpo-option-row input { accent-color: var(--cl-saffron, var(--color-accent)); margin: 0; inline-size: 1.1em; block-size: 1.1em; }
.cpo-option-row:has(input:checked) {
	border-color: var(--cl-saffron, var(--color-accent));
	background: var(--cl-saffron-light, var(--color-surface));
}
.cpo-opt-label { flex: 1; color: var(--color-text); font-size: var(--fs-small); }
.cpo-opt-price { color: var(--cl-ink-faint); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

/* dropdown */
.cpo-select {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--color-text);
	background: var(--color-surface);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--sp-3) var(--sp-4);
	cursor: pointer;
}