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

:root{
  /* ===== الألوان ===== */
  --bg:            #08070d;
  --bg-soft:       #0d0b16;
  --surface:       rgba(139, 92, 246, 0.06);
  --surface-hover: rgba(139, 92, 246, 0.11);
  --border:        rgba(196, 181, 253, 0.14);
  --border-strong: rgba(196, 181, 253, 0.30);

  --violet-900: #2e1065;
  --violet-700: #5b21b6;
  --violet-600: #7c3aed;
  --violet-500: #8b5cf6;
  --violet-400: #a78bfa;
  --violet-200: #ddd6fe;
  --lavender:   #c4b5fd;

  --text:       #f4f2fb;
  --text-muted: #9d97b3;
  --text-dim:   #6c6683;

  --danger: #f87171;
  --success:#4ade80;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --font-display: 'Tajawal', 'Space Grotesk', sans-serif;
  --font-body: 'Tajawal', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* توهج خلفي هادي بنفسجي - إحساس فخم بدون مبالغة */
body::before{
  content:"";
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(circle at 15% 10%, rgba(124,58,237,0.16), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(139,92,246,0.10), transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(91,33,182,0.14), transparent 45%);
  pointer-events: none;
  z-index: 0;
  animation: driftGlow 22s ease-in-out infinite alternate;
}
@keyframes driftGlow{
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-2%, 2%) scale(1.05); }
}

a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-display); margin:0; letter-spacing: -0.01em; }
p{ line-height: 1.8; color: var(--text-muted); margin:0; }

/* ===== الشريط العلوي ===== */
.nav{
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 5%;
  background: rgba(8,7,13,0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-logo{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-weight:900; font-size:1.25rem;
}
.nav-logo .dot{
  width:10px;height:10px;border-radius:50%;
  background: var(--violet-500);
  box-shadow: 0 0 12px 3px rgba(139,92,246,0.7);
}
.nav-links{ display:flex; align-items:center; gap:14px; }

/* ===== الأزرار ===== */
.btn{
  font-family: var(--font-body);
  font-weight:700;
  font-size: 0.95rem;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--violet-600), var(--violet-500));
  color: #ffffff;
  box-shadow: 0 6px 24px -6px rgba(139,92,246,0.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px -6px rgba(139,92,246,0.75); }

.btn-ghost{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover{ background: var(--surface-hover); transform: translateY(-2px); }

.btn-danger{ background: rgba(248,113,113,0.15); color:#fca5a5; border:1px solid rgba(248,113,113,0.3); }
.btn-sm{ padding: 8px 16px; font-size:0.85rem; }

/* ===== كارد بحافة "تذكرة" مقصوصة - العنصر المميز للتصميم ===== */
.ticket-card{
  position:relative;
  background: linear-gradient(180deg, rgba(139,92,246,0.07), rgba(139,92,246,0.02));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ticket-card:hover{
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 16px 40px -18px rgba(139,92,246,0.5);
}
.ticket-card::before{
  content:"";
  position:absolute; top:0; bottom:0; right:38%;
  border-right: 2px dashed rgba(196,181,253,0.18);
  display:none;
}
.ticket-card.has-stub::after{
  content:"";
  position:absolute; left:-9px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  background: var(--bg);
  border: 1px solid var(--border);
}

.container{ max-width: 1180px; margin:0 auto; padding: 0 5%; position:relative; z-index:1; }

/* ===== الحركات العامة ===== */
.fade-up{ animation: fadeUp .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes fadeUp{ from{opacity:0; transform: translateY(18px);} to{opacity:1; transform:none;} }

.pulse-dot{ animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.55;} 50%{opacity:1;} }

/* ===== أفتار المستخدم أعلى الصفحة ===== */
.user-chip{ position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; }
.user-chip img{ width:38px; height:38px; border-radius:50%; border:2px solid var(--border-strong); }
.user-menu{
  position:absolute; top:52px; left:0; min-width:150px;
  background: var(--bg-soft); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding:8px;
  display:none; flex-direction:column; gap:4px;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6);
}
.user-menu.open{ display:flex; }
.user-menu button{
  background:none; border:none; color: var(--text); text-align:right;
  padding: 10px 12px; border-radius: 8px; cursor:pointer; font-family:var(--font-body); font-size:0.9rem;
}
.user-menu button:hover{ background: var(--surface-hover); color: var(--danger); }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background: var(--violet-700); border-radius:4px; }
::-webkit-scrollbar-track{ background: transparent; }

.spinner{
  width:18px; height:18px; border-radius:50%;
  border: 2px solid rgba(196,181,253,0.25); border-top-color: var(--violet-400);
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}