/**
 * Offer popup — "Your First Order Just Got Better!"
 *
 * Scoped entirely to .hpf-offer / .hpf-offer-tab so it cannot reach any other
 * component. Colours are the design's own raspberry/cream/gold rather than the
 * theme's lighter --rw-pink, matching the supplied artwork.
 *
 * @package HPF_Trickle_Up
 */

.hpf-offer,
.hpf-offer-tab {
	--o-pink: #a93b5d;
	--o-pink-deep: #933250;
	--o-cream: #fdf4e3;
	--o-gold: #e0a63c;
	--o-radius: 14px;
	--o-pad: clamp(20px, 5.5vw, 30px);
}

/* =========================================================
 * Floating tab — right edge, vertically centred, fixed so it
 * rides along with the scroll.
 * =======================================================*/
.hpf-offer-tab {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99990;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 11px;
	border: 0;
	border-radius: 12px 0 0 12px;
	background: var(--o-pink);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .45);
	transition: background .2s ease, padding-right .2s ease, box-shadow .2s ease;
}

.hpf-offer-tab__text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg); /* reads bottom-to-top */
	font-family: var(--hrp-head, 'Quicksand', system-ui, sans-serif);
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .04em;
	white-space: nowrap;
	line-height: 1;
}

.hpf-offer-tab:hover {
	background: var(--o-pink-deep);
	padding-right: 15px;
	box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .55);
}

.hpf-offer-tab:focus-visible {
	outline: 3px solid var(--o-gold);
	outline-offset: 3px;
}

/* =========================================================
 * Dialog shell
 * =======================================================*/
.hpf-offer[hidden] { display: none; }

.hpf-offer {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.hpf-offer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(24, 8, 14, .62);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .28s ease;
}

.hpf-offer__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 32px);
	overflow: auto;
	border-radius: var(--o-radius);
	background: var(--o-pink);
	box-shadow: 0 30px 70px -18px rgba(0, 0, 0, .6);
	opacity: 0;
	transform: translateY(18px) scale(.96);
	transition: opacity .32s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1);
}

/* `is-open` is added a frame after the dialog is shown, so the browser has a
   start value to animate from. */
.hpf-offer.is-open .hpf-offer__backdrop { opacity: 1; }
.hpf-offer.is-open .hpf-offer__panel { opacity: 1; transform: none; }

/* Closing runs the same transition in reverse before the element is hidden. */
.hpf-offer.is-closing .hpf-offer__backdrop { opacity: 0; }
.hpf-offer.is-closing .hpf-offer__panel { opacity: 0; transform: translateY(10px) scale(.97); }

/* Lock the page without letting it jump sideways when the scrollbar goes. */
html.hpf-offer-open { overflow: hidden; }
html.hpf-offer-open body { padding-right: var(--hpf-offer-sbw, 0px); }

/* =========================================================
 * Close button
 * =======================================================*/
.hpf-offer__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	opacity: .9;
	transition: background .2s ease, opacity .2s ease;
}
.hpf-offer__close svg { width: 17px; height: 17px; }
.hpf-offer__close:hover { background: rgba(255, 255, 255, .16); opacity: 1; }
.hpf-offer__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =========================================================
 * Header
 * =======================================================*/
.hpf-offer__head {
	padding: 30px var(--o-pad) 26px;
	text-align: center;
}

.hpf-offer__title {
	margin: 0;
	font-family: var(--hrp-head, 'Quicksand', system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(1.5rem, 5.2vw, 1.85rem);
	line-height: 1.22;
	color: #fff;
	text-wrap: balance;
	max-width: 15ch;
	margin-inline: auto;
}

/* =========================================================
 * Cream band
 * =======================================================*/
.hpf-offer__band {
	margin: 0;
	padding: 13px 20px;
	background: var(--o-cream);
	color: var(--o-pink);
	text-align: center;
	font-size: clamp(.86rem, 3.1vw, .95rem);
	line-height: 1.45;
}
.hpf-offer__band strong { font-weight: 800; }

/* =========================================================
 * Body — deal on the left, artwork on the right, code beneath.
 * The paw pattern is an inline SVG so there is no extra request.
 * =======================================================*/
.hpf-offer__body {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	align-items: end;
	column-gap: 10px;
	padding: var(--o-pad);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' fill-opacity='0.055'%3E%3Cellipse cx='26' cy='30' rx='7.5' ry='6'/%3E%3Cellipse cx='15' cy='19' rx='3.2' ry='4.2'/%3E%3Cellipse cx='24' cy='15' rx='3.2' ry='4.4'/%3E%3Cellipse cx='33' cy='17' rx='3' ry='4'/%3E%3Cellipse cx='39' cy='25' rx='2.8' ry='3.6'/%3E%3Cellipse cx='86' cy='90' rx='7.5' ry='6'/%3E%3Cellipse cx='75' cy='79' rx='3.2' ry='4.2'/%3E%3Cellipse cx='84' cy='75' rx='3.2' ry='4.4'/%3E%3Cellipse cx='93' cy='77' rx='3' ry='4'/%3E%3Cellipse cx='99' cy='85' rx='2.8' ry='3.6'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 120px 120px;
}

.hpf-offer__deal {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding-bottom: 4px;
}

/* Gold "Save £7" pill */
.hpf-offer__save {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 9px;
	background: var(--o-gold);
	color: #fff;
	font-family: var(--hrp-head, 'Quicksand', system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(.95rem, 3.6vw, 1.08rem);
	line-height: 1;
	box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4);
}

/* Price — old struck through, new large beside it */
.hpf-offer__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	color: #fff;
	font-family: var(--hrp-head, 'Quicksand', system-ui, sans-serif);
	line-height: 1;
}
.hpf-offer__was {
	font-size: clamp(1.55rem, 6vw, 2.1rem);
	font-weight: 700;
	opacity: .72;
	text-decoration-thickness: 2px;
}
.hpf-offer__now {
	font-size: clamp(2.6rem, 10.5vw, 3.6rem);
	font-weight: 800;
	letter-spacing: -.02em;
}

