/**
 * CartSlap storefront styles.
 *
 * Three components — popup, interstitial, notice bar (toast). All colours come
 * from the --cs-* custom properties injected at runtime from the merchant's
 * settings (see injectDesignTokens in cartslap-storefront.js). Typography is
 * deliberately never set here so it inherits from the active theme.
 *
 * @package CartSlap
 */

/* ----------------------------------------------------------------- *
 * Popup — vertical card: the product on white above the message on a  *
 * fixed pastel ground. Cart and checkout only. --cs-accent (set on    *
 * the overlay by the JS) colours the CTA and the thumbnail border.    *
 * ----------------------------------------------------------------- */

/*
 * Copy colour is a setting now, in two roles: the prompt's own message
 * (--cs-text-primary) and the quieter product caption, price and decline link
 * (--cs-text-secondary). Both are injected from the store's settings by
 * injectDesignTokens(); the fallbacks here are the design's own values.
 *
 * Copy sitting ON the accent — the popup's message half, the FREE tag — keeps
 * --cs-accent-ink instead, computed per accent, because no fixed colour is safe
 * on a fill a merchant chooses. Same reasoning as --cs-action-ink on buttons.
 */
:root {
	--cs-text-primary: #177567;
	--cs-text-secondary: #1e1e1e;
	--cs-action: #334acc;
}


.cartslap-popup {
	position: fixed;
	inset: 0;

	/*
	 * Above the notice (99996) and the interstitial (99997). The popup is modal:
	 * it took a backdrop click to dismiss, so nothing may sit on top of it.
	 */
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	padding: 16px;
	box-sizing: border-box;
}

/* Outer card — overflow:visible so the close button protrudes. */
.cartslap-popup__card {
	position: relative !important;
	width: 100%;
	max-width: 407px;
	border-radius: 10px;
	overflow: visible !important;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}

