/* =====================================================================
   DD Rate Lock - the members-only lock that stands in for the Tether rate
   ---------------------------------------------------------------------
   Three sizes of one object: the PILL (inside a sentence or a cell), the
   CARD (where a hero price sat) and the CHART (where a Tether chart sat).

   The idea: the number is still THERE, behind frosted glass. A blurred,
   scrambling decoy (never the real rate) sits under a gold lock, so the
   reader feels the price is one step away, and the step is a free sign up.

   House bans respected (DESIGN-BANS.md): no eyebrow pill above a heading
   (the card title is a <p>, and nothing sits above it but the vault), no
   coloured bar or rail anywhere (every border is a 1px hairline), colour
   is state (gold = the lock and the one action). Every component carries
   .dracula-ignore so the dark mode plugin leaves it alone; the dark block
   below is ours. Gradients are rebuilt from one-integer-per-channel
   tokens, the same defence the price pages use.
   ===================================================================== */

.dd-rl {
	--rl-g1: 253, 184, 55;
	--rl-g2: 255, 191, 47;
	--rl-g3: 224, 190, 0;
	--rl-gd: 154, 125, 0;
	--rl-ink: 24, 24, 28;
	--rl-mut: 108, 108, 120;
	--rl-glass-a: 255, 255, 255;
	--rl-hair: rgba(28, 22, 4, .12);
	--rl-shadow: 0 18px 44px -24px rgba(58, 44, 0, .45);
	--rl-ease: cubic-bezier(.22, .61, .36, 1);
	--rl-grad: linear-gradient(135deg, rgb(var(--rl-g1)) 0%, rgb(var(--rl-g2)) 48%, rgb(var(--rl-g3)) 100%);
	box-sizing: border-box;
	direction: rtl;
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}
.dd-rl *, .dd-rl *::before, .dd-rl *::after { box-sizing: border-box; }

html[data-dracula-scheme="dark"] .dd-rl {
	--rl-ink: 236, 236, 241 !important;
	--rl-mut: 163, 163, 176 !important;
	--rl-gd: 255, 191, 47 !important;
	--rl-glass-a: 30, 30, 38 !important;
	--rl-hair: rgba(255, 255, 255, .14) !important;
	--rl-shadow: 0 20px 44px -22px rgba(0, 0, 0, .95) !important;
}

/* ---------------------------------------------------------------- lock */
.dd-rl-lock { width: 1em; height: 1em; display: block; overflow: visible; }
.dd-rl-lock__shackle { transition: transform .45s var(--rl-ease); transform-origin: 16.5px 11px; }
.dd-rl:hover .dd-rl-lock__shackle,
.dd-rl:focus-within .dd-rl-lock__shackle { transform: translateY(-2.2px) rotate(-14deg); }

/* --------------------------------------------------------------- ghost */
.dd-rl-ghost {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	filter: blur(4.5px);
	opacity: .75;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
	white-space: nowrap;
	transition: filter .4s var(--rl-ease), opacity .4s var(--rl-ease);
}

