.elwan-spin {
  width: min(92vw, 560px);
  max-width: 560px;
  box-sizing: border-box;
  position: relative;
  padding: 28px 28px 24px;
  border: 2px solid #efd1b6;
  border-radius: 28px;
  color: #082d50;
  background: linear-gradient(145deg, #fffdf9, #fff5e8);
  box-shadow: 0 24px 70px rgba(3, 27, 48, 0.42);
  font-family: Cairo, Arial, sans-serif;
}
.elwan-spin::backdrop {
  background: rgba(4, 27, 47, 0.82);
  backdrop-filter: blur(2px);
}
.elwan-spin h2 {
  margin: 0 58px 14px;
  text-align: center;
  color: #082d50;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 800;
}
.elwan-spin-close {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 9px;
  background: #064b78;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
}
.elwan-spin-close:hover {
  background: #08395b;
}
.elwan-spin-wheel-wrap {
  position: relative;
  width: min(76vw, 390px);
  aspect-ratio: 1;
  margin: 0 auto 14px;
  padding-top: 9px;
}
.elwan-spin-pointer {
  border-right: 20px solid #fff0;
  border-top: 46px solid #ff7600;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  width: 42px;
  height: 52px;
  transform: translateX(-50%);
  border: none;
  background: linear-gradient(
    110deg,
    #ffb13b 0%,
    #ff8500 38%,
    #f46b00 72%,
    #d94b00 100%
  );
  clip-path: polygon(0 0, 100% 0, 88% 65%, 50% 100%, 12% 65%);
  filter: drop-shadow(0 3px 1px #9e3900)
    drop-shadow(0 5px 3px rgba(75, 30, 0, 0.55))
    drop-shadow(0 8px 5px rgba(0, 0, 0, 0.25));
  box-shadow:
    0 16px 24px rgba(0, 0, 0, 0.14),
    0 20px 31px rgba(0, 0, 0, 0.12);
}
.elwan-spin-wheel {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  overflow: visible;
  transform: rotate(0deg);
  transition: transform 12.4s cubic-bezier(0.12, 0.7, 0.12, 1);
  box-shadow:
    0 13px 19px rgba(0, 0, 0, 0.28),
    inset 0 0 0 4px #fff0dc;
}
.elwan-spin-wheel::before {
  content: "";
  position: absolute;
  inset: -15px;
  border: 8px solid #f6d2b6;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 5px #b98669,
    0 0 0 #a66b47,
    0 12px 20px rgb(0 0 0 / 0.22);
  background: linear-gradient(145deg, #ffe5d1, #c09070);
  z-index: -1;
}
.elwan-spin-wheel-face {
  position: absolute;
  inset: 0;
  border: 5px solid #fff6ec;
  border-radius: 50%;
  overflow: hidden;
  background: #08355d;
}
.elwan-spin-wheel-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 28% 20%,
    rgba(255, 255, 255, 0.24),
    transparent 28%
  );
  pointer-events: none;
}
.elwan-spin-wheel > span {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 43%;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform-origin: 0 50%;
  transform: rotate(calc((var(--i) + 0.5) * 1turn / var(--n))) translateX(52%)
    translateY(-50%) rotate(90deg);
  color: #fff;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 800;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  word-break: break-word;
}
.elwan-spin-wheel > span[data-prize-type]::before {
  display: block;
  margin-inline-end: 5px;
  font-size: 19px;
  line-height: 1;
  text-shadow: none;
}
.elwan-spin-wheel span[data-prize-type="free_shipping"]::before {
  content: "ًںڑڑ";
}
.elwan-spin-wheel span[data-prize-type="gift"]::before {
  content: "ًںژپ";
}
.elwan-spin-wheel span[data-prize-type="golden_ticket"]::before {
  content: "ًںژںï¸ڈ";
}
.elwan-spin-wheel span[data-prize-type="double_points"]::before {
  content: "â­گ";
}
.elwan-spin-wheel-rim {
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  pointer-events: none;
}
.elwan-spin-wheel-hub {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 85px;
  height: 85px;
  transform: translate(-50%, -50%);
  border: 7px solid #f7d7bf;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff0df, #ce9470);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.27);
}
.elwan-spin-wheel-hub img {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 50%;
}
.elwan-spin-button,
.elwan-spin-form button,
.elwan-spin-details,
.elwan-spin-copy-code {
  display: block;
  margin: 10px auto 0;
  padding: 11px 24px;
  border: 0;
  border-radius: 6px;
  background: #064b78;
  color: #fff;
  font:
    700 15px/1.2 Cairo,
    Arial,
    sans-serif;
  cursor: pointer;
}
.elwan-spin-button:hover,
.elwan-spin-form button:hover,
.elwan-spin-details:hover,
.elwan-spin-copy-code:hover {
  background: #08395b;
}
.elwan-spin-button:disabled {
  opacity: 0.58;
  cursor: wait;
}
.elwan-spin-form {
  display: grid;
  gap: 9px;
  margin: 0 auto 10px;
  max-width: 380px;
}
.elwan-spin-form label {
  display: grid;
  gap: 4px;
  font-weight: 700;
}
.elwan-spin-form input {
  padding: 10px;
  border: 1px solid #cad6df;
  border-radius: 7px;
  font: inherit;
}
.elwan-spin-result {
  min-height: 0;
  display: grid;
  place-items: center;
  gap: 9px;
  margin: 10px auto 0;
  text-align: center;
  color: #064b78;
  font-weight: 700;
}
.elwan-spin-result p {
  margin: 0;
}
.elwan-spin-result .elwan-spin-prize-name {
  font-size: 18px;
  color: #082d50;
}
.elwan-spin [hidden] {
  display: none !important;
}
.elwan-spin-gift-card {
  width: min(100%, 300px);
  margin: 2px auto;
  border: 1px solid #e7d2bc;
  border-radius: 14px;
  overflow: hidden;
  background: #fffaf3;
}
.elwan-spin-gift-image-wrap {
  position: relative;
  min-height: 220px;
  background: #fff;
}
.elwan-spin-gift-image {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
}
.elwan-spin-gift-scratch {
  position: absolute;
  inset: 0;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
.elwan-spin-gift-name {
  padding: 12px 14px;
  color: #082d50;
  font-weight: 800;
  line-height: 1.45;
}
.elwan-spin-celebration {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.elwan-spin-celebration i {
  position: absolute;
  top: -28px;
  display: block;
  width: 12px;
  height: 18px;
  border-radius: 2px;
  background: #ff7600;
  animation: elwan-spin-fall linear infinite;
}
.elwan-spin-celebration i:nth-child(3n) {
  background: #f5c45d;
}
.elwan-spin-celebration i:nth-child(3n + 1) {
  background: #0a4c78;
}
.elwan-spin-celebration i:nth-child(4n) {
  width: 8px;
  height: 14px;
  border-radius: 50%;
}
@keyframes elwan-spin-fall {
  to {
    transform: translate3d(var(--drift, 0), 110vh, 0) rotate(680deg);
  }
}
.elwan-spin > :not(.elwan-spin-celebration) {
  position: relative;
  z-index: 1;
}
@media (max-width: 480px) {
  .elwan-spin {
    padding: 22px 16px 20px;
    border-radius: 22px;
  }
  .elwan-spin h2 {
    font-size: 26px;
    margin-inline: 50px;
  }
  .elwan-spin-wheel-wrap {
    width: min(84vw, 350px);
  }
  .elwan-spin-wheel > span {
    font-size: 11px;
  }
  .elwan-spin-wheel-hub {
    width: 70px;
    height: 70px;
  }
  .elwan-spin-wheel-hub img {
    width: 49px;
    height: 49px;
  }
  .elwan-spin-close {
    width: 46px;
    height: 46px;
  }
}
/* Every prize title has an independent position in the centre of its wedge. */
.elwan-spin-wheel > span {
  position: absolute !important;
  z-index: 1;
  left: var(--x) !important;
  top: var(--y) !important;
  display: block !important;
  width: 32% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center !important;
  text-align: center !important;
  color: var(--label-color) !important;
  font-size: clamp(11px, 2.2vw, 15px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.38) !important;
}
.elwan-spin-wheel > span[data-prize-type]::before {
  content: none !important;
  display: none !important;
}
.elwan-spin-celebration i {
  left: var(--x);
  animation-duration: var(--duration);
  animation-delay: var(--delay);
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.elwan-spin-celebration i::before,
.elwan-spin-celebration i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: inherit;
}
.elwan-spin-celebration i::after {
  transform: rotate(45deg) scale(0.72);
  background: #f6d063;
}
@media (max-width: 480px) {
  .elwan-spin-wheel > span {
    width: 34% !important;
    font-size: 11px !important;
  }
}

/* Compact vector icons identify each reward without changing the approved wheel layout. */
.elwan-spin-wheel > .elwan-spin-wheel__segment {
  display: grid !important;
  place-items: center !important;
  gap: 3px !important;
}
.elwan-spin-wheel__segment-icon {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  color: currentColor;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}
.elwan-spin-wheel__segment-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.elwan-spin-wheel__segment-label {
  display: block;
  max-width: 100%;
}
@media (max-width: 480px) {
  .elwan-spin-wheel__segment-icon {
    width: 19px;
    height: 19px;
  }
}
/* Reward icons must not take space from prize titles. */
.elwan-spin-wheel > .elwan-spin-wheel__segment {
  display: block !important;
  width: 34% !important;
  min-height: 0 !important;
  font-size: clamp(12px, 2.35vw, 15px) !important;
  line-height: 1.15 !important;
}
.elwan-spin-wheel > .elwan-spin-wheel__segment .elwan-spin-wheel__segment-icon {
  position: absolute !important;
  inset-inline-start: 50% !important;
  inset-block-start: -18px !important;
  display: grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}
.elwan-spin-wheel
  > .elwan-spin-wheel__segment
  .elwan-spin-wheel__segment-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
@media (max-width: 480px) {
  .elwan-spin-wheel > .elwan-spin-wheel__segment {
    font-size: 12px !important;
  }
  .elwan-spin-wheel
    > .elwan-spin-wheel__segment
    .elwan-spin-wheel__segment-icon {
    width: 14px !important;
    height: 14px !important;
    inset-block-start: -16px !important;
  }
}

/* Restore the proven text-only wheel labels. Icons are intentionally disabled. */
.elwan-spin-wheel > .elwan-spin-wheel__segment {
  display: block !important;
  width: 32% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(11px, 2.2vw, 15px) !important;
  line-height: 1.18 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Prize titles follow the radius of their own sector for the available long space. */
.elwan-spin-wheel > .elwan-spin-wheel__segment {
  width: 39% !important;
  transform: translate(-50%, -50%) rotate(var(--label-rotation, 0deg)) !important;
  transform-origin: center !important;
  font-size: clamp(10px, 2vw, 14px) !important;
  line-height: 1.12 !important;
}
@media (max-width: 480px) {
  .elwan-spin-wheel > .elwan-spin-wheel__segment {
    width: 40% !important;
    font-size: 10px !important;
  }
}

/* Keep a prize result as tall as the wheel view and display the current header logo. */
.elwan-spin-result-logo {
  display: block;
  width: min(220px, 64%);
  max-height: 76px;
  height: auto;
  object-fit: contain;
  margin: 0 auto 18px;
}
@media (max-width: 480px) {
  .elwan-spin.is-result {
    min-height: 500px;
  }
  .elwan-spin-result-logo {
    max-height: 58px;
    margin-bottom: 14px;
  }
}

/* Refined prize-result view: use the full wheel-panel height and the active site logo. */
.elwan-spin.is-result {
  width: min(92vw, 560px);
  min-height: 560px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(
      circle at 6% 4%,
      rgba(255, 255, 255, 0.92),
      transparent 32%
    ),
    linear-gradient(145deg, #fffdf9 0%, #fff7ee 65%, #f7e9da 100%);
}
.elwan-spin.is-result h2 {
  margin: 0 72px 16px;
  color: #073f67;
  font-size: clamp(29px, 4vw, 36px);
}

.elwan-spin.is-result .elwan-spin-result::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 164, 93, 0.42);
  border-radius: 15px;
  pointer-events: none;
}
.elwan-spin.is-result .elwan-spin-result-logo {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-start: 24px;
  z-index: 1;
  display: block;
  width: auto;
  max-width: min(155px, 44%);
  max-height: 55px;
  height: auto;
  margin: 0;
  object-fit: contain;
}

.elwan-spin.is-result .elwan-spin-result p {
  max-width: 100%;
  margin: 0;
  line-height: 1.7;
}
.elwan-spin.is-result .elwan-spin-result p:first-of-type {
  color: #073f67;
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 800;
}
.elwan-spin.is-result .elwan-spin-copy-code {
  margin-top: 5px;
  padding: 11px 22px;
  border-radius: 8px;
  background: #064b78;
  box-shadow: 0 7px 15px rgba(6, 75, 120, 0.2);
}
@media (max-width: 480px) {
  .elwan-spin.is-result {
    min-height: 500px;
    padding: 22px 16px;
  }
  .elwan-spin.is-result h2 {
    margin: 0 62px 13px;
  }
  .elwan-spin.is-result .elwan-spin-result {
    min-height: 360px;
    padding: 82px 20px 26px;
  }
  .elwan-spin.is-result .elwan-spin-result-logo {
    inset-block-start: 20px;
    inset-inline-start: 20px;
    max-width: 138px;
    max-height: 48px;
  }
}

/* Winner result: keep the logo as a small dialog-corner mark, outside the result content. */
.elwan-spin.is-result {
  position: relative !important;
  width: min(92vw, 560px) !important;
  min-height: 420px !important;
  padding: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(145deg, #fffdf9 0%, #fff7ec 100%) !important;
  border: 1px solid #e9c2a0 !important;
  border-radius: 28px !important;
  box-shadow: 0 28px 64px rgba(5, 37, 63, 0.28) !important;
}
.elwan-spin.is-result h2 {
  position: relative !important;
  z-index: 1 !important;
  min-height: 60px !important;
  margin: 0 76px 6px !important;
  color: #063e68 !important;
}
.elwan-spin.is-result .elwan-spin-result {
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 300px !important;
  margin: 0 !important;
  padding: 20px 24px 38px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.elwan-spin.is-result .elwan-spin-result::before {
  display: none !important;
}
.elwan-spin.is-result .elwan-spin-result-logo {
  position: static !important;
  z-index: 1 !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 178px !important;
  max-height: 62px !important;
  height: auto !important;
  margin: 0 0 18px !important;
  object-fit: contain !important;
}
@media (max-width: 480px) {
  .elwan-spin.is-result {
    min-height: 500px !important;
    padding: 22px !important;
    border-radius: 22px !important;
  }
  .elwan-spin.is-result h2 {
    min-height: 48px !important;
    margin-inline: 62px !important;
    font-size: 27px !important;
  }
  .elwan-spin.is-result .elwan-spin-result {
    min-height: 350px !important;
    padding: 18px 16px 28px !important;
  }
  .elwan-spin.is-result .elwan-spin-result-logo {
    max-width: 136px !important;
    max-height: 50px !important;
    margin-bottom: 14px !important;
  }
}

/* Phone entry for the staging WhatsApp wheel. */
.elwan-spin-whatsapp { border: 0; margin: 16px 0; padding: 0; display: grid; gap: 10px; text-align: start; }
.elwan-spin-whatsapp[hidden] { display: none; }
.elwan-spin-whatsapp label { display: block; font-size: 15px; line-height: 1.6; }
.elwan-spin-whatsapp input[type="tel"] { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid #bc926f; border-radius: 8px; background: #fff; color: #082c50; font-size: 18px; }
.elwan-spin-whatsapp input[type="checkbox"] { width: 18px; height: 18px; vertical-align: middle; margin-inline-end: 6px; }
.elwan-spin-whatsapp small { font-size: 12px; line-height: 1.6; }

/* Winner hierarchy: logo, congratulations, reward, coupon and copy button. */
.elwan-spin.is-result > .elwan-spin-result-logo {
  align-self: center !important;
  margin: 0 0 20px !important;
}
.elwan-spin.is-result > #elwan-spin-title {
  min-height: 0 !important;
  margin: 0 48px 18px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
.elwan-spin.is-result .elwan-spin-result {
  min-height: 0 !important;
  padding: 8px 16px 20px !important;
}
.elwan-spin-result bdi { display: inline-block; }
@media (max-width: 480px) {
  .elwan-spin.is-result > .elwan-spin-result-logo { margin-bottom: 16px !important; }
  .elwan-spin.is-result > #elwan-spin-title { margin: 0 38px 14px !important; }
}