/* === Vertical Tabs — PRESET 2 (Glass / Elegant)
   Targets: .bb-tabs.tabs-preset-2  +  .bb-tab-panes.panes-preset-2
   Вертикальные «пилюли» слева, контент-карточки справа. Без фоновых изображений.
   ---------------------------------------------------------------------------- */

/* ──────────────────────────────────────────────────────────────
   ЛЕВАЯ КОЛОНКА: СПИСОК ВКЛАДОК (.bb-tabs.tabs-preset-2)
   Переменные можно переопределять локально под тему сайта.
   ────────────────────────────────────────────────────────────── */
.bb-tabs.tabs-preset-2 {
  /* Геометрия */
  --p2-w: 252px;             /* ширина левой колонки (200–300px) */
  --p2-radius: 16px;         /* скругление контейнера */
  --p2-pill-radius: 12px;    /* скругление «пилюль» вкладок */
  --p2-pad-x: 14px;          /* горизонтальный паддинг «пилюль» */
  --p2-pad-y: 10px;          /* вертикальный паддинг «пилюль» */
  --p2-gap:   10px;          /* расстояние между вкладками */

  /* Цвета / стекло / тени */
  --p2-text: #1f2328;        /* основной цвет текста вкладок */
  --p2-muted:#6b7280;        /* вторичный текст (если понадобится) */
  --p2-glass: rgba(255,255,255,.55); /* фон колонки (полупрозрачный) */
  --p2-border: rgba(15,23,42,.12);   /* цвет деликатных границ */
  --p2-hover: rgba(2,132,199,.10);   /* ховер-подсветка «пилюли» */
  --p2-active: rgba(2,132,199,.14);  /* активная «пилюля» */

  /* Акцентная полоса у активной вкладки (градиент сверху вниз) */
  --p2-accent-start: #60a5fa; /* верх градиента */
  --p2-accent-end:   #22d3ee; /* низ градиента */

  /* Тени */
  --p2-shadow-soft: 0 6px 18px rgba(2,6,23,.08);
  --p2-shadow-pill: 0 2px 10px rgba(2,6,23,.10);

  position: relative;
  display: inline-block;
  vertical-align: top;
  width: var(--p2-w);
  color: var(--p2-text);
  box-sizing: border-box;

  /* стеклянная панель */
  background: var(--p2-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  border-right: 1px solid var(--p2-border);
  border-top-left-radius: var(--p2-radius);
  border-bottom-left-radius: var(--p2-radius);
  padding: 12px 10px;
  box-shadow: var(--p2-shadow-soft);
}

/* элементы вкладок (поддержка разных разметок) */
.bb-tabs.tabs-preset-2 .tab,
.bb-tabs.tabs-preset-2 [role="tab"],
.bb-tabs.tabs-preset-2 .tabs__item,
.bb-tabs.tabs-preset-2 a,
.bb-tabs.tabs-preset-2 button {
  display: block;
  width: 100%;
  margin: 0 2px var(--p2-gap);
  padding: var(--p2-pad-y) var(--p2-pad-x);
  color: inherit;
  text-decoration: none;           /* убираем подчёркивание у ссылок-вкладок */
  cursor: pointer;

  /* стеклянная «пилюля» */
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  border: 1px solid var(--p2-border);
  border-left-width: 4px;          /* место под акцент у активной */
  border-radius: var(--p2-pill-radius);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  box-shadow: var(--p2-shadow-pill);
}
.bb-tabs.tabs-preset-2 .tab:hover,
.bb-tabs.tabs-preset-2 [role="tab"]:hover,
.bb-tabs.tabs-preset-2 .tabs__item:hover,
.bb-tabs.tabs-preset-2 a:hover,
.bb-tabs.tabs-preset-2 button:hover {
  background: var(--p2-hover);
}

/* активная / выбранная вкладка с градиентной полосой слева */
.bb-tabs.tabs-preset-2 .tab.active,
.bb-tabs.tabs-preset-2 .tab.is-active,
.bb-tabs.tabs-preset-2 [role="tab"][aria-selected="true"],
.bb-tabs.tabs-preset-2 .tabs__item.active,
.bb-tabs.tabs-preset-2 a.active,
.bb-tabs.tabs-preset-2 button.active {
  background: var(--p2-active);
  color: #0b1220;
  font-weight: 600;
  border-color: var(--p2-border);
  border-left: 0; /* убираем стандартную левую границу и рисуем свою псевдо-полосу */
  position: relative;
}
.bb-tabs.tabs-preset-2 .tab.active::before,
.bb-tabs.tabs-preset-2 .tab.is-active::before,
.bb-tabs.tabs-preset-2 [role="tab"][aria-selected="true"]::before,
.bb-tabs.tabs-preset-2 .tabs__item.active::before,
.bb-tabs.tabs-preset-2 a.active::before,
.bb-tabs.tabs-preset-2 button.active::before {
  content: "";
  position: absolute;
  left: -2px; top: -1px; bottom: -1px;
  width: 6px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--p2-accent-start), var(--p2-accent-end));
}

