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

/* ----------------------------------------------------------------- *
 * Popup — vertical card: accent gradient banner (gift) over a white   *
 * body. Shown on cart and checkout only. Accent colours come from     *
 * --nw-accent / --nw-accent-dark, set on the overlay by the JS.       *
 * ----------------------------------------------------------------- */
.nudgewise-popup {
	position: fixed;
	inset: 0;
	z-index: 10000;
	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. */
.nudgewise-popup__card {
	position: relative !important;
	width: 100%;
	max-width: 480px;
	border-radius: 16px;
	overflow: visible !important;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.24);
}

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

.nudgewise-popup__banner {
	background: linear-gradient(135deg, var(--nw-accent-dark, #0d5f49) 0%, var(--nw-accent, #0f6e56) 100%);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.nudgewise-popup__gift-circle {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.25);
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nudgewise-popup__gift-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nudgewise-popup__gift-name {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	color: rgba(255, 255, 255, 0.85);
}

.nudgewise-popup__body {
	background: var(--nw-popup-body-bg, #fff);
	padding: 24px 28px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nudgewise-popup__headline {
	margin: 0;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	color: var(--nw-heading-color, #111) !important;
}

.nudgewise-popup__rec-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 13px;
	color: var(--nw-text-color, #555);
	overflow: hidden;
	white-space: nowrap;
}

.nudgewise-popup__rec-row strong {
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	color: var(--nw-heading-color, #111);
}

.nudgewise-popup__rec-price {
	margin: 0;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--nw-accent, #0f6e56);
}

.nudgewise-popup__rec-thumb {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid #e0e0e0;
	vertical-align: middle;
}

.nudgewise-popup__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

/* Buttons carry !important on every property a theme button reset touches. */
.nudgewise-popup__cta {
	display: block !important;
	box-sizing: border-box;
	width: 100%;
	padding: 13px 24px !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--nw-accent, #0f6e56) !important;
	background-color: var(--nw-accent, #0f6e56) !important;
	color: var(--nw-button-text, #fff) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !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: 1.35 !important;
}

.nudgewise-popup__cta:hover {
	filter: brightness(0.88);
	background: var(--nw-accent, #0f6e56) !important;
	background-color: var(--nw-accent, #0f6e56) !important;
	color: var(--nw-button-text, #fff) !important;
}

.nudgewise-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: #999 !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: 1.4 !important;
}

/* Popup close button — half outside the top-right corner of the card. */
.nudgewise-popup__close {
	position: absolute !important;
	top: -13px !important;
	right: -13px !important;
	z-index: 1;
	width: 30px !important;
	height: 30px !important;
	min-height: unset !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	border: 1.5px solid #e5e7eb !important;
	border-radius: 50% !important;
	background: #fff !important;
	background-color: #fff !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
	color: var(--nw-close-color, #555) !important;
	font-size: 18px !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;
}

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

/* Toast primary button. */
.nudgewise-toast__btn {
	flex-shrink: 0 !important;
	background: var(--nw-accent, #0f6e56) !important;
	background-color: var(--nw-accent, #0f6e56) !important;
	color: var(--nw-button-text, #fff) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 8px 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	text-shadow: none !important;
	letter-spacing: normal !important;
	min-height: unset !important;
	box-shadow: none !important;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1.2 !important;
	vertical-align: unset !important;
	transition: filter 150ms ease;
}

.nudgewise-toast__btn:hover {
	filter: brightness(0.88);
	background: var(--nw-accent, #0f6e56) !important;
	background-color: var(--nw-accent, #0f6e56) !important;
	color: var(--nw-button-text, #fff) !important;
}

/* Toast dismiss × — a circle flush inside the right end of the pill. */
.nudgewise-toast__close {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	flex-shrink: 0 !important;
	width: 28px !important;
	height: 28px !important;
	min-height: unset !important;
	padding: 0 !important;
	border: 1.5px solid #e5e7eb !important;
	border-radius: 50% !important;
	background: #fff !important;
	background-color: #fff !important;
	color: #6b7280 !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;
}

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

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

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

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

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

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

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

.nudgewise-interstitial__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--nw-heading-color, #1a1a1a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nudgewise-interstitial__msg {
	font-size: 13px;
	color: var(--nw-text-color, #777);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

.nudgewise-interstitial__btn {
	padding: 10px 20px !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--nw-accent, #0f6e56) !important;
	background-color: var(--nw-accent, #0f6e56) !important;
	color: var(--nw-button-text, #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;
}

.nudgewise-interstitial__btn:hover {
	filter: brightness(0.88);
	background: var(--nw-accent, #0f6e56) !important;
	background-color: var(--nw-accent, #0f6e56) !important;
	color: var(--nw-button-text, #fff) !important;
}

.nudgewise-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). */
.nudgewise-popup__body,
.nudgewise-interstitial__inner {
	font-size: var(--nw-font-size, 14px);
}

/* Keyboard focus visibility. */
.nudgewise-toast__btn:focus-visible,
.nudgewise-toast__close:focus-visible,
.nudgewise-popup__close:focus-visible,
.nudgewise-popup__cta:focus-visible,
.nudgewise-interstitial__btn:focus-visible,
.nudgewise-interstitial__close:focus-visible {
	outline: 2px solid var(--nw-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 */
.nudgewise--theme .nudgewise-interstitial__inner {
	background: var(--wp--preset--color--base, var(--nw-popup-bg, #f5f5f5));
}

.nudgewise--theme .nudgewise-interstitial__btn {
	background: var(--wp--preset--color--primary, var(--nw-button-bg, #1a1a1a));
}

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

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