/* ================================================================ PILL */
.dd-rl-pill,
a.dd-rl-pill:visited {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .38em;
	vertical-align: middle;
	margin: 0 .12em;
	padding: .12em .62em .12em .5em;
	border-radius: 999px;
	border: 1px solid rgba(var(--rl-g3), .38);
	background:
		linear-gradient(180deg, rgba(var(--rl-glass-a), .9), rgba(var(--rl-glass-a), .6)),
		rgba(var(--rl-g2), .12);
	color: rgb(var(--rl-ink)) !important;
	text-decoration: none !important;
	line-height: 1.6;
	font-weight: 700;
	font-size: .94em;
	box-shadow: 0 6px 16px -10px rgba(var(--rl-gd), .7), inset 0 1px 0 rgba(255, 255, 255, .7);
	transition: transform .3s var(--rl-ease), box-shadow .3s var(--rl-ease), border-color .3s var(--rl-ease);
	overflow: visible;
	isolation: isolate;
	cursor: pointer;
}
.dd-rl-pill__ico {
	display: inline-grid;
	place-items: center;
	width: 1.45em;
	height: 1.45em;
	border-radius: 50%;
	background: var(--rl-grad);
	color: #2b2100;
	font-size: .82em;
	flex: none;
	box-shadow: 0 0 0 3px rgba(var(--rl-g2), .18);
}
.dd-rl-pill__ico .dd-rl-lock { width: .95em; height: .95em; }
.dd-rl-pill .dd-rl-ghost { filter: blur(max(3.6px, .26em)); color: rgb(var(--rl-ink)); }
.dd-rl-pill__tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translate(-50%, 4px);
	padding: .3em .75em;
	border-radius: 9px;
	background: rgb(24, 24, 28);
	color: #fff;
	font-size: .78em;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s var(--rl-ease), transform .25s var(--rl-ease);
	z-index: 3;
}
html[data-dracula-scheme="dark"] .dd-rl-pill__tip { background: rgb(253, 184, 55) !important; color: #1b1500 !important; }
.dd-rl-pill:hover,
a.dd-rl-pill:focus-visible,
a:hover > * > .dd-rl-pill,
a:hover .dd-rl-pill {
	transform: translateY(-1px);
	border-color: rgba(var(--rl-g3), .75);
	box-shadow: 0 10px 22px -12px rgba(var(--rl-gd), .85), inset 0 1px 0 rgba(255, 255, 255, .7);
	outline: none;
}
.dd-rl-pill:hover .dd-rl-pill__tip,
a.dd-rl-pill:focus-visible .dd-rl-pill__tip { opacity: 1; transform: translate(-50%, 0); }
.dd-rl-pill:hover .dd-rl-ghost { filter: blur(max(3px, .2em)); opacity: .9; }

/* ================================================================ CARD */
.dd-rl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	width: 100%;
	padding: 22px 20px 20px;
	border-radius: 20px;
	border: 1px solid var(--rl-hair);
	background:
		radial-gradient(120% 90% at 50% -10%, rgba(var(--rl-g2), .16), transparent 60%),
		linear-gradient(180deg, rgba(var(--rl-glass-a), .92), rgba(var(--rl-glass-a), .7));
	box-shadow: var(--rl-shadow), inset 0 1px 0 rgba(255, 255, 255, .55);
	color: rgb(var(--rl-ink));
	overflow: hidden;
	isolation: isolate;
}

/* the vault: the decoy number behind glass, the badge in front of it */
.dd-rl-card__vault {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 96px;
	border-radius: 16px;
	border: 1px solid var(--rl-hair);
	background:
		repeating-linear-gradient(135deg, rgba(var(--rl-g3), .06) 0 10px, transparent 10px 20px),
		linear-gradient(180deg, rgba(var(--rl-g2), .1), rgba(var(--rl-g2), .03));
	overflow: hidden;
}
.dd-rl-card__num {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	direction: rtl;
}
.dd-rl-ghost--xl {
	font-size: clamp(2.1rem, 5vw, 3.1rem);
	font-weight: 900;
	line-height: 1;
	filter: blur(9px);
	opacity: .62;
	color: rgb(var(--rl-ink));
}
.dd-rl-card__unit {
	font-size: .95rem;
	font-weight: 700;
	color: rgb(var(--rl-mut));
	filter: blur(1.5px);
	opacity: .6;
}
.dd-rl-card__badge {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--rl-grad);
	color: #2b2100;
	font-size: 26px;
	box-shadow: 0 12px 26px -10px rgba(var(--rl-gd), .9), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(120, 90, 0, .25);
	z-index: 2;
}
.dd-rl-card__badge--sm { position: relative; inset: auto; width: 50px; height: 50px; font-size: 22px; }
.dd-rl-ring {
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 2px solid rgba(var(--rl-g2), .55);
	animation: dd-rl-ring 2.8s var(--rl-ease) infinite;
	pointer-events: none;
}
.dd-rl-ring--2 { animation-delay: 1.4s; }
@keyframes dd-rl-ring {
	0%   { transform: scale(1);    opacity: .75; }
	100% { transform: scale(1.75); opacity: 0; }
}

/* light sweeping across the glass: the «something is behind this» cue */
.dd-rl-sheen {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 46%, transparent 62%);
	transform: translateX(-120%);
	animation: dd-rl-sheen 4.6s var(--rl-ease) infinite;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: soft-light;
}
html[data-dracula-scheme="dark"] .dd-rl-sheen { background: linear-gradient(100deg, transparent 30%, rgba(255, 210, 110, .22) 46%, transparent 62%) !important; mix-blend-mode: normal; }
@keyframes dd-rl-sheen {
	0%, 35% { transform: translateX(-120%); }
	75%, 100% { transform: translateX(120%); }
}

