/* =====================================================================
   DigiDollar — Supported assets «ارزهای دیجیتال پشتیبانی‌شده» (dd-coins.css)
   ---------------------------------------------------------------------
   An award-grade, interactive "liquid vault": ~240 coins & vouchers as
   glassy bubbles floating in water. Loaded ONLY on /coins/ (enqueued by
   inc/coins.php). RTL-first, brand-gold, glassmorphic, dark-mode aware
   (html[data-dracula-scheme="dark"]) and fully motion-safe.

   Idle float runs from pure CSS (works with JS off) but is gated behind
   @media (prefers-reduced-motion: no-preference). JS adds .is-motion for
   the JS-only extras (cursor displacement, ambient bubbles).
   ===================================================================== */

.dd-coins {
	/* brand tokens (safe fallbacks, same vocabulary as the other dd pages) */
	--g:        var(--dd-gold, #e0be00);
	--g2:       var(--dd-gold-2, #fdb837);
	--g3:       var(--dd-gold-bright, #ffbf2f);
	--gd:       var(--dd-gold-deep, #9a7d00);
	--gtext:    var(--dd-grad-text, linear-gradient(100deg,#c79a00 0%,#fdb837 55%,#ffd366 100%));
	--ink:      var(--dd-ink, #18181c);
	--muted:    var(--dd-muted, #6c6c78);
	--card:     var(--dd-card, rgba(255,255,255,.72));
	--brd:      var(--dd-card-brd, rgba(20,20,35,.08));
	--hair:     var(--dd-hair, rgba(224,190,0,.28));
	--ease:     cubic-bezier(.22,.61,.36,1);
	--maxw:     1240px;

	/* the "water" */
	--tank: radial-gradient(125% 70% at 50% -12%, #fff7df 0%, rgba(255,247,223,0) 52%),
	        radial-gradient(120% 95% at 8% 112%, rgba(82,196,209,.20) 0%, transparent 58%),
	        radial-gradient(120% 95% at 92% 112%, rgba(224,190,0,.16) 0%, transparent 58%),
	        radial-gradient(90% 70% at 50% 50%, rgba(255,255,255,.30) 0%, transparent 70%),
	        linear-gradient(180deg, #fbf7ec 0%, #fffdf7 42%, #f5efe1 100%);
	--tank-brd: rgba(224,190,0,.30);
	--bubble-bg: rgba(255,255,255,.6);

	width: 100%;
	position: relative;
	color: var(--ink);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	line-height: 1.8;
}
html[data-dracula-scheme="dark"] .dd-coins {
	--card: rgba(255,255,255,.05);
	--brd: rgba(255,255,255,.10);
	--ink: #f3f0e6;
	--muted: #aab0bd;
	--tank: radial-gradient(125% 70% at 50% -14%, rgba(253,184,55,.14) 0%, transparent 52%),
	        radial-gradient(120% 95% at 6% 114%, rgba(34,120,135,.45) 0%, transparent 60%),
	        radial-gradient(120% 95% at 94% 114%, rgba(224,190,0,.14) 0%, transparent 58%),
	        radial-gradient(90% 80% at 50% 40%, rgba(40,90,110,.30) 0%, transparent 72%),
	        linear-gradient(180deg, #0c1014 0%, #0a1418 45%, #0b0e13 100%);
	--tank-brd: rgba(224,190,0,.22);
	--bubble-bg: rgba(10,18,24,.5);
}

/* --- PAGE SHELL: force the Fullwidth template chain to true full width ---
   Scoped away from .dd-coins--voucher: the compact voucher strip lives inside
   a normal article column (top of /voucher/) and must NOT take the page over. */
#page.grid-container:has(.dd-coins:not(.dd-coins--voucher)) {
	max-width: 100% !important;
	width: 100% !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
}
.fullcover:has(.dd-coins:not(.dd-coins--voucher)),
.left-content:has(.dd-coins:not(.dd-coins--voucher)),
.post-content:has(.dd-coins:not(.dd-coins--voucher)),
.text:has(.dd-coins:not(.dd-coins--voucher)) {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}
.post-content:has(.dd-coins:not(.dd-coins--voucher)),
.text:has(.dd-coins:not(.dd-coins--voucher)) { padding-block: 0 !important; }

.dd-coins { margin: 0 !important; }
.dd-coins * { box-sizing: border-box; }
.dd-coins :where(p) { margin: 0; }
.dd-coins a { color: inherit; text-decoration: none; }

.dd-coins__wrap {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(26px,5vw,52px) clamp(16px,4vw,40px) clamp(40px,6vw,72px);
}

/* =====================================================================
   HERO
   ===================================================================== */
.dd-coins__hero { text-align: center; max-width: 820px; margin-inline: auto; }

.dd-coins__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
	color: var(--gd);
	padding: 6px 15px; border-radius: 999px;
	background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.22));
	border: 1px solid var(--hair);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-dracula-scheme="dark"] .dd-coins__eyebrow {
	color: var(--g3); background: rgba(255,255,255,.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.dd-coins__live {
	width: 8px; height: 8px; border-radius: 50%;
	background: #16c784; box-shadow: 0 0 0 0 rgba(22,199,132,.55);
}

.dd-coins__title {
	font-size: clamp(30px, 5.4vw, 56px);
	line-height: 1.12; font-weight: 900; letter-spacing: -.01em;
	margin: 16px 0 0;
	background: var(--gtext);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.dd-coins__lede {
	margin: 14px auto 0; max-width: 660px;
	font-size: clamp(15px,1.7vw,18px); color: var(--muted);
}
.dd-coins__lede b { color: var(--ink); font-weight: 800; }

/* =====================================================================
   CONTROLS — search + filter chips (glass command bar)
   ===================================================================== */
.dd-coins__controls {
	display: flex; flex-direction: column; align-items: center;
	gap: 16px; margin-top: 28px;
}

/* --- search: a clean jewel-box pill --- */
.dd-coins__search {
	position: relative; display: flex; align-items: center;
	width: 100%; max-width: 560px;
}
.dd-coins__input {
	width: 100%; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink);
	/* The parent theme pins a bottom margin on every input with !important, so
	   the wrapper box ends up 15px taller than the pill and the absolutely
	   positioned clear button drops behind the (opaque) input. Match the force. */
	margin: 0 !important;
	padding: 16px 56px 16px 24px;
	border-radius: 999px;
	border: 1.5px solid var(--hair);
	background: linear-gradient(var(--card), var(--card)) padding-box;
	backdrop-filter: blur(12px);
	box-shadow: 0 16px 40px -22px rgba(25,22,50,.45), inset 0 1px 0 rgba(255,255,255,.55);
	transition: border-color .25s, box-shadow .25s, background .25s;
	appearance: none; -webkit-appearance: none;
}
.dd-coins__input::-webkit-search-cancel-button,
.dd-coins__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.dd-coins__input::placeholder { color: var(--muted); opacity: .8; font-weight: 500; }
.dd-coins__input:focus {
	outline: none; border-color: var(--g2);
	box-shadow: 0 0 0 5px rgba(253,184,55,.16), 0 18px 44px -20px rgba(224,190,0,.55);
}
html[data-dracula-scheme="dark"] .dd-coins__input {
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.dd-coins__clear {
	position: absolute; inset-inline-end: 12px;
	width: 30px; height: 30px; display: grid; place-items: center;
	border: 1px solid var(--brd); border-radius: 50%; cursor: pointer;
	color: var(--muted); background: var(--card);
	transition: color .2s, background .2s, border-color .2s, transform .15s;
}
.dd-coins__clear[hidden] { display: none !important; }
.dd-coins__clear svg { width: 14px; height: 14px; }
.dd-coins__clear:hover {
	color: #2a2003; border-color: transparent; transform: scale(1.08);
	background: linear-gradient(135deg, var(--g2), var(--g3));
}

/* --- category chips: icon pills --- */
.dd-coins__chips {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 9px; max-width: 900px;
}
.dd-coins__chip {
	display: inline-flex; align-items: center; gap: 7px;
	font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
	color: var(--muted); line-height: 1;
	padding: 10px 16px; border-radius: 999px;
	border: 1.5px solid var(--brd);
	background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.2)), var(--card);
	backdrop-filter: blur(8px);
	box-shadow: 0 6px 16px -12px rgba(25,22,50,.5), inset 0 1px 0 rgba(255,255,255,.45);
	transition: color .2s, border-color .2s, background .2s, transform .15s var(--ease), box-shadow .2s;
}
html[data-dracula-scheme="dark"] .dd-coins__chip {
	background: var(--card);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.dd-coins__chip-ic {
	width: 17px; height: 17px; flex: none;
	color: var(--gd); opacity: .8;
	transition: color .2s, opacity .2s, transform .25s var(--ease);
}
html[data-dracula-scheme="dark"] .dd-coins__chip-ic { color: var(--g3); }
.dd-coins__chip:hover {
	transform: translateY(-2px); color: var(--ink); border-color: var(--hair);
	box-shadow: 0 10px 22px -12px rgba(224,190,0,.55);
}
.dd-coins__chip:hover .dd-coins__chip-ic { opacity: 1; transform: rotate(-8deg) scale(1.12); }
.dd-coins__chip:active { transform: translateY(0); }
.dd-coins__chip.is-active {
	color: #2a2003;
	background: linear-gradient(135deg, var(--g2), var(--g3));
	border-color: transparent;
	box-shadow: 0 12px 26px -12px rgba(224,190,0,.75), inset 0 1px 0 rgba(255,255,255,.45);
}
.dd-coins__chip.is-active .dd-coins__chip-ic { color: #2a2003; opacity: 1; }

/* =====================================================================
   TANK — the body of water that holds the bubbles
   ===================================================================== */
.dd-coins__tank {
	position: relative; margin-top: clamp(26px,4vw,40px);
	padding: clamp(26px,4vw,52px) clamp(14px,3vw,34px) clamp(34px,5vw,60px);
	border-radius: 34px;
	background: var(--tank);
	border: 1px solid var(--tank-brd);
	box-shadow: 0 40px 90px -50px rgba(20,40,55,.55),
	            inset 0 1px 0 rgba(255,255,255,.55),
	            inset 0 -40px 80px -60px rgba(10,40,55,.5);
	overflow: hidden;
	isolation: isolate;
}
html[data-dracula-scheme="dark"] .dd-coins__tank {
	box-shadow: 0 50px 110px -55px rgba(0,0,0,.8),
	            inset 0 1px 0 rgba(255,255,255,.06);
}

/* god rays drifting down through the water */
.dd-coins__rays {
	position: absolute; inset: -20% -10% auto -10%; height: 140%;
	pointer-events: none; z-index: 0; opacity: .5;
	background:
		linear-gradient(108deg, transparent 0 14%, rgba(255,255,255,.5) 15% 17%, transparent 18% 30%),
		linear-gradient(96deg, transparent 0 46%, rgba(255,247,223,.55) 47% 50%, transparent 51% 64%),
		linear-gradient(120deg, transparent 0 74%, rgba(255,255,255,.4) 75% 77%, transparent 78% 92%);
	mix-blend-mode: soft-light;
}
html[data-dracula-scheme="dark"] .dd-coins__rays { opacity: .35; mix-blend-mode: screen; }

/* ambient micro-bubbles (JS spawns children) */
.dd-coins__ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.dd-amb {
	position: absolute; bottom: -40px; border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(255,255,255,.25) 45%, rgba(255,255,255,.05) 70%);
	box-shadow: inset 0 0 6px rgba(255,255,255,.6);
	opacity: 0; will-change: transform, opacity;
}
html[data-dracula-scheme="dark"] .dd-amb {
	background: radial-gradient(circle at 32% 28%, rgba(180,235,245,.55), rgba(120,200,220,.12) 50%, transparent 72%);
}

/* =====================================================================
   THE BUBBLE FIELD
   ===================================================================== */
.dd-coins__field {
	position: relative; z-index: 1;
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
	gap: clamp(14px, 2.4vw, 30px) clamp(10px, 2vw, 26px);
}
/* Kill the theme's content-list disc marker on our <li> bubbles. The theme
   sets list-style-type directly on li (beats list-style:none on the ul), so we
   override on the li itself and blank the ::marker. */
.dd-coins__field .dd-bubble { list-style: none !important; }
.dd-coins__field .dd-bubble::marker { content: "" !important; }

.dd-bubble {
	--s: 108px;                 /* bubble diameter (size classes override) */
	margin: 0; flex: 0 0 auto;
	width: var(--s);
	transition: opacity .35s var(--ease), transform .35s var(--ease), filter .35s;
}
.dd-bubble.is-xl { --s: clamp(120px, 14vw, 168px); }
.dd-bubble.is-lg { --s: clamp(104px, 12vw, 138px); }
.dd-bubble.is-md { --s: clamp(90px, 10vw, 116px); }
.dd-bubble.is-sm { --s: clamp(74px, 8.5vw, 96px); }

/* Filtered-out bubbles leave the layout completely so the remaining ones
   repack tightly from the top — no leftover height, no mid-field gaps. */
.dd-bubble.is-hidden { display: none !important; }

.dd-bubble__link {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	outline: none;
}
.dd-bubble__link:focus-visible .dd-bubble__orb {
	box-shadow: 0 0 0 4px rgba(253,184,55,.6);
	border-radius: 50%;
}

/* layer 1: orb — receives the cursor-displacement transform from JS */
.dd-bubble__orb {
	position: relative;
	width: var(--s); height: var(--s);
	transform: translate3d(0,0,0);
	transition: transform .5s var(--ease);
}

/* layer 2: ball — receives the idle float animation */
.dd-bubble__ball {
	position: absolute; inset: 0;
	transform: translateZ(0);
}

/* layer 3: glass + rim — receive the hover scale */
.dd-bubble__glass {
	position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
	background: var(--bubble-bg);
	box-shadow:
		inset 0 7px 16px rgba(255,255,255,.34),
		inset 0 -14px 26px rgba(0,0,0,.5),
		inset 0 0 0 1.5px rgba(255,255,255,.16),
		0 16px 30px -12px rgba(8,30,45,.55);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
	z-index: 1;
}
.dd-bubble__img {
	/* width/height forced past the theme's global `img{height:auto}` rule so
	   object-fit:cover actually fills the round bubble (else it half-fills). */
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover; object-position: center; border-radius: 50%;
	display: block; margin: 0;
	transform: scale(1.04);
	transition: transform .5s var(--ease);
}
/* the classic glass shine, top-leading corner */
.dd-bubble__glass::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2;
	background:
		radial-gradient(38% 30% at 32% 24%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.18) 38%, transparent 60%),
		radial-gradient(14% 10% at 70% 76%, rgba(255,255,255,.5) 0%, transparent 60%);
	pointer-events: none;
}
/* depth: darken the lower-trailing edge so it reads as a sphere */
.dd-bubble__glass::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2;
	background: radial-gradient(120% 120% at 72% 86%, rgba(0,0,0,.42) 0%, transparent 46%);
	pointer-events: none; mix-blend-mode: multiply;
}

/* iridescent gold rim ring (its own layer so it can shimmer on hover) */
.dd-bubble__rim {
	position: absolute; inset: 0; border-radius: 50%; z-index: 3; padding: 2px;
	background: conic-gradient(from 210deg,
		#fff6cf, #e0be00, #fdb837, #ffffff, #9a7d00, #fdb837, #fff6cf);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: .9; pointer-events: none;
	transition: transform .4s var(--ease), opacity .3s;
}
.dd-bubble.is-xl .dd-bubble__rim,
.dd-bubble.is-lg .dd-bubble__rim { padding: 2.5px; }

/* "محبوب" badge */
.dd-bubble__hot {
	position: absolute; z-index: 4; top: 2px; inset-inline-end: -2px;
	font-size: 10px; font-weight: 900; letter-spacing: .02em; color: #2a2003;
	padding: 3px 8px; border-radius: 999px;
	background: linear-gradient(135deg, var(--g2), var(--g3));
	box-shadow: 0 6px 14px -6px rgba(224,190,0,.9), inset 0 1px 0 rgba(255,255,255,.6);
	transform: rotate(6deg);
}

.dd-bubble__name {
	font-size: 13px; font-weight: 800; color: var(--ink);
	text-align: center; line-height: 1.35; max-width: calc(var(--s) + 26px);
	transition: color .2s;
}
.dd-bubble.is-sm .dd-bubble__name { font-size: 12px; }
.dd-bubble.is-xl .dd-bubble__name { font-size: 14.5px; }

/* ---- hover / focus ---- */
@media (hover: hover) {
	.dd-bubble__link:hover .dd-bubble__glass {
		transform: scale(1.09);
		box-shadow:
			inset 0 8px 18px rgba(255,255,255,.42),
			inset 0 -14px 26px rgba(0,0,0,.45),
			inset 0 0 0 1.5px rgba(255,255,255,.24),
			0 26px 50px -16px rgba(224,190,0,.6);
	}
	.dd-bubble__link:hover .dd-bubble__rim { transform: scale(1.09) rotate(120deg); opacity: 1; }
	.dd-bubble__link:hover .dd-bubble__img { transform: scale(1.12); }
	.dd-bubble__link:hover .dd-bubble__name { color: var(--gd); }
	html[data-dracula-scheme="dark"] .dd-bubble__link:hover .dd-bubble__name { color: var(--g3); }
}

/* tap ripple (water ring) */
.dd-bubble__ripple {
	position: absolute; inset: 0; margin: auto; z-index: 5;
	width: 16%; height: 16%; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.85);
	pointer-events: none; opacity: .9;
	animation: dd-ripple .6s ease-out forwards;
}
@keyframes dd-ripple {
	to { width: 130%; height: 130%; opacity: 0; border-width: 0.5px; }
}

/* empty state */
.dd-coins__empty {
	position: relative; z-index: 1;
	text-align: center; color: var(--muted); font-weight: 600;
	padding: 40px 16px;
}

/* =====================================================================
   CTA
   ===================================================================== */
.dd-coins__cta {
	position: relative; overflow: hidden;
	margin-top: clamp(28px,4vw,44px);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 18px 28px;
	padding: clamp(24px,3.5vw,38px) clamp(22px,4vw,44px);
	border-radius: 26px;
	background: linear-gradient(135deg, rgba(253,184,55,.16), rgba(255,191,47,.06));
	border: 1px solid var(--hair);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-dracula-scheme="dark"] .dd-coins__cta {
	background: linear-gradient(135deg, rgba(253,184,55,.12), rgba(255,255,255,.03));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.dd-coins__cta-glow {
	position: absolute; inset-inline-end: -10%; top: -60%;
	width: 380px; height: 380px; border-radius: 50%; z-index: 0;
	background: radial-gradient(circle, rgba(253,184,55,.5), transparent 62%);
	filter: blur(20px); pointer-events: none;
}
.dd-coins__cta-text { position: relative; z-index: 1; min-width: 240px; flex: 1 1 340px; }
.dd-coins__cta-text h2 { margin: 0 0 6px; font-size: clamp(19px,2.4vw,25px); font-weight: 900; color: var(--ink); }
.dd-coins__cta-text p { margin: 0; color: var(--muted); font-size: 14.5px; }
.dd-coins__cta-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }
.dd-coins__btn {
	font-weight: 800; font-size: 15px; padding: 13px 26px; border-radius: 999px;
	transition: transform .14s var(--ease), box-shadow .25s, background .25s;
}
.dd-coins__btn:active { transform: translateY(1px); }
.dd-coins__btn--gold {
	color: #2a2003; background: linear-gradient(135deg, var(--g2), var(--g3));
	box-shadow: 0 14px 30px -12px rgba(224,190,0,.8);
}
.dd-coins__btn--gold:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -12px rgba(224,190,0,.95); }
.dd-coins__btn--ghost {
	color: var(--gd); background: var(--card); border: 1.5px solid var(--hair);
}
.dd-coins__btn--ghost:hover { transform: translateY(-2px); border-color: var(--g2); }
html[data-dracula-scheme="dark"] .dd-coins__btn--ghost { color: var(--g3); }

/* =====================================================================
   MOTION — idle float (CSS), ambient rise & live pulse
   Gated behind reduced-motion. The four variants keep the field organic.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.dd-coins__live { animation: dd-live 2.4s ease-out infinite; }
	@keyframes dd-live {
		0% { box-shadow: 0 0 0 0 rgba(22,199,132,.5); }
		70%,100% { box-shadow: 0 0 0 7px rgba(22,199,132,0); }
	}

	/* Only animate bubbles currently in view (.is-vis added by JS) to keep
	   a few-hundred-element field smooth. */
	.dd-coins.is-motion .dd-bubble.is-vis .dd-bubble__ball {
		animation-name: dd-float-v1;
		animation-duration: var(--fd, 8s);
		animation-delay: var(--dl, 0s);
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}
	.dd-coins.is-motion .dd-bubble.is-v2.is-vis .dd-bubble__ball { animation-name: dd-float-v2; }
	.dd-coins.is-motion .dd-bubble.is-v3.is-vis .dd-bubble__ball { animation-name: dd-float-v3; }
	.dd-coins.is-motion .dd-bubble.is-v4.is-vis .dd-bubble__ball { animation-name: dd-float-v4; }

	@keyframes dd-float-v1 {
		from { transform: translate3d(calc(var(--ax) * -.5), var(--ay), 0) rotate(calc(var(--rot) * -1)); }
		to   { transform: translate3d(var(--ax), calc(var(--ay) * -1), 0) rotate(var(--rot)); }
	}
	@keyframes dd-float-v2 {
		from { transform: translate3d(var(--ax), calc(var(--ay) * .6), 0) rotate(var(--rot)); }
		to   { transform: translate3d(calc(var(--ax) * -1), calc(var(--ay) * -1), 0) rotate(calc(var(--rot) * -1)); }
	}
	@keyframes dd-float-v3 {
		0%   { transform: translate3d(0, var(--ay), 0) rotate(0deg); }
		50%  { transform: translate3d(var(--ax), calc(var(--ay) * -.4), 0) rotate(var(--rot)); }
		100% { transform: translate3d(0, calc(var(--ay) * -1), 0) rotate(0deg); }
	}
	@keyframes dd-float-v4 {
		0%   { transform: translate3d(calc(var(--ax) * -1), calc(var(--ay) * -.3), 0) rotate(calc(var(--rot) * -1)); }
		50%  { transform: translate3d(calc(var(--ax) * .5), var(--ay), 0) rotate(var(--rot)); }
		100% { transform: translate3d(calc(var(--ax) * -1), calc(var(--ay) * -.3), 0) rotate(calc(var(--rot) * -1)); }
	}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 600px) {
	.dd-coins__field { gap: 16px 10px; }
	.dd-bubble__hot { font-size: 9px; padding: 2px 6px; }
	.dd-coins__controls { gap: 10px; }
	.dd-coins__chips { width: 100%; justify-content: center; }
}

/* =====================================================================
   REDUCED MOTION — hard stop
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.dd-coins *,
	.dd-coins *::before,
	.dd-coins *::after { animation: none !important; transition: none !important; }
	.dd-coins__ambient, .dd-coins__rays { display: none !important; }
}

/* TOP-GAP FIX — theme adds 80px margin on #single.fullcover. Scoped to the
   full /coins/ page only, so loading this file for the voucher strip does not
   shift other layouts. */
#single.content.fullcover:has(.dd-coins:not(.dd-coins--voucher)) { margin-top: 0 !important; }

/* =====================================================================
   VOUCHER STRIP VARIANT — [dd_voucher_bubbles] inside an article column
   (top of /voucher/). Compact hero, slimmer tank, bigger bubbles; no
   full-width takeover (see the :not() scoping above).
   ===================================================================== */
.dd-coins--voucher { margin: 0 0 22px !important; }
.dd-coins--voucher .dd-coins__wrap {
	max-width: 100%;
	padding: 0 0 6px;
}
.dd-coins--voucher .dd-coins__title {
	font-size: clamp(23px, 3.4vw, 33px);
	margin-top: 12px;
}
.dd-coins--voucher .dd-coins__lede { font-size: clamp(14px, 1.5vw, 16px); }
.dd-coins--voucher .dd-coins__tank {
	margin-top: clamp(18px, 3vw, 26px);
	padding: clamp(24px, 3.5vw, 42px) clamp(12px, 2.5vw, 26px) clamp(30px, 4vw, 48px);
	border-radius: 28px;
}
/* beat the theme's `.text ul` margins on the bubble field */
.dd-coins--voucher .dd-coins__field {
	margin: 0 !important;
	padding: 0 !important;
	gap: clamp(18px, 3vw, 34px) clamp(14px, 2.4vw, 30px);
}
/* neutralise the theme's in-content image framing on bubble logos */
.dd-coins--voucher .dd-bubble__img {
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	background: none !important;
}
.dd-coins--voucher .dd-bubble__name { font-size: 14.5px; }

/* ---- merged into the cointro duo hero (voucher hub) --------------------
   dd_vouchers_merge_into_hero() lifts the strip inside the full-bleed
   .dd-cointro--duo section, right after the copy+converter columns. Align
   it with the hero's 1180px column, drop the duplicate eyebrow pill and
   tighten the header so hero → bubbles reads as one continuous section. */
.dd-cointro .dd-coins--voucher { margin: 0 !important; }
.dd-cointro .dd-coins--voucher .dd-coins__wrap {
	position: relative; z-index: 1;
	max-width: 1180px;
	margin-inline: auto;
	padding: clamp(20px, 3vw, 34px) 0 0;
}
.dd-cointro .dd-coins--voucher .dd-coins__eyebrow { display: none; }
.dd-cointro .dd-coins--voucher .dd-coins__title {
	font-size: clamp(20px, 2.6vw, 28px);
	margin-top: 0;
}
.dd-cointro .dd-coins--voucher .dd-coins__lede {
	font-size: clamp(13.5px, 1.4vw, 15px);
	margin-top: 8px;
}
.dd-cointro .dd-coins--voucher .dd-coins__tank {
	margin-top: clamp(14px, 2.2vw, 20px);
	padding: clamp(20px, 3vw, 34px) clamp(10px, 2vw, 22px) clamp(24px, 3.4vw, 40px);
	border-radius: 26px;
}

/* ---- bubbles as the hero's second column (voucher hub) ------------------
   dd_vouchers_merge_into_hero() puts the strip in the column that used to hold
   the price converter, so the bubbles sit beside the H1 and the converter is
   dropped. The strip is a grid item here, not a full-bleed row, so drop the
   1180px re-centering the merged-into-hero rules apply. */
/* The customizer CSS gives the two hero columns their clearance under the
   floating header capsule individually — `h1, h1.dd-cointro__h1` 50px and
   `.dd-conv, .dd-cointro__panel` 100px, both !important. The bubbles replaced
   the panel, so they need their own or the top row slides under the header. */
.dd-cointro__cols > .dd-coins--voucher {
	margin: 100px 0 0 !important;
	min-width: 0;
}
.dd-cointro__cols > .dd-coins--voucher .dd-coins__wrap {
	max-width: 100%;
	padding: 0;
}
.dd-cointro__cols > .dd-coins--voucher .dd-coins__tank {
	margin-top: 0;
	padding: clamp(18px, 2.6vw, 30px) clamp(10px, 1.8vw, 20px) clamp(22px, 3vw, 34px);
	border-radius: 26px;
}
.dd-cointro__cols > .dd-coins--voucher .dd-coins__field {
	gap: clamp(12px, 1.8vw, 22px) clamp(10px, 1.6vw, 18px);
}
.dd-cointro__cols > .dd-coins--voucher .dd-bubble.is-xl {
	--s: clamp(92px, 9vw, 124px);
}
.dd-cointro__cols > .dd-coins--voucher .dd-bubble__name { font-size: 13.5px; }

/* Extra clearance under the floating header capsule for this one hero.
   Scoped by the strip's presence, so the coin heroes keep their spacing. */
.dd-cointro--duo:has(.dd-coins--voucher) {
	padding-top: clamp(30px, 3.4vw, 56px);
}

@media (max-width: 980px) {
	.dd-cointro__cols > .dd-coins--voucher .dd-bubble.is-xl {
		--s: clamp(100px, 22vw, 150px);
	}
}