/* White urgency pill */
.hpf-offer__urgency {
	display: inline-block;
	padding: 9px 14px;
	border-radius: 8px;
	background: #fff;
	color: var(--o-pink);
	font-weight: 700;
	font-size: clamp(.72rem, 2.7vw, .8rem);
	line-height: 1.2;
}

/* Artwork — a single transparent PNG/WebP (cat peeking over the two packs),
   bottom-aligned with the deal column beside it. */
.hpf-offer__art {
	position: relative;
	z-index: 1;
	align-self: end;
	pointer-events: none;
}
.hpf-offer__art-img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .28));
}

/* =========================================================
 * Coupon code — dashed box spanning both columns
 * =======================================================*/
.hpf-offer__code {
	grid-column: 1 / -1;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 20px;
	padding: 14px 14px 14px 20px;
	border: 2px dashed rgba(255, 255, 255, .5);
	border-radius: 12px;
}

.hpf-offer__code-value {
	font-family: var(--hrp-head, 'Quicksand', system-ui, sans-serif);
	font-weight: 800;
	font-size: clamp(1.35rem, 5.6vw, 1.85rem);
	line-height: 1;
	color: #fff;
	letter-spacing: .01em;
	user-select: all;
}

.hpf-offer__copy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 13px 20px;
	border: 0;
	border-radius: 10px;
	background: #fff;
	color: var(--o-pink);
	font-family: var(--hrp-head, 'Quicksand', system-ui, sans-serif);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, transform .12s ease, color .2s ease;
}
.hpf-offer__copy svg { width: 17px; height: 17px; }
.hpf-offer__copy:hover { background: var(--o-cream); }
.hpf-offer__copy:active { transform: scale(.97); }
.hpf-offer__copy:focus-visible { outline: 2px solid var(--o-gold); outline-offset: 2px; }
.hpf-offer__copy.is-copied { background: var(--o-gold); color: #fff; }

/* =========================================================
 * Responsive — the two columns stack on narrow screens, with the
 * artwork behind the copy rather than beside it.
 * =======================================================*/
@media (max-width: 420px) {
	.hpf-offer { padding: 10px; }
	.hpf-offer__panel { max-height: calc(100vh - 20px); }
	/* Keep the two columns rather than overlaying the artwork absolutely: the
	   grid guarantees the packs can never sit on top of the price or the
	   urgency pill, whatever the artwork's aspect ratio turns out to be. */
	.hpf-offer__body { grid-template-columns: minmax(0, 1fr) 32%; column-gap: 8px; }
	.hpf-offer__deal { gap: 12px; }
	.hpf-offer__urgency { font-size: .7rem; padding: 8px 11px; }
	.hpf-offer__code {
		margin-top: 18px;
		padding: 12px 12px 12px 16px;
		gap: 10px;
	}
	.hpf-offer__copy { padding: 11px 15px; font-size: .88rem; }

	/* The tab is thinner on phones so it steals less of the viewport. */
	.hpf-offer-tab { padding: 14px 8px; border-radius: 10px 0 0 10px; }
	.hpf-offer-tab__text { font-size: .8rem; }
}

/* Very short viewports: let the panel scroll rather than clip. */
@media (max-height: 600px) {
	.hpf-offer { align-items: flex-start; }
	.hpf-offer__panel { margin-block: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.hpf-offer__backdrop,
	.hpf-offer__panel,
	.hpf-offer-tab,
	.hpf-offer__copy,
	.hpf-offer__close { transition: none; }
	.hpf-offer__panel { transform: none; }
}