/* ============================================================
   عجلة الحظ — Cairo Limo Wheel  |  wheel.css  v1.0
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
#clw-root {
  --gold:      #C8722A;
  --gold-lite: #E8903A;
  --gold-pale: #F5DEB3;
  --gold-dim:  #7a4a1a;
  --bg0:       #0a0602;
  --bg1:       #140a04;
  --bg2:       #1e1008;
  --bg3:       #2a1608;
  --border:    #3e2008;
  --txt:       #F5DEB3;
  --muted:     #8a6040;
  --font:      'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --z:         999999;
}

/* ── Floating tab (trigger) ─────────────────────────────────── */
#clw-tab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-100%);
  z-index: var(--z);
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--gold);
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 900;
  padding: 14px 16px 14px 20px;
  border-radius: 0 12px 12px 0;
  cursor: pointer;
  border: none;
  outline: none;
  box-shadow: 3px 0 20px rgba(200,114,42,.45);
  transition: background .25s, box-shadow .25s, transform .4s cubic-bezier(.16,1,.3,1);
  writing-mode: initial;
  white-space: nowrap;
  user-select: none;
}

#clw-tab.clw-visible {
  transform: translateY(-50%) translateX(0);
}

#clw-tab:hover {
  background: var(--gold-lite);
  box-shadow: 4px 0 28px rgba(200,114,42,.6);
}

#clw-tab .clw-tab-icon {
  font-size: 20px;
  line-height: 1;
  animation: clwSpin 8s linear infinite;
  display: inline-block;
}
@keyframes clwSpin {
  0%   { transform: rotate(0deg);  }
  15%  { transform: rotate(20deg); }
  30%  { transform: rotate(0deg);  }
  100% { transform: rotate(0deg);  }
}

#clw-tab .clw-tab-pulse {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: clwPulseRing 1.8s ease-in-out infinite;
}
@keyframes clwPulseRing {
  0%,100% { transform: scale(1);   opacity: 1;   box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
  50%      { transform: scale(1.4); opacity: .7;  box-shadow: 0 0 0 5px rgba(255,255,255,0); }
}

/* ── Overlay backdrop ───────────────────────────────────────── */
#clw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  z-index: calc(var(--z) + 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
#clw-overlay.clw-open {
  opacity: 1;
  visibility: visible;
}

/* ── Popup panel ────────────────────────────────────────────── */
#clw-popup {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-110%);
  z-index: calc(var(--z) + 2);
  width: clamp(300px, 92vw, 400px);
  max-height: 95vh;
  overflow-y: auto;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 0 20px 20px 0;
  padding: clamp(20px,5vw,32px) clamp(18px,4vw,28px);
  font-family: var(--font);
  direction: rtl;
  text-align: center;
  box-shadow: 6px 0 60px rgba(0,0,0,.6), 0 0 80px rgba(200,114,42,.08);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#clw-popup::-webkit-scrollbar { width: 4px; }
#clw-popup::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

#clw-popup.clw-open {
  transform: translateY(-50%) translateX(0);
}

/* gold top line */
#clw-popup::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold-lite) 60%, transparent);
  animation: clwSweep 4s ease-in-out infinite;
  border-radius: 0 20px 0 0;
}
@keyframes clwSweep {
  0%,100% { opacity:.4; transform:scaleX(.6); }
  50%      { opacity:1;  transform:scaleX(1);  }
}

/* corner ornaments */
#clw-popup .clw-corner {
  position: absolute;
  width: 24px; height: 24px;
  border-color: var(--gold);
  border-style: solid;
  opacity: .35;
}
#clw-popup .clw-c-tr { top:12px; left:12px; border-width:1px 1px 0 0; border-radius:0 4px 0 0; }
#clw-popup .clw-c-bl { bottom:12px; right:12px; border-width:0 0 1px 1px; border-radius:0 0 0 4px; }

/* close button */
#clw-close {
  position: absolute;
  top: 12px; left: 12px;
  width: 30px; height: 30px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, color .2s;
  font-family: monospace;
  z-index: 2;
}
#clw-close:hover { background: var(--border); color: var(--txt); }

/* ── Widget internals ───────────────────────────────────────── */
.clw-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-lite);
  padding: 4px 14px;
  margin-bottom: 8px;
}
.clw-badge::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
  animation: clwPulseRing 1.6s ease-in-out infinite;
}

.clw-title {
  font-size: clamp(18px,5vw,22px);
  font-weight: 900;
  color: var(--txt);
  margin-bottom: 3px;
}
.clw-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
}

.clw-divider {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.clw-divider::before, .clw-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.clw-divider span { color: var(--gold); font-size: 12px; }

/* wheel area */
.clw-wheel-area {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.clw-wheel-wrap { position: relative; display: inline-block; }

.clw-ring1 {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--gold); border-bottom-color: var(--gold-lite);
  animation: clwRotate 3s linear infinite; opacity: .5;
}
.clw-ring2 {
  position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid transparent;
  border-left-color: var(--gold-dim); border-right-color: var(--gold-dim);
  animation: clwRotate 5s linear infinite reverse; opacity: .25;
}
@keyframes clwRotate { to { transform: rotate(360deg); } }

.clw-needle {
  position: absolute; top: -7px; left: 50%;
  transform: translateX(-50%); z-index: 10;
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 28px solid var(--gold);
  filter: drop-shadow(0 0 6px rgba(200,114,42,.8));
}
.clw-glow {
  position: absolute; inset: -20px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,114,42,.12) 0%, transparent 70%);
  animation: clwGlow 2.5s ease-in-out infinite; pointer-events: none;
}
@keyframes clwGlow {
  0%,100%{ transform:scale(1); opacity:.7; }
  50%{ transform:scale(1.1); opacity:1; }
}
.clw-ring-outer {
  border: 3px solid var(--border); border-radius: 50%;
  padding: 5px; background: var(--bg0); display: inline-block;
}
#clw-canvas {
  display: block; border-radius: 50%;
  transition: filter .3s;
}
#clw-canvas.clw-spinning {
  filter: drop-shadow(0 0 12px rgba(200,114,42,.5));
}

