/* Start:/local/components/emi/wheel-promo/templates/.default/style.css?177141832012691*/
body {
  min-height: 100vh;
  background:
    /* linear-gradient(rgba(255, 255, 255, 0.45),
      rgba(255, 255, 255, 0.45)), */
    url("/upload/backgr/blurry-golden-glitter-.jpg") center / cover no-repeat;
  background-position: right center;

}

.btn_gold {
  width: 150px;
  height: 40px;
  border: none;
  border-radius: 40px;
  background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: rgb(121, 103, 3);
  font-weight: 600;
  position: relative;
  z-index: 2;
  transition-duration: 3s;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.144);
  background-size: 200% 200%;
  text-decoration: none;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  /*** full width block ***/
  /* width: 100%; */
}

.logoIcon path {
  fill: rgb(121, 103, 3);
}

.wheel_div {
  width: 900px;
  max-width: 80%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  margin: 50px auto;
  margin-top: 50px;
  padding: 30px 30px;
  gap: 40px;
}


.wheel_adv {
  display: flex;
  height: 100%;
  color: #111010;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  --gold1: #fff4cc;
  --gold2: #e3bf6b;
  --gold3: #b88a2d;

  max-width: 520px;
  margin: 0 auto 2.5rem;
  padding: 32px 26px 32px 22px;
  position: relative;

  border-radius: 22px;

  /* мягкий фон */
  background:
    radial-gradient(120% 120% at 50% 0%, #fffdf6 0%, #f8f4ea 45%, #f1eadc 100%);

  /* золотая рамка */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .7),
    inset 0 0 0 2px rgba(184, 138, 45, .35),
    0 12px 30px rgba(0, 0, 0, .08),
    0 4px 10px rgba(0, 0, 0, .06);
}

