/**
 * Tabs Content for Elementor — Frontend CSS
 *
 * Todos os seletores usam o prefixo .tce- para evitar conflitos.
 * Estilos controlados via variáveis CSS injetadas inline no wrapper.
 */

/* ============================================================
   Variáveis padrão (fallback se inline não for definido)
   ============================================================ */
.tce-wrapper {
  --tce-btn-color:         #f0f0f0;
  --tce-btn-active-color:  #0073aa;
  --tce-text-color:        #333333;
  --tce-active-text-color: #ffffff;
  --tce-content-bg:        #ffffff;
  --tce-content-color:     #333333;
  --tce-radius:            4px;
  --tce-padding:           10px;
  --tce-margin:            5px;
  --tce-font-size:         15px;
  --tce-font-weight:       600;
  --tce-max-width:         1200px;
  --tce-speed:             300ms;

  max-width: var(--tce-max-width);
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   Layout do wrapper conforme posição das abas
   ============================================================ */

/* Superior (padrão) */
.tce-wrapper.tce-position-top,
.tce-wrapper:not([class*="tce-position-"]) {
  display: flex;
  flex-direction: column;
}

/* Inferior */
.tce-wrapper.tce-position-bottom {
  display: flex;
  flex-direction: column-reverse;
}

/* Esquerda */
.tce-wrapper.tce-position-left {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* Direita */
.tce-wrapper.tce-position-right {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}

/* ============================================================
   Barra de botões
   ============================================================ */
.tce-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tce-margin);
  list-style: none;
  margin: 0 0 0 0;
  padding: 0;
}

/* Layout vertical (esquerda/direita) */
.tce-position-left  .tce-tab-buttons,
.tce-position-right .tce-tab-buttons {
  flex-direction: column;
  flex-shrink: 0;
  width: 200px;
  margin: 0;
}

.tce-position-top    .tce-tab-buttons { margin-bottom: 0; }
.tce-position-bottom .tce-tab-buttons { margin-top: 0; }
.tce-position-left   .tce-tab-buttons { margin-right: calc( var(--tce-margin) * 2 ); }
.tce-position-right  .tce-tab-buttons { margin-left:  calc( var(--tce-margin) * 2 ); }

/* ============================================================
   Botões individuais
   ============================================================ */
.tce-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--tce-font-size);
  font-weight: var(--tce-font-weight);
  color: var(--tce-text-color);
  background-color: var(--tce-btn-color);
  border: none;
  border-radius: var(--tce-radius);
  padding: var(--tce-padding) calc( var(--tce-padding) * 1.6 );
  transition:
    background-color var(--tce-speed) ease,
    color var(--tce-speed) ease,
    box-shadow var(--tce-speed) ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
  outline-offset: 2px;
}

.tce-button:hover {
  filter: brightness(0.92);
}

.tce-button:focus-visible {
  outline: 2px solid var(--tce-btn-active-color);
}

/* Estado ativo */
.tce-button.tce-active {
  background-color: var(--tce-btn-active-color);
  color: var(--tce-active-text-color);
}

/* Layout vertical — botões ocupam largura total */
.tce-position-left  .tce-button,
.tce-position-right .tce-button {
  width: 100%;
  white-space: normal;
}

/* ============================================================
   Área de conteúdo
   ============================================================ */
.tce-content-area {
  flex: 1;
  position: relative;
  overflow: hidden; /* Necessário para animação slide */
}

/* ============================================================
   Painéis individuais
   ============================================================ */
.tce-panel {
  display: none;
  background-color: var(--tce-content-bg);
  color: var(--tce-content-color);
  padding: var(--tce-padding);
  box-sizing: border-box;
  width: 100%;
}

/* Painel ativo — visível */
.tce-panel.tce-panel-active {
  display: block;
}

/* ============================================================
   Animação: Fade
   ============================================================ */
.tce-wrapper[data-animation="fade"] .tce-panel {
  opacity: 0;
  transition: opacity var(--tce-speed) ease;
}

.tce-wrapper[data-animation="fade"] .tce-panel.tce-panel-active {
  opacity: 1;
}

/* ============================================================
   Animação: Slide (translateX)
   ============================================================ */
.tce-wrapper[data-animation="slide"] .tce-content-area {
  overflow: hidden;
}

.tce-wrapper[data-animation="slide"] .tce-panel {
  transform: translateX(30px);
  opacity: 0;
  transition:
    transform var(--tce-speed) ease,
    opacity   var(--tce-speed) ease;
}

.tce-wrapper[data-animation="slide"] .tce-panel.tce-panel-active {
  transform: translateX(0);
  opacity: 1;
}

/* ============================================================
   Responsividade
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .tce-position-left  .tce-tab-buttons,
  .tce-position-right .tce-tab-buttons {
    width: 160px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  /* Força layout vertical em mobile para qualquer posição */
  .tce-wrapper,
  .tce-wrapper.tce-position-left,
  .tce-wrapper.tce-position-right,
  .tce-wrapper.tce-position-bottom {
    flex-direction: column;
  }

  /* Barra de botões rolável horizontalmente */
  .tce-tab-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--tce-margin);
    width: 100%;
    padding-bottom: 4px; /* espaço para a barra de rolagem */
  }

  /* Remove margens de posicionamento lateral */
  .tce-position-left  .tce-tab-buttons,
  .tce-position-right .tce-tab-buttons {
    width: 100%;
    margin: 0 0 calc( var(--tce-margin) * 2 ) 0;
    flex-direction: row;
  }

  /* Botões em mobile: largura automática, não quebram linha */
  .tce-button,
  .tce-position-left  .tce-button,
  .tce-position-right .tce-button {
    flex-shrink: 0;
    white-space: nowrap;
    scroll-snap-align: start;
    width: auto;
  }
}

/* ============================================================
   Scrollbar estilizada (Webkit) na barra de abas mobile
   ============================================================ */
.tce-tab-buttons::-webkit-scrollbar {
  height: 3px;
}
.tce-tab-buttons::-webkit-scrollbar-track {
  background: transparent;
}
.tce-tab-buttons::-webkit-scrollbar-thumb {
  background-color: var(--tce-btn-active-color);
  border-radius: 3px;
}