/* ============================================================
   Generator v2 — premium-locked redesign.
   Loaded only on the front page after generator-v2.css so the
   gold premium look (from the design-canvas Front Page Live)
   overrides the unified .genv2-locked treatment without touching
   the live generator selectors / IDs.

   Targets the same elements introduced by template-parts/home/
   generator-stepped.php for guests:
     - Occasion pill "My own"
     - Tone pill "Poetic"
     - Photo upload zone (Step 3, guests)
     - Step 4 header / step-bar item
     - Language Select2 "Add your own language" option
   ============================================================ */

:root {
	--gen-prem-gold:        #c89548;
	--gen-prem-gold-light:  #f0c878;
	--gen-prem-gold-deep:   #8b5e2a;
	--gen-prem-grad:        linear-gradient(115deg, #b48a4a 0%, #f0c878 25%, #c89548 50%, #f5d99a 75%, #b48a4a 100%);
	--gen-prem-ease:        cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes gen-prem-shimmer {
	0%   { background-position: -120% 50%; }
	100% { background-position: 220% 50%; }
}
@keyframes gen-prem-bg-shift {
	0%, 100% { background-position:   0% 50%; }
	50%      { background-position: 100% 50%; }
}

/* ── Common locked element baseline ─────────────────────────── */
.genv2-locked {
	position: relative;
	overflow: visible;
	isolation: isolate;
}

/* ── Star badge (override the orange star with the gold ★) ──── */
.genv2-locked > .genv2-locked-star {
	position: absolute;
	top: -7px;
	right: -7px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gen-prem-grad);
	background-size: 200% 100%;
	animation: gen-prem-bg-shift 4s ease-in-out infinite;
	color: white;
	font-size: 0.62rem;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 4px 10px -2px rgba(200, 149, 72, 0.55), 0 0 0 2px white;
	transition: transform 0.2s var(--gen-prem-ease);
	pointer-events: none;
	z-index: 5;
}
.genv2-locked > .genv2-locked-star svg {
	width: 10px;
	height: 10px;
	fill: white;
	stroke: white;
}
.genv2-locked:hover > .genv2-locked-star {
	transform: scale(1.18) rotate(15deg);
}

/* ── Tooltip — gold soft pill (replaces the purple/dark one) ── */
.genv2-locked > .genv2-locked-tooltip {
	background: linear-gradient(135deg, #fff8ec, #fdecd6);
	color: var(--gen-prem-gold-deep);
	border: 1px solid rgba(200, 149, 72, 0.35);
	border-radius: 100px;
	padding: 7px 12px 7px 10px;
	font-family: inherit;
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	white-space: nowrap;
	box-shadow: 0 10px 22px -8px rgba(200, 149, 72, 0.4);
	bottom: calc(100% + 12px);
	z-index: 1000;
}
.genv2-locked > .genv2-locked-tooltip::after,
.genv2-locked > .genv2-locked-tooltip::before {
	/* Stem — diamond pointing down at the locked element */
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 10px;
	height: 10px;
	background: linear-gradient(135deg, #fff8ec, #fdecd6);
	border-right: 1px solid rgba(200, 149, 72, 0.35);
	border-bottom: 1px solid rgba(200, 149, 72, 0.35);
	transform: translateX(-50%) rotate(45deg);
	z-index: -1;
}
.genv2-locked > .genv2-locked-tooltip::before { display: none; }

/* ── Pills (Occasion / Tone) — premium gold variant ─────────── */
.genv2-pill.genv2-locked {
	background: linear-gradient(135deg, rgba(240, 200, 120, 0.10) 0%, rgba(196, 184, 255, 0.10) 100%);
	border-color: rgba(200, 149, 72, 0.45);
	color: var(--gen-prem-gold-deep);
}
.genv2-pill.genv2-locked::after {
	/* shimmer sweep across the pill background */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 200, 0.6) 50%, transparent 70%);
	background-size: 200% 100%;
	background-position: -120% 50%;
	animation: gen-prem-shimmer 3.2s ease-in-out infinite;
	pointer-events: none;
	z-index: -1;
}
.genv2-pill.genv2-locked:hover {
	border-color: var(--gen-prem-gold);
	color: var(--gen-prem-gold-deep);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -6px rgba(200, 149, 72, 0.5);
	background: linear-gradient(135deg, rgba(240, 200, 120, 0.16) 0%, rgba(196, 184, 255, 0.14) 100%);
}
.genv2-pill.genv2-locked.active {
	background: var(--gen-prem-grad);
	background-size: 200% 100%;
	animation: gen-prem-bg-shift 4s ease-in-out infinite;
	color: white;
	border-color: transparent;
	box-shadow: 0 6px 18px -6px rgba(200, 149, 72, 0.55);
}

/* "My own" custom pill — dashed border variant */
.genv2-pill--custom.genv2-locked {
	background: rgba(200, 149, 72, 0.06);
	border-style: dashed;
	border-color: rgba(200, 149, 72, 0.55);
	color: var(--gen-prem-gold-deep);
	font-weight: 600;
}
.genv2-pill--custom.genv2-locked:hover {
	background: rgba(200, 149, 72, 0.12);
	border-style: solid;
	border-color: var(--gen-prem-gold);
}

/* ── Photo upload zone — premium glow + shimmer ─────────────── */
.genv2-photo.genv2-locked {
	border-color: rgba(200, 149, 72, 0.45);
	background: linear-gradient(135deg, rgba(240, 200, 120, 0.06), rgba(196, 184, 255, 0.06));
}
.genv2-photo.genv2-locked::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 200, 0.35) 50%, transparent 70%);
	background-size: 200% 100%;
	background-position: -120% 50%;
	animation: gen-prem-shimmer 4s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}
