/* ============================================================
   Охвати Бизнес — redesign shell (плавающий сайдбар + топбар)
   Светлая тема (tokens.md → light). Глобальный «каркас» поверх
   контента страниц; тела страниц не меняются.
   Источник дизайна: design_handoff_operacionnaya_platforma.
   ============================================================ */

.opx {
  /* --- light theme tokens (tokens.md) --- */
  --bg:#f4f5f8;
  --topbar:rgba(244,245,248,.86);
  --panel:#ffffff;
  --raised:#eef0f5;
  --raised2:#f0f1f6;
  --border:#e7e9ef;
  --border2:#dfe2ea;
  --chip:#eceeff;
  --line:#d8dbe4;
  --text:#15171f;
  --text2:#3a4150;
  --text3:#5a6273;
  --text4:#6f7686;
  --text5:#8a909e;
  --label:#9aa1b0;
  --accent:#F52C44;
  --accent2:#F52C44;
  --accent-deep:#ba2134;
  --ok:#0fa37f;
  --ok-bg:#e3f5ef;
  --down:#e0483f;
  --side-w:256px;
  --side-w-collapsed:78px;
}

body.opx { background:var(--bg); }

/* ---------- shell layout ---------- */
.opx-shell { display:flex; align-items:flex-start; min-height:100vh; }
.opx-main {
  flex:1; min-width:0; display:flex; flex-direction:column;
  /* фикс-сайдбар вне потока — резервируем место под него слева */
  margin-left:calc(var(--side-w) + 28px);
  transition:margin-left 420ms cubic-bezier(.22,.61,.36,1);
}
.opx-shell:has(.opx-side.collapsed) .opx-main { margin-left:calc(var(--side-w-collapsed) + 28px); }

/* Единый платформенный фон по всему сайту: верхнеуровневые секции контента
   больше не заливаются белым — белыми остаются только карточки/панели внутри,
   а подложка везде одна (var(--bg)). */
.opx-main > main > section,
.opx-main > section { background-color:transparent !important; }

/* ---------- sidebar ---------- */
.opx-side {
  flex:none;
  width:var(--side-w);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:24px;
  /* fixed: сайдбар закреплён к окну и остаётся на месте при прокрутке страницы.
     position:sticky здесь не работает — у html/body на сайте overflow-x:hidden
     (responsive-fix.css), а это ломает sticky у потомков; fixed относительно
     вьюпорта надёжен. Высота во весь экран, длинное меню скроллится внутри. */
  position:fixed;
  top:14px;
  left:14px;
  margin:0;
  height:calc(100vh - 28px);
  display:flex;
  flex-direction:column;
  box-shadow:0 18px 48px -16px rgba(20,23,33,.18);
  transition:width 420ms cubic-bezier(.22,.61,.36,1);
  z-index:40;
  font-family:'Manrope',sans-serif;
  color:var(--text);
}
.opx-side.collapsed { width:var(--side-w-collapsed); }

/* collapse handle */
.opx-collapse {
  position:absolute; top:50%; right:-14px; transform:translateY(-50%);
  z-index:30; display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--panel); border:1px solid var(--border2); color:var(--text3);
  cursor:pointer; box-shadow:0 4px 14px -2px rgba(20,23,33,.18);
}
.opx-collapse svg { transition:transform 420ms cubic-bezier(.22,.61,.36,1); }
.opx-side.collapsed .opx-collapse svg { transform:rotate(180deg); }

/* logo */
.opx-logohead { height:74px; flex:none; display:flex; align-items:center; padding:0 18px; overflow:hidden; }
.opx-side.collapsed .opx-logohead { justify-content:center; padding:0; }
/* 1-в-1 как на проде (.oxnav-brand / .brand-word): чёрная «охвати» Nunito Sans 600
   + «бизнес» белым на красном, padding 2px 5px, radius 15px, border 2px. Размер
   уменьшен с прод-26px до 23px под ширину сайдбара. */
