/**
 * Woo Custom Product Addons (Acowebs) - brand skin.
 *
 * The plugin is what this shop uses for the "virtual variants" on simple POD
 * products: the Style and Size pickers on the product page are its
 * `color-group` fields, not WooCommerce variations. It ships its own blue
 * "Style 1 / Color 1" design, which is why those pickers currently look like a
 * different website from the rest of the theme.
 *
 * Nothing here changes plugin behaviour - only presentation, and only inside
 * .wcpa_form_outer (product page) and .wcpa_cart_meta (cart / checkout /
 * emails / order pages).
 *
 * Two layers, deliberately:
 *
 *   1. The variable bridge below. The plugin builds its whole design from
 *      --wcpa* custom properties printed at :root. Redefining them on
 *      .wcpa_form_outer means every plugin rule we do NOT override still
 *      resolves to brand values, including field types this shop has not
 *      switched on yet. It also wins regardless of stylesheet order, because
 *      inheritance from a closer ancestor beats :root.
 *
 *   2. Component rules, for the things a colour variable cannot fix: type
 *      scale, shape, spacing, focus rings, and the option chips.
 *
 * Selectors are prefixed .wcpa_form_outer .wcpa_wrap so they outrank the
 * plugin's own .wcpa_wrap ... rules whichever stylesheet loads last.
 */

/* ---------------------------------------------------------------------------
 * 1. Variable bridge
 * ------------------------------------------------------------------------ */

.wcpa_form_outer {
	--wcpalabelcolor: var(--fg-muted);
	--wcpalabelsize: var(--fs-body-sm);
	--wcpalabelweight: var(--fw-extrabold);
	--wcpadesccolor: var(--fg-secondary);
	--wcpadescsize: var(--fs-body-sm);
	--wcpadescweight: var(--fw-regular);
	--wcpalinecolor: var(--border-default);

	--wcpasectiontitlecolor: var(--fg-primary);
	--wcpasectiontitlebg: transparent;
	--wcpasectiontitlesize: var(--fs-heading-sm);

	--wcpabordercolor: var(--border-default);
	--wcpabordercolorfocus: var(--border-focus);
	--wcpaborderwidth: var(--border-w);
	--wcpaborderradius: var(--radius-md);
	--wcpainputbgcolor: var(--surface-card);
	--wcpainputcolor: var(--fg-primary);
	--wcpainputheight: 46px;

	--wcpaerrorcolor: var(--color-danger);
	--wcpaerrorsize: var(--fs-body-sm);

	--wcpabuttoncolor: var(--surface-brand);
	--wcpabuttontextcolor: var(--fg-on-brand);

	--wcpachecklabelcolor: var(--fg-primary);
	--wcpachecklabelsize: var(--fs-body-md);
	--wcpacheckbgcolor: var(--surface-brand);
	--wcpacheckbordercolor: var(--border-strong);
	--wcpacheckborderwidth: 1.5px;
	--wcpachecktickcolor: var(--neutral-0);
	--wcpacheckwidth: 20px;
	--wcpacheckheight: 20px;

	--wcparadiobgcolor: var(--surface-brand);
	--wcparadiobordercolor: var(--border-strong);
	--wcparadioselbordercolor: var(--surface-brand);

	/* Button-style radios and checkboxes - the Tag component from the design
	   system: pill, hairline border, brand tint once picked. */
	--wcpacheckbuttoncolor: var(--surface-card);
	--wcpacheckbuttonbordercolor: var(--border-default);
	--wcpacheckbuttonborder: var(--border-w);
	--wcpacheckbuttonradius: var(--radius-pill);
	--wcpacheckbuttonselectioncolor: var(--surface-brand);

	--wcpachecktogglebg: var(--border-strong);
	--wcpachecktogglebgactive: var(--surface-brand);
	--wcpachecktogglecirclecolor: var(--neutral-0);

	--wcpaimagetickbg: var(--surface-brand);
	--wcpaimagetickborder: var(--neutral-0);
	--wcpaimagetickcolor: var(--neutral-0);
	--wcpaimagemagnifierbg: var(--surface-inverse);
	--wcpaimagemagnifiercolor: var(--neutral-0);

	--wcpaqtybuttoncolor: var(--surface-sunken);
	--wcpaqtybuttonhovercolor: var(--border-default);
	--wcpaqtybuttontextcolor: var(--fg-primary);
	--wcpaqtyheight: 46px;
	--wcpaqtyradius: var(--radius-pill);
	--wcpaqtywidth: 108px;
}