/* Lift photo content above the shimmer ::before, but DON'T touch the
   star / tooltip — they need their own absolute positioning. */
.genv2-photo.genv2-locked > :not(.genv2-locked-star):not(.genv2-locked-tooltip) {
	position: relative;
	z-index: 1;
}
.genv2-photo.genv2-locked:hover {
	border-color: var(--gen-prem-gold);
	background: linear-gradient(135deg, rgba(240, 200, 120, 0.12), rgba(196, 184, 255, 0.10));
}

/* Hide the file input entirely — the .genv2-photo zone itself is the
   click target (generator-v2.js calls photoInput.click() programmatically
   when the user clicks the zone), and leaving the input visible-but-
   transparent over the whole zone was breaking the locked star layout. */
.genv2-photo .genv2-photo-input,
#genv2-photo-input {
	display: none !important;
}

/* Bigger star + corner placement on the photo zone. !important guards
   the absolute positioning against any flex parent that might otherwise
   pull the star into the row layout. */
.genv2-photo.genv2-locked > .genv2-locked-star {
	position: absolute !important;
	top: -10px !important;
	right: -10px !important;
	left: auto !important;
	bottom: auto !important;
	width: 26px !important;
	height: 26px !important;
	line-height: 26px;
	font-size: 0.95rem;
	box-shadow: 0 5px 14px -3px rgba(200, 149, 72, 0.6), 0 0 0 2.5px white;
}
.genv2-photo.genv2-locked > .genv2-locked-star svg {
	width: 14px;
	height: 14px;
}

/* The wrap clips overflow for its rounded corners — that ate the
   tooltip on Step 4. Lift the clip so step-bar tooltips can hang
   above the bar. Inner panels (form, result) still draw inside the
   wrap's border. */
.genv2-wrap { overflow: visible !important; }

