/* ============================================================================
   WPFactory Checkout - V1 custom build
   Companion stylesheet for woocommerce/checkout/form-checkout.php +
   form-billing.php + review-order.php. Brand tokens come from
   wpfactory-globals.css (var(--purple), var(--grad), --bg-card, etc.).
   ============================================================================ */


/* ---------- 1. Storefront chrome neutralization --------------------------- */

/* Site header is intentionally NOT hidden - the customized header.php
   handles cart + checkout chrome itself. Only the site footer and the
   Storefront mobile handheld bar are hidden, since the sticky pay bar
   replaces them on checkout. */

body.woocommerce-checkout .site-footer,
body.woocommerce-checkout .storefront-handheld-footer-bar {
	display: none !important;
}

/* Kill the theme's legacy "right-50%-viewport" tint from frontend.css:7217.
   That pseudo-element paints the right half of the page #f9fbfd and shows
   through the sticky header's backdrop-filter blur, producing the
   "half-white header" artifact seen only on checkout. Applies to BOTH
   body.woocommerce-checkout AND the form.woocommerce-checkout wrapper,
   so the bare class selector is used (matches both elements). */
.woocommerce-checkout::after,
.woocommerce-checkout::before,
body.woocommerce-checkout::after,
body.woocommerce-checkout::before,
form.woocommerce-checkout::after,
form.woocommerce-checkout::before {
	content: none !important;
	display: none !important;
	background: transparent !important;
	width: 0 !important;
	height: 0 !important;
}

body.woocommerce-checkout {
	background: var(--bg);
	padding-bottom: 120px;
}

body.woocommerce-checkout .col-full,
body.woocommerce-checkout #content,
body.woocommerce-checkout #primary,
body.woocommerce-checkout #main,
body.woocommerce-checkout article.page,
body.woocommerce-checkout .entry-content {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
}

body.woocommerce-checkout .entry-header,
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout .page-title {
	display: none;
}

/* Coupon UI is not part of the V1 design; login stays but is restyled
   below in section 15. */
.wpf-checkout-page .woocommerce-form-coupon-toggle,
.wpf-checkout-page .woocommerce-form-coupon,
.wpf-checkout-page .checkout_coupon {
	display: none !important;
}


/* ---------- 2. Page wrapper ----------------------------------------------- */

.wpf-checkout-page {
	font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
}

.wpf-checkout-page *,
.wpf-checkout-page *::before,
.wpf-checkout-page *::after {
	box-sizing: border-box;
}

/* Force WC price markup (wraps every $ amount) to inherit color + weight
   from its parent. Storefront paints these dark by default and that dark
   color survives against our dark-mode backgrounds, making prices
   invisible. Scoped so it doesn't affect anything outside checkout. */
.wpf-checkout-page .amount,
.wpf-checkout-page bdi,
.wpf-checkout-page .woocommerce-Price-amount,
.wpf-checkout-page .woocommerce-Price-currencySymbol {
	color: inherit !important;
	font-weight: inherit;
	background: transparent;
}

/* Storefront and WC ship legacy 2-column checkout rules that float
   #order_review right (~46%) and #customer_details left. Our custom
   grid layout owns column widths, so neutralize those rules — otherwise
   the right column shrinks to 46% inside its own container and the
   "No account needed" line flows beside the float. */
.wpf-checkout-page #order_review,
.wpf-checkout-page #customer_details,
.wpf-checkout-page #payment {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0;
	padding: 0;
	clear: none;
}


/* ---------- 3. 2-col grid ------------------------------------------------- */

.wpf-co-grid {
	max-width: 1080px;
	margin: 0 auto;
	padding: 28px 24px 40px;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.wpf-co-left,
.wpf-co-right {
	min-width: 0;
}

@media (max-width: 900px) {
	.wpf-co-grid {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 20px 16px 32px;
	}
	.wpf-co-right {
		order: -1;
	}
}


/* ---------- 5. Tier picker ------------------------------------------------ */

.wpf-co-tier {
	margin-bottom: 24px;
}

.wpf-co-tier__kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--purple);
	margin: 0 0 10px;
}

.wpf-co-tier-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border-radius: var(--radius-lg);
	background: var(--bg-card);
	border: 1px solid var(--line);
	text-align: left;
	width: 100%;
	font-family: inherit;
	color: inherit;
	transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}

button.wpf-co-tier-card {
	cursor: pointer;
}

.wpf-co-tier-card:focus-visible {
	outline: 2px solid var(--indigo);
	outline-offset: 2px;
}

