/* =============================================================================
   DD Coin Box — "Sign-up / Login" CTA banner, shown directly under the coin box
   (coin pages) and under the live price table (front page).

   A single always-visible card: a gold glass header carrying the three
   guarantees (کاملاً خودکار · بهترین قیمت · بدون کارمزد) with the
   «ثبت‌نام رایگان» / «ورود به حساب» buttons right below it. No disclosure —
   the buttons are shown straight away.

   Self-contained design tokens → works on any theme, in light + dark
   (html[data-dracula-scheme="dark"]), RTL, and every viewport.
   ========================================================================== */

@property --ddc-spin { syntax:"<angle>"; inherits:false; initial-value:0deg; }

.dd-cta{
	--ddc-gold:#e0a300;
	--ddc-gold-bright:#ffc53d;
	--ddc-grad:linear-gradient(135deg,#fdb837 0%,#ffc53d 50%,#e0a300 100%);
	--ddc-ink:#41414e;
	--ddc-strong:#1e1e28;
	--ddc-muted:#6c6c79;
	--ddc-surface:#fffdf7;
	--ddc-surface-2:#fff6e3;
	--ddc-line:rgba(224,163,0,.30);
	--ddc-cta-ink:#3a2a00;
	--ddc-chip-bg:rgba(224,163,0,.10);
	--ddc-shadow:0 2px 6px rgba(150,110,0,.07),0 26px 50px -30px rgba(170,125,0,.55);

	position:relative;
	max-width:840px;
	margin:22px auto 30px;
	direction:rtl;
	text-align:right;
}

/* -------------------------------------------------------------------------
   Header card
   ---------------------------------------------------------------------- */
.dd-cta__face{
	position:relative;
	display:flex;align-items:center;gap:18px;
	margin:0;
	padding:18px 22px;
	border-radius:24px;
	isolation:isolate;
	overflow:hidden;
	/* gold gradient ring + soft surface fill */
	background:
		linear-gradient(180deg,var(--ddc-surface) 0%,var(--ddc-surface-2) 100%) padding-box,
		var(--ddc-grad) border-box;
	border:1.5px solid transparent;
	box-shadow:var(--ddc-shadow);
	animation:ddc-rise .6s cubic-bezier(.2,.7,.2,1) both;
}

/* diagonal sheen that sweeps across the capsule */
.dd-cta__sheen{
	position:absolute;top:0;bottom:0;left:0;width:38%;z-index:2;pointer-events:none;
	background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
	transform:translateX(-160%) skewX(-18deg);
	animation:ddc-sweep 6.5s ease-in-out infinite;
}

/* twinkling sparks */
.dd-cta__spark{
	position:absolute;width:7px;height:7px;border-radius:50%;z-index:2;pointer-events:none;opacity:0;
	background:radial-gradient(circle,#fff 0%,rgba(255,213,120,.25) 70%,transparent 72%);
	filter:drop-shadow(0 0 4px rgba(255,200,90,.85));
	animation:ddc-twinkle 3.6s ease-in-out infinite;animation-delay:var(--d,0s);
}

/* emblem: gold tile + rotating conic halo + bolt */
.dd-cta__emblem{
	position:relative;z-index:1;flex:0 0 auto;
	width:60px;height:60px;display:grid;place-items:center;
}
.dd-cta__emblem::before{ /* halo */
	/* circle (not rounded square) so rotating the ELEMENT reads the same as the
	   old --ddc-spin gradient-angle animation — custom-property animations run
	   on the main thread and re-rasterized this blur every frame (INP). */
	content:"";position:absolute;inset:-6px;border-radius:50%;z-index:0;
	background:conic-gradient(#ffd76b,#e0a300,#fff0c4,#ffb300,#ffd76b);
	filter:blur(7px);opacity:.6;
	animation:ddc-halo 5.5s linear infinite;
}
.dd-cta__emblem::after{ /* tile */
	content:"";position:absolute;inset:0;border-radius:18px;z-index:1;
	background:var(--ddc-grad);
	box-shadow:0 8px 20px -6px rgba(224,163,0,.6),inset 0 1px 0 rgba(255,255,255,.55);
}
.dd-cta__emblem svg{position:relative;z-index:2;width:30px;height:30px;color:#fff;filter:drop-shadow(0 2px 4px rgba(120,80,0,.35));}

.dd-cta__body{position:relative;z-index:1;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px;}
.dd-cta__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--ddc-gold);letter-spacing:.2px;}
.dd-cta__live{
	position:relative;width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#19c37d;
}
/* sonar ring as a scaled/faded pseudo — composited, unlike a box-shadow animation */
.dd-cta__live::after{
	content:"";position:absolute;inset:0;border-radius:50%;
	box-shadow:0 0 0 3px rgba(25,195,125,.55);opacity:0;
	animation:ddc-live 1.9s ease-out infinite;
}
.dd-cta__title{font-size:1.36rem;line-height:1.4;font-weight:800;color:var(--ddc-strong);}
.dd-cta__feats{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.dd-cta__feat{
	display:inline-flex;align-items:center;gap:5px;
	font-size:.82rem;font-weight:700;color:var(--ddc-ink);
	background:var(--ddc-chip-bg);border:1px solid var(--ddc-line);
	padding:5px 11px;border-radius:999px;
}
.dd-cta__feat svg{width:14px;height:14px;flex:0 0 auto;color:var(--ddc-gold);}

/* -------------------------------------------------------------------------
   Action buttons (always visible)
   ---------------------------------------------------------------------- */
.dd-cta__btns{display:flex;gap:12px;margin-top:14px;}
.dd-cta__btn{
	position:relative;flex:1 1 0;min-width:0;
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	padding:16px 20px;border-radius:16px;overflow:hidden;
	font-weight:800;font-size:1.05rem;text-decoration:none;line-height:1.2;
	transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.dd-cta__btn:active{transform:translateY(1px) scale(.99);}
.dd-cta__btn svg{width:19px;height:19px;flex:0 0 auto;}
.dd-cta__btn-label{position:relative;z-index:1;}

/* primary — signup */
.dd-cta__btn--signup{
	color:var(--ddc-cta-ink);
	background:var(--ddc-grad);
	box-shadow:0 14px 30px -12px rgba(224,163,0,.85),inset 0 1px 0 rgba(255,255,255,.5);
}
.dd-cta__btn--signup:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(224,163,0,.95),inset 0 1px 0 rgba(255,255,255,.6);}
.dd-cta__btn--signup .dd-cta__arrow{transition:transform .25s ease;}
.dd-cta__btn--signup:hover .dd-cta__arrow{transform:translateX(-4px);}
.dd-cta__btn-sheen{
	position:absolute;top:0;bottom:0;left:0;width:34%;z-index:0;pointer-events:none;
	background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
	transform:translateX(-160%) skewX(-18deg);
}
.dd-cta__btn--signup:hover .dd-cta__btn-sheen{animation:ddc-sweep-once .85s ease;}
.dd-cta__btn-spark{
	position:absolute;top:9px;left:18px;width:6px;height:6px;border-radius:50%;z-index:1;pointer-events:none;
	background:radial-gradient(circle,#fff,rgba(255,255,255,0) 70%);
	filter:drop-shadow(0 0 3px rgba(255,255,255,.9));
	animation:ddc-twinkle 2.8s ease-in-out infinite .4s;
}

/* secondary — login (gradient-outline ghost) */
.dd-cta__btn--login{
	color:var(--ddc-gold);
	background:linear-gradient(var(--ddc-surface),var(--ddc-surface)) padding-box,var(--ddc-grad) border-box;
	border:1.5px solid transparent;
	box-shadow:0 8px 20px -14px rgba(224,163,0,.7);
}
.dd-cta__btn--login:hover{
	transform:translateY(-2px);
	background:linear-gradient(var(--ddc-surface-2),var(--ddc-surface-2)) padding-box,var(--ddc-grad) border-box;
}

.dd-cta__assure{
	display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
	gap:8px 18px;margin:14px 2px 2px;padding:0;
}
.dd-cta__assure span{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--ddc-muted);}
.dd-cta__assure svg{width:15px;height:15px;flex:0 0 auto;color:var(--ddc-gold);}

/* -------------------------------------------------------------------------
   Keyframes
   ---------------------------------------------------------------------- */
@keyframes ddc-rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes ddc-halo{to{transform:rotate(360deg);}}
@keyframes ddc-live{0%{transform:scale(.8);opacity:.8;}70%,100%{transform:scale(2);opacity:0;}}
@keyframes ddc-twinkle{0%,100%{opacity:0;transform:scale(.4);}45%,55%{opacity:1;transform:scale(1);}}
@keyframes ddc-sweep{0%{transform:translateX(-160%) skewX(-18deg);opacity:0;}6%{opacity:1;}26%{transform:translateX(420%) skewX(-18deg);opacity:0;}100%{transform:translateX(420%) skewX(-18deg);opacity:0;}}
@keyframes ddc-sweep-once{0%{transform:translateX(-160%) skewX(-18deg);}100%{transform:translateX(460%) skewX(-18deg);}}

/* -------------------------------------------------------------------------
   Dark mode (Dracula scheme)
   ---------------------------------------------------------------------- */
html[data-dracula-scheme="dark"] .dd-cta{
	--ddc-ink:#cdcdd9;
	--ddc-strong:#ffffff;
	--ddc-muted:#9a9aa8;
	--ddc-surface:#1d1e28;
	--ddc-surface-2:#23202b;
	--ddc-line:rgba(255,197,61,.26);
	--ddc-chip-bg:rgba(255,197,61,.09);
	--ddc-shadow:0 2px 6px rgba(0,0,0,.4),0 28px 54px -30px rgba(0,0,0,.85);
}
html[data-dracula-scheme="dark"] .dd-cta__sheen{background:linear-gradient(100deg,transparent,rgba(255,214,130,.16),transparent);}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width:680px){
	.dd-cta{margin:18px auto 24px;}
	.dd-cta__face{gap:14px;padding:16px;border-radius:20px;}
	.dd-cta__emblem{width:50px;height:50px;}
	.dd-cta__emblem svg{width:25px;height:25px;}
	.dd-cta__emblem::after{border-radius:15px;}
	.dd-cta__title{font-size:1.14rem;}
	.dd-cta__btns{flex-direction:column;}
}
@media (max-width:380px){
	.dd-cta__feats{gap:6px;}
	.dd-cta__feat{font-size:.76rem;padding:4px 9px;}
	.dd-cta__title{font-size:1.06rem;}
}

/* =============================================================================
   Hero merge — shared "ثبت‌نام رایگان" button (used inside the coin box AND the
   homepage intro box) + hiding the theme's now-empty page-title wrapper.
   Self-contained: depends on no parent tokens, so it renders identically in
   either box and in light/dark.
   ========================================================================== */
.dd-signup-btn{
	position:relative;display:flex;align-items:center;justify-content:center;gap:9px;
	width:100%;padding:15px 20px;border-radius:14px;overflow:hidden;
	font-weight:800;font-size:1.05rem;line-height:1.2;text-decoration:none;
	color:#3a2a00;
	background:linear-gradient(135deg,#fdb837 0%,#ffc53d 50%,#e0a300 100%);
	box-shadow:0 14px 30px -12px rgba(224,163,0,.85),inset 0 1px 0 rgba(255,255,255,.5);
	transition:transform .25s ease,box-shadow .25s ease;
}
.dd-signup-btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(224,163,0,.95),inset 0 1px 0 rgba(255,255,255,.6);}
.dd-signup-btn:active{transform:translateY(0) scale(.99);}
.dd-signup-btn__label{position:relative;z-index:1;}
.dd-signup-btn__arrow{width:19px;height:19px;flex:0 0 auto;transition:transform .25s ease;}
.dd-signup-btn:hover .dd-signup-btn__arrow{transform:translateX(-4px);}
.dd-signup-btn__sheen{
	position:absolute;top:0;bottom:0;left:0;width:34%;z-index:0;pointer-events:none;
	background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
	transform:translateX(-160%) skewX(-18deg);
}
.dd-signup-btn:hover .dd-signup-btn__sheen{animation:ddc-sweep-once .85s ease;}

/* hide the theme's page-title block once the H1 has been merged into the box */
.dd-hero .fullcover-wrapper{display:none !important;}

/* -------------------------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
	.dd-cta__face,.dd-cta__sheen,.dd-cta__emblem::before,
	.dd-cta__live,.dd-cta__live::after,.dd-cta__spark,.dd-cta__btn-spark{animation:none !important;}
	.dd-cta__btn--signup:hover .dd-cta__btn-sheen,
	.dd-signup-btn:hover .dd-signup-btn__sheen{animation:none !important;}
}