:root {
  --media-primary: #f58a27; /* Cor do contorno e botões nos prints */
  --media-text: #333;
}

#media-prefs-wrapper {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4); /* Fundo escuro opaco */
  align-items: center;
  justify-content: center;
  z-index: 9999999; /* Valor altíssimo para ficar acima de tudo */
  overflow: hidden; /* Impede que o fundo escuro role */
  font-family: "Poppins", sans-serif !important;
}

#media-prefs-modal {
  position: relative;
  background: #ffffffcc;
  width: 90%;
  max-width: 850px;
  border-radius: 25px; /* Bordas bem arredondadas conforme print */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Sistema de Abas */
.media-tabs {
  display: flex;
  position: relative; /* Essencial para o slider flutuar dentro dele */
  border-bottom: 1px solid rgb(196, 196, 196); /* A linha cinza de fundo fica aqui agora */
}

.tab-btn {
  flex: 1;
  padding: 20px;
  background: none;
  border: none;
  font-weight: bold;
  font-size: 13px;
  color: #333333;
  cursor: pointer;
  transition: color 0.3s ease; /* Anima a cor do texto suavemente */
  outline: none !important;
}

.tab-btn.active {
  color: var(--media-primary);
  /* Removemos o border-bottom daqui! */
}

.tab-slider {
  position: absolute;
  bottom: -1px; /* Alinha perfeitamente em cima da borda cinza do pai */
  left: 0;
  width: 33.3333%; /* Exatamente 1/3 do espaço, já que são 3 abas */
  height: 2px;
  background-color: var(--media-primary);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Curva de animação bem fluida */
}

/* Corpo do Modal */
.media-body {
  padding: 30px 40px;
  max-height: 50vh; /* Ocupará no máximo 50% da altura da tela */
  min-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Customização da Scrollbar para navegadores Webkit (Chrome, Edge, Safari) */
.media-body::-webkit-scrollbar {
  width: 6px; /* Deixa a barra mais fina */
}

.media-body::-webkit-scrollbar-track {
  background: #f9f9f9;
  border-radius: 10px;
}

.media-body::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 10px;
}

.media-body::-webkit-scrollbar-thumb:hover {
  background: var(
    --media-primary
  ); /* Fica com a cor principal ao passar o mouse */
}

/* Esconde o conteúdo inativo */
.tab-content {
  display: none;
}

/* Quando a aba ganha a classe 'active' via JavaScript */
.tab-content.active {
  display: block;
  animation: fadeInSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* A Mágica da Animação */
@keyframes fadeInSlide {
  0% {
    opacity: 0;
    transform: translateY(15px); /* Começa um pouco mais abaixo */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Sobe para a posição original suavemente */
  }
}

.media-body h6 {
  font-weight: bold;
  margin-bottom: 15px;
  text-transform: uppercase;
}
.media-body p {
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}

/* Botões Estilo "Pill" */
.media-footer {
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid rgb(196, 196, 196);
}

.m-btn {
  flex: 1;
  padding: 15px;
  border-radius: 50px; /* Formato pill/oval do print */
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  font-size: 13px;
}

.m-btn-primary {
  background: #ffffff00;
  border: 2px solid var(--media-primary);
  color: var(--media-primary);
}

.m-btn-primary:hover {
  background: var(--media-primary);
  color: #fff;
}

.m-btn-outline {
  background: #ffffff00;
  border: 2px solid var(--media-primary);
  color: var(--media-primary);
}

/* Container da Sanfona */
.detalhes-accordion {
  display: flex;
  flex-direction: column;
}

.accordion-item {
  border-bottom: 1px solid #eaeaea;
  padding: 15px 0;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px 0;
}

.accordion-title {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 700;
  font-size: 14px;
  color: var(--media-text);
}

.accordion-description {
  padding-left: 30px;
  margin-top: 20px;
}

/* A setinha (Chevron) desenhada com CSS */
.chevron {
  border: solid #333;
  border-width: 0 2px 2px 0;
  display: -block;
  padding: 4px;
  transform: rotate(-45deg); /* Aponta pra direita por padrão */
  transition: transform 0.3s ease;
}

/* Corpo do texto escondido por padrão */
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    margin-top 0.3s ease;
}

.accordion-body p {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin: 0;
  padding-left: 30px; /* Alinha o texto com a palavra "NECESSÁRIO" */
}

/* Classes para quando o item estiver ABERTO */
.accordion-item.open .chevron {
  transform: rotate(45deg); /* Aponta pra baixo */
}

