/* =================== Конструктор создан Kolobdur при использовании СhatGpt / The constructor was created by Kolobdur using ChatGPT =================== */

/* =================== Стиль конструктора. Вкладки. =================== */

/* ──────────────────────────────────────────────────────────────
   ЭЛЕМЕНТЫ ВКЛАДОК (левая колонка)
   ────────────────────────────────────────────────────────────── */
#pun-main .bb-tabs{
  display: inline-block;
  vertical-align: top;
  width: 100%;
  background: #f6f7f8;
  border-right: 1px solid #d6d6d6;
  color: inherit;
  font: inherit;
  box-sizing: border-box;
  padding: 0; /* сам список управляет отступами */
}

/* UL и LI */
#pun-main .bb-tabs .bb-tabs-nav{
  margin: 0;
  padding: 0;
  list-style: none;
}
#pun-main .bb-tabs .bb-tabs-nav > li{
  margin: 0;
  list-style: none;
}

/* Ссылки-вкладки */
#pun-main .bb-tabs .bb-tabs-nav > li > a{
  display: block;
  width: 100%;
  padding: 10px 12px;
  text-decoration: none !important;
  color: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  cursor: pointer;
  border-left: 3px solid transparent;      /* полоса-акцент у активной */
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  box-sizing: border-box;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#pun-main .bb-tabs .bb-tabs-nav > li > a:hover{
  background: #eef1f3;
}

/* Активная вкладка (is-active стоит на <li>) */
#pun-main .bb-tabs .bb-tabs-nav > li.is-active > a{
  background: #ffffff;
  border-left-color: #2b76d2;
  font-weight: 600;
  color: #111;
}

/* Фокус по клавиатуре */
#pun-main .bb-tabs .bb-tabs-nav > li > a:focus-visible{
  outline: 2px solid #2b76d2;
  outline-offset: -2px;
}

/* ──────────────────────────────────────────────────────────────
   ПРАВАЯ КОЛОНКА (контент вкладок)
   ────────────────────────────────────────────────────────────── */  
#pun-main .bb-tab-panes{
  display:inline-block;
  vertical-align:top;
  width:100%;
  padding-left:16px;   /* если панель справа — можно убрать при двух колонках */
  color:#222;
  box-sizing:border-box;
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────
   Reveal-анимация для содержимого вкладок
   ────────────────────────────────────────────────────────────── */  

/* базовые */
.bb-tab-panes, .bb-tab-pane { height: 100%; }
.bb-tab-pane { overflow: auto; }
.bb-tab-pane.bb-reveal-prep { opacity: 0; }
.bb-tab-pane.bb-reveal-go { opacity: 1; transform: none; transition: transform 300ms ease, opacity 260ms ease; will-change: transform, opacity; }

/* направления: «из конца в начало» */
.bb-tab-panes .bb-tab-pane.bb-reveal-from-right  { transform: translateX(100%); }
.bb-tab-panes .bb-tab-pane.bb-reveal-from-left   { transform: translateX(-100%); } /* для RTL */
.bb-tab-panes .bb-tab-pane.bb-reveal-from-top    { transform: translateY(-100%); }
.bb-tab-panes .bb-tab-pane.bb-reveal-from-bottom { transform: translateY(100%); }