/* === Vertical Tabs — PRESET 1 (pill, round frame, corner drops)
   Targets: .bb-tabs.tabs-preset-1  +  .bb-tab-panes.panes-preset-1
   - Более круглая рамка
   - Угловые «капли» на углах контейнеров
   - Без фона у левой колонки
   - Вкладки-пилюли полупрозрачные
*/

/* ── ЛЕВАЯ КОЛОНКА: СПИСОК ВКЛАДОК ─────────────────────────── */
.bb-tabs.tabs-preset-1 {
  /* Ширина колонки со вкладками (рекомендуемо 200–300px) */
  --p1-w: 260px;

  /* Основной цвет текста во вкладках (светлый/тёмный — под тему сайта) */
  --p1-text:  #e9f2ee;    /* ← светлый текст, если фон страницы тёмный
                             при светлой странице можно поставить #1f2328 */

  /* Вторичный текст: подписи/мелкие элементы (используй локально при надобности) */
  --p1-muted: #b9c7c1;

  /* Цвет линий/рамок (деликатный) */
  --p1-border: rgba(63,177,149,.35);

  /* Акцент (и цвет «капель») — мятно-зелёный/бирюза */
  --p1-accent: #3bb195;

  /* Параметры «пилюль» (полупрозрачные кнопки) */
  --p1-pill-bg:        rgba(59,177,149,.10);
  --p1-pill-bg-hover:  rgba(59,177,149,.16);
  --p1-pill-bg-active: rgba(59,177,149,.22);

  /* Геометрия */
  --p1-host-radius: 18px;  /* более круглая рамка общего блока */
  --p1-pad-x: 14px;        /* горизонтальный паддинг у вкладок */
  --p1-pad-y: 10px;        /* вертикальный паддинг у вкладок */
  --p1-gap:   10px;        /* расстояние между вкладками */
  --p1-pill-radius: 999px; /* «пилюля» */

  /* «Капли» в углах левой колонки */
  --p1-drop-size:   12px;                    /* диаметр капли */
  --p1-drop-offset: 8px;                     /* насколько выступает за пределы */
  --p1-drop-color:  color-mix(in srgb, var(--p1-accent) 65%, transparent);

  position: relative;
  display: inline-block;
  vertical-align: top;
  width: var(--p1-w);
  background: transparent;                   /* без фона */
  color: var(--p1-text);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-sizing: border-box;
  border-right: 1px solid var(--p1-border);  /* деликатное разделение с контентом */
  border-top-left-radius: var(--p1-host-radius);
  border-bottom-left-radius: var(--p1-host-radius);
  padding: 12px 10px;
  overflow: visible;                          /* чтобы «капли» выступали */
}

/* Угловые «капли» — слева сверху и слева снизу */
.bb-tabs.tabs-preset-1::before,
.bb-tabs.tabs-preset-1::after {
  content: "";
  position: absolute;
  width: var(--p1-drop-size);
  height: var(--p1-drop-size);
  border-radius: 50%;
  background: var(--p1-drop-color);
  pointer-events: none;
  z-index: 1;
}
.bb-tabs.tabs-preset-1::before {
  top: calc(-1 * var(--p1-drop-offset));
  left: calc(-1 * var(--p1-drop-offset));
}
.bb-tabs.tabs-preset-1::after {
  bottom: calc(-1 * var(--p1-drop-offset));
  left:  calc(-1 * var(--p1-drop-offset));
}

