/* ════════════════════════════════════════════════════════════════
   glass.css — ستايل زجاجي (Liquid Glass) لكل صفحات الموقع
   يُفعَّل بوجود data-glass على <html> (في includes/header.php).
   لإلغائه: احذف data-glass من وسم <html> — يرجع التصميم القديم كما هو.

   الفكرة: خلفية ملوّنة متحركة ثابتة خلف الصفحة، وكل البطاقات
   والقوائم شفافة مع تمويه (blur) وحافة لامعة من الأعلى.
   الألوان مبنية على اللون الأساسي من لوحة التحكم (--pr --pg --pb).
   ════════════════════════════════════════════════════════════════ */

/* ── 1) متغيّرات الزجاج ────────────────────────────────────────── */
html[data-glass]{
  --bg:  rgba(14,12,20,.55);
  --bg2: rgba(255,255,255,.025);
  --bg3: rgba(255,255,255,.06);
  --card:rgba(255,255,255,.065);
  --bdr: rgba(255,255,255,.13);
  --dim: #a9a6b4;
  --r:   22px;

  --g-base:   #07060c;
  --g-fill:   rgba(255,255,255,.07);   /* زجاج البطاقات */
  --g-strong: rgba(22,20,30,.58);      /* زجاج القوائم المنسدلة والشريط */
  --g-hi:     rgba(255,255,255,.22);   /* لمعة الحافة العلوية */
  --g-lo:     rgba(255,255,255,.05);
  --g-sheen:  linear-gradient(150deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 60%);
  --g-shadow: 0 12px 40px rgba(0,0,0,.35);
  --g-blur:   blur(24px) saturate(185%);
}
html[data-glass][data-theme="light"]{
  --bg:  rgba(255,255,255,.55);
  --bg2: rgba(255,255,255,.28);
  --bg3: rgba(255,255,255,.5);
  --card:rgba(255,255,255,.52);
  --bdr: rgba(255,255,255,.75);
  --txt: #121018;
  --dim: #5d5a68;
  --sf:  #2b2933;

  --g-base:   #eef0f7;
  --g-fill:   rgba(255,255,255,.5);
  --g-strong: rgba(255,255,255,.68);
  --g-hi:     rgba(255,255,255,.95);
  --g-lo:     rgba(255,255,255,.4);
  --g-sheen:  linear-gradient(150deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.25) 40%, rgba(255,255,255,0) 65%);
  --g-shadow: 0 12px 36px rgba(40,30,80,.12);
}

/* ── 2) الخلفية الملوّنة خلف الزجاج ─────────────────────────────── */
html[data-glass] body{ background:var(--g-base); }
html[data-glass] body::before{
  content:'';position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48vmax 48vmax at 20% 25%, rgba(241,90,51,.55), transparent 70%),
    radial-gradient(42vmax 42vmax at 80% 20%, rgba(236,37,101,.5), transparent 70%),
    radial-gradient(36vmax 36vmax at 50% 55%, rgba(var(--pr),var(--pg),var(--pb),.25), transparent 70%),
    radial-gradient(46vmax 46vmax at 72% 82%, rgba(241,90,51,.3), transparent 70%),
    radial-gradient(38vmax 38vmax at 22% 85%, rgba(236,37,101,.35), transparent 70%);
  filter:blur(30px);
  animation:g-drift 28s ease-in-out infinite alternate;
}
html[data-glass][data-theme="light"] body::before{ opacity:.6; }
@keyframes g-drift{
  0%  { transform:translate3d(0,0,0) rotate(0deg) scale(1); }
  50% { transform:translate3d(4vmax,-3vmax,0) rotate(8deg) scale(1.06); }
  100%{ transform:translate3d(-3vmax,3vmax,0) rotate(-6deg) scale(1); }
}

/* ── 3) البطاقات الزجاجية ──────────────────────────────────────── */
html[data-glass] :is(
  .srv,.pkg,.rev,.cnt-card,.cnt-form,.cli-item,
  .pc,.feat-i,.sub-c,.oth,.rcard,.work-info,
  .xk.norm,.xnote,.xfaq,.xpr-stat,.billing-toggle,
  .sbar,.ft-soc-btn,.hx-tab
){
  background-image:var(--g-sheen);
  -webkit-backdrop-filter:var(--g-blur);
          backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 var(--g-hi), inset 0 -1px 0 var(--g-lo), var(--g-shadow);
}
html[data-glass] :is(.srv,.pkg,.rev,.pc,.oth,.sub-c,.xk.norm):hover{
  box-shadow:inset 0 1px 0 var(--g-hi), inset 0 -1px 0 var(--g-lo),
             0 18px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(var(--pr),var(--pg),var(--pb),.35);
}
html[data-glass] :is(.srv,.pkg,.rev,.pc,.oth,.cnt-form,.rcard,.work-info,.xk.norm){ border-radius:var(--r); }
html[data-glass] .pkg.feat{ border-color:rgba(var(--pr),var(--pg),var(--pb),.7); }
html[data-glass] .sbar{ border-radius:0; }

