/* Ajuda/FAQ CSS - Padrão de Termos com Accordion Customizado */

/* Mantém o accordion sem alterações - não sobrescreve */
.accordion {padding: 0 !important; margin: 0;}

/* Mantém todos os estilos do FAQ exatamente como estão */
/* FAQ Items */
.faq-item {background-color: #fff; border: 2px solid #E0E0E0; border-radius: 12px; margin-bottom: 20px; overflow: hidden; transition: all 0.3s ease; box-sizing: border-box;}
.faq-item:last-child {margin-bottom: 0;}
.faq-item:hover {border-color: #0358A2; box-shadow: 0 4px 16px rgba(3, 88, 162, 0.1);}

/* FAQ Question */
.faq-question {background-color: #f8f9fa; box-sizing: border-box;}
.faq-question a {display: flex; align-items: center; justify-content: space-between; padding: 20px 25px; text-decoration: none; color: #333; cursor: pointer; transition: all 0.3s ease; box-sizing: border-box; width: 100%;}
.faq-question a:hover {background-color: #e9ecef; text-decoration: none; color: #333;}
.faq-question a:hover .question-content span {color: #0358A2;}
.faq-question a:hover .question-content svg {color: #0358A2;}
.faq-question.accordion-opened a {background: linear-gradient(135deg, #0358A2 0%, #0267ba 100%); color: #fff;}
.faq-question.accordion-opened a:hover {background: linear-gradient(135deg, #024a8a 0%, #025199 100%);}
.faq-question.accordion-opened a:hover .question-content span {color: #fff;}
.faq-question.accordion-opened a:hover .question-content svg {color: #fff;}
.faq-question.accordion-opened a:hover .toggle-icon i {color: #fff;}

.question-content {display: flex; align-items: center; gap: 15px; flex: 1; min-width: 0;}
.question-content svg {flex-shrink: 0; color: #0358A2; width: 24px; height: 24px;}
.faq-question.accordion-opened .question-content svg {color: #fff;}
.question-content span {font-size: 16px; font-weight: 600; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; color: #333;}
.faq-question.accordion-opened .question-content span {color: #fff;}

.toggle-icon {flex-shrink: 0; transition: transform 0.3s ease; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transform: rotate(180deg);}
.toggle-icon i {font-size: 18px; color: #666;}
.faq-question.accordion-opened .toggle-icon i {color: #fff;}

/* Quando o link tem a classe collapsed (accordion fechado) - rotação zero */
.faq-question a.collapsed .toggle-icon {transform: rotate(0deg);}

/* FAQ Answer */
.faq-answer {background-color: #fff; box-sizing: border-box;}
.answer-content {padding: 0; box-sizing: border-box;}

/* Video Container */
.video-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background-color: #000; border-radius: 0; width: 100%;}
.video-container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}

/* Answer Text */
.answer-text {padding: 25px 30px; box-sizing: border-box;}
.answer-text p {color: #333; font-size: 15px; line-height: 1.8; margin-bottom: 15px; word-wrap: break-word;}
.answer-text p:last-child {margin-bottom: 0;}
.answer-text a {color: #0358A2; text-decoration: underline; font-weight: 600; word-wrap: break-word;}
.answer-text a:hover {color: #024a8a; text-decoration: none;}

.answer-text ul {list-style: none; padding: 0; margin: 15px 0;}
.answer-text ul li {position: relative; padding-left: 30px; margin-bottom: 12px; color: #333; font-size: 15px; line-height: 1.6; word-wrap: break-word;}
.answer-text ul li:last-child {margin-bottom: 0;}
.answer-text ul li::before {content: '✓'; position: absolute; left: 0; top: 0; color: #0358A2; font-weight: 700; font-size: 18px;}

/* Responsividade - Tablets */
@media (max-width: 1000px) {
  .faq-question a {padding: 16px 18px;}
  .question-content {gap: 12px;}
  .question-content span {font-size: 15px;}
  .question-content svg {width: 22px; height: 22px;}
  
  .answer-text {padding: 20px 20px;}
  .answer-text p, .answer-text ul li {font-size: 14px;}
}

/* Responsividade - Mobile */
@media (max-width: 480px) {
  .faq-item {margin-bottom: 15px; border-radius: 8px;}
  
  .faq-question a {padding: 14px 12px; gap: 8px;}
  .question-content {gap: 8px;}
  .question-content span {font-size: 14px; line-height: 1.4;}
  .question-content svg {width: 20px; height: 20px;}
  .toggle-icon {width: 20px; height: 20px;}
  .toggle-icon i {font-size: 16px;}
  
  .answer-text {padding: 15px 12px;}
  .answer-text p {font-size: 13px; line-height: 1.6; margin-bottom: 12px;}
  .answer-text ul {margin: 12px 0;}
  .answer-text ul li {font-size: 13px; line-height: 1.5; padding-left: 25px; margin-bottom: 10px;}
  .answer-text ul li::before {font-size: 16px;}
}

/* Mobile Extra Pequeno */
@media (max-width: 360px) {
  .faq-question a {padding: 12px 10px;}
  .question-content span {font-size: 13px;}
  
  .answer-text {padding: 12px 10px;}
  .answer-text p, .answer-text ul li {font-size: 12px;}
}