/* Вкладки (пилюли, полупрозрачные) */
.bb-tabs.tabs-preset-1 .tab,
.bb-tabs.tabs-preset-1 [role="tab"],
.bb-tabs.tabs-preset-1 .tabs__item,
.bb-tabs.tabs-preset-1 a,
.bb-tabs.tabs-preset-1 button {
  display: block;
  width: 100%;
  margin: 0 2px var(--p1-gap);
  padding: var(--p1-pad-y) var(--p1-pad-x);
  color: inherit;
  text-decoration: none;              /* убрать подчёркивание */
  cursor: pointer;
  background: var(--p1-pill-bg);      /* полупрозрачная кнопка */
  border: 1px solid var(--p1-border);
  border-left-width: 3px;             /* под акцент активной */
  border-radius: var(--p1-pill-radius);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bb-tabs.tabs-preset-1 .tab:hover,
.bb-tabs.tabs-preset-1 [role="tab"]:hover,
.bb-tabs.tabs-preset-1 .tabs__item:hover,
.bb-tabs.tabs-preset-1 a:hover,
.bb-tabs.tabs-preset-1 button:hover {
  background: var(--p1-pill-bg-hover);
}

/* Активная вкладка — чуть плотнее и с акцентной полосой */
.bb-tabs.tabs-preset-1 .tab.active,
.bb-tabs.tabs-preset-1 .tab.is-active,
.bb-tabs.tabs-preset-1 [role="tab"][aria-selected="true"],
.bb-tabs.tabs-preset-1 .tabs__item.active,
.bb-tabs.tabs-preset-1 a.active,
.bb-tabs.tabs-preset-1 button.active {
  background: var(--p1-pill-bg-active);
  border-color: color-mix(in srgb, var(--p1-accent) 55%, transparent);
  border-left-color: var(--p1-accent);
  color: #ffffff;
  font-weight: 600;
}

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

/* ── ПРАВАЯ КОЛОНКА: ПАНЕЛИ (PANES — preset 1) ───────────────── */
.bb-tab-panes.panes-preset-1 {
  /* Отступ от левой колонки */
  --pane-gap-left: 18px;

  /* Цвета и геометрия панели контента */
  --pane-text:   #23302d;
  --pane-border: #d5dad8;
  --pane-bg:     #ffffff;
  --pane-radius: 16px;   /* более круглая рамка панелей */
  --pane-pad-x:  18px;
  --pane-pad-y:  14px;

  /* «Капли» на правой колонке (справа сверху/снизу) */
  --pane-drop-size:   12px;
  --pane-drop-offset: 8px;
  --pane-drop-color:  color-mix(in srgb, var(--p1-accent) 55%, transparent);

  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(100% - var(--p1-w));
  padding-left: var(--pane-gap-left);
  color: var(--pane-text);
  box-sizing: border-box;
  overflow: visible;
}
/* Капли справа сверху/снизу */
.bb-tab-panes.panes-preset-1::before,
.bb-tab-panes.panes-preset-1::after {
  content: "";
  position: absolute;
  width: var(--pane-drop-size);
  height: var(--pane-drop-size);
  border-radius: 50%;
  background: var(--pane-drop-color);
  pointer-events: none;
  z-index: 1;
}
.bb-tab-panes.panes-preset-1::before {
  top:  calc(-1 * var(--pane-drop-offset));
  right: calc(-1 * var(--pane-drop-offset));
}
.bb-tab-panes.panes-preset-1::after {
  bottom: calc(-1 * var(--pane-drop-offset));
  right:  calc(-1 * var(--pane-drop-offset));
}

/* Панели содержимого (скрыты по умолчанию) */
.bb-tab-panes.panes-preset-1 .pane,
.bb-tab-panes.panes-preset-1 [role="tabpanel"],
.bb-tab-panes.panes-preset-1 .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-sizing: border-box;
}
/* Активная панель показывается */
.bb-tab-panes.panes-preset-1 .pane.active,
.bb-tab-panes.panes-preset-1 .pane.is-active,
.bb-tab-panes.panes-preset-1 [role="tabpanel"][aria-hidden="false"],
.bb-tab-panes.panes-preset-1 .tabs__pane.active,
.bb-tab-panes.panes-preset-1 .tabs__pane.is-active {
  display: block;
}

/* ── АДАПТИВ (складка в горизонтальные) ─────────────────────── */
@media (max-width: 640px) {
  .bb-tabs.tabs-preset-1 {
    width: 100%;
    border-right: none;
    padding: 10px 6px;
  }
  .bb-tab-panes.panes-preset-1 {
    width: 100%;
    padding-left: 0;
    margin-top: 10px;
  }
  .bb-tabs.tabs-preset-1 .tab,
  .bb-tabs.tabs-preset-1 [role="tab"],
  .bb-tabs.tabs-preset-1 .tabs__item,
  .bb-tabs.tabs-preset-1 a,
  .bb-tabs.tabs-preset-1 button {
    display: inline-block;
    border-left-width: 0;
    border-bottom: 2px solid transparent;
    margin: 0 8px 8px 0;
    border-radius: 10px;
  }
  .bb-tabs.tabs-preset-1 .tab.active,
  .bb-tabs.tabs-preset-1 [role="tab"][aria-selected="true"],
  .bb-tabs.tabs-preset-1 .tabs__item.active,
  .bb-tabs.tabs-preset-1 a.active,
  .bb-tabs.tabs-preset-1 button.active {
    border-bottom-color: var(--p1-accent);
  }
}