/* ── 4) شريط التنقل: كبسولة زجاجية عائمة ───────────────────────── */
html[data-glass] nav,
html[data-glass] nav.sc{ background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:12px 0; }
html[data-glass] nav .nav-in{
  max-width:min(1200px, calc(100% - 24px));
  padding:8px 14px;border-radius:26px;
  background:var(--g-strong);background-image:var(--g-sheen);
  border:1px solid var(--bdr);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 var(--g-hi), var(--g-shadow);
  transition:box-shadow var(--t), background var(--t);
}
html[data-glass] nav.sc .nav-in{ box-shadow:inset 0 1px 0 var(--g-hi), 0 16px 44px rgba(0,0,0,.45); }
html[data-glass] .nav-links a{ border-radius:14px; }

/* القوائم المنسدلة والقائمة الجانبية للجوال */
html[data-glass] :is(.drop,.cur-drop){
  background:var(--g-strong);background-image:var(--g-sheen);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border-radius:18px;box-shadow:inset 0 1px 0 var(--g-hi), 0 20px 50px rgba(0,0,0,.45);
}
html[data-glass] .mnav{
  background:var(--g-strong);
  -webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);
}
html[data-glass] .mnav a{ border-radius:16px; }

/* شريط التبويبات الثابت في صفحة الأسعار */
html[data-glass] .xpr-tabs{
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
}

/* ── 5) الأزرار ────────────────────────────────────────────────── */
html[data-glass] .btn{ border-radius:999px; }
html[data-glass] .btn-p,
html[data-glass] .nav-cta{
  background:#EC2565;
  background-image:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 55%), var(--grad, linear-gradient(135deg,#F15A33,#EC2565));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 24px rgba(var(--pr),var(--pg),var(--pb),.38);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
html[data-glass] .btn-p:hover,
html[data-glass] .nav-cta:hover{ filter:brightness(1.08);transform:translateY(-1px); }
html[data-glass] .tag,
html[data-glass] .hx-ic{ color:var(--p2,#F15A33); }
html[data-glass] :is(.btn-o,.ntool){
  background:var(--g-fill);background-image:var(--g-sheen);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 var(--g-hi);
}
html[data-glass] .ntool{ border-radius:14px; }
html[data-glass] .wab{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 24px rgba(37,211,102,.45); }

/* ── 6) حقول النماذج ───────────────────────────────────────────── */
html[data-glass] :is(input,textarea,select):not([type=checkbox]):not([type=radio]):not([type=file]){
  background-color:var(--g-fill);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-radius:14px;
}
html[data-glass] select option{ background:#1a1822;color:#fff; }
html[data-glass][data-theme="light"] select option{ background:#fff;color:#111; }

/* ── 7) الفوتر ─────────────────────────────────────────────────── */
html[data-glass] footer.ft-root{
  background:var(--g-strong);background-image:var(--g-sheen);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 var(--g-hi);
}

/* ── 8) تفاصيل الصفحة الرئيسية ─────────────────────────────────── */
html[data-glass] :is(.sl-arr,.slide-badge,.srv-sub,.about-yr){
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 var(--g-hi);
}
html[data-glass] .sl-arr{ background:var(--g-fill);background-image:var(--g-sheen);border-color:var(--bdr); }
html[data-glass] .slide-badge{ background:rgba(var(--pr),var(--pg),var(--pb),.12); }
html[data-glass] .about-yr{ background:rgba(var(--pr),var(--pg),var(--pb),.75);border:1px solid rgba(255,255,255,.3);border-radius:18px; }
/* حواف شريط العملاء: تلاشي بقناع شفاف بدل لون الخلفية */
html[data-glass] .cli-wrap::before,
html[data-glass] .cli-wrap::after{ display:none; }
html[data-glass] .cli-wrap{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 80px,#000 calc(100% - 80px),transparent);
          mask-image:linear-gradient(to right,transparent,#000 80px,#000 calc(100% - 80px),transparent);
}

/* ── حركات الظهور مع التمرير (تُضاف الأصناف بالجافاسكربت فقط، فالمحتوى ظاهر بدونها) ── */
.rv{ opacity:0; transform:translateY(26px) scale(.985); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* ── 9) الأداء وسهولة الاستخدام ─────────────────────────────────── */
@media (max-width:768px){
  html[data-glass]{ --g-blur:blur(16px) saturate(170%); }
}
@media (prefers-reduced-motion:reduce){
  html[data-glass] body::before{ animation:none; }
}
/* متصفحات لا تدعم التمويه: نرفع عتامة الزجاج حتى يبقى النص مقروءاً */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-glass]{ --card:rgba(30,28,38,.92);--g-strong:rgba(20,18,28,.96); }
  html[data-glass][data-theme="light"]{ --card:rgba(255,255,255,.94);--g-strong:rgba(255,255,255,.97); }
}