@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Amiri:wght@400;700&display=swap');

/* =============================================
   مــديــنــةُ الجمهورية
   Republic · Deep Crimson × Bronze Gold
   ============================================= */

:root {
  /* الأحمر الجمهوري */
  --red:          #9b1c1c;
  --red-deep:     #6b0f0f;
  --red-light:    #c0392b;
  --red-dim:      rgba(155,28,28,0.2);
  --red-border:   rgba(155,28,28,0.38);

  /* الذهبي البرونزي */
  --gold:         #c9a84c;
  --gold-light:   #e0c06a;
  --gold-dim:     rgba(201,168,76,0.14);
  --gold-border:  rgba(201,168,76,0.28);

  /* الخلفيات */
  --bg:           #060608;
  --bg-mid:       #0a0a0d;
  --bg-card:      rgba(10,9,12,0.92);
  --bg-card2:     #0d0c10;
  --bg-glass:     rgba(8,8,10,0.75);

  /* النصوص */
  --text:         #ede8e0;
  --muted:        #7a7570;
  --text-warm:    #c8bfab;

  /* أخرى */
  --accent:       #c0392b;
  --discord:      #5865f2;
  --success:      #22c55e;
  --warning:      #f59e0b;
  --danger:       #ef4444;
  --info:         #60a5fa;

  /* حدود وظلال */
  --border:       rgba(155,28,28,0.3);
  --border-gold:  rgba(201,168,76,0.22);
  --shadow-card:  0 28px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(155,28,28,0.1);
  --shadow-red:   0 0 50px rgba(155,28,28,0.25), 0 0 100px rgba(107,15,15,0.12);

  --r:    10px;
  --r-lg: 16px;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Cairo', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; }

/* طبقات الخلفية */
body::before {
  content:'';
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(155,28,28,0.18), transparent 60%),
    radial-gradient(ellipse 40% 30% at 10% 80%, rgba(107,15,15,0.12), transparent),
    url('/assets/img/hero_bg.png') center top / cover no-repeat fixed;
  filter: brightness(0.28) saturate(0.7) contrast(1.1);
}
body::after {
  content:'';
  position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(6,6,8,0.5) 0%,
      rgba(6,6,8,0.85) 50%,
      rgba(6,6,8,1) 100%);
}

/* شبكة خلفية دقيقة */
.grid-overlay {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(rgba(155,28,28,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,28,28,0.025) 1px, transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.5), transparent 65%);
}

/* Scrollbar */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--red); border-radius:10px; }

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
  position:fixed; top:0; width:100%; z-index:9999;
  background: rgba(6,6,8,0.88);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: 1px solid rgba(155,28,28,0.28);
  transition: all 0.3s;
}

/* خط أحمر-ذهبي متحرك */
.navbar::after {
  content:'';
  position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--red-deep) 20%,
    var(--red-light) 40%,
    var(--gold) 50%,
    var(--red-light) 60%,
    var(--red-deep) 80%,
    transparent 100%);
  background-size:300% 100%;
  animation: bar-slide 5s linear infinite;
}

.nav-container {
  max-width:1300px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; height:72px; gap:2rem;
}

/* الشعار */
.logo, .logo-text {
  display:flex; align-items:center; gap:14px;
  white-space:nowrap;
}
.logo img {
  width:46px; height:46px;
  border-radius:var(--r); object-fit:cover;
  border: 1px solid rgba(155,28,28,0.45);
  box-shadow: 0 0 22px rgba(155,28,28,0.35);
}
.logo-name-ar {
  font-family:'Amiri', serif;
  font-size:1.1rem; font-weight:700;
  color: var(--gold-light);
  text-shadow: 0 0 18px rgba(201,168,76,0.4);
  display:block; line-height:1.2;
}
.logo-name-en {
  font-family:'Cairo', sans-serif;
  font-size:0.62rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.18em;
  display:block;
}

