/* =========================================================================
   BVI — Версия для слабовидящих (расширенная, Приказ № 831)
   ========================================================================= */

/* --- Панель настроек --- */
.bvi-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #000;
  color: #fff;
  border-bottom: 3px solid #ff0;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
}
.bvi-panel[hidden] { display: none; }

.bvi-panel__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 10px 16px;
  max-width: 1280px;
  margin: 0 auto;
}

.bvi-panel__title {
  font-size: 14px !important;
  font-weight: bold;
  color: #fff !important;
  white-space: nowrap;
}

.bvi-panel__group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.bvi-panel__label {
  color: #ccc !important;
  font-size: 12px !important;
  white-space: nowrap;
}

.bvi-panel__btns {
  display: flex;
  gap: 4px;
}

.bvi-panel__actions {
  margin-left: auto;
}

/* --- Кнопки панели --- */
.bvi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #666;
  background: #222;
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
.bvi-btn:hover { background: #444; }
.bvi-btn.is-active { background: #ff0; color: #000 !important; border-color: #ff0; }

/* Размеры шрифта в кнопках */
.bvi-font-btn:nth-child(1) { font-size: 13px !important; }
.bvi-font-btn:nth-child(2) { font-size: 16px !important; }
.bvi-font-btn:nth-child(3) { font-size: 20px !important; }

/* Кнопки цветовых схем */
.bvi-scheme-bw  { background: #fff !important; color: #000 !important; border-color: #ccc; }
.bvi-scheme-wb  { background: #000 !important; color: #fff !important; border-color: #666; }
.bvi-scheme-yb  { background: #000 !important; color: #ff0 !important; border-color: #ff0; }
.bvi-scheme-by  { background: #ff0 !important; color: #000 !important; border-color: #aa0; }
.bvi-scheme-gb  { background: #1a2a1a !important; color: #0f0 !important; border-color: #0f0; }

.bvi-scheme-btn.is-active { outline: 2px solid #fff; outline-offset: 2px; }

.bvi-reset-btn { background: #333 !important; }
.bvi-close-btn { background: #c00 !important; }
.bvi-close-btn:hover { background: #e00 !important; }

/* --- Когда панель открыта — сдвинуть страницу вниз --- */
body.bvi-panel-open {
  padding-top: 60px;
}

/* --- Базовые BVI стили --- */
body.bvi-active {
  font-size: 22px !important;
  line-height: 1.7 !important;
}

body.bvi-active * {
  font-family: Arial, Helvetica, sans-serif !important;
  background-image: none !important;
}

body.bvi-active a {
  text-decoration: underline !important;
}

body.bvi-active a:hover,
body.bvi-active a:focus {
  outline: 2px solid currentColor !important;
  outline-offset: 2px;
}

/* --- Размеры шрифта --- */
body.bvi-font-normal { font-size: 18px !important; }
body.bvi-font-large  { font-size: 24px !important; }
body.bvi-font-xlarge { font-size: 30px !important; }

body.bvi-font-normal * { font-size: inherit !important; }
body.bvi-font-large  * { font-size: inherit !important; }
body.bvi-font-xlarge * { font-size: inherit !important; }

/* --- Межбуквенный интервал --- */
body.bvi-kern-normal * { letter-spacing: 0.02em !important; }
body.bvi-kern-wide   * { letter-spacing: 0.14em !important; }

/* --- Изображения --- */
body.bvi-img-off img,
body.bvi-img-off video {
  visibility: hidden !important;
  height: 20px !important;
  overflow: hidden !important;
}

/* --- Цветовые схемы --- */

/* Чёрное на белом */
body.bvi-scheme-bw,
body.bvi-scheme-bw *:not(.bvi-panel):not(.bvi-panel *):not(.bvi-btn) {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #ccc !important;
  box-shadow: none !important;
}
body.bvi-scheme-bw a:not(.bvi-btn) { color: #00c !important; }
body.bvi-scheme-bw a:hover:not(.bvi-btn) { color: #c00 !important; }
body.bvi-scheme-bw .btn-primary { background-color: #00c !important; color: #fff !important; }

/* Белое на чёрном */
body.bvi-scheme-wb,
body.bvi-scheme-wb *:not(.bvi-panel):not(.bvi-panel *):not(.bvi-btn) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #555 !important;
  box-shadow: none !important;
}
body.bvi-scheme-wb a:not(.bvi-btn) { color: #8af !important; }
body.bvi-scheme-wb a:hover:not(.bvi-btn) { color: #ffa !important; }
body.bvi-scheme-wb .btn-primary { background-color: #fff !important; color: #000 !important; }

/* Жёлтое на чёрном */
body.bvi-scheme-yb,
body.bvi-scheme-yb *:not(.bvi-panel):not(.bvi-panel *):not(.bvi-btn) {
  background-color: #000 !important;
  color: #ff0 !important;
  border-color: #555 !important;
  box-shadow: none !important;
}
body.bvi-scheme-yb a:not(.bvi-btn) { color: #ff0 !important; }
body.bvi-scheme-yb a:hover:not(.bvi-btn) { color: #fa0 !important; }
body.bvi-scheme-yb .btn-primary { background-color: #ff0 !important; color: #000 !important; }

/* Чёрное на жёлтом */
body.bvi-scheme-by,
body.bvi-scheme-by *:not(.bvi-panel):not(.bvi-panel *):not(.bvi-btn) {
  background-color: #ff0 !important;
  color: #000 !important;
  border-color: #000 !important;
  box-shadow: none !important;
}
body.bvi-scheme-by a:not(.bvi-btn) { color: #009 !important; }
body.bvi-scheme-by a:hover:not(.bvi-btn) { color: #900 !important; }
body.bvi-scheme-by .btn-primary { background-color: #000 !important; color: #ff0 !important; }

/* Зелёное на тёмном */
body.bvi-scheme-gb,
body.bvi-scheme-gb *:not(.bvi-panel):not(.bvi-panel *):not(.bvi-btn) {
  background-color: #1a2a1a !important;
  color: #0f0 !important;
  border-color: #0a4a0a !important;
  box-shadow: none !important;
}
body.bvi-scheme-gb a:not(.bvi-btn) { color: #0f0 !important; }
body.bvi-scheme-gb a:hover:not(.bvi-btn) { color: #0fa !important; }
body.bvi-scheme-gb .btn-primary { background-color: #0f0 !important; color: #000 !important; }

/* =========================================================================
   SITE TOPBAR
   ========================================================================= */

.site-topbar {
  background: #F8FAFC;
  border-bottom: 1px solid #E5E7EB;
  font-size: 11px;
  color: #6B7280;
}

.topbar-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: #9CA3AF;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}
.topbar-social:hover { color: #4F46E5; background: #EEF2FF; }

body.bvi-active .site-topbar {
  background: #000 !important;
  border-bottom-color: #ff0 !important;
  color: #ff0 !important;
}

/* =========================================================================
   BVI TOGGLE BUTTON — кнопка «Версия для слабовидящих»
   Требования Приказа 831: иконка + текстовая подпись, минимум 44×44px
   ========================================================================= */

/* Общие стили обеих вариаций кнопки */
.bvi-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border: none;
  font-family: Arial, Helvetica, sans-serif;
  transition: background 0.15s, color 0.15s, border-color 0.15s, outline 0.1s;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Кнопка в шапке (десктоп) */
.bvi-toggle-header {
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  color: #6B7280;
  border: 1.5px solid #E5E7EB;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.bvi-toggle-header:hover {
  background: #EEF2FF;
  color: #4F46E5;
  border-color: #C7D2FE;
}
.bvi-toggle-header:focus-visible {
  outline: 3px solid #4F46E5;
  outline-offset: 2px;
}

/* Кнопка в топбаре (десктоп, компактная) */
.bvi-toggle-topbar {
  min-height: 24px;
  min-width: 44px;
  padding: 0 8px;
  border-radius: 4px;
  background: transparent;
  color: #9CA3AF;
  border: 1px solid #E5E7EB;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  gap: 4px;
}
.bvi-toggle-topbar .bvi-toggle-icon { width: 14px; height: 14px; }
.bvi-toggle-topbar:hover { background: #EEF2FF; color: #4F46E5; border-color: #C7D2FE; }
.bvi-toggle-topbar:focus-visible { outline: 2px solid #4F46E5; outline-offset: 2px; }

body.bvi-active .bvi-toggle-topbar {
  background: #fbbf24 !important;
  color: #000 !important;
  border-color: #000 !important;
  font-weight: 700 !important;
}

/* Кнопка в мобильном меню */
.bvi-toggle-mobile {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #F1F5F9;
  color: #374151;
  border: 1.5px solid #E5E7EB;
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
}
.bvi-toggle-mobile:hover {
  background: #EEF2FF;
  color: #4F46E5;
  border-color: #C7D2FE;
}
.bvi-toggle-mobile:focus-visible {
  outline: 3px solid #4F46E5;
  outline-offset: 2px;
}

/* Иконка внутри кнопки */
.bvi-toggle-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Подпись внутри кнопки */
.bvi-toggle-label {
  white-space: nowrap;
  line-height: 1;
}

/* --- Активное состояние BVI (панель включена) --- */
body.bvi-active .bvi-toggle-header {
  background: #fbbf24 !important;
  color: #000 !important;
  border-color: #000 !important;
  font-weight: 700 !important;
}

body.bvi-active .bvi-toggle-mobile {
  background: #fbbf24 !important;
  color: #000 !important;
  border-color: #000 !important;
  font-weight: 700 !important;
}