/*
 * Napoleon Bonus Cards (v1) — pele cirúrgica sobre o lagom2.
 * O container usa .panel do tema (bg/radius/borda herdados); aqui só os
 * internos. Verde oficial #00AB66, texto #17191C, neutros do tema.
 */

.np-bonus-panel { overflow: hidden; }
.np-bonus-panel .panel-body { padding: 18px 20px; }

/* header */
.np-bonus-head { display: block; }
.np-bonus-kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00AB66;
  margin-bottom: 2px;
}
.np-bonus-titlerow { display: flex; align-items: center; gap: 8px; }
.np-bonus-title { font-size: 15px; font-weight: 600; color: #17191C; }
.np-bonus-title-lg { font-size: 18px; }
.np-bonus-count {
  font-size: 11px;
  font-weight: 600;
  color: #00AB66;
  background: rgba(0, 171, 102, 0.08);
  border-radius: 999px;
  padding: 1px 8px;
}
.np-bonus-chevron { display: none; margin-left: auto; color: #98A2B3; transition: transform 0.2s ease; }
.np-bonus-headline {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 700;
  color: #027A48;
}

/* stepper: os bônus são a razão da barra existir */
.np-bonus-progress { margin-top: 14px; }
.np-bonus-track {
  height: 3px;
  background: #EEF0F2;
  border-radius: 2px;
  overflow: hidden;
}
.np-bonus-fill {
  height: 100%;
  background: #00AB66;
  border-radius: 2px;
  transition: width 0.5s ease;
}
.np-bonus-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  color: #98A2B3;
}
.np-bonus-steps .done { color: #17191C; }
.np-bonus-steps .current { color: #00AB66; font-weight: 600; }

/* lista de bônus */
.np-bonus-list { list-style: none; margin: 10px 0 0; padding: 0; }
.np-bonus-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #F2F4F7;
}
.np-bonus-item:first-child { border-top: 0; }
.np-bonus-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 171, 102, 0.08);
  color: #00AB66;
}
.np-bonus-info { flex: 1 1 auto; min-width: 0; display: block; }
.np-bonus-name { display: block; font-size: 13px; font-weight: 500; color: #17191C; line-height: 1.35; }
.np-bonus-desc { display: block; font-size: 12px; color: #667085; margin-top: 1px; line-height: 1.4; }
.np-bonus-meta { display: block; font-size: 12px; color: #667085; margin-top: 2px; }
.np-bonus-meta s { color: #98A2B3; text-decoration-color: rgba(217, 45, 32, 0.55); text-decoration-thickness: 1.5px; }
.np-bonus-arrow { color: #98A2B3; font-size: 11px; }
.np-bonus-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: #00AB66;
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 2px;
}
.np-bonus-cond { display: block; font-size: 11.5px; color: #98A2B3; margin-top: 1px; }
.np-bonus-state { flex: 0 0 auto; margin-top: 2px; color: #00AB66; }

/* bloqueado: baixa a temperatura, sem apagar */
.np-bonus-item.is-locked .np-bonus-icon { background: #F2F4F7; color: #98A2B3; }
.np-bonus-item.is-locked .np-bonus-name { color: #475467; }
.np-bonus-item.is-locked .np-bonus-state { color: #98A2B3; }

/* o gancho de fechamento (bônus da etapa final) ganha peso, não cor gritada */
.np-bonus-item.is-locked .np-bonus-cond:last-child { color: #475467; }
.np-bonus-panel .np-bonus-item.is-locked .np-bonus-cond { font-weight: 500; }

/* rodapé */
.np-bonus-foot {
  border-top: 1px solid #F2F4F7;
  margin-top: 6px;
  padding-top: 12px;
  font-size: 12px;
  color: #475467;
  line-height: 1.45;
}
.np-bonus-foot strong { color: #027A48; font-weight: 700; font-size: 13.5px; }

/* reveal: uma vez por sessão, presente mas sem circo */
.np-reveal { animation: npBonusReveal 0.35s ease-out; }
@keyframes npBonusReveal {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .np-reveal { animation: none; }
  .np-bonus-fill { transition: none; }
}

/* variante sidebar (desktop): irmã do resumo dentro do sticky */
.np-bonus-side { margin-top: 16px; }

/* variante topo (mobile): colapsada até o toque */
.np-bonus-top { margin-bottom: 16px; }
.np-bonus-top .np-bonus-head { cursor: pointer; }
.np-bonus-top .np-bonus-chevron { display: inline-flex; }
.np-bonus-top.np-collapsed .np-bonus-body { display: none; }
.np-bonus-top.np-collapsed .np-bonus-chevron { transform: rotate(-90deg); }

@media (min-width: 992px) {
  .np-bonus-top { display: none; }
}
@media (max-width: 991.98px) {
  .np-bonus-side { display: none; }
}

/* página de escolha de domínio: banner "você acaba de ganhar" */
.np-bonus-domain { margin-top: 16px; }
.np-bonus-domain .panel-body { padding: 16px 20px; }
.np-bonus-domain-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.np-bonus-domain-title { font-size: 14.5px; font-weight: 700; color: #17191C; }
.np-bonus-domain .np-bonus-list { margin-top: 4px; }
.np-bonus-domain .np-bonus-item { padding: 9px 0; }
.np-bonus-domain-tag {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #667085;
  background: #F2F4F7;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.np-bonus-domain.np-won {
  background: rgba(0, 171, 102, 0.035);
  border-color: rgba(0, 171, 102, 0.4) !important;
}
.np-bonus-domain.np-won .np-bonus-domain-tag {
  color: #fff;
  background: #00AB66;
}
.np-bonus-domain.np-won .np-bonus-domain-teaser { border-top-color: rgba(0, 171, 102, 0.15); }
.np-bonus-domain-teaser {
  border-top: 1px solid #F2F4F7;
  padding: 10px 20px;
  font-size: 12px;
  color: #667085;
  line-height: 1.45;
}
@media (max-width: 575.98px) {
  .np-bonus-domain-tag { margin-left: 0; }
}

/* roleta de desconto (checkout) */
.np-wheel { margin-bottom: 20px; }
.np-wheel-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
}
.np-wheel-visual {
  position: relative;
  flex: 0 0 180px;
  width: 180px;
  height: 180px;
}
.np-wheel-svg { width: 100%; height: 100%; display: block; }
.np-wheel-rotor {
  transform-origin: 110px 110px;
  transition: transform 4.2s cubic-bezier(0.12, 0.75, 0.08, 1);
}
.np-wheel-pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid #17191C;
  z-index: 2;
}
.np-wheel-content { flex: 1 1 auto; min-width: 0; }
.np-wheel-title { display: block; font-size: 17px; font-weight: 700; color: #17191C; }
.np-wheel-sub { display: block; font-size: 13px; color: #475467; margin-top: 4px; line-height: 1.45; }
.np-wheel-btn {
  margin-top: 14px;
  background: #00AB66;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border: 0;
  border-radius: 6px;
  padding: 10px 22px;
  cursor: pointer;
  animation: npWheelPulse 2.2s ease-in-out infinite;
}
.np-wheel-btn:hover { background: #029A5D; color: #fff; }
.np-wheel-btn:disabled { animation: none; opacity: 0.75; cursor: default; }
@keyframes npWheelPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 171, 102, 0.35); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(0, 171, 102, 0); }
}
.np-wheel-note { display: block; font-size: 11.5px; color: #98A2B3; margin-top: 8px; }

/* celebração pós-giro */
.np-wheel-celebrate {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: inherit;
  text-align: center;
  padding: 20px;
}
.np-wheel-won .np-wheel-celebrate { display: flex; animation: npBonusReveal 0.35s ease-out; }
.np-wheel-celebrate-title { font-size: 22px; font-weight: 800; color: #027A48; }
.np-wheel-celebrate-sub { font-size: 13px; color: #475467; }

/* pop-up da roleta */
.np-wheel-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(23, 25, 28, 0.55);
  backdrop-filter: blur(2px);
  padding: 16px;
}
.np-wheel-modal.np-wheel-open { display: flex; animation: npWheelFade 0.25s ease-out; }
.np-wheel-dialog {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 30px 28px 24px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  animation: npWheelPop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.np-wheel-modal .np-wheel-title { font-size: 20px; display: block; }
.np-wheel-modal .np-wheel-sub { display: block; margin-top: 4px; }
.np-wheel-modal .np-wheel-visual { margin: 18px auto 4px; width: 240px; height: 240px; flex: none; }
.np-wheel-modal .np-wheel-btn { width: 100%; margin-top: 16px; padding: 13px; font-size: 15px; }
.np-wheel-modal .np-wheel-celebrate { border-radius: 16px; }
.np-wheel-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #98A2B3;
  cursor: pointer;
  padding: 4px;
}
.np-wheel-close:hover { color: #17191C; }
body.np-wheel-lock { overflow: hidden; }
@keyframes npWheelFade { from { opacity: 0; } }
@keyframes npWheelPop { from { opacity: 0; transform: scale(0.94) translateY(10px); } }
@media (max-width: 575.98px) {
  .np-wheel-modal .np-wheel-visual { width: 200px; height: 200px; }
  .np-wheel-dialog { padding: 26px 20px 20px; }
}

/* card inline "giro esperando" (reabre o pop-up) */
.np-wheel-mini-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 20px;
}
.np-wheel-mini-text { font-size: 13.5px; color: #17191C; }
.np-wheel-mini .np-wheel-btn { margin-top: 0; padding: 9px 18px; }

/* estados travado (ciclo) e aplicado */
.np-wheel-locked .panel-body { padding: 16px 24px; }
.np-wheel-locked .np-wheel-title { font-size: 14.5px; }
.np-wheel-locked .np-wheel-sub { margin-top: 3px; }
.np-wheel-unlock {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 18px;
  text-decoration: none;
  animation: none;
}
.np-wheel-unlock:hover { text-decoration: none; }
.np-wheel-applied {
  background: rgba(0, 171, 102, 0.035);
  border-color: rgba(0, 171, 102, 0.4) !important;
}
.np-wheel-applied .panel-body { padding: 14px 24px; }
.np-wheel-applied-title { display: block; font-size: 14.5px; font-weight: 700; color: #027A48; }
.np-wheel-applied-text { display: block; font-size: 12.5px; color: #475467; margin-top: 2px; }

@media (max-width: 767.98px) {
  .np-wheel-body { flex-direction: column; text-align: center; }
  .np-wheel-visual { flex-basis: auto; width: 170px; height: 170px; }
  .np-wheel-note { margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .np-wheel-btn { animation: none; }
  .np-wheel-rotor { transition-duration: 0.5s; }
}

/* página de pedido concluído: pacote completo em grid */
.np-bonus-complete { margin-bottom: 20px; }
.np-bonus-complete .np-bonus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.np-bonus-complete .np-bonus-grid .np-bonus-item {
  border: 1px solid #EAEAEA;
  border-radius: 10px;
  padding: 14px;
  margin: 0;
}
.np-bonus-panel .np-bonus-access {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #00AB66;
  text-decoration: none;
}
.np-bonus-panel .np-bonus-access:hover { color: #027A48; text-decoration: none; }