.elementor-4067 .elementor-element.elementor-element-f6d3670{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-4067 .elementor-element.elementor-element-f6d3670{--content-width:100%;}}/* Start custom CSS for html, class: .elementor-element-7d3720e *//* ===== Bimeh Bazar — Lucky Spin Wheel ===== */
/* Paste this inside the Elementor HTML widget's <style> tag,
   or into the page's Custom CSS. Requires Vazirmatn font (see note at bottom). */

.bb-ls-root{
  --bg-0:#08080a;
  --charcoal:#1c1c1f;
  --gold:#F2BF17;
  --gold-deep:#c99a0c;
  --gold-soft:#f7d65a;
  --ivory:#f7f2e3;
  --ivory-dim:#c9c4b4;
  --ring:0 0 0 3px rgba(242,191,23,.45);

  font-family:'Vazirmatn', sans-serif;
  color:var(--ivory);
  direction:rtl;
  min-height:100vh;
  background:
    radial-gradient(120% 90% at 50% -10%, #201a06 0%, transparent 55%),
    radial-gradient(140% 100% at 50% 115%, #1a1408 0%, transparent 50%),
    var(--bg-0);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px 40px;
  box-sizing:border-box;
}
.bb-ls-root *{box-sizing:border-box;}

.bb-ls-page{
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}

/* ---- brand bar ---- */
.bb-ls-brandbar{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:15px;
  letter-spacing:.2px;
  color:var(--gold);
  opacity:.92;
}
.bb-ls-brandbar .bb-ls-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
}

/* ---- headline ---- */
.bb-ls-headline{text-align:center;}
.bb-ls-headline h1{
  margin:0 0 6px;
  font-size:26px;
  font-weight:900;
  line-height:1.35;
  background:linear-gradient(180deg,#fff6d8, var(--gold) 65%, var(--gold-deep));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.bb-ls-headline p{
  margin:0;
  font-size:14px;
  color:var(--ivory-dim);
  font-weight:500;
  line-height:1.7;
}

/* ---- generic helper ---- */
.bb-ls-hidden{display:none !important;}

/* ---- gate (checking / error) ---- */
.bb-ls-gate{
  width:100%;
  text-align:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(242,191,23,.22);
  border-radius:16px;
  padding:28px 18px;
}
.bb-ls-gate-status{
  font-size:14.5px;
  font-weight:700;
  color:var(--ivory-dim);
}
.bb-ls-gate-status.bb-ls-error{color:#ff8a7a;}
.bb-ls-gate-status.bb-ls-ok{color:var(--gold-soft);}

/* ---- registration form (shown when ID not found) ---- */
.bb-ls-register{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(242,191,23,.22);
  border-radius:16px;
  padding:18px 16px;
}
.bb-ls-gate-label{
  font-size:13.5px;
  font-weight:700;
  color:var(--ivory-dim);
  text-align:center;
}
.bb-ls-gate-row{
  display:flex;
  gap:8px;
  width:100%;
}
.bb-ls-gate-input{
  flex:1;
  min-width:0;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  color:var(--ivory);
  background:var(--charcoal);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:11px 14px;
  text-align:center;
  direction:ltr;
}
.bb-ls-gate-input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:var(--ring);
}
.bb-ls-gate-btn{
  appearance:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:800;
  font-size:14.5px;
  color:#181104;
  padding:0 20px;
  border-radius:10px;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold) 60%, var(--gold-deep));
  transition:filter .15s ease;
}
.bb-ls-gate-btn:hover{filter:brightness(1.05);}
.bb-ls-gate-btn:disabled{filter:grayscale(.4) brightness(.75); cursor:not-allowed;}

/* ---- wheel stage ---- */
.bb-ls-stage{
  position:relative;
  width:min(86vw, 320px);
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .3s ease, filter .3s ease;
}
.bb-ls-stage.bb-ls-locked{
  opacity:.45;
  filter:grayscale(.5);
  pointer-events:none;
}

.bb-ls-glow{
  position:absolute;
  inset:-18%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(242,191,23,.30), rgba(242,191,23,0) 72%);
  filter:blur(2px);
  animation:bb-ls-breathe 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes bb-ls-breathe{
  0%,100%{opacity:.55; transform:scale(1);}
  50%{opacity:.95; transform:scale(1.045);}
}
.bb-ls-stage.bb-ls-spinning .bb-ls-glow{animation:none; opacity:.9;}
.bb-ls-stage.bb-ls-landed .bb-ls-glow{animation:bb-ls-pulseWin 1.1s ease-out 1;}
@keyframes bb-ls-pulseWin{
  0%{opacity:1; transform:scale(1.12);}
  100%{opacity:.55; transform:scale(1);}
}

.bb-ls-pointer{
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));
  transition:transform .18s cubic-bezier(.36,1.6,.6,1);
}
.bb-ls-stage.bb-ls-tick .bb-ls-pointer{transform:translateX(-50%) rotate(-8deg);}

.bb-ls-wheel-wrap{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  padding:9px;
  background:
    conic-gradient(from 0deg, var(--gold-soft), var(--gold) 8%, var(--gold-deep) 16%, var(--gold) 24%, var(--gold-soft) 32%, var(--gold) 40%, var(--gold-deep) 48%, var(--gold) 56%, var(--gold-soft) 64%, var(--gold) 72%, var(--gold-deep) 80%, var(--gold) 88%, var(--gold-soft) 100%);
  box-shadow:
    0 18px 40px -12px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.15);
}

.bb-ls-wheel{
  width:100%;
  height:100%;
  border-radius:50%;
  display:block;
  background:var(--charcoal);
  transform:rotate(0deg);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.5);
}

.bb-ls-hub{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:23%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold) 45%, var(--gold-deep) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 6px 14px rgba(0,0,0,.55),
    inset 0 0 0 2px rgba(255,255,255,.35),
    inset 0 -4px 8px rgba(0,0,0,.25);
  z-index:4;
}
.bb-ls-hub span{
  font-size:11.5px;
  font-weight:900;
  color:#1b1200;
  text-align:center;
  line-height:1.15;
}

/* ---- CTA ---- */
.bb-ls-spin-btn{
  appearance:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:800;
  font-size:17px;
  color:#181104;
  padding:15px 42px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  box-shadow:0 10px 24px -8px rgba(242,191,23,.55), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.bb-ls-spin-btn:hover{transform:translateY(-1px);}
.bb-ls-spin-btn:active{transform:translateY(1px) scale(.99);}
.bb-ls-spin-btn:focus-visible{outline:none; box-shadow:var(--ring), 0 10px 24px -8px rgba(242,191,23,.55);}
.bb-ls-spin-btn:disabled{
  filter:grayscale(.35) brightness(.75);
  cursor:not-allowed;
  transform:none;
}

.bb-ls-chances{
  font-size:13px;
  font-weight:600;
  color:var(--ivory-dim);
}
.bb-ls-chances b{color:var(--gold); font-weight:800;}

/* ---- result (temporary placeholder — replace with popup logic next phase) ---- */
.bb-ls-result{
  min-height:20px;
  text-align:center;
  font-size:14.5px;
  font-weight:700;
  color:var(--gold-soft);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease;
}
.bb-ls-result.bb-ls-show{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .bb-ls-glow{animation:none;}
  .bb-ls-pointer{transition:none;}
}

/* NOTE: add this once in your theme header / Elementor custom fonts, not per-widget:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700;800;900&display=swap" rel="stylesheet">
*//* End custom CSS */