/* ============================================================
   Wheel of Fortune widget — self-contained.
   Loads only when JS injects the markup (after window load).
   ============================================================ */
.wheel-trigger {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 84px;
  height: 84px;
  z-index: 9998;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 50%;
  animation: wheel-bounce 2.4s ease-in-out infinite;
}
.wheel-trigger img { width: 70px; height: 70px; display: block; }
@keyframes wheel-bounce {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-6px) rotate(6deg); }
}

.wheel-modal {
  position: fixed; inset: 0;
  background: #262634;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Lift the shared policy modal above the wheel so the "политика" link works
   even when the wheel modal is open. */
.policy-modal { z-index: 10001 !important; }
.wheel-modal.is-open { display: flex; }
.wheel-modal-content {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly;
  max-width: 1240px; width: 100%; gap: 32px;
}
.wheel-modal-close {
  position: absolute; right: 24px; top: 24px;
  width: 36px; height: 36px;
  background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px; line-height: 1;
}
.wheel-modal-close::before { content: "×"; }

.wheel-spin-wrap {
  --size: clamp(280px, 62vmin, 540px);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.wheel-spinner {
  position: relative;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  border: 8px solid #C1C9E9;
  box-shadow: 0 0 80px 30px rgba(49, 76, 182, 0.4);
  list-style: none; padding: 0; margin: 0;
  font-size: calc(var(--size) / 22);
  display: grid;
  grid-template-areas: "inner";
  align-items: center;
  user-select: none;
  animation: wheel-idle 60s linear infinite;
}
@keyframes wheel-idle {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.wheel-spinner.is-spinning {
  animation: none;
  transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1);
}
.wheel-prize {
  grid-area: inner;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--size) / 6) 0 calc(var(--size) / 18);
  width: 50%; height: 50%;
  transform-origin: center right;
  transform: rotate(var(--rotate, 0deg));
}
.wheel-prize .text {
  transform: rotate(180deg);
  font: 600 12px/1.2 'Gilroy', sans-serif;
  color: #FFFFFF;
  text-align: center;
}
.wheel-center {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
  box-shadow: 0 0 7px rgba(0,0,0,0.32);
  z-index: 2;
}
.wheel-ticker {
  position: absolute;
  right: -22px;
  top: 50%;
  width: 38px; height: 30px;
  transform: translateY(-50%) rotate(0deg);
  background: url(/assets/images/wheel/ell.png) center/contain no-repeat;
  z-index: 3;
}

.wheel-side {
  color: #fff;
  max-width: 380px;
  font-family: 'Gilroy', system-ui, sans-serif;
}
.wheel-title { font: 700 32px/1.05 'Gilroy'; margin: 0 0 14px; color: #fff; }
.wheel-text  { font: 500 16px/1.4 'Gilroy'; opacity: 0.78; margin: 0 0 24px; }
.wheel-winLabel { display: none; font: 600 16px/1.2 'Gilroy'; opacity: 0.7; margin-bottom: 14px; }
.wheel-side.has-prize .wheel-winLabel { display: block; }
.wheel-side.has-prize .wheel-form { display: none; }
.wheel-side.has-prize .wheel-button-spin { display: none; }
.wheel-side.has-prize .wheel-button-close { display: inline-block; }
.wheel-side.has-prize .wheel-promo { display: flex; }
.wheel-side.has-prize .wheel-promo-hint { display: block; }
.wheel-promo-hint {
  display: none;
  margin: -8px 0 22px;
  font: 400 13px/1.4 'Gilroy', sans-serif;
  color: #fff; opacity: 0.65;
}

.wheel-form .wheel-input-wrap {
  display: flex; align-items: center;
  border: 2px solid #314CB6; border-radius: 8px;
  padding: 0 12px; background: transparent;
}
.wheel-form .wheel-input-wrap img { width: 16px; height: 16px; margin-right: 10px; }
.wheel-form .wheel-input-wrap span { color: #fff; opacity: 0.8; margin-right: 8px; font: 400 14px/1 'Gilroy'; }
.wheel-form input[type="tel"],
.wheel-form input[type="email"] {
  flex: 1; background: transparent; border: 0;
  color: #fff; padding: 14px 0;
  font: 400 14px/1 'Gilroy';
}
.wheel-form input::placeholder { color: rgba(255,255,255,0.4); }
.wheel-form input:focus { outline: none; }
.wheel-form .wheel-error {
  color: #FF5555; font: 400 12px/1.4 'Gilroy';
  margin-top: 6px; display: none;
}
.wheel-form.is-invalid .wheel-error { display: block; }
.wheel-form.is-invalid .wheel-input-wrap { border-color: #B10000; }

.wheel-privacy {
  display: flex; align-items: flex-start;
  padding: 18px 0;
  cursor: pointer; user-select: none;
}
.wheel-privacy input { display: none; }
.wheel-privacy .box {
  flex: 0 0 22px; width: 22px; height: 22px;
  border: 2px solid #314CB6; border-radius: 4px;
  margin-right: 10px; position: relative;
  transition: background 0.2s;
}
.wheel-privacy input:checked + .box {
  background: #314CB6;
}
.wheel-privacy input:checked + .box::after {
  content: ""; position: absolute;
  left: 5px; top: 1px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.wheel-privacy .label { font: 400 13px/1.4 'Gilroy'; color: #fff; opacity: 0.85; }
.wheel-privacy .label a { color: #7D93EB; text-decoration: underline; }

.wheel-button-spin,
.wheel-button-close {
  height: 48px; padding: 0 32px;
  background: #314CB6; border: 0; border-radius: 8px;
  color: #fff; font: 600 14px/1 'Gilroy'; cursor: pointer;
  transition: opacity 0.2s;
}
.wheel-button-spin:disabled { opacity: 0.4; cursor: not-allowed; }
.wheel-button-close { display: none; background: #2F2F3C; }

.wheel-promo {
  display: none; align-items: center;
  background: #fff; border: 2px solid #314CB6; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 18px;
  position: relative;
}
.wheel-promo .copy {
  cursor: pointer; margin-right: 12px; display: inline-flex;
}
.wheel-promo .code {
  flex: 1; font: 600 14px/1 'Gilroy'; letter-spacing: 2px; color: #191919;
}
.wheel-promo .copied-toast {
  display: none; position: absolute;
  background: #191919; color: #fff;
  padding: 6px 14px; border-radius: 99px;
  font: 400 12px/1 'Gilroy';
  top: -34px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
}
.wheel-promo.is-copied .copied-toast { display: inline-block; }

@media (max-width: 880px) {
  .wheel-modal { padding: 8px; }
  .wheel-modal-content { gap: 16px; }
  .wheel-spin-wrap { --size: clamp(240px, 78vmin, 360px); }
  .wheel-title { font-size: 22px; }
  .wheel-text { font-size: 14px; }
  .wheel-side { max-width: 100%; padding: 0 16px; text-align: left; }
  .wheel-trigger { width: 64px; height: 64px; bottom: 16px; left: 16px; }
  .wheel-trigger img { width: 56px; height: 56px; }
}