.dd-rl-card__body { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.dd-rl .dd-rl-card__title {
	margin: 0 !important;
	font-size: 1.08rem;
	font-weight: 900;
	line-height: 1.6;
	color: rgb(var(--rl-ink)) !important;
}
.dd-rl .dd-rl-card__text {
	margin: 0 !important;
	max-width: 40ch;
	font-size: .9rem;
	line-height: 1.85;
	color: rgb(var(--rl-mut)) !important;
}
.dd-rl-card__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	margin-top: 4px;
}

/* the one action */
a.dd-rl-btn,
a.dd-rl-btn:visited {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 14px;
	background: var(--rl-grad);
	color: #241b00 !important;
	font-weight: 900;
	font-size: .98rem;
	text-decoration: none !important;
	box-shadow: 0 14px 28px -14px rgba(var(--rl-gd), .95), inset 0 1px 0 rgba(255, 255, 255, .55);
	overflow: hidden;
	transition: transform .3s var(--rl-ease), box-shadow .3s var(--rl-ease);
	isolation: isolate;
}
a.dd-rl-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
	transform: translateX(-130%);
	animation: dd-rl-sheen 3.8s var(--rl-ease) infinite 1s;
	z-index: -1;
}
a.dd-rl-btn:hover,
a.dd-rl-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 20px 34px -14px rgba(var(--rl-gd), 1), inset 0 1px 0 rgba(255, 255, 255, .55);
	outline: none;
}
.dd-rl-arrow { width: 18px; height: 18px; flex: none; transition: transform .3s var(--rl-ease); }
a.dd-rl-btn:hover .dd-rl-arrow { transform: translateX(-4px); }

a.dd-rl-alt,
a.dd-rl-alt:visited {
	color: rgb(var(--rl-gd)) !important;
	font-size: .88rem;
	font-weight: 700;
	text-decoration: none !important;
	border-bottom: 1px dashed rgba(var(--rl-gd), .5);
	padding-bottom: 1px;
}
a.dd-rl-alt:hover { border-bottom-style: solid; }

.dd-rl .dd-rl-perks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: .8rem;
	color: rgb(var(--rl-mut));
}
.dd-rl .dd-rl-perks li { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; }
.dd-rl .dd-rl-perks li::before { content: none !important; display: none !important; }
.dd-rl-perks svg { width: 15px; height: 15px; color: rgb(var(--rl-g3)); flex: none; }

/* compact: a stat card on the front page, a rate line on a hub */
.dd-rl-card--compact { padding: 14px; gap: 10px; border-radius: 16px; }
.dd-rl-card--compact .dd-rl-card__vault { min-height: 70px; }
.dd-rl-card--compact .dd-rl-ghost--xl { font-size: 1.9rem; filter: blur(7px); }
.dd-rl-card--compact .dd-rl-card__badge { width: 44px; height: 44px; font-size: 19px; }
.dd-rl-card--compact .dd-rl-card__title { font-size: .95rem; }
.dd-rl-card--compact .dd-rl-card__text { font-size: .8rem; line-height: 1.75; }
.dd-rl-card--compact a.dd-rl-btn { min-height: 40px; padding: 0 16px; font-size: .86rem; border-radius: 12px; }

/* tiny: inside a small dashboard tile, vault + one button */
.dd-rl-card--tiny { padding: 10px; gap: 8px; border-radius: 14px; box-shadow: none; }
.dd-rl-card--tiny .dd-rl-card__vault { min-height: 52px; }
.dd-rl-card--tiny .dd-rl-ghost--xl { font-size: 1.45rem; filter: blur(6px); }
.dd-rl-card--tiny .dd-rl-card__badge { width: 34px; height: 34px; font-size: 15px; }
.dd-rl-card--tiny .dd-rl-card__title { font-size: .84rem; }
.dd-rl-card--tiny a.dd-rl-btn { min-height: 34px; padding: 0 12px; font-size: .78rem; border-radius: 10px; gap: 6px; }
.dd-rl-card--tiny .dd-rl-arrow { width: 14px; height: 14px; }

