/* Вкладки в постах — базовое оформление Mojito Studio.
   Меняйте переменные ниже, чтобы подогнать блок под дизайн форума. */
.tabs-container {
  --tabs-bg: #f6f4ef;
  --tabs-panel: #ffffff;
  --tabs-text: #282522;
  --tabs-muted: #756f68;
  --tabs-accent: #8b5e4a;
  --tabs-line: #d9d2ca;
  margin: 18px 0;
  color: var(--tabs-text);
}

.tabs-header,
.inner-tabs-header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.custom_tag_tabtitle,
.custom_tag_innertabtitle {
  padding: 9px 14px;
  color: var(--tabs-muted);
  background: var(--tabs-bg);
  border: 1px solid var(--tabs-line);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.tabs-mobile-title {
  display: none;
}

.custom_tag_tabtitle:hover,
.custom_tag_tabtitle:focus-visible,
.custom_tag_innertabtitle:hover,
.custom_tag_innertabtitle:focus-visible {
  color: var(--tabs-accent);
  border-color: var(--tabs-accent);
  outline: none;
}

.custom_tag_tabtitle.active,
.custom_tag_innertabtitle.active {
  color: #fff;
  background: var(--tabs-accent);
  border-color: var(--tabs-accent);
}

.tabs-content {
  margin-top: -1px;
}

/* Добавьте к внешнему block класс tabs-left или tabs-right,
   чтобы поставить заголовки колонкой слева или справа. */
.tabs-container.tabs-left,
.tabs-container.tabs-right {
  display: grid;
  grid-template-columns: minmax(130px, 220px) minmax(0, 1fr);
  align-items: start;
}

.tabs-container.tabs-left .tabs-header,
.tabs-container.tabs-right .tabs-header {
  flex-direction: column;
}

.tabs-container.tabs-left .tabs-content {
  grid-column: 2;
  margin: 0 0 0 -1px;
}

.tabs-container.tabs-right .tabs-header {
  grid-column: 2;
}

.tabs-container.tabs-right .tabs-content {
  grid-column: 1;
  grid-row: 1;
  margin: 0 -1px 0 0;
}

.custom_tag_tabtext {
  padding: 20px;
  background: var(--tabs-panel);
  border: 1px solid var(--tabs-line);
}

.inner-tabs {
  margin-top: 4px;
}

.inner-tabs-header {
  margin-bottom: 10px;
}

.custom_tag_innertabtitle {
  padding: 6px 10px;
  font-size: .9em;
}

.custom_tag_innertabtext {
  padding: 14px;
  background: var(--tabs-bg);
  border-left: 3px solid var(--tabs-accent);
}

.custom_tag_tabtext[hidden],
.custom_tag_innertabtext[hidden] {
  display: none !important;
}

@media (max-width: 750px) {
  .tabs-container,
  .tabs-container.tabs-left,
  .tabs-container.tabs-right {
    display: block;
  }

  .tabs-container > .tabs-header,
  .tabs-container.tabs-left > .tabs-header,
  .tabs-container.tabs-right > .tabs-header {
    display: none;
  }

  .tabs-container > .tabs-content,
  .tabs-container.tabs-left > .tabs-content,
  .tabs-container.tabs-right > .tabs-content {
    display: block;
    margin: 0;
  }

  .tabs-mobile-title {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 14px;
    color: var(--tabs-muted);
    text-align: left;
    font: inherit;
    background: var(--tabs-bg);
    border: 1px solid var(--tabs-line);
    cursor: pointer;
  }

  .tabs-mobile-title.active {
    color: #fff;
    background: var(--tabs-accent);
    border-color: var(--tabs-accent);
  }

  .custom_tag_tabtext {
    margin: 0;
  }
}