/* WALoops Express Checkout for WooCommerce — cart drawer + shared drawer/panel chrome
   (checkout.css builds on the same .wlec-drawer/.wlec-overlay/.wlec-panel
   classes, only the checkout panel's own contents live in checkout.css). */

:root {
	--wlec-ink: #15171e;
	--wlec-ink-soft: #62676f;
	--wlec-accent: #b8860b;
	--wlec-accent-soft: #fbf3e6;
	--wlec-accent-border: #f0e2c4;
	--wlec-border: #ececec;
	--wlec-bg-muted: #f6f6f7;
	--wlec-success: #157347;
	--wlec-success-bg: #eafaf0;
	--wlec-danger: #b3261e;
	--wlec-radius: 10px;
	--wlec-radius-pill: 999px;
	--wlec-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* Fallback CTA colors, used only until (or unless) cart-drawer.js's
	   applyThemeColors() finds the active theme's real WooCommerce
	   .button.button-primary color and overrides --wlec-accent/-soft/-border
	   and these two on :root — see that function for why. */
	--wlec-cta-bg: var(--wlec-ink);
	--wlec-cta-color: #fff;
}

/*
 * Scoped reset — themes routinely style bare h2/h3/p/a/button/input/ul/img
 * selectors globally, and box-sizing assumptions vary by theme too. Without
 * this, whichever active theme decides how our headings/buttons/inputs look,
 * not us. Every rule below is scoped under .wlec-drawer/.wlec-cart-toggle so it
 * can never leak out and affect the rest of the site.
 */
.wlec-drawer,
.wlec-drawer *,
.wlec-cart-toggle {
	box-sizing: border-box;
}

.wlec-drawer {
	font-family: var(--wlec-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--wlec-ink);
	text-align: left;
}

/*
 * Everything below uses :where(...) around the element list on purpose —
 * :where() always contributes zero specificity, so this reset never
 * outranks (or fights, on ties) an actual component rule further down this
 * file or in checkout.css, no matter which loads/declares later. Without
 * this, a plain single-class component selector like .wlec-otp-code loses a
 * specificity tie to ".wlec-drawer input" (class + element beats class
 * alone) and silently has its font-size/border-radius reset back to the
 * defaults below — this bit us once already, worth keeping the guard clear.
 */
.wlec-drawer :where(h1, h2, h3, h4, p) {
	margin: 0;
	padding: 0;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	color: inherit;
}

.wlec-drawer :where(ul, ol) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wlec-drawer :where(a) {
	text-decoration: none;
	color: inherit;
}

.wlec-drawer :where(img) {
	display: block;
	max-width: 100%;
	border: none;
}

.wlec-drawer :where(input, button, select, textarea) {
	font-family: inherit;
	font-size: 14px;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	background-image: none;
	border-radius: 0;
}

.wlec-drawer :where(input, button, select, textarea):focus {
	outline: none;
}

.wlec-drawer button {
	cursor: pointer;
}

.wlec-cart-toggle {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99990;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	/* Defaults to the theme's own brand color (see applyThemeColors() in
	   cart-drawer.js, which reads it from WooCommerce's .button.button-primary)
	   — the admin's cart_fab_bg_color setting overrides this via an inline
	   style in cart-drawer.php, which always wins over this rule. */
	background: var(--wlec-cta-bg);
	color: var(--wlec-cta-color);
	border: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wlec-cart-toggle:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.wlec-cart-toggle:active {
	transform: scale(0.96);
}

.wlec-cart-toggle-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #d4341f;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	box-shadow: 0 0 0 2px var(--wlec-cta-bg);
}

.wlec-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	pointer-events: none;
}

/* WordPress's own #wpadminbar is fixed at the very top of the viewport
   (32px desktop / 46px on screens <= 782px) when a logged-in user has it
   enabled. Our drawer previously started at the same top:0, so the bar sat
   visually on top of (and cut through) our header — this pushes the whole
   drawer down below it instead. */
body.admin-bar .wlec-drawer {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .wlec-drawer {
		top: 46px;
	}
}

.wlec-drawer[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
}

.wlec-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.wlec-drawer[aria-hidden="false"] .wlec-overlay {
	opacity: 1;
}

