/* =========================================================================
   zbn-cta — باکس CTA تبلیغاتی (ساختار مشترک؛ رنگ‌ها از تم هر ویجت via --cta-*)
   با شورتکد [zbn_cta] استفاده می‌شود و بین بخش‌های محتوای ویجت‌های سئو قرار می‌گیرد.
   ========================================================================= */

.zbn-cta{
  --cta-bg:#141018;
  --cta-fg:#fff;
  --cta-sub:rgba(255,255,255,.82);
  --cta-accent:#E11D48;
  --cta-btn-bg:#fff;
  --cta-btn-fg:#141018;
  --cta-border:transparent;
  --cta-glow:rgba(225,29,72,.35);
  position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:26px 0;padding:20px 24px;border-radius:18px;
  background:var(--cta-bg);color:var(--cta-fg);
  border:1px solid var(--cta-border);
  box-shadow:0 20px 44px -20px var(--cta-glow);
  overflow:hidden;font-family:inherit;
}
.zbn-cta::before{
  content:"";position:absolute;inset-inline-end:-46px;top:-46px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,var(--cta-accent),transparent 70%);opacity:.25;pointer-events:none;
}
.zbn-cta__icon{
  position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;font-size:26px;line-height:1;
  background:color-mix(in srgb,var(--cta-accent) 24%,transparent);
}
.zbn-cta__body{position:relative;display:flex;flex-direction:column;gap:3px;flex:1 1 240px;min-width:0;}
.zbn-cta__title{display:block;font-size:18px;font-weight:900;line-height:1.6;color:var(--cta-fg);}
.zbn-cta__text{display:block;font-size:13.5px;font-weight:500;line-height:1.9;color:var(--cta-sub);}
.zbn-cta__btn{
  position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:12px;font-size:14px;font-weight:800;white-space:nowrap;
  background:var(--cta-btn-bg);color:var(--cta-btn-fg);
  box-shadow:0 8px 20px -10px var(--cta-glow);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.zbn-cta__btn::after{
  content:"";width:8px;height:8px;border-top:2px solid currentColor;border-left:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s ease;
}
.zbn-cta__btn:hover{transform:translateY(-2px);color:var(--cta-btn-fg);filter:brightness(1.03);box-shadow:0 14px 30px -10px var(--cta-glow);}
.zbn-cta__btn:hover::after{transform:rotate(-45deg) translate(-2px,2px);}

@media (max-width:560px){
  .zbn-cta{padding:18px;gap:14px;}
  .zbn-cta__btn{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .zbn-cta__btn{transition:none;}
  .zbn-cta__btn:hover{transform:none;}
}

/* ===== واریانت‌های رنگیِ آماده =====
   با variant="brand|gold|dark|emerald|outline" انتخاب می‌شوند و
   (به‌کمک !important روی متغیرها) بر رنگِ تمِ ویجت اولویت دارند. */
.zbn-cta--brand{
  --cta-bg:linear-gradient(120deg,#C8102E,#E11D48 55%,#FB7185)!important;
  --cta-fg:#fff!important;--cta-sub:rgba(255,255,255,.86)!important;--cta-accent:#fff!important;
  --cta-btn-bg:#fff!important;--cta-btn-fg:#C8102E!important;--cta-border:transparent!important;
  --cta-glow:rgba(225,29,72,.45)!important;
}
.zbn-cta--gold{
  --cta-bg:linear-gradient(120deg,#FBF3E0,#F3E4C3)!important;
  --cta-fg:#4A3B16!important;--cta-sub:#7A6A45!important;--cta-accent:#C79A3B!important;
  --cta-btn-bg:linear-gradient(120deg,#C79A3B,#A87B22)!important;--cta-btn-fg:#fff!important;
  --cta-border:rgba(199,154,59,.4)!important;--cta-glow:rgba(199,154,59,.4)!important;
}
.zbn-cta--dark{
  --cta-bg:linear-gradient(120deg,#1B1622,#2A1F30)!important;
  --cta-fg:#F5EEFA!important;--cta-sub:#C2B6CE!important;--cta-accent:#E11D48!important;
  --cta-btn-bg:linear-gradient(120deg,#E11D48,#FB7185)!important;--cta-btn-fg:#fff!important;
  --cta-border:rgba(255,255,255,.12)!important;--cta-glow:rgba(225,29,72,.4)!important;
}
.zbn-cta--emerald{
  --cta-bg:linear-gradient(120deg,#053A32,#0B5E4E)!important;
  --cta-fg:#EAFBF4!important;--cta-sub:#B7E6D6!important;--cta-accent:#10B981!important;
  --cta-btn-bg:#fff!important;--cta-btn-fg:#0B5E4E!important;
  --cta-border:rgba(255,255,255,.14)!important;--cta-glow:rgba(16,185,129,.35)!important;
}
.zbn-cta--outline{
  --cta-bg:transparent!important;--cta-fg:inherit!important;--cta-sub:inherit!important;
  --cta-accent:#C8102E!important;
  --cta-btn-bg:linear-gradient(120deg,#C8102E,#E11D48)!important;--cta-btn-fg:#fff!important;
  --cta-border:color-mix(in srgb,currentColor 22%,transparent)!important;--cta-glow:transparent!important;
}