/* ============================================
   Виджет «Повышенный спрос» v2.0 — тахометр
   xn--39-glcd4cso.xn--p1ai / досуг39.рф
   ============================================ */

#demand-gauge-widget {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99990;
  width: 192px;
  background: linear-gradient(145deg, #1a0a2e 0%, #0d0d1a 100%);
  border: 1px solid rgba(233, 30, 140, 0.4);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 28px rgba(233,30,140,0.18);
  padding: 13px 13px 11px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #fff;
  animation: dgSlideIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
  user-select: none;
  -webkit-user-select: none;
}

/* LOW-mode: синеватый бордер вместо розового */
#demand-gauge-widget.dg-low-mode {
  border-color: rgba(100, 149, 237, 0.4);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 20px rgba(100,149,237,0.15);
}

@keyframes dgSlideIn {
  from { transform: translateY(-50%) translateX(230px); opacity: 0; }
  to   { transform: translateY(-50%) translateX(0);     opacity: 1; }
}
@keyframes dgSlideOut {
  from { transform: translateY(-50%) translateX(0);     opacity: 1; }
  to   { transform: translateY(-50%) translateX(230px); opacity: 0; }
}

/* Кнопка сворачивания — торчит слева от виджета */
.dg-toggle {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 48px;
  background: linear-gradient(135deg, #1a0a2e 0%, #0d0d1a 100%);
  border: 1px solid rgba(233,30,140,0.4);
  border-right: none;
  border-radius: 10px 0 0 10px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.dg-toggle:hover { color: #fff; background: rgba(233,30,140,0.2); }

/* Свёрнутый виджет */
#demand-gauge-widget.dg-collapsed {
  width: 0;
  padding: 0;
  border-color: transparent;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
#demand-gauge-widget.dg-collapsed .dg-toggle {
  pointer-events: all;
  left: -28px;
  border: 1px solid rgba(233,30,140,0.5);
  border-right: none;
  background: linear-gradient(135deg, #1a0a2e 0%, #0d0d1a 100%);
  box-shadow: -4px 0 16px rgba(233,30,140,0.2);
  color: #e91e8c;
}
#demand-gauge-widget.dg-collapsed .dg-inner {
  display: none;
}

/* Заголовок */
.dg-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #ff6d00;
  margin-bottom: 5px;
  text-align: center;
  animation: dgBlink 2.4s ease-in-out infinite;
}
#demand-gauge-widget.dg-low-mode .dg-title {
  color: #6495ed;
  animation: none;
}

@keyframes dgBlink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* Canvas + стрелка */
.dg-canvas-wrap {
  position: relative;
  width: 166px; height: 108px;
  margin: 0 auto;
}

#dg-canvas {
  display: block;
  width: 166px; height: 108px;
}

/* Ось стрелки — строго в центре canvas (cx=90≈54% of 166px, cy=98≈91%) */
.dg-needle-wrap {
  position: absolute;
  left: 50%;
  /* cy=98 из 108 => bottom = 108-98 = 10px */
  bottom: 10px;
  width: 0; height: 0;
}

/* Стрелка: вертикальная, transform-origin = нижний центр */
.dg-needle {
  position: absolute;
  bottom: 0;
  left: -1.5px;      /* ширина 3px, центрируем: -1.5px */
  transform-origin: bottom center;
  /* Начало: canvas 210° → CSS = 210-270 = -60° (= upper-left, тахометр с 0) */
  transform: rotate(-60deg);
  width: 3px;
  height: 56px;
  background: linear-gradient(
    to top,
    #e91e8c 0%,
    rgba(233,30,140,0.55) 65%,
    transparent 100%
  );
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 8px rgba(233,30,140,0.75);
}

/* Подписи дуги */
.dg-labels {
  display: flex;
  justify-content: space-between;
  margin-top: -4px;
  padding: 0 8px;
  font-size: 8.5px;
  color: rgba(255,255,255,0.3);
}