/* spin button */
#clw-spin-btn {
  position: relative; overflow: hidden;
  display: block; width: 100%; max-width: 260px;
  margin: 0 auto;
  padding: clamp(12px,3vw,15px) 20px;
  background: var(--gold); color: #fff;
  border: none; border-radius: 11px;
  font-family: var(--font);
  font-size: clamp(15px,4vw,18px);
  font-weight: 900; cursor: pointer;
  transition: background .25s, transform .15s;
  animation: clwBtnPulse 2.5s 1.5s ease-in-out infinite;
  letter-spacing: .03em;
}
@keyframes clwBtnPulse {
  0%,100%{ box-shadow:0 0 0 0 rgba(200,114,42,.5); }
  50%{ box-shadow:0 0 0 10px rgba(200,114,42,0); }
}
#clw-spin-btn::after {
  content: ''; position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg);
  animation: clwShimmer 3s 1.5s ease-in-out infinite;
}
@keyframes clwShimmer { 0%,100%{left:-80%} 50%{left:160%} }
#clw-spin-btn:hover:not(:disabled) { background: var(--gold-lite); transform: translateY(-2px); }
#clw-spin-btn:disabled { background: var(--bg3); color: var(--gold-dim); cursor:not-allowed; animation:none; }

/* confetti */
.clw-conf-zone { position: relative; height: 0; overflow: visible; pointer-events: none; }
.clw-cp {
  position: absolute; opacity: 0;
  animation: clwCpFall 1.5s ease-out forwards;
}
@keyframes clwCpFall {
  0%  { opacity:1; transform:translateY(0) rotate(0deg) scale(1); }
  100%{ opacity:0; transform:translateY(110px) rotate(540deg) scale(.3); }
}

/* result card */
#clw-result {
  margin-top: 20px;
  background: var(--bg2);
  border: 1px solid var(--gold);
  border-radius: 15px;
  padding: 20px 16px;
  position: relative; overflow: hidden;
  animation: clwPop .6s cubic-bezier(.175,.885,.32,1.275) both;
}
#clw-result::before {
  content: ''; position: absolute; top: 0; left: -100%; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-lite), transparent);
  animation: clwResSweep 2.5s ease-in-out infinite;
}
@keyframes clwResSweep { 0%{left:-100%} 100%{left:200%} }
@keyframes clwPop {
  0%{ opacity:0; transform:scale(.82) translateY(18px); }
  60%{ transform:scale(1.03); }
  100%{ opacity:1; transform:none; }
}

.clw-stars { display:flex; justify-content:center; gap:4px; margin-bottom:8px; }
.clw-star {
  width: 14px; height: 14px; background: var(--gold);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation: clwStarPop .5s cubic-bezier(.175,.885,.32,1.275) both;
}
.clw-star:nth-child(1){animation-delay:.05s}
.clw-star:nth-child(2){animation-delay:.15s}
.clw-star:nth-child(3){animation-delay:.25s}
.clw-star:nth-child(4){animation-delay:.35s}
.clw-star:nth-child(5){animation-delay:.45s}
@keyframes clwStarPop { from{transform:scale(0) rotate(-30deg);opacity:0} to{transform:none;opacity:1} }

.clw-res-lbl { font-size:11px; color:var(--muted); margin-bottom:3px; }
#clw-res-pct {
  font-size: clamp(48px,13vw,62px); font-weight:900;
  color: var(--gold-lite); line-height:1;
  animation: clwNumBounce .7s .3s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes clwNumBounce { from{transform:scale(.5);opacity:0} to{transform:none;opacity:1} }
#clw-res-unit { font-size:13px; font-weight:700; color:var(--txt); margin-bottom:14px; }

.clw-code-box {
  background: var(--bg1); border: 1px dashed var(--gold-dim);
  border-radius: 10px; padding: 9px 14px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.clw-code-lbl { font-size:10px; color:var(--muted); font-weight:600; }
#clw-res-code { font-size: clamp(16px,5vw,20px); font-weight:900; color:var(--txt); letter-spacing:.18em; }

.clw-btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width:100%; padding: clamp(11px,3vw,14px);
  background: var(--gold); color: #fff;
  border: none; border-radius: 10px;
  font-family: var(--font); font-size: clamp(13px,3.5vw,14px); font-weight:700;
  text-decoration: none; cursor: pointer;
  transition: background .2s, transform .15s;
  margin-bottom: 8px;
}
.clw-btn-wa:hover { background: var(--gold-lite); transform: translateY(-1px); }
.clw-btn-wa svg { width:16px; height:16px; fill:#fff; flex-shrink:0; }

.clw-btn-call {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width:100%; padding: clamp(9px,2.5vw,11px);
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 10px;
  font-family: var(--font); font-size: clamp(11px,3vw,12px);
  text-decoration: none; transition: border-color .2s, color .2s;
}
.clw-btn-call:hover { border-color: var(--gold-dim); color: var(--txt); }
.clw-btn-call svg { width:12px; height:12px; fill:currentColor; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 420px) {
  #clw-popup { border-radius: 0 16px 16px 0; }
  .clw-ring1, .clw-ring2 { display: none; }
}