/* ---------- ШРИФТЫ: свой домен ----------
   Те же файлы, что у лендингов книг. Нужны здесь потому, что колесо
   висит на всех страницах сайта, а @font-face объявлен только внутри
   вёрстки лендингов: на обычной странице колесо осталось бы без них. */
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(https://e-diet.health/wp-content/uploads/2026/08/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(https://e-diet.health/wp-content/uploads/2026/08/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(https://e-diet.health/wp-content/uploads/2026/08/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(https://e-diet.health/wp-content/uploads/2026/08/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --brass:#9C6B2E; --brass-dark:#7E5624; --brass-light:#D8B074;
  --cream:#F3ECDD; --cream-soft:#FBF7EC; --cream-line:#EAE0C7;
  --green:#2F5C43; --ink:#201B10; --muted:#6B5F47;
  --display:'Onest','Manrope',system-ui,sans-serif;
  --body:'Manrope',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--body);background:var(--cream-soft);color:var(--ink)}

/* ---------- окно ---------- */
.wheel-veil{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  background:rgba(18,32,26,.72);padding:20px;overflow-y:auto}
.wheel-veil.on{display:flex}
.wheel-box{position:relative;width:100%;max-width:520px;background:var(--cream-soft);border-radius:20px;
  padding:36px 32px 30px;box-shadow:0 30px 80px rgba(12,21,18,.4);text-align:center;
  opacity:0;transform:translateY(18px) scale(.97);transition:opacity .32s ease,transform .32s cubic-bezier(.22,1,.36,1)}
.wheel-veil.on .wheel-box{opacity:1;transform:none}
/* Крестик. Символ × выравнивался по базовой линии текста и сидел выше
   середины круга: подсветка при наведении казалась смещённой, человек
   видел крестик в одном месте, а реагировала другая область. Ставим
   символ по центру сеткой и обнуляем внутренние отступы темы. */
.wheel-x{position:absolute;top:10px;right:10px;width:42px;height:42px;border:0;border-radius:50%;background:transparent;
  display:grid;place-items:center;padding:0;margin:0;
  color:var(--muted);font-size:27px;line-height:1;cursor:pointer;z-index:6}
.wheel-x:hover{background:var(--cream-line);color:var(--ink)}
.wheel-box h2{font-family:var(--display);font-size:clamp(23px,5.2vw,30px);line-height:1.15;letter-spacing:-.025em;
  margin:0 0 10px;padding:0 34px}
.wheel-box h2 em{font-style:normal;color:var(--brass-dark)}
.wheel-sub{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0 auto 20px;max-width:36ch}
.wheel-sub b{color:var(--ink);font-weight:700}
.wheel-sub s{color:var(--muted);opacity:.85}

/* ---------- колесо ---------- */
.wheel-stage{position:relative;width:262px;height:262px;margin:0 auto 20px;transition:width .3s,height .3s}
.wheel-pin{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:0;height:0;z-index:3;
  border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid var(--green);
  filter:drop-shadow(0 2px 3px rgba(12,21,18,.35))}
.wheel-svg{width:100%;height:100%;display:block;transform:rotate(0deg);
  transition:transform 4.2s cubic-bezier(.16,.84,.16,1)}
/* втулка — не кнопка, только показывает результат */
.wheel-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;
  z-index:4;background:var(--cream);border:3px solid var(--brass-light);display:flex;align-items:center;
  justify-content:center;padding:8px;color:var(--muted);font:700 11.5px/1.3 var(--body);letter-spacing:.04em;
  text-transform:uppercase;transition:background .25s,border-color .25s,color .25s}
.wheel-hub.won{background:var(--brass);border-color:var(--brass-dark);color:#fff;
  font:800 27px/1 var(--display);letter-spacing:-.02em;text-transform:none}

.wheel-acts{display:flex;flex-direction:column;gap:10px}
.wheel-acts:empty{display:none}
.btn{font:700 16px var(--body);padding:16px 22px;border-radius:12px;border:0;cursor:pointer;transition:background .18s;
  width:100%;display:block}