/* ---------------------------------------------------------------------------
 * 2. Form shell
 *
 * The form is printed inside form.cart, which product.css lays out as a
 * horizontal flex row (quantity + add to cart). The plugin already declares
 * flex: 0 0 100% so it breaks onto its own line; all that is missing is the
 * vertical rhythm of the rest of the summary column.
 * ------------------------------------------------------------------------ */

.wcpa_form_outer {
	margin: 0;
	font-family: var(--font-body);
}

.wcpa_form_outer .wcpa_wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: 0;
}

.wcpa_form_outer .wcpa_section {
	margin: 0;
}

.wcpa_form_outer .wcpa_section_body,
.wcpa_form_outer .wcpa_accordion_open .wcpa_section_body {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: 0;
}

.wcpa_form_outer .wcpa_row {
	gap: var(--space-4);
}

.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap {
	margin: 0;
	padding: 0;
}

/* Section headers only appear when the merchant names a section and asks for
   it to show. Treat it as a small heading rather than the plugin's grey bar. */
.wcpa_form_outer .wcpa_wrap .wcpa_section_head {
	padding: 0 0 var(--space-2);
	border-bottom: var(--border-w) solid var(--border-default);
	background: none;
}

.wcpa_form_outer .wcpa_wrap .wcpa_section_head h1,
.wcpa_form_outer .wcpa_wrap .wcpa_section_head h2,
.wcpa_form_outer .wcpa_wrap .wcpa_section_head h3,
.wcpa_form_outer .wcpa_wrap .wcpa_section_head h4,
.wcpa_form_outer .wcpa_wrap .wcpa_section_head h5,
.wcpa_form_outer .wcpa_wrap .wcpa_section_head h6 {
	font-family: var(--font-display);
	font-size: var(--fs-heading-sm);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-snug);
	color: var(--fg-primary);
}

.wcpa_form_outer .wcpa_wrap .wcpa_toggle::before,
.wcpa_form_outer .wcpa_wrap .wcpa_toggle::after {
	background-color: var(--fg-secondary);
}

/* ---------------------------------------------------------------------------
 * 3. Field labels and help text
 *
 * Matched to .variations th in product.css on purpose: an add-on picker and a
 * real WooCommerce variation picker sit in the same column on the same page,
 * and a customer should not be able to tell which is which.
 * ------------------------------------------------------------------------ */

.wcpa_form_outer .wcpa_wrap .wcpa_field_label {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-wide);
	line-height: var(--lh-snug);
	text-transform: uppercase;
	color: var(--fg-muted);
}

.wcpa_form_outer .wcpa_required_ast {
	margin-inline-start: 2px;
	color: var(--surface-accent);
}

.wcpa_form_outer .wcpa_wrap .wcpa_field_desc,
.wcpa_form_outer .wcpa_option_desc,
.wcpa_form_outer .wcpa_grp_desc {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-normal);
	color: var(--fg-secondary);
	text-transform: none;
	letter-spacing: normal;
}

.wcpa_form_outer .wcpa_wrap .wcpa_grp_wrap .wcpa_grp_title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	color: var(--fg-primary);
}

.wcpa_form_outer .wcpa_tooltip_icon {
	border-color: var(--border-strong);
	border-radius: var(--radius-pill);
	color: var(--fg-secondary);
}

/* ---------------------------------------------------------------------------
 * 4. Text inputs, textareas, selects
 *
 * The Input component from the design system: 46px tall, 10px radius, hairline
 * border, brand focus ring.
 *
 * The select keeps its native arrow. Drawing the design's chevron would mean
 * either a data: URI with a hard-coded hex - which breaks the Customizer
 * palette - or a pseudo-element on a wrapper the plugin does not render.
 * ------------------------------------------------------------------------ */