.accordion-item.open .accordion-body {
  max-height: 2500px; /* Um valor alto o suficiente para caber o texto */
}

/* =========================================
   Estilo do Toggle Switch 
   ========================================= */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc; /* Cor quando está desligado */
  transition: 0.4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Quando está Ligado (Checked) */
.toggle-switch input:checked + .toggle-slider {
  background-color: var(--media-primary); /* Fica com a cor azul principal */
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px); /* Move a bolinha pra direita */
}

/* Estilo para quando não pode ser alterado (Ex: Necessário) */
.toggle-switch input:disabled + .toggle-slider {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Container do Sub-Accordion */
.sub-accordion {
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espaço entre os provedores (Cookiebot, Google, etc) */
}

/* O bloco do Provedor com borda arredondada */
.sub-accordion-item {
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background: #ffffff;
  padding: 2px;
}

.sub-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  background: #ffffff;
}

.sub-accordion-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.provider-title {
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.provider-text {
  font-size: 13px;
  color: #333;
}

.provider-link {
  font-size: 13px;
  color: #555;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.provider-link:hover {
  color: var(--media-primary);
  text-decoration: underline;
}

/* Setinha do Sub-Accordion (aponta pra baixo por padrão) */
.chevron-down {
  border: solid #555;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

/* Corpo do Sub-Accordion (escondido por padrão) */
.sub-accordion-body {
  max-height: 0;
  transition:
    max-height 0.4s ease,
    padding 0.4s ease;
  background: #ffffff;
  overflow-y: hidden;
  margin-right: 20px;
  margin-left: 20px;
}

/* Quando o Sub-Accordion estiver ABERTO */
.sub-accordion-item.open .sub-accordion-body {
  max-height: 1000px; /* Suficiente para caber os cards */
  border-top: 1px solid #dcdcdc;
  margin-bottom: 15px;
}

.sub-accordion-item.open .chevron-down {
  transform: rotate(-135deg); /* Vira a setinha pra cima */
}

/* =========================================
   Estilo dos Cards de Cookies (Fundo Cinza)
   ========================================= */
.prefs-card {
  background-color: #f4f5f7; /* Cinza claro do print */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
  overflow: hidden;
}

.prefs-card-text p {
  padding: 15px 0 0 0;
}

.prefs-card strong {
  font-size: 13px;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.prefs-card a {
  font-size: 13px;
  color: var(--media-primary);
  text-decoration: none;
}

.prefs-card a:hover {
  text-decoration: underline;
}

.prefs-card p {
  font-size: 13px;
  color: #555;
  margin: 0 0 12px 0;
  padding: 0 !important; /* Reseta o padding do accordion principal */
  line-height: 1.5;
}

.prefs-card hr {
  border: 0;
  border-top: 1px solid #858585;
  margin: 10px 0;
}

.prefs-card-footer {
  display: flex;
  gap: 30px; /* Separação entre Duração e Tipo */
  font-size: 12px;
  color: #555;
}

@media (max-width: 600px) {
  .prefs-card-footer {
    flex-direction: column;
    gap: 5px;
  }

  .accordion-description {
    padding-left: 15px;
    margin-top: 20px;
  }

  .sub-accordion {
    padding-left: 15px;
  }

  .media-body {
    padding: 20px 20px;
  }

  .media-footer {
    padding: 15px 15px;
    gap: 5px;
  }
}

.detalhes-footer {
  font-size: 12px;
  color: #777;
  text-align: center;
  margin-top: 20px;
}

/* ==========================================
   ESTILOS DA TABELA DE COOKIES (ABA DETALHES)
   ========================================== */

/* Permite que a tabela role para os lados no celular sem quebrar o layout */
.table-responsive {
  overflow-x: auto;
  margin-top: 15px;
  margin-bottom: 15px;
}

.prefs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px; /* Tamanho confortável para leitura */
  text-align: left;
}

.prefs-table th,
.prefs-table td {
  border: 1px solid #dcdcdc; /* Cor da borda suave igual ao print */
  padding: 8px 12px;
}

.prefs-table th {
  background-color: #ffffff00;
  font-weight: bold;
  font-style: italic;
  color: #333;
}

/* Cor avermelhada idêntica à da primeira coluna da imagem */
.prefs-table td.prefs-name {
  color: var(--media-primary);
}

.prefs-footnote {
  font-size: 12px;
  color: #555;
  margin-top: 10px;
}

.prefs-footnote a {
  color: var(--media-primary); /* Cor de link padrão */
  text-decoration: none;
}

.prefs-footnote a:hover {
  text-decoration: underline;
}