.dst-tabs{width:100%}
.dst-tabs__nav{display:flex;gap:10px;flex-wrap:wrap}

/* Base botão */
.dst-tabs__btn{
  cursor:pointer;
  border:2px solid transparent;
  background:transparent;
  padding:10px 14px;

  /* sem mudar peso ao ativar */
  font-weight: inherit;

  /* alinhamento à esquerda (padrão geral) */
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;

  /* padrão: arredondado total (vai ser sobrescrito nos casos especiais) */
  border-radius:999px;
}

.dst-tabs__btn[aria-selected="true"]{
  font-weight: inherit;
}

.dst-tabs__panel{display:none}
.dst-tabs__panel.is-active{display:block}

.dst-tabs--vertical{display:flex;gap:24px;align-items:flex-start}

/* ✅ DESKTOP: coluna fixa 30% para botões e 70% para conteúdo */
.dst-tabs--vertical .dst-tabs__nav{
  flex-direction:column;
  flex: 0 0 30%;
  width: 30%;
  min-width: 0; /* importante pra evitar overflow estranho */
}
.dst-tabs--vertical .dst-tabs__panels{
  flex: 1 1 70%;
  width: 70%;
  min-width:0;
}

/* ✅ DESKTOP: deixa o texto do botão quebrar linha (sem estourar largura) */
.dst-tabs--vertical .dst-tabs__btn{
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere; /* quebra até palavras gigantes */
  word-break: break-word;
}

/* Wrapper por item do loop: o plugin injeta a CSS var --dst-featured-image por post */
.dst-loop-wrap{ --dst-featured-image: none; }

/* Coloque esta classe no container/seção do Loop Item que deve receber a imagem de destaque */
.dst-use-featured-bg{
  background-image: var(--dst-featured-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ===========================
   ESTILO: BRS ACCOUNT (1 nível)
   =========================== */
.dst-account-tabs .dst-tabs__btn{
  background-color: var(--e-global-color-secondary);
  color: var(--e-global-color-e713e3a);
  border-color: var(--e-global-color-secondary);
  border-radius: 999px 0 0 999px;
  text-align: left;
}

.dst-account-tabs .dst-tabs__btn[aria-selected="true"]{
  background-color: var(--e-global-color-e713e3a);
  color: var(--e-global-color-secondary);
  border-color: var(--e-global-color-e713e3a);
}

/* Após clicar e fechar, alguns mobiles mantêm :focus/:active com estilo diferente */
.dst-account-tabs .dst-tabs__btn:focus,
.dst-account-tabs .dst-tabs__btn:focus-visible,
.dst-account-tabs .dst-tabs__btn:active{
  background-color: var(--e-global-color-secondary);
  color: var(--e-global-color-e713e3a);
  border-color: var(--e-global-color-secondary);
  outline: none;
  box-shadow: none;
}

/* mantém o foco consistente quando estiver ativo */
.dst-account-tabs .dst-tabs__btn[aria-selected="true"]:focus,
.dst-account-tabs .dst-tabs__btn[aria-selected="true"]:focus-visible,
.dst-account-tabs .dst-tabs__btn[aria-selected="true"]:active{
  background-color: var(--e-global-color-e713e3a);
  color: var(--e-global-color-secondary);
  border-color: var(--e-global-color-e713e3a);
  outline: none;
  box-shadow: none;
}

/* ===========================
   ESTILO: BRS DOCS
   Nível 1: País (tabs externas)
   =========================== */
.dst-docs-tabs > .dst-tabs__nav{
  justify-content: space-between;

  /* respiro abaixo dos botões (desktop/tablet) */
  margin-bottom: 35px;
}

.dst-docs-tabs > .dst-tabs__nav .dst-tabs__btn{
  font-size: 17px;
  font-weight: 500;
  background-color: var(--e-global-color-accent);
  color: var(--e-global-color-primary);
  border-color: var(--e-global-color-accent);
  border-radius: 999px;

  /* padding 8px em volta */
  padding: 5px;

  /*  alinha conteúdo do botão à esquerda */
  justify-content: flex-start;
  text-align:left;

  /* mantém a distribuição em grid */
  flex: 1 1 0;
  min-width: 140px;
  white-space: nowrap;
}

.dst-docs-tabs > .dst-tabs__nav .dst-tabs__btn[aria-selected="true"]{
  background-color: var(--e-global-color-background);
  color: var(--e-global-color-primary);
  border-color: var(--e-global-color-background);
}

/* Bandeira + label dentro do botão do país */
.dst-docs-tabs > .dst-tabs__nav .dst-country-btn__inner{
  display:flex;
  align-items:center;

  /* alinha imagem + texto à esquerda */
  justify-content:flex-start;

  gap:12px;
  width:100%;
}

.dst-docs-tabs > .dst-tabs__nav .dst-country-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.dst-docs-tabs > .dst-tabs__nav .dst-country-flag img{
  width:40px;
  height:40px;
  border-radius:999px;     /* redondinho */
  object-fit:cover;
  display:block;
}

/* ===========================
   ESTILO: BRS DOCS
   Nível 2: Serviço (tabs internas)
   =========================== */
.dst-docs-tabs .dst-tabs__inner .dst-tabs__nav .dst-tabs__btn{
  background-color: var(--e-global-color-primary);
  color: var(--e-global-color-background);
  border-color: var(--e-global-color-background);

  justify-content:flex-start;
  text-align:left;

  border-radius: 999px 0 0 999px;
}

.dst-docs-tabs .dst-tabs__inner .dst-tabs__nav .dst-tabs__btn[aria-selected="true"]{
  background-color: var(--e-global-color-background);
  color: var(--e-global-color-primary);
  border-color: var(--e-global-color-background);
}

/* ===========================
   MOBILE: vira accordion
   =========================== */
@media (max-width: 767px){
  .dst-tabs--vertical{
    display:block;
    gap:0;
  }

  .dst-tabs--vertical .dst-tabs__nav{
    flex:1 1 auto;
    width:100%;
  }

  .dst-tabs--vertical .dst-tabs__panels{
    width:100%;
  }

  .dst-tabs--vertical .dst-tabs__btn{
    width:100%;
  }

  /* DOCS Nível 1 (País): lista 100% */
  .dst-docs-tabs > .dst-tabs__nav{
    flex-direction:column;
    flex-wrap:nowrap;
    gap:14px;
    justify-content:flex-start;
  }

  .dst-docs-tabs > .dst-tabs__nav .dst-tabs__btn{
    width:100%;
    flex:0 0 auto;
    min-width:0;
  }

  .dst-docs-tabs > .dst-tabs__nav .dst-tabs__btn + .dst-tabs__panel{
    margin-bottom:45px;
    width:100%;
  }

  /* Mantém bandeira + label bonitos no mobile */
  .dst-docs-tabs > .dst-tabs__nav .dst-country-btn__inner{
    justify-content:flex-start;
  }

  /* DOCS Nível 2: indentar só botão */
  .dst-docs-tabs .dst-tabs__inner .dst-tabs__nav .dst-tabs__btn{
    margin-left: 20px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    padding: 5px 15px;
  }

  .dst-docs-tabs .dst-tabs__inner .dst-tabs__panel{
    margin-left: 0;
    width: 100%;
  }

  .dst-tabs--vertical .dst-tabs__btn + .dst-tabs__panel{
    margin-top:10px;
  }

  .dst-tabs--vertical .dst-tabs__panel + .dst-tabs__btn{
    margin-top:10px;
  }

  .dst-account-tabs .dst-tabs__btn{
    border-radius: 0 999px 999px 0;
  }
}