.opx-brand-full {
  display:flex; align-items:center; gap:6px;
  font-family:'Nunito Sans',sans-serif; font-weight:600; font-size:23px;
  white-space:nowrap; color:#000; text-decoration:none;
}
.opx-brand-full .b { background:var(--accent); color:#fff; padding:2px 5px; border:2px solid var(--accent); border-radius:15px; font-size:23px; font-weight:600; line-height:1; }
/* Свёрнутый знак — те же буквы/шрифт/бейдж, что и полный логотип, только «о» + «б»:
   чёрная «о» Nunito Sans 600 + «б» белым на красном бейдже (как «бизнес»). */
.opx-brand-mini {
  display:none; align-items:center; gap:2px;
  font-family:'Nunito Sans',sans-serif; font-weight:600; font-size:23px; line-height:1;
  color:#000; text-decoration:none;
}
.opx-brand-mini .b {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; border:2px solid var(--accent); border-radius:11px;
  padding:1px 6px; font-size:23px; font-weight:600; line-height:1;
}
.opx-side.collapsed .opx-brand-full { display:none; }
.opx-side.collapsed .opx-brand-mini { display:inline-flex; }

/* nav scroll area */
.opx-nav {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:6px 14px 10px; display:flex; flex-direction:column; gap:2px;
}
.opx-nav::-webkit-scrollbar { width:8px; }
.opx-nav::-webkit-scrollbar-thumb { background:var(--border2); border-radius:8px; }
.opx-nav::-webkit-scrollbar-track { background:transparent; }
.opx-side.collapsed .opx-nav { padding-left:0; padding-right:0; }
.opx-side.collapsed .opx-nav::-webkit-scrollbar { width:0; }

/* section label */
.opx-seclabel {
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--label); padding:14px 12px 5px; white-space:nowrap; transition:opacity 180ms ease;
}
/* В свёрнутом виде заголовки разделов сохраняют свою высоту (скрываем только текст),
   чтобы иконки стояли на тех же вертикальных позициях, что и в развёрнутом —
   тогда схлопывание выглядит как сжатие того же сайдбара, а не новый мини-сайдбар. */
.opx-side.collapsed .opx-seclabel { opacity:0; pointer-events:none; }

/* nav row */
.opx-row {
  display:flex; align-items:center; gap:11px; height:46px;
  border-radius:13px; padding:0 10px; text-decoration:none;
  color:var(--text3); font-weight:500; position:relative; cursor:pointer;
}
.opx-row:hover { background:color-mix(in srgb, var(--text3) 9%, transparent); }
.opx-side.collapsed .opx-row { justify-content:center; gap:0; padding-left:0; padding-right:0; }
.opx-ico {
  display:grid; place-items:center; width:36px; height:36px; border-radius:11px;
  flex:none; background:rgba(124,130,150,.12); color:var(--text3);
}
.opx-rowlabel { flex:1; font-size:14px; white-space:nowrap; transition:opacity 180ms ease; }
.opx-side.collapsed .opx-rowlabel { opacity:0; width:0; flex:0 0 0; margin:0; overflow:hidden; pointer-events:none; }

/* active row — без подложки: индикатор только красная иконка (+ чуть тёмный/жирный текст) */
.opx-row.opx-active { color:var(--text); font-weight:600; }
.opx-row.opx-active .opx-ico {
  background:var(--accent); color:#fff;
  box-shadow:0 4px 14px -2px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* tooltip when collapsed */
.opx-tip {
  display:none; position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:var(--text); color:#fff; font-size:12px; font-weight:600;
  padding:6px 10px; border-radius:8px; white-space:nowrap; z-index:50; pointer-events:none;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.3);
}
.opx-side.collapsed .opx-row:hover .opx-tip { display:none; }

