/*
 * CW Store Promos — the welcome offer's popup and basket banner.
 *
 * Tokens come from the theme (cw-bricks-child/assets/css/cw-tokens.css) with a
 * literal fallback on every one, because these two elements render on any page,
 * including ones the theme's token sheet may not be loaded on.
 *
 * Colour is deliberately restrained. The token file quarantines --cw-rewards
 * blue to rewards and money zones and reserves --cw-campaign-amber for promo
 * banners, and this is arguably all three at once — which is exactly how you
 * end up with a garish popup. So: amber for the small eyebrow only, brand lime
 * for the one action, and everything else plain. The My Family Rewards line
 * gets the rewards blue because that IS its zone, at text weight, not as a
 * panel competing with the CTA.
 *
 * z-index sits at 1000000, matching the theme's own auth popup, so it clears
 * the mobile bottom tab bar at 999999. It is a CENTRED modal on purpose: the
 * bottom-right corner already holds FunnelKit's lime cart bubble and the quote
 * nudge, and a third floating thing there would be a pile-up.
 */

.cwsp-offer-modal {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .2s ease;
}

.cwsp-offer-modal.is-open {
	opacity: 1;
}

.cwsp-offer-scrim {
	position: absolute;
	inset: 0;
	background: rgba( 38, 50, 56, .55 );
	backdrop-filter: blur( 2px );
	-webkit-backdrop-filter: blur( 2px );
}

