/* PCFG frontend calculator — minimal, theme-friendly defaults.
   Accent color is merchant-configurable via --pcfg-accent (appearance). */

.pcfg-calculator {
	--pcfg-accent: #2271b1;
	--pcfg-bg: transparent;
	--pcfg-text: inherit;
	--pcfg-label: inherit;
	--pcfg-border: #c3c4c7;
	--pcfg-radius: 4px;
	--pcfg-font-size: 14px;
	--pcfg-max-width: 480px;
	--pcfg-gap: 0.75rem;
	/* Material-like design tokens — every new frontend widget uses these. */
	--pcfg-radius-lg: 12px;
	--pcfg-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
	--pcfg-shadow-2: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
	--pcfg-shadow-3: 0 12px 16px -4px rgba(16, 24, 40, 0.12), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
	max-width: var(--pcfg-max-width);
	display: flex;
	flex-direction: column;
	gap: var(--pcfg-gap);
	background: var(--pcfg-bg);
	color: var(--pcfg-text);
	font-size: var(--pcfg-font-size);
	border-radius: calc(var(--pcfg-radius) * 1.5);
}

/* Merchant-selected spacing scale. */
.pcfg-padding--compact {
	--pcfg-gap: 0.4rem;
	padding: 0.5rem;
}

.pcfg-padding--spacious {
	--pcfg-gap: 1.25rem;
	padding: 1.5rem;
}

/* Merchant-selected elevation. */
.pcfg-shadow--soft {
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.1);
	padding: 1rem;
}

.pcfg-shadow--strong {
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.2);
	padding: 1.25rem;
}

.pcfg-calculator--horizontal {
	max-width: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
}

/* Base vertical rhythm between fields — every layout overrides direction
   or gap as needed (horizontal: row, summary: 1.5rem, width flow: row). */
.pcfg-calculator__fields {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--pcfg-gap, 0.75rem);
}

.pcfg-calculator--horizontal .pcfg-calculator__fields {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
}

.pcfg-calculator__title {
	margin: 0 0 0.25rem;
}

.pcfg-calculator__errors {
	padding: 0.5rem 0.75rem;
	border-inline-start: 3px solid #cc1818;
	background: rgba(204, 24, 24, 0.06);
	color: #cc1818;
	font-size: 0.9em;
}

.pcfg-field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* The conditions engine hides fields via the hidden attribute; the flex
   rule above must not win over the UA's [hidden] { display: none }. */
.pcfg-field[hidden] {
	display: none;
}

.pcfg-field__label {
	flex: 1 1 100%;
	font-weight: var(--pcfg-label-weight, 600);
	color: var(--pcfg-label-color, var(--pcfg-label));
	font-size: var(--pcfg-label-size, 1em);
}

.pcfg-field__required {
	color: #cc1818;
}

.pcfg-input {
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--pcfg-input-border, var(--pcfg-border));
	border-radius: var(--pcfg-input-radius, var(--pcfg-radius));
	background: var(--pcfg-input-bg, field);
	color: var(--pcfg-input-text, var(--pcfg-text));
	min-width: 8rem;
	font-size: inherit;
}

.pcfg-input:focus {
	border-color: var(--pcfg-accent);
	outline: none;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--pcfg-accent) 25%, transparent);
}

.pcfg-input--range {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
}

.pcfg-input__unit,
.pcfg-input__value {
	color: #50575e;
	font-size: 0.9em;
}

.pcfg-input__unit-select {
	padding: 0.4rem;
	border: 1px solid var(--pcfg-input-border, var(--pcfg-border));
	border-radius: var(--pcfg-input-radius, var(--pcfg-radius));
	background: var(--pcfg-input-bg, field);
	color: var(--pcfg-input-text, var(--pcfg-text));
}

