/* checklist.css
   Estilos da Checklist
   Usa o modal base do quizz.css
   (JS sem inline styles)
*/

/* ======================================================
   “Scope” do modal (opcional, mas ajuda)
   ====================================================== */
.checklist-modal {
  /* mantém o layout do quizz.css, só ajusta detalhes se precisares */
}

.checklist-body {
  /* garante espaçamento consistente */
}

.checklist-footer .quizz-actions {
  /* herda do quizz.css; aqui só se quiseres afinar */
}

/* ======================================================
   Header
   ====================================================== */
.checklist-header .quizz-title {
  letter-spacing: 0.2px;
}

.checklist-header .quizz-sub {
  max-width: 64ch;
}

/* ======================================================
   Espaçador utilitário (usado no JS)
   ====================================================== */
.checklist-spacer {
  margin-top: 14px;
}

/* ======================================================
   Perfil do investidor
   ====================================================== */
.checklist-profile {
  background: #f1f7ff;
  border: 1px solid #cfe3ff;
  color: #123b6b;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.checklist-profile-title {
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.checklist-profile-text {
  line-height: 1.5;
  margin-bottom: 10px;
}

.checklist-profile-meta {
  font-size: 0.9rem;
  opacity: 0.95;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.checklist-profile-sep {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(18, 59, 107, 0.35);
  display: inline-block;
}

/* Mantém compatibilidade com as classes antigas que tinhas no teu CSS */
.checklist-profile__title { font-weight: 800; margin-bottom: 6px; }
.checklist-profile__text { line-height: 1.5; margin-bottom: 10px; }
.checklist-profile__meta {
  font-size: 0.9rem;
  opacity: 0.95;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.checklist-profile__sep {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(18, 59, 107, 0.35);
  display: inline-block;
}

/* ======================================================
   Loading / erro
   (JS atual usa .checklist-loading; o teu CSS usa .checklist-load-banner.
   Vamos suportar ambos para não partir nada.)
   ====================================================== */
.checklist-loading,
.checklist-load-banner {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff6e5;
  border: 1px solid #f0d48a;
  color: #7a5a00;
  font-size: 0.95rem;
}

.checklist-loading--error,
.checklist-load-banner--error {
  background: #ffecec;
  border-color: #f3b5b5;
  color: #7a1f1f;
}

/* (opcional) dots tipo “a carregar…” */
.checklist-loading::after,
.checklist-load-banner::after {
  content: " …";
  display: inline-block;
  animation: checklistDots 1.2s infinite;
}

@keyframes checklistDots {
  0%   { opacity: .35; }
  33%  { opacity: .6; }
  66%  { opacity: .9; }
  100% { opacity: .35; }
}

/* não animar quando é erro */
.checklist-loading--error::after,
.checklist-load-banner--error::after {
  content: "";
  animation: none;
}

/* ======================================================
   Accordions
   (JS atual usa .checklist-acc / .checklist-acc-btn / .checklist-acc-panel
   O teu CSS atual usa .checklist-section*
   Vamos suportar ambos.)
   ====================================================== */
.checklist-accordions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Variante nova (JS atual) --- */
.checklist-acc {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);
}

.checklist-acc-btn {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: #fbfbfb;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.checklist-acc-btn:hover {
  background: #f6f6f6;
}

.checklist-acc-btn::after {
  content: "▾";
  font-size: 14px;
  opacity: 0.65;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.checklist-acc-btn[aria-expanded="true"]::after {
  transform: rotate(-180deg);
  opacity: 0.85;
}

.checklist-acc-panel {
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* --- Variante antiga (.checklist-section*) --- */
.checklist-section {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  overflow: hidden;
}

.checklist-section__btn {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: #fbfbfb;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.checklist-section__btn:hover {
  background: #f6f6f6;
}

.checklist-section__btn.is-open {
  background: #f4f4f4;
}

.checklist-section__icon {
  font-size: 14px;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.checklist-section__btn.is-open .checklist-section__icon {
  transform: rotate(-180deg);
}

.checklist-section__panel {
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ======================================================
   Items (pergunta + Sim/Não)
   (JS atual usa checklist-item-text / checklist-item-choices
   e o teu CSS usa checklist-item__text / checklist-item__choices
   -> suportar ambos)
   ====================================================== */
.checklist-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.checklist-item:last-child {
  border-bottom: 0;
}

.checklist-item-text,
.checklist-item__text {
  margin: 0 0 8px;
  color: #222;
  line-height: 1.45;
  font-size: 0.98rem;
}

.checklist-item-choices,
.checklist-item__choices {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* escolha (Sim/Não) simples, sem “caixas” à volta */
.checklist-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.checklist-choice input[type="radio"] {
  accent-color: var(--gold);
  cursor: pointer;
}

.checklist-choice span {
  font-size: 0.95rem;
  color: #222;
}

.checklist-choice input[type="radio"]:checked + span {
  font-weight: 700;
}

/* ======================================================
   Footer status
   (JS mete checklist-status na span, mas mantém .quizz-submit-status)
   ====================================================== */
.quizz-submit-status,
.checklist-status {
  display: inline-block;
  margin-top: 10px;
}

/* ======================================================
   Responsivo
   ====================================================== */
@media (max-width: 680px) {
  .checklist-profile {
    padding: 12px;
  }

  .checklist-acc-btn,
  .checklist-section__btn {
    padding: 13px 12px;
  }

  .checklist-acc-panel,
  .checklist-section__panel {
    padding: 12px;
  }

  .checklist-choice {
    width: 100%;
    justify-content: flex-start;
  }
}