.wlec-drawer .wlec-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 420px;
	max-width: 92vw;
	background: #fff;
	box-shadow: -6px 0 24px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.25s ease;
}

.wlec-drawer[aria-hidden="false"] .wlec-panel {
	transform: translateX(0);
}

.wlec-toast {
	position: absolute;
	left: 16px;
	right: 16px;
	top: 68px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--wlec-ink, #14141e);
	color: #fff;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 12.5px;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.wlec-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.wlec-toast-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wlec-panel-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--wlec-border);
}

.wlec-panel-header h2 {
	flex: 1;
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--wlec-ink);
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.wlec-item-count {
	font-size: 12px;
	font-weight: 500;
	color: var(--wlec-ink-soft);
}

.wlec-close,
.wlec-back {
	flex-shrink: 0;
	background: var(--wlec-bg-muted) !important;
	border: none !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border-radius: 50% !important;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--wlec-ink-soft) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	transition: background-color 0.15s ease;
}

.wlec-close:hover,
.wlec-back:hover {
	background: var(--wlec-border) !important;
}

.wlec-panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
}

.wlec-panel-footer {
	border-top: 1px solid var(--wlec-border);
	padding: 16px 20px 20px;
	box-shadow: 0 -8px 20px rgba(20, 20, 30, 0.04);
}

.wlec-savings-banner {
	background: var(--wlec-success-bg);
	color: var(--wlec-success);
	font-size: 12.5px;
	font-weight: 700;
	padding: 9px 12px;
	border-radius: var(--wlec-radius);
	margin-bottom: 10px;
}

.wlec-prepaid-hint {
	background: var(--wlec-bg-muted);
	color: var(--wlec-ink-soft);
	font-size: 11.5px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: var(--wlec-radius);
	margin-bottom: 12px;
}

.wlec-totals-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
	font-size: 13px;
}

.wlec-totals-row span:first-child {
	color: var(--wlec-ink-soft);
}

.wlec-totals-row span:last-child {
	color: var(--wlec-ink);
	font-weight: 600;
}

.wlec-totals-discount span {
	color: var(--wlec-success) !important;
}

.wlec-totals-total {
	margin-top: 6px;
	padding-top: 12px;
	margin-bottom: 14px;
	border-top: 1px dashed var(--wlec-border);
}

.wlec-totals-total span:first-child {
	font-size: 14px;
	font-weight: 600;
	color: var(--wlec-ink);
}

.wlec-totals-total span:last-child {
	font-size: 19px;
	font-weight: 700;
	color: var(--wlec-ink);
}

.wlec-checkout-btn,
.wlec-place-order,
.wlec-address-continue,
.wlec-delivery-continue,
.wlec-save-address {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--wlec-cta-bg) !important;
	color: var(--wlec-cta-color) !important;
	border: none !important;
	border-radius: var(--wlec-radius-pill) !important;
	padding: 14px 0 !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.wlec-checkout-btn:hover:not(:disabled),
.wlec-place-order:hover:not(:disabled),
.wlec-address-continue:hover:not(:disabled),
.wlec-delivery-continue:hover:not(:disabled),
.wlec-save-address:hover:not(:disabled) {
	opacity: 0.88;
}

.wlec-checkout-btn:disabled,
.wlec-place-order:disabled {
	background-color: #ccc !important;
	cursor: not-allowed;
}

/* Bundle progress bar — lives inside the scrollable .wlec-panel-body (not
   pinned between the header and it) so it scrolls away with the rest of
   the cart contents instead of staying stuck on screen. */
.wlec-bundle-bar {
	margin: 0 0 12px;
	padding: 8px 10px;
	background: var(--wlec-accent-soft);
	border: 1px solid var(--wlec-accent-border);
	border-radius: var(--wlec-radius);
	font-size: 12px;
	font-weight: 600;
	color: var(--wlec-ink);
}

/* Stepped like the reference design: a thin line with a numbered "dot" at
   each tier's item-count threshold, its discount % below it, and the fill
   growing along the line as the cart approaches/passes each one. */
.wlec-bundle-bar-track {
	position: relative;
	height: 28px;
	margin-top: 10px;
}