/* ── Step bar — tabbed look from the design canvas (gen-stepbar) ─ */
.genv2-stepped .genv2-steps-bar {
	background: linear-gradient(180deg, #faf7ff 0%, #f4f1fb 100%);
	/* Padding-top halved (was 1rem). Bottom 0 so tabs sit flush with the
	   1px bar bottom-border and read as proper tabs (no air gap).
	   align-items: stretch makes all tabs in a row match the tallest one. */
	padding: 0.5rem 1rem 0;
	gap: 0.4rem;
	border-radius: var(--v2-radius-xl, 24px) var(--v2-radius-xl, 24px) 0 0;
	border-bottom: 1px solid var(--v2-border);
	overflow: visible;
	align-items: stretch !important;
}
.genv2-steps-item {
	border-radius: 14px 14px 0 0 !important;
	/* Same trim — less top padding so tab content rides closer to the
	   bar edge and feels seated rather than floating. flex-start aligns
	   the num+text to the top of the (now-stretched) tab so shorter labels
	   don't visually float in the middle of the row. */
	padding: 0.55rem 1rem 0.85rem !important;
	margin-bottom: -1px !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-bottom: none !important;
	color: var(--v2-text-muted);
	overflow: visible;
	align-items: center !important;
}
.genv2-steps-item:hover { background: rgba(255, 255, 255, 0.5) !important; }
.genv2-steps-item.active {
	background: var(--v2-bg-white, #fff) !important;
	border-color: var(--v2-border) !important;
	color: var(--v2-primary) !important;
	position: relative;
	box-shadow: 0 -4px 12px rgba(96, 80, 176, 0.08) !important;
}
.genv2-steps-item.active::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--v2-bg-white, #fff);
}
.genv2-steps-item .genv2-steps-num {
	background: rgba(96, 80, 176, 0.08) !important;
	border: 1px solid transparent !important;
	color: var(--v2-primary) !important;
}
.genv2-steps-item.active .genv2-steps-num,
.genv2-steps-item.complete .genv2-steps-num {
	background: var(--v2-primary) !important;
	color: #fff !important;
}
.genv2-steps-item.complete .genv2-steps-num::before { content: "✓"; }
.genv2-steps-item.complete .genv2-steps-num { font-size: 0; }
.genv2-steps-item.complete .genv2-steps-num::before { font-size: 0.85rem; }

/* Mobile reflow safety — without these, the .genv2-grid--stepped grid
   computes its single column from content (drawer 4-col grid was 499px
   wide), pushing the form past viewport. min-width:0 on grid children
   lets the column shrink to 1fr. */
@media (max-width: 980px) {
	.genv2-grid--stepped > * { min-width: 0 !important; }
	.genv2-form, .genv2-result { min-width: 0 !important; }
}

/* Mobile (≤ 760px) — step-bar wraps 2-up: each tab takes ~50% width
   and they land in two clean rows. On mobile we drop the tabbed-tab
   look (no flush bottom against a bar border): every tab is a fully
   rounded card with symmetric vertical padding on the bar, so the
   row of "free-standing" cards reads cleaner than the desktop tabs. */
@media (max-width: 760px) {
	.genv2-stepped .genv2-steps-bar {
		flex-wrap: wrap !important;
		gap: 0.4rem !important;
		/* Symmetric vertical padding around the cards. */
		padding: 0.5rem !important;
		align-items: stretch !important;
		border-bottom: none !important;
	}
	.genv2-steps-item {
		flex: 0 0 calc(50% - 0.2rem) !important;
		max-width: calc(50% - 0.2rem) !important;
		padding: 0.55rem 0.7rem !important;
		gap: 0.5rem !important;
		min-width: 0;
		/* Fully rounded card on mobile, no border on any edge — the
		   active state reads through the white background alone. */
		border-radius: 14px !important;
		border: none !important;
		margin-bottom: 0 !important;
	}
	.genv2-steps-item.active {
		border: none !important;
	}
	/* Active-tab "merge into bar" line is desktop-only — kill on mobile. */
	.genv2-steps-item.active::after { display: none !important; }

	/* Premium-locked Step 4 keeps its gold border on mobile too —
	   the border is what reads as "premium" for guests. Selector
	   is intentionally more specific (.genv2-stepped + state classes)
	   than the desktop locked rule below, otherwise that later rule
	   would override the border-color by source order. */
	.genv2-stepped .genv2-steps-item.genv2-locked {
		border: 1px solid rgba(200, 149, 72, 0.55) !important;
	}
	.genv2-stepped .genv2-steps-item.genv2-locked.active {
		border: 1px solid var(--gen-prem-gold, #c89548) !important;
	}
}

/* Step bar — Step 4 premium step (guests only) */
.genv2-steps-item.genv2-locked {
	position: relative;
	background: linear-gradient(135deg, rgba(240, 200, 120, 0.10), rgba(196, 184, 255, 0.08)) !important;
	border-color: rgba(200, 149, 72, 0.35) !important;
}
.genv2-steps-item.genv2-locked > :not(.genv2-locked-star):not(.genv2-locked-tooltip) {
	position: relative;
	z-index: 1;
}
.genv2-steps-item.genv2-locked .genv2-steps-num {
	background: var(--gen-prem-grad) !important;
	background-size: 200% 100% !important;
	animation: gen-prem-bg-shift 4s ease-in-out infinite;
	color: white !important;
	border: none !important;
	box-shadow: 0 4px 12px -4px rgba(200, 149, 72, 0.5);
}
.genv2-steps-item.genv2-locked > .genv2-locked-star {
	position: absolute !important;
	top: -8px !important;
	right: -8px !important;
	z-index: 5;
}
/* Tooltip above the step item — wrap is now overflow:visible. */
.genv2-steps-item.genv2-locked > .genv2-locked-tooltip {
	left: 50%;
	z-index: 1000;
}

/* ── Step 4 in-form header (.genv2-panel-h.genv2-locked) ────── */
.genv2-step--delivery .genv2-panel-h.genv2-locked {
	cursor: pointer;
}
.genv2-step--delivery .genv2-panel-h.genv2-locked > .genv2-locked-star {
	/* Inline next to the heading instead of pinned to a corner — the
	   header is wide and a corner star looks orphaned. */
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.5rem;
	vertical-align: middle;
}

/* ── Toggle "Share on community feed" — bigger, custom-styled ─ */
.genv2-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.5rem 0;
	font-size: 0.95rem;
}
.genv2-toggle input[type="checkbox"] {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 1.5px solid var(--v2-border-strong, rgba(178, 178, 174, 0.5));
	border-radius: 7px;
	background: var(--v2-bg-white, #fff);
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transition: border-color 0.18s var(--gen-prem-ease),
	            background 0.18s var(--gen-prem-ease),
	            box-shadow 0.18s var(--gen-prem-ease);
}
.genv2-toggle input[type="checkbox"]:hover {
	border-color: var(--v2-primary, #6050b0);
}
.genv2-toggle input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.18);
	border-color: var(--v2-primary, #6050b0);
}
.genv2-toggle input[type="checkbox"]:checked {
	background: var(--v2-primary, #6050b0);
	border-color: var(--v2-primary, #6050b0);
}
.genv2-toggle input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 7px;
	height: 12px;
	border: solid #fff;
	border-width: 0 2.4px 2.4px 0;
	transform: rotate(45deg);
}
.genv2-toggle-label {
	font-weight: 500;
	color: var(--v2-text, #313330);
	font-size: 0.95rem;
	line-height: 1.3;
}

/* ── V2 Drawer — Card Style picker ─────────────────────────────
   One unified grid: 3 free tiles first (data-value drives initPillGroup),
   then 12 premium-locked tiles (data-locked-reason → register modal).
   4 tiles per row. Drawer is always visible; the gold trigger below
   functions as a register CTA. Hover on any tile previews the swatch
   on the live card; premium tiles add the lock overlay. */
.genv2-styles.genv2-v2-prem-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	min-width: 0;
}
@media (max-width: 760px) {
	.genv2-styles.genv2-v2-prem-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 420px) {
	.genv2-styles.genv2-v2-prem-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.4rem;
	}
}
.genv2-v2-prem-item {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	/* overflow:visible so the ::before hit-area extender can poke into
	   the grid gap. The visible swatch is clipped by .genv2-v2-prem-item-bg
	   itself (inset:0 + border-radius:inherit), so the tile still reads
	   as a rounded square. */
	overflow: visible;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: transform 0.18s var(--gen-prem-ease),
	            border-color 0.18s var(--gen-prem-ease),
	            box-shadow 0.2s var(--gen-prem-ease);
	padding: 0;
	background: transparent;
	font-family: inherit;
	display: block;
	width: 100%;
	height: auto;
}
/* Invisible hit-area extender — covers the 0.5rem grid gap so a cursor
   moving between tiles is always over *some* tile and never the bare
   grid container. Without this the mouseout→mouseover sequence flickers
   the live preview back to the active style for one frame. inset:-4px
   = half the gap; each tile owns 4px of buffer on every side, so the
   8px gap is fully covered by the union of two neighbours. */
.genv2-v2-prem-item::before {
	content: "";
	position: absolute;
	inset: -4px;
	z-index: 0;
	background: transparent;
	pointer-events: auto;
}
.genv2-v2-prem-item-bg,
.genv2-v2-prem-item-lock,
.genv2-v2-prem-item-name {
	z-index: 2;
}
.genv2-v2-prem-item-bg {
	overflow: hidden;
}
.genv2-v2-prem-item:hover {
	transform: translateY(-2px) scale(1.04);
	border-color: var(--gen-prem-gold-light);
}
.genv2-v2-prem-item--free:hover {
	border-color: var(--v2-primary, #6050b0);
}
.genv2-v2-prem-item--free.active {
	border-color: var(--v2-primary, #6050b0);
	box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.22), 0 8px 16px -6px rgba(96, 80, 176, 0.35);
}
.genv2-v2-prem-item-bg {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}
.genv2-v2-prem-item-lock {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gen-prem-grad);
	background-size: 200% 100%;
	animation: gen-prem-bg-shift 4s ease-in-out infinite;
	color: white;
	font-size: 9px;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 2px 4px -1px rgba(200, 149, 72, 0.6), 0 0 0 1.5px white;
	font-weight: 700;
	z-index: 2;
}
.genv2-v2-prem-item-name {
	position: absolute;
	bottom: 6px;
	left: 6px;
	right: 6px;
	text-align: center;
	font-size: 0.65rem;
	font-weight: 700;
	color: white;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	letter-spacing: 0.3px;
	line-height: 1.1;
	z-index: 2;
}
/* Hide the legacy .genv2-style-thumb / .genv2-style-meta layout left
   over from the old picker (the same <button> still carries its old
   class for compatibility). */
.genv2-v2-prem-item .genv2-style-thumb,
.genv2-v2-prem-item .genv2-style-meta { display: none !important; }

/* Golden trigger — sits ABOVE the drawer panel as a sign-in CTA.
   Solid gold gradient background (not nested), shimmer overlay on top,
   star-spark on the right. White text. Click → register modal. */
.genv2-v2-prem-trigger {
	margin: 0 0 0.6rem 0;
	width: 100%;
	border: none;
	border-radius: 14px;
	padding: 0.85rem 1rem;
	cursor: pointer;
	font-family: inherit;
	background: var(--gen-prem-grad);
	background-size: 200% 100%;
	animation: gen-prem-bg-shift 4s ease-in-out infinite;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	transition: transform 0.18s var(--gen-prem-ease), box-shadow 0.2s;
	position: relative;
	overflow: hidden;
	text-align: left;
	color: #fff;
	box-shadow: 0 6px 18px -6px rgba(200, 149, 72, 0.55);
}
.genv2-v2-prem-trigger:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(200, 149, 72, 0.65);
}
.genv2-v2-prem-trigger::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
	background-size: 200% 100%;
	background-position: -120% 50%;
	animation: gen-prem-shimmer 4s ease-in-out infinite;
	pointer-events: none;
}
.genv2-v2-prem-trigger > * { position: relative; z-index: 1; }
.genv2-v2-prem-trigger-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	flex-shrink: 0;
	font-weight: 700;
}
.genv2-v2-prem-trigger-body {
	flex: 1;
	min-width: 0;
	display: block;
}
.genv2-v2-prem-trigger-body strong {
	display: block;
	font-size: 0.92rem;
	color: #fff;
	margin-bottom: 2px;
	font-weight: 700;
}
.genv2-v2-prem-trigger-body span {
	display: block;
	font-size: 0.74rem;
	color: rgba(255, 255, 255, 0.85);
}
.genv2-v2-prem-trigger-spark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
	transition: transform 0.2s var(--gen-prem-ease);
}
.genv2-v2-prem-trigger:hover .genv2-v2-prem-trigger-spark {
	transform: scale(1.15) rotate(12deg);
}
.genv2-v2-prem-trigger-spark svg {
	width: 18px;
	height: 18px;
}