.wpf-co-tier-card--current {
	background: linear-gradient(135deg, rgba(138,99,205,.07) 0%, rgba(56,71,211,.07) 100%);
	border-color: var(--purple);
}

.wpf-co-tier-card__check {
	color: var(--purple);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpf-co-tier-card__body {
	flex: 1;
	min-width: 0;
}

.wpf-co-tier-card__title {
	font-weight: 700;
	font-size: 15px;
	color: var(--text);
	line-height: 1.3;
}

.wpf-co-tier-card__sep {
	color: var(--text-3);
	margin: 0 4px;
	font-weight: 400;
}

.wpf-co-tier-card__sub {
	font-size: 13px;
	color: var(--text-3);
	margin-top: 2px;
	line-height: 1.4;
}

.wpf-co-tier-card__price {
	text-align: right;
	font-weight: 700;
	font-size: 15px;
	color: var(--text);
	white-space: nowrap;
	flex-shrink: 0;
}

.wpf-co-tier-card__unit {
	font-weight: 400;
	color: var(--text-3);
	font-size: 13px;
}

.wpf-co-tier-card__save {
	display: block;
	margin-top: 4px;
	color: #008a4f;
	font-size: 12px;
	font-weight: 700;
}

.wpf-co-tier__head {
	margin: 22px 0 12px;
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.wpf-co-tier__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
	margin: 0;
}

.wpf-co-tier__handwritten {
	font-family: 'Caveat', 'Bradley Hand', 'Comic Sans MS', cursive;
	font-size: 19px;
	color: var(--purple);
	font-weight: 600;
}

.wpf-co-tier__cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.wpf-co-tier-card--upgrade {
	padding-top: 26px;
	background: var(--bg-card-2);
	border-color: var(--line);
}

.wpf-co-tier-card--upgrade:hover {
	border-color: var(--purple);
	box-shadow: var(--shadow-sm);
}

.wpf-co-tier-card--upgrade:active {
	transform: translateY(1px);
}

.wpf-co-tier-card__badge {
	position: absolute;
	top: -9px;
	left: 16px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	padding: 4px 9px;
	border-radius: 4px;
	line-height: 1;
}

.wpf-co-tier-card__badge--popular {
	background: var(--purple);
}

.wpf-co-tier-card__badge--value {
	background: var(--indigo);
}

.wpf-co-tier-card__badge--selected {
	background: #008a4f;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.wpf-co-tier-card__badge--selected::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bg-card);
	display: inline-block;
}

/* All-Access "you picked the best deal" celebration card. Reuses the
   upgrade-card frame but swaps the price slot for a large green check,
   adds an inline perks list, and paints a subtle mint tint. */
.wpf-co-tier-card--celebrated {
	background: linear-gradient(135deg, rgba(0, 138, 79, 0.06) 0%, rgba(1, 244, 160, 0.05) 100%);
	border-color: rgba(0, 138, 79, 0.35);
	padding-top: 28px;
	cursor: default;
	align-items: flex-start;
}

.wpf-co-tier-card--celebrated:hover {
	box-shadow: none;
	border-color: rgba(0, 138, 79, 0.45);
}

.wpf-co-tier-card--celebrated .wpf-co-tier-card__body {
	padding-right: 8px;
}

.wpf-co-tier-card__perks {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.wpf-co-tier-card__perks li {
	position: relative;
	padding: 3px 0 3px 20px;
	font-size: 13px;
	color: var(--text-2);
	line-height: 1.4;
}

.wpf-co-tier-card__perks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 12px;
	height: 12px;
	background: #008a4f;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.4-1.4z'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.4-1.4z'/></svg>") no-repeat center / contain;
}

.wpf-co-tier-card__check-lg {
	color: #008a4f;
	flex-shrink: 0;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wpf-co-tier__downgrade {
	margin: 14px 0 0;
	text-align: center;
}

.wpf-co-tier__downgrade-link {
	background: none;
	border: 0;
	color: var(--text-3);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-size: 13px;
	cursor: pointer;
	font-family: inherit;
	padding: 4px 6px;
}

.wpf-co-tier__downgrade-link:hover {
	color: var(--text);
}


/* Multi-item recap */
.wpf-co-multi-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-card-2);
	overflow: hidden;
}

.wpf-co-multi-item {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}

.wpf-co-multi-item:last-child {
	border-bottom: 0;
}

.wpf-co-multi-item__name {
	color: var(--text);
}