.wlec-bundle-bar-line,
.wlec-bundle-bar-fill {
	position: absolute;
	left: 0;
	top: 8px;
	height: 3px;
	border-radius: 2px;
}

.wlec-bundle-bar-line {
	right: 0;
	background: var(--wlec-accent-border);
}

.wlec-bundle-bar-fill {
	background: var(--wlec-accent);
	transition: width 0.3s ease;
}

.wlec-bundle-step {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.wlec-bundle-step-dot {
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: #fff;
	border: 2px solid var(--wlec-accent-border);
	color: var(--wlec-ink-soft);
	font-size: 9px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wlec-bundle-step.is-reached .wlec-bundle-step-dot {
	background: var(--wlec-accent);
	border-color: var(--wlec-accent);
	color: #fff;
}

.wlec-bundle-step-pct {
	font-size: 10px;
	font-weight: 600;
	color: var(--wlec-ink-soft);
	white-space: nowrap;
}

.wlec-bundle-step.is-reached .wlec-bundle-step-pct {
	color: var(--wlec-accent);
}

/* Cart items */
.wlec-cart-item {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wlec-border);
}

.wlec-cart-item:last-child {
	border-bottom: none;
}

/* A row whose quantity change or removal is still being confirmed by the
   server: dimmed, unclickable, with a spinner over it. */
.wlec-cart-item {
	position: relative;
}

.wlec-cart-item.is-updating {
	pointer-events: none;
}

.wlec-cart-item.is-updating > * {
	opacity: 0.45;
}

.wlec-cart-item.is-updating::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border: 2px solid var(--wlec-border);
	border-top-color: var(--wlec-ink);
	border-radius: 50%;
	animation: wlec-row-spin 0.7s linear infinite;
}

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

.wlec-cart-item img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--wlec-radius);
	background: var(--wlec-bg-muted);
	flex-shrink: 0;
}

.wlec-cart-item-info {
	flex: 1;
	min-width: 0;
}

.wlec-cart-item-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wlec-ink);
	line-height: 1.35;
	margin: 0 0 12px;
}

.wlec-qty-controls {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: var(--wlec-radius-pill);
}

/* !important throughout: many themes/page builders apply a global reset to
   every bare <button> (min-width/min-height "tap target" sizing, a solid
   background fill, extra padding) that otherwise stretches these tiny icon
   buttons into distorted pills/blocks instead of a clean 28px circle. */
.wlec-qty-controls button {
	background: none !important;
	border: none !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	cursor: pointer;
	color: var(--wlec-ink-soft) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}

.wlec-qty-controls button:hover {
	background: var(--wlec-bg-muted) !important;
}

.wlec-qty-controls span {
	min-width: 24px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
}

.wlec-cart-item-price {
	text-align: right;
	font-size: 13px;
	font-weight: 600;
	color: var(--wlec-ink);
	white-space: nowrap;
}

/* Same chrome as .wlec-close (small muted circle), but with a danger-tinted
   hover state since this one is destructive. */
.wlec-remove-item {
	background: none !important;
	border: none !important;
	width: 26px !important;
	height: 26px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin-top: 6px;
	border-radius: 50% !important;
	color: #bbb !important;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wlec-remove-item:hover {
	background: #fbeae8 !important;
	color: var(--wlec-danger) !important;
}

.wlec-empty-cart {
	text-align: center;
	padding: 36px 10px 28px;
}

.wlec-empty-cart-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wlec-bg-muted);
	font-size: 26px;
	margin-bottom: 14px;
}

.wlec-empty-cart-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--wlec-ink);
	margin: 0 0 4px;
}

.wlec-empty-cart-sub {
	font-size: 12.5px;
	color: var(--wlec-ink-soft);
	margin: 0 0 18px;
}

.wlec-browse-products.button {
	display: inline-block;
	background: var(--wlec-cta-bg) !important;
	color: var(--wlec-cta-color) !important;
	border: none !important;
	border-radius: var(--wlec-radius-pill) !important;
	padding: 11px 26px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none;
}

/* Upsell */
.wlec-upsell-block {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px dashed var(--wlec-border);
}

.wlec-upsell-block h3 {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wlec-ink-soft);
	margin: 0 0 8px;
}