.wheel_adv .h2 {
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: .04em;

  background: linear-gradient(#fff6cf, #c49a3a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 1px 0 #fff,
    0 2px 8px rgba(184, 138, 45, .25);
}

@media (max-width: 900px) {
  .wheel_div {
    flex-wrap: wrap;
    justify-content: center
  }

  .wheel_adv {
    text-align: center;
    align-items: center
  }
}

.wheel_adv p {
  margin: 6px 0;
  font-size: 15px;
  line-height: 1.5;
  color: #5c5648;
}

.wheel_adv {
  animation: wheelFade .7s ease both;
}

@keyframes wheelFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wheel-cover {
  position: relative;
  /* display: inline-block;  */

  width: min(90vw, 500px);
  /* резиново */
  aspect-ratio: 1 / 1;
  max-width: 500px;

  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  /* чтобы ободок не выходил */
}

.wheel-cover button {
  width: 30%;
  background: radial-gradient(circle at 30% 30%, #f4dee2, #cbb8bbd9);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, .4);
  font-weight: 500;
  color: #af9059;

}

/* Золотой обод */

.wheel-cover::before {
  content: "";
  position: absolute;
  inset: -10%;
  /* чуть больше колеса */
  border-radius: 50%;
  z-index: 0;

  background:
    /* ЗОЛОТОЙ МЕТАЛЛ */
    /* conic-gradient(
      from -20deg,
      #fff6cf,
      #f3d98a,
      #c49a3a,
      #f7e7af,
      #b88a2d,
      #f9e9b5,
      #d4ac55,
      #fff6cf
    ); */
    repeating-radial-gradient(circle at center,
      #bf953f 0,
      #fcf6ba 10px,
      #b38728 10px,
      #fbf5b7 20px);

}

/* ВНУТРЕННЯЯ ФАСКА (вот что даёт дорогой вид) */
.wheel-cover::after {
  content: "";
  position: absolute;
  inset: -5%;
  border-radius: 50%;
  pointer-events: none;

  /* ОСВЕЩЕНИЕ (даёт рельеф) */
  background:
    repeating-radial-gradient(circle at center,
      #fdec94 0,
      #aa771c 10px,
      #b89f56 10px,
      #fff6cf 20px)
}


/* Само колесо */
.ui-wheel-of-fortune {
  width: 95%;
  height: 95%;
  position: relative;
  z-index: 2;
  /* выше всего */
  border-radius: 50%;
  overflow: hidden;
  margin: auto;
  top: 3%;
  box-shadow: inset 5em 1em rgb(0, 0, 0);
}

:where(.ui-wheel-of-fortune) ul {
  position: relative;
}

:where(.ui-wheel-of-fortune) ul::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  /* поверх секторов, под стрелкой */

  background: repeating-conic-gradient(from calc(-90deg - (180deg / var(--_items))),
      #FFF3C4 0deg,
      #E6C77B 0.6deg,
      #B8933E 1.2deg,
      transparent 1.2deg,
      transparent calc(360deg / var(--_items)));
}


img .img_rotate {
  transform: rotate(90deg);
}

.wheel-cover::marker {
  display: none;
}

.wheel-cover span.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(#fff, #c9972e);
  border-radius: 50%;
}

:where(.ui-wheel-of-fortune) {
  --brand-bg: #FDF4F5;
  --brand-accent: #000000;
  --brand-dark: #181616;
}

:where(.ui-wheel-of-fortune) {
  /* --_items: 12; */
  all: unset;
  aspect-ratio: 1/1;
  container-type: inline-size;
  direction: ltr;
  display: grid;
  position: relative;
  width: 100%;
}


:where(.ui-wheel-of-fortune) button {
  z-index: 6;
}

:where(.ui-wheel-of-fortune) ul {
  z-index: 1;
  background: conic-gradient(#E6C77B 0deg,
      #B8933E 2deg,
      transparent 2deg,
      transparent calc(360deg / var(--_items)));
}

.wheel-pointer {
  position: absolute;
  left: 50%;
  top: -2.6cqi;
  translate: -50% 0;

  width: 4.5em;
  aspect-ratio: 120/110;

  background: url("data:image/svg+xml,%3Csvg width='19' height='45' viewBox='0 0 19 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23paint0_angular_2634_32625_clip_path)' data-figma-skip-parse='true'%3E%3Cg transform='matrix(0 0.02125 -0.009 0 9.5 21.8086)'%3E%3CforeignObject x='-1111.11' y='-1111.11' width='2222.22' height='2222.22'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' style='background:conic-gradient(from 90deg,rgba(255, 222, 93, 1) 0deg,rgba(255, 247, 215, 1) 180deg,rgba(136, 108, 0, 1) 360deg);height:100%25;width:100%25;opacity:1'%3E%3C/div%3E%3C/foreignObject%3E%3C/g%3E%3C/g%3E%3Cpath d='M0.5 26.5589V10.0586L2.5 4.05859L9.5 0.558594L16.5 4.05859L18.5 10.0586V26.5589L9.5 43.0586L0.5 26.5589Z' data-figma-gradient-fill='%7B&%2334;type&%2334;:&%2334;GRADIENT_ANGULAR&%2334;,&%2334;stops&%2334;:%5B%7B&%2334;color&%2334;:%7B&%2334;r&%2334;:1.0,&%2334;g&%2334;:0.87307691574096680,&%2334;b&%2334;:0.36538460850715637,&%2334;a&%2334;:1.0%7D,&%2334;position&%2334;:0.0%7D,%7B&%2334;color&%2334;:%7B&%2334;r&%2334;:1.0,&%2334;g&%2334;:0.96923077106475830,&%2334;b&%2334;:0.84615385532379150,&%2334;a&%2334;:1.0%7D,&%2334;position&%2334;:0.50%7D,%7B&%2334;color&%2334;:%7B&%2334;r&%2334;:0.53365385532379150,&%2334;g&%2334;:0.42692306637763977,&%2334;b&%2334;:0.0,&%2334;a&%2334;:1.0%7D,&%2334;position&%2334;:1.0%7D%5D,&%2334;stopsVar&%2334;:%5B%7B&%2334;color&%2334;:%7B&%2334;r&%2334;:1.0,&%2334;g&%2334;:0.87307691574096680,&%2334;b&%2334;:0.36538460850715637,&%2334;a&%2334;:1.0%7D,&%2334;position&%2334;:0.0%7D,%7B&%2334;color&%2334;:%7B&%2334;r&%2334;:1.0,&%2334;g&%2334;:0.96923077106475830,&%2334;b&%2334;:0.84615385532379150,&%2334;a&%2334;:1.0%7D,&%2334;position&%2334;:0.50%7D,%7B&%2334;color&%2334;:%7B&%2334;r&%2334;:0.53365385532379150,&%2334;g&%2334;:0.42692306637763977,&%2334;b&%2334;:0.0,&%2334;a&%2334;:1.0%7D,&%2334;position&%2334;:1.0%7D%5D,&%2334;transform&%2334;:%7B&%2334;m00&%2334;:1.1021821408568715e-15,&%2334;m01&%2334;:-18.0,&%2334;m02&%2334;:18.50,&%2334;m10&%2334;:42.50,&%2334;m11&%2334;:2.6023744757166980e-15,&%2334;m12&%2334;:0.558593750%7D,&%2334;opacity&%2334;:1.0,&%2334;blendMode&%2334;:&%2334;NORMAL&%2334;,&%2334;visible&%2334;:true%7D' stroke='%239E8627'/%3E%3Cdefs%3E%3CclipPath id='paint0_angular_2634_32625_clip_path'%3E%3Cpath d='M0.5 26.5589V10.0586L2.5 4.05859L9.5 0.558594L16.5 4.05859L18.5 10.0586V26.5589L9.5 43.0586L0.5 26.5589Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center/contain no-repeat;

  z-index: 10;
  pointer-events: none;
}


:where(.ui-wheel-of-fortune)>* {
  position: absolute;
}

:where(.ui-wheel-of-fortune) button {
  aspect-ratio: 1/1;
  background: hsla(0, 0%, 100%, 0.8);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 5cqi;
  place-self: center;
  width: 20cqi;
}

:where(.ui-wheel-of-fortune) button {
  background: var(--brand-dark);
  color: var(--brand-bg);
  font-weight: 600;
  letter-spacing: 0.05em;
}

:where(.ui-wheel-of-fortune) ul {
  all: unset;
  clip-path: inset(0 0 0 0 round 50%);
  display: grid;
  inset: 0;
  place-content: center start;
}

:where(.ui-wheel-of-fortune) ul li {
  align-content: center;
  aspect-ratio: 1/calc(2 * tan(180deg / var(--_items)));
  /*background: hsl(calc(360deg / var(--_items) * calc(var(--_idx))), 100%, 75%);*/
  background: linear-gradient(180deg, #ffffff, #cdc7c8);
  color: var(--brand-bg);
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  display: grid;
  font-size: 2cqi;
  grid-area: 1/-1;
  padding-left: 1ch;
  rotate: calc(360deg / var(--_items) * (var(--_idx) - 1));
  transform-origin: center right;
  user-select: none;
  width: 50cqi;
  box-shadow: inset -5em 0em 8px 12px rgb(255 255 255);

}

/* for demo */
* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  padding: 5cqi;
}

/* четные --_idx */
:where(.ui-wheel-of-fortune) ul li:nth-child(2n) {
  background: radial-gradient(circle at 30% 30%,
      #ffffff,
      #F3ECE8);
}

img.img_rotate {
  width: 30%;
  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, .25));
  transform: rotate(90deg) scale(0.95);
}

/* нечетные --_idx */
:where(.ui-wheel-of-fortune) ul li:nth-child(2n+1) {
  background: radial-gradient(circle at 30% 30%,
      #F7E4E7,
      #EBCDD3);
}

.confetti {
  position: fixed;
  top: -10px;
  width: 10px;
  height: 14px;
  opacity: 0.9;
  animation: confetti-fall linear forwards;
  z-index: 9999;
}

@keyframes confetti-fall {
  to {
    transform: translateY(110vh) rotate(360deg);
  }
}


.gift-result {
  max-width: 520px;
  margin: 60px auto;
  text-align: center;

}



.gift-title {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 26px;
  line-height: 1.2;

  color: #342f26;
  text-shadow:
    0 2px 0 #e6b45c,
    0 4px 10px rgba(245, 195, 106, .35);
}


/* Плашка со скидкой */
.gift-badge {
  position: relative;
  display: inline-block;
  padding: 12px 36px;
  background: linear-gradient(135deg, #e53935, #ff6b6b);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(229, 57, 53, .35);
}

/* Левый хвост */
.gift-badge::before,
.gift-badge::after {
  content: "";
  position: absolute;
  top: 100%;
  border-top: 12px solid #c62828;
  border-bottom: 0 solid transparent;
}

/* левый */
.gift-badge::before {
  left: 0;
  border-left: 18px solid transparent;
}

/* правый */
.gift-badge::after {
  right: 0;
  border-right: 18px solid transparent;
}



.promo-label {
  display: block;
  font-size: 14px;
  letter-spacing: .08em;
  color: #2d2a2a;
  margin-bottom: 6px;
  margin-top: 15px;
}

.promo-code {
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #000000, #4d4d4d);
  border: 2px solid #ffb300;
  color: #ffffff;
}


/* Ссылка */
.gift-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #7c4dff;
  text-decoration: none;
}

.gift-link:hover {
  text-decoration: underline;
}

@media (max-width: 570px) {
  .gift-result {
    max-width: 80%;
    margin: 60px auto;
    text-align: center;

  }

  .wheel-cover {
    width: min(90vw, 400px);
    /* резиново */
    aspect-ratio: 1 / 1;
    max-width: 400px;

    margin: auto;
    border-radius: 50%;
    overflow: hidden;
    /* чтобы ободок не выходил */
  }
}
/* End */
/* /local/components/emi/wheel-promo/templates/.default/style.css?177141832012691 */