/* Корневой контейнер */
.wcsw-root {
  --wcsw-radius: 160px;
  --wcsw-bg: #ffffff;
  --wcsw-border: #e5e7eb;
  --wcsw-accent: #111827;
  --wcsw-accent-2: #4b5563;
  --wcsw-success: #059669;
  --wcsw-danger: #ef4444;
  --wcsw-shadow: 0 8px 24px rgba(0,0,0,0.08);
  display: grid;
  gap: 14px;
  justify-items: center;
  background: var(--wcsw-bg);
  padding: 16px;
  border: 1px solid var(--wcsw-border);
  border-radius: 16px;
  box-shadow: var(--wcsw-shadow);
  max-width: 420px;
  margin: 0 auto;
}

/* Колесо */
.wcsw-wheel {
  position: relative;
  width: calc(var(--wcsw-radius) * 2);
  height: calc(var(--wcsw-radius) * 2);
}

.wcsw-wheel-canvas {
  position: relative;
}

.wcsw-svg {
  display: block;
}

/* Ротор/сегменты */
.wcsw-seg {
  fill: #f3f4f6;
  stroke: #ffffff;
  stroke-width: 1;
  transition: fill 0.2s ease;
}
.wcsw-seg.alt {
  fill: #e5e7eb;
}
.wcsw-seg:hover {
  fill: #eaecef;
}

/* Обод */
.wcsw-rim {
  stroke: #d1d5db;
}

/* Указатель */
.wcsw-pointer {
  fill: #111827;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* Центр */
.wcsw-center {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight: 700;
  font-size: 28px;
  color: var(--wcsw-accent);
  text-align: center;
}

/* Кнопка спина */
.wcsw-spin-btn {
  cursor: pointer;
  appearance: none;
  border: 1px solid var(--wcsw-border);
  padding: 10px 16px;
  border-radius: 999px;
  background: #368c43;
  color: #fff;
  font-weight: 600;
  transition: transform 0.05s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 16px rgba(17,24,39,0.25);
}
.wcsw-spin-btn:hover { transform: translateY(-1px); }
.wcsw-spin-btn:active { transform: translateY(0); }
.wcsw-spin-btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

/* Состояние загрузки */
.wcsw-spin-btn.is-loading {
  position: relative;
}
.wcsw-spin-btn.is-loading::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: #fff;
  animation: wcsw-spin 0.7s linear infinite;
}
@keyframes wcsw-spin { to { transform: rotate(360deg); } }

/* Результат */
.wcsw-result {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
}
.wcsw-result .wcsw-exp {
  color: #047857;
  font-weight: 600;
}

/* Форма e-mail */
.wcsw-email {
  display: grid;
  gap: 8px;
  width: 100%;
}
.wcsw-email input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--wcsw-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.wcsw-email label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--wcsw-accent-2);
}
.wcsw-email button[type="submit"] {
  
  
    cursor: pointer;
  appearance: none;
  border: 1px solid var(--wcsw-border);
  padding: 10px 16px;
  border-radius: 999px;
  background: #368c43;
  color: #fff;
  font-weight: 600;
  transition: transform 0.05s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 16px rgba(17,24,39,0.25);
}
.wcsw-email button[type="submit"]:hover { transform: translateY(-1px); }
.wcsw-email button[type="submit"]:active { transform: translateY(0); }
.wcsw-email.is-sending button[type="submit"] {
  opacity: 0.75;
  cursor: wait;
}

/* Ошибки/инфо (если понадобятся) */
.wcsw-error {
  color: var(--wcsw-danger);
  font-weight: 600;
}

/* Адаптив */
@media (max-width: 420px){
  .wcsw-root {
    border-radius: 12px;
    padding: 12px;
  }
  .wcsw-center {
    font-size: 24px;
  }
}

/* Видимость SVG */
.wcsw-wheel { position: relative; width: 340px; height: 340px; }
.wcsw-wheel .wcsw-svg { display: block; }
.wcsw-wheel .wcsw-rim { fill: #ffffff; stroke: #d1d5db; stroke-width: 2; }
.wcsw-wheel .wcsw-shadow { filter: drop-shadow(0 6px 16px rgba(0,0,0,0.12)); }
.wcsw-wheel .wcsw-pointer { fill: #111827; }

/* === WCSW force-visible === */
.wcsw-root { text-align: center; }
.wcsw-wheel { position: relative; width: 340px; height: 340px; margin: 0 auto 16px; }
.wcsw-wheel .wcsw-svg { display: block; width: 100% !important; height: 100% !important; }

/* форсируем заливки/обводки, перекрывая чужие reset.css */
.wcsw-wheel .wcsw-svg path,
.wcsw-wheel .wcsw-svg polygon,
.wcsw-wheel .wcsw-svg circle,
.wcsw-wheel .wcsw-svg text {
  fill-opacity: 1 !important;
  stroke-opacity: 1 !important;
}

/* фон-диск и ободок */
.wcsw-wheel .wcsw-rim { fill: #ffffff !important; stroke: #d1d5db !important; stroke-width: 2 !important; }
.wcsw-wheel .wcsw-pointer { fill: #111827 !important; }

/* ТЕНЬ — чтобы колесо не сливалось с фоном */
.wcsw-wheel .wcsw-svg { filter: drop-shadow(0 6px 16px rgba(0,0,0,0.12)); }

/* (временный) отладочный контур — можно удалить позже */
.wcsw-wheel, .wcsw-wheel .wcsw-svg { /*outline: 1px dashed rgba(14,165,233,.35); */}

/* Контейнер */
.wcsw-root { text-align:center; }
.wcsw-wheel {
  position: relative;
  width: 100%;
  max-width: 340px; /* на больших экранах не больше 340px */
  aspect-ratio: 1 / 1; /* сохраняет круг */
  margin: 0 auto 16px;
}

.wcsw-wheel svg {
  width: 100% !important;
  height: 100% !important;
}

/* Дополнительно можно чуть уменьшить на очень узких экранах */
@media (max-width: 400px) {
  .wcsw-wheel {
    max-width: 280px;
  }
}


/* SVG всегда видим и контрастный */
.wcsw-wheel .wcsw-svg { display:block; width:100% !important; height:100% !important;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.12));
}
.wcsw-wheel .wcsw-svg path,
.wcsw-wheel .wcsw-svg text,
.wcsw-wheel .wcsw-svg polygon,
.wcsw-wheel .wcsw-svg circle {
  fill-opacity:1 !important; stroke-opacity:1 !important;
}

/* Псевдо-«дырка» в центре (белый круг поверх) */
.wcsw-wheel::after {
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:30%; height:30%;              /* Диаметр отверстия ≈ 45% от колеса */
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:50%;
  box-shadow: 0 0 0 2px #fff;         /* аккуратный кант */
  pointer-events:none;
  z-index:2;                          /* поверх секторов */
}

/* Стрелка поверх дырки (CSS-стрелка) */
.wcsw-wheel::before {
  content:"";
  position:absolute;
  left:50%; top:12px;
  transform:translateX(-50%);
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:20px solid #111827;   /* цвет стрелки */
  z-index:3;
}

/* Подписи в секторах: чуть меньше и с контуром */
.wcsw-wheel text {
  font-weight:700 !important;
  paint-order: stroke !important;
  stroke:#ffffff !important;
  stroke-width:3px !important;
  stroke-linejoin:round !important;
  font-size:14px !important;          /* было крупно при множестве секторов */
  fill:#111827 !important;
}

/* отключаем временную псевдо-стрелку */
.wcsw-wheel::before { display: none !important; }