.cwsp-offer-card {
	position: relative;
	width: 100%;
	max-width: 408px;
	box-sizing: border-box;
	padding: 26px 26px 22px;
	background: var( --cw-card, #fff );
	color: var( --cw-ink-2, #52575a );
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba( 38, 50, 56, .08 ), 0 24px 48px -12px rgba( 38, 50, 56, .35 );
	text-align: left;
	transform: translateY( 8px ) scale( .98 );
	transition: transform .2s ease;
	font-size: 15px;
	line-height: 1.5;
}

.cwsp-offer-modal.is-open .cwsp-offer-card {
	transform: none;
}

.cwsp-offer-x {
	position: absolute;
	top: 8px;
	right: 8px;
	/* Above .cwsp-offer-loading (z-index 1) — the close button must stay
	 * pressable while an address check is in flight. */
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --cw-faint, #9a9a94 );
	font-size: 26px;
	line-height: 1;
	border-radius: 8px;
	cursor: pointer;
}

.cwsp-offer-x:hover,
.cwsp-offer-x:focus-visible {
	background: var( --cw-ground, #f7f7f5 );
	color: var( --cw-ink, #263238 );
}

.cwsp-offer-eyebrow {
	margin: 0 0 10px;
	display: inline-block;
	padding: 3px 9px;
	border-radius: 4px;
	background: var( --cw-amber-tint, #fdf4e6 );
	color: var( --cw-amber, #9a6414 );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.cwsp-offer-heading {
	margin: 0 0 6px;
	color: var( --cw-ink, #263238 );
	font-size: 25px;
	line-height: 1.2;
	font-weight: 700;
}

.cwsp-offer-amount {
	color: var( --cw-lime-dark, #4c7000 );
}

.cwsp-offer-sub {
	margin: 0 0 16px;
	font-size: 14px;
}

.cwsp-offer-list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var( --cw-line, #e7e5df );
}

.cwsp-offer-list li {
	position: relative;
	margin: 0;
	padding: 9px 0 9px 24px;
	border-bottom: 1px solid var( --cw-line, #e7e5df );
	font-size: 14px;
}

.cwsp-offer-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 16px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --cw-lime, #80bc00 );
}

.cwsp-offer-list strong {
	color: var( --cw-ink, #263238 );
}

.cwsp-offer-list .cwsp-offer-rewards strong {
	color: var( --cw-rewards, #185aa6 );
}

.cwsp-offer-cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 0;
	font-family: inherit;
	cursor: pointer;
	padding: 13px 18px;
	background: var( --cw-lime, #80bc00 );
	color: var( --cw-olive, #16210a );
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.cwsp-offer-cta:hover,
.cwsp-offer-cta:focus-visible {
	background: var( --cw-lime-deep, #5f8c00 );
	color: #fff;
}

.cwsp-offer-fine {
	margin: 12px 0 0;
	color: var( --cw-grey, #6b6b6b );
	font-size: 12px;
	line-height: 1.45;
}

/* ── The basket banner ──────────────────────────────────────────────────────
 * A near miss, or a confirmation. Sits directly above the basket lines, in the
 * lime wash so it reads as an opportunity rather than the amber/brick the rest
 * of the system uses for problems.
 */

.cwsp-offer-banner {
	display: block;
	margin: 0 0 14px;
	padding: 13px 15px;
	border: 1px solid var( --cw-lime-line, #dcecb8 );
	background: var( --cw-lime-wash, #f3f9e4 );
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.45;
	color: var( --cw-ink-2, #52575a );
}

.cwsp-offer-banner-mark {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var( --cw-lime, #80bc00 );
	color: var( --cw-olive, #16210a );
	font-size: 13px;
	font-weight: 700;
}

.cwsp-offer-banner-text {
	display: block;
}

.cwsp-offer-banner-text strong {
	display: block;
	color: var( --cw-ink, #263238 );
}

.cwsp-offer-banner.is-on {
	border-color: var( --cw-lime, #80bc00 );
}

@media ( max-width: 420px ) {
	.cwsp-offer-card {
		padding: 22px 18px 18px;
	}

	.cwsp-offer-heading {
		font-size: 22px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cwsp-offer-modal,
	.cwsp-offer-card {
		transition: none;
	}
}

/* ── The "Get deal" qualifier steps ─────────────────────────────────────────
 * The modal shell is above; these are the pieces the flow swaps into it.
 * Deliberately restrained: one accent (brand lime for the action), amber only
 * for the small eyebrow, and the rewards blue kept to the one line that IS the
 * rewards zone. See the colour note at the top of this file.
 */

.cwsp-offer-body {
	display: block;
}

.cwsp-offer-back {
	display: inline-block;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var( --cw-grey, #6b6b6b );
	font-size: 13px;
	cursor: pointer;
}

.cwsp-offer-back:hover {
	color: var( --cw-ink, #263238 );
	text-decoration: underline;
}

.cwsp-offer-eyebrow.is-good {
	background: var( --cw-lime-wash, #f3f9e4 );
	color: var( --cw-lime-dark, #4c7000 );
}

.cwsp-offer-eyebrow.is-bad {
	background: var( --cw-amber-tint, #fdf4e6 );
	color: var( --cw-amber, #9a6414 );
}

/* Secondary action: a real button, but never competing with the lime one. */
.cwsp-offer-alt {
	display: block;
	width: 100%;
	margin: 8px 0 0;
	padding: 11px 16px;
	border: 1px solid var( --cw-line-2, #d6d3ca );
	background: #fff;
	color: var( --cw-ink-2, #52575a );
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
}

.cwsp-offer-alt:hover {
	border-color: var( --cw-ink-2, #52575a );
	color: var( --cw-ink, #263238 );
}

.cwsp-offer-err {
	margin: 10px 0 0;
	color: var( --cw-brick, #a3372c );
	font-size: 13px;
}

/* Delivery / collect switch */
.cwsp-seg {
	display: flex;
	gap: 6px;
	margin: 0 0 14px;
	padding: 4px;
	background: var( --cw-ground, #f7f7f5 );
	border-radius: 10px;
}

.cwsp-seg-btn {
	flex: 1 1 0;
	padding: 9px 10px;
	border: 0;
	background: transparent;
	color: var( --cw-ink-2, #52575a );
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.cwsp-seg-btn.is-on {
	background: #fff;
	color: var( --cw-ink, #263238 );
	box-shadow: 0 1px 2px rgba( 38, 50, 56, .12 );
}

.cwsp-pane {
	margin: 0 0 4px;
}

.cwsp-field {
	margin: 0 0 10px;
}

.cwsp-field label {
	display: block;
	margin: 0 0 4px;
	color: var( --cw-ink-2, #52575a );
	font-size: 13px;
	font-weight: 600;
}

.cwsp-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var( --cw-line-2, #d6d3ca );
	border-radius: 8px;
	background: #fff;
	color: var( --cw-ink, #263238 );
	font-size: 15px; /* 16px-ish: anything smaller makes iOS zoom the page */
}

.cwsp-field input:focus {
	outline: 2px solid var( --cw-lime, #80bc00 );
	outline-offset: 1px;
	border-color: var( --cw-lime, #80bc00 );
}

.cwsp-pair {
	display: flex;
	gap: 10px;
}

.cwsp-pair .cwsp-field {
	flex: 1 1 0;
	min-width: 0;
}

/* Collection branch choices */
.cwsp-radio {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 8px;
	padding: 11px 12px;
	border: 1px solid var( --cw-line, #e7e5df );
	border-radius: 8px;
	cursor: pointer;
}

.cwsp-radio:hover {
	border-color: var( --cw-lime, #80bc00 );
	background: var( --cw-lime-row, #f9fcf0 );
}

.cwsp-radio input {
	margin: 2px 0 0;
	flex: 0 0 auto;
}

.cwsp-radio strong {
	display: block;
	color: var( --cw-ink, #263238 );
	font-size: 14px;
}

.cwsp-radio small {
	display: block;
	margin: 2px 0 0;
	color: var( --cw-grey, #6b6b6b );
	font-size: 12px;
	line-height: 1.4;
}

/* The small label above the fact box, naming what it is before the shopper
 * reads the date — "Next delivery" rather than a bare "Monday 14 Sep". */
.cwsp-fact-label {
	margin: 0 0 4px;
	color: var( --cw-grey, #6b6b6b );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* The delivery day + price we got back from the real quote */
.cwsp-fact {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: baseline;
	margin: 0 0 14px;
	padding: 11px 13px;
	background: var( --cw-lime-wash, #f3f9e4 );
	border: 1px solid var( --cw-lime-line, #dcecb8 );
	border-radius: 8px;
	font-size: 14px;
}

.cwsp-fact strong {
	color: var( --cw-ink, #263238 );
}

.cwsp-fact span {
	color: var( --cw-lime-dark, #4c7000 );
	font-weight: 700;
	white-space: nowrap;
}

/* "These are in your basket and cannot go there" */
.cwsp-warn {
	margin: 0 0 14px;
	padding: 12px 13px;
	background: var( --cw-amber-tint, #fdf4e6 );
	border: 1px solid var( --cw-amber-line, #ecdcc0 );
	border-radius: 8px;
	font-size: 13px;
	color: var( --cw-amber-ink, #3d2000 );
}

.cwsp-warn strong {
	display: block;
	margin: 0 0 6px;
}

.cwsp-warn ul {
	margin: 0 0 6px;
	padding: 0 0 0 18px;
}

.cwsp-warn li {
	margin: 2px 0;
}

.cwsp-warn small {
	display: block;
	color: var( --cw-amber, #9a6414 );
}

/* The account step */
.cwsp-who {
	margin: 4px 0 0;
	padding: 13px;
	border: 1px solid var( --cw-rewards-line, #cdddf0 );
	background: var( --cw-rewards-tint, #e9f1fa );
	border-radius: 8px;
}

.cwsp-who strong {
	display: block;
	color: var( --cw-rewards, #185aa6 );
	font-size: 15px;
}

.cwsp-who small {
	display: block;
	margin: 3px 0 11px;
	color: var( --cw-ink-2, #52575a );
	font-size: 13px;
	line-height: 1.45;
}

/* ── The progress bar ───────────────────────────────────────────────────────
 * Lives inside the basket banner. Counts UP to the offer rather than warning
 * about a shortfall — the same fact, framed as progress.
 */

.cwsp-offer-banner-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.cwsp-bar {
	margin: 11px 0 0;
}

.cwsp-bar-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: baseline;
	margin: 0 0 5px;
	font-size: 13px;
}

.cwsp-bar-head strong {
	color: var( --cw-ink, #263238 );
}

.cwsp-bar-pct {
	color: var( --cw-grey, #6b6b6b );
	font-variant-numeric: tabular-nums;
}

.cwsp-bar-track {
	height: 8px;
	background: #fff;
	border: 1px solid var( --cw-lime-line, #dcecb8 );
	border-radius: 999px;
	overflow: hidden;
}

.cwsp-bar-fill {
	height: 100%;
	width: 0;
	background: var( --cw-lime, #80bc00 );
	border-radius: 999px;
	transition: width .35s ease;
}

.cwsp-bar.is-done .cwsp-bar-fill {
	background: var( --cw-lime-deep, #5f8c00 );
}

@media ( prefers-reduced-motion: reduce ) {
	.cwsp-bar-fill {
		transition: none;
	}
}

/* ── The bar inside FunnelKit's slide-out cart ──────────────────────────────
 * Most shoppers never open /basket/ — they add something and this panel slides
 * out — so the bar has to live here too. Sits at the top of the panel body,
 * above the items, matching where it sits on the basket page.
 */

.cwsp-side-offer {
	/* ⚠ .fkcart-slider-body is display:grid, so an inserted child becomes a
	 * grid ITEM and gets stretched to the row height — measured 297px for a
	 * ~60px bar. `align-self: start` stops the stretch and the full-width span
	 * keeps it a banner rather than one cell of whatever column count
	 * FunnelKit happens to be using. */
	align-self: start;
	grid-column: 1 / -1;
	height: auto;
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid var( --cw-lime-line, #dcecb8 );
	background: var( --cw-lime-wash, #f3f9e4 );
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var( --cw-ink-2, #52575a );
}

.cwsp-side-offer.is-on {
	border-color: var( --cw-lime, #80bc00 );
}

.cwsp-side-head {
	display: flex;
	gap: 10px;
	align-items: center;
}

.cwsp-side-head strong {
	color: var( --cw-ink, #263238 );
}

.cwsp-side-offer .cwsp-bar {
	margin: 0;
}

.cwsp-side-note {
	margin: 8px 0 0;
	color: var( --cw-ink-2, #52575a );
	font-size: 12.5px;
}

/* ── The "checking your address" overlay ────────────────────────────────────
 * Reported live: the button-text-only "Checking…" state was easy to miss on a
 * request that can take a couple of seconds (geocode + the catchment/offers
 * engine), and read as the click having done nothing. This covers the whole
 * card instead — impossible to miss — while leaving the close button (z-index
 * 2, see .cwsp-offer-x) pressable so the modal can still be dismissed.
 */

.cwsp-offer-loading {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 26px;
	background: rgba( 255, 255, 255, .97 );
	border-radius: 14px; /* matches .cwsp-offer-card */
	text-align: center;
	opacity: 0;
	transition: opacity .15s ease;
}

.cwsp-offer-loading.is-in {
	opacity: 1;
}

.cwsp-offer-loading p {
	margin: 0;
	max-width: 26em;
	color: var( --cw-ink, #263238 );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.cwsp-spinner {
	width: 34px;
	height: 34px;
	border: 3px solid var( --cw-lime-line, #dcecb8 );
	border-top-color: var( --cw-lime, #80bc00 );
	border-radius: 50%;
	animation: cwsp-spin .8s linear infinite;
}

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

@media ( prefers-reduced-motion: reduce ) {
	.cwsp-offer-loading {
		transition: none;
	}
	.cwsp-spinner {
		animation-duration: 2.4s;
	}
}

/* ── The inline "sign in" CTA ────────────────────────────────────────────────
 * Used wherever a near-miss reason is `guest` — the basket/checkout banner and
 * the side-cart bar. Was plain, unclickable text ("Sign in or create an
 * account to use this offer.") with nothing to press; this is a real button,
 * small enough to sit inside either banner without competing with the R50
 * headline above it, but unmistakably lime so it reads as the one thing to do.
 */

.cwsp-inline-signin {
	display: inline-block;
	margin: 10px 0 0;
	padding: 8px 14px;
	border: 0;
	background: var( --cw-lime, #80bc00 );
	color: var( --cw-olive, #16210a );
	border-radius: 7px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.cwsp-inline-signin:hover,
.cwsp-inline-signin:focus-visible {
	background: var( --cw-lime-deep, #5f8c00 );
	color: #fff;
}

/*
 * The banner's "Join My Family Rewards" tick (state.reason === 'no_rewards').
 * Its button reuses .cwsp-inline-signin so the two near-miss CTAs (sign in /
 * join rewards) never look like different features.
 */

.cwsp-rewards-join {
	margin-top: 10px;
}

.cwsp-rewards-phone {
	margin-top: 10px;
}

.cwsp-rewards-phone label {
	display: block;
	font-size: 12px;
	color: inherit;
	opacity: 0.85;
}

.cwsp-rewards-phone input {
	display: block;
	width: 100%;
	max-width: 260px;
	margin-top: 4px;
	padding: 7px 10px;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	border-radius: 6px;
	font-size: 13px;
	font-family: inherit;
}

.cwsp-rewards-msg {
	margin: 6px 0 0;
	font-size: 12px;
	color: #b3261e;
}

/*
 * The coupon-preview row painted into the REAL checkout review table
 * (Subtotal / Coupon / Delivery / Total) for a guest who has ticked Join
 * Family Rewards and already qualifies — see paintCouponPreview() in
 * welcome-offer.js. Styled to match cwd-delivery's own Delivery row
 * (tr.cwd-review-delivery in cwd-delivery/assets/css/checkout.css) so the
 * two rows read as one table, not two different features bolted together.
 */

tr.cwsp-coupon-preview th {
	font-weight: 700;
	color: var( --cw-lime-dark, #4c7000 );
}

tr.cwsp-coupon-preview .cwsp-coupon-preview__note {
	display: block;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.35;
	color: var( --cw-faint, #9a9a94 );
}

tr.cwsp-coupon-preview td {
	color: var( --cw-lime-dark, #4c7000 );
	font-weight: 700;
	white-space: nowrap;
}