/* =========================================================
   TargetDZ Theme: Aurora (full)
   ألوان: أزرق #2563eb + سماوي #22d3ee
   Light/Dark + منع التمرير الأفقي + حواف متحركة للبطاقات
   ========================================================= */

/* -------- ألوان ومتغيرات عامة -------- */
:root{
  --brand:    #2563eb;   /* Blue   */
  --brand-2:  #22d3ee;   /* Cyan   */
  --bg:       #f6f7fb;
  --surface:  #ffffff;
  --text:     #0f172a;
  --muted:    #64748b;
  --ring:     rgba(37,99,235,.35);
  --shadow:   0 10px 36px rgba(2,8,23,.07);
  --radius:   14px;
}
html[data-theme="dark"]{
  --bg:      #0b1020;
  --surface: #101528;
  --text:    #e5e7eb;
  --muted:   #94a3b8;
  --ring:    rgba(34,211,238,.30);
  --shadow:  0 10px 40px rgba(0,0,0,.45);
}

/* -------- أساسيات -------- */
html,body{background:var(--bg);color:var(--text);overflow-x:hidden}
img,.img-fluid,svg,table{max-width:100%;height:auto}

/* -------- شريط علوي شفاف -------- */
.navbar{
  background:linear-gradient(to bottom,rgba(255,255,255,.65),rgba(255,255,255,.35))!important;
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .navbar{
  background:linear-gradient(to bottom,rgba(16,21,40,.75),rgba(16,21,40,.5))!important;
}
.navbar .navbar-brand{font-weight:800}
.nav-link{color:var(--muted)}
.nav-link:hover{color:var(--text)}

/* -------- الهيرو/صناديق زجاجية -------- */
.hero{
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  background:
    radial-gradient(900px 600px at 85% -20%, rgba(34,211,238,.20), transparent 55%),
    radial-gradient(700px 460px at -20% -40%, rgba(37,99,235,.18), transparent 60%),
    var(--surface);
}
html[data-theme="dark"] .hero{
  background:
    radial-gradient(900px 600px at 85% -20%, rgba(34,211,238,.16), transparent 55%),
    radial-gradient(700px 460px at -20% -40%, rgba(37,99,235,.14), transparent 60%),
    linear-gradient(180deg,#0f172a,#0b1020);
}
.glass{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(148,163,184,.25);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
}
html[data-theme="dark"] .glass{background:rgba(16,21,40,.65);border-color:rgba(148,163,184,.15)}

/* -------- أقسام وبطاقات -------- */
.section{padding:72px 0}
.card{
  border:1px solid rgba(148,163,184,.18);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.badge-soft{background:rgba(37,99,235,.12); color:#1e3a8a}

/* -------- أزرار وتركيز -------- */
.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;border:0;
  box-shadow: 0 8px 18px rgba(37,99,235,.22), 0 4px 10px rgba(34,211,238,.15);
}
.btn-brand:hover{filter:brightness(.98);color:#fff}
.btn:focus,.form-control:focus,.form-select:focus{
  box-shadow: 0 0 0 .25rem var(--ring);
  border-color: transparent;
}
.input-lg{height:3.2rem;font-size:1.06rem}

/* -------- جدول + توست النسخ -------- */
.table thead th{position:sticky;top:0;background:var(--surface);z-index:1}
.table-hover>tbody>tr:hover{background:rgba(34,211,238,.06)}
tr.selected{background:rgba(37,99,235,.08)}
td.copyable{cursor:copy}
#copyToast{
  position:fixed; bottom:16px; inset-inline:0; margin-inline:auto; max-width:440px;
  padding:10px 14px; border-radius:10px; background:#111; color:#fff; font-size:14px;
  opacity:0; transform:translateY(12px); transition:opacity .2s, transform .2s; z-index:1080; text-align:center;
}
#copyToast.show{opacity:.95; transform:translateY(0)}

/* =========================================================
   Animated Gradient Border (Beam) — لإطارات البطاقات
   أضِف class="beam-card beam-hover" على أي .card
   يمكن تغيير الألوان/السرعة عبر المتغيرات:
   --beam-from / --beam-to / --beam-width / --beam-speed
   ========================================================= */
.beam-card{
  position:relative;
  border-radius: var(--radius);
  overflow: visible;
  --beam-from: var(--brand);
  --beam-to:   var(--brand-2);
  --beam-width: 2px;
  --beam-speed: 12s;
}
/* الحلقة الملونة حول الحواف */
.beam-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  padding: var(--beam-width);
  /* إظهار الإطار فقط */
  -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;
  background: conic-gradient(from 0deg, var(--beam-from), var(--beam-to), var(--beam-from));
  animation: tdz-spin var(--beam-speed) linear infinite;
  filter: saturate(1.1);
  pointer-events:none; z-index:1;
}
/* وهج ناعم يدور على الإطار */
.beam-card::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  padding: var(--beam-width);
  -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;
  background:
    radial-gradient(52px 52px at 50% -10%, var(--beam-to), transparent 70%),
    radial-gradient(52px 52px at 120% 50%, var(--beam-from), transparent 70%);
  filter: blur(8px);
  opacity: .35;
  animation: tdz-spin var(--beam-speed) linear infinite reverse;
  pointer-events:none; z-index:1;
}
@keyframes tdz-spin { to { transform: rotate(1turn); } }

/* تشغيل عند التحويم فقط (اختياري) */
.beam-hover::before,.beam-hover::after{animation-play-state:paused;opacity:0;transition:opacity .3s}
.beam-hover:hover::before,.beam-hover:hover::after{animation-play-state:running;opacity:.38}

/* تخصيص ألوان/سرعة بطاقات الأسعار */
#pricingCards .beam-card{ --beam-from:#2563eb; --beam-to:#22d3ee; --beam-width:2px; --beam-speed:11s; }
#pricingCards .popular.beam-card{ --beam-width:3px; --beam-speed:8s; }

/* حركة ظل رقيقة للبطاقات */
.plan-card{
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
}
.plan-card:hover{ transform:translateY(-6px); box-shadow:0 16px 44px rgba(37,99,235,.16) }
.plan-card.popular:hover{ transform:translateY(-8px) }

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .beam-card::before,.beam-card::after{animation:none}
  .plan-card{transition:none}
}

/* عدم حصول تمرير أفقي من شريط الإشعار */
#topNotice, #topNotice .wrap{max-width:100vw; overflow-x:hidden}