/* Значение % */
.dg-value-wrap {
  text-align: center;
  margin: 3px 0 5px;
}
.dg-value {
  font-size: 27px;
  font-weight: 800;
  color: #f50057;
  line-height: 1;
  text-shadow: 0 0 12px rgba(245,0,87,0.45);
  transition: color 0.5s;
  display: block;
}
#demand-gauge-widget.dg-low-mode .dg-value {
  color: #6495ed;
  text-shadow: 0 0 10px rgba(100,149,237,0.4);
}
.dg-value-label {
  font-size: 8.5px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Статы */
.dg-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 7px;
}
.dg-stat { text-align: center; display: flex; flex-direction: column; gap: 1px; }
.dg-stat-num { font-size: 14px; font-weight: 700; color: #fff; transition: all 0.3s; }
.dg-stat-txt { font-size: 8px; color: rgba(255,255,255,0.3); text-transform: uppercase; }

/* Pulse bar */
.dg-pulse-bar {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 7px;
}
.dg-pulse-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00e676 0%, #ff6d00 60%, #f50057 100%);
  border-radius: 2px;
  transition: width 1.3s cubic-bezier(0.34,1.2,0.64,1);
  box-shadow: 0 0 6px rgba(245,0,87,0.45);
  animation: dgPulseBar 2.5s ease-in-out infinite;
}
#demand-gauge-widget.dg-low-mode .dg-pulse-fill {
  background: linear-gradient(90deg, #1a237e 0%, #3949ab 60%, #6495ed 100%);
  box-shadow: 0 0 6px rgba(100,149,237,0.4);
  animation: none;
}
@keyframes dgPulseBar {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.7; box-shadow: 0 0 12px rgba(245,0,87,0.7); }
}

/* ── Волновые бары (LOW режим) ───────────────────── */
.dg-wave-bars {
  display: none; /* включается JS при low-mode */
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  margin-bottom: 6px;
}
.dg-wave-bars span {
  display: block;
  width: 5px;
  background: rgba(100,149,237,0.55);
  border-radius: 2px 2px 0 0;
  animation: dgWave 1.4s ease-in-out infinite;
  min-height: 3px;
}
.dg-wave-bars span:nth-child(1)  { animation-delay: 0s;    }
.dg-wave-bars span:nth-child(2)  { animation-delay: 0.14s; }
.dg-wave-bars span:nth-child(3)  { animation-delay: 0.28s; }
.dg-wave-bars span:nth-child(4)  { animation-delay: 0.42s; }
.dg-wave-bars span:nth-child(5)  { animation-delay: 0.56s; }
.dg-wave-bars span:nth-child(6)  { animation-delay: 0.70s; }
.dg-wave-bars span:nth-child(7)  { animation-delay: 0.84s; }
.dg-wave-bars span:nth-child(8)  { animation-delay: 0.98s; }
.dg-wave-bars span:nth-child(9)  { animation-delay: 1.12s; }
.dg-wave-bars span:nth-child(10) { animation-delay: 1.26s; }

@keyframes dgWave {
  0%,100% { height: 4px;  opacity: 0.45; }
  50%      { height: 17px; opacity: 0.9;  }
}

/* CTA */
.dg-cta {
  font-size: 9.5px;
  text-align: center;
  color: #ff6d00;
  font-weight: 600;
  padding: 5px 6px;
  background: rgba(255,109,0,0.1);
  border: 1px solid rgba(255,109,0,0.22);
  border-radius: 6px;
  animation: dgBlink 2s ease-in-out infinite;
  letter-spacing: 0.2px;
  line-height: 1.35;
}
#demand-gauge-widget.dg-low-mode .dg-cta {
  color: #90b8f8;
  background: rgba(100,149,237,0.08);
  border-color: rgba(100,149,237,0.2);
  animation: none;
}

/* ── Мобилка ──────────────────────────────────────── */
@media (max-width: 480px) {
  #demand-gauge-widget {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 160px;
    padding: 10px 10px 9px;
    border-radius: 12px;
  }
  .dg-canvas-wrap { width: 140px; height: 92px; }
  #dg-canvas { width: 140px; height: 92px; }
  .dg-needle { height: 46px; }
  .dg-value { font-size: 23px; }
  .dg-title { font-size: 10px; }
  .dg-cta { font-size: 9px; }
}