/* ============================================================
   متجر رقمي - التنسيقات الرئيسية
   لوحة ألوان أزرق احترافي + تدرّجات عصرية + الوضع الداكن + RTL
============================================================ */

:root {
    --brand: #2563eb;
    --brand-dark: #1d4ed8;
    --brand-light: #3b82f6;
    --brand-soft: #eff6ff;
    --accent: #06b6d4;
    --accent-2: #8b5cf6;
    --gradient: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%);
    --gradient-soft: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    --gradient-accent: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --bg: #f1f5f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --shadow: 0 4px 18px rgba(37, 99, 235, 0.08);
    --shadow-lg: 0 12px 40px rgba(37, 99, 235, 0.18);
    --shadow-glow: 0 8px 30px rgba(37, 99, 235, 0.28);
    --radius: 16px;
    --radius-sm: 10px;
}

[data-theme="dark"] {
    --brand: #3b82f6;
    --brand-dark: #2563eb;
    --brand-light: #60a5fa;
    --brand-soft: #1e293b;
    --accent: #22d3ee;
    --accent-2: #a78bfa;
    --gradient: linear-gradient(135deg, #1e40af 0%, #4338ca 50%, #6d28d9 100%);
    --gradient-soft: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    --gradient-accent: linear-gradient(135deg, #0891b2 0%, #2563eb 100%);
    --bg: #0b1120;
    --surface: #131c2e;
    --surface-2: #1a2438;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --border: #243049;
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
    --shadow-glow: 0 8px 30px rgba(59, 130, 246, 0.35);
}

* { box-sizing: border-box; }

body {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    line-height: 1.7;
    transition: background .3s, color .3s;
}

a { color: var(--brand); text-decoration: none; transition: color .2s; }
a:hover { color: var(--brand-light); }

.container-x { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }

/* ===== الهيدر ===== */
.site-header {
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 1020;
}
.site-header .navbar {
    background: transparent;
    padding: .55rem 0;
    margin: 0;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.site-header .navbar::after { display:none; }
.site-header .navbar-brand { font-weight: 800; color: #fff; display:flex; align-items:center; gap:.5rem; position:relative; z-index:1; }
.site-header .navbar-brand img { height: 42px; width:auto; }
.brand-badge {
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.2rem;
}

/* ===== منطقة البحث (منفصلة، فاتحة، مثل أورانوس) ===== */
.search-section {
    background: var(--bg);
    padding: .85rem 0 1rem;
}
.search-welcome {
    text-align:center; font-size:.92rem; color: var(--text-muted);
    margin-bottom:.6rem; font-weight:600;
}
.search-box {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 50px;
    overflow: hidden;
    display:flex;
    box-shadow: var(--shadow);
    transition: box-shadow .25s, border-color .25s;
}
.search-box:focus-within { border-color: var(--brand); box-shadow: var(--shadow-glow); }
.search-box input {
    border:0; background:transparent; padding:.9rem 1.3rem; flex:1; color:var(--text);
    outline:none; font-family:inherit; font-size:.95rem;
}
.search-box button {
    border:0; background: var(--gradient-soft); color:#fff; padding:.6rem 1.5rem; cursor:pointer;
    transition: filter .2s;
}
.search-box button:hover { filter: brightness(1.08); }

/* ===== السلايدر ===== */
.hero-slider { border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.hero-slider .carousel-item img { width:100%; height:340px; object-fit:cover; }
.welcome-bar {
    background: var(--gradient);
    color:#fff; border-radius: var(--radius); padding: 1.6rem 1.8rem;
    margin-bottom:1.5rem; box-shadow: var(--shadow-glow); text-align:center; font-size:1.15rem; font-weight:600;
    position:relative; overflow:hidden;
}
.welcome-bar::after {
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at 85% -30%, rgba(255,255,255,.22), transparent 55%);
    pointer-events:none;
}

/* ===== شبكة التصنيفات ===== */
.section-title {
    font-weight:800; position:relative; padding-bottom:.6rem; margin-bottom:1.4rem; color:var(--text);
}
.section-title::after {
    content:''; position:absolute; bottom:0; right:0; width:60px; height:4px;
    background: var(--gradient-soft); border-radius:4px;
}
.cat-card {
    display:block; position:relative; overflow:hidden;
    background: var(--surface); border:1px solid var(--border);
    border-radius: var(--radius); aspect-ratio: 1/1; text-align:center;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s; color:#fff;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* الصورة تملأ البطاقة بالكامل */
.cat-card .cat-cover {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; transition: transform .4s;
}
.cat-card:hover .cat-cover { transform: scale(1.08); }
/* أيقونة افتراضية تملأ البطاقة بتدرّج */
.cat-card .cat-icon-full {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background: var(--gradient-soft); color:#fff; font-size:3rem;
}
/* تدرّج داكن أسفل البطاقة ليظهر الاسم */
.cat-card .cat-overlay {
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,0) 65%);
    transition: background .28s;
}
.cat-card:hover .cat-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(37,99,235,.45) 40%, rgba(0,0,0,.08) 75%);
}
/* اسم التصنيف فوق الصورة */
.cat-card .cat-name {
    position:absolute; left:0; right:0; bottom:0; padding:.7rem .5rem;
    font-weight:800; font-size:.95rem; color:#fff; z-index:2;
    text-shadow:0 1px 4px rgba(0,0,0,.6); line-height:1.3;
}

/* ===== بطاقات المنتجات ===== */
.product-card {
    background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
    overflow:hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s; height:100%; display:flex; flex-direction:column;
    position:relative;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-card .p-img-wrap { position:relative; overflow:hidden; }
.product-card .p-img { aspect-ratio: 1/1; object-fit:cover; width:100%; background:var(--brand-soft); transition: transform .35s; }
.product-card:hover .p-img { transform: scale(1.06); }
.product-card .p-img-fallback {
    aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
    background: var(--gradient-soft); color:#fff; font-size:2.4rem;
}
.product-card .p-body { padding:1rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.product-card .p-name { font-weight:700; font-size:1rem; color:var(--text); }
.product-card .p-price { color: var(--brand); font-weight:800; font-size:1.1rem; }
.product-card .p-old { color: var(--text-muted); text-decoration: line-through; font-size:.85rem; }

.badge-soft { background: var(--brand-soft); color: var(--brand); padding:.25rem .6rem; border-radius:50px; font-size:.75rem; font-weight:700; }

/* ===== الأزرار ===== */
.btn-brand { background: var(--gradient-soft); color:#fff; border:0; border-radius:50px; padding:.65rem 1.6rem; font-weight:700; transition:.25s; box-shadow: 0 4px 14px rgba(37,99,235,.3); position:relative; }
.btn-brand:hover { color:#fff; transform: translateY(-2px); box-shadow: var(--shadow-glow); filter: brightness(1.05); }
.btn-brand:active { transform: translateY(0); }
.btn-outline-brand { border:1.5px solid var(--brand); color:var(--brand); background:transparent; border-radius:50px; padding:.55rem 1.4rem; font-weight:700; }
.btn-outline-brand:hover { background:var(--brand); color:#fff; }

/* ===== الفوتر ===== */
.site-footer { background: var(--brand-dark); color:#d7e6da; margin-top:3rem; padding:2.5rem 0 1.2rem; }
.site-footer a { color:#cfe8d6; }
.site-footer a:hover { color:#fff; }
.site-footer .footer-title { color:#fff; font-weight:800; margin-bottom:1rem; }
.social-icons a {
    width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:12px; background: rgba(255,255,255,.1); color:#fff; margin-inline-start:.4rem; transition:.2s;
}
.social-icons a:hover { background: var(--accent); color:#fff; transform: translateY(-3px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:1.6rem; padding-top:1rem; text-align:center; font-size:.9rem; }

/* ===== زر تبديل الوضع ===== */
.theme-toggle { background:transparent; border:1.5px solid var(--border); border-radius:50px; width:42px; height:42px; color:var(--text); cursor:pointer; }
.theme-toggle:hover { border-color: var(--brand); color:var(--brand); }

/* ===== لوحة المستخدم/التحكم ===== */
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; box-shadow:var(--shadow); transition:.25s; }
.stat-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.stat-card .stat-num { font-size:1.8rem; font-weight:800; color:var(--accent); }
.stat-card .stat-label { color:var(--text-muted); font-size:.9rem; }

/* ===== المودال / النوافذ المنبثقة ===== */
.modal-content { border-radius: var(--radius); border:0; background:var(--surface); color:var(--text); }

/* ===== جداول الإدارة ===== */
.admin-table { background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.admin-table th { background:var(--brand-soft); color:var(--brand); font-weight:700; }

@media (max-width: 768px) {
    .hero-slider .carousel-item img { height:200px; }
}

/* ===== شريط تبويبات الأقسام ===== */
.cat-tabs{
  display:flex; gap:.5rem; overflow-x:auto; padding:.5rem 0 1rem;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.cat-tabs::-webkit-scrollbar{height:5px}
.cat-tabs::-webkit-scrollbar-thumb{background:var(--brand,#2b6337);border-radius:4px}
.cat-tab{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.25rem;
  min-width:78px; padding:.6rem .5rem; border-radius:14px; text-decoration:none;
  background:var(--surface,#fff); border:1px solid var(--border,#e3e9e4); color:var(--text);
  color:var(--text,#1d2b22); font-size:.78rem; font-weight:600; transition:.15s;
}
.cat-tab i{font-size:1.35rem; color:var(--brand,#2b6337)}
.cat-tab:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); color:var(--brand,#2b6337)}

/* ===== أقسام الصفحة الرئيسية مع المنتجات ===== */
.cat-section{margin:1.5rem 0 2rem; scroll-margin-top:80px}
.cat-section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem}
.see-all{
  font-size:.85rem; font-weight:600; text-decoration:none;
  color:var(--brand,#2b6337); white-space:nowrap;
}
.see-all:hover{text-decoration:underline}

/* ===== زر القائمة ===== */
.menu-btn{
  background:transparent; border:0;
  width:44px; height:44px; border-radius:12px; font-size:1.6rem;
  color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s; flex:0 0 auto;
}
.menu-btn:hover{background:rgba(127,127,127,.14)}

/* ===== القائمة الجانبية المنزلقة ===== */
.side-menu{width:300px; max-width:85vw; border:0}
.side-head{
  background:linear-gradient(135deg, var(--brand,#2b6337), #1d472a);
  color:#fff; padding:1.25rem 1rem; display:flex; align-items:center; gap:.75rem;
}
.side-user{display:flex; align-items:center; gap:.75rem; flex:1}
.side-avatar{
  width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800;
}
.side-user-info{display:flex; flex-direction:column; line-height:1.3}
.side-user-info strong{font-size:1.05rem}
.side-balance{font-size:.85rem; opacity:.9}
.side-list{list-style:none; margin:0; padding:.5rem}
.side-list li a{
  display:flex; align-items:center; gap:.85rem; padding:.85rem .75rem;
  border-radius:12px; text-decoration:none; color:var(--text,#1d2b22);
  font-weight:600; font-size:.98rem; transition:.12s;
}
.side-list li a:hover{background:rgba(43,99,55,.08)}
.side-list .ic{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:1.15rem; color:#fff; flex:0 0 auto;
}
.ic-home{background:#2b9348}.ic-add{background:#0077b6}.ic-wallet{background:#f4a261}
.ic-orders{background:#e63946}.ic-acc{background:#7209b7}.ic-admin{background:#3a0ca3}
.ic-about{background:#118ab2}
.side-theme{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.25rem; border-top:1px solid rgba(0,0,0,.06); margin-top:.5rem; font-weight:600;
}
.side-auth{padding:1rem 1.25rem}
.side-social{display:flex; justify-content:center; gap:1rem; padding:.5rem 1rem 1.5rem}
.side-social a{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:1.25rem; background:rgba(43,99,55,.1); color:var(--brand,#2b6337);
  text-decoration:none; transition:.15s;
}
.side-social a:hover{background:var(--brand,#2b6337); color:#fff}

/* ===== شبكة أقسام أصغر لتناسب 3 بالسطر ===== */
@media (max-width:575px){
  .cat-card{padding:.85rem .5rem}
  .cat-card .cat-icon{width:52px; height:52px; font-size:1.5rem}
  .cat-card img.cat-img{width:52px; height:52px}
  .cat-card .cat-name{font-size:.82rem}
}

/* ============================================================
   نظام الثيمات — يتحكم به إعداد site_theme من لوحة التحكم
   يُطبَّق عبر data-theme-color على <html>
   ============================================================ */
[data-theme-color="green"]{--brand:#2b6337;--brand-dark:#1d4526;--brand-light:#3a8049;--brand-soft:#e8f3ea;--accent:#f5a623}
[data-theme-color="blue"]{--brand:#1565c0;--brand-dark:#0d47a1;--brand-light:#42a5f5;--brand-soft:#e3f2fd;--accent:#ff9800}
[data-theme-color="purple"]{--brand:#6a1b9a;--brand-dark:#4a148c;--brand-light:#9c4dcc;--brand-soft:#f3e5f5;--accent:#ffc107}
[data-theme-color="red"]{--brand:#c62828;--brand-dark:#8e0000;--brand-light:#ef5350;--brand-soft:#ffebee;--accent:#ffa000}
[data-theme-color="orange"]{--brand:#e65100;--brand-dark:#ac1900;--brand-light:#ff833a;--brand-soft:#fff3e0;--accent:#2962ff}
[data-theme-color="teal"]{--brand:#00796b;--brand-dark:#004c40;--brand-light:#48a999;--brand-soft:#e0f2f1;--accent:#ff6f00}
[data-theme-color="pink"]{--brand:#ad1457;--brand-dark:#78002e;--brand-light:#e35183;--brand-soft:#fce4ec;--accent:#00bcd4}
[data-theme-color="navy"]{--brand:#1a237e;--brand-dark:#000051;--brand-light:#534bae;--brand-soft:#e8eaf6;--accent:#ffd600}

/* الوضع الداكن يبقى يعمل فوق أي ثيم (يعيد تعريف الخلفيات فقط) */

/* تأكيد أبعاد القائمة الجانبية (إصلاح ملء الشاشة) */
.offcanvas.side-menu{
  --bs-offcanvas-width:300px;
  width:300px !important; max-width:85vw !important;
  height:100% !important; visibility:hidden;
}
.offcanvas.side-menu.showing,
.offcanvas.side-menu.show{visibility:visible}
.ic-api{background:#0a9396}

/* ===== بطاقة الرصيد ===== */
.wallet-balance-card{
  background:linear-gradient(135deg, var(--brand,#2b6337), var(--brand-dark,#1d4526));
  color:#fff; border-radius:20px; padding:1.5rem; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.wallet-balance-card .wb-label{font-size:.9rem; opacity:.9}
.wallet-balance-card .wb-amount{font-size:2.2rem; font-weight:800; margin-top:.25rem}

/* ===== شبكة بوابات الشحن (مثل أورانوس) ===== */
.gateways-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem}
@media (min-width:768px){.gateways-grid{grid-template-columns:repeat(4,1fr)}}
.gateway-card{
  position:relative; background:var(--surface,#fff); border:2px solid var(--border,#e3e9e4);
  border-radius:16px; padding:1rem .5rem; display:flex; flex-direction:column; align-items:center;
  gap:.5rem; cursor:pointer; transition:.15s; text-align:center;
}
.gateway-card:hover{border-color:var(--brand,#2b6337); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.1)}
.gateway-card .gw-icon{
  width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; background:var(--brand-soft,#e8f3ea); color:var(--brand,#2b6337);
}
.gateway-card .gw-name{font-size:.85rem; font-weight:700; color:var(--text,#1f2a22)}
.gateway-card .gw-badge{
  position:absolute; top:6px; left:6px; background:#2b9348; color:#fff;
  font-size:.62rem; padding:2px 7px; border-radius:20px; font-weight:700;
}

/* ===== إصلاح: فرق واضح جداً للأزرار المحددة (باقات المنتج) ===== */
.btn-check:checked + .btn-outline-brand,
.option-card input:checked + label,
.btn-check:checked + label{
  background:var(--brand,#2b6337) !important; color:#fff !important;
  border-color:var(--brand,#2b6337) !important; box-shadow:0 0 0 3px rgba(43,99,55,.25) !important;
  font-weight:700;
}

/* ===== إصلاح: القائمة الجانبية تتبع السمة النشطة دائماً ===== */
.offcanvas.side-menu,
.offcanvas.side-menu .offcanvas-body{ background:var(--surface) !important; }
.side-list li a{ color:var(--text) !important; }
.side-list li a:hover{ background:rgba(127,127,127,.14) }
.side-theme, .side-theme span{ color:var(--text); border-color:var(--border) }

/* ===== شارة الرصيد + زر إضافة (أعلى، مثل أورانوس) ===== */
.balance-pill{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--gradient);
  border:0; border-radius:30px; padding:.3rem .3rem .3rem .95rem;
  text-decoration:none; color:#fff; font-weight:800; font-size:.98rem;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.balance-pill .bp-amount{color:#fff; white-space:nowrap}
.balance-pill .bp-plus{
  width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.28); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:800;
}
/* شعار بحجمين: أيقونة + نص */
.site-header .navbar-brand{display:flex; align-items:center; gap:.5rem}
.site-header .navbar-brand img{height:38px; width:auto}
.site-header .brand-text{font-size:1.05rem; font-weight:800; color:#fff}
@media (max-width:380px){.site-header .brand-text{display:none}}

/* ===== الشريط السفلي الثابت (Bottom Nav) ===== */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; height:62px; z-index:1030;
  background:var(--surface); border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-around; padding:0 .4rem;
}
.bottom-nav .bn-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--text-muted); text-decoration:none; font-size:.7rem; font-weight:600; transition:.18s; position:relative;
}
.bottom-nav .bn-item i{font-size:1.4rem; transition:transform .18s}
.bottom-nav .bn-item:hover{color:var(--text)}
.bottom-nav .bn-item.active{color:var(--accent)}
.bottom-nav .bn-item.active i{transform:translateY(-1px)}
/* مسافة سفلية حتى لا يغطي الشريط المحتوى */
body{padding-bottom:72px}

/* ===== بحث مدمج صغير (الرئيسية فقط) ===== */
.search-compact{max-width:100%; margin-top:.25rem}
.search-compact input{padding:.6rem 1rem; font-size:.9rem}
.search-compact button{padding:.5rem 1.1rem}

/* ===== تصغير أزرار الهيدر والشريط السفلي (توفير مساحة) ===== */
.site-header .navbar{padding:.45rem 0}
.menu-btn{width:40px; height:40px; font-size:1.25rem; border-radius:11px}
.site-header .navbar-brand img{height:34px}
.site-header .brand-text{font-size:.95rem}
.balance-pill{padding:.2rem .2rem .2rem .7rem; font-size:.85rem}
.balance-pill .bp-plus{width:26px; height:26px; font-size:.95rem}
.bottom-nav{height:58px}
.bottom-nav .bn-item i{font-size:1.25rem}
.bottom-nav .bn-item{font-size:.66rem}
body{padding-bottom:66px}

/* ===== الفوتر المبسّط ===== */
.footer-mini{text-align:center; padding-top:1rem}
.footer-contact{color:rgba(255,255,255,.85); font-size:.85rem}

/* ===== صفحات الدخول/التسجيل (تصميم احترافي مثل SMM) ===== */
.auth-body{background:var(--bg); min-height:100vh; margin:0; padding-bottom:2rem}
.auth-hero{
  background:linear-gradient(160deg, var(--brand-dark,#1d4526), var(--brand,#2b6337));
  color:#fff; padding:2.5rem 1.25rem 2rem; text-align:center; position:relative; overflow:hidden;
  border-radius:0 0 32px 32px;
}
.auth-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 40%),
             radial-gradient(circle at 80% 60%, rgba(255,255,255,.08), transparent 40%);
}
.auth-hero-inner{position:relative; max-width:640px; margin:0 auto}
.auth-server-badge{
  display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.18);
  padding:.4rem 1rem; border-radius:30px; font-size:.85rem; font-weight:700; margin-bottom:1rem;
}
.auth-hero-title{font-size:1.9rem; font-weight:800; line-height:1.3; margin-bottom:.75rem}
.auth-hero-sub{font-size:1rem; opacity:.9; margin-bottom:1.25rem}
.auth-features{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem}
.auth-features span{
  background:rgba(255,255,255,.15); padding:.4rem .9rem; border-radius:30px;
  font-size:.82rem; font-weight:600; display:inline-flex; align-items:center; gap:.35rem;
}
.auth-form-wrap{max-width:440px; margin:-1.5rem auto 0; padding:0 1rem; position:relative; z-index:2}
.auth-card{
  background:var(--surface,#fff); border-radius:20px; padding:1.75rem 1.5rem;
  box-shadow:0 12px 40px rgba(0,0,0,.15); border:1px solid var(--border);
}
.auth-card-title{font-size:1.4rem; font-weight:800; text-align:center; margin-bottom:1.5rem; color:var(--text)}
@media (max-width:480px){.auth-hero-title{font-size:1.5rem}}

/* ===== نافذة الإشعار الترحيبية ===== */
.notice-modal{
  background:linear-gradient(160deg, var(--brand,#2b6337), var(--brand-dark,#1d4526));
  color:#fff; border-radius:22px; border:0; overflow:hidden; padding:1.25rem;
}
.notice-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem}
.notice-title{font-size:1.2rem; font-weight:800; display:flex; align-items:center; gap:.4rem}
.notice-x{background:none; border:0; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; opacity:.85}
.notice-body{border-top:1px solid rgba(255,255,255,.2); padding-top:1rem}
.notice-text{
  background:rgba(255,255,255,.12); padding:.85rem 1rem; border-radius:12px;
  font-weight:600; line-height:1.6; margin-bottom:1rem;
}
.notice-link{
  display:inline-block; color:#fff; font-weight:700; text-decoration:underline;
  margin-bottom:1rem;
}
.notice-thanks{font-size:.95rem; opacity:.9; margin-bottom:1rem}
.notice-ok{
  width:100%; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-weight:800; padding:.85rem; border-radius:30px; cursor:pointer; font-size:1.05rem;
  transition:.15s;
}
.notice-ok:hover{background:rgba(255,255,255,.3)}

/* ===== صفحة الدفع (نمط أورانوس) ===== */
.pay-card{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:1.5rem; box-shadow:var(--shadow); margin-top:1rem}
.pay-title{font-size:1.5rem; font-weight:800; text-align:center; margin-bottom:1rem; color:var(--text)}
.pay-instructions{background:var(--brand-soft); color:var(--text); border-radius:12px; padding:.85rem 1rem; font-size:.85rem; line-height:1.7; margin-bottom:1rem}
.pay-note{color:var(--text-muted); font-size:.9rem; line-height:1.7; margin-bottom:1rem}
.pay-address-box{display:flex; align-items:center; gap:.5rem; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:.85rem 1rem; margin-bottom:1rem}
.pay-address{flex:1; word-break:break-all; font-family:monospace; font-size:.9rem; color:var(--text); direction:ltr; text-align:left}
.pay-copy,.pay-copy-sm{background:none; border:0; color:var(--brand); cursor:pointer; font-size:1.1rem}
.pay-copy-sm{font-size:.9rem; margin-right:.3rem}
.pay-rows{margin-bottom:1rem}
.pay-row{display:flex; justify-content:space-between; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--border)}
.pay-row span:first-child{color:var(--text-muted); font-size:.9rem}
.pay-amount{font-weight:800; color:var(--brand); direction:ltr}
.pay-credit{font-weight:800; color:#2b9348; direction:ltr}
.pay-timer-wrap{position:relative; width:160px; height:160px; margin:0 auto 1rem}
.pay-timer-svg{width:160px; height:160px; transform:rotate(-90deg)}
.pay-timer-svg .pt-bg{fill:none; stroke:var(--border); stroke-width:8}
.pay-timer-svg .pt-fg{fill:none; stroke:var(--brand); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1s linear}
.pay-timer-text{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:800; color:var(--text)}

/* ============================================================
   لمسات احترافية عصرية (تطوير الواجهة)
============================================================ */

/* balance-pill بتأثير زجاجي */
.balance-pill{ transition:.2s; }
.balance-pill:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.balance-pill .bp-plus{ transition:transform .2s; }
.balance-pill:hover .bp-plus{ transform:rotate(90deg); }

/* تأثير دخول ناعم للبطاقات والأقسام */
@keyframes fadeUp { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }
.product-card, .cat-card, .stat-card { animation: fadeUp .45s ease both; }

/* تدرّج بسيط في خلفية الصفحة */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%, rgba(37,99,235,.06), transparent 38%),
    radial-gradient(circle at 88% 92%, rgba(124,58,237,.06), transparent 38%);
}

/* شريط تمرير أنيق */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--gradient-soft); border-radius:8px; border:2px solid var(--bg); }

/* تحسين العناوين الرئيسية بتدرّج */
.page-title-gradient{
  background:var(--gradient); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-weight:800;
}

/* أزرار ثانوية متناسقة */
.btn-outline-brand{
  border:1.5px solid var(--brand); color:var(--brand); background:transparent;
  border-radius:50px; padding:.55rem 1.4rem; font-weight:700; transition:.22s;
}
.btn-outline-brand:hover{ background:var(--gradient-soft); color:#fff; border-color:transparent; transform:translateY(-2px); box-shadow:var(--shadow); }

/* تحسين شارات الحالة */
.badge-soft{ border-radius:30px; padding:.35rem .8rem; font-weight:700; font-size:.8rem; }

/* بطاقات الدفع/البوابات بتأثير */
.gateway-card{ transition:.25s; }
.gateway-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--brand); }

/* حقول الإدخال بتركيز أنيق */
.form-control:focus, .form-select:focus{
  border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(37,99,235,.18);
}

/* ============================================================
   الدفعة 3: لمسات Premium إضافية (Empty/Loading/Micro-interactions)
============================================================ */

/* Empty States احترافية */
.empty-state{ text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.empty-state .empty-icon{
  width:88px; height:88px; margin:0 auto 1rem; border-radius:50%;
  background:var(--gradient-soft); display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; color:#fff; opacity:.9; box-shadow:var(--shadow);
}
.empty-state h3{ font-weight:800; font-size:1.1rem; color:var(--text); margin-bottom:.4rem; }
.empty-state p{ font-size:.92rem; margin-bottom:1.2rem; }

/* Skeleton Loading */
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.skeleton{
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size:800px 100%; animation:shimmer 1.4s infinite linear; border-radius:8px;
}

/* أزرار بحالة تحميل */
.btn-loading{ position:relative; pointer-events:none; opacity:.75; }
.btn-loading::after{
  content:''; position:absolute; width:16px; height:16px; top:calc(50% - 8px); right:14px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* تحسين النوافذ المنبثقة (modals) */
.modal-content{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg); background:var(--surface);
}
.modal-content .modal-header{ border-bottom:1px solid var(--border); }
.modal.fade .modal-dialog{ transition:transform .25s ease-out; transform:translateY(20px) scale(.98); }
.modal.show .modal-dialog{ transform:none; }

/* بطاقات الإحصائيات في لوحة العميل */
.dash-stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.3rem; position:relative; overflow:hidden; transition:.25s;
}
.dash-stat::before{
  content:''; position:absolute; top:0; right:0; width:90px; height:90px;
  background:var(--gradient-soft); opacity:.08; border-radius:0 0 0 100%;
}
.dash-stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.dash-stat .ds-icon{
  width:48px; height:48px; border-radius:14px; background:var(--gradient-soft); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:.7rem;
}
.dash-stat .ds-num{ font-size:1.7rem; font-weight:800; color:var(--text); line-height:1; }
.dash-stat .ds-label{ color:var(--text-muted); font-size:.88rem; margin-top:.3rem; }

/* تحسين الجداول */
.table{ color:var(--text); }
.admin-table, .table-responsive{ border-radius:var(--radius); }

/* شارات الحالة الملوّنة */
.status-badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.32rem .8rem; border-radius:30px; font-size:.8rem; font-weight:700; }
.status-pending{ background:rgba(245,158,11,.14); color:#d97706; }
.status-processing{ background:rgba(59,130,246,.14); color:#2563eb; }
.status-completed{ background:rgba(16,185,129,.14); color:#059669; }
.status-cancelled{ background:rgba(239,68,68,.14); color:#dc2626; }

/* تأثير ضغط ناعم على كل الأزرار */
.btn:active{ transform:scale(.97); }

/* روابط القوائم بانتقال ناعم */
.dropdown-item, .nav-link{ transition:background .18s, color .18s; }

/* ===== بطاقات اختيار بوابة الدفع — صفحة "إضافة رصيد" (ux-card) ===== */
.ux-card{
    display:flex; flex-direction:column; align-items:center; gap:.55rem;
    background:var(--surface); border:1.5px solid var(--border);
    border-radius:var(--radius); padding:1rem .6rem; height:100%; text-align:center;
    transition:transform .2s, box-shadow .2s, border-color .2s;
}
.ux-card:hover{ transform:translateY(-3px); border-color:var(--brand); box-shadow:var(--shadow-glow); }
.ux-card__media{ width:54px; height:54px; display:flex; align-items:center; justify-content:center; }
.ux-card__img{ width:54px; height:54px; object-fit:contain; border-radius:12px; }
.ux-card__fallback{
    width:54px; height:54px; border-radius:12px; background:var(--gradient-soft);
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.ux-card__body{ display:flex; flex-direction:column; gap:.15rem; }
.ux-card__title{ font-weight:700; color:var(--text); font-size:.92rem; }
.ux-card__meta{ font-size:.78rem; color:var(--text-muted); }

/* ===== تعديل: اسم القسم أسفل الصورة بدل داخلها ===== */
.cat-card { aspect-ratio:auto; display:flex; flex-direction:column; padding:0; color:var(--text); }
.cat-card .cat-cover { position:static; width:100%; height:auto; aspect-ratio:1/1; display:block; }
.cat-card .cat-icon-full { position:static; width:100%; aspect-ratio:1/1; }
.cat-card .cat-overlay { display:none; }
.cat-card .cat-name { position:static; padding:.55rem .35rem .65rem; font-weight:700; font-size:.9rem; color:var(--text); text-shadow:none; }

/* ===== اسم التصنيف أسفل المربع (منفصل) ===== */
.cat-card .cat-overlay,
.cat-card .cat-name { display:none !important; }
.cat-label{
    display:block; text-align:center;
    margin:.55rem 0 .2rem; padding:0 .15rem;
    font-weight:700; font-size:.9rem; line-height:1.35;
    color: var(--text);
}
@media (max-width:575px){ .cat-label{ font-size:.8rem; } }

/* ===== التصنيفات: الاسم أسفل المربع (إصلاح نهائي - CSS فقط) ===== */
.cat-card{
  display:flex !important; flex-direction:column; align-items:stretch;
  aspect-ratio:auto !important; overflow:visible !important;
  background:transparent !important; border:0 !important;
  box-shadow:none !important; padding:0 !important;
}
.cat-card .cat-cover,
.cat-card .cat-icon-full{
  position:relative !important; inset:auto !important;
  width:100% !important; height:auto !important; aspect-ratio:1/1;
  border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface); overflow:hidden;
}
.cat-card .cat-icon-full{ display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.4rem; }
.cat-card .cat-cover{ object-fit:cover; }
.cat-card .cat-overlay{ display:none !important; }
.cat-card .cat-name,
.cat-label{
  position:static !important; inset:auto !important;
  display:block !important; text-align:center;
  margin:.5rem 0 .15rem !important; padding:0 .1rem !important;
  font-weight:700; font-size:.9rem; line-height:1.35;
  color:var(--text) !important; text-shadow:none !important;
}
.cat-card:hover{ transform:translateY(-4px) !important; box-shadow:none !important; }
.cat-card:hover .cat-cover, .cat-card:hover .cat-icon-full{ transform:none !important; }
@media (max-width:575px){ .cat-card .cat-name, .cat-label{ font-size:.8rem !important; } }

/* ===== التقييمات والدليل الاجتماعي ===== */
.stars{ color:#f5b50a; white-space:nowrap; letter-spacing:1px; }
.stars.sm{ font-size:.85rem; }
.stars i{ color:#f5b50a; }

/* بطاقة المنتج: تقييم + مبيعات */
.p-social{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.15rem 0 .35rem; }
.p-social .p-rating{ display:inline-flex; align-items:center; gap:.25rem; }
.p-social .p-rating small{ color:var(--text); opacity:.85; font-weight:700; }
.p-social .p-sold{ color:#ff7a45; font-weight:800; font-size:.76rem; display:inline-flex; align-items:center; gap:.2rem; }

/* صفحة المنتج: ملخّص أعلى */
.prod-social .prod-rating{ display:inline-flex; align-items:center; gap:.35rem; color:var(--text); }
.prod-social .prod-sold{ color:#ff7a45; font-weight:800; display:inline-flex; align-items:center; gap:.25rem; }

/* شارات الثقة */
.trust-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 1rem; }
.trust-badges span{ display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:700;
  color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.3rem .7rem; }
.trust-badges i{ color:var(--accent); }

/* شريط المشتريات الحية */
.purchase-ticker{ display:flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:.45rem .6rem; overflow:hidden; }
.purchase-ticker .pt-badge{ flex:0 0 auto; font-size:.72rem; font-weight:800; color:#0a0a0c; background:var(--accent);
  border-radius:999px; padding:.2rem .55rem; display:inline-flex; align-items:center; gap:.25rem; }
.purchase-ticker .pt-viewport{ flex:1 1 auto; overflow:hidden; }
.purchase-ticker .pt-track{ display:inline-flex; gap:1.6rem; white-space:nowrap; animation:pt-scroll 40s linear infinite; }
.purchase-ticker:hover .pt-track{ animation-play-state:paused; }
.purchase-ticker .pt-item{ font-size:.82rem; color:var(--text); opacity:.92; display:inline-flex; align-items:center; gap:.35rem; }
.purchase-ticker .pt-item i{ color:#34d399; }
.purchase-ticker .pt-item b{ color:var(--accent); font-weight:800; }
.purchase-ticker .pt-item em{ font-style:normal; opacity:.6; font-size:.74rem; margin-inline-start:.25rem; }
@keyframes pt-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
[dir="rtl"] .purchase-ticker .pt-track{ animation-name:pt-scroll-rtl; }
@keyframes pt-scroll-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }

/* قسم التقييمات */
.review-summary{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.review-summary .rs-score{ text-align:center; min-width:120px; }
.review-summary .rs-num{ font-size:2.4rem; font-weight:800; line-height:1; color:var(--text); }
.review-summary .rs-count{ color:var(--text); opacity:.6; font-size:.85rem; margin-top:.25rem; }
.review-summary .rs-cta{ flex:1 1 auto; }

/* إدخال النجوم التفاعلي */
.rating-input{ display:inline-flex; flex-direction:row-reverse; gap:.15rem; font-size:1.7rem; }
.rating-input input{ display:none; }
.rating-input label{ color:#52596b; cursor:pointer; transition:color .15s; }
.rating-input label:hover, .rating-input label:hover ~ label, .rating-input input:checked ~ label{ color:#f5b50a; }

/* عناصر المراجعات */
.review-item{ margin-bottom:.7rem; }
.review-item .ri-head{ display:flex; align-items:center; gap:.6rem; }
.review-item .ri-avatar{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--gradient-soft); color:#fff; font-weight:800; flex:0 0 auto; }
.review-item .ri-name{ font-weight:800; color:var(--text); line-height:1.2; }
.review-item .ri-date{ margin-inline-start:auto; font-size:.76rem; color:var(--text); opacity:.55; }
.review-item .ri-comment{ margin:.55rem 0 .2rem; color:var(--text); opacity:.92; line-height:1.6; }

/* ===== نقاط الولاء والمستويات ===== */
.loyalty-card .loyalty-unit{ font-size:1rem; font-weight:600; opacity:.7; }
.loyalty-hero{ text-align:center; background:linear-gradient(135deg, var(--surface), rgba(212,175,55,.10)); border:1px solid var(--border); }
.loyalty-hero .lh-points{ font-size:2.8rem; font-weight:900; line-height:1; color:var(--accent); }
.loyalty-hero .lh-label{ color:var(--text); opacity:.65; margin-top:.2rem; }
.loyalty-hero .lh-value{ margin-top:.5rem; font-weight:700; color:var(--text); }

.tier-card .tier-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.7rem; }
.tier-badge{ display:inline-flex; align-items:center; gap:.4rem; font-weight:800; color:#0a0a0c;
  background:var(--tier, #d4af37); border-radius:999px; padding:.3rem .8rem; font-size:.92rem; }
.tier-spent{ color:var(--text); opacity:.8; font-size:.9rem; }
.tier-bar{ height:10px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.tier-bar span{ display:block; height:100%; background:linear-gradient(90deg, var(--brand), var(--accent)); border-radius:999px; transition:width .5s ease; }
.tier-next{ margin-top:.55rem; font-size:.9rem; color:var(--text); opacity:.9; }

.redeem-preview{ text-align:center; color:var(--text); font-size:.82rem; opacity:.75; }
.redeem-preview b{ display:block; font-size:1.25rem; color:var(--accent); opacity:1; }

/* ===== زر المفضلة ===== */
.pc-wrap{ position:relative; }
.pc-wrap .fav-btn-form{ position:absolute; top:.5rem; inset-inline-end:.5rem; z-index:4; margin:0; }
.fav-btn{ width:34px; height:34px; border-radius:50%; border:none; background:rgba(10,10,12,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; display:grid; place-items:center;
  cursor:pointer; transition:transform .15s, background .15s, color .15s; font-size:1rem; }
.fav-btn:hover{ background:rgba(10,10,12,.85); transform:scale(1.08); }
.fav-btn.active, .fav-btn.active i{ color:#ff4d6d; }
.btn-fav.active{ color:#ff4d6d !important; border-color:#ff4d6d !important; }

/* ===== قائمة البحث الفوري ===== */
.search-box{ position:relative; }
.search-suggest{ position:absolute; top:calc(100% + 6px); inset-inline:0; background:var(--surface);
  border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.45);
  z-index:50; overflow:hidden; max-height:70vh; overflow-y:auto; display:none; }
.search-suggest.show{ display:block; }
.search-suggest .ss-item{ display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; color:var(--text);
  text-decoration:none; border-bottom:1px solid rgba(255,255,255,.05); }
.search-suggest .ss-item:last-child{ border-bottom:none; }
.search-suggest .ss-item:hover{ background:rgba(255,255,255,.06); }
.search-suggest .ss-img, .search-suggest .ss-ph{ width:36px; height:36px; border-radius:8px; object-fit:cover;
  flex:0 0 auto; display:grid; place-items:center; background:var(--bg); color:var(--accent); }
.search-suggest .ss-name{ flex:1 1 auto; font-weight:600; font-size:.9rem; }
.search-suggest .ss-price{ color:var(--accent); font-weight:800; font-size:.85rem; white-space:nowrap; }
.search-suggest .ss-cat{ font-weight:700; opacity:.9; }
.search-suggest .ss-cat i{ color:var(--accent); }
.search-suggest .ss-empty{ padding:.85rem; text-align:center; color:var(--text); opacity:.6; }

/* ===== الإنجازات والإحصائيات ===== */
.mini-stat{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:.8rem; text-align:center; height:100%; }
.mini-stat .ms-num{ font-size:1.3rem; font-weight:800; color:var(--text); line-height:1.2; }
.mini-stat .ms-num.ms-sm{ font-size:1rem; }
.mini-stat .ms-label{ font-size:.76rem; color:var(--text); opacity:.6; margin-top:.2rem; }

.ach-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(98px, 1fr)); gap:.7rem; margin-bottom:1.5rem; }
.ach-badge{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:.85rem .5rem; text-align:center; transition:transform .15s; }
.ach-badge:hover{ transform:translateY(-3px); }
.ach-badge .ach-icon{ display:grid; place-items:center; width:48px; height:48px; margin:0 auto .45rem; border-radius:50%; font-size:1.4rem; }
.ach-badge.unlocked .ach-icon{ background:linear-gradient(135deg, var(--brand), var(--accent)); color:#0a0a0c; box-shadow:0 4px 14px rgba(212,175,55,.25); }
.ach-badge.locked{ opacity:.55; }
.ach-badge.locked .ach-icon{ background:rgba(255,255,255,.06); color:var(--text); }
.ach-badge .ach-title{ font-size:.78rem; font-weight:700; color:var(--text); display:block; }
.ach-badge .ach-prog{ display:block; height:4px; background:rgba(255,255,255,.08); border-radius:999px; margin-top:.45rem; overflow:hidden; }
.ach-badge .ach-prog span{ display:block; height:100%; background:var(--accent); border-radius:999px; }

/* ===== جرس التنبيهات ===== */
.notif-bell{ position:relative; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  color:var(--text); background:transparent; border:0; font-size:1.3rem; flex:0 0 auto; text-decoration:none; }
.notif-bell:hover{ color:var(--accent); background:rgba(127,127,127,.14); }
.notif-bell .notif-badge{ position:absolute; top:-3px; inset-inline-end:-3px; background:#ff4d6d; color:#fff;
  font-size:.62rem; font-weight:800; min-width:17px; height:17px; border-radius:999px; display:grid; place-items:center; padding:0 3px; }

/* قائمة التنبيهات */
.notif-item{ display:flex; gap:.8rem; margin-bottom:.7rem; }
.notif-item .notif-ic{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--brand), var(--accent)); color:#0a0a0c; font-size:1.2rem; }
.notif-item .notif-body{ flex:1 1 auto; }
.notif-item .notif-title{ font-weight:800; color:var(--text); }
.notif-item .notif-text{ margin:.3rem 0; color:var(--text); opacity:.85; line-height:1.6; }
.notif-item .notif-meta{ display:flex; align-items:center; gap:.7rem; font-size:.78rem; color:var(--text); opacity:.65; }

/* ===== لمسات Gaming UI ===== */
.product-card{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.product-card:hover{ transform:translateY(-5px); box-shadow:0 14px 32px rgba(0,0,0,.5); border-color:rgba(212,175,55,.45); }
.cat-card{ transition:transform .18s ease; }
.cat-card:hover .cat-cover, .cat-card:hover .cat-icon-full{ box-shadow:0 10px 26px rgba(0,0,0,.45); border-color:rgba(212,175,55,.4); }
.btn-brand{ transition:transform .12s ease, filter .12s ease; }
.btn-brand:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.section-title{ position:relative; }