/* assets/ui.css — общие компоненты интерфейса (подключается после theme.css).
   Здесь только новые селекторы и доступность; оформление страниц остаётся в их <style>. */

/* Иконки */
.icon{display:inline-block;flex-shrink:0;vertical-align:middle}
.spin{display:inline-flex;animation:tarena-spin 1s linear infinite}
@keyframes tarena-spin{to{transform:rotate(360deg)}}

/* Доступность: видимый фокус с клавиатуры, скрытие текста для скринридеров */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.compare-wrap:focus-visible{outline:2px solid var(--acc);outline-offset:4px}

/* Ошибки в модальных окнах: иконка и текст в одну строку */
.modal-errors{display:flex;align-items:center;gap:8px}
.modal-errors .icon{color:var(--err)}

/* Бейдж «лучшее соотношение» на карточке тарифа */
.feat-badge-card{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* Характеристики на первом экране */
.hero-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px auto 0;max-width:720px}
.hero-chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--surf);border:1px solid var(--bdr);color:var(--txt);font-size:13px;font-weight:600;
  transition:border-color .2s,transform .2s}
.hero-chips li:hover{border-color:var(--acc);transform:translateY(-2px)}
.hero-chips .icon{color:var(--acc)}

/* Декоративная «стойка» сервера: только CSS, без данных и обещаний */
.hero-rack{display:flex;flex-direction:column;gap:6px;width:min(320px,80%);margin:34px auto 0;padding:12px;
  border-radius:14px;background:var(--surf);border:1px solid var(--bdr);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.rack-unit{display:flex;align-items:center;gap:8px;height:26px;padding:0 10px;border-radius:7px;
  background:linear-gradient(180deg,rgba(148,163,184,.08),rgba(148,163,184,.02));border:1px solid var(--bdr)}
.rack-unit .led{width:7px;height:7px;border-radius:50%;background:rgba(148,163,184,.35)}
.rack-unit .led-ok{background:var(--acc);box-shadow:0 0 8px var(--acc);animation:tarena-led 2.4s ease-in-out infinite}
.rack-unit .rack-bar{flex:1;height:6px;border-radius:3px;background:rgba(148,163,184,.2);margin-left:auto}
.rack-unit .rack-bar.short{flex:0 0 45%}
@keyframes tarena-led{0%,100%{opacity:1}50%{opacity:.45}}

/* Таблица сравнения тарифов */
.compare{margin-top:56px}
.compare-title{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;margin-bottom:6px}
.compare-title .icon{color:var(--acc)}
.compare-sub{color:var(--mut);font-size:14px;margin-bottom:18px}
.compare-wrap{overflow-x:auto;border:1px solid var(--bdr);border-radius:14px;background:var(--surf)}
.compare-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.compare-table th,.compare-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--bdr);white-space:nowrap}
.compare-table thead th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);background:var(--surf2)}
.compare-table tbody th{font-weight:700;color:var(--txt)}
.compare-table td{color:var(--txt);font-variant-numeric:tabular-nums}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table tbody tr{transition:background .2s}
.compare-table tbody tr:hover{background:rgba(59,130,246,.07)}
.compare-table tr.is-best th,.compare-table tr.is-best td{background:rgba(59,130,246,.08)}
.best-tag{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--acc);color:#fff;vertical-align:middle;margin-left:4px}

/* Движение: без анимаций, если пользователь их отключил */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Мобильная версия */
@media (max-width:640px){
  .hero-chips li{font-size:12px;padding:7px 11px}
  .compare-title{font-size:18px}
}

/* Статусные точки (вместо цветных эмодзи) */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot-green{background:#22c55e}
.dot-amber{background:#f59e0b}
.dot-blue{background:var(--acc)}
.dot-red{background:#ef4444}

/* Свечение hero не должно расширять страницу на узких экранах */
.hero{overflow:hidden}