/* ===========================
   Theme Variables
   =========================== */
:root{
  --gold:#ffd700;
  --gold-2:#ffb347;
  --text-primary:#ffd700;
  --text-secondary:rgba(255,215,0,.85);
  --card-bg: rgba(0,0,0,.88);
  --border-color: rgba(255,215,0,.28);
  --bg-grad: linear-gradient(135deg, #000 0%, #1a1a1a 50%, #000 100%);
  --primary-gradient: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
}

/* ===========================
   Base
   =========================== */
*{box-sizing:border-box}
html{direction:rtl}
body{
  margin:0;
  min-height:100vh;
  color:var(--text-primary);
  background:var(--bg-grad);
  font-family:'Cairo','Tajawal','Noto Sans Arabic',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
.arabic{font-family:'Cairo','Tajawal','Noto Sans Arabic',sans-serif}

/* ===========================
   Header
   =========================== */
.header{
  position:relative;
  padding:18px 0;
  border-bottom:4px solid var(--gold);
  background:linear-gradient(135deg,#000 0%,#121212 50%,#000 100%);
  box-shadow:0 5px 30px rgba(255,215,0,.25);
}
.header-content{
  max-width:1200px; margin:0 auto; padding:0 18px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.header-left{display:flex; align-items:center; gap:16px}
.logo{height:64px; width:auto; object-fit:contain; border-radius:14px; background:transparent !important}
.brand-text h1{
  margin:0 0 4px;
  font-size:2rem; font-weight:800;
  background:var(--primary-gradient);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-text p{margin:0; color:var(--text-secondary); font-weight:600}

/* ===========================
   Marquee
   =========================== */
.marquee{
  background:linear-gradient(135deg,#ffd700 0%, #daa520 100%);
  color:#000; padding:10px 0; overflow:hidden; white-space:nowrap;
  border-bottom:3px solid rgba(255,215,0,.55);
  box-shadow:0 2px 15px rgba(255,215,0,.25);
}
.marquee-text{
  display:inline-block; padding-right:100%;
  font-size:1.2rem; font-weight:800; font-family:'Cairo',sans-serif;
  animation:marq 28s linear infinite; color:#000;
}
@keyframes marq{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* ===========================
   Layout
   =========================== */
.main-content{
  max-width:1400px; margin:0 auto; padding:28px 18px;
  display:grid; grid-template-columns: 1fr 1fr; gap:42px; align-items:start;
}
@media (max-width: 992px){
  .main-content{grid-template-columns:1fr; gap:28px}
}

/* ===========================
   Wheel (أساس — بدون المؤشّر هنا)
   =========================== */
.wheel-section{display:flex; flex-direction:column; align-items:center; gap:16px}
.wheel-container{
  position:relative;
  width: clamp(260px, 45vw, 560px);
  height: clamp(260px, 45vw, 560px);
  margin-inline:auto; display:flex; align-items:center; justify-content:center;
  isolation:isolate; aspect-ratio:1/1;
}
#wheelCanvas{
  width:100%; height:100%; display:block; border-radius:50%;
  box-shadow:0 0 28px rgba(255,215,0,.18);
}

/* زرّ المركز */
.wheel-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(72px,22%,120px); height:clamp(72px,22%,120px);
  border-radius:50%; background:#000; border:4px solid var(--gold);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:250; cursor:pointer; user-select:none;
  box-shadow:0 0 30px rgba(255,215,0,.6), inset 0 0 16px rgba(255,215,0,.15);
}
.center-logo img{
  width:42px; height:42px; object-fit:contain; background:transparent!important;
}
.center-text{
  margin-top:4px; font-weight:900; font-size:14px; color:var(--gold);
}

/* ===========================
   Result popup
   =========================== */
.prize-result-popup{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:1000; opacity:0; visibility:hidden; transition:.3s;
}
.prize-result-popup.show{opacity:1; visibility:visible}
.prize-result-popup .result-content{
  background:var(--card-bg);
  border:3px solid var(--border-color);
  border-radius:22px; padding:28px; max-width:600px; width:min(600px, 92vw);
  text-align:center; box-shadow:0 30px 70px rgba(0,0,0,.6);
}

/* ===========================
   Form
   =========================== */
.form-section{display:flex; flex-direction:column}
.form-card{
  background:var(--card-bg);
  border:2px solid var(--border-color); border-radius:18px;
  padding:24px; box-shadow:0 18px 40px rgba(255,215,0,.15), 0 0 20px rgba(255,215,0,.08);
}
.form-card h2{
  margin:0 0 18px; text-align:center; font-size:2rem; font-weight:800;
  background:var(--primary-gradient);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.form-group{margin-bottom:18px}
.form-group label{display:block; margin:0 0 8px; font-weight:800; color:var(--text-secondary)}
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:14px 16px; font-size:1rem;
  background:rgba(0,0,0,.8); color:var(--text-primary);
  border:2px solid var(--border-color); border-radius:14px;
  transition:.2s; font-family:'Cairo','Tajawal',sans-serif;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(255,215,0,.25);
}
.form-group input[readonly]{opacity:.85}
.required{color:#ff6b6b; font-weight:900}

.spin-btn{
  width:100%; padding:16px 20px; font-weight:900; font-size:1.2rem;
  border:none; border-radius:14px; cursor:pointer; color:#000;
  background:var(--primary-gradient); box-shadow:0 10px 30px rgba(255,215,0,.35);
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:.2s;
}
.spin-btn:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(255,215,0,.5)}
.spin-btn:disabled{opacity:.6; cursor:not-allowed; transform:none}

/* ===========================
   خلفية رموز متحركة
   =========================== */
.arabic-animated-background{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bgfx-item{
  position: absolute;
  color: #ffd700;
  opacity: .22;
  filter: drop-shadow(0 0 10px rgba(255,215,0,.8));
  will-change: transform, opacity;
  user-select: none;
  pointer-events: none;
}
@keyframes bgfx-float-1{
  0%{transform:translate(var(--x0),var(--y0)) rotate(0deg) scale(var(--s,1));opacity:.10}
  25%{transform:translate(calc(var(--x0)+30px),calc(var(--y0)-40px)) rotate(-45deg) scale(var(--s,1));opacity:.28}
  50%{transform:translate(calc(var(--x0)-15vw),calc(var(--y0)-10vh)) rotate(-120deg) scale(var(--s,1.05));opacity:.18}
  75%{transform:translate(calc(var(--x0)+10vw),calc(var(--y0)-5vh)) rotate(-220deg) scale(var(--s,.95));opacity:.26}
  100%{transform:translate(calc(var(--x0)-5vw),calc(var(--y0)+10vh)) rotate(-360deg) scale(var(--s,1));opacity:.10}
}
@keyframes bgfx-float-2{
  0%{transform:translate(var(--x0),var(--y0)) rotate(0deg) scale(var(--s,1));opacity:.12}
  20%{transform:translate(calc(var(--x0)-25px),calc(var(--y0)-30px)) rotate(30deg) scale(var(--s,1.1));opacity:.25}
  55%{transform:translate(calc(var(--x0)+12vw),calc(var(--y0)-15vh)) rotate(140deg) scale(var(--s,.92));opacity:.18}
  85%{transform:translate(calc(var(--x0)-10vw),calc(var(--y0)+5vh)) rotate(280deg) scale(var(--s,1.05));opacity:.26}
  100%{transform:translate(calc(var(--x0)+5vw),calc(var(--y0)+12vh)) rotate(360deg) scale(var(--s,1));opacity:.12}
}
@keyframes bgfx-float-3{
  0%{transform:translate(var(--x0),var(--y0)) rotate(0deg) scale(var(--s,1));opacity:.14}
  30%{transform:translate(calc(var(--x0)+8vw),calc(var(--y0)-8vh)) rotate(-60deg) scale(var(--s,1.08));opacity:.27}
  60%{transform:translate(calc(var(--x0)-6vw),calc(var(--y0)-12vh)) rotate(-180deg) scale(var(--s,.9));opacity:.18}
  90%{transform:translate(calc(var(--x0)+4vw),calc(var(--y0)+6vh)) rotate(-320deg) scale(var(--s,1.03));opacity:.25}
  100%{transform:translate(calc(var(--x0)-2vw),calc(var(--y0)+10vh)) rotate(-360deg) scale(var(--s,1));opacity:.14}
}

/* أحجام مختلفة */
.bgfx-item[data-size="xs"]{ font-size: 18px; }
.bgfx-item[data-size="sm"]{ font-size: 24px; }
.bgfx-item[data-size="md"]{ font-size: 32px; }
.bgfx-item[data-size="lg"]{ font-size: 40px; }
.bgfx-item[data-size="xl"]{ font-size: 48px; }

@media (max-width: 600px){
  .bgfx-item{ opacity: .26; }
}