.wpf-co-multi-item__price {
	color: var(--text);
	font-weight: 600;
	white-space: nowrap;
}


/* ---------- 6. Section title --------------------------------------------- */

.wpf-co-section__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	margin: 28px 0 12px;
	letter-spacing: -0.01em;
}


/* ---------- 7. Billing + account fields ---------------------------------- */

.wpf-co-billing-fields .form-row,
.wpf-co-account-fields .form-row {
	margin: 0 0 14px;
	padding: 0;
}

.wpf-co-row--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}

.wpf-co-row--two .form-row {
	margin: 0;
	width: auto;
	float: none;
	clear: none;
}

.wpf-co-billing-fields label,
.wpf-co-billing-fields .woocommerce-input-wrapper,
.wpf-co-account-fields label,
.wpf-co-account-fields .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.wpf-co-billing-fields label,
.wpf-co-account-fields label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 6px;
	text-transform: none;
	letter-spacing: 0;
}

.wpf-co-billing-fields label .required,
.wpf-co-billing-fields label .optional,
.wpf-co-account-fields label .required,
.wpf-co-account-fields label .optional {
	color: transparent;
	font-size: 0;
}

.wpf-co-billing-fields input[type="text"],
.wpf-co-billing-fields input[type="email"],
.wpf-co-billing-fields input[type="tel"],
.wpf-co-billing-fields input[type="password"],
.wpf-co-billing-fields select,
.wpf-co-account-fields input[type="text"],
.wpf-co-account-fields input[type="email"],
.wpf-co-account-fields input[type="tel"],
.wpf-co-account-fields input[type="password"],
.wpf-co-account-fields select {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--bg-card-2);
	font-size: 15px;
	color: var(--text);
	font-family: inherit;
	height: 46px;
	line-height: 1.2;
	box-shadow: none;
}

.wpf-co-billing-fields input:focus,
.wpf-co-billing-fields select:focus,
.wpf-co-account-fields input:focus,
.wpf-co-account-fields select:focus {
	outline: none;
	border-color: var(--purple);
	box-shadow: 0 0 0 3px rgba(138, 99, 205, .15);
}

/* Password field: show/hide eye button (WC's .show-password-input) */
.wpf-co-account-fields .woocommerce-input-wrapper.password-input,
.wpf-co-billing-fields .woocommerce-input-wrapper.password-input {
	position: relative;
	display: block;
}

.wpf-co-account-fields .show-password-input,
.wpf-co-billing-fields .show-password-input {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-3);
	cursor: pointer;
	opacity: 0.8;
}

.wpf-co-account-fields .show-password-input:hover,
.wpf-co-billing-fields .show-password-input:hover {
	color: var(--purple);
	opacity: 1;
}

.wpf-co-account-fields .show-password-input::before,
.wpf-co-billing-fields .show-password-input::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 5c-7 0-11 7-11 7s4 7 11 7 11-7 11-7-4-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 5c-7 0-11 7-11 7s4 7 11 7 11-7 11-7-4-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/></svg>") no-repeat center / contain;
}

/* Account fields wrapper spacing (no repeat of the "Create account?" heading) */
.wpf-co-account-fields {
	margin-top: 4px;
}

.wpf-co-account-fields .create-account,
.wpf-co-account-fields__inner {
	margin: 0;
	padding: 0;
}

.wpf-co-field-help {
	font-size: 12px;
	color: var(--text-3);
	margin: -4px 0 14px;
	line-height: 1.5;
}

.wpf-co-vat-note {
	font-size: 12px;
	color: var(--text-3);
	margin: -4px 0 16px;
	line-height: 1.5;
}

.wpf-co-vat-note a {
	color: var(--purple);
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* ---------- 8. Payment --------------------------------------------------- */

.wpf-co-payment,
.wpf-checkout-page #payment,
.wpf-checkout-page .woocommerce-checkout-payment,
.wpf-checkout-page div#payment {
	background: transparent !important;
	border-radius: 0;
	padding: 0;
	margin-bottom: 16px;
}

/* Storefront's storefront-woocommerce inline CSS paints each payment method
   li #f5f5f5 via '#payment .payment_methods > li:not(.woocommerce-notice)'
   (specificity 0,3,1). Match specificity + !important to beat it. Also
   scope by #payment so our reset applies regardless of whether the
   wpf-co-payment class survives the fragment refresh. */
