/* ============================================================================
   ОСПОРТ · BRAND LAYER · v1 · 2025
   Источник правды (брендбук): http://91.218.245.244:8088/osport
   ----------------------------------------------------------------------------
   Этот файл подключается ПОСЛЕДНИМ на каждой странице и приводит легаси-палитры
   («Loko»-зелёный, тёмные служебные темы и т.п.) к фирменному стилю ОСпорт.
   Шрифт — Montserrat. Цвета — только из палитры. Карточки 15–20px,
   кнопки/капсулы — pill. Логотип неприкосновенен.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ---- Дизайн-токены ОСпорт ------------------------------------------------ */
:root{
  /* Primary */
  --osport-rhino:#303B6D;       /* navy — заголовки, текст, тёмные подложки */
  --osport-blue:#207BFF;        /* clear blue — акцент, CTA, ссылки */
  --osport-white:#FFFFFF;
  /* Secondary */
  --osport-dark:#1E1E1E;
  --osport-fern:#6BB577;        /* success */
  --osport-red:#F45449;         /* error */
  /* Neutrals (производные) */
  --osport-bg:#F5F6FA;
  --osport-surface:#FFFFFF;
  --osport-ink:#2A3354;         /* основной текст на светлом */
  --osport-muted:#8A93B2;       /* вторичный текст */
  --osport-hairline:#E7E9F2;    /* разделители, бордеры */
  --osport-mark-blue:#6C8AC4;   /* синий внутри знака (только для логотипа) */
  /* System */
  --osport-radius-card:18px;
  --osport-radius-capsule:999px;
  --osport-shadow:0 18px 40px -22px rgba(48,59,109,.45);
  --osport-shadow-sm:0 8px 20px -14px rgba(48,59,109,.4);
  --osport-font:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---- Ремап легаси-палитры «Loko» → ОСпорт --------------------------------
   Действует на: cabinet, test, test_2, p_1, help, admin, admin_register, db.
   Имена переменных уникальны для этого семейства, поэтому ремап безопасен. */
:root{
  --loko-green:#303B6D;
  --loko-green-main:#303B6D;
  --loko-green-dark:#26305A;
  --loko-red:#F45449;
  --loko-gray:#EEF1F8;
  --loko-bg:#F5F6FA;
  --loko-card:#FFFFFF;
  --loko-text:#2A3354;
  --loko-muted:#8A93B2;
  --loko-muted-2:#9AA3BF;
  --loko-line:#E7E9F2;
  --loko-line-2:#EDEFF6;
  --loko-gold:#207BFF;
  /* статусы */
  --loko-success:#6BB577;  --loko-success-bg:#EEF7F1;
  --loko-info:#207BFF;     --loko-info-bg:#EAF2FF;
  --loko-warn:#C9871F;     --loko-warn-bg:#FFF6E5;
  --loko-danger:#F45449;   --loko-danger-bg:#FDEEED;
  --loko-soft-red:#FDEEED;
  --loko-shadow:0 8px 20px -14px rgba(48,59,109,.4);
  --shadow:0 8px 20px -14px rgba(48,59,109,.4);
  /* радиусы: карточки 15–20px */
  --radius:16px;
  --radius-xl:18px;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;
  /* «RFSO»-кнопки (красные CTA) → фирменный синий */
  --rfso-btn-red:#207BFF;
  --rfso-btn-hover-text:#FFFFFF;
}

/* ---- Montserrat везде (моноширинные блоки сохраняем) --------------------- */
html, body{ font-family: var(--osport-font) !important; }
h1, h2, h3, h4, h5, h6{ font-family: var(--osport-font) !important; }
button, input, select, textarea, optgroup{ font-family: var(--osport-font) !important; }
code, pre, kbd, samp, tt,
.mono, [class*="mono"]{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
}
h1, h2, h3{ font-weight: 700; }

/* ---- Капсула (брендовый компонент) -------------------------------------- */
.os-capsule{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 22px; border-radius:999px;
  font-weight:700; font-size:14px; line-height:1;
  border:2px solid var(--osport-blue); color:var(--osport-blue); background:#fff;
}
.os-capsule.muted{ border-color:var(--osport-hairline); color:var(--osport-muted); }
.os-capsule.solid{ background:var(--osport-blue); color:#fff; border-color:var(--osport-blue); }

/* ---- Брендовая кнопка (pill) -------------------------------------------- */
.os-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px;
  font-weight:700; font-size:15px; border:0; cursor:pointer;
  background:var(--osport-blue); color:#fff;
  transition: filter .15s ease, transform .15s ease;
}
.os-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.os-btn:active{ transform:translateY(0); }
.os-btn.ghost{ background:#fff; color:var(--osport-blue); border:2px solid var(--osport-blue); }
.os-btn.rhino{ background:var(--osport-rhino); color:#fff; }

/* ---- Логотип ОСпорт в шапках --------------------------------------------
   Полноразмерный знак-вордмарк «СПОРТ» (атлет в круге) на белом скруглённом
   чипе — читается и на светлом, и на тёмном (rhino) хедере.
   Шапку переводим в flex, чтобы широкий вордмарк не упирался в grid-колонку. */
.brand-link{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  grid-template-columns:none !important;
}
.brand-logo{
  flex:0 0 auto !important;
  background-image:url("/static/os/logo_black.png") !important;
  background-color:#FFFFFF !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  border-radius:14px !important;
  box-shadow:0 8px 20px -14px rgba(48,59,109,.45) !important;
  height:52px !important;
  width:132px !important;
  padding:7px 16px !important;
  box-sizing:border-box !important;
  aspect-ratio:auto !important;
}

/* ============================================================================
   ПРОСТЫЕ КНОПКИ · замена легаси «РФСО»-стиля
   ----------------------------------------------------------------------------
   Раньше кнопки рисовались угловатой анимацией на clip-path/псевдоэлементах
   (заливка var(--rfso-btn-red)), шрифтом Bebas Neue и КАПСом. Этот слой
   подключается последним, поэтому переопределяет постраничные правила и
   приводит кнопки к простому виду: скруглённый прямоугольник, Montserrat.
   CTA — сплошная синяя заливка; вторичные ghost — белые с контуром.
   ============================================================================ */

/* 1. Убираем угловую анимацию-заливку (псевдоэлементы) */
.ghost-btn::before, .ghost-btn::after,
.primary-btn::before, .primary-btn::after,
.seg-btn::before, .seg-btn::after,
.pager-btn::before, .pager-btn::after,
.tab-btn::before, .tab-btn::after,
.mini-chip::before, .mini-chip::after,
.icon-btn.appeal::before, .icon-btn.appeal::after,
.mobile-cabinet-btn::before, .mobile-cabinet-btn::after,
#showMoreBtn::before, #showMoreBtn::after,
#hidePrevBtn::before, #hidePrevBtn::after{
  display:none !important;
  content:none !important;
}

/* 2. Базовая геометрия: скругление, обычный регистр, шрифт, без клипа */
.ghost-btn, .primary-btn, .seg-btn, .pager-btn, .tab-btn, .mini-chip,
.icon-btn.appeal, .mobile-cabinet-btn,
#showMoreBtn, #hidePrevBtn{
  border-radius:10px !important;
  -webkit-clip-path:none !important;
  clip-path:none !important;
  overflow:visible !important;
  isolation:auto !important;
  text-transform:none !important;
  letter-spacing:.01em !important;
  font-family:var(--osport-font) !important;
  transition:filter .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease !important;
}

/* 3. Главные/CTA-кнопки — сплошная синяя заливка */
.primary-btn,
.ghost-btn.desktop-cabinet-btn,
.icon-btn.mobile-cabinet-btn,
#showMoreBtn, #hidePrevBtn{
  background:var(--osport-blue) !important;
  color:#fff !important;
  border:1px solid var(--osport-blue) !important;
  box-shadow:var(--osport-shadow-sm) !important;
}
.primary-btn:hover, .primary-btn:focus, .primary-btn:active,
.ghost-btn.desktop-cabinet-btn:hover, .ghost-btn.desktop-cabinet-btn:focus,
.icon-btn.mobile-cabinet-btn:hover, .icon-btn.mobile-cabinet-btn:focus,
#showMoreBtn:hover, #showMoreBtn:focus, #hidePrevBtn:hover, #hidePrevBtn:focus{
  background:var(--osport-blue) !important;
  color:#fff !important;
  filter:brightness(.94) !important;
  transform:none !important;
}
.icon-btn.mobile-cabinet-btn img{ filter:brightness(0) invert(1) !important; }

