/* حالت لایت (پیش‌فرض) */
:root {
    --primary: #00967D;
    --bg-main: #ffffff;
    --text-main: #303030;
    --bg-dark: #303030;
    --text-light: #ffffff;
    
    /* رنگ‌های معنایی برای باکس‌ها در حالت لایت */
    --info-bg: #e0f2f1;
    --info-text: #00695c;
    --warning-bg: #fff3e0;
    --warning-text: #e65100;
    --error-bg: #ffebee;
    --error-text: #c62828;
    --success-bg: #e8f5e9;
    --success-text: #2e7d32;
    --tip-bg: #f3e5f5;
    --tip-text: #7b1fa2;
}

/* حالت دارک */
[data-theme='dark'] {
    --bg-main: #1a1a1a; /* مشکی نرم‌تر */
    --text-main: #e0e0e0;
    --bg-dark: #ffffff;
    --text-light: #1a1a1a;

    /* رنگ‌های معنایی برای باکس‌ها در حالت دارک (کمی ملایم‌تر برای جلوگیری از خستگی چشم) */
    --info-bg: rgba(0, 150, 125, 0.15);
    --info-text: #4db6ac;
    --warning-bg: rgba(255, 152, 0, 0.15);
    --warning-text: #ffb74d;
    --error-bg: rgba(244, 67, 54, 0.15);
    --error-text: #ef9a9a;
    --success-bg: rgba(76, 175, 80, 0.15);
    --success-text: #a5d6a7;
    --tip-bg: rgba(156, 39, 176, 0.15);
    --tip-text: #ce93d8;
}

/* ۱. تنظیمات پایه فونت و رنگ متن */
:root {
    /* فرض بر این است که شما رنگ‌های اصلی را دارید، اگر ندارید این‌ها را ست کنید */
    --text-main: #303030; 
    --primary: #00967D;
    --bg-main: #ffffff;
}



/* ===== استایل پایه آیکون‌ها ===== */
.law-box {
    position: relative;
    padding: 1.2rem 3.5rem 1.2rem 1.2rem;
    margin: 1.5rem 0;
    border-radius: 10px;
    line-height: 1.8;
    font-size: 0.95rem;
    color: var(--text-main);
    border-right: 5px solid transparent;
}

.law-box::before {
    position: absolute;
    right: 1.2rem;
    top: 1.2rem; /* بالای باکس بچسبد (بهتر از وسط برای متن‌های چندخطی) */
    font-family: "bootstrap-icons" !important; /* نام فونت BI */
    font-weight: normal !important;           /* BI وزن normal می‌خواهد نه 900 */
    font-style: normal;
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0.85;
}

/* ===== تعریف ۱۰ باکس ===== */

/* ۱. اطلاعات */
.law-info {
    background-color: rgba(13, 110, 253, 0.08);
    border-right-color: #0d6efd;
}
.law-info::before { content: "\f430"; } /* bi-info-circle */

/* ۲. هشدار */
.law-warning {
    background-color: rgba(255, 193, 7, 0.12);
    border-right-color: #ffc107;
}
.law-warning::before { content: "\f189"; } /* bi-exclamation-triangle */

/* ۳. خطر / خطا */
.law-error {
    background-color: rgba(220, 53, 69, 0.08);
    border-right-color: #dc3545;
}
.law-error::before { content: "\f77e"; } /* bi-x-circle-fill */

/* ۴. موفقیت */
.law-success {
    background-color: rgba(25, 135, 84, 0.08);
    border-right-color: #198754;
}
.law-success::before { content: "\f26e"; } /* bi-check-circle-fill */

/* ۵. نکته */
.law-tip {
    background-color: rgba(111, 66, 193, 0.08);
    border-right-color: #6f42c1;
}
.law-tip::before { content: "\f466"; } /* bi-lightbulb-fill */

/* ۶. اصلی / برجسته */
.law-primary {
    background-color: var(--primary);
    border-right-color: #004d40;
    color: #ffffff !important; /* پس‌زمینه تیره است، متن سفید لازم است */
}
.law-primary::before { content: "\f787"; } /* bi-star-fill */