.wpf-checkout-page #payment .payment_methods > li:not(.woocommerce-notice),
.wpf-checkout-page #payment .wc_payment_methods > li {
	background: transparent !important;
	border-radius: 0;
	padding: 0;
	margin: 0 0 10px;
}

.wpf-checkout-page #payment .form-row.place-order,
.wpf-checkout-page .form-row.place-order {
	background: transparent !important;
	padding: 0;
}

.wpf-checkout-page #payment .wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wpf-checkout-page #payment .wc_payment_method {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

/* Payment method labels and radios stay visible so multi-gateway carts
   still let users pick between Stripe / PayPal / etc. Style them as
   compact rows above each payment_box. */
.wpf-checkout-page #payment .wc_payment_methods > li > label,
.wpf-checkout-page #payment .payment_methods > li > label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
}

.wpf-checkout-page #payment .wc_payment_methods > li > label img {
	display: inline-block;
	max-height: 22px;
	width: auto;
	margin-left: 4px;
	vertical-align: middle;
}

.wpf-checkout-page #payment .wc_payment_methods > li > input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: var(--purple);
	margin-right: 4px;
}

.wpf-recommended {
	display: inline-block;
	margin-left: 6px;
	color: var(--purple);
	font-weight: 700;
	font-size: 12px;
}

/* Initial payment-section loader. Shown until Stripe's iframe mounts
   (~2-4s cold load), then swapped out by JS. Failsafe hides after 8s
   even if Stripe never appears. */
.wpf-co-payment-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 30px 20px;
	background: var(--bg-card-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 10px;
	min-height: 80px;
}

.wpf-co-payment-loading.is-hidden {
	display: none;
}

.wpf-co-payment-loading__spinner {
	width: 22px;
	height: 22px;
	border: 3px solid rgba(138, 99, 205, 0.22);
	border-top-color: var(--purple);
	border-radius: 50%;
	animation: wpf-co-spin 0.8s linear infinite;
	flex-shrink: 0;
}

.wpf-co-payment-loading__text {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-2);
	letter-spacing: -0.01em;
}

.wpf-checkout-page #payment .payment_box,
.wpf-checkout-page #payment .payment_box.payment_method_cpsw_stripe,
.wpf-checkout-page #payment .payment_box.payment_method_ppcp,
.wpf-checkout-page #payment div.payment_box {
	background: var(--bg-card-2) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	padding: 14px !important;
	margin: 0 !important;
	color: var(--text) !important;
}

.wpf-checkout-page #payment .payment_box::before {
	display: none;
}

.wpf-checkout-page #payment .payment_box p:first-child {
	margin-top: 0;
}

.wpf-checkout-page #payment .payment_box p:last-child {
	margin-bottom: 0;
}

/* Stripe wrapper. Note: .cpsw-cc.StripeElement is rendered as a <span>
   (inline element) by CPSW. Force block so vertical padding lays out
   correctly and horizontal padding doesn't paint as two dark strips
   flanking the inner .__PrivateStripeElement iframe. */
.wpf-checkout-page #payment .cpsw-stripe-element-wrap,
.wpf-checkout-page #payment .cpsw_stripe_field_wrap,
.wpf-checkout-page #payment .StripeElement,
.wpf-checkout-page #payment span.StripeElement,
.wpf-checkout-page #payment .cpsw-cc {
	display: block;
	background: var(--bg-card);
	border-radius: var(--radius);
	padding: 12px 14px;
	border: 1px solid var(--line);
}

.wpf-checkout-page #payment .cpsw-stripe-elements-form {
	display: block;
}

.wpf-checkout-page #payment .StripeElement--focus {
	border-color: var(--purple);
	box-shadow: 0 0 0 3px rgba(138, 99, 205, .15);
}

.wpf-checkout-page #payment .StripeElement--invalid {
	border-color: var(--coral);
}

/* Hide default WC place_order button. display:none still allows
   programmatic .click() from the sticky bar (modern browsers fire
   the form's submit handler regardless of visibility). */
.wpf-checkout-page #payment #place_order,
#payment #place_order,
.woocommerce-checkout-payment #place_order {
	display: none !important;
}

/* Terms + privacy text */
.wpf-checkout-page #payment .woocommerce-terms-and-conditions-wrapper,
.wpf-checkout-page #payment .form-row.terms {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--text-3);
	line-height: 1.5;
}

.wpf-checkout-page #payment .woocommerce-terms-and-conditions-wrapper label,
.wpf-checkout-page #payment .form-row.terms label {
	font-size: 12px;
	color: var(--text-3);
	font-weight: 400;
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
}