/* sidebar footer */
.opx-side-foot {
  padding:12px 14px 14px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:10px; flex:none; overflow:hidden;
}
.opx-rate {
  background:var(--raised); border:1px solid var(--border2); border-radius:12px;
  padding:13px 14px; display:flex; align-items:center; justify-content:space-between; min-width:0;
}
.opx-rate-l { min-width:0; }
.opx-rate-cap { font-size:10px; color:var(--text4); margin-bottom:2px; white-space:nowrap; }
.opx-rate-val { font-family:'Manrope',sans-serif; font-weight:800; font-size:20px; }
.opx-rate-tag { font-family:'Manrope',sans-serif; font-size:11px; color:var(--down); white-space:nowrap; }
.opx-rate-mini {
  display:none; background:var(--raised); border:1px solid var(--border2); border-radius:13px;
  width:46px; height:46px; flex-direction:column; align-items:center; justify-content:center;
  align-self:center; gap:1px; text-decoration:none;
}
.opx-rate-mini b { font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; color:var(--text); line-height:1; }
.opx-rate-mini span { font-size:8px; color:var(--text4); line-height:1; }
.opx-lk-full {
  display:block; text-align:center; border:1px solid var(--line); background:transparent; color:var(--text);
  font-family:inherit; font-weight:600; font-size:13px; padding:11px; border-radius:10px; cursor:pointer;
  white-space:nowrap; text-decoration:none;
}
.opx-lk-mini {
  display:none; border:1px solid var(--line); background:transparent; color:var(--text3);
  width:46px; height:46px; border-radius:13px; cursor:pointer; align-items:center; justify-content:center;
  align-self:center; text-decoration:none;
}
.opx-side.collapsed .opx-rate,
.opx-side.collapsed .opx-lk-full { display:none; }
.opx-side.collapsed .opx-rate-mini { display:flex; }
.opx-side.collapsed .opx-lk-mini { display:flex; }

/* ---------- hover-to-expand (свёрнутый сайдбар раскрывается при наведении) ----------
   Сайдбар position:fixed, поэтому при наведении он раскрывается ПОВЕРХ контента
   (контент не сдвигается), а при уходе мыши снова сворачивается. По сути на :hover
   возвращаем «развёрнутый» вид; ширина анимируется (transition:width на .opx-side). */
.opx-side.collapsed:hover { width:var(--side-w); box-shadow:0 18px 60px -10px rgba(20,23,33,.30); }
.opx-side.collapsed:hover .opx-logohead { justify-content:flex-start; padding:0 18px; }
.opx-side.collapsed:hover .opx-brand-full { display:flex; }
.opx-side.collapsed:hover .opx-brand-mini { display:none; }
.opx-side.collapsed:hover .opx-nav { padding:6px 14px 10px; align-items:stretch; }
.opx-side.collapsed:hover .opx-nav::-webkit-scrollbar { width:8px; }
.opx-side.collapsed:hover .opx-row { justify-content:flex-start; gap:11px; padding:0 10px; }
.opx-side.collapsed:hover .opx-rowlabel { opacity:1; width:auto; flex:1; margin:0; pointer-events:auto; }
.opx-side.collapsed:hover .opx-seclabel { opacity:1; pointer-events:auto; }
.opx-side.collapsed:hover .opx-rate { display:flex; }
.opx-side.collapsed:hover .opx-lk-full { display:block; }
.opx-side.collapsed:hover .opx-rate-mini,
.opx-side.collapsed:hover .opx-lk-mini { display:none; }

/* ---------- topbar ---------- */
.opx-topbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px; padding:14px 36px;
  background:var(--topbar); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); font-family:'Manrope',sans-serif; color:var(--text);
}
.opx-burger {
  display:none; width:40px; height:40px; border:1px solid var(--border2); border-radius:10px;
  background:var(--panel); color:var(--text2); cursor:pointer; place-items:center; flex:none;
}
.opx-ticker { display:flex; align-items:center; gap:18px; overflow:hidden; min-width:0; }
.opx-ticker-badge {
  display:inline-flex; align-items:center; gap:7px; background:var(--ok-bg); color:var(--ok);
  font-size:12px; font-weight:600; padding:6px 12px; border-radius:100px; white-space:nowrap;
}
.opx-ticker-badge i { width:7px; height:7px; border-radius:50%; background:var(--ok); }
.opx-tick { font-family:'Manrope',sans-serif; font-size:12px; color:var(--text3); white-space:nowrap; }
.opx-tick b { color:var(--accent2); font-weight:600; }
.opx-topbar-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.opx-phone { font-weight:700; font-size:14px; white-space:nowrap; color:var(--text); text-decoration:none; }
.opx-cta {
  border:none; background:var(--accent); color:#fff; font-family:inherit; font-weight:700; font-size:13px;
  padding:10px 18px; border-radius:10px; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-block;
}