.pcfg-choices {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.pcfg-choice {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 400;
}

.pcfg-choices input {
	accent-color: var(--pcfg-choice-selected, var(--pcfg-accent));
}

.pcfg-calculator input[type="range"] {
	accent-color: var(--pcfg-slider-color, var(--pcfg-accent));
}

/* Style variants (checkbox/radio: default | button | card). The native
   input stays in the DOM (forms + frontend JS unchanged) but is hidden;
   the sibling span becomes the visible, clickable control. */
.pcfg-choices--style-button,
.pcfg-choices--style-card {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pcfg-choices--style-button .pcfg-choice,
.pcfg-choices--style-card .pcfg-choice {
	position: relative;
}

.pcfg-choices--style-button .pcfg-choice input,
.pcfg-choices--style-card .pcfg-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pcfg-choices--style-button .pcfg-choice span {
	display: inline-block;
	padding: 0.45rem 1rem;
	border: 1px solid var(--pcfg-choice-border, var(--pcfg-border));
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pcfg-choices--style-button .pcfg-choice input:checked + span {
	background: var(--pcfg-choice-selected, var(--pcfg-accent));
	border-color: var(--pcfg-choice-selected, var(--pcfg-accent));
	color: #fff;
}

.pcfg-choices--style-card .pcfg-choice {
	flex: 1 1 9rem;
}

.pcfg-choices--style-card .pcfg-choice span {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--pcfg-choice-border, var(--pcfg-border));
	border-radius: var(--pcfg-radius);
	text-align: center;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pcfg-choices--style-card .pcfg-choice input:checked + span {
	border-color: var(--pcfg-choice-selected, var(--pcfg-accent));
	box-shadow: inset 0 0 0 1px var(--pcfg-choice-selected, var(--pcfg-accent));
	color: var(--pcfg-choice-selected, var(--pcfg-accent));
	font-weight: 600;
}

.pcfg-choices--style-button .pcfg-choice input:focus-visible + span,
.pcfg-choices--style-card .pcfg-choice input:focus-visible + span {
	outline: 2px solid var(--pcfg-accent);
	outline-offset: 2px;
}

.pcfg-toggle input {
	position: absolute;
	opacity: 0;
}

.pcfg-toggle__track {
	display: inline-block;
	width: 2.4rem;
	height: 1.3rem;
	border-radius: 1.3rem;
	background: #c3c4c7;
	position: relative;
	transition: background 0.15s ease;
	cursor: pointer;
}

.pcfg-toggle__track::after {
	content: "";
	position: absolute;
	top: 0.15rem;
	left: 0.15rem;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
}

.pcfg-toggle input:checked + .pcfg-toggle__track {
	background: var(--pcfg-choice-selected, var(--pcfg-accent));
}

.pcfg-toggle input:checked + .pcfg-toggle__track::after {
	transform: translateX(1.1rem);
}

/* Toggle 'checkbox' variant: plain accent-colored checkbox, no track. */
.pcfg-toggle--checkbox input {
	position: static;
	opacity: 1;
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--pcfg-choice-selected, var(--pcfg-accent));
	cursor: pointer;
}

.pcfg-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	/* --pcfg-total-hpad is only emitted when a background is set. */
	padding: 0.75rem var(--pcfg-total-hpad, 0rem) var(--pcfg-total-hpad, 0rem);
	border-top: 1px solid var(--pcfg-border);
	border-radius: var(--pcfg-radius);
	background: var(--pcfg-total-bg, transparent);
	color: var(--pcfg-total-text, var(--pcfg-text));
	font-size: var(--pcfg-total-size, 1.15em);
}

.pcfg-total__amount {
	font-weight: 700;
	color: var(--pcfg-total-amount, var(--pcfg-accent));
}

/* Plain fallback (no summary card): a compact "Total: X" line. */
.pcfg-total--plain {
	justify-content: flex-start;
	gap: 0.5rem;
}

.pcfg-breakdown {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.15rem 1rem;
	margin: 0;
	font-size: 0.9em;
	color: #50575e;
}

.pcfg-breakdown dt,
.pcfg-breakdown dd {
	margin: 0;
}

/* Wave 5: groups, repeaters, wizard steps. */

.pcfg-group {
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 0.75rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pcfg-group__label {
	font-weight: 600;
	padding: 0 0.35rem;
}

.pcfg-repeater__instances {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
}

.pcfg-repeater__instance {
	position: relative;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
	padding: 0.75rem 2.25rem 0.75rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pcfg-repeater__remove {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	border: 0;
	background: transparent;
	color: #cc1818;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.pcfg-repeater__add {
	align-self: flex-start;
}

.pcfg-page-break {
	border-top: 2px solid var(--pcfg-accent);
	padding-top: 0.5rem;
	width: 100%;
}

.pcfg-page-break__label {
	font-weight: 600;
	color: var(--pcfg-accent);
}

.pcfg-step-hidden {
	display: none !important;
}

.pcfg-wizard-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	padding-top: 0.5rem;
}

.pcfg-wizard-nav__step {
	color: #50575e;
	font-size: 0.9em;
}

/* Wave 6: image choices, date/time, files, validated form. */

.pcfg-image-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pcfg-image-choice input {
	position: absolute;
	opacity: 0;
}

.pcfg-image-choice__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	border: 2px solid var(--pcfg-choice-border, #dcdcde);
	border-radius: var(--pcfg-input-radius, 6px);
	padding: 0.5rem;
	cursor: pointer;
	max-width: 7.5rem;
	transition: border-color 0.15s ease;
}

.pcfg-image-choice__card img {
	width: 100%;
	height: 4.5rem;
	object-fit: cover;
	border-radius: 4px;
}

.pcfg-image-choice input:checked + .pcfg-image-choice__card {
	border-color: var(--pcfg-choice-selected, var(--pcfg-accent));
}

.pcfg-image-choice__label {
	font-size: 0.85em;
	text-align: center;
}

.pcfg-image-dropdown__preview {
	max-height: 3rem;
	border-radius: 4px;
}

.pcfg-multi-range {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1;
}

.pcfg-validated-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}

.pcfg-file-status {
	color: #50575e;
	font-size: 0.9em;
}

.pcfg-formula-value {
	display: flex;
	justify-content: space-between;
	width: 100%;
	color: #50575e;
}

.pcfg-line {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--pcfg-divider-color, #dcdcde);
}

.pcfg-line--dashed {
	border-top-style: dashed;
}

.pcfg-line--dotted {
	border-top-style: dotted;
}

.pcfg-html {
	width: 100%;
}

/* Wave 7: promo + quote request. */

.pcfg-promo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pcfg-promo__status--valid {
	color: #00a32a;
	font-size: 0.9em;
}

.pcfg-promo__status--invalid {
	color: #cc1818;
	font-size: 0.9em;
}

.pcfg-submit__button,
.pcfg-modal__add,
.pcfg-modal__open,
.pcfg-wizard-nav__prev,
.pcfg-wizard-nav__next {
	background: var(--pcfg-button-bg, var(--pcfg-accent));
	border: 0;
	color: var(--pcfg-button-text, #fff);
	border-radius: var(--pcfg-button-radius, 999px);
	padding: 0.55rem 1.4rem;
	cursor: pointer;
	box-shadow: var(--pcfg-shadow-1);
	transition: all 0.15s ease;
}

.pcfg-submit__button:hover,
.pcfg-modal__add:hover:not(:disabled),
.pcfg-modal__open:hover,
.pcfg-wizard-nav__prev:hover,
.pcfg-wizard-nav__next:hover {
	box-shadow: var(--pcfg-shadow-2);
	transform: translateY(-1px);
	filter: brightness(1.05);
}

.pcfg-modal__add:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: none;
}

.pcfg-confirmation {
	padding: 0.75rem;
	border-inline-start: 3px solid #00a32a;
	background: rgba(0, 163, 42, 0.07);
}

/* Wave 10: sticky calculator. */

.pcfg-sticky--left .pcfg-sticky__button,
.pcfg-sticky--left .pcfg-sticky__panel {
	right: auto;
	left: 1.25rem;
}

.pcfg-sticky__button {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 9998;
	padding: 0.7rem 1.2rem;
	border: 0;
	border-radius: 2rem;
	background: var(--pcfg-accent, #2271b1);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.pcfg-sticky__panel {
	position: fixed;
	right: 1.25rem;
	bottom: 4.5rem;
	z-index: 9999;
	width: min(420px, calc(100vw - 2.5rem));
	max-height: min(80vh, 640px);
	overflow: auto;
	background: #fff;
	border-radius: 8px;
	padding: 1.25rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.pcfg-sticky__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	border: 0;
	background: transparent;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: #50575e;
}

/* Design editor (zoom/pan/crop). */
.pcfg-designer {
	width: 100%;
}

.pcfg-designer__strip {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.pcfg-designer__swatch {
	border: 2px solid var(--pcfg-choice-border, transparent);
	border-radius: var(--pcfg-input-radius, var(--pcfg-radius-lg));
	background: var(--pcfg-input-bg, #fff);
	padding: 0.3rem;
	cursor: pointer;
	width: 78px;
	font-size: 0.7em;
	overflow: hidden;
	box-shadow: var(--pcfg-shadow-1);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pcfg-designer__swatch:hover {
	transform: translateY(-2px);
	box-shadow: var(--pcfg-shadow-2);
}

.pcfg-designer__swatch img {
	width: 100%;
	height: 48px;
	object-fit: cover;
	border-radius: calc(var(--pcfg-radius) / 2);
	display: block;
}

.pcfg-designer__swatch span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pcfg-designer__swatch.is-active {
	border-color: var(--pcfg-choice-selected, var(--pcfg-accent));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcfg-choice-selected, var(--pcfg-accent)) 22%, transparent), var(--pcfg-shadow-2);
}

.pcfg-designer__stage {
	position: relative;
	width: 100%;
	height: 300px;
	/* Merchant-overridable per field (styles.editor_bg → --pcfg-designer-bg). */
	background: var(--pcfg-designer-bg, linear-gradient(160deg, #111827, #1f2937));
	border-radius: var(--pcfg-radius-lg);
	overflow: hidden;
	touch-action: none;
	cursor: grab;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), var(--pcfg-shadow-2);
}

.pcfg-designer__stage:active {
	cursor: grabbing;
}

.pcfg-designer__viewport,
/* Woo core's `.woocommerce img { max-width:100% }` (0,1,1) collapses an
   SVG pattern without intrinsic size to 0 width on product pages — the
   editor sizes this image explicitly via inline styles, so the compound
   selector below must outrank the Woo reset. */
.pcfg-designer img.pcfg-designer__img {
	max-width: none;
	max-height: none;
}

.pcfg-designer__img {
	position: absolute;
	user-select: none;
	-webkit-user-drag: none;
}

.pcfg-designer__frame {
	position: absolute;
	border: 2px solid var(--pcfg-accent);
	border-radius: 3px;
	box-shadow: 0 0 0 9999px rgba(17, 24, 39, 0.62), 0 0 24px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	transition: box-shadow 0.2s ease;
}

.pcfg-designer__handle {
	position: absolute;
	right: -9px;
	bottom: -9px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pcfg-accent);
	border: 2px solid #fff;
	cursor: nwse-resize;
	pointer-events: auto;
	box-shadow: var(--pcfg-shadow-2);
	transition: transform 0.12s ease;
}

.pcfg-designer__handle:hover {
	transform: scale(1.2);
}

/* The tools card + its buttons follow the field's INPUT style vocabulary
   (input_bg / input_border / input_radius), falling back to the accent-
   tinted pill look — same knobs that style the swatch strip. */
.pcfg-designer__tools {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.6rem;
	flex-wrap: wrap;
	background: var(--pcfg-input-bg, color-mix(in srgb, var(--pcfg-accent) 5%, #fff));
	border: 1px solid var(--pcfg-input-border, color-mix(in srgb, var(--pcfg-accent) 14%, transparent));
	/* Default matches the editor stage's corner radius. */
	border-radius: var(--pcfg-input-radius, var(--pcfg-radius-lg));
	padding: 0.4rem 0.75rem;
	box-shadow: var(--pcfg-shadow-1);
}

.pcfg-designer__zoom {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: 1;
	min-width: 160px;
	font-size: 0.9em;
}

.pcfg-designer__status {
	font-size: 0.85em;
	color: #50575e;
}

/* Product-page modal ("Customize" flow). */
/* The host sits outside .pcfg-calculator (which carries the merchant
   CSS variables) — give it a resolvable accent default; ProductBinding
   hoists the configured accent inline. */
.pcfg-modal-host {
	--pcfg-accent: #2271b1;
}

/* Woo core ships `.woocommerce div.product form.cart button.single_add_
   to_cart_button { display:inline-block }` (0,4,3) — the extra selectors
   below outrank it so modal mode really hides the native controls. */
form.cart.pcfg-has-modal .single_add_to_cart_button,
form.cart.pcfg-has-modal .quantity,
.woocommerce div.product form.cart.pcfg-has-modal button.single_add_to_cart_button,
.woocommerce div.product form.cart.pcfg-has-modal div.quantity {
	display: none;
}

.pcfg-modal__summary {
	margin-inline-start: 0.75rem;
	font-weight: 700;
	color: var(--pcfg-accent, #2271b1);
}

.pcfg-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(17, 24, 39, 0.6);
	backdrop-filter: blur(3px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.pcfg-modal[hidden] {
	display: none;
}

@keyframes pcfg-modal-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.pcfg-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: 16px;
	animation: pcfg-modal-in 0.22s ease;
	max-width: 720px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 1.5rem 1.5rem 0;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.pcfg-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	border: 0;
	background: transparent;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: #6b7280;
}

.pcfg-modal__footer {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: #fff;
	border-top: 1px solid #e5e7eb;
	padding: 0.9rem 0;
	margin-top: 1rem;
}

.pcfg-modal__total {
	font-size: 1.25em;
	font-weight: 700;
	color: var(--pcfg-accent, #2271b1);
}

body.pcfg-modal-open {
	overflow: hidden;
}

.pcfg-designer__lock {
	border: 1px solid var(--pcfg-input-border, var(--pcfg-border));
	background: var(--pcfg-input-bg, #fff);
	color: var(--pcfg-input-text, inherit);
	border-radius: var(--pcfg-input-radius, 999px);
	padding: 0.35rem 0.9rem;
	cursor: pointer;
	font-size: 0.85em;
	transition: all 0.15s ease;
	box-shadow: var(--pcfg-shadow-1);
}

.pcfg-designer__lock:hover {
	border-color: var(--pcfg-accent);
	transform: translateY(-1px);
	box-shadow: var(--pcfg-shadow-2);
}

.pcfg-designer__lock.is-locked {
	background: var(--pcfg-accent);
	border-color: var(--pcfg-accent);
	color: #fff;
}

.pcfg-designer__save {
	background: var(--pcfg-accent) !important;
	border: 0 !important;
	color: #fff !important;
	border-radius: var(--pcfg-input-radius, 999px) !important;
	padding: 0.4rem 1.1rem !important;
	cursor: pointer;
	box-shadow: var(--pcfg-shadow-1);
	transition: all 0.15s ease;
}

.pcfg-designer__save:hover {
	box-shadow: var(--pcfg-shadow-2);
	transform: translateY(-1px);
	filter: brightness(1.05);
}

/* Roll strip guides in the design editor. */
.pcfg-designer__strips {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.pcfg-designer__stripline {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 1px dashed rgba(163, 230, 53, 0.95);
}

.pcfg-designer__stripcaption {
	position: absolute;
	top: 4px;
	right: 6px;
	background: rgba(17, 24, 39, 0.7);
	color: #a3e635;
	font-size: 11px;
	padding: 1px 6px;
	border-radius: 4px;
}

/* ft + in compound dimension input. */
.pcfg-ftin {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.pcfg-input--ftin {
	min-width: 4.5rem;
	width: 4.5rem;
}

/* Sales mode bar (admin preview). */
.pcfg-sales__bar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	background: #fef3c7;
	border: 1px solid #fde68a;
	border-radius: var(--pcfg-radius-lg, 12px);
	padding: 0.7rem 1rem;
	margin-bottom: 1rem;
	box-shadow: var(--pcfg-shadow-1, 0 1px 2px rgba(16, 24, 40, 0.06));
}

.pcfg-sales__bar input[type="email"] {
	flex: 1;
	min-width: 220px;
}

.pcfg-sales__bar a {
	font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Receipt-style summary layout (appearance.layout = 'summary')
 * Fields on the left, a sticky live summary card on the right. The
 * card follows the PCFG Material language: accent top ribbon, soft
 * dividers, pill total — deliberately our own look, driven by the
 * merchant's --pcfg-* tokens.
 * ------------------------------------------------------------------ */
.pcfg-calculator--summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
	gap: 24px;
	align-items: start;
	/* Centered, capped canvas on a soft accent-tinted backdrop — the two
	   cards read as one composition instead of drifting apart. */
	--pcfg-max-width: 1080px;
	max-width: var(--pcfg-max-width);
	margin-left: auto;
	margin-right: auto;
	background: color-mix(in srgb, var(--pcfg-accent) 5%, #fff);
	border-radius: var(--pcfg-radius-lg);
	padding: 24px;
}

.pcfg-calculator--summary .pcfg-calculator__title,
.pcfg-calculator--summary .pcfg-calculator__errors {
	grid-column: 1 / -1;
}

.pcfg-calculator--summary .pcfg-calculator__title {
	margin: 0 0 4px;
}

/* The form itself becomes a white card so the tinted canvas shows around it. */
.pcfg-calculator--summary .pcfg-calculator__main {
	background: #fff;
	border-radius: var(--pcfg-radius-lg);
	box-shadow: var(--pcfg-shadow-1);
	padding: 1.4rem;
}

.pcfg-calculator--summary .pcfg-calculator__fields {
	/* The base container is a plain block — make it a column so the gap
	   actually applies, and give sections room to breathe. */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.5rem;
}

.pcfg-calculator--summary .pcfg-field {
	row-gap: 0.45rem;
}

.pcfg-calculator--summary .pcfg-field__label {
	flex-basis: 100%;
	margin-bottom: 0.1rem;
}

.pcfg-summary {
	position: sticky;
	top: 24px;
	background: var(--pcfg-summary-bg, var(--pcfg-bg, #fff));
	color: var(--pcfg-summary-text, inherit);
	border-radius: var(--pcfg-summary-radius, var(--pcfg-radius-lg));
	box-shadow: var(--pcfg-shadow-2);
	overflow: hidden;
	/* Accent ribbon: our signature, not a table header. */
	border-top: 3px solid var(--pcfg-summary-border, var(--pcfg-accent));
}

/* Inline summary element (D26): the same receipt card dropped into the
   form flow — no stickiness, full row width. */
.pcfg-field--summary {
	display: block;
}

.pcfg-summary--inline {
	position: static;
	top: auto;
	width: 100%;
	box-shadow: var(--pcfg-shadow-1);
}

.pcfg-summary__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1rem 0.6rem;
}

.pcfg-summary__title {
	font-weight: 700;
	font-size: 1.05em;
	color: var(--pcfg-summary-title, var(--pcfg-text, #1d2327));
}

.pcfg-summary__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--pcfg-accent);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.pcfg-summary__toggle:hover {
	background: color-mix(in srgb, var(--pcfg-accent) 12%, transparent);
}

.pcfg-summary--collapsed .pcfg-summary__toggle svg {
	transform: rotate(-90deg);
}

.pcfg-summary__toggle svg {
	transition: transform 0.15s ease;
}

.pcfg-summary--collapsed [data-pcfg-summary-body] {
	display: none;
}

.pcfg-summary__body {
	padding: 0 1rem 1rem;
}

.pcfg-summary__lines {
	display: flex;
	flex-direction: column;
}

.pcfg-summary__line {
	padding: 0.5rem 0.4rem;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.pcfg-summary__line + .pcfg-summary__line {
	border-top: 1px dashed var(--pcfg-divider-color, #e3e5e8);
}

.pcfg-summary__line:hover {
	background: color-mix(in srgb, var(--pcfg-accent) 6%, transparent);
}

.pcfg-summary__line-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
}

.pcfg-summary__line-label {
	color: var(--pcfg-label, #50575e);
	font-size: 0.92em;
	min-width: 0;
}

.pcfg-summary__line-value {
	color: var(--pcfg-text, #1d2327);
	font-size: 0.92em;
	text-align: end;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pcfg-summary__line-value--amount {
	font-weight: 600;
	color: var(--pcfg-summary-amount, var(--pcfg-accent));
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pcfg-summary__line-sub {
	color: #787c82;
	font-size: 0.82em;
	padding-inline-start: 0.15rem;
	margin-top: 0.1rem;
}

.pcfg-summary__line-sub--math {
	font-variant-numeric: tabular-nums;
}

.pcfg-summary__child {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin-top: 0.3rem;
	font-size: 0.82em;
	color: #50575e;
}

.pcfg-summary__chip {
	flex: none;
	background: color-mix(in srgb, var(--pcfg-accent) 12%, transparent);
	color: var(--pcfg-accent);
	border-radius: 999px;
	padding: 0 0.5em;
	font-weight: 600;
	font-size: 0.9em;
	line-height: 1.6;
}

.pcfg-summary__line--discount .pcfg-summary__line-label,
.pcfg-summary__line--discount .pcfg-summary__line-value {
	color: #1a7f37;
	font-weight: 600;
}

/* Total inside the card becomes the pill-accent closing block. The total
   element ships inside a .pcfg-field flex wrapper — stack it here so the
   amount and breakdown never sit side by side in the narrow card. */
.pcfg-summary .pcfg-field--total {
	display: block;
}

.pcfg-summary .pcfg-total {
	display: flex;
	width: 100%;
	gap: 0.75rem;
	margin-top: 0.6rem;
	border-top: 2px solid var(--pcfg-divider-color, #e3e5e8);
	font-size: var(--pcfg-total-size, 1.2em);
}

.pcfg-summary .pcfg-breakdown {
	width: 100%;
	margin: 0.4rem 0 0;
}

.pcfg-summary .pcfg-promo,
.pcfg-summary .pcfg-payment,
.pcfg-summary .pcfg-submit {
	margin-top: 0.75rem;
}

.pcfg-summary .pcfg-submit__button {
	width: 100%;
}

/* Tapping a summary row flashes the field it explains. */
.pcfg-field--flash {
	animation: pcfg-flash 0.9s ease;
	border-radius: 8px;
}

@keyframes pcfg-flash {
	0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcfg-accent) 35%, transparent); }
	100% { box-shadow: 0 0 0 3px transparent; }
}

/* Modal/sticky context: the panel is narrow — stack to one column. */
.pcfg-modal .pcfg-calculator--summary,
.pcfg-sticky__panel .pcfg-calculator--summary {
	grid-template-columns: 1fr;
}

.pcfg-modal .pcfg-summary,
.pcfg-sticky__panel .pcfg-summary {
	position: static;
}

/* Mobile: single column; the summary card sits below the fields and
   starts collapsed to a tap-to-open total bar. */
@media (max-width: 782px) {
	.pcfg-calculator--summary {
		grid-template-columns: 1fr;
	}

	.pcfg-summary {
		position: static;
	}
}

/* ------------------------------------------------------------------ *
 * D20 field polish: steppers, hints, range scale, char counters,
 * payment method cards. All colors derive from --pcfg-* tokens.
 * ------------------------------------------------------------------ */
.pcfg-stepper {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	border-radius: var(--pcfg-input-radius, var(--pcfg-radius));
	box-shadow: var(--pcfg-shadow-1);
}

.pcfg-stepper .pcfg-input--quantity {
	border-radius: 0;
	text-align: center;
	max-width: 6em;
	position: relative;
	z-index: 1;
	-moz-appearance: textfield;
}

.pcfg-stepper .pcfg-input--quantity::-webkit-outer-spin-button,
.pcfg-stepper .pcfg-input--quantity::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pcfg-stepper__btn {
	min-width: 2.2em;
	padding: 0 0.6em;
	border: 1px solid var(--pcfg-input-border, var(--pcfg-border));
	background: var(--pcfg-input-bg, #fff);
	color: var(--pcfg-accent);
	font-size: 1.05em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.pcfg-stepper__btn:first-child {
	border-inline-end: 0;
	border-radius: var(--pcfg-input-radius, var(--pcfg-radius)) 0 0 var(--pcfg-input-radius, var(--pcfg-radius));
}

.pcfg-stepper__btn:last-child {
	border-inline-start: 0;
	border-radius: 0 var(--pcfg-input-radius, var(--pcfg-radius)) var(--pcfg-input-radius, var(--pcfg-radius)) 0;
}

.pcfg-stepper__btn:hover {
	background: color-mix(in srgb, var(--pcfg-accent) 10%, transparent);
}

.pcfg-hint {
	display: block;
	width: 100%;
	color: #787c82;
	font-size: 0.82em;
	margin-top: 0.2rem;
}

.pcfg-range-scale {
	display: flex;
	justify-content: space-between;
	width: 100%;
	color: #787c82;
	font-size: 0.78em;
	padding: 0 2px;
	font-variant-numeric: tabular-nums;
}

.pcfg-charcount {
	display: block;
	width: 100%;
	text-align: end;
	color: #787c82;
	font-size: 0.78em;
	font-variant-numeric: tabular-nums;
	margin-top: 0.15rem;
}

/* Payment methods as selectable cards: label left, generic glyph right,
   accent ring on the chosen one. */
.pcfg-payment__cards {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.pcfg-payment__card {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--pcfg-border);
	border-radius: var(--pcfg-radius-lg);
	background: var(--pcfg-input-bg, #fff);
	cursor: pointer;
	box-shadow: var(--pcfg-shadow-1);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pcfg-payment__card:hover {
	box-shadow: var(--pcfg-shadow-2);
	transform: translateY(-1px);
}

.pcfg-payment__card input {
	accent-color: var(--pcfg-accent);
	margin: 0;
}

.pcfg-payment__label {
	font-weight: 500;
	color: var(--pcfg-text, #1d2327);
}

.pcfg-payment__icon {
	margin-inline-start: auto;
	display: inline-flex;
	color: var(--pcfg-accent);
	opacity: 0.85;
}

.pcfg-payment__card:has(input:checked) {
	border-color: var(--pcfg-accent);
	box-shadow: 0 0 0 1px var(--pcfg-accent), var(--pcfg-shadow-1);
}

/* Choice pills/cards: hover polish matching the Material language. */
.pcfg-choices--style-button .pcfg-choice span:hover {
	border-color: var(--pcfg-choice-selected, var(--pcfg-accent));
	color: var(--pcfg-choice-selected, var(--pcfg-accent));
}

.pcfg-choices--style-card .pcfg-choice span {
	box-shadow: var(--pcfg-shadow-1);
}

.pcfg-choices--style-card .pcfg-choice span:hover {
	box-shadow: var(--pcfg-shadow-2);
	transform: translateY(-1px);
}

.pcfg-choices--style-card .pcfg-choice input:checked + span {
	background: color-mix(in srgb, var(--pcfg-choice-selected, var(--pcfg-accent)) 7%, transparent);
}

/* ==================================================================== *
 * UX polish layer (ui-ux-pro-max audit) — token-driven, no behavior
 * change. Focus visibility, press feedback, touch ergonomics, motion
 * preferences. Appended last so it wins ties against earlier rules of
 * equal specificity without rewriting them.
 * ==================================================================== */

/* Visible focus for EVERY interactive control (WCAG; only 2 elements
   had rings before). :focus-visible keeps mouse clicks ring-free. */
.pcfg-calculator button:focus-visible,
.pcfg-calculator select:focus-visible,
.pcfg-calculator input:focus-visible,
.pcfg-calculator textarea:focus-visible,
.pcfg-calculator [tabindex]:focus-visible,
.pcfg-modal__open:focus-visible,
.pcfg-sticky__toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--pcfg-bg, #fff), 0 0 0 4px var(--pcfg-accent);
}

/* Press feedback: subtle scale on tap (150ms), layout bounds unchanged. */
.pcfg-submit__button:active,
.pcfg-modal__add:active:not(:disabled),
.pcfg-modal__open:active,
.pcfg-wizard-nav__prev:active,
.pcfg-wizard-nav__next:active,
.pcfg-stepper button:active,
.pcfg-designer__swatch:active,
.pcfg-choices--style-button .pcfg-choice:active span,
.pcfg-choices--style-card .pcfg-choice:active span {
	transform: scale(0.97);
}

/* Kill the 300ms tap delay + stray double-tap zoom on controls. */
.pcfg-calculator button,
.pcfg-calculator input,
.pcfg-calculator select,
.pcfg-calculator label,
.pcfg-modal__open,
.pcfg-sticky__toggle {
	touch-action: manipulation;
}

/* Prices never jiggle as digits change. */
.pcfg-total,
[data-pcfg-total],
.pcfg-modal__total,
.pcfg-choice__price {
	font-variant-numeric: tabular-nums;
}

/* Clickability affordance on custom controls. */
.pcfg-designer__swatch,
.pcfg-choice,
.pcfg-toggle,
.pcfg-summary__line[data-pcfg-goto],
.pcfg-summary__toggle {
	cursor: pointer;
}

/* Touch ergonomics on small screens: ≥44px targets and ≥16px input
   text (prevents iOS focus-zoom). Desktop keeps the denser rhythm. */
@media (max-width: 782px) {
	.pcfg-calculator .pcfg-input,
	.pcfg-calculator select,
	.pcfg-submit__button,
	.pcfg-modal__add,
	.pcfg-modal__open,
	.pcfg-wizard-nav__prev,
	.pcfg-wizard-nav__next,
	.pcfg-stepper button {
		min-height: 44px;
		font-size: max(16px, 1em);
	}
	.pcfg-designer__swatch {
		min-width: 44px;
		min-height: 44px;
	}

	/* Choice labels ARE the touch target (the native radio/checkbox is
	   only 13px). Most cleared 44px through their own padding, but the
	   toggle switch (25px) and the tighter pill variant (36px) did not
	   (QA-10). .pcfg-choice is already a flex row with centred items, so
	   a min-height simply grows the tappable box without moving text. */
	.pcfg-choice {
		min-height: 44px;
	}

	.pcfg-toggle {
		min-height: 44px;
		padding-block: 10px;
		box-sizing: content-box;
	}
}

/* Respect the visitor's motion preference: keep state changes instant,
   drop decorative movement. */
@media (prefers-reduced-motion: reduce) {
	.pcfg-calculator *,
	.pcfg-modal,
	.pcfg-sticky__panel,
	.pcfg-designer__img {
		transition: none !important;
		animation: none !important;
	}
	.pcfg-submit__button:hover,
	.pcfg-modal__open:hover,
	.pcfg-wizard-nav__next:hover {
		transform: none;
	}
}

/* ==================================================================== *
 * D25 — Per-field styles (fields[].styles). Every rule is unset-safe:
 * a field without styles renders exactly as before. Variables are set
 * inline on the field wrapper by Fields\FieldStyle.
 * ==================================================================== */

/* Container box: background / padding / border / radius per field. */
.pcfg-field--styled {
	background: var(--pcfg-field-bg, transparent);
	padding: var(--pcfg-field-pad, 0px);
	border: var(--pcfg-field-border-width, 0) solid var(--pcfg-field-border-color, transparent);
	border-radius: var(--pcfg-field-radius, 0);
	box-sizing: border-box;
}

/* Elevation presets reuse the Material tokens. */
.pcfg-fshadow--soft {
	box-shadow: var(--pcfg-shadow-1);
}

.pcfg-fshadow--medium {
	box-shadow: var(--pcfg-shadow-2);
}

.pcfg-fshadow--strong {
	box-shadow: var(--pcfg-shadow-3);
}

/* System font presets — no external font loading. */
.pcfg-font--sans {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pcfg-font--serif {
	font-family: Georgia, Cambria, "Times New Roman", serif;
}

.pcfg-font--mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.pcfg-font--rounded {
	font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, sans-serif;
}

/* Form controls don't inherit font-family from the cascade by default —
   without this the preset would skip the inputs themselves. */
.pcfg-font--sans input,
.pcfg-font--sans select,
.pcfg-font--sans textarea,
.pcfg-font--sans button,
.pcfg-font--serif input,
.pcfg-font--serif select,
.pcfg-font--serif textarea,
.pcfg-font--serif button,
.pcfg-font--mono input,
.pcfg-font--mono select,
.pcfg-font--mono textarea,
.pcfg-font--mono button,
.pcfg-font--rounded input,
.pcfg-font--rounded select,
.pcfg-font--rounded textarea,
.pcfg-font--rounded button {
	font-family: inherit;
}

/* Alignment (the field wrapper is a flex row). */
.pcfg-align--center {
	text-align: center;
	justify-content: center;
}

.pcfg-align--right {
	text-align: right;
	justify-content: flex-end;
}

/* Hidden label stays in the accessibility tree (sr-only pattern). */
.pcfg-hide-label > .pcfg-field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Width flow: opt-in on the fields container when any field sets a
   width; fields without one keep --pcfg-field-basis's 100% default. */
.pcfg-fields--flow {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--pcfg-gap, 0.75rem);
	align-items: flex-start;
}

.pcfg-fields--flow > .pcfg-field {
	flex: 1 1 calc(var(--pcfg-field-basis, 100%) - var(--pcfg-gap, 0.75rem));
	min-width: 0;
}

.pcfg-fields--flow > .pcfg-field--page_break {
	flex-basis: 100%;
}

/* Group column grid (inner div — grid on <fieldset> is quirky). */
.pcfg-group--grid .pcfg-group__grid {
	display: grid;
	grid-template-columns: repeat(var(--pcfg-group-cols, 2), minmax(0, 1fr));
	gap: var(--pcfg-group-gap, 0.75rem);
}

.pcfg-group__grid > .pcfg-span--full {
	grid-column: 1 / -1;
}

/* Small screens: widths and columns collapse to a single column. */
@media (max-width: 600px) {
	.pcfg-fields--flow > .pcfg-field {
		flex-basis: 100%;
	}

	.pcfg-group--grid .pcfg-group__grid {
		grid-template-columns: 1fr;
	}
}

/* D28 — option color swatch chip (renders only when an option has one). */
.pcfg-swatch {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	margin-inline-end: 0.4em;
	vertical-align: -0.1em;
}

/* D29 — lead-gen price masking. Amounts are masked to ••• by the JS; blur
   mode softens them further, hide mode removes the rows entirely. */
[data-pcfg-price-hidden="blur"] [data-pcfg-total-amount],
[data-pcfg-price-hidden="blur"] .pcfg-summary__line-value--amount,
[data-pcfg-price-hidden="blur"] .pcfg-breakdown dd {
	filter: blur(4px);
	user-select: none;
}

[data-pcfg-price-hidden="hide"] .pcfg-total,
[data-pcfg-price-hidden="hide"] .pcfg-summary__line-value--amount,
[data-pcfg-price-hidden="hide"] .pcfg-breakdown {
	display: none !important;
}

.pcfg-price-cta {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.5rem 1.2rem;
	border-radius: 999px;
	background: var(--pcfg-button-bg, var(--pcfg-accent));
	color: var(--pcfg-button-text, #fff);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--pcfg-shadow-1);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pcfg-price-cta:hover {
	transform: translateY(-1px);
	box-shadow: var(--pcfg-shadow-2);
	color: var(--pcfg-button-text, #fff);
}