/* Horizontal inline tabs (segment switcher inside cards/forms)

 * Вариант #1: .bsftui-inline-tabs

 * Вариант #2: .bsftui-inline-tabs.bsftui-inline-tabs--underline

 * Вариант #3: .bsftui-inline-tabs.bsftui-inline-tabs--icons

 *

 * URL-состояние вкладки включено по умолчанию (query-параметр).

 * Один блок на странице: inline_tab. Несколько: inline_tab_1, inline_tab_2…

 * Свой ключ: data-bsftui-inline-tabs-query-key="style_tab"

 * Отключить: data-bsftui-inline-tabs-query-key="off"

 */

.bsftui-inline-tabs {

  --bsftui-inline-tabs-bg: #f1f5f9;

  --bsftui-inline-tabs-border: #e2e8f0;

  --bsftui-inline-tabs-text: #64748b;

  --bsftui-inline-tabs-active-bg: #ffffff;

  --bsftui-inline-tabs-active-text: #7c3aed;

  --bsftui-inline-tabs-active-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);

}



.bsftui-inline-tabs__nav {

  display: inline-flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 4px;

  padding: 4px;

  background: var(--bsftui-inline-tabs-bg);

  border: 1px solid var(--bsftui-inline-tabs-border);

  border-radius: 12px;

  margin-bottom: 12px;

}



.bsftui-inline-tabs__item {

  border: none;

  background: transparent;

  color: var(--bsftui-inline-tabs-text);

  padding: 8px 16px;

  border-radius: 8px;

  font-size: 15px;

  line-height: 1.2;

  cursor: pointer;

  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

  white-space: nowrap;

}



.bsftui-inline-tabs__item:hover {

  color: #334155;

}



.bsftui-inline-tabs__item.is-active {

  background: var(--bsftui-inline-tabs-active-bg);

  color: var(--bsftui-inline-tabs-active-text);

  font-weight: 600;

  box-shadow: var(--bsftui-inline-tabs-active-shadow);

}



.bsftui-inline-tabs__panels {

  display: block;

  transition: opacity 0.18s ease, visibility 0.18s ease;

}



.bsftui-inline-tabs__panel {

  display: none;

}



.bsftui-inline-tabs__panel.is-active {

  display: block;

}



[data-bsftui-inline-tabs]:not(.is-ready) .bsftui-inline-tabs__panels,

[data-bsftui-inline-tabs].is-switching .bsftui-inline-tabs__panels {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



[data-bsftui-inline-tabs].is-ready:not(.is-switching) .bsftui-inline-tabs__panels {

  opacity: 1;

  visibility: visible;

}



@media (prefers-reduced-motion: reduce) {

  .bsftui-inline-tabs__panels {

    transition: none;

  }

}



.bsftui-inline-tabs__heading {

  font-size: 20px;

  font-weight: 600;

  color: #334155;

  margin: 0 0 12px;

  line-height: 1.3;

}



/* Underline variant — Вариант #2 */

.bsftui-inline-tabs--underline {

  --bsftui-inline-tabs-bg: transparent;

  --bsftui-inline-tabs-border: transparent;

}



.bsftui-inline-tabs--underline .bsftui-inline-tabs__nav {

  display: flex;

  width: 100%;

  gap: 0;

  padding: 0;

  background: transparent;

  border: none;

  border-bottom: 1px solid #e2e8f0;

  border-radius: 0;

  margin-bottom: 14px;

}



.bsftui-inline-tabs--underline .bsftui-inline-tabs__item {

  flex: 1 1 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  border-radius: 0;

  padding: 10px 12px;

  margin-bottom: -1px;

  border-bottom: 2px solid transparent;

  box-shadow: none;

  background: transparent;

  font-weight: 500;

}



.bsftui-inline-tabs--underline .bsftui-inline-tabs__item:hover {

  color: #334155;

}



.bsftui-inline-tabs--underline .bsftui-inline-tabs__item.is-active {

  background: transparent;

  color: #7c3aed;

  font-weight: 600;

  box-shadow: none;

  border-bottom-color: #7c3aed;

}



.bsftui-inline-tabs--underline .bsftui-inline-tabs__item.is-active::after {

  content: none;

}



/* Icons variant — Вариант #3 (based on #1) */

.bsftui-inline-tabs--icons .bsftui-inline-tabs__item {

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.bsftui-inline-tabs--icons .bsftui-inline-tabs__icon {

  width: 20px;

  height: 20px;

  color: inherit;

  flex-shrink: 0;

}



.bsftui-inline-tabs--icons .bsftui-inline-tabs__icon .bsftui-icon,

.bsftui-inline-tabs--icons .bsftui-inline-tabs__icon svg {

  width: 20px;

  height: 20px;

}