/* backdrop for mobile drawer */
.opx-backdrop { display:none; position:fixed; inset:0; background:rgba(15,17,25,.45); z-index:39; }
.opx-backdrop.opx-show { display:block; }



/* ---------- breadcrumbs ---------- */
.opx-breadcrumbs {
  max-width:1180px;
  width:100%;
  margin:24px auto 0;
  padding:0 24px;
  font-family:'Manrope',sans-serif;
  color:var(--text4);
}
.opx-breadcrumbs ol {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
  line-height:1.45;
}
.opx-breadcrumbs li {
  display:flex;
  align-items:center;
  min-width:0;
}
.opx-breadcrumbs li + li::before {
  content:'›';
  margin-right:8px;
  color:var(--text5);
}
.opx-breadcrumbs a {
  color:var(--text4);
  text-decoration:none;
}
.opx-breadcrumbs a:hover { color:var(--accent); }
.opx-breadcrumbs span[aria-current="page"] { color:var(--text2); font-weight:600; }
@media (max-width:560px){ .opx-breadcrumbs { margin-top:18px; padding:0 16px; } }





/* ---------- product disclaimers ---------- */
.opx-product-disclaimer {
  max-width:1180px;
  margin:28px auto 0;
  padding:0 24px;
  font-family:'Manrope',sans-serif;
}
.opx-product-disclaimer > div {
  padding:18px 20px;
  border:1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius:18px;
  background:color-mix(in srgb, var(--accent) 5%, #fff);
  color:var(--text3);
}
.opx-product-disclaimer strong { display:block; color:var(--text); margin-bottom:6px; font-size:14px; }
.opx-product-disclaimer p { margin:0; font-size:13px; line-height:1.6; }
@media (max-width:560px){ .opx-product-disclaimer { padding:0 16px; } }

/* ---------- responsive: sidebar → off-canvas drawer ---------- */
@media (max-width:1023px){
  .opx-burger { display:grid; }
  .opx-topbar { padding:12px 18px; }
  .opx-ticker { display:none; }
  .opx-main { margin-left:0; } /* на мобиле сайдбар — drawer, колонка во всю ширину */

  .opx-side {
    position:fixed; top:0; left:0; bottom:0; height:100vh; margin:0;
    border-radius:0 18px 18px 0; transform:translateX(-110%);
    transition:transform 320ms cubic-bezier(.22,.61,.36,1);
    box-shadow:0 18px 60px -10px rgba(20,23,33,.35);
  }
  .opx-side.opx-open { transform:translateX(0); }
  .opx-collapse { display:none; }

  /* в drawer всегда показываем «развёрнутый» вид, игнорируя desktop-collapse */
  .opx-side.collapsed { width:var(--side-w); }
  .opx-side.collapsed .opx-logohead { justify-content:flex-start; padding:0 18px; }
  .opx-side.collapsed .opx-brand-full { display:flex; }
  .opx-side.collapsed .opx-brand-mini { display:none; }
  .opx-side.collapsed .opx-nav { padding:6px 14px 10px; align-items:stretch; }
  .opx-side.collapsed .opx-row { justify-content:flex-start; gap:11px; padding:0 10px; }
  .opx-side.collapsed .opx-rowlabel { opacity:1; width:auto; flex:1; pointer-events:auto; }
  .opx-side.collapsed .opx-seclabel { opacity:1; height:auto; padding:14px 12px 5px; pointer-events:auto; }
  .opx-side.collapsed .opx-rate { display:flex; }
  .opx-side.collapsed .opx-lk-full { display:block; }
  .opx-side.collapsed .opx-rate-mini,
  .opx-side.collapsed .opx-lk-mini { display:none; }
}
@media (max-width:560px){
  .opx-phone { display:none; }
  .opx-topbar { padding:10px 14px; }
}