.wlec-upsell-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: 8px;
	padding: 2px 2px 8px;
}

/* Deliberately small/compact — this is a secondary strip, not the point of
   the drawer, so it should read as "a few suggestions" at a glance rather
   than compete with the actual cart items above it. Grid items stretch to
   equal height by default, and the button's margin-top:auto pins it to the
   same bottom edge on every card regardless of how many lines the name/price
   above it wrap to (a 1-line vs 2-line price no longer knocks buttons out of
   alignment with each other). */
.wlec-upsell-item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wlec-border);
	border-radius: 8px;
	padding: 6px;
	text-align: center;
	background: #fff;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.wlec-upsell-item:hover {
	box-shadow: 0 4px 10px rgba(20, 20, 30, 0.08);
	transform: translateY(-1px);
}

.wlec-upsell-item img {
	width: 100%;
	height: 56px;
	object-fit: contain;
	border-radius: 6px;
	background: var(--wlec-bg-muted);
	padding: 4px;
	box-sizing: border-box;
}

.wlec-upsell-item-name {
	font-size: 10.5px;
	font-weight: 500;
	color: var(--wlec-ink);
	margin: 6px 0 3px;
	line-height: 1.25;
	height: 2.2em;
	overflow: hidden;
}

.wlec-upsell-item-price {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--wlec-ink);
	line-height: 1.25;
	/* Fixed to 2 lines' worth regardless of whether this product's price is
	   a single value or wraps to a range + "(ex VAT)" suffix — without this,
	   a 1-line price left more room above its card's button than a 2-line
	   price did on the next card, so the buttons didn't line up even though
	   they were all bottom-pinned within an equal-height row. Plain block
	   (not flex) on purpose: WooCommerce's price HTML is several inline
	   <span>s (amount, range separator, the "(ex VAT)" suffix) that need to
	   wrap onto a second line like normal text — display:flex here made them
	   flex items instead (no-wrap by default), forcing them onto one row
	   that overflowed and got hard-clipped by overflow:hidden below.
	   text-align:center is inherited from .wlec-upsell-item. */
	height: 2.5em;
	overflow: hidden;
	margin-bottom: 6px;
}

.wlec-upsell-add {
	display: block;
	width: 100%;
	margin-top: auto;
	font-size: 9.5px;
	font-weight: 600;
	padding: 5px 0 !important;
	border-radius: var(--wlec-radius-pill) !important;
	background-color: var(--wlec-cta-bg) !important;
	color: var(--wlec-cta-color) !important;
	border: none !important;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
	transition: opacity 0.15s ease;
}

.wlec-upsell-add:hover {
	opacity: 0.85;
}

/* Coupon */
.wlec-coupon-block {
	margin-top: 20px;
}

.wlec-coupon-row {
	display: flex;
	gap: 8px;
}

.wlec-coupon-input {
	flex: 1;
	border: 1px solid #ddd;
	border-radius: var(--wlec-radius-pill);
	padding: 10px 16px;
	font-size: 13px;
}

.wlec-coupon-input:focus {
	outline: none;
	border-color: var(--wlec-cta-bg);
}

.wlec-apply-coupon {
	border-radius: var(--wlec-radius-pill) !important;
	padding: 10px 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	background: #fff !important;
	border: 1px solid var(--wlec-cta-bg) !important;
	color: var(--wlec-cta-bg) !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wlec-apply-coupon:hover {
	background: var(--wlec-cta-bg) !important;
	color: var(--wlec-cta-color) !important;
}

.wlec-applied-coupons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}

.wlec-coupon-chip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--wlec-success-bg);
	border-radius: var(--wlec-radius);
	padding: 10px 12px;
}

.wlec-coupon-chip-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--wlec-success);
	color: #fff;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wlec-coupon-chip-body {
	flex: 1;
	min-width: 0;
}

.wlec-coupon-chip-code {
	font-size: 13px;
	font-weight: 700;
	color: var(--wlec-ink);
	text-transform: uppercase;
}

.wlec-coupon-chip-applied {
	text-transform: none;
	font-weight: 500;
	color: var(--wlec-success);
	margin-left: 4px;
}

.wlec-coupon-chip-desc {
	font-size: 11.5px;
	color: var(--wlec-ink-soft);
	margin-top: 2px;
}