.wpf-checkout-page #payment .woocommerce-privacy-policy-text,
.wpf-checkout-page #payment .woocommerce-privacy-policy-text p {
	font-size: 12px;
	color: var(--text-3);
	line-height: 1.5;
	margin: 8px 0;
}

.wpf-checkout-page #payment .woocommerce-privacy-policy-text a {
	color: var(--purple);
}


/* ---------- 9. Fineprint -------------------------------------------------- */

.wpf-co-fineprint {
	text-align: center;
	font-size: 12px;
	color: var(--text-3);
	margin: 12px 0 0;
	line-height: 1.5;
}

.wpf-co-fineprint--lock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.wpf-co-fineprint--lock svg {
	color: var(--text-3);
}


/* ---------- 10. Right column ---------------------------------------------- */

.wpf-co-right {
	position: sticky;
	top: 24px;
}

@media (max-width: 900px) {
	.wpf-co-right {
		position: static;
	}
}

.wpf-co-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 10px 14px;
	margin-bottom: 14px;
	font-size: 13px;
	color: var(--text);
	flex-wrap: wrap;
}

.wpf-co-rating__stars {
	color: #f5b300;
	letter-spacing: 1px;
	font-size: 14px;
}

.wpf-co-rating__num {
	font-weight: 700;
}

.wpf-co-rating__dot,
.wpf-co-rating__pipe {
	color: var(--text-3);
	margin: 0 2px;
}

.wpf-co-rating__count,
.wpf-co-rating__stores {
	color: var(--text-3);
}


/* Order summary card */

.wpf-co-summary {
	display: block;
}

.wpf-co-summary-card {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 18px 20px;
	box-shadow: var(--shadow-sm);
}

.wpf-co-summary-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.wpf-co-summary-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--grad);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}

.wpf-co-summary-card__title {
	font-size: 15px;
	font-weight: 700;
	margin: 0;
	color: var(--text);
}

.wpf-co-summary-card__items {
	display: flex;
	flex-direction: column;
}

.wpf-co-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 8px 0;
}

.wpf-co-summary-item:first-child {
	padding-top: 0;
}

.wpf-co-summary-item__main {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.wpf-co-summary-item__name {
	display: block;
	width: 100%;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	line-height: 1.35;
	word-break: normal;
	overflow-wrap: break-word;
}

/* Theme's class-checkout.php prepends a thumbnail wrapper to every cart
   item name on checkout. Our design has no thumbnails in the order
   summary, and the wrapper's legacy frontend.css styles fight our flex
   layout. Hide here, including the dl.variation duplicate that some
   plugins re-inject after we drop wc_get_formatted_cart_item_data. */
.wpf-co-summary-item__name .wpft-cart-item-thumb-wrapper,
.wpf-co-summary-item__main dl.variation {
	display: none;
}

.wpf-co-summary-item__tier {
	font-size: 13px;
	color: var(--text-3);
	margin-top: 3px;
	line-height: 1.4;
}

.wpf-co-summary-item__qty {
	color: var(--text-3);
	font-weight: 400;
}

.wpf-co-summary-item__price {
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
}

.wpf-co-summary-card__totals {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.wpf-co-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 6px 0;
	font-size: 14px;
}

.wpf-co-summary-row__label {
	color: var(--text-3);
}

.wpf-co-summary-row__value {
	font-weight: 600;
	color: var(--text);
	text-align: right;
}

.wpf-co-summary-row__value .amount,
.wpf-co-summary-row__value bdi {
	color: inherit;
	font-weight: inherit;
}

.wpf-co-summary-row--total {
	padding-top: 14px;
	padding-bottom: 4px;
	border-top: 1px solid var(--line);
	margin-top: 8px;
	align-items: center;
}

.wpf-co-summary-row--total .wpf-co-summary-row__label,
.wpf-co-summary-row--total .wpf-co-summary-row__value {
	color: var(--text);
	font-weight: 700;
}

.wpf-co-summary-row--total .wpf-co-summary-row__label {
	font-size: 15px;
}

.wpf-co-summary-row--total .wpf-co-summary-row__value {
	font-size: 22px;
	line-height: 1.15;
}

.wpf-co-summary-card__reassurances {
	list-style: none;
	margin: 14px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--line);
}

.wpf-co-summary-card__reassurances li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text-2);
	padding: 4px 0;
}

.wpf-co-summary-card__reassurances svg {
	color: var(--purple);
	flex-shrink: 0;
}

