/* ============================================================
   states-stage6.css — визуальная полировка States (вариант B)
   Шаг 6. Без изменения логики, pricing-v7.js, bridge, защищённых файлов.
   Все селекторы ограничены через body.stage3-ui.
   !important применяется ТОЛЬКО к inline-свойствам, задаваемым JS
   (генерируемое сообщение «Нет предложений»).
   ============================================================ */

/* ===== START: лёгкое появление hero/actions ===== */
body.stage3-ui .state-start .hero {
  animation: kit-stage6-fade-up .5s ease both;
}
body.stage3-ui .state-start .actions {
  animation: kit-stage6-fade-up .5s .1s ease both;
}
@keyframes kit-stage6-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ===== START/ERROR: доступность focus-visible ===== */
body.stage3-ui .state-start .action-card:focus-visible,
body.stage3-ui .state-error .error-btn:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

/* ===== LOADING: аккуратный круговой спиннер вместо эмодзи ===== */
body.stage3-ui .state-loading .loading-spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 4px solid #E2E8F0;
  border-top-color: #2563EB;
  font-size: 0;            /* прячем эмодзи ⏳, оставляем кольцо */
  animation: kit-stage6-spin 1s linear infinite;
}
@keyframes kit-stage6-spin {
  to { transform: rotate(360deg); }
}

body.stage3-ui .state-loading .loading-title {
  letter-spacing: -.3px;
}
body.stage3-ui .state-loading .loading-supp {
  transition: background .15s;
}
body.stage3-ui .state-loading .loading-supp:hover {
  background: #E2E8F0;
}

/* ===== ERROR: лёгкое появление блока ===== */
body.stage3-ui .state-error .error-box {
  animation: kit-stage6-fade-up .4s ease both;
}

/* ===== «Нет предложений» (генерируемый JS div без класса) =====
   Перебиваем ТОЛЬКО inline-свойства, которые задаёт pricing-v7.js
   (text-align, padding, font-size, color). Остальное — без !important.
   Селектор ловит только пустой div-ребёнка: единственный, без класса.
   Не задевает .gh2/.oc (у них есть классы). */
body.stage3-ui [data-role="offers-table"] > div:only-child:not([class]) {
  text-align: center !important;   /* inline JS: text-align:center */
  padding: 48px 30px !important;   /* inline JS: padding:30px */
  font-size: 15px !important;      /* inline JS: font-size:14px */
  color: #94A3B8 !important;       /* inline JS: color:#9CA3AF */
  background: #F8FAFC;
  border: 1px dashed #E2E8F0;
  border-radius: 12px;
  margin: 16px 0;
}

/* ===== prefers-reduced-motion: отключаем анимации ===== */
@media (prefers-reduced-motion: reduce) {
  body.stage3-ui .state-start .hero,
  body.stage3-ui .state-start .actions,
  body.stage3-ui .state-error .error-box {
    animation: none;
  }
  body.stage3-ui .state-loading .loading-spinner {
    animation: none;
    border-top-color: #E2E8F0;  /* статичное кольцо без вращения */
  }
}