/* доступность: видимая клавиатурная обводка */
.bb-tabs.tabs-preset-2 .tab:focus-visible,
.bb-tabs.tabs-preset-2 [role="tab"]:focus-visible,
.bb-tabs.tabs-preset-2 .tabs__item:focus-visible,
.bb-tabs.tabs-preset-2 a:focus-visible,
.bb-tabs.tabs-preset-2 button:focus-visible {
  outline: 2px solid var(--p2-accent-start);
  outline-offset: -2px;
}

/* ──────────────────────────────────────────────────────────────
   ПРАВАЯ КОЛОНКА: ПАНЕЛИ КОНТЕНТА (.bb-tab-panes.panes-preset-2)
   ────────────────────────────────────────────────────────────── */
.bb-tab-panes.panes-preset-2 {
  /* геометрия и цвета карточек */
  --pane-gap-left: 18px;                 /* отступ от левой колонки */
  --pane-text: #0f172a;                  /* основной текст контента */
  --pane-bg:   #ffffff;                  /* фон карточки */
  --pane-border: rgba(15,23,42,.12);     /* рамка карточки */
  --pane-radius: 16px;                   /* скругление карточки */
  --pane-pad-x: 20px;
  --pane-pad-y: 16px;
  --pane-shadow: 0 10px 30px rgba(2,6,23,.08);

  display: inline-block;
  vertical-align: top;
  width: calc(100% - var(--p2-w));
  padding-left: var(--pane-gap-left);
  color: var(--pane-text);
  box-sizing: border-box;
}

/* панели (по умолчанию скрыты) */
.bb-tab-panes.panes-preset-2 .pane,
.bb-tab-panes.panes-preset-2 [role="tabpanel"],
.bb-tab-panes.panes-preset-2 .tabs__pane {
  display: none;
  background: var(--pane-bg);
  border: 1px solid var(--pane-border);
  border-radius: var(--pane-radius);
  padding: var(--pane-pad-y) var(--pane-pad-x);
  box-shadow: var(--pane-shadow);
  box-sizing: border-box;
}

/* показываем активную */
.bb-tab-panes.panes-preset-2 .pane.active,
.bb-tab-panes.panes-preset-2 .pane.is-active,
.bb-tab-panes.panes-preset-2 [role="tabpanel"][aria-hidden="false"],
.bb-tab-panes.panes-preset-2 .tabs__pane.active,
.bb-tab-panes.panes-preset-2 .tabs__pane.is-active {
  display: block;
}

/* заголовки в карточке */
.bb-tab-panes.panes-preset-2 h1,
.bb-tab-panes.panes-preset-2 h2,
.bb-tab-panes.panes-preset-2 h3 {
  margin: 0.2em 0 0.5em;
  color: #0b1220;
}

/* ссылки в карточке — оставляем привычные, подчёркнутые */
.bb-tab-panes.panes-preset-2 a { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────
   АДАПТИВ: на узких экранах превращаемся в «почти горизонтальные»
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .bb-tabs.tabs-preset-2 {
    width: 100%;
    border-right: none;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--p2-radius);
    padding: 10px 8px;
  }
  .bb-tab-panes.panes-preset-2 {
    width: 100%;
    padding-left: 0;
    margin-top: 10px;
  }
  /* вкладки в линию */
  .bb-tabs.tabs-preset-2 .tab,
  .bb-tabs.tabs-preset-2 [role="tab"],
  .bb-tabs.tabs-preset-2 .tabs__item,
  .bb-tabs.tabs-preset-2 a,
  .bb-tabs.tabs-preset-2 button {
    display: inline-block;
    margin: 0 8px 8px 0;
    border-left-width: 0;
  }
  .bb-tabs.tabs-preset-2 .tab.active::before,
  .bb-tabs.tabs-preset-2 [role="tab"][aria-selected="true"]::before,
  .bb-tabs.tabs-preset-2 .tabs__item.active::before,
  .bb-tabs.tabs-preset-2 a.active::before,
  .bb-tabs.tabs-preset-2 button.active::before {
    left: 50%;
    transform: translateX(-50%);
    top: auto; bottom: -3px;
    width: 60%;
    height: 4px;              /* превращаем индикатор в нижнюю «чёрточку» */
    border-radius: 999px;
  }
}

/* ──────────────────────────────────────────────────────────────
   (опционально) Тёмная тема по системному предпочтению.
   Переопределяет только ключевые переменные для гармонии.
   ────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .bb-tabs.tabs-preset-2 {
    --p2-text: #e6eaf0;
    --p2-glass: rgba(17,24,39,.45);
    --p2-border: rgba(226,232,240,.12);
    --p2-hover: rgba(96,165,250,.15);
    --p2-active: rgba(96,165,250,.22);
    --p2-shadow-soft: 0 6px 18px rgba(0,0,0,.35);
    --p2-shadow-pill: 0 2px 10px rgba(0,0,0,.35);
  }
  .bb-tab-panes.panes-preset-2 {
    --pane-text: #e6eaf0;
    --pane-bg: #111827;
    --pane-border: rgba(226,232,240,.14);
    --pane-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
}