/* Drawer panel — wraps the grid + Sign-in CTA. Capped at 265px and
   scrolled vertically; CTA sits at the bottom of the scrollable area. */
.genv2-v2-prem-panel {
	max-height: 265px;
	overflow-y: auto;
	border: 1px solid var(--v2-border, rgba(178, 178, 174, 0.25));
	border-radius: 14px;
	padding: 0.75rem;
	background: #fff;
	box-shadow: 0 6px 18px -12px rgba(31, 27, 49, 0.18);
}
.genv2-v2-prem-panel::-webkit-scrollbar { width: 8px; }
.genv2-v2-prem-panel::-webkit-scrollbar-track { background: transparent; }
.genv2-v2-prem-panel::-webkit-scrollbar-thumb {
	background: rgba(96, 80, 176, 0.25);
	border-radius: 999px;
}

/* Sign-in CTA at the bottom of the drawer — bridges to the register modal.
   Gold pill button next to a copy "N styles waiting. Sign in to use." */
.genv2-v2-prem-cta {
	margin-top: 0.85rem;
	padding-top: 0.7rem;
	border-top: 1px dashed var(--v2-border, rgba(178, 178, 174, 0.25));
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-size: 0.78rem;
	color: var(--v2-text-muted, #5e5f5c);
	flex-wrap: wrap;
	text-align: center;
}
.genv2-v2-prem-cta-btn {
	background: var(--gen-prem-grad);
	background-size: 200% 100%;
	animation: gen-prem-bg-shift 4s ease-in-out infinite;
	color: #fff;
	border: none;
	border-radius: 100px;
	padding: 0.4rem 0.95rem;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.78rem;
	cursor: pointer;
	box-shadow: 0 4px 10px -3px rgba(200, 149, 72, 0.55);
	transition: transform 0.18s, box-shadow 0.2s;
}
.genv2-v2-prem-cta-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -4px rgba(200, 149, 72, 0.55);
}