.wpf-co-acct {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--text-3);
	text-align: center;
	line-height: 1.5;
}


/* ---------- 11. Sticky bottom bar ---------------------------------------- */

.wpf-co-sticky {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--bg-card);
	border-top: 1px solid var(--line);
	box-shadow: 0 -4px 16px rgba(15, 20, 25, .06);
	z-index: 200;
}

.wpf-co-sticky__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.wpf-co-sticky__totalwrap {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	min-width: 110px;
}

.wpf-co-sticky__label {
	font-size: 11px;
	color: var(--text-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.wpf-co-sticky__amount {
	font-size: 18px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.2;
}

.wpf-co-sticky__amount .amount,
.wpf-co-sticky__amount bdi {
	color: inherit;
	font-weight: inherit;
}

.wpf-co-sticky__btn {
	flex: 1;
	background: var(--grad);
	color: #fff;
	border: 0;
	border-radius: 50px;
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	letter-spacing: 0.02em;
	transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
	box-shadow: 0 6px 18px -8px rgba(56, 71, 211, 0.45);
}

.wpf-co-sticky__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -10px rgba(56, 71, 211, 0.55);
}

.wpf-co-sticky__btn:active {
	transform: translateY(0);
}

.wpf-co-sticky__btn:disabled,
.wpf-co-sticky__btn.is-loading {
	opacity: 0.75;
	cursor: progress;
	transform: none;
}

.wpf-co-sticky__btn-label .amount,
.wpf-co-sticky__btn-label bdi {
	color: inherit;
	font-weight: inherit;
}

@media (max-width: 600px) {
	.wpf-co-sticky__inner {
		padding: 10px 16px;
		gap: 10px;
	}
	.wpf-co-sticky__btn {
		padding: 14px 16px;
		font-size: 15px;
	}
	.wpf-co-sticky__totalwrap {
		min-width: 90px;
	}
	.wpf-co-sticky__amount {
		font-size: 16px;
	}
}


/* ---------- 12. WC notice styling ---------------------------------------- */

.wpf-checkout-page .woocommerce-NoticeGroup,
.wpf-checkout-page .woocommerce-notices-wrapper {
	max-width: 1080px;
	margin: 16px auto 0;
	padding: 0 24px;
}

.wpf-checkout-page .woocommerce-error,
.wpf-checkout-page .woocommerce-info,
.wpf-checkout-page .woocommerce-message {
	background: var(--bg-card-2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--coral);
	border-radius: var(--radius);
	padding: 12px 16px;
	font-size: 14px;
	color: var(--text);
	list-style: none;
	margin: 0 0 12px;
}

.wpf-checkout-page .woocommerce-error::before,
.wpf-checkout-page .woocommerce-info::before,
.wpf-checkout-page .woocommerce-message::before {
	display: none;
}

.wpf-checkout-page .woocommerce-error li,
.wpf-checkout-page .woocommerce-info li,
.wpf-checkout-page .woocommerce-message li {
	margin: 0;
	padding: 0;
	color: var(--text);
}

.wpf-checkout-page .woocommerce-error a,
.wpf-checkout-page .woocommerce-info a,
.wpf-checkout-page .woocommerce-message a {
	color: var(--coral-deep);
	text-decoration: underline;
	font-weight: 600;
}

.wpf-checkout-page .woocommerce-error a:hover,
.wpf-checkout-page .woocommerce-info a:hover,
.wpf-checkout-page .woocommerce-message a:hover {
	color: var(--coral);
}

.wpf-checkout-page .form-row.woocommerce-invalid input,
.wpf-checkout-page .form-row.woocommerce-invalid .select2-selection {
	border-color: var(--coral);
}


/* ---------- 13. Loading state (during AJAX update_checkout) -------------- */

.wpf-checkout-page.processing,
.wpf-checkout-page .processing {
	opacity: 0.85;
	pointer-events: none;
}

.wpf-checkout-page .blockUI.blockOverlay {
	opacity: 0 !important;
}


/* ---------- 14. Tier swap overlay ---------------------------------------- */

.wpf-co-swap-overlay {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 500;
}

:root[data-theme="dark"] .wpf-co-swap-overlay {
	background: rgba(10, 14, 26, 0.82);
}

.wpf-co-swap-overlay.is-active {
	display: flex;
}

.wpf-co-swap-overlay__box {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	padding: 22px 28px;
	box-shadow: var(--shadow-purple), var(--shadow-md);
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: calc(100% - 32px);
	min-width: 320px;
	animation: wpf-co-overlay-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.wpf-co-swap-overlay__spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(138, 99, 205, 0.22);
	border-top-color: var(--purple);
	border-right-color: var(--indigo-light);
	border-radius: 50%;
	animation: wpf-co-spin 0.8s linear infinite;
	flex-shrink: 0;
}

.wpf-co-swap-overlay__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.wpf-co-swap-overlay__header {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.wpf-co-swap-overlay__label {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: opacity 0.32s ease, transform 0.32s ease;
	opacity: 1;
	transform: translateY(0);
	min-height: 1.3em;
}

.wpf-co-swap-overlay__label.is-fading {
	opacity: 0;
	transform: translateY(-6px);
}

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

@keyframes wpf-co-overlay-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpf-co-swap-overlay__spinner {
		animation-duration: 1.6s;
	}
	.wpf-co-swap-overlay__box {
		animation: none;
	}
	.wpf-co-swap-overlay__label {
		transition: opacity 0.2s linear;
	}
	.wpf-co-swap-overlay__label.is-fading {
		transform: none;
	}
}


/* ---------- 17. Coupon input (inside order summary card) ---------------- */

.wpf-co-coupon {
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-bottom: 1px dashed var(--line);
}

.wpf-co-coupon__toggle {
	background: none;
	border: 0;
	padding: 0;
	color: var(--purple);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color .15s ease;
}

.wpf-co-coupon__toggle:hover {
	color: var(--indigo);
}

.wpf-co-coupon__form {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.wpf-co-coupon__form[hidden] {
	display: none;
}

.wpf-co-coupon__input {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 10px 12px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--bg-card-2);
	color: var(--text);
	font-size: 14px;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wpf-co-coupon__input:focus {
	outline: none;
	border-color: var(--purple);
	box-shadow: 0 0 0 3px rgba(138, 99, 205, .15);
}

.wpf-co-coupon__apply {
	flex-shrink: 0;
	height: 40px;
	padding: 0 18px;
	border-radius: var(--radius);
	border: 0;
	background: var(--grad);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	letter-spacing: 0.02em;
	transition: transform .1s ease, opacity .15s ease;
}

.wpf-co-coupon__apply:hover {
	transform: translateY(-1px);
}

.wpf-co-coupon__apply:disabled,
.wpf-co-coupon__apply.is-loading {
	opacity: 0.7;
	cursor: progress;
	transform: none;
}

.wpf-co-coupon__error {
	margin: 8px 0 0;
	padding: 0;
	font-size: 12px;
	color: var(--coral);
	line-height: 1.4;
}

.wpf-co-coupon__error[hidden] {
	display: none;
}

/* When a coupon is already applied, the "Have a coupon?" toggle text
   is replaced by a smaller reminder — WC's remove-coupon link handles
   the actual removal within the discount row. */
.wpf-co-coupon[data-wpf-coupon-applied="1"] .wpf-co-coupon__toggle {
	color: var(--text-3);
	font-weight: 500;
	text-decoration: none;
	pointer-events: none;
}

.wpf-co-summary-row--coupon .wpf-co-summary-row__value .woocommerce-remove-coupon {
	margin-left: 6px;
	color: var(--purple);
	font-size: 11px;
	text-decoration: underline;
}


/* ---------- 16. Reviews carousel (right column, below order summary) ----
   Layout mirrors Blueprint D:
     - Arrows sit at top-right (their own row, above the card)
     - Card is separately tinted with --bg-card-2 (cream warm)
     - Dots sit below the card, centered
   Outer .wpf-co-reviews is a positioning container only. */

.wpf-co-reviews {
	margin-top: 20px;
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}

/* Arrows row - top right */
.wpf-co-reviews__arrows {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 10px;
}

.wpf-co-reviews__nav {
	width: 36px;
	height: 32px;
	border: 1px solid var(--line);
	background: var(--bg-card);
	color: var(--text-2);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--radius);
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
	box-shadow: var(--shadow-sm);
}

.wpf-co-reviews__nav:hover {
	color: var(--purple);
	border-color: var(--purple);
}

/* The tinted card */
.wpf-co-reviews__card {
	background: var(--bg-card-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 18px 20px;
	box-shadow: var(--shadow-sm);
}

.wpf-co-reviews__viewport {
	position: relative;
	min-height: 140px;
}

.wpf-co-review {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.wpf-co-review--active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
}

.wpf-co-review__stars {
	color: #f5b300;
	font-size: 15px;
	letter-spacing: 2px;
	margin-bottom: 10px;
	line-height: 1;
}

.wpf-co-review__quote {
	margin: 0 0 14px;
	padding: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-2);
	font-style: italic;
	border: 0;
}

.wpf-co-review__author {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wpf-co-review__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: block;
	flex-shrink: 0;
	object-fit: cover;
}

.wpf-co-review__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
}

