/* css/faq.css */

.faq-section {
    max-width: 800px;
    margin: 20px auto;
  }
  
  .faq-container {
    padding: 0;
    border: none;
  }
  
  .question {
    cursor: pointer;
    background-color: #f8fafc;
    padding: 15px 20px;
    margin-bottom: 5px;
    border-radius: 8px;
    font-weight: 600;
    color: #1e3c72;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
  }

  .question:hover {
    background-color: #edf2f7;
    border-color: #3498db;
  }
  
  .answer {
    display: none;
    padding: 20px;
    background-color: white;
    margin-bottom: 15px;
    margin-top: -5px;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
  }
  
  /* Estilo para o título "Perguntas Frequentes" */
  h2 {
    color: #333;
  }
  
  /* Estilo opcional para destacar a pergunta selecionada */
  .question.active {
    background-color: #d4edda; /* Cor de fundo verde suave */
  }
  
  .answer-list {
    list-style-type:circle; /* Utiliza bolinhas como marcadores */
    padding-left: 20px; /* Adiciona um recuo à esquerda para as bolinhas */
    margin-top: 10px; /* Adiciona um espaçamento acima da lista */
  }

  .observation {
    margin-top: 20px; /* Adiciona um espaçamento acima da observação para separá-la das respostas */
    font-size: smaller;
    font-style: italic;
    color: #555;
  }

  .answer-content {
    text-align: left;
    color: #4a5568;
    line-height: 1.7;
  }

  .answer-content p {
    margin-bottom: 15px;
  }


/* Video Grid & Cards */
.video-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s;
  border: 1px solid #ddd;
}

.video-card:hover {
  transform: translateY(-5px);
}

.video-thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.video-thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-info {
  padding: 15px;
}

.video-info h4 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  color: #1e3c72;
}

.admin-video-item-controls {
  padding: 10px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}