/* Upsell Completa */
.upsell.hidden{ display:none; }
.upsell{ display:flex; flex-direction:column; gap:14px; }

.upsell__head .upsell__title{ margin:0 0 4px; font-size:1.15rem; font-weight:800; }
.upsell__subtitle{ margin:0; color:var(--muted); }

.upsell__grid{ display:grid; grid-template-columns:160px 1fr; gap:16px; align-items:center; }
@media (max-width:640px){ .upsell__grid{ grid-template-columns:1fr; } .donut{ margin:0 auto; } }

.donut{ position:relative; width:160px; height:160px; }
.donut svg{ width:160px; height:160px; display:block; }
.donut__center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.donut__big{ font-size:1.35rem; font-weight:800; }
.donut__sub{ font-size:.8rem; color:var(--muted); }

.upsell__legend{ display:grid; gap:10px; }
.legendItem{ display:flex; align-items:center; gap:10px; }
.dot{ width:12px; height:12px; border-radius:999px; display:inline-block; }
.dot--answered{ background:#10b981; }
.dot--skipped{ background:#f59e0b; }
.dot--hidden{ background:#ef4444; }
.label{ font-weight:700; }

.upsell__cta{ margin-top:6px; border:none; border-radius:10px; padding:10px 14px; font-weight:700; background:#0ea5b7; color:#fff; cursor:pointer; display:inline-block; text-decoration:none; }

.upsell__blocks{ margin-top:4px; }
.upsell__blocksTitle{ margin:0 0 6px; }
.upsell__blockList{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.upsell__blockList li{
  display:flex; align-items:center; justify-content:space-between;
  border:1px dashed var(--line); border-radius:10px; padding:8px 10px; background:#fbfeff;
}
.upsell__pill{ font-size:.8rem; font-weight:700; border-radius:999px; padding:4px 8px; background:#fff; border:1px solid var(--line); }

/* Modo escuro (padrão): texto preto nos itens do upsell */
body:not(.theme-light) .upsell__blockList li,
body:not(.theme-light) .upsell__blockList li .label,
body:not(.theme-light) .upsell__blockList li span,
body:not(.theme-light) .upsell__pill{ color:#0f172a !important; }

/* garante fundo claro dos cards no escuro para bom contraste */
body:not(.theme-light) .upsell__blockList li{
  background:#fbfeff !important; border-color:#e2e8f0 !important;
}