/* Inner wrapper — overflow:hidden clips content to the rounded corners. */
.cartslap-popup__inner {
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/*
 * The card is two halves: the product on white at the top, the message on a
 * coloured ground below. They used to be the other way round — an accent
 * gradient banner over a white body — so the class names moved with the roles
 * rather than being left describing the old layout.
 */
.cartslap-popup__product {
	background: #fff;
	padding: 25px 25px 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/*
 * Thumbnail column. The FREE tag sits flush on top of the image and matches its
 * width, so the two read as one object; the image is square-cornered by design.
 */
.cartslap-popup__thumb-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}

.cartslap-popup__tag,
.cartslap-toast__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0 5px;
	box-sizing: border-box;
	background: var(--cs-accent, #33ccb5);
	color: var(--cs-accent-ink, #fff);
	font-size: 13px;
	font-weight: 700;
	line-height: 17px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	white-space: nowrap;
}

.cartslap-popup__thumb {
	width: 100px;
	height: 100px;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid var(--cs-accent, #33ccb5);
	overflow: hidden;
}

.cartslap-popup__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cartslap-popup__product-name {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	color: var(--cs-text-primary, #177567);
}

.cartslap-popup__product-price {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	color: var(--cs-text-secondary, #1e1e1e);
	opacity: 0.7;
}

/*
 * Message half. Its ground is the accent, so anything drawn on it takes the
 * computed accent ink rather than a fixed white — a pale accent would otherwise
 * leave the message unreadable.
 */
.cartslap-popup__body {
	background: var(--cs-accent, #33ccb5);
	padding: 25px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.cartslap-popup__headline {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
	color: var(--cs-accent-ink, #fff) !important;
}

/*
 * Suggested product — a white card inset on the accent ground. When present it
 * carries the only call to action, so the surface never shows two competing
 * ones (see the two columns of the design frame).
 */
.cartslap-suggested {
	box-sizing: border-box;
	width: 100%;
	background: #fff;
	border: 1px solid var(--cs-action, #334acc);
	border-radius: 5px;
	padding: 5px 10px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.cartslap-suggested__label {
	margin: 0;
	width: 100%;
	font-size: 13px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	text-transform: uppercase;

	/*
	 * Secondary, not the action colour: this is a label on white, so a pale
	 * button colour would have made it unreadable — the same trap the computed
	 * button label avoids.
	 */
	color: var(--cs-text-secondary, #1e1e1e);
}

.cartslap-suggested__row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.cartslap-suggested__thumb {
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.cartslap-suggested__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cartslap-suggested__name {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	color: var(--cs-text-secondary, #1e1e1e);
}

.cartslap-suggested__price {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	color: var(--cs-text-secondary, #1e1e1e);
	opacity: 0.7;
}

.cartslap-suggested__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding-top: 10px;
	width: 100%;
}

.cartslap-popup__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
}

.cartslap-popup__cta {
	display: inline-block !important;
	box-sizing: border-box;
	width: auto;
	padding: 10px 15px !important;
	border: none !important;
	border-radius: 50px !important;
	background: var(--cs-action, #334acc) !important;
	background-color: var(--cs-action, #334acc) !important;
	color: var(--cs-action-ink, #fff) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	transition: filter 150ms ease !important;
	box-shadow: none !important;
	min-height: unset !important;
	vertical-align: unset !important;
	line-height: 20px !important;
}

.cartslap-popup__cta:hover {
	filter: brightness(0.88);
	background: var(--cs-action, #334acc) !important;
	background-color: var(--cs-action, #334acc) !important;
	color: var(--cs-action-ink, #fff) !important;
}

.cartslap-popup__no-thanks {
	display: inline !important;
	width: auto !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--cs-text-secondary, #1e1e1e) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	text-decoration: underline !important;
	text-transform: none !important;
	text-shadow: none !important;
	cursor: pointer !important;
	min-height: unset !important;
	box-shadow: none !important;
	line-height: 20px !important;
}

/* Popup close button — half outside the top-right corner of the card. */
.cartslap-popup__close {
	position: absolute !important;

	/*
	 * Centred on the card's top-right corner, per the design: a 24px icon whose
	 * middle lands exactly on the corner, so it half-overlaps the card.
	 */
	top: -12px !important;
	right: -12px !important;
	z-index: 1;
	width: 24px !important;
	height: 24px !important;
	min-height: unset !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	border: 1px solid var(--cs-accent, #33ccb5) !important;
	border-radius: 50% !important;
	background: #fff !important;
	background-color: #fff !important;
	box-shadow: none !important;
	color: var(--cs-accent, #33ccb5) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	text-shadow: none !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background 150ms ease, color 150ms ease !important;
}

.cartslap-popup__close:hover {
	background: #f3f4f6 !important;
	background-color: #f3f4f6 !important;
	color: #111 !important;
}

/*
 * The notice reports its state through its ground: the ask colour while the
 * shopper still has something to do, the unlocked colour once the reward is
 * theirs. A product prompt reports as qualified while its product is missing,
 * which is an ask, so the JS keys the modifier on the confirmation state rather
 * than on `qualified`.
 */

/*
 * Inline cart notice. White card with an accent border, and unlike the earlier
 * design there is no colour difference between asking and unlocked: the copy
 * and the CTA label carry the state on their own.
 */
.cartslap-toast {
	background: #fff !important;
	border: 1px solid var(--cs-accent, #33ccb5) !important;
}

/* With a suggestion the notice stacks: copy above, suggested card below. */
.cartslap-toast__column {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

/* Thumbnail and copy travel together, closer to each other than to the CTA. */
.cartslap-toast__group {
	display: flex;
	align-items: center;
	gap: 10px;

	/*
	 * Must be allowed to shrink. With flex-shrink:0 a long message refused to
	 * wrap, so the copy ran past the card's edge and shoved the CTA and the ×
	 * out onto the page.
	 */
	flex: 1;
	min-width: 0;
}

.cartslap-toast__thumb-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 75px;
	flex-shrink: 0;
}

.cartslap-toast__thumb {
	width: 75px;
	height: 75px;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid var(--cs-accent, #33ccb5);
	overflow: hidden;
}

.cartslap-toast__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
	min-width: 0;

	/*
	 * break-word, NOT anywhere. `anywhere` also drops the flex item's min-content
	 * width to a single character, which let this column collapse to ~30px on a
	 * phone and broke the message mid-word on every line.
	 */
	overflow-wrap: break-word;
}

.cartslap-toast__message {
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	color: var(--cs-text-primary, #177567);
}

.cartslap-toast__caption {
	font-size: 15px;
	font-weight: 700;
	line-height: 19px;
	color: var(--cs-text-secondary, #1e1e1e);
}

.cartslap-toast__btn {
	flex-shrink: 0 !important;
	text-decoration: none !important;
	background: var(--cs-action, #334acc) !important;
	background-color: var(--cs-action, #334acc) !important;
	color: var(--cs-action-ink, #fff) !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 10px 15px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	letter-spacing: normal !important;
	min-height: unset !important;
	box-shadow: none !important;
	cursor: pointer;
	white-space: nowrap;
	line-height: 20px !important;
	vertical-align: unset !important;
	transition: filter 150ms ease;
}

.cartslap-toast__btn:hover {
	filter: brightness(0.88);
	background: var(--cs-action, #334acc) !important;
	background-color: var(--cs-action, #334acc) !important;
	color: var(--cs-action-ink, #fff) !important;
}

/* Toast dismiss × — a circle flush inside the right end of the pill. */
.cartslap-toast__close {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	flex-shrink: 0 !important;

	/* Top-aligned, as the design draws it, not floating mid-card. */
	align-self: flex-start !important;
	width: 24px !important;
	height: 24px !important;
	min-height: unset !important;
	padding: 0 !important;
	border: 1px solid var(--cs-accent, #33ccb5) !important;
	border-radius: 50% !important;
	background: #fff !important;
	background-color: #fff !important;
	color: var(--cs-accent, #33ccb5) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	margin-left: 2px !important;
	transition: background 150ms ease, color 150ms ease !important;
}

.cartslap-toast__close:hover {
	background: #f3f4f6 !important;
	background-color: #f3f4f6 !important;
	color: #111 !important;
}

/* ----------------------------------------------------------------- *
 * Interstitial — bottom banner that slides up, one row.              *
 * ----------------------------------------------------------------- */
.cartslap-interstitial {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99997;
	transform: translateY(100%);
	transition: transform 0.3s ease-out;
}

.cartslap-interstitial.is-in {
	transform: translateY(0);
}

.cartslap-interstitial__inner {
	max-width: 600px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--cs-interstitial-bg, #fff);
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

.cartslap-interstitial__thumb {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #f0f0f0;
	overflow: hidden;
}

.cartslap-interstitial__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cartslap-interstitial__text {
	flex: 1;
	min-width: 0;
}

.cartslap-interstitial__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--cs-text-secondary, #1e1e1e);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cartslap-interstitial__msg {
	font-size: 13px;
	color: var(--cs-text-primary, #177567);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cartslap-interstitial__action {
	flex-shrink: 0;
}

.cartslap-interstitial__btn {
	padding: 10px 20px !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--cs-accent, #0f6e56) !important;
	background-color: var(--cs-accent, #0f6e56) !important;
	color: var(--cs-accent-ink, #fff) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	text-shadow: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	min-height: unset !important;
	box-shadow: none !important;
	line-height: 1.2 !important;
	vertical-align: unset !important;
	transition: filter 150ms ease !important;
}

.cartslap-interstitial__btn:hover {
	filter: brightness(0.88);
	background: var(--cs-accent, #0f6e56) !important;
	background-color: var(--cs-accent, #0f6e56) !important;
	color: var(--cs-accent-ink, #fff) !important;
}

.cartslap-interstitial__close {
	width: 24px !important;
	height: 24px !important;
	min-height: unset !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	border-radius: 50% !important;
	background: #f0f0f0 !important;
	background-color: #f0f0f0 !important;
	color: #888 !important;
	font-size: 16px !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	line-height: 1 !important;
}

/* Base font size from the font-size setting (the toast sets it inline). */
.cartslap-popup__body,
.cartslap-interstitial__inner {
	font-size: var(--cs-font-size, 14px);
}

/* Keyboard focus visibility. */
.cartslap-toast__btn:focus-visible,
.cartslap-toast__close:focus-visible,
.cartslap-popup__close:focus-visible,
.cartslap-popup__cta:focus-visible,
.cartslap-interstitial__btn:focus-visible,
.cartslap-interstitial__close:focus-visible {
	outline: 2px solid var(--cs-close-color, #2d7d6f);
	outline-offset: 2px;
}

/*
 * "Follow my theme" mode: pull component backgrounds from WordPress
 * global-style (theme.json) presets, falling back to our tokens so themes
 * that don't expose these vars still render correctly.
 */
/* stylelint-disable-next-line no-descending-specificity */
.cartslap--theme .cartslap-interstitial__inner {
	background: var(--wp--preset--color--base, var(--cs-interstitial-bg, #fff));
}

.cartslap--theme .cartslap-interstitial__btn {
	background: var(--wp--preset--color--primary, var(--cs-accent, #33ccb5));
}

/*
 * Phones. The notice is a fixed-width pill at 634px on desktop; on a 390px
 * screen the 75px thumbnail and the 20px gap left the message wrapping to three
 * lines beside a picture nobody needed that large.
 */
@media ( max-width: 480px ) {

	.cartslap-toast__thumb-col,
	.cartslap-toast__thumb {
		width: 48px;
	}

	.cartslap-toast__thumb {
		height: 48px;
	}

	.cartslap-toast__tag {
		font-size: 10px;
		letter-spacing: 0.06em;
		line-height: 14px;
	}

	.cartslap-toast__message {
		font-size: 15px;
		line-height: 19px;
	}

	.cartslap-toast__caption {
		font-size: 13px;
		line-height: 16px;
	}

	/*
	 * Stack on a phone. The notice is only 300px wide there, and a thumbnail,
	 * two lines of copy, a pill and a × will not share that: the copy gets a
	 * full-width row of its own and the controls wrap beneath it.
	 */
	.cartslap-toast {
		flex-wrap: wrap;
	}

	.cartslap-toast__group {
		flex: 1 1 100%;
	}

	.cartslap-toast__btn {
		padding: 8px 12px !important;
		font-size: 13px !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.cartslap-popup,
	.cartslap-interstitial {
		transition: none;
	}
}