/* ── Lock preview on the live card ────────────────────────────
   When a guest hovers a premium tile:
     • The visible live card itself takes the swatch as its background
       (--hhl-locked-bg), and all decorative children are hidden — so
       the card reads as a flat colour swatch, not a tinted glow.
     • A neutral, fixed-colour semi-transparent veil sits on top with
       the gold ★ + "Sign in to use this style" label. The veil never
       changes colour with the swatch — it's a constant translucent
       layer regardless of which premium style is being previewed.
     • Light swatches (Marble, Linen) get .is-light-locked from JS,
       which flips the label colour to gold-deep so it stays legible
       on cream/white backgrounds. The star stays gold (high contrast). */
.genv2-live-card-wrap { position: relative; }

/* While previewing a premium style we force the live card to the
   Aurora variant (JS toggles data-style="aurora") and just paint the
   swatch behind it — the medallion / glows / text stay where they
   were. This keeps the card structure intact while the swatch reads
   as the new "skin" the user is buying with sign-in. */
.genv2-live-card-wrap.is-locked-preview > .genv2-live-card--aurora {
	background: var(--hhl-locked-bg, #1f1638) !important;
	transition: background 0.18s var(--gen-prem-ease);
}
.genv2-live-card-wrap.is-locked-preview > .genv2-live-card--aurora .lc-aurora-glow {
	/* Aurora's purple radial glows would fight the swatch — fade them. */
	opacity: 0.25;
}

/* Constant neutral veil — never tinted by the swatch. */
.genv2-result-lock-overlay {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	border-radius: var(--v2-radius-lg, 24px);
	padding: 1.5rem 1.25rem;
	pointer-events: none;
	z-index: 10;
	background: rgba(15, 10, 30, 0.45);
	-webkit-backdrop-filter: blur(1.5px);
	        backdrop-filter: blur(1.5px);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
	animation: hhl-locked-fade 0.18s var(--gen-prem-ease);
}
.genv2-live-card-wrap.is-locked-preview .genv2-result-lock-overlay {
	display: flex;
}

.genv2-result-lock-star {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--gen-prem-grad);
	background-size: 200% 100%;
	animation: gen-prem-bg-shift 4s ease-in-out infinite;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	box-shadow: 0 8px 24px -4px rgba(200, 149, 72, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.genv2-result-lock-text {
	color: #fff;
	font-family: var(--font-primary, 'Inter', system-ui, sans-serif);
	font-weight: 600;
	font-size: 1rem;
	text-align: center;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	letter-spacing: 0.01em;
}

/* Light swatch override — Marble / Linen are near-white, so the
   default white label disappears. Flip it to gold-deep + light shadow. */
.genv2-live-card-wrap.is-light-locked .genv2-result-lock-overlay {
	background: rgba(255, 255, 255, 0.35);
}
.genv2-live-card-wrap.is-light-locked .genv2-result-lock-text {
	color: var(--gen-prem-gold-deep);
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}
/* Aurora content sitting on a near-white swatch (Marble / Linen) needs
   black text — the Aurora variant's default off-white copy disappears
   on the lighter background. Drop text-shadow too, otherwise the white
   shadow paints a halo on the dark glyphs. */
.genv2-live-card-wrap.is-light-locked .genv2-live-card--aurora,
.genv2-live-card-wrap.is-light-locked .genv2-live-card--aurora .lc-aurora-greeting,
.genv2-live-card-wrap.is-light-locked .genv2-live-card--aurora .lc-aurora-text,
.genv2-live-card-wrap.is-light-locked .genv2-live-card--aurora .lc-aurora-foot {
	color: #000 !important;
	text-shadow: none !important;
}
.genv2-live-card-wrap.is-light-locked .genv2-live-card--aurora .lc-tag {
	color: #000 !important;
	background: rgba(0, 0, 0, 0.06) !important;
}

@keyframes hhl-locked-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── "Create wish first →" alert above the Step 4 footer ─────────
   Lives between the live error slot and the final Back+Submit row.
   Visible until a wish has been generated; pulses primary-purple to
   read as a real alert. Click takes the user back to Step 3 where
   the Generate submit lives. The .has-wish class on #genv2-root
   (set by generator-v2.js after a successful /generate) hides it. */
@keyframes genv2-final-lock-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(96, 80, 176, 0.55), 0 8px 18px -8px rgba(96, 80, 176, 0.45); }
	50%      { box-shadow: 0 0 0 10px rgba(96, 80, 176, 0),     0 8px 18px -8px rgba(96, 80, 176, 0.45); }
}
.genv2-final-lock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	width: 100%;
	margin: 1rem 0 0.85rem;
	padding: 0.85rem 1.1rem;
	border: none;
	border-radius: 100px;
	background: var(--color-primary, #6050b0);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	cursor: pointer;
	animation: genv2-final-lock-pulse 1.6s ease-in-out infinite;
	transition: transform 0.18s var(--gen-prem-ease, cubic-bezier(0.4,0,0.2,1)), background 0.18s;
}
.genv2-final-lock:hover {
	background: var(--v2-primary-hover, #5040a0);
	transform: translateY(-1px);
}
.genv2-final-lock svg {
	transition: transform 0.18s var(--gen-prem-ease, cubic-bezier(0.4,0,0.2,1));
}
.genv2-final-lock:hover svg { transform: translateX(2px); }

/* Hide the alert (and its pulse) once a wish exists. */
.genv2-stepped.has-wish .genv2-final-lock {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.genv2-final-lock { animation: none; }
}

/* Step 4 final CTA (#genv2-result-cta) — for guests it carries
   .genv2-locked. Star + tooltip are hidden while the button is
   disabled (form not ready yet) and shown the moment the button
   becomes enabled, matching the visual contract of every other
   golden-locked element in the generator. */
.genv2-result-cta.genv2-locked[disabled] > .genv2-locked-star,
.genv2-result-cta.genv2-locked[disabled] > .genv2-locked-tooltip {
	display: none !important;
}
.genv2-result-cta.genv2-locked > .genv2-locked-star {
	top: -8px;
	right: -8px;
	z-index: 5;
}

/* Hide the right-panel chip-row entirely — the Card Style picker
   (drawer) on Step 3 is now the only place to switch styles. The
   "+N premium styles" jump pill that used to live in this row is
   gone with it; if/when it needs to come back, drop this rule. */
.genv2-live-styles { display: none !important; }

/* ── Mobile (≤ 760px) — guests keep the full desktop premium UI
   (gold trigger, premium tiles, Sign-in CTA, locked stars). Only
   the gold hover-tooltips are hidden, because they overflow the
   narrow viewport awkwardly and the star is signal enough. Signed-in
   users are unaffected on every viewport. */
@media (max-width: 760px) {
	body:not(.logged-in) .genv2-locked-tooltip {
		display: none !important;
	}
}

/* ── Gold "+N premium styles" pill in .genv2-live-styles (guests) ─
   Lives next to Aurora / Postcard / Wax seal radios in the right
   panel. Visual matches the rest of the gold premium-locked pattern;
   click opens the register modal via data-locked-reason. */
.genv2-live-style.genv2-live-style--prem {
	position: relative;
	overflow: visible;
	background: linear-gradient(135deg, rgba(240, 200, 120, 0.10) 0%, rgba(196, 184, 255, 0.10) 100%) !important;
	border: 1px solid rgba(200, 149, 72, 0.45) !important;
	color: var(--gen-prem-gold-deep) !important;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	transition: transform 0.18s var(--gen-prem-ease),
	            border-color 0.18s var(--gen-prem-ease),
	            box-shadow 0.2s var(--gen-prem-ease),
	            background 0.18s var(--gen-prem-ease);
	isolation: isolate;
}
.genv2-live-style.genv2-live-style--prem::after {
	/* Shimmer sweep mirroring .genv2-pill.genv2-locked */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 200, 0.6) 50%, transparent 70%);
	background-size: 200% 100%;
	background-position: -120% 50%;
	animation: gen-prem-shimmer 3.2s ease-in-out infinite;
	pointer-events: none;
	z-index: -1;
}
.genv2-live-style.genv2-live-style--prem:hover {
	transform: translateY(-1px);
	border-color: var(--gen-prem-gold) !important;
	background: linear-gradient(135deg, rgba(240, 200, 120, 0.16) 0%, rgba(196, 184, 255, 0.14) 100%) !important;
	box-shadow: 0 6px 14px -6px rgba(200, 149, 72, 0.5);
}
.genv2-live-style-prem-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gen-prem-grad);
	background-size: 200% 100%;
	animation: gen-prem-bg-shift 4s ease-in-out infinite;
	color: #fff;
	font-size: 0.62rem;
	line-height: 1;
	font-weight: 700;
	box-shadow: 0 2px 6px -1px rgba(200, 149, 72, 0.6), 0 0 0 1.5px white;
	flex-shrink: 0;
}