/* Dots below the card, centered */
.wpf-co-reviews__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
}

.wpf-co-reviews__dot {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: 999px;
	background: var(--line-2);
	padding: 0;
	cursor: pointer;
	transition: width 0.25s ease, background 0.15s ease;
}

.wpf-co-reviews__dot--active {
	width: 24px;
	background: var(--purple);
}


/* ---------- 15. Returning customer notice + login form ------------------ */

/* The prehooks wrapper carries WC's login toggle, notices, and any other
   plugin injection from woocommerce_before_checkout_form. Contain it to
   the 1080px page width so it doesn't sit edge-to-edge. */
.wpf-co-prehooks {
	max-width: 1080px;
	margin: 0 auto;
	padding: 20px 24px 0;
}

@media (max-width: 900px) {
	.wpf-co-prehooks {
		padding: 16px 16px 0;
	}
}

/* "Returning customer? Click here to login" notice.
   Beat Storefront's default blue .woocommerce-info with brand tokens. */
.wpf-checkout-page .woocommerce-form-login-toggle {
	margin-bottom: 8px;
}

.wpf-checkout-page .woocommerce-form-login-toggle .woocommerce-info {
	background: var(--bg-card-2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--purple);
	border-top: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text-2);
	font-size: 14px;
	padding: 12px 16px;
	margin: 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.4;
}