.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='text'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='url'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='date'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='time'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='number'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='email'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='tel'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='datetime-local'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap select,
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap textarea {
	width: 100%;
	padding: 0 var(--space-4);
	border: var(--border-w) solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	color: var(--fg-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body-md);
	line-height: var(--lh-normal);
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='text'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='url'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='date'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='time'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='number'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='email'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='tel'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input[type='datetime-local'],
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap select {
	height: 46px;
}

.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap select {
	padding-inline-end: var(--space-2);
}

.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap textarea {
	min-height: 96px;
	padding-block: var(--space-3);
	resize: vertical;
}

.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input::placeholder,
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap textarea::placeholder {
	color: var(--fg-muted);
}

.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap input:focus,
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap select:focus,
.wcpa_form_outer .wcpa_wrap .wcpa_field_wrap textarea:focus {
	border-color: var(--border-focus);
	box-shadow: var(--shadow-focus);
	outline: none;
}

/* Character counter under a length-limited field. */
.wcpa_form_outer .wcpa_char_left {
	font-size: var(--fs-caption);
	color: var(--fg-muted);
}

/* ---------------------------------------------------------------------------
 * 5. Option chips - the Style / Size pickers
 *
 * This is the field type the shop actually uses. The plugin calls it
 * `color-group`, but with "show label inside" it is not a colour picker at
 * all: every option carries a placeholder white swatch and the option name is
 * printed on top of it. So it is styled as the design system's Tag, which is
 * also what .sunny-swatch (product.css) renders for real variations.
 *
 * The option colour arrives as an inline background-color on .wcpa_color_bg,
 * so the brand tint for the selected state has to be !important to reach it.
 * That is scoped to chips the plugin itself flagged as near-white
 * (.wcpa_color_luma_235) - a shop that later configures genuine colour
 * swatches keeps them, tint and all.
 * ------------------------------------------------------------------------ */

.wcpa_form_outer .wcpa_wrap .wcpa_group_field,
.wcpa_form_outer .wcpa_wrap .wcpa_grp_items {
	gap: var(--space-2);
}

/* border-color only, deliberately. The option colour arrives as an inline
   style that the plugin rewrites on every re-render, and a running transition
   outranks even an !important declaration - so transitioning background-color
   here makes the selected tint below flicker back to the raw option colour
   each time the form re-renders. */
.wcpa_form_outer .wcpa_wrap .wcpa_color_wrap .wcpa_color_bg {
	border: var(--border-w) solid transparent;
	transition: border-color var(--duration-fast) var(--ease-standard);
}

/* --- Text chips -------------------------------------------------------- */

.wcpa_form_outer .wcpa_wrap .wcpa_label_inside .wcpa_color_wrap {
	border-radius: var(--radius-pill);
}

.wcpa_form_outer .wcpa_wrap .wcpa_label_inside .wcpa_color_wrap .wcpa_color_bg {
	padding-inline: var(--space-4);
	border-radius: var(--radius-pill);
	border-color: var(--border-default);
}

.wcpa_form_outer .wcpa_wrap .wcpa_label_inside .wcpa_color_label {
	margin: 0;
}

/* A chip the plugin did NOT flag as near-white is carrying a real product
   colour behind the option name, and a merchant can pick any colour - so no
   single ink stays readable on it. Today a "Red" chip prints dark grey on
   #cc0000, which is the plugin's own default and unreadable.
   Guessing the ink from luminance is not available either: the only bucket
   exposed on the markup is >210, high enough that white ink would land on
   gold. So the label gets its own plate instead and the colour reads as the
   ring around it - correct for every colour rather than most of them.
   Near-white chips - the Style and Size text pills, which is what this shop
   mostly uses - are excluded and stay clean pills. */
.wcpa_form_outer .wcpa_wrap .wcpa_label_inside .wcpa_color_wrap:not(.wcpa_color_luma_235) .wcpa_color_label {
	padding: 2px var(--space-2);
	border-radius: var(--radius-pill);
	background: transparent;
}

.wcpa_form_outer .wcpa_wrap .wcpa_label_inside .wcpa_color_label span {
	font-family: var(--font-body);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	line-height: 1;
	color: var(--fg-secondary);
	white-space: nowrap;
}

.wcpa_form_outer .wcpa_wrap .wcpa_label_inside .wcpa_color_wrap:hover .wcpa_color_bg {
	border-color: var(--border-strong);
}

/* Selected. The luma class is the plugin's own "this swatch is near-white"
   flag, which is exactly the case where repainting it costs no information. */
.wcpa_form_outer .wcpa_wrap .wcpa_label_inside .wcpa_color_wrap.wcpa_color_luma_235 input:checked ~ .wcpa_color_bg {
	background-color: var(--brand-50) !important;
}

.wcpa_form_outer .wcpa_wrap .wcpa_label_inside .wcpa_color_wrap input:checked ~ .wcpa_color_bg {
	border-color: var(--surface-brand);
}

.wcpa_form_outer .wcpa_wrap .wcpa_label_inside .wcpa_color_wrap input:checked ~ .wcpa_color_bg .wcpa_color_label span {
	color: var(--brand-700);
	font-weight: var(--fw-semibold);
}

/* The plugin's tick is a small absolutely-placed check drawn inside the
   swatch. On a swatch that contains a word it lands on top of the text, so the
   border and tint above carry the selected state instead. */
.wcpa_form_outer .wcpa_wrap .wcpa_label_inside .wcpa_color_bg::after {
	display: none;
}

/* Keyboard focus. The real radio is opacity:0 on top of the swatch, so the
   ring has to be moved onto the visible box. */
.wcpa_form_outer .wcpa_wrap .wcpa_color_wrap:has(input:focus-visible) .wcpa_color_bg {
	border-color: var(--border-focus);
	box-shadow: var(--shadow-focus);
}

/* --- Real colour chips ------------------------------------------------- */

.wcpa_form_outer .wcpa_wrap .wcpa_group_field:not(.wcpa_label_inside) .wcpa_color_bg {
	padding: 0;
	box-shadow: 0 0 0 1px var(--border-strong);
}

.wcpa_form_outer .wcpa_wrap .wcpa_group_field:not(.wcpa_label_inside) input:checked ~ .wcpa_color_bg {
	box-shadow: 0 0 0 2px var(--surface-brand);
}

.wcpa_form_outer .wcpa_wrap .wcpa_disp_circle:not(.wcpa_label_inside) .wcpa_color_bg {
	border-radius: var(--radius-pill);
}

.wcpa_form_outer .wcpa_wrap .wcpa_disp_squircle:not(.wcpa_label_inside) .wcpa_color_bg {
	border-radius: var(--radius-sm);
}

.wcpa_form_outer .wcpa_wrap .wcpa_group_field:not(.wcpa_label_inside) .wcpa_color_label {
	margin: var(--space-1) 0 0;
	font-size: var(--fs-caption);
	color: var(--fg-secondary);
	text-align: center;
}

.wcpa_form_outer .wcpa_wrap .wcpa_selection_border input:checked ~ .wcpa_color_bg,
.wcpa_form_outer .wcpa_wrap .wcpa_selection_tick-border input:checked ~ .wcpa_color_bg {
	outline: solid 2px var(--surface-brand);
	outline-offset: 2px;
}

/* Price shown against a single option. */
.wcpa_form_outer .wcpa_option_price {
	margin-inline-start: var(--space-1);
	font-size: var(--fs-caption);
	font-weight: var(--fw-medium);
	color: var(--fg-secondary);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * 6. Radios and checkboxes
 * ------------------------------------------------------------------------ */

.wcpa_form_outer .wcpa_wrap .wcpa_radio label,
.wcpa_form_outer .wcpa_wrap .wcpa_checkbox label {
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-body-md);
	color: var(--fg-primary);
}

/* accent-color paints the native control in the brand colour without swapping
   it for a div - so it keeps its own focus ring, hit area and platform
   behaviour, which a re-drawn control usually loses. */
.wcpa_form_outer .wcpa_wrap .wcpa_radio input[type='radio'],
.wcpa_form_outer .wcpa_wrap .wcpa_checkbox input[type='checkbox'] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--surface-brand);
	flex: none;
}