.wlec-coupon-chip-remove {
	flex-shrink: 0;
	margin-top: 2px;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--wlec-ink-soft) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-decoration: underline;
	cursor: pointer;
}

.wlec-coupon-chip-remove:hover {
	color: var(--wlec-danger) !important;
}

.wlec-offers-toggle {
	display: inline-block;
	margin-top: 8px;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--wlec-ink-soft) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-decoration: underline;
	cursor: pointer;
}

/* "Coupons for you" popup — always centered/modal regardless of the
   merchant's sidebar/popup checkout_mode setting, since it's a small nested
   dialog rather than a primary screen. */
.wlec-coupons-popup .wlec-panel {
	top: 50%;
	right: auto;
	left: 50%;
	width: 420px;
	max-width: 92vw;
	height: auto;
	max-height: 85vh;
	border-radius: 16px;
	transform: translate(-50%, -48%) scale(0.98);
	opacity: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.wlec-coupons-popup[aria-hidden="false"] .wlec-panel {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.wlec-coupons-popup-total {
	font-size: 14px;
	font-weight: 700;
	color: var(--wlec-ink);
}

.wlec-offers-list {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wlec-offer-card {
	border: 1px solid var(--wlec-border);
	border-radius: var(--wlec-radius);
	overflow: hidden;
}

.wlec-offer-card.is-applied {
	border-color: var(--wlec-accent);
}

.wlec-offer-card.is-locked {
	opacity: 0.6;
}

.wlec-offer-card-main {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px;
}

.wlec-offer-card-icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--wlec-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wlec-offer-card-info {
	flex: 1;
	min-width: 0;
}

.wlec-offer-card-code {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--wlec-ink);
}

.wlec-offer-card-save {
	font-size: 12px;
	font-weight: 600;
	color: var(--wlec-accent);
	margin-top: 2px;
}

.wlec-offer-card-tag {
	display: inline-block;
	margin-top: 8px;
	padding: 3px 10px;
	border: 1px dashed var(--wlec-border);
	border-radius: 5px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--wlec-ink-soft);
	letter-spacing: 0.02em;
}

.wlec-offer-card-details {
	flex-shrink: 0;
	align-self: flex-start;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--wlec-ink-soft) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	cursor: pointer;
	white-space: nowrap;
}

.wlec-offer-card-details-panel {
	padding: 0 12px 10px 52px;
	font-size: 11px;
	color: var(--wlec-ink-soft);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wlec-offer-card-apply {
	display: block;
	width: 100%;
	border: none !important;
	border-top: 1px solid var(--wlec-border) !important;
	border-radius: 0 !important;
	padding: 10px 0 !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em;
	background: var(--wlec-accent-soft) !important;
	color: var(--wlec-accent) !important;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.wlec-offer-card-apply:hover:not(:disabled) {
	opacity: 0.8;
}

.wlec-offer-card-apply:disabled {
	background: var(--wlec-bg-muted) !important;
	color: var(--wlec-ink-soft) !important;
	cursor: default;
}

.wlec-offers-loading,
.wlec-offers-empty {
	padding: 20px 12px;
	font-size: 12px;
	color: var(--wlec-ink-soft);
	text-align: center;
}

.wlec-cart-error,
.wlec-step-error {
	color: #b3261e;
	font-size: 12px;
	min-height: 1em;
	margin: 8px 0 0;
}

/* AOV Booster: free-shipping progress bar (cart drawer + checkout) */
.wlec-fs-bar {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: var(--wlec-radius, 10px);
	font-size: 12px;
	font-weight: 600;
	color: #0c4a6e;
}

.wlec-fs-bar[hidden] {
	display: none;
}

.wlec-fs-bar.is-reached {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #166534;
}

.wlec-fs-track {
	height: 6px;
	margin-top: 8px;
	border-radius: 999px;
	background: rgba(15, 23, 42, .1);
	overflow: hidden;
}

.wlec-fs-fill {
	height: 100%;
	border-radius: 999px;
	background: #0ea5e9;
	transition: width .4s ease;
}

.wlec-fs-bar.is-reached .wlec-fs-fill {
	background: #22c55e;
}