/* =============================================================== CHART */
.dd-rl-chart {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	min-height: var(--dd-rl-h, 260px);
	border-radius: 18px;
	border: 1px solid var(--rl-hair);
	background:
		repeating-linear-gradient(0deg, rgba(var(--rl-ink), .05) 0 1px, transparent 1px 44px),
		linear-gradient(180deg, rgba(var(--rl-g2), .07), rgba(var(--rl-g2), .015));
	overflow: hidden;
	isolation: isolate;
	color: rgb(var(--rl-ink));
}
.dd-rl-chart__ghost {
	position: absolute;
	inset: 16% 0 0 0;
	width: 100%;
	height: 84%;
	color: rgb(var(--rl-g3));
	filter: blur(5px);
	opacity: .75;
	z-index: 0;
	animation: dd-rl-drift 9s ease-in-out infinite alternate;
}
.dd-rl-chart__area { opacity: .2; }
.dd-rl-chart__line { opacity: .9; }
@keyframes dd-rl-drift {
	from { transform: translateX(0) scaleY(1); }
	to   { transform: translateX(-2%) scaleY(1.06); }
}
.dd-rl-chart__panel {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	max-width: min(420px, calc(100% - 28px));
	margin: 20px auto;
	padding: 20px 22px;
	border-radius: 18px;
	border: 1px solid var(--rl-hair);
	background: linear-gradient(180deg, rgba(var(--rl-glass-a), .82), rgba(var(--rl-glass-a), .6));
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
	box-shadow: var(--rl-shadow);
}
.dd-rl-chart__panel a.dd-rl-btn { margin-top: 6px; }

/* ============================================================== MOTION */
@media (prefers-reduced-motion: reduce) {
	.dd-rl-ring, .dd-rl-sheen, a.dd-rl-btn::after, .dd-rl-chart__ghost { animation: none !important; }
	.dd-rl-lock__shackle, a.dd-rl-pill, a.dd-rl-btn { transition: none !important; }
	.dd-rl-ring { opacity: 0; }
}

@media (max-width: 480px) {
	.dd-rl-card { padding: 18px 14px 16px; }
	.dd-rl-card__acts { flex-direction: column; width: 100%; }
	.dd-rl-card:not(.dd-rl-card--tiny) a.dd-rl-btn { width: 100%; }
	.dd-rl-chart__panel { padding: 16px 14px; }
}

/* ============================================================ HOSTS
   Where a lock replaces a whole block on another page, the wrapper
   that block used to own its spacing goes with it, so the lock sets it. */
.ddbf-price-lock { max-width: 560px; margin: 28px auto; }
.ddbf-snap-lock { margin: 28px 0; }
.dd-tp-console-lock { width: 100%; align-self: center; }
.dd-tp-conv-lock { max-width: 760px; margin: 0 auto 8px; }
.dd-coinbox--locked .dd-rl-chart,
.dd-coinbox--locked .dd-rl-card { margin-top: 14px; }
.dd-card--tether .dd-rl-card--tiny { margin-top: 6px; }
.dd-hero__panel > .dd-rl-card { min-height: 100%; justify-content: center; }
.dd-cointro__panel > .dd-rl-card { justify-content: center; }
/* The locked coin card in the front page map. The map grid gives every
   card the same row height (grid-auto-rows: minmax(0,1fr)), so the locked
   card has to fit the box its BTC neighbour sets: one name row, one lock
   row, one single-line call to sign up. Nothing may wrap. */
.dd-map__ent--locked { justify-content: center; overflow: hidden; }
.dd-map__ent--locked .dd-map__price { align-items: center; flex-wrap: nowrap; min-width: 0; }
.dd-map__ent--locked .dd-map__price-v { display: inline-flex; min-width: 0; line-height: 1; }
.dd-map__ent--locked .dd-rl-pill { margin: 0; font-size: 13px; padding: .18em .6em .18em .45em; max-width: 100%; }
.dd-map__ent--locked .dd-rl-pill__tip { display: none; }
.dd-rl-mini {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	max-width: 100%;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: rgb(154, 125, 0);
}
.dd-rl-mini svg { width: 13px; height: 13px; flex: none; transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
.dd-map__ent--locked:hover .dd-rl-mini svg { transform: translateX(-3px); }
html[data-dracula-scheme="dark"] .dd-rl-mini { color: rgb(255, 191, 47) !important; }
@media (max-width: 600px) {
	.dd-map__ent--locked { gap: 6px; }
	.dd-map__ent--locked .dd-rl-pill { font-size: 11.5px; }
	.dd-map__ent--locked .dd-rl-pill .dd-rl-ghost { max-width: 4.6em; overflow: hidden; }
	.dd-rl-mini { font-size: 10.5px; }
}