/* روابط التنقل */
.nav-links {
  display:flex; list-style:none; gap:0.1rem;
  margin:0; padding:0; margin-right:auto;
}
.nav-links a {
  color:var(--muted); padding:8px 16px;
  border-radius:var(--r); font-weight:600; font-size:0.88rem;
  display:flex; align-items:center; gap:6px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border:1px solid transparent;
  position: relative;
}
.nav-links a:hover,
.nav-links a.active {
  color:var(--gold-light);
  background: rgba(155,28,28,0.18);
  border-color: rgba(155,28,28,0.38);
  box-shadow: 0 0 15px rgba(155,28,28,0.15);
  transform: translateY(-1px);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold-light);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 60%;
}
.nav-links a.nav-admin { color:var(--warning); }

/* User Dropdown */
.nav-auth { flex-shrink:0; }
.nav-user { position:relative; cursor:pointer; }
.nav-avatar {
  width:40px; height:40px; border-radius:50%;
  border:2px solid var(--red);
  transition:0.3s; display:block;
  box-shadow:0 0 14px rgba(155,28,28,0.4);
}
.nav-avatar:hover { box-shadow:0 0 26px rgba(155,28,28,0.65); }
.nav-dropdown { position:relative; }
.nav-username { display:none; }
.nav-menu {
  position:absolute; top:calc(100% + 14px); left:0;
  background:rgba(8,7,10,0.97);
  border:1px solid var(--border); border-radius:var(--r);
  padding:8px; min-width:200px;
  opacity:0; visibility:hidden;
  transform:translateY(-8px); transition:0.25s; z-index:100;
  backdrop-filter:blur(16px);
  box-shadow: var(--shadow-card);
}
.nav-user:hover .nav-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu a {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px;
  color:var(--muted); font-size:0.88rem; transition:0.2s;
}
.nav-menu a:hover { color:var(--gold-light); background:var(--red-dim); }
.nav-menu .logout-link:hover { color:#f87171; background:rgba(248,113,113,0.1); }

/* Mobile Toggle */
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span {
  width:24px; height:2px; background:var(--text);
  border-radius:2px; transition:0.3s; display:block;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:var(--r);
  font-weight:700; font-size:0.9rem;
  cursor:pointer; border:none; transition:all 0.3s;
  text-decoration:none; position:relative; overflow:hidden;
  font-family:'Cairo', sans-serif;
}
.btn::after {
  content:''; position:absolute;
  inset:-60% auto -60% -30%; width:28%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform:skewX(-18deg); transition:0.6s;
}
.btn:hover::after { left:120%; }

.btn-primary {
  background: linear-gradient(135deg, var(--red-deep), var(--red), #b91c1c);
  color: #fff; font-weight:900;
  box-shadow: 0 8px 28px rgba(155,28,28,0.45);
  border:1px solid rgba(255,255,255,0.1);
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow: 0 16px 44px rgba(155,28,28,0.6);
}

.btn-outline {
  background:transparent;
  border:1px solid rgba(155,28,28,0.4);
  color:var(--text);
}
.btn-outline:hover {
  background: rgba(155,28,28,0.16);
  border-color:var(--red);
  color: #fff;
  box-shadow:0 0 22px rgba(155,28,28,0.25);
}

.btn-discord {
  background:linear-gradient(135deg, #4338ca, var(--discord));
  color:#fff;
  box-shadow:0 4px 16px rgba(88,101,242,0.35);
}
.btn-discord:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(88,101,242,0.5); }

.btn-success { background:#16a34a; color:#fff; }
.btn-success:hover { background:#15803d; }
.btn-danger  { background:#dc2626; color:#fff; }
.btn-sm  { padding:7px 16px; font-size:0.82rem; }
.btn-lg  { padding:14px 38px; font-size:1rem; min-width:172px; justify-content:center; }
.btn-block { width:100%; justify-content:center; }

/* =============================================
   CARDS
   ============================================= */
.card {
  background: var(--bg-card);
  border:1px solid rgba(155,28,28,0.18);
  border-radius:var(--r-lg);
  padding:1.8rem;
  position:relative; overflow:hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  backdrop-filter:blur(14px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,
    transparent, var(--red-deep), var(--red-light), var(--gold), var(--red-light), var(--red-deep), transparent);
  opacity:0.8;
  transition: opacity 0.35s, transform 0.4s ease;
  transform: scaleX(0.7);
}
.card:hover::before {
  opacity:1;
  transform: scaleX(1);
}
.card:hover {
  border-color: rgba(201, 168, 76, 0.45);
  transform: translateY(-8px);
  box-shadow: 
    0 24px 60px rgba(0,0,0,0.6),
    0 0 30px rgba(155, 28, 28, 0.18);
}
.card-flat { transform:none !important; }

/* =============================================
   BADGES
   ============================================= */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 12px; border-radius:20px;
  font-size:0.75rem; font-weight:700;
}
.badge-primary { background:var(--red-dim); color:#e88; border:1px solid var(--red-border); }
.badge-success { background:rgba(34,197,94,0.15); color:#22c55e; border:1px solid rgba(34,197,94,0.25); }
.badge-warning { background:rgba(245,158,11,0.15); color:#f59e0b; border:1px solid rgba(245,158,11,0.25); }
.badge-danger  { background:rgba(239,68,68,0.15); color:#ef4444; border:1px solid rgba(239,68,68,0.25); }
.badge-info    { background:rgba(96,165,250,0.15); color:#60a5fa; border:1px solid rgba(96,165,250,0.25); }

/* =============================================
   FORMS
   ============================================= */
.form-group { margin-bottom:1.3rem; }
.form-group label { display:block; margin-bottom:7px; font-weight:700; font-size:0.9rem; color:var(--muted); }
.form-control {
  width:100%; padding:12px 16px;
  background:rgba(8,7,10,0.85);
  border:1px solid rgba(155,28,28,0.22);
  color:var(--text); border-radius:var(--r);
  font-family:'Cairo', sans-serif; font-size:0.95rem;
  outline:none; transition:0.3s;
}
.form-control:focus {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(155,28,28,0.15);
}
textarea.form-control { resize:vertical; min-height:100px; }
select.form-control option { background:#0a0a0d; }

/* =============================================
   ALERTS
   ============================================= */
.alert { padding:14px 18px; border-radius:var(--r); margin-bottom:1.2rem; display:flex; align-items:flex-start; gap:10px; font-weight:600; }
.alert-success { background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.22); color:#22c55e; }
.alert-danger  { background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.22); color:#ef4444; }
.alert-warning { background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.22); color:#f59e0b; }
.alert-info    { background:rgba(96,165,250,0.08); border:1px solid rgba(96,165,250,0.22); color:#60a5fa; }

/* =============================================
   TABLES
   ============================================= */
.table-wrap { overflow-x:auto; border-radius:var(--r); border:1px solid var(--border); }
table.tbl { width:100%; border-collapse:collapse; }
table.tbl th { background:rgba(6,6,8,0.95); padding:13px 16px; text-align:right; font-weight:700; font-size:0.85rem; color:var(--gold-light); border-bottom:1px solid var(--border); }
table.tbl td { padding:12px 16px; border-bottom:1px solid rgba(155,28,28,0.08); font-size:0.9rem; }
table.tbl tr:hover td { background:rgba(155,28,28,0.04); }

/* =============================================
   LAYOUT
   ============================================= */
.container { max-width:1240px; margin:0 auto; padding:0 24px; }
.main-wrapper { padding-top:72px; }

/* =============================================
   HERO
   ============================================= */
.hero {
  min-height:calc(100vh - 72px);
  display:flex; align-items:center; justify-content:center;
  text-align:center; position:relative; overflow:hidden;
  isolation:isolate;
}

.hero-bg {
  position:absolute; inset:0;
  background: url('/assets/img/hero_bg.png') center / cover no-repeat;
  filter:brightness(0.32) saturate(0.75) contrast(1.12);
  animation:hero-drift 20s ease-in-out infinite alternate;
}

.hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,6,8,0.1), rgba(6,6,8,0.78) 58%, rgba(6,6,8,1) 100%),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(155,28,28,0.22), transparent 65%);
}

/* خطوط المنظور في الأسفل */
.hero-vice::before {
  content:'';
  position:absolute; inset:auto 0 0; height:28%; z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      transparent 0 9%, rgba(155,28,28,0.35) 9% 9.5%,
      transparent 9.5% 18%, rgba(201,168,76,0.2) 18% 18.4%,
      transparent 18.4% 100%),
    linear-gradient(180deg, transparent, rgba(155,28,28,0.14));
  background-size:150px 100%, 100% 100%;
  transform:perspective(480px) rotateX(58deg);
  transform-origin:bottom;
  opacity:0.5;
}

/* خط مشع أعلى الهيرو */
.hero-vice::after {
  content:'';
  position:absolute; top:0; left:10%; right:10%; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--red-light), var(--gold), var(--red-light), transparent);
  box-shadow:0 0 30px rgba(155,28,28,0.5);
  opacity:0.6;
}

.vice-scanline {
  position:absolute; inset:0; z-index:1;
  pointer-events:none; opacity:0.07;
  background:repeating-linear-gradient(180deg, transparent 0, transparent 5px, rgba(255,255,255,0.06) 6px);
}

.hero-content {
  position:relative; z-index:2;
  padding:0 24px; max-width:1000px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}

/* اللوجو */
.server-mark {
  display:inline-flex; position:relative;
  margin-bottom:26px;
}
.server-mark::before {
  content:'';
  position:absolute; inset:6px; border-radius:var(--r);
  box-shadow:0 0 90px rgba(155,28,28,0.5), 0 0 50px rgba(155,28,28,0.3);
  animation:mark-pulse 3s ease-in-out infinite;
}
.server-mark::after {
  content:'LIVE';
  position:absolute; left:-18px; top:6px;
  padding:2px 7px; border-radius:5px;
  background:#9b1c1c; color:#fff;
  font-size:0.64rem; font-weight:900; letter-spacing:0.06em;
  box-shadow:0 0 16px rgba(155,28,28,0.7);
  animation:live-blink 1.4s infinite;
}

.hero-logo {
  width:110px; height:110px;
  border-radius:var(--r-lg); object-fit:cover;
  border:2px solid rgba(155,28,28,0.5);
  box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(155,28,28,0.4);
  animation:logo-float 4.8s ease-in-out infinite;
}

/* العلامة */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(155,28,28,0.18);
  border:1px solid rgba(155,28,28,0.4);
  color:#e8a0a0; padding:6px 18px; border-radius:30px;
  font-size:0.82rem; font-weight:700; margin-bottom:1.4rem;
}

/* العنوان الرئيسي */
.hero h1 {
  font-family:'Amiri', serif;
  font-size:clamp(2.8rem, 9vw, 7.5rem);
  font-weight:700; line-height:1.05; margin-bottom:0.8rem;

  /* تدرج أحمر - ذهبي - أبيض */
  background:linear-gradient(180deg,
    #ffffff 0%,
    #f0dbc0 25%,
    var(--gold-light) 52%,
    var(--red-light) 80%,
    var(--red-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:
    drop-shadow(0 0 28px rgba(155,28,28,0.55))
    drop-shadow(0 0 60px rgba(155,28,28,0.25))
    drop-shadow(0 0 14px rgba(201,168,76,0.35));
}

.glow { filter:drop-shadow(0 0 30px rgba(155,28,28,0.6)); }

/* سبتايتل */
.hero-subtitle {
  font-size:0.85rem; color:var(--muted);
  letter-spacing:0.22em; text-transform:uppercase;
  margin-bottom:1.4rem; font-family:'Cairo', sans-serif;
}

/* وصف */
.hero-copy {
  display:block !important;
  font-size:1.08rem; color:var(--text-warm);
  max-width:660px; margin:0 auto 2rem !important;
  line-height:1.85;
}

/* داشبورد الإحصائيات */
.vice-dashboard {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; width:min(700px,100%);
  margin:0 auto 1.8rem;
  border:1px solid rgba(155,28,28,0.38); border-radius:var(--r);
  overflow:hidden;
  background:linear-gradient(90deg,
    rgba(155,28,28,0.7),
    rgba(201,168,76,0.4),
    rgba(155,28,28,0.6));
  box-shadow:0 0 40px rgba(155,28,28,0.2), 0 20px 60px rgba(0,0,0,0.45);
}
.vice-dashboard span {
  min-height:62px; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:rgba(6,6,8,0.88); color:var(--text-warm);
  font-size:0.8rem; font-weight:700;
}
.vice-dashboard strong {
  color:var(--gold-light); font-size:1.1rem; line-height:1.15;
  text-shadow:0 0 16px rgba(201,168,76,0.5);
}

/* البيلز */
.hero-pills {
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:10px; margin:0 auto 2rem;
}
.hero-pills span {
  display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:7px 16px; border-radius:var(--r);
  border:1px solid rgba(155,28,28,0.32);
  color:var(--text-warm);
  background:rgba(155,28,28,0.14);
  font-size:0.86rem; font-weight:700;
}
.hero-pills i { color:var(--gold); }

/* أزرار الهيرو */
.hero-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* =============================================
   HOME STORE
   ============================================= */
.home-store { margin-top:32px; padding-bottom:100px; }

.section-head { text-align:center; margin-bottom:3.5rem; }
.section-head h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:900; margin-bottom:0.8rem; font-family:'Amiri',serif; }
.section-head h2 span { color:var(--gold-light); }
.section-head p { color:var(--muted); max-width:540px; margin:0 auto; }
.section-head.compact { margin-bottom:28px; }
.section-head.compact h2 { font-size:1.75rem; }

.section-kicker {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  color:var(--gold-light); font-size:0.78rem; font-weight:900;
  text-transform:uppercase; margin-bottom:8px;
  letter-spacing:0.12em;
  text-shadow:0 0 18px rgba(201,168,76,0.4);
}

.section-divider {
  width:80px; height:2px; margin:12px auto 0;
  background:linear-gradient(90deg, transparent, var(--red), var(--gold), var(--red), transparent);
}

/* =============================================
   PRODUCTS
   ============================================= */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.products-grid-premium .product-card { padding:1rem; }

.product-card { position:relative; overflow:hidden; }
.product-card::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(155,28,28,0.15) 0%, transparent 35%, transparent 65%, rgba(201,168,76,0.12) 100%);
  opacity:0.5; mix-blend-mode:screen;
}

.product-img-wrap { height:180px; overflow:hidden; border-radius:var(--r); margin-bottom:1rem; background:#08070a; }
.product-img-wrap img { width:100%; height:100%; object-fit:cover; transition:0.45s; }
.product-card:hover .product-img-wrap img { transform:scale(1.06); }
.product-badge { position:absolute; top:14px; right:14px; }
.product-price { font-size:1.3rem; font-weight:900; color:var(--gold-light); }
.product-card h3 { font-size:1rem; margin-bottom:8px; }
.product-card p { height:42px; overflow:hidden; font-size:0.86rem; color:var(--muted); }
.product-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }

/* =============================================
   PAYMENT
   ============================================= */
.pay-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.pay-card { background:rgba(8,7,10,0.85); border:2px solid rgba(155,28,28,0.16); border-radius:var(--r); padding:18px; text-align:center; cursor:pointer; transition:0.3s; }
.pay-card:hover { border-color:var(--red); }
.pay-card.selected { border-color:var(--red); background:var(--red-dim); box-shadow:0 0 24px rgba(155,28,28,0.25); }
.pay-card i { font-size:1.8rem; color:var(--muted); margin-bottom:8px; display:block; }
.pay-card.selected i { color:var(--red-light); }
.pay-card span { font-size:0.82rem; font-weight:700; }

/* Checkout */
.checkout-product-details { display:grid; grid-template-columns:minmax(260px,360px) 1fr; gap:24px; align-items:stretch; }
.checkout-product-media { position:relative; min-height:260px; border-radius:var(--r); overflow:hidden; background:#06060a; border:1px solid var(--border); }
.checkout-product-media img { width:100%; height:100%; min-height:260px; object-fit:cover; display:block; }
.checkout-product-badge { position:absolute; top:14px; right:14px; z-index:2; }
.checkout-product-info { display:flex; flex-direction:column; gap:12px; }
.checkout-product-meta { display:flex; flex-wrap:wrap; gap:8px; }
.checkout-product-info h2 { font-size:clamp(1.45rem,3vw,2.35rem); line-height:1.25; font-family:'Amiri',serif; }
.checkout-product-price { font-size:1.65rem; color:var(--gold-light); font-weight:900; }
.checkout-product-description { color:var(--muted); font-size:0.98rem; line-height:1.9; }
.checkout-product-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-top:4px; }
.checkout-product-features span { display:flex; align-items:center; gap:8px; min-height:42px; padding:9px 12px; border-radius:var(--r); color:var(--text-warm); background:var(--red-dim); border:1px solid var(--red-border); font-size:0.88rem; font-weight:700; }
.checkout-product-features i { color:var(--success); flex:0 0 auto; }

/* =============================================
   PAGE HERO
   ============================================= */
.page-hero {
  padding:88px 0 42px; text-align:center;
  position:relative; overflow:hidden;
}
.page-hero h1 { font-size:clamp(2rem,5vw,3.7rem); font-family:'Amiri',serif; }
.page-hero::after {
  content:''; position:absolute; left:10%; right:10%; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--red-light), var(--gold), var(--red-light), transparent);
  box-shadow:0 0 26px rgba(155,28,28,0.4);
}