/* ── Review / welcome modal ────────────────────────────────────
   Reuses the .auth-modal-overlay shell so it picks up the same
   open/close transitions and focus-trap that the auth modal uses;
   internal layout matches the gold-tinted promo card. */
.review-modal-box {
	max-width: 460px;
}
.review-modal-box .review-modal-sub {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	color: var(--v2-text-muted, #5e5f5c);
	line-height: 1.45;
}
.review-modal-box .review-field {
	display: block;
	margin-bottom: 0.85rem;
}
.review-modal-box .review-label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--v2-text-muted, #5e5f5c);
	margin-bottom: 0.35rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.review-modal-box .review-field input,
.review-modal-box .review-field textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(178, 178, 174, 0.5);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--v2-text, #313330);
	transition: border-color 0.18s, box-shadow 0.18s;
	resize: vertical;
}
.review-modal-box .review-field input:focus,
.review-modal-box .review-field textarea:focus {
	outline: none;
	border-color: var(--gen-prem-gold, #c89548);
	box-shadow: 0 0 0 3px rgba(200, 149, 72, 0.18);
}
/* Star rating — radio buttons rendered as gold stars. The DOM is in
   reverse order (5..1) so the CSS sibling selector can light up
   "the hovered star and all later siblings" for the classic fill. */
.review-modal-box .review-rating {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	border: none;
	padding: 0;
	margin: 0 0 0.85rem;
}
.review-modal-box .review-rating input { display: none; }
.review-modal-box .review-rating label {
	cursor: pointer;
	font-size: 1.6rem;
	color: rgba(178, 178, 174, 0.55);
	padding: 0 0.1rem;
	transition: color 0.15s;
	line-height: 1;
}
.review-modal-box .review-rating label:hover,
.review-modal-box .review-rating label:hover ~ label,
.review-modal-box .review-rating input:checked ~ label {
	color: var(--gen-prem-gold, #c89548);
	text-shadow: 0 0 6px rgba(240, 200, 120, 0.4);
}
.review-modal-box .review-submit,
.review-modal-box .review-thanks-close {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.85rem 1rem;
	font-weight: 700;
	background: var(--gen-prem-grad);
	background-size: 200% 100%;
	animation: gen-prem-bg-shift 4s ease-in-out infinite;
	color: #fff;
	border: none;
	border-radius: 100px;
	cursor: pointer;
	font-size: 0.95rem;
	box-shadow: 0 8px 22px -8px rgba(200, 149, 72, 0.55);
	transition: transform 0.18s var(--gen-prem-ease), box-shadow 0.2s;
}
.review-modal-box .review-submit:hover,
.review-modal-box .review-thanks-close:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px -8px rgba(200, 149, 72, 0.6);
}

/* Thank-you view */
.review-thanks-state {
	text-align: center;
	padding: 0.5rem 0 0;
}
.review-thanks-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 0.85rem;
	border-radius: 50%;
	background: var(--gen-prem-grad);
	background-size: 200% 100%;
	animation: gen-prem-bg-shift 4s ease-in-out infinite;
	color: #fff;
	font-size: 1.85rem;
	line-height: 64px;
	font-weight: 700;
	box-shadow: 0 10px 28px -6px rgba(200, 149, 72, 0.55), 0 0 0 4px rgba(255, 255, 255, 0.5);
}
.review-thanks-title {
	font-family: var(--font-display, 'Fraunces', Georgia, serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--gen-prem-gold-deep, #8b5e2a);
	margin: 0 0 0.5rem;
}
.review-thanks-text {
	color: var(--v2-text, #313330);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0 0 1.25rem;
}

/* ── Always-pinned promo card ───────────────────────────────────
   Floats at the bottom-center of every viewport. Same gold pill as
   in the design canvas — soft cream gradient, gold border, shimmer
   sweep, ★ on the left, → on the right. The footer reserves
   bottom-padding equal to the trigger height (set by
   home-review-flow.js → adjustFooterSpacer) so this bar never
   covers footer content. */
.fb-card-trigger {
	position: fixed;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	/* Sits above the sticky header (1200) and any in-flow content
	   (carousels, footer), but below the mobile nav drawer
	   (1300/1400) and the auth/review modal overlay (9999) — so only
	   an opened menu or a modal can cover it. */
	z-index: 1100;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background: linear-gradient(135deg, #fff8ec 0%, #fdecd6 100%);
	border: 1px solid rgba(200, 149, 72, 0.35);
	border-radius: 16px;
	padding: 0.85rem 1.1rem;
	width: calc(100% - 2rem);
	max-width: 360px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	overflow: hidden;
	transition: transform 0.2s var(--gen-prem-ease), box-shadow 0.25s var(--gen-prem-ease), border-color 0.2s;
}
.fb-card-trigger::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 200, 0.55) 50%, transparent 70%);
	background-size: 200% 100%;
	background-position: -120% 50%;
	animation: gen-prem-shimmer 5s ease-in-out infinite;
	pointer-events: none;
}
.fb-card-trigger:hover {
	/* Keep the centering translate while lifting on hover. */
	transform: translateX(-50%) translateY(-2px);
	box-shadow: 0 14px 30px -14px rgba(200, 149, 72, 0.5);
	border-color: var(--gen-prem-gold);
}
.fb-card-trigger > * { position: relative; z-index: 1; }
.fb-card-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gen-prem-grad);
	background-size: 200% 100%;
	animation: gen-prem-bg-shift 4s ease-in-out infinite;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 700;
	box-shadow: 0 6px 14px -4px rgba(200, 149, 72, 0.5);
}
.fb-card-body {
	flex: 1;
	min-width: 0;
}
.fb-card-body strong {
	display: block;
	font-size: 0.95rem;
	color: var(--gen-prem-gold-deep);
	margin-bottom: 2px;
	font-weight: 700;
	line-height: 1.3;
}
.fb-card-body span {
	font-size: 0.78rem;
	color: var(--v2-text-muted, #5e5f5c);
	line-height: 1.35;
}
/* ── Dismiss-X button for the pinned promo card. Sits at the same
   bottom/center anchor as the trigger but pushed to its right edge,
   so the user can hide the promo from keyboard or touch (WCAG 2.4.11).
   Hit area 36×36 (well above the 24×24 AA minimum); visual cross is
   smaller. JS in home-review-flow.js hooks click + Escape and persists
   "dismissed" in localStorage. */
.fb-card-dismiss {
	position: fixed;
	bottom: 4.4rem;
	left: 50%;
	/* Same horizontal anchor as .fb-card-trigger (max-width 360px,
	   centred). Offset to clear the right edge of the trigger pill. */
	transform: translateX(163px);
	z-index: 1101;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	background: #fff;
	color: #6b5a2c;
	border: 1px solid rgba(200, 149, 72, 0.45);
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 4px 12px -4px rgba(120, 80, 30, 0.25);
	transition: background 0.18s, color 0.18s, transform 0.18s;
}
.fb-card-dismiss:hover {
	background: #fff8ec;
	color: #4a3914;
	transform: translateX(163px) translateY(-2px);
}
.fb-card-dismiss:focus-visible {
	outline: 2px solid var(--color-primary, #6050b0);
	outline-offset: 3px;
}
/* ── Reveal-on-scroll ─────────────────────────────────────────────────
   The promo is HIDDEN on first paint (it used to cover the hero
   "LIVE · RIGHT NOW" card) and slides up from the bottom once the user
   scrolls ~50px (home-review-flow.js adds .fb-card-revealed on <html>). */
.fb-card-trigger,
.fb-card-dismiss {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.fb-card-trigger {
	transform: translateX(-50%) translateY(140%);
	transition: transform .45s cubic-bezier(.2, .9, .25, 1.05), opacity .35s ease, visibility 0s linear .45s;
}
html.fb-card-revealed .fb-card-trigger {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition: transform .45s cubic-bezier(.2, .9, .25, 1.05), opacity .35s ease, visibility 0s;
}
/* hover lift must out-rank the revealed rule (html.class adds specificity) */
html.fb-card-revealed .fb-card-trigger:hover {
	transform: translateX(-50%) translateY(-2px);
}
.fb-card-dismiss { transition: opacity .3s ease .2s, visibility 0s linear .5s; }
html.fb-card-revealed .fb-card-dismiss {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .3s ease .3s, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
	.fb-card-trigger,
	html.fb-card-revealed .fb-card-trigger { transition: opacity .2s ease; transform: translateX(-50%); }
}

/* Hidden state — JS toggles .fb-card-dismissed on <html> after the
   user closes the promo or after they trigger the modal once. */
html.fb-card-dismissed .fb-card-trigger,
html.fb-card-dismissed .fb-card-dismiss {
	display: none !important;
}

@media (max-width: 720px) {
	.fb-card-dismiss {
		/* On phones the promo card shrinks (see .fb-card-trigger mobile
		   block above). Anchor the dismiss to the right of the shrunken
		   card. */
		bottom: 3.75rem;
		transform: translateX(156px);
		width: 32px;
		height: 32px;
	}
	.fb-card-dismiss:hover {
		transform: translateX(156px) translateY(-2px);
	}
}

/* Mobile (≤ 720px) — promo card shrinks ~20%: tighter padding,
   smaller star circle, smaller text, smaller gap, no arrow chevron
   (saves the precious right-side real estate on phones). */
@media (max-width: 720px) {
	.fb-card-trigger {
		padding: 0.65rem 0.85rem;
		gap: 0.6rem;
		border-radius: 14px;
		max-width: calc(100% - 1rem);
	}
	.fb-card-icon {
		width: 36px;
		height: 36px;
		font-size: 1rem;
	}
	.fb-card-body strong {
		font-size: 0.82rem;
		line-height: 1.25;
	}
	.fb-card-body span {
		font-size: 0.68rem;
	}

	.fb-card-trigger {
		bottom: 0.75rem;
		width: calc(100% - 1.5rem);
		max-width: 380px;
	}
}

/* ── Review modal — mobile (≤ 540px): full-width-ish, less padding,
   slightly smaller text so the form still fits inside short
   viewports / virtual keyboards. */
@media (max-width: 540px) {
	.review-modal-overlay .review-modal-box {
		max-width: calc(100vw - 1.5rem);
		padding: 1.4rem 1.1rem;
		border-radius: 18px;
	}
	.review-modal-box .auth-modal-title {
		font-size: 1.15rem;
	}
	.review-modal-box .review-modal-sub {
		font-size: 0.8rem;
	}
	.review-modal-box .review-rating label {
		font-size: 1.4rem;
	}
	.review-modal-box .review-field input,
	.review-modal-box .review-field textarea {
		padding: 0.6rem 0.75rem;
		font-size: 0.9rem;
	}
	.review-modal-box .review-submit,
	.review-modal-box .review-thanks-close {
		padding: 0.7rem 1rem;
		font-size: 0.9rem;
	}
	.review-thanks-icon {
		width: 52px;
		height: 52px;
		font-size: 1.5rem;
		line-height: 52px;
	}
	.review-thanks-title { font-size: 1.15rem; }
	.review-thanks-text { font-size: 0.88rem; }
}

/* ── Add-own-language option in Select2 dropdown ────────────── */
.genv2-add-own-lang {
	color: var(--gen-prem-gold-deep);
	font-weight: 700;
}
.genv2-add-own-lang-star {
	background: var(--gen-prem-grad);
	background-size: 200% 100%;
	animation: gen-prem-bg-shift 4s ease-in-out infinite;
	box-shadow: 0 3px 8px -1px rgba(200, 149, 72, 0.6), 0 0 0 2px white;
}
.genv2-select2-dropdown .select2-results__option--highlighted .genv2-add-own-lang {
	color: white;
}
.genv2-select2-dropdown .select2-results__option--highlighted .genv2-add-own-lang-star {
	box-shadow: 0 3px 8px -1px rgba(200, 149, 72, 0.7), 0 0 0 2px var(--gen-prem-gold-light);
}