/* 4. Вторичные ghost-кнопки (например «Отмена») — белый фон, лёгкий контур */
.ghost-btn:not(.desktop-cabinet-btn){
  background:#fff !important;
  color:var(--osport-blue) !important;
  border:1px solid var(--osport-hairline) !important;
  box-shadow:var(--osport-shadow-sm) !important;
}
.ghost-btn:not(.desktop-cabinet-btn):hover,
.ghost-btn:not(.desktop-cabinet-btn):focus{
  background:var(--osport-bg) !important;
  color:var(--osport-blue) !important;
  filter:none !important;
  transform:none !important;
}

/* 5. Переключатели/пагинация: спокойный фон, активное — синее */
.seg-btn, .pager-btn{
  background:#fff !important;
  color:var(--osport-ink) !important;
  border:1px solid var(--osport-hairline) !important;
  box-shadow:var(--osport-shadow-sm) !important;
}
.seg-btn:hover, .pager-btn:hover{
  filter:none !important; transform:none !important;
  border-color:var(--osport-blue) !important; color:var(--osport-blue) !important;
}
.seg-btn.active, .pager-btn.active{
  background:var(--osport-blue) !important;
  color:#fff !important;
  border-color:var(--osport-blue) !important;
}

/* 6. Иконочная кнопка апелляции в истории — простой синий квадрат */
.icon-btn.appeal{
  background:var(--osport-blue) !important;
  border:1px solid var(--osport-blue) !important;
  color:#fff !important;
}
.icon-btn.appeal img, .icon-btn.appeal svg{
  filter:brightness(0) invert(1) !important;
}