.btn-main{background:var(--brass);color:#fff}
.btn-main:hover:enabled{background:var(--brass-dark)}
.btn-main:disabled{opacity:.65;cursor:default}
.btn-big{font-size:18px;padding:18px 22px;letter-spacing:.01em}
.btn-thin{background:transparent;color:var(--brass-dark);border:1.5px solid var(--brass-light);font-weight:700}
.btn-thin:hover{background:var(--cream);border-color:var(--brass)}
.btn-quit{background:transparent;border:0;color:var(--muted);font:500 13.5px var(--body);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:10px 4px;line-height:1.45;width:100%}
.btn-quit:hover{color:#9B2C2C}
.wheel-hint{font-size:13px;line-height:1.5;color:var(--muted);margin:10px 0 0}

/* ---------- форма ---------- */
.wheel-field{text-align:left;margin:0 0 12px}
.wheel-field label{display:block;font:600 13.5px var(--body);margin:0 0 6px}
.wheel-field input{width:100%;font:400 16px var(--body);padding:14px 16px;border-radius:11px;
  border:1px solid var(--cream-line);background:#fff;color:var(--ink)}
.wheel-field input:focus{outline:2px solid var(--brass-light);outline-offset:1px;border-color:var(--brass)}
.wheel-field small{display:block;font-size:12.5px;color:var(--muted);margin:5px 0 0;line-height:1.45}
.wheel-agree{display:flex;gap:10px;text-align:left;font-size:13px;line-height:1.5;color:var(--muted);margin:4px 0 16px}
.wheel-agree input{margin-top:2px;width:17px;height:17px;accent-color:var(--brass);flex:0 0 auto}
.wheel-agree a{color:var(--brass-dark)}
.wheel-calm{font-size:12.5px;line-height:1.5;color:var(--muted);margin:12px 0 0}
.wheel-calm a{color:var(--brass-dark)}
.wheel-err{color:#9B2C2C;font-size:14px;line-height:1.5;margin:0 0 12px;display:none;text-align:left;
  background:#FDF0EF;border-radius:9px;padding:11px 14px}

/* ---------- код ---------- */
.wheel-code{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--cream);
  border:1px dashed var(--brass);border-radius:12px;padding:18px 20px;margin:0 0 14px}
.wheel-code b{font-family:var(--display);font-size:clamp(24px,6vw,32px);letter-spacing:.08em}
.wheel-copy{font:600 14px var(--body);padding:9px 14px;border-radius:8px;border:1px solid var(--brass);
  background:#fff;color:var(--brass-dark);cursor:pointer;white-space:nowrap}
.wheel-clock{font-size:14px;color:var(--muted);margin:0 0 20px}
.wheel-clock strong{font-family:var(--display);color:#9B2C2C;font-variant-numeric:tabular-nums;font-size:17px}

/* ---------- что видно на каком шаге ---------- */
.wheel-box[data-step="form"] .part-wheel,
.wheel-box[data-step="done"] .part-wheel{display:none}
.wheel-box:not([data-step="form"]) #stepForm{display:none}
.wheel-box:not([data-step="done"]) #stepDone{display:none}
.wheel-box:not([data-step="spin"]) #spinActs{display:none}
.wheel-box[data-step="prize"] .wheel-stage{width:214px;height:214px}

@media (max-width:420px){
  .wheel-box{padding:40px 18px 24px}
  .wheel-box h2{padding:0 38px}
  .wheel-stage{width:232px;height:232px}
  .wheel-box[data-step="prize"] .wheel-stage{width:186px;height:186px}
  .wheel-hub{width:82px;height:82px;font-size:10.5px}
  .wheel-hub.won{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  .wheel-svg{transition-duration:.6s}
  .wheel-box{transition:none;opacity:1;transform:none}
}


/* =========================================================
   ПЕРЕБИВКА ТЕМЫ (Astra + Elementor)
   Колесо висит внутри чужой темы, и её глобальные правила
   вида a{}, button{}, svg{} задевают наши элементы.
   Правило проекта, тот же блок, что в лендингах книг.

   Что тема ломает именно здесь (проверено 1 сентября 2026
   по её main.min.css 4.13.2):
     a:hover{color:#191970}        — красит кнопку-ссылку
                                     «Выбрать книгу» в тёмно-синий
     button{-webkit-appearance:button} — нативный скин кнопок
     button{text-transform:none}   — своё преобразование регистра
   Бьём специфичностью, а не !important: свои цвета должны
   оставаться управляемыми из палитры выше.
   ========================================================= */

/* 1. Синяя вспышка при тапе на телефоне. */
.wheel-veil a, .wheel-veil button, .wheel-veil input, .wheel-veil label {
  -webkit-tap-highlight-color: transparent;
}

/* 2. Нативный скин <button> у темы: свои паддинги, рамка, регистр. */
.wheel-veil button {
  -webkit-appearance: none;
  appearance: none;
  text-transform: none;
  font-family: inherit;
  line-height: inherit;
  margin: 0;
}

/* 3. Ссылки. Тема перекрашивает их при наведении в #191970 и её
      правило сильнее обычного класса. Задаём цвет всем состояниям
      и дублируем -webkit-text-fill-color: Astra сбрасывает именно
      его, и текст красится чужим цветом при «правильном» color. */
.wheel-veil a,
.wheel-veil a:link,
.wheel-veil a:visited,
.wheel-veil a:hover,
.wheel-veil a:focus,
.wheel-veil a:active {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--brass-dark);
  -webkit-text-fill-color: currentColor;
}

/* 4. Кнопка-ссылка «Выбрать книгу»: это <a>, поэтому попадала под
      правило темы и белела в синий прямо при наведении мышью. */
.wheel-veil a.btn,
.wheel-veil a.btn:link,
.wheel-veil a.btn:visited,
.wheel-veil a.btn:hover,
.wheel-veil a.btn:focus,
.wheel-veil a.btn:active {
  text-decoration: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.wheel-veil a.btn-main:hover { background: var(--brass-dark); }

/* 5. Свои кнопки: цвет текста тоже закрепляем по состояниям. */
.wheel-veil button.btn-main,
.wheel-veil button.btn-main:hover,
.wheel-veil button.btn-main:focus { color: #fff; -webkit-text-fill-color: #fff; }
.wheel-veil button.btn-thin,
.wheel-veil button.btn-thin:hover,
.wheel-veil button.btn-thin:focus { color: var(--brass-dark); -webkit-text-fill-color: currentColor; }
.wheel-veil button.btn-quit,
.wheel-veil button.btn-quit:focus { color: var(--muted); -webkit-text-fill-color: currentColor; }
.wheel-veil button.btn-quit:hover { color: #9B2C2C; -webkit-text-fill-color: currentColor; }
.wheel-veil button.wheel-copy,
.wheel-veil button.wheel-copy:hover { color: var(--brass-dark); -webkit-text-fill-color: currentColor; }
.wheel-veil button.wheel-x:hover { color: var(--ink); -webkit-text-fill-color: currentColor; }

/* 6. Заголовки. Astra красит h1–h6 своим тёмно-синим и побеждает
      наследование, поэтому цвет окна до заголовка не доходил. */
.wheel-veil h2 { color: var(--ink); -webkit-text-fill-color: currentColor; margin-top: 0; }
.wheel-veil h2 em { color: var(--brass-dark); -webkit-text-fill-color: currentColor; }

/* 7. Поля ввода: у темы свои рамки, тени и радиусы. */
.wheel-veil input[type="email"] {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
  margin: 0;
}
.wheel-veil input[type="checkbox"] {
  -webkit-appearance: auto;
  appearance: auto;
  box-shadow: none;
  margin: 2px 0 0;
}

/* 8. Иконки: тема ставит свои размеры на svg общим селектором. */
.wheel-veil svg { max-width: none; height: auto; }

/* 9. Выделение текста внутри окна. */
.wheel-veil ::selection { background: var(--brass-light); color: var(--ink); }

/* 10. Elementor вешает transform на контейнер виджета, а он по
       спецификации отменяет fixed у потомков: окно уезжало бы со
       скроллом. Разметка колеса лежит прямо в body, но правило
       держит позицию и в случае переноса. */
.wheel-veil, body > .wheel-veil { position: fixed; }

/* 11. Своя кнопка «наверх» у темы перекрывала бы крестик окна. */
.wheel-veil.on ~ #ast-scroll-top,
.wheel-veil.on ~ .ast-scroll-top { display: none; }

/* 12. Фон кнопок по состояниям — главное место, где тема побеждала.
       У Astra есть правило
         .menu-toggle, button, .ast-button, .button, input[type=submit] …
           { background-color: var(--ast-global-color-0) }
         button:focus, button:hover, .ast-button:hover …
           { background-color: var(--ast-global-color-1) }
       Второе весит 0-1-1 и перебивает обычный класс 0-1-0. Колесо ставит
       фокус на кнопку «Крутить» сразу при открытии — и она становилась
       синей ещё до того, как её тронули. Перекрываем специфичностью:
       префикс .wheel-veil даёт 0-2-0 и выше. */
.wheel-veil .btn-main,
.wheel-veil .btn-main:hover,
.wheel-veil .btn-main:focus,
.wheel-veil .btn-main:active,
.wheel-veil .btn-main:focus-visible { background: var(--brass); border: 0; }
.wheel-veil .btn-main:hover:enabled,
.wheel-veil a.btn-main:hover { background: var(--brass-dark); }
.wheel-veil .btn-main:disabled { background: var(--brass); opacity: .65; }

.wheel-veil .btn-thin,
.wheel-veil .btn-thin:focus,
.wheel-veil .btn-thin:active,
.wheel-veil .btn-thin:focus-visible { background: transparent; border: 1.5px solid var(--brass-light); }
.wheel-veil .btn-thin:hover { background: var(--cream); border-color: var(--brass); }

.wheel-veil .btn-quit,
.wheel-veil .btn-quit:hover,
.wheel-veil .btn-quit:focus,
.wheel-veil .btn-quit:active,
.wheel-veil .btn-quit:focus-visible { background: transparent; border: 0; }

.wheel-veil .wheel-copy,
.wheel-veil .wheel-copy:focus,
.wheel-veil .wheel-copy:active,
.wheel-veil .wheel-copy:focus-visible { background: #fff; border: 1px solid var(--brass); }
.wheel-veil .wheel-copy:hover { background: var(--cream); }

.wheel-veil .wheel-x,
.wheel-veil .wheel-x:focus,
.wheel-veil .wheel-x:active,
.wheel-veil .wheel-x:focus-visible { background: transparent; border: 0; }
/* Тема даёт кнопкам свои отступы и высоту строки — из-за них символ
   уезжал из центра круга. Держим сетку и нули сильнее темы. */
.wheel-veil button.wheel-x { display: grid; place-items: center; padding: 0; line-height: 1; }
.wheel-veil .wheel-x:hover { background: var(--cream-line); }

/* 13. Фокус должен быть виден — но своей рамкой, а не чужой заливкой.
       Показываем её только тем, кто ходит с клавиатуры. */
.wheel-veil button:focus-visible,
.wheel-veil a:focus-visible,
.wheel-veil input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.wheel-veil button:focus:not(:focus-visible) { outline: none; }

/* 14. Кнопка «наверх» самой темы висела поверх затемнения рядом с окном.
       Пока окно открыто — убираем её, она всё равно бесполезна. */
body.wheel-open #ast-scroll-top,
body.wheel-open .ast-scroll-top,
body.wheel-open #scroll-top { display: none; }

/* 15. Окно принимает фокус, чтобы клавиатура работала внутри него,
       но собственной рамки у контейнера быть не должно. */
.wheel-veil .wheel-box:focus,
.wheel-veil .wheel-box:focus-visible { outline: none; }

/* 16. Подписи полей. Astra красит <label> своим тёмно-синим #1e293b —
       тем же, что h1–h6. У подписи «Почта» цвет уезжал в чужой. */
.wheel-veil label { color: var(--ink); -webkit-text-fill-color: currentColor; }
.wheel-veil .wheel-agree,
.wheel-veil .wheel-agree span { color: var(--muted); -webkit-text-fill-color: currentColor; }
.wheel-veil .wheel-field small { color: var(--muted); -webkit-text-fill-color: currentColor; }

/* 17. Поле и галочка — последнее, что тема перекрашивала.
       Рамка поля превращалась в пунктир, а отмеченная галочка красилась
       синим #046bd2 (это фон, а не accent-color, поэтому accent его не
       перебивал). Задаём и рамку, и фон явно, по состояниям. */
.wheel-veil input[type="email"],
.wheel-veil input[type="email"]:hover {
  border: 1px solid var(--cream-line);
  border-radius: 11px;
  background-color: #fff;
}
.wheel-veil input[type="email"]:focus {
  border: 1px solid var(--brass);
  background-color: #fff;
}
.wheel-veil input[type="checkbox"],
.wheel-veil input[type="checkbox"]:checked,
.wheel-veil input[type="checkbox"]:hover,
.wheel-veil input[type="checkbox"]:focus {
  background-color: transparent;
  border: 0;
  accent-color: var(--brass);
}