/* Button UI - the same Tag chip as the option swatches above. The plugin's own
   rules for these live at .wcpa_wrap .wcpa_check_ui_button ..., and its
   stylesheet is enqueued after the theme's, so matching that weight is not
   enough to win - each of these carries one class more. */
.wcpa_form_outer .wcpa_wrap .wcpa_check_ui_button .wcpa_radio label,
.wcpa_form_outer .wcpa_wrap .wcpa_check_ui_button .wcpa_checkbox label {
	padding: var(--space-2) var(--space-4);
	border: var(--border-w) solid var(--border-default);
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	color: var(--fg-secondary);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard);
}

.wcpa_form_outer .wcpa_wrap .wcpa_check_ui_button .wcpa_radio label:hover,
.wcpa_form_outer .wcpa_wrap .wcpa_check_ui_button .wcpa_checkbox label:hover {
	border-color: var(--border-strong);
}

/* The plugin marks the chosen chip with a 2px outline outside its border.
   Border plus tint says the same thing without the double ring. */
.wcpa_form_outer .wcpa_wrap .wcpa_check_ui_button .wcpa_radio.wcpa_selected label,
.wcpa_form_outer .wcpa_wrap .wcpa_check_ui_button .wcpa_checkbox.wcpa_selected label {
	outline: none;
	border-color: var(--surface-brand);
	background: var(--brand-50);
	color: var(--brand-700);
	font-weight: var(--fw-semibold);
}