/* ۷. نقل قول */
.law-quote {
    background-color: rgba(0, 0, 0, 0.03);
    border-right: 4px solid var(--primary);
    font-style: italic;
}
.law-quote::before { content: "\f6c4"; } /* bi-quote */

/* ۸. توجه */
.law-attention {
    background-color: rgba(253, 126, 20, 0.08);
    border-right-color: #fd7e14;
}
.law-attention::before { content: "\f171"; } /* bi-bell-fill */

/* ۹. چک‌لیست */
.law-checklist {
    background-color: rgba(13, 110, 253, 0.04);
    border: 1px dashed var(--primary);
    border-right: 5px solid var(--primary);
}
.law-checklist::before { content: "\f52c"; } /* bi-list-ul */

/* ۱۰. ملایم */
.law-subtle {
    background-color: rgba(0, 0, 0, 0.02);
    border-right: 3px solid #ccc;
}
.law-subtle::before { content: "\f431"; } /* bi-info-circle-fill */

/* ===== حالت Dark ===== */
[data-theme='dark'] .law-info    { background-color: rgba(13, 110, 253, 0.18);color:#fff; }
[data-theme='dark'] .law-warning { background-color: rgba(255, 193, 7, 0.15);color:#fff; }
[data-theme='dark'] .law-error   { background-color: rgba(220, 53, 69, 0.18);color:#fff; }
[data-theme='dark'] .law-success { background-color: rgba(25, 135, 84, 0.18);color:#fff; }
[data-theme='dark'] .law-tip     { background-color: rgba(111, 66, 193, 0.18);color:#fff; }
[data-theme='dark'] .law-subtle  { background-color: rgba(255, 255, 255, 0.05);color:#fff; }

:root{
  --bx-radius:18px;
  --bx-ink:#2b2620;
  --bx-muted:#877e6d;
  --bx-surface:#fffdf9;
}
[data-theme="dark"]{
  --bx-ink:#ecebe6;
  --bx-muted:#a29b8c;
  --bx-surface:#1d1c21;
}

/* ── ۱) bx-aurora : گرادیانت نعنایی/فیروزه‌ای ── */
.bx-aurora{
  --bx-accent:#0b8f66;
  --bx-accent-soft:rgba(16,185,129,.13);
  position:relative;
  padding:22px 24px;
  border-radius:var(--bx-radius);
  color:var(--bx-ink);
  background:
    radial-gradient(130% 170% at 88% -12%, rgba(52,211,153,.22), transparent 55%),
    radial-gradient(120% 150% at -8% 112%, rgba(45,212,191,.18), transparent 55%),
    linear-gradient(180deg,#f3fbf7,#e8f6ef);
  border:1px solid rgba(13,148,106,.3);
  box-shadow:0 12px 30px -20px rgba(6,95,70,.5);
  transition:transform .3s ease, box-shadow .3s ease;
}
.bx-aurora:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px -20px rgba(6,95,70,.55);
}
[data-theme="dark"] .bx-aurora{
  --bx-accent:#5eead4;
  --bx-accent-soft:rgba(45,212,191,.12);
  background:
    radial-gradient(130% 170% at 88% -12%, rgba(52,211,153,.13), transparent 55%),
    radial-gradient(120% 150% at -8% 112%, rgba(45,212,191,.09), transparent 55%),
    linear-gradient(180deg,#122119,#0e1a15);
  border-color:rgba(52,211,153,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── ۲) bx-ring : بردر گرادیانتی چرخان (کهربایی/مرجانی) ── */
@property --bx-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.bx-ring{
  --bx-angle:0deg; /* فال‌بک: بدون @property بردر ثابت می‌ماند */
  --bx-accent:#c0740a;
  --bx-accent-soft:rgba(245,158,11,.12);
  position:relative;
  padding:22px 24px;
  border-radius:var(--bx-radius);
  color:var(--bx-ink);
  background:var(--bx-surface);
  transition:transform .3s ease;
}
.bx-ring:hover{ transform:translateY(-2px); }
.bx-ring::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1.6px;
  background:conic-gradient(from var(--bx-angle),
    #f59e0b, #fb7185, #fbbf24, #f97316, #f59e0b);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:bx-spin 7s linear infinite;
  pointer-events:none;
}
@keyframes bx-spin{ to{ --bx-angle:360deg; } }
[data-theme="dark"] .bx-ring{
  --bx-accent:#fbbf24;
  --bx-accent-soft:rgba(251,191,36,.1);
  background:linear-gradient(180deg,#241f16,#1b1812);
}

/* ── ۳) bx-glow : هالهٔ نرم اقیانوسی (مناسب کارت ویژه) ── */
.bx-glow{
  --bx-accent:#0369a1;
  --bx-accent-soft:rgba(14,165,233,.13);
  padding:22px 24px;
  border-radius:var(--bx-radius);
  color:var(--bx-ink);
  background:linear-gradient(165deg,#eef5fd,#e2eff9);
  border:1px solid rgba(3,105,161,.28);
  box-shadow:0 20px 44px -22px rgba(3,105,161,.55);
  transition:transform .3s ease, box-shadow .3s ease;
}
.bx-glow:hover{
  transform:translateY(-2px);
  box-shadow:0 26px 52px -22px rgba(3,105,161,.6);
}
[data-theme="dark"] .bx-glow{
  --bx-accent:#7dd3fc;
  --bx-accent-soft:rgba(56,189,248,.12);
  background:linear-gradient(165deg,#0e2033,#0a1522);
  border-color:rgba(56,189,248,.35);
  box-shadow:0 22px 50px -20px rgba(56,189,248,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .bx-glow:hover{
  box-shadow:0 28px 60px -20px rgba(56,189,248,.5), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── ۴) bx-sheen : درخشش عبوری روی سطح (ساتن) ── */
.bx-sheen{
  --bx-accent:#8a6a1c;
  --bx-accent-soft:rgba(202,160,58,.14);
  position:relative;
  overflow:hidden;
  padding:22px 24px;
  border-radius:var(--bx-radius);
  color:var(--bx-ink);
  background:linear-gradient(180deg,#f7f2e8,#efe8da);
  border:1px solid rgba(140,116,70,.3);
  transition:transform .3s ease;
}
.bx-sheen:hover{ transform:translateY(-2px); }
.bx-sheen::after{
  content:"";
  position:absolute; top:-25%; bottom:-25%; left:0;
  width:32%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent);
  transform:translateX(-140%) skewX(-15deg);
  animation:bx-sheen 5.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes bx-sheen{
  0%       { transform:translateX(-140%) skewX(-15deg); }
  55%,100% { transform:translateX(440%)  skewX(-15deg); }
}
[data-theme="dark"] .bx-sheen{
  --bx-accent:#e3c26b;
  --bx-accent-soft:rgba(227,194,107,.1);
  background:linear-gradient(180deg,#252118,#1c1913);
  border-color:rgba(227,194,107,.25);
}
[data-theme="dark"] .bx-sheen::after{
  background:linear-gradient(100deg, transparent, rgba(255,236,200,.1), transparent);
}

/* ── ۵) bx-glass : شیشه‌ای (برای دیدن بلور، باید چیزی پشتش باشد) ── */
.bx-glass{
  --bx-accent:#0b8f66;
  --bx-accent-soft:rgba(16,185,129,.13);
  position:relative;
  padding:22px 24px;
  border-radius:var(--bx-radius);
  color:var(--bx-ink);
  background:linear-gradient(135deg, rgba(255,255,255,.66), rgba(255,255,255,.22));
  -webkit-backdrop-filter:blur(14px) saturate(160%);
          backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 14px 36px -20px rgba(43,38,32,.4);
  transition:transform .3s ease, box-shadow .3s ease;
}
.bx-glass:hover{ transform:translateY(-2px); }
[data-theme="dark"] .bx-glass{
  --bx-accent:#5eead4;
  --bx-accent-soft:rgba(45,212,191,.12);
  background:linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.17);
  box-shadow:0 16px 44px -18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ── ۶) bx-edge : بردر گرادیانتی ثابت سبز ── */
.bx-edge{
  --bx-accent:#047857;
  --bx-accent-soft:rgba(16,185,129,.12);
  position:relative;
  padding:22px 24px;
  border-radius:var(--bx-radius);
  color:var(--bx-ink);
  background:var(--bx-surface);
  transition:transform .3s ease;
}
.bx-edge:hover{ transform:translateY(-2px); }
.bx-edge::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1.6px;
  background:linear-gradient(135deg,#34d399,#0d9488 45%,#a3e635);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  pointer-events:none;
}
[data-theme="dark"] .bx-edge{
  --bx-accent:#6ee7b7;
  --bx-accent-soft:rgba(110,231,183,.1);
  background:#191d1a;
}
[data-theme="dark"] .bx-edge::before{
  background:linear-gradient(135deg,#34d399,#2dd4bf 45%,#bef264);
}

@media (prefers-reduced-motion: reduce){
  .bx-ring::before, .bx-sheen::after{ animation:none; }
  .bx-aurora,.bx-ring,.bx-glow,.bx-sheen,.bx-glass,.bx-edge{ transition:none; }
}

}


/* استایل کارت در حالت پیش‌فرض (لایت) */
/* ==========================================================================
   HaghSeta Ultra-Modern CTA Box
   Prefix: hqs-premium-cta
   Colors: Brand #00967D | Base Dark #232323
   Compatible: Light Mode & [data-theme="dark"]
   ========================================================================== */

.hqs-premium-cta-wrapper {
  direction: rtl;
  text-align: right;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 36px 0;
  padding: 30px 32px;
  border-radius: 20px;
  font-family: inherit;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  isolation: isolate;
}

/* ------------------- استایل حالت لایت (Light) ------------------- */
.hqs-premium-cta-wrapper {
  background: linear-gradient(135deg, #ffffff 0%, #f4fbf9 100%);
  border: 1px solid rgba(0, 150, 125, 0.25);
  box-shadow: 0 15px 35px -8px rgba(0, 150, 125, 0.12),
              0 4px 12px rgba(35, 35, 35, 0.04);
}

.hqs-premium-cta-title {
  color: #1a202c;
}

.hqs-premium-cta-desc {
  color: #4a5568;
}

.hqs-premium-cta-icon-box {
  background: rgba(0, 150, 125, 0.08);
  border: 1px solid rgba(0, 150, 125, 0.2);
  color: #00967D;
}

.hqs-premium-cta-badge {
  background: rgba(0, 150, 125, 0.08);
  color: #007a65;
  border: 1px solid rgba(0, 150, 125, 0.22);
}

.hqs-premium-cta-subtext {
  color: #718096;
}

/* ------------------- استایل حالت دارک (Dark) ------------------- */
[data-theme="dark"] .hqs-premium-cta-wrapper {
  background: radial-gradient(circle at top right, rgba(0, 150, 125, 0.12) 0%, transparent 60%),
              linear-gradient(145deg, #232323 0%, #191919 100%);
  border: 1px solid rgba(0, 150, 125, 0.38);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.6),
              0 0 20px rgba(0, 150, 125, 0.08);
}

[data-theme="dark"] .hqs-premium-cta-title {
  color: #ffffff;
}

[data-theme="dark"] .hqs-premium-cta-desc {
  color: #cbd5e1;
}

[data-theme="dark"] .hqs-premium-cta-icon-box {
  background: rgba(0, 150, 125, 0.16);
  border: 1px solid rgba(0, 150, 125, 0.4);
  color: #00d2ad;
}

[data-theme="dark"] .hqs-premium-cta-badge {
  background: rgba(0, 150, 125, 0.16);
  color: #00d2ad;
  border: 1px solid rgba(0, 150, 125, 0.35);
}

[data-theme="dark"] .hqs-premium-cta-subtext {
  color: #94a3b8;
}

/* ------------------- ساختار و چیدمان داخلی ------------------- */
.hqs-premium-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  z-index: 2;
}

.hqs-premium-cta-content {
  flex: 1;
  min-width: 0;
}

.hqs-premium-cta-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* بج همراه با نقطه انیمیشنی وضعیت */
.hqs-premium-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 13px;
  border-radius: 50px;
}

.hqs-premium-cta-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #00967D;
  box-shadow: 0 0 0 0 rgba(0, 150, 125, 0.7);
  animation: hqsPulseLive 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
}

[data-theme="dark"] .hqs-premium-cta-pulse-dot {
  background-color: #00d2ad;
  box-shadow: 0 0 0 0 rgba(0, 210, 173, 0.7);
}

.hqs-premium-cta-title {
  margin: 0 0 10px 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.6;
}

.hqs-premium-cta-desc {
  margin: 0 0 18px 0;
  font-size: 14.5px;
  line-height: 1.95;
  max-width: 95%;
}

/* اکشن‌ها و دکمه */
.hqs-premium-cta-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hqs-premium-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #00967D;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 150, 125, 0.35);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-sizing: border-box;
}

/* افکت نور لیزری رونده روی دکمه */
.hqs-premium-cta-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: hqsShimmerLight 3.8s infinite;
}

.hqs-premium-cta-btn:hover {
  background-color: #00806a;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0, 150, 125, 0.5);
}

.hqs-premium-cta-btn svg {
  transition: transform 0.25s ease;
}

.hqs-premium-cta-btn:hover svg {
  transform: translateX(-4px);
}

.hqs-premium-cta-subtext {
  font-size: 12px;
  font-weight: 500;
}

/* جعبه آیکون بزرگ با انیمیشن معلق */
.hqs-premium-cta-icon-box {
  width: 76px;
  height: 76px;
  min-width: 76px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hqsFloatingIcon 4s ease-in-out infinite alternate;
}

.hqs-premium-cta-icon-box svg {
  width: 40px;
  height: 40px;
}

/* ------------------- المان‌های نوری متحرک پس‌زمینه ------------------- */
.hqs-premium-cta-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  z-index: 1;
}

.hqs-premium-cta-orb-1 {
  width: 140px;
  height: 140px;
  top: -30px;
  left: -30px;
  background: rgba(0, 150, 125, 0.2);
  animation: hqsOrbDrift 6s infinite alternate ease-in-out;
}

.hqs-premium-cta-orb-2 {
  width: 90px;
  height: 90px;
  bottom: -20px;
  right: 25%;
  background: rgba(0, 150, 125, 0.12);
}

/* ------------------- تعریف کلیه انیمیشن‌ها ------------------- */
@keyframes hqsPulseLive {
  0% { box-shadow: 0 0 0 0 rgba(0, 150, 125, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(0, 150, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 150, 125, 0); }
}

@keyframes hqsFloatingIcon {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-8px) rotate(-3deg); }
}

@keyframes hqsShimmerLight {
  0%, 75% { left: -100%; }
  100% { left: 180%; }
}

@keyframes hqsOrbDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(25px, 20px) scale(1.15); }
}

/* ------------------- ریسپانسیو فوق‌العاده تمیز بدون اسکرول ------------------- */
@media (max-width: 768px) {
  .hqs-premium-cta-wrapper {
    padding: 22px 18px;
    margin: 24px 0;
    border-radius: 16px;
  }
  
  .hqs-premium-cta-inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 16px;
  }
  
  .hqs-premium-cta-icon-box {
    display: none; /* جهت جلوگیری از تراکم و شلوغی در موبایل */
  }

  .hqs-premium-cta-title {
    font-size: 16.5px;
  }

  .hqs-premium-cta-desc {
    font-size: 13.5px;
    max-width: 100%;
    margin-bottom: 16px;
  }

  .hqs-premium-cta-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }

  .hqs-premium-cta-btn {
    width: 100%;
  }

  .hqs-premium-cta-subtext {
    text-align: center;
  }
}