/* ============================================================
   Digicopy Print Engine — Polimento visual (aditivo)
   Carregado DEPOIS do frontend.css do plugin. Só refina o
   acabamento; não muda a lógica. Usa as variáveis de marca
   do próprio plugin (--brand, --gold, --line, --ink...).
   ============================================================ */

.dcppe-engine{
  --r: 16px;
  --r-sm: 12px;
  --sh-sm: 0 1px 2px rgba(30,26,77,.06), 0 1px 1px rgba(30,26,77,.04);
  --sh-md: 0 6px 22px -8px rgba(43,21,115,.18);
  --sh-lg: 0 18px 48px -18px rgba(43,21,115,.28);
  font-family: "Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color: var(--ink-900,#26224A);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  max-width: 1180px;
  margin-inline: auto;
}

/* ---- Cartão-container geral ---- */
.dcppe-engine .dcppe-card,
.dcppe-engine .dcppe-simple,
.dcppe-engine .dcppe-x{
  border-radius: var(--r);
  border: 1px solid var(--line,#E7E4F2);
  box-shadow: var(--sh-md);
  overflow: clip;
  background: var(--paper,#fff);
}

/* ---- Kickers / títulos ---- */
.dcppe-engine .dcppe-kicker,
.dcppe-engine .dcppe-x-kicker{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand,#4F3BE0);
}
.dcppe-engine .dcppe-simple-head h2,
.dcppe-engine .dcppe-x-head h2,
.dcppe-engine .dcppe-x-head h3{
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
}

/* ============================================================
   Tabela de preços por quantidade (.dcppe-tiers / .dcppe-tier)
   ============================================================ */
.dcppe-engine .dcppe-tiers{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 4px;
}
.dcppe-engine .dcppe-tier{
  position: relative;
  border: 1.5px solid var(--line,#E7E4F2);
  border-radius: var(--r-sm);
  background: var(--paper,#fff);
  box-shadow: var(--sh-sm);
  padding: 16px 16px 15px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  cursor: pointer;
}
.dcppe-engine .dcppe-tier:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand,#4F3BE0) 55%, var(--line));
  box-shadow: var(--sh-md);
  background: var(--paper,#fff);
}
.dcppe-engine .dcppe-tier.is-selected{
  border-color: var(--brand,#4F3BE0);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand,#4F3BE0) 16%, transparent), var(--sh-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand,#4F3BE0) 5%, #fff), #fff);
}
.dcppe-engine .dcppe-tier.is-selected::after{ display:none; }

.dcppe-engine .dcppe-tier-q{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-500,#6E6A85);
  margin-bottom: 8px;
  letter-spacing: .02em;
}
.dcppe-engine .dcppe-tier-u{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink-900,#26224A);
  line-height: 1;
}
.dcppe-engine .dcppe-tier-u small{
  display:block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-500,#6E6A85);
  letter-spacing: 0;
}
.dcppe-engine .dcppe-tier-total{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-500,#6E6A85);
  margin-top: 4px;
}
/* Selo "Mais escolhido" / badges */
.dcppe-engine .dcppe-tier-b{
  position: absolute;
  top: -9px; left: 14px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand,#4F3BE0), var(--brand-dark,#3D2BC4));
  border: 0;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--brand,#4F3BE0) 60%, transparent);
}

/* ============================================================
   Configurador completo (.dcppe-x-*)
   ============================================================ */
.dcppe-engine .dcppe-x{ box-shadow: var(--sh-lg); }
.dcppe-engine .dcppe-x-side{
  background: linear-gradient(180deg, var(--paper-dim,#F6F5FB), #fff);
  border-left: 1px solid var(--line,#E7E4F2);
}
/* Preço em destaque */
.dcppe-engine .dcppe-x-price{ align-items: baseline; gap: 6px; margin-bottom: 8px; }
.dcppe-engine .dcppe-x-unit{
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--brand,#4F3BE0);
  line-height: 1;
}
.dcppe-engine .dcppe-x-total{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--ink-500,#6E6A85);
}
.dcppe-engine .dcppe-x-econ b{ color: var(--brand,#4F3BE0); font-weight: 800; }
.dcppe-engine .dcppe-x-recap{
  border-top: 1px dashed var(--line,#E7E4F2);
  margin-top: 12px; padding-top: 12px;
}

/* Opções (pills) */
.dcppe-engine .dcppe-opt{
  border: 1.5px solid var(--line,#E7E4F2);
  border-radius: var(--r-sm);
  transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.dcppe-engine .dcppe-opt:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand,#4F3BE0) 45%, var(--line)); }
.dcppe-engine .dcppe-opt.is-on{
  border-color: var(--brand,#4F3BE0);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand,#4F3BE0) 14%, transparent);
}

/* ============================================================
   Botão de orçamento / CTA
   ============================================================ */
.dcppe-engine .dcppe-wa-button,
.dcppe-engine .dcppe-actions .button,
.dcppe-engine button.dcppe-cta{
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  min-height: 50px;
  padding-inline: 22px;
  box-shadow: 0 10px 24px -12px rgba(18,161,80,.7);
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}
.dcppe-engine .dcppe-wa-button:hover{ transform: translateY(-2px); }
.dcppe-engine .dcppe-wa-button:active{ transform: translateY(0); }

/* ============================================================
   Loading (3 pontinhos) — mais suave
   ============================================================ */
.dcppe-engine .dcppe-waiting span{
  background: var(--brand,#4F3BE0);
  opacity:.35;
  animation: dcppePulse 1.1s infinite ease-in-out;
}
.dcppe-engine .dcppe-waiting span:nth-child(2){ animation-delay:.15s }
.dcppe-engine .dcppe-waiting span:nth-child(3){ animation-delay:.3s }
@keyframes dcppePulse{ 0%,80%,100%{opacity:.25;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 640px){
  .dcppe-engine .dcppe-tiers{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .dcppe-engine .dcppe-tier{ padding: 13px; }
  .dcppe-engine .dcppe-tier-u{ font-size: 22px; }
  .dcppe-engine .dcppe-x-unit{ font-size: 32px; }
}
@media (max-width: 380px){
  .dcppe-engine .dcppe-tiers{ grid-template-columns: 1fr; }
}