/**
 * Prezzo Libero per WooCommerce — base stylesheet.
 *
 * Design goals: neutral, minimal, inherits the theme's font and text colour, never
 * fights the theme's button. Colours and radius come from the --wfp-* custom
 * properties emitted by the settings screen (WooCommerce > Impostazioni > Prodotti
 * > Prezzo libero), so they stay overridable from a child theme or Elementor.
 */

.wfp-form {
	/* Fallbacks, used when no setting has been saved yet. */
	--wfp-accent: #2563eb;
	--wfp-field-bg: #ffffff;
	--wfp-field-border: #dfe3e8;
	--wfp-card-bg: #ffffff;
	--wfp-card-border: #e8ebf0;
	--wfp-radius: 10px;

	box-sizing: border-box;
	margin: 0 0 1em;
	/* Compact box: 100% of a wide column felt too big. On narrow screens the
	   parent column is smaller than this cap, so mobile keeps a full-width box. */
	max-width: 24em;
	color: inherit;
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: left;
}

.wfp-form *,
.wfp-form *::before,
.wfp-form *::after {
	box-sizing: border-box;
}

.wfp-card {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1em;
	background: var(--wfp-card-bg);
	border: 1px solid var(--wfp-card-border);
	border-radius: var(--wfp-radius);
	padding: 0.85em 1em;
}

.wfp-form--plain .wfp-card {
	background: transparent;
	border: 0;
	padding: 0;
}

.wfp-row {
	display: flex;
	align-items: center;
	gap: 0.75em;
	flex: 1 1 13em;
	min-width: 0;
	margin: 0;
}

.wfp-row--amount {
	justify-content: space-between;
}

.wfp-label {
	font-weight: 500;
}

.wfp-row--amount .wfp-label {
	flex: 1 1 auto;
	min-width: 0;
}

/* Two-class selector on purpose: themes commonly set `width: 100%` on
   `input[type=…]` (seen on the ABE site: the9-store crushed the label), and that
   outranks a bare `.wfp-input`; the extra `.wfp-form` keeps the compact size and
   the plugin's field look in control. Restyle via the custom CSS field instead. */
.wfp-form .wfp-input {
	flex: 0 0 auto;
	/* Sized for at most 8 characters (e.g. "99999,99"): the 8ch track holds the
	   digits, the em part is the horizontal padding + border. Longer values scroll
	   inside the field, as text inputs normally do. */
	width: calc(8ch + 1.75em);
	max-width: 100%;
	padding: 0.5em 0.65em;
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: inherit;
	background: var(--wfp-field-bg);
	border: 1px solid var(--wfp-field-border);
	border-radius: max(0px, calc(var(--wfp-radius) - 4px));
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wfp-form .wfp-input:focus {
	outline: 0;
	border-color: var(--wfp-accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wfp-accent) 20%, transparent);
}

.wfp-form .wfp-input.is-invalid {
	border-color: #b32d2e;
}

.wfp-hint {
	margin: 0.45em 0 0;
	font-size: 0.82em;
	opacity: 0.72;
}

.wfp-error {
	margin: 0.45em 0 0;
	font-size: 0.85em;
	color: #b32d2e;
}

.wfp-error[hidden] {
	display: none;
}

@media (max-width: 480px) {
	.wfp-row--amount {
		flex-wrap: wrap;
	}
}