/* =============================================
   COMMUNITY
   ============================================= */
.community-wrap { padding-bottom:100px; }
.community-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
.community-toolbar .form-control { max-width:340px; }
.members-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; }

.member-card {
  display:flex; flex-direction:column; text-align:center;
  align-items:center; gap:10px; padding:18px 12px;
  min-height:160px; justify-content:center;
  border:1px solid rgba(155,28,28,0.16);
  border-radius:var(--r); transition:0.28s;
  background:linear-gradient(180deg, rgba(12,10,14,0.92), rgba(8,7,10,0.92));
  box-shadow:0 8px 28px rgba(0,0,0,0.4);
}
.member-card:hover {
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(155,28,28,0.45);
  box-shadow:0 20px 52px rgba(0,0,0,0.5), 0 0 28px rgba(155,28,28,0.2);
}
.member-card img { width:62px; height:62px; border-radius:50%; border:2px solid rgba(155,28,28,0.4); box-shadow:0 0 20px rgba(155,28,28,0.3); }
.member-card:hover img { border-color:var(--gold); box-shadow:0 0 28px rgba(201,168,76,0.4); }
.member-card h3 { color:#fff; font-size:0.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; }
.member-card p { color:var(--red-light); direction:ltr; text-align:center; font-size:0.8rem; }

/* =============================================
   EXAM
   ============================================= */
.exam-wrap { max-width:800px; margin:0 auto; }
.question-card { animation:fadeInUp 0.3s ease; }
.option-label { display:flex; align-items:center; gap:12px; padding:14px 18px; border:2px solid rgba(155,28,28,0.16); border-radius:var(--r); cursor:pointer; transition:0.25s; margin-bottom:10px; }
.option-label:hover { border-color:rgba(155,28,28,0.45); background:var(--red-dim); }
.option-label input[type=radio] { accent-color:var(--red); width:18px; height:18px; flex-shrink:0; }
.option-label input:checked ~ span { color:#fff; }
.option-label:has(input:checked) { border-color:var(--red); background:var(--red-dim); }

/* =============================================
   ADMIN
   ============================================= */
.admin-layout { display:flex; min-height:100vh; }
.sidebar { width:260px; flex-shrink:0; background:rgba(8,7,10,0.97); border-left:1px solid var(--border); display:flex; flex-direction:column; padding:24px 16px; position:fixed; top:0; right:0; height:100vh; overflow-y:auto; z-index:100; }
.sidebar-brand { font-size:1.1rem; font-weight:900; padding:8px 12px; margin-bottom:24px; color:var(--gold-light); font-family:'Amiri',serif; }
.sidebar-brand i { margin-left:8px; color:var(--red-light); }
.side-link { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r); color:var(--muted); font-weight:600; font-size:0.88rem; transition:0.25s; margin-bottom:3px; }
.side-link:hover, .side-link.active { background:var(--red-dim); color:#fff; }
.side-link.active { border-right:3px solid var(--red); }
.side-link i { width:18px; text-align:center; }
.admin-content { flex:1; margin-right:260px; padding:32px; min-height:100vh; }
.admin-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.admin-topbar h1 { font-size:1.6rem; font-weight:900; font-family:'Amiri',serif; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; margin-bottom:32px; }
.stat-card { display:flex; align-items:center; gap:16px; padding:20px; }
.stat-card .ico { width:50px; height:50px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.stat-card .val { font-size:1.8rem; font-weight:900; line-height:1; color:var(--gold-light); }
.stat-card .lbl { font-size:0.8rem; color:var(--muted); margin-top:3px; }

/* =============================================
   STATS BAR
   ============================================= */
.stats-bar { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.stat-item { background:var(--bg-card); padding:24px; text-align:center; }
.stat-item .num { font-size:2rem; font-weight:900; color:var(--red-light); }
.stat-item .lbl { font-size:0.82rem; color:var(--muted); margin-top:4px; }

/* =============================================
   PROGRESS
   ============================================= */
.progress { background:#0a0a0d; border-radius:10px; height:8px; overflow:hidden; }
.progress-bar { height:100%; background:linear-gradient(90deg, var(--red-deep), var(--red-light), var(--gold)); border-radius:8px; transition:0.5s; box-shadow:0 0 10px rgba(155,28,28,0.6); }

/* =============================================
   TICKET
   ============================================= */
.ticket-card { border-right:4px solid var(--info); }
.ticket-card.open   { border-right-color:var(--info); }
.ticket-card.closed { border-right-color:var(--muted); }
.ticket-card.urgent { border-right-color:var(--red); }

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background:linear-gradient(180deg, rgba(7,6,9,0.95), #040306);
  border-top:1px solid rgba(155,28,28,0.22);
  padding:70px 0 0; position:relative;
}
.footer::before {
  content:'';
  position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, var(--red-light), var(--gold), var(--red-light), transparent);
  box-shadow:0 0 28px rgba(155,28,28,0.35);
}
.footer-inner { max-width:1240px; margin:0 auto; padding:0 24px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; padding-bottom:44px; }

.footer-brand p { color:var(--muted); margin:0.8rem 0 1.2rem; font-size:0.9rem; line-height:1.7; }
.footer-brand .logo-name-ar { color:var(--gold-light); font-family:'Amiri',serif; font-size:1.3rem; margin-bottom:4px; }
.footer-brand .logo-name-en { color:var(--muted); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.15em; }

.footer-social { display:flex; gap:12px; }
.footer-social a { width:40px; height:40px; border-radius:50%; background:rgba(155,28,28,0.1); border:1px solid rgba(155,28,28,0.22); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:0.3s; }
.footer-social a:hover { border-color:var(--red); color:var(--red-light); box-shadow:0 0 16px rgba(155,28,28,0.3); }

.footer-links h4 { font-size:0.92rem; font-weight:800; margin-bottom:1rem; color:var(--gold-light); font-family:'Amiri',serif; }
.footer-links ul { list-style:none; }
.footer-links ul li { margin-bottom:10px; }
.footer-links ul a { color:var(--muted); font-size:0.88rem; display:flex; align-items:center; gap:7px; transition:0.25s; }
.footer-links ul a:hover { color:var(--text); }

.footer-join { display:flex; flex-direction:column; }
.footer-join h4 { font-size:0.92rem; font-weight:800; margin-bottom:1rem; color:var(--gold-light); font-family:'Amiri',serif; }

.footer-bottom { border-top:1px solid rgba(155,28,28,0.12); padding:22px 0; text-align:center; color:var(--muted); font-size:0.82rem; }
.footer-bottom span { color:var(--red-light); }

/* =============================================
   UTILITIES
   ============================================= */
.text-primary { color:var(--red-light) !important; }
.text-muted   { color:var(--muted) !important; }
.text-success { color:var(--success) !important; }
.text-danger  { color:var(--danger) !important; }
.text-warning { color:var(--warning) !important; }
.text-center  { text-align:center; }

.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem} .mt-4{margin-top:2rem} .mt-5{margin-top:3rem}
.mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem} .mb-4{margin-bottom:2rem} .mb-5{margin-bottom:3rem}
.p-0{padding:0!important} .d-flex{display:flex} .align-center{align-items:center}
.justify-between{justify-content:space-between} .gap-2{gap:1rem}
.w-100{width:100%} .rounded{border-radius:var(--r)} .hidden{display:none!important}

#fullscreen-blocker { min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse      { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes spin       { to{transform:rotate(360deg)} }
@keyframes hero-drift { from{transform:scale(1.02)} to{transform:scale(1.07) translate3d(1%,-1%,0)} }
@keyframes logo-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes mark-pulse { 0%,100%{opacity:0.35;transform:scale(0.94)} 50%{opacity:1;transform:scale(1.1)} }
@keyframes live-blink { 0%,100%{opacity:1} 50%{opacity:0.38} }
@keyframes bar-slide  { from{background-position:0% 0} to{background-position:300% 0} }

.fade-in { animation:fadeInUp 0.55s ease forwards; }
.pulse   { animation:pulse 2s infinite; }

/* أورب الضوء الجمهوري */
.hero-orb {
  position:absolute; border-radius:50%;
  pointer-events:none; filter:blur(100px);
  opacity:0.28; animation:orb-drift 14s ease-in-out infinite alternate;
}
.hero-orb-1 { width:500px; height:500px; background:rgba(155,28,28,0.45); top:-100px; right:-120px; }
.hero-orb-2 { width:350px; height:350px; background:rgba(107,15,15,0.3); bottom:0; left:-80px; animation-delay:6s; }
.hero-orb-3 { width:250px; height:250px; background:rgba(201,168,76,0.2); top:40%; left:50%; transform:translate(-50%,-50%); animation-delay:3s; }
@keyframes orb-drift { from{transform:translate(0,0)} to{transform:translate(25px,18px)} }

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .admin-content { margin-right:0; padding:20px; }
  .sidebar { display:none; }
}
@media(max-width:768px) {
  .nav-links { display:none; flex-direction:column; position:fixed; top:72px; right:0; left:0; background:rgba(6,6,8,0.97); padding:20px; border-bottom:1px solid var(--border); }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; }
  .hero h1 { font-size:2.7rem; }
  .hero-logo { width:82px; height:82px; }
  .hero-copy { font-size:0.98rem; }
  .hero-pills span { width:100%; justify-content:center; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .hero-btns { flex-direction:column; align-items:center; }
  .products-grid { grid-template-columns:1fr; }
  .checkout-product-details { grid-template-columns:1fr; }
  .checkout-product-media, .checkout-product-media img { min-height:220px; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .vice-dashboard { grid-template-columns:1fr; }
  .vice-dashboard span { min-height:48px; }
  .members-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .member-card { min-height:144px; }
  .community-toolbar { align-items:stretch; flex-direction:column; }
  .community-toolbar .form-control { max-width:none; }
  body { background-attachment:scroll; }
}
@media(max-width:480px) {
  .container { padding:0 14px; }
  .btn-lg { padding:12px 24px; font-size:0.95rem; min-width:unset; }
  .stat-grid { grid-template-columns:1fr; }
  .members-grid { grid-template-columns:1fr; }
}