.wpf-checkout-page .woocommerce-form-login-toggle .woocommerce-info::before {
	display: none;
}

.wpf-checkout-page .woocommerce-form-login-toggle .showlogin {
	color: var(--purple);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	margin-left: 2px;
}

.wpf-checkout-page .woocommerce-form-login-toggle .showlogin:hover {
	color: var(--indigo);
}

/* Inline login form that toggles open when the notice is clicked */
.wpf-checkout-page .woocommerce-form-login {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 20px;
	margin: 8px 0 16px;
	box-shadow: var(--shadow-sm);
}

.wpf-checkout-page .woocommerce-form-login p {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--text-3);
}

.wpf-checkout-page .woocommerce-form-login .form-row {
	margin: 0 0 12px;
	padding: 0;
	float: none;
	width: 100%;
}

.wpf-checkout-page .woocommerce-form-login label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 6px;
}

.wpf-checkout-page .woocommerce-form-login label .required {
	color: transparent;
	font-size: 0;
}

.wpf-checkout-page .woocommerce-form-login input[type="text"],
.wpf-checkout-page .woocommerce-form-login input[type="email"],
.wpf-checkout-page .woocommerce-form-login input[type="password"] {
	width: 100%;
	height: 46px;
	padding: 12px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--bg-card-2);
	font-size: 15px;
	font-family: inherit;
	color: var(--text);
	box-shadow: none;
}

.wpf-checkout-page .woocommerce-form-login input:focus {
	outline: none;
	border-color: var(--purple);
	box-shadow: 0 0 0 3px rgba(138, 99, 205, .15);
}

.wpf-checkout-page .woocommerce-form-login .form-row.form-row-first,
.wpf-checkout-page .woocommerce-form-login .form-row.form-row-last {
	width: 100%;
	margin: 0 0 12px;
}

.wpf-checkout-page .woocommerce-form-login button[type="submit"],
.wpf-checkout-page .woocommerce-form-login .woocommerce-button {
	background: var(--grad);
	color: #fff;
	border: 0;
	padding: 12px 22px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	letter-spacing: 0.02em;
	box-shadow: var(--shadow-sm);
	transition: transform .1s ease, box-shadow .15s ease;
}

.wpf-checkout-page .woocommerce-form-login button[type="submit"]:hover,
.wpf-checkout-page .woocommerce-form-login .woocommerce-button:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-purple);
}

.wpf-checkout-page .woocommerce-form-login .lost_password {
	margin: 8px 0 0;
	font-size: 13px;
}

.wpf-checkout-page .woocommerce-form-login .lost_password a {
	color: var(--purple);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wpf-checkout-page .woocommerce-form-login .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-3);
	font-weight: 400;
	margin-bottom: 0;
}