.wcpa_form_outer .wcpa_wrap .wcpa_check_ui_button .wcpa_radio label:has(input:focus-visible),
.wcpa_form_outer .wcpa_wrap .wcpa_check_ui_button .wcpa_checkbox label:has(input:focus-visible) {
	border-color: var(--border-focus);
	box-shadow: var(--shadow-focus);
}

/* Toggle UI. */
.wcpa_form_outer .wcpa_wrap .wcpa_check_ui_toggle .wcpa_check {
	background: var(--border-strong);
}

.wcpa_form_outer .wcpa_wrap .wcpa_check_ui_toggle input:checked + .wcpa_check {
	background: var(--surface-brand);
}

/* ---------------------------------------------------------------------------
 * 7. Image options
 * ------------------------------------------------------------------------ */

.wcpa_form_outer .wcpa_wrap .wcpa_image .wcpa_img_wrap {
	border-radius: var(--radius-md);
	box-shadow: 0 0 0 1px var(--border-default);
	transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.wcpa_form_outer .wcpa_wrap .wcpa_image label:hover .wcpa_img_wrap {
	box-shadow: 0 0 0 1px var(--border-strong);
}

/* The plugin offers five "how does a picked image look" modes and gives each
   its own rule at the same weight as the plain one above, so a single
   input:checked rule ties and loses to whichever stylesheet loads last. Naming
   the modes adds the one class needed to win, and replaces the drop shadow /
   outline each of them draws with the same brand ring used for colour chips
   and for .sunny-swatch. */
.wcpa_form_outer .wcpa_wrap .wcpa_image input:checked ~ .wcpa_img_wrap,
.wcpa_form_outer .wcpa_wrap .wcpa_selection_shadow .wcpa_image input:checked ~ .wcpa_img_wrap,
.wcpa_form_outer .wcpa_wrap .wcpa_selection_tick-shadow .wcpa_image input:checked ~ .wcpa_img_wrap,
.wcpa_form_outer .wcpa_wrap .wcpa_selection_outline .wcpa_image input:checked ~ .wcpa_img_wrap,
.wcpa_form_outer .wcpa_wrap .wcpa_selection_border .wcpa_image input:checked ~ .wcpa_img_wrap,
.wcpa_form_outer .wcpa_wrap .wcpa_selection_tick-border .wcpa_image input:checked ~ .wcpa_img_wrap {
	outline: none;
	box-shadow: 0 0 0 2px var(--surface-brand);
}

.wcpa_form_outer .wcpa_wrap .wcpa_image label:has(input:focus-visible) .wcpa_img_wrap {
	box-shadow: var(--shadow-focus);
}

.wcpa_form_outer .wcpa_wrap .wcpa_image .wcpa_image_label {
	margin-top: var(--space-1);
	font-size: var(--fs-caption);
	color: var(--fg-secondary);
}

/* ---------------------------------------------------------------------------
 * 8. File upload
 * ------------------------------------------------------------------------ */

.wcpa_form_outer .wcpa_wrap .wcpa_file_style .wcpa_choose_button {
	display: inline-flex;
	align-items: center;
	padding: var(--space-3) var(--space-5);
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--surface-brand);
	color: var(--fg-on-brand);
	font-family: var(--font-display);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-extrabold);
	line-height: 1;
}

