/**
 * COD Form & Upsells — storefront styles.
 *
 * Every colour, radius and size comes from a CSS variable written by
 * CFU_Assets::dynamic_css(), so the Design tab drives the whole look.
 */

/* ---------------------------------------------------------------- Buttons */

.cfu-button,
button.cfu-button,
a.cfu-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	margin: var(--cfu-btn-mt, 10px) 0 var(--cfu-btn-mb, 10px);
	padding: 14px 22px;
	border: var(--cfu-btn-border-w, 0) solid var(--cfu-btn-border-c, #000) !important;
	border-radius: var(--cfu-btn-radius, 10px) !important;
	background: var(--cfu-btn-bg, #970096) !important;
	color: var(--cfu-btn-color, #fff) !important;
	font-family: var(--cfu-font, inherit);
	font-size: var(--cfu-btn-font, 1rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
	box-shadow: 0 0 var(--cfu-btn-shadow, .3rem) rgba(0, 0, 0, .28);
}

.cfu-button--full {
	width: 100%;
}

.cfu-button:hover,
.cfu-button:focus-visible {
	filter: brightness(1.07);
	background: var(--cfu-btn-bg, #970096) !important;
	color: var(--cfu-btn-color, #fff) !important;
	transform: translateY(-1px);
}

.cfu-button:active {
	transform: translateY(0);
}

.cfu-button__labels {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.cfu-button__sub {
	font-size: .78em;
	font-weight: 500;
	opacity: .88;
}

.cfu-button__icon {
	display: inline-flex;
	align-items: center;
}

.cfu-button--secondary,
a.cfu-button--secondary,
.cfu-button--secondary:hover {
	background: var(--cfu-btn2-bg, #111) !important;
	color: var(--cfu-btn2-color, #fff) !important;
	border: var(--cfu-btn2-border-w, 0) solid var(--cfu-btn2-border-c, #000) !important;
	border-radius: var(--cfu-btn2-radius, 10px) !important;
}

/* Attention animations */

@keyframes cfu-shake {
	0%, 88%, 100% { transform: translateX(0); }
	90% { transform: translateX(-5px); }
	92% { transform: translateX(5px); }
	94% { transform: translateX(-4px); }
	96% { transform: translateX(4px); }
	98% { transform: translateX(-2px); }
}

@keyframes cfu-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.035); }
}

@keyframes cfu-bounce {
	0%, 82%, 100% { transform: translateY(0); }
	88% { transform: translateY(-7px); }
	94% { transform: translateY(-3px); }
}

@keyframes cfu-glow {
	0%, 100% { box-shadow: 0 0 var(--cfu-btn-shadow, .3rem) rgba(0, 0, 0, .28); }
	50% { box-shadow: 0 0 1.4rem var(--cfu-btn-bg, #970096); }
}

.cfu-anim-shake { animation: cfu-shake 3s ease-in-out infinite; }
.cfu-anim-pulse { animation: cfu-pulse 1.8s ease-in-out infinite; }
.cfu-anim-bounce { animation: cfu-bounce 3s ease-in-out infinite; }
.cfu-anim-glow { animation: cfu-glow 2.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
	.cfu-button { animation: none !important; transition: none; }
}

/* Backstop for themes that print their own add-to-cart markup, which a
   remove_action on the WooCommerce template cannot reach. */
body.cfu-hide-cart.single-product form.cart .single_add_to_cart_button,
body.cfu-hide-cart.single-product form.cart .quantity,
body.cfu-hide-cart.single-product .wd-sticky-btn-cart,
body.cfu-hide-cart.single-product .woodmart-sticky-btn {
	display: none !important;
}

/* The add-to-cart wrapper can end up empty once its button is hidden; collapse
   it so it does not leave a gap above our own button. */
body.cfu-hide-cart.single-product form.cart .woocommerce-variation-add-to-cart {
	padding: 0;
	margin: 0;
}

/* ----------------------------------------------------------------- Modal */

.cfu-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	/* Centred by the flex container itself. An auto margin would do it too, but
	   only while the dialog fits — past that it pushes the top out of reach. */
	align-items: center;
	justify-content: center;
	padding: 24px 12px;
	/* Deliberately not a scroll container. It used to be, and because a scroll
	   container reports the overflow of the scrollers inside it, it carried
	   hundreds of pixels of scrollable range that nothing was drawn in. Clicking
	   an add-on focuses its checkbox, and a browser scrolls every scrolling
	   ancestor to bring a focused element into view — so it scrolled through
	   that phantom range and shoved the whole dialog off the top of the screen.
	   The body below is the one and only thing that scrolls.

	   clip rather than hidden: hidden still makes an element scrollable to a
	   script and to the browser itself, which is the whole problem. clip does
	   not. The hidden line above it is the fallback for browsers too old to
	   know clip. */
	overflow: hidden;
	overflow: clip;
	font-family: var(--cfu-font, inherit);
}

.cfu-modal.is-open {
	display: flex;
}

.cfu-modal__overlay {
	position: fixed;
	inset: 0;
	background: var(--cfu-overlay, rgba(0, 0, 0, .6));
	animation: cfu-fade .2s ease;
}

@keyframes cfu-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes cfu-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

.cfu-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--cfu-modal-width, 460px);
	/* Of the wrapper, not of 100vh: on a phone 100vh counts the space under the
	   browser toolbars, so a dialog sized against it is taller than the screen. */
	max-height: 100%;
	min-height: 0;
	margin: 0 auto;
	/* Keeps the scrolling body from reporting its overflow up to the wrapper.
	   clip, not hidden, for the same reason as above — with hidden the dialog
	   became scrollable itself, and focusing the add-on checkbox slid the form
	   up out of it and left the empty half of the dialog showing. */
	overflow: hidden;
	overflow: clip;
	background: var(--cfu-modal-bg, #fff);
	border-radius: var(--cfu-modal-radius, 14px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	animation: cfu-rise .25s ease;
}

.cfu-modal .cfu-modal__close {
	position: absolute !important;
	top: 10px;
	/* Deliberately right, not inset-inline-end: a close control belongs in the
	   top-right corner whether the form reads left-to-right or not. */
	right: 10px;
	left: auto;
	z-index: 5;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 50%;
	/* Translucent white reads clearly over both the form and a banner image. */
	background: rgba(255, 255, 255, .94);
	color: #111;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	cursor: pointer;
	opacity: 1;
	visibility: visible;
	transition: background .15s ease, transform .15s ease;
}

.cfu-modal .cfu-modal__close:hover,
.cfu-modal .cfu-modal__close:focus-visible {
	background: #111;
	color: #fff;
	transform: rotate(90deg);
}

.cfu-modal .cfu-modal__close svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* A footer cancel link, for shoppers who scroll rather than look for an X. */
.cfu-cancel {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 10px;
	border: 0;
	background: none;
	color: var(--cfu-muted, #6b7280);
	font-family: var(--cfu-font, inherit);
	font-size: 13px;
	text-align: center;
	text-decoration: underline;
	cursor: pointer;
}

.cfu-cancel:hover {
	color: var(--cfu-text, #111);
}

.cfu-modal__body {
	/* Top padding keeps the close button clear of the form content. */
	padding: 54px 20px 20px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	overflow-anchor: none;
}

.cfu-modal__loading {
	padding: 60px 0;
	text-align: center;
	color: var(--cfu-muted, #6b7280);
}

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

/* -------------------------------------------------------------- Embedded */

.cfu-embedded {
	max-width: 640px;
	margin: 32px auto;
	padding: 22px 20px;
	border: 1px solid var(--cfu-input-border, #e5e7eb);
	border-radius: var(--cfu-modal-radius, 14px);
	background: var(--cfu-modal-bg, #fff);
	box-shadow: var(--cfu-embed-shadow, none);
	font-family: var(--cfu-font, inherit);
}

/* ------------------------------------------------------------------ Form */

.cfu-form {
	color: var(--cfu-text, #111);
	font-family: var(--cfu-font, inherit);
	text-align: start;
}

.cfu-form__title {
	margin: 0 0 14px;
	font-size: var(--cfu-title-size, 18px);
	font-weight: 700;
	color: var(--cfu-text, #111);
}

.cfu-banner {
	margin: 0 0 14px;
}

.cfu-banner--bottom {
	margin: 16px 0 0;
}

.cfu-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.cfu-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cfu-section-title {
	margin: 18px 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--cfu-text, #111);
}

.cfu-section-title:first-child {
	margin-top: 0;
}

/* Product summary */

.cfu-summary {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--cfu-input-border, #e5e7eb);
	border-radius: 12px;
	background: #fff;
}

.cfu-summary__media {
	position: relative;
	flex: 0 0 64px;
}

.cfu-summary__media img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
}

.cfu-summary__badge {
	position: absolute;
	top: -8px;
	inset-inline-start: -8px;
	min-width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border-radius: 11px;
	background: #111;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.cfu-summary__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.cfu-summary__name {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
}

.cfu-summary__meta {
	font-size: 12px;
	color: var(--cfu-muted, #6b7280);
}

.cfu-summary__meta:empty {
	display: none;
}

.cfu-summary__price {
	font-weight: 700;
	font-size: 15px;
	color: var(--cfu-accent, #970096);
}

/* Quantity stepper */

.cfu-qty {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: 4px;
	border: 1px solid var(--cfu-input-border, #e5e7eb);
	border-radius: 8px;
	overflow: hidden;
}

.cfu-qty__btn {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: #f3f4f6;
	color: var(--cfu-text, #111);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.cfu-qty__btn:hover {
	background: #e5e7eb;
}

.cfu-qty__input {
	width: 44px;
	height: 30px;
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--cfu-text, #111);
	text-align: center;
	font-size: 14px;
	-moz-appearance: textfield;
}

.cfu-qty__input::-webkit-outer-spin-button,
.cfu-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Quantity offers */

.cfu-tiers {
	margin: 16px 0;
}

.cfu-tiers--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

.cfu-tiers--grid .cfu-section-title {
	grid-column: 1 / -1;
}

.cfu-tier {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	padding: 12px 14px;
	border: 2px solid var(--cfu-input-border, #e5e7eb);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.cfu-tiers--grid .cfu-tier {
	flex-direction: column;
	align-items: stretch;
	margin-bottom: 0;
	text-align: center;
}

.cfu-tier input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cfu-tier__radio {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border: 2px solid #cbd5e1;
	border-radius: 50%;
	transition: border-color .15s ease;
}

.cfu-tier.is-selected {
	border-color: var(--cfu-accent, #970096);
	background: var(--cfu-summary-bg, #faf5fb);
}

.cfu-tier.is-selected .cfu-tier__radio {
	border-color: var(--cfu-accent, #970096);
	box-shadow: inset 0 0 0 4px var(--cfu-accent, #970096);
}

.cfu-tier__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cfu-tier__label {
	font-weight: 700;
	font-size: 14px;
}

.cfu-tier__badge {
	align-self: flex-start;
	padding: 2px 8px;
	border-radius: 20px;
	background: var(--cfu-accent, #970096);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.cfu-tier__unit {
	font-size: 12px;
	color: var(--cfu-muted, #6b7280);
}

.cfu-tier__prices {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	white-space: nowrap;
}

.cfu-tiers--grid .cfu-tier__prices {
	align-items: center;
}

.cfu-tier__regular {
	color: var(--cfu-muted, #6b7280);
	font-size: 12px;
	text-decoration: line-through;
}

.cfu-tier__price {
	background: none;
	color: var(--cfu-text, #111);
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
}

.cfu-tier__ribbon {
	position: absolute;
	top: -10px;
	inset-inline-end: 12px;
	padding: 2px 10px;
	border-radius: 20px;
	background: #111;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Order bumps */

.cfu-bumps {
	margin: 16px 0;
}

.cfu-bump {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	padding: 10px 12px;
	border: 2px dashed var(--cfu-input-border, #e5e7eb);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.cfu-bump.is-selected {
	border-style: solid;
	border-color: var(--cfu-accent, #970096);
	background: var(--cfu-summary-bg, #faf5fb);
}

.cfu-bump input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cfu-bump__check {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border: 2px solid #cbd5e1;
	border-radius: 4px;
	background: #fff;
}

.cfu-bump.is-selected .cfu-bump__check {
	border-color: var(--cfu-accent, #970096);
	background: var(--cfu-accent, #970096);
}

.cfu-bump.is-selected .cfu-bump__check::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 4px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.cfu-bump__image {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
}

.cfu-bump__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.cfu-bump__title {
	font-weight: 700;
	font-size: 13px;
}

.cfu-bump__desc {
	font-size: 12px;
	color: var(--cfu-muted, #6b7280);
}

.cfu-bump__prices {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	white-space: nowrap;
}

.cfu-bump__prices del {
	color: var(--cfu-muted, #6b7280);
	font-size: 11px;
}

.cfu-bump__prices ins {
	background: none;
	color: var(--cfu-accent, #970096);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

/* Totals */

.cfu-totals {
	margin: 16px 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--cfu-summary-bg, #faf5fb);
}

.cfu-totals__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	font-size: 14px;
}

.cfu-totals__row[hidden] {
	display: none;
}

.cfu-totals__row--discount .cfu-totals__value {
	color: #16a34a;
}

.cfu-totals__row--total {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, .1);
	font-size: 17px;
	font-weight: 800;
}

.cfu-totals__row--total .cfu-totals__value {
	color: var(--cfu-accent, #970096);
}

/* Shipping methods */

.cfu-methods {
	margin: 16px 0;
}

.cfu-method {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	padding: 12px 14px;
	border: 2px solid var(--cfu-input-border, #e5e7eb);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
}

.cfu-method input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cfu-method__radio {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border: 2px solid #cbd5e1;
	border-radius: 50%;
}

.cfu-method.is-selected {
	border-color: var(--cfu-accent, #970096);
}

.cfu-method.is-selected .cfu-method__radio {
	border-color: var(--cfu-accent, #970096);
	box-shadow: inset 0 0 0 4px var(--cfu-accent, #970096);
}

.cfu-method__label {
	flex: 1 1 auto;
	font-weight: 600;
}

.cfu-method__cost {
	color: var(--cfu-muted, #6b7280);
	white-space: nowrap;
}

/* Fields */

.cfu-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cfu-field {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.cfu-field--half {
	flex: 1 1 calc(50% - 5px);
}

.cfu-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--cfu-text, #111);
}

.cfu-req {
	color: #dc2626;
}

.cfu-fields--nolabels .cfu-label {
	display: none;
}

.cfu-fields--horizontal .cfu-field {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.cfu-fields--horizontal .cfu-label {
	flex: 0 0 30%;
}

.cfu-fields--horizontal .cfu-input-wrap {
	flex: 1 1 auto;
}

.cfu-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.cfu-input-icon {
	position: absolute;
	inset-inline-start: 12px;
	display: flex;
	align-items: center;
	color: var(--cfu-muted, #6b7280);
	pointer-events: none;
}

.cfu-input-icon--whatsapp {
	color: #25d366;
}

.cfu-input {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--cfu-input-height, 46px);
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--cfu-input-border, #e5e7eb);
	border-radius: var(--cfu-input-radius, 10px);
	background: var(--cfu-input-bg, #f7f7f8);
	color: var(--cfu-text, #111);
	font-family: var(--cfu-font, inherit);
	font-size: 15px;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cfu-input-wrap--icon .cfu-input {
	padding-inline-start: 38px;
}

.cfu-input:focus {
	outline: none;
	border-color: var(--cfu-accent, #970096);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}

.cfu-input--textarea {
	min-height: 80px;
	padding-top: 12px;
	resize: vertical;
}

.cfu-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 20px;
	padding-inline-end: 34px;
}

.cfu-rtl .cfu-select {
	background-position: left 10px center;
}

.cfu-field.has-error .cfu-input {
	border-color: #dc2626;
	background: #fef2f2;
}

.cfu-error {
	display: none;
	font-size: 12px;
	color: #dc2626;
}

.cfu-field.has-error .cfu-error {
	display: block;
}

/* Checkboxes */

.cfu-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.45;
	cursor: pointer;
}

.cfu-check input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cfu-check__box {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border: 2px solid #cbd5e1;
	border-radius: 4px;
	background: #fff;
}

.cfu-check input:checked + .cfu-check__box {
	border-color: var(--cfu-accent, #970096);
	background: var(--cfu-accent, #970096);
}

.cfu-check input:checked + .cfu-check__box::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 4px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.cfu-field--terms {
	margin-top: 12px;
}

/* Submit */

.cfu-form .cfu-submit,
.cfu-form button.cfu-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	margin-top: 16px;
	padding: 15px 22px;
	border: var(--cfu-sbtn-border-w, 0) solid var(--cfu-sbtn-border-c, #000) !important;
	border-radius: var(--cfu-sbtn-radius, 10px) !important;
	background: var(--cfu-sbtn-bg, #970096) !important;
	color: var(--cfu-sbtn-color, #fff) !important;
	font-family: var(--cfu-font, inherit);
	font-size: var(--cfu-sbtn-font, 1.05rem);
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	opacity: 1;
	transition: filter .15s ease;
}

.cfu-form .cfu-submit:hover,
.cfu-form .cfu-submit:focus-visible {
	filter: brightness(1.07);
	background: var(--cfu-sbtn-bg, #970096) !important;
	color: var(--cfu-sbtn-color, #fff) !important;
}

.cfu-form .cfu-submit[disabled] {
	opacity: .7;
	cursor: not-allowed;
}

.cfu-submit__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cfu-spin .7s linear infinite;
}

.cfu-submit.is-loading .cfu-submit__spinner {
	display: block;
}

@keyframes cfu-spin {
	to { transform: rotate(360deg); }
}

/* Messages */

.cfu-message {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	font-size: 14px;
}

.cfu-message[hidden] {
	display: none;
}

.cfu-message.is-success {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #15803d;
}

/* Success panel */

.cfu-success {
	padding: 30px 20px;
	text-align: center;
}

.cfu-success__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
}

.cfu-success__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 800;
	color: var(--cfu-text, #111);
}

.cfu-success__message {
	margin: 0 0 14px;
	color: var(--cfu-muted, #6b7280);
	font-size: 14px;
	line-height: 1.5;
}

.cfu-success__order {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 20px;
	background: var(--cfu-summary-bg, #faf5fb);
	font-weight: 700;
	font-size: 14px;
}

/* Post-purchase upsell */

.cfu-upsell {
	padding: 6px 2px 2px;
	text-align: center;
}

.cfu-upsell__headline {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 800;
	color: var(--cfu-text, #111);
}

.cfu-upsell__sub {
	margin: 0 0 14px;
	color: var(--cfu-muted, #6b7280);
	font-size: 14px;
	line-height: 1.5;
}

.cfu-upsell__timer {
	display: inline-block;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: 20px;
	background: #fef2f2;
	color: #b91c1c;
	font-size: 13px;
	font-weight: 700;
}

.cfu-upsell__image {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
	margin: 0 auto 14px;
	border-radius: 12px;
}

.cfu-upsell__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
}

.cfu-upsell__desc {
	margin: 0 0 12px;
	color: var(--cfu-muted, #6b7280);
	font-size: 14px;
}

.cfu-upsell__prices {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	margin-bottom: 16px;
}

.cfu-upsell__regular {
	color: var(--cfu-muted, #6b7280);
	text-decoration: line-through;
}

.cfu-upsell__price {
	font-size: 24px;
	font-weight: 800;
	color: var(--cfu-accent, #970096);
}

.cfu-upsell__saving {
	padding: 3px 10px;
	border-radius: 20px;
	background: #dcfce7;
	color: #15803d;
	font-size: 12px;
	font-weight: 700;
}

.cfu-upsell__accept {
	width: 100%;
	margin-bottom: 10px;
	padding: 15px 20px;
	border: 0;
	border-radius: var(--cfu-btn-radius, 10px);
	background: #16a34a;
	color: #fff;
	font-family: var(--cfu-font, inherit);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.cfu-upsell__accept:hover {
	filter: brightness(1.07);
}

.cfu-upsell__decline {
	width: 100%;
	padding: 10px;
	border: 0;
	background: none;
	color: var(--cfu-muted, #6b7280);
	font-family: var(--cfu-font, inherit);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

/* --------------------------------------------------------------- RTL bits */

.cfu-rtl,
.cfu-rtl .cfu-form {
	direction: rtl;
	text-align: right;
}

.cfu-rtl .cfu-tier__prices,
.cfu-rtl .cfu-bump__prices {
	align-items: flex-start;
}

/* ------------------------------------------------------------- Responsive */

@media (max-width: 480px) {
	.cfu-modal {
		padding: 0;
		align-items: flex-end;
	}

	.cfu-modal__dialog {
		max-width: 100%;
		/* A sliver of the page stays visible above the sheet, so it reads as a
		   sheet rather than a whole new screen. Percent, not vh: vh measures the
		   space behind the browser toolbars and would make the sheet too tall. */
		max-height: 92%;
		margin: 0;
		border-radius: var(--cfu-modal-radius, 14px) var(--cfu-modal-radius, 14px) 0 0;
	}

	.cfu-modal__body {
		padding: 54px 16px 24px;
	}

	/* The close button stays inside the sheet. It was pinned to the viewport to
	   survive the sheet drifting off the top of the screen; the sheet no longer
	   drifts, and a pinned button would now float above it over the page. */
	.cfu-modal .cfu-modal__close {
		width: 40px;
		height: 40px;
		box-shadow: 0 3px 14px rgba(0, 0, 0, .4);
	}

	.cfu-field--half {
		flex: 1 1 100%;
	}

	.cfu-fields--horizontal .cfu-field {
		flex-direction: column;
		align-items: stretch;
	}

	.cfu-fields--horizontal .cfu-label {
		flex: 1 1 auto;
	}
}

/* ------------------------------------------------- Per-unit option pickers */

.cfu-tier-wrap {
	margin-bottom: 10px;
}

.cfu-tiers--grid .cfu-tier-wrap {
	margin-bottom: 0;
}

.cfu-tier-wrap .cfu-tier {
	margin-bottom: 0;
}

/* The pickers belong to the tier above them, so they share its selected look. */
.cfu-units {
	margin: -2px 0 0;
	padding: 12px 14px 14px;
	border: 2px solid var(--cfu-unit-border, #970096);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	background: var(--cfu-unit-bg, #faf5fb);
}

.cfu-units[hidden] {
	display: none;
}

.cfu-tier-wrap.is-selected .cfu-tier {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* An add-on's own size and colour, shown only once it has been ticked. It
   hangs off the bottom of its row the way the per-piece pickers hang off a
   selected quantity tier, so the two read as the same idea. */
.cfu-bump-options {
	margin: -2px 0 0;
	padding: 10px 12px 12px;
	border: 2px solid var(--cfu-unit-border, #970096);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	background: var(--cfu-unit-bg, #faf5fb);
	display: flex;
	gap: 8px;
}

.cfu-bump-options[hidden] {
	display: none;
}

.cfu-bump-wrap.is-open .cfu-bump {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.cfu-bump-option {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cfu-bump-option__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--cfu-unit-label, #111);
}

.cfu-bump-option select {
	width: 100%;
	min-width: 0;
	min-height: 40px;
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: #fff;
	font-size: 14px;
}

/* Narrow screens stack them rather than squeezing two selects side by side. */
@media (max-width: 420px) {

	.cfu-bump-options {
		flex-direction: column;
	}
}

.cfu-unit {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.cfu-unit:last-of-type {
	margin-bottom: 0;
}

.cfu-unit__num {
	flex: 0 0 auto;
	min-width: 62px;
	font-size: 12px;
	font-weight: 700;
	color: var(--cfu-unit-label, #111);
}

.cfu-unit__selects {
	display: flex;
	flex: 1 1 auto;
	gap: 8px;
	min-width: 0;
}

.cfu-unit__select {
	flex: 1 1 0;
	min-width: 0;
	min-height: 40px;
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: #fff;
	font-size: 14px;
}

.cfu-units.has-error .cfu-unit__select {
	border-color: #dc2626;
}

.cfu-units .cfu-error {
	margin-top: 6px;
}

.cfu-units.has-error .cfu-error {
	display: block;
}

@media (max-width: 480px) {
	.cfu-unit {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
	}

	.cfu-unit__selects {
		width: 100%;
	}
}

/* Delivery option rows: name (and optional note) left, price right. */

.cfu-method__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cfu-method__body .cfu-method__label {
	flex: 0 0 auto;
	font-weight: 700;
}

.cfu-method__desc {
	font-size: 12px;
	font-weight: 400;
	color: var(--cfu-muted, #6b7280);
	line-height: 1.35;
}

.cfu-method__cost {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--cfu-text, #111);
}

.cfu-method.is-selected {
	background: var(--cfu-summary-bg, #faf5fb);
}

/* Offer card thumbnail — sits at the start of the card, beside the radio. */

.cfu-tier__image {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 8px;
	background: #f3f4f6;
}

.cfu-tiers--grid .cfu-tier__image {
	align-self: center;
	flex-basis: auto;
	width: 72px;
	height: 72px;
}

/* When the form owns the options, the theme's whole add-to-cart area goes —
   swatches, size buttons, quantity and all — otherwise the shopper is asked
   for the same colour twice, in two places, with only one of them counting. */

body.cfu-hide-variations.single-product form.cart,
body.cfu-hide-variations.single-product form.variations_form,
body.cfu-hide-variations.single-product .wd-swatches-product,
body.cfu-hide-variations.single-product .wd-reset-var,
body.cfu-hide-variations.single-product .reset_variations {
	display: none !important;
}


/* ---------------------------------------------- Right-to-left field layout */

/* Browsers render tel, email and number fields left-to-right regardless of the
   page direction. Left alone, the value sits on the wrong side of the box and
   collides with the icon, because a logical padding follows the input's own
   direction while the icon follows the container's. Physical properties keep
   the two in agreement: digits still read left-to-right, but the field and its
   icon stay on the right like every other field. */

.cfu-rtl .cfu-input,
.cfu-rtl .cfu-label,
.cfu-rtl .cfu-error,
.cfu-rtl .cfu-check__text {
	text-align: right;
}

.cfu-rtl input[type="tel"].cfu-input,
.cfu-rtl input[type="email"].cfu-input,
.cfu-rtl input[type="number"].cfu-input {
	direction: ltr;
	text-align: right;
}

.cfu-rtl .cfu-input-icon {
	right: 12px;
	left: auto;
}

.cfu-rtl .cfu-input-wrap--icon .cfu-input {
	padding-right: 38px;
	padding-left: 14px;
}

.cfu-rtl .cfu-qty__input {
	direction: ltr;
	text-align: center;
}