.wcpa_form_outer .wcpa_wrap .wcpa_upload_custom_1 .awpca_custom_file {
	height: 46px;
	border: var(--border-w) solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	color: var(--fg-secondary);
	font-size: var(--fs-body-sm);
}

.wcpa_form_outer .wcpa_wrap .wcpa_file_list li {
	border: var(--border-w) solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
}

.wcpa_form_outer .wcpa_wrap .wcpa_file_list .wcpa_progressbar span {
	background: var(--surface-brand);
}

.wcpa_form_outer .wcpa_wrap .wcpa_file_list .wcpa_progressbar span.wcpa_success {
	background: var(--color-success);
}

.wcpa_form_outer .wcpa_wrap .wcpa_file_details p span {
	font-family: var(--font-body);
	color: var(--fg-primary);
}

/* ---------------------------------------------------------------------------
 * 9. Prices, totals and errors
 * ------------------------------------------------------------------------ */

.wcpa_form_outer .wcpa_wrap .wcpa_field_price,
.wcpa_form_outer .wcpa_price_summary {
	font-family: var(--font-body);
	font-size: var(--fs-body-sm);
	color: var(--fg-secondary);
	font-variant-numeric: tabular-nums;
}

/* Empty unless the merchant turned a summary line on - an empty box must not
   leave a gap in the flex column above the add-to-cart row. */
.wcpa_form_outer .wcpa_price_summary:empty {
	display: none;
}

.wcpa_form_outer .wcpa_price_summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-top: var(--space-3);
	border-top: var(--border-w) solid var(--border-default);
}

.wcpa_form_outer .wcpa_total,
.wcpa_form_outer .wcpa_product_total {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	color: var(--fg-primary);
}

.wcpa_form_outer .wcpa_wrap .wcpa_field_bottom {
	margin-top: var(--space-1);
}

.wcpa_form_outer .wcpa_wrap .wcpa_field_error p,
.wcpa_form_outer .wcpa_wrap .wcpa_form_error,
.wcpa_form_outer .wcpa_wrap .wcpa_type_groupValidation .wcpa_error {
	font-family: var(--font-body);
	font-size: var(--fs-body-sm);
	color: var(--color-danger);
}

.wcpa_form_outer .wcpa_clear a {
	font-family: var(--font-body);
	font-size: var(--fs-body-sm);
	color: var(--fg-link);
}

/* ---------------------------------------------------------------------------
 * 10. Skeleton
 *
 * The form is rendered client-side, so this placeholder is what the customer
 * sees first. Retinted to the warm neutral scale so the first paint already
 * belongs to the theme rather than flashing a cool grey.
 * ------------------------------------------------------------------------ */

.wcpa_form_outer .wcpa_skeleton_loader_area {
	margin: 0;
}

.wcpa_form_outer .wcpa_skeleton_loader * {
	background: linear-gradient(
		130deg,
		var(--neutral-100) 8%,
		var(--neutral-50) 18%,
		var(--neutral-100) 33%
	);
	background-size: 200% 100%;
	border-radius: var(--radius-md);
}

.wcpa_form_outer .wcpa_skeleton_loader .wcpa_skeleton_field {
	height: 46px;
	border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------------------
 * 11. Image preview overlay
 *
 * Printed in wp_footer, outside .wcpa_form_outer, so it cannot inherit the
 * variable bridge and is targeted directly.
 * ------------------------------------------------------------------------ */

.wcpa_popup_outer,
#wcpa_img_preview {
	font-family: var(--font-body);
}

.wcpa_popup_outer .wcpa_popup_close,
#wcpa_img_preview .wcpa_popup_close {
	border-radius: var(--radius-pill);
}