/* =====================================================================
   PlayBPO — Tema visual compartilhado
   Fonte única do padrão visual (cores, tipografia, cards, botões, header).
   Extraído do checkout direto para reuso nas demais páginas.
   Requer: Bootstrap 5.3.x, Bootstrap Icons e a fonte Raleway.
   ===================================================================== */
:root{
  --pbpo-primary:#008FFA;
  --pbpo-primary-dark:#0048B7;
  --pbpo-muted:#4b5563;
  --pbpo-border:#e5e7eb;
  --pbpo-bg:#f4f7fb;
  --pbpo-gradient:linear-gradient(135deg,#0048B7 0%,#008FFA 100%);
  --wa-accent:#a16207;
}
*{ font-family:'Raleway',sans-serif; }
body{ background:var(--pbpo-bg); color:#111827; }

/* ===== HEADER / NAV ===== */
.navbar{ background:#fff; border-bottom:1px solid #e8edf4; box-shadow:0 1px 16px rgba(0,48,183,.06); }

/* ===== TRUST BAR (faixa azul com a marca em branco) ===== */
.trust-bar{ background:var(--pbpo-gradient); border-bottom:none; padding:.55rem 0; font-size:.8rem; color:#fff; }
.trust-item{ display:inline-flex; align-items:center; gap:.35rem; }
.trust-item i{ color:rgba(255,255,255,.85); }

/* ===== CARDS ===== */
.card{ background:#fff; border:none; color:#111827; border-radius:1rem; box-shadow:0 2px 24px rgba(0,48,183,.07); }
.card-header{ background:#fff; border-bottom:1px solid #f0f4f8; border-radius:1rem 1rem 0 0 !important; padding:1.25rem 1.5rem; }
.card-body{ padding:1.5rem; }
.card-header.summary-head{ background:var(--pbpo-gradient); color:#fff; border-bottom:none; }
.card-header.summary-head i{ color:#fff !important; }

/* ===== FORMS ===== */
.form-control, .form-select{ background:#fff; border-color:#d1d5db; color:#111827; border-radius:.5rem; }
.form-control:focus, .form-select:focus{ border-color:var(--pbpo-primary); box-shadow:0 0 0 .2rem rgba(0,143,250,.15); }

/* ===== BOTÕES ===== */
.btn-primary{ background:var(--pbpo-gradient); border:none; font-weight:700; border-radius:.7rem; box-shadow:0 4px 16px rgba(0,143,250,.28); transition:all .2s ease; }
.btn-primary:hover{ background:linear-gradient(135deg,#003a8c 0%,#0070d6 100%); box-shadow:0 6px 22px rgba(0,143,250,.42); transform:translateY(-1px); }
.btn-outline-primary{ border-color:var(--pbpo-primary); color:#111827; border-radius:.6rem; }
.btn-outline-primary:hover{ background:var(--pbpo-primary); color:#fff; }
.btn-outline-warning{ border-color:#d97706; color:#111827; }
.btn-outline-warning:hover{ background:#d97706; color:#fff; }
.btn.is-maxed{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn-not-ready{ opacity:.65; }

/* ===== UTILITÁRIOS ===== */
.divider{ height:1px; background:#e5e7eb; }
.hint{ font-size:.85rem; color:#6b7280; }
.muted{ color:#6b7280; }
.price-lg{ font-size:2rem; font-weight:800; color:#111827; }
.sticky-summary{ position:sticky; top:2rem; }
.plan-pill{ border:1px solid #d1d5db; border-radius:999px; padding:.3rem .7rem; font-weight:600; color:#111827; }
.callout{ border:1px dashed #cbd5e1; background:#f8fafc; border-radius:.5rem; padding:.75rem; }

/* ===== HERO ===== */
.checkout-hero{ background:linear-gradient(135deg,#EBF2F7 0%,#d0e8ff 100%); border-bottom:1px solid var(--pbpo-border); }
.social-proof-pill{ display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid #C5CFD3; border-radius:999px; padding:.28rem .85rem; font-size:.82rem; color:#374151; box-shadow:0 1px 3px rgba(0,0,0,.04); }

/* ===== STATS STRIP ===== */
.stats-strip{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.stat-pill{ display:inline-flex; align-items:baseline; gap:.3rem; background:#fff; border:1.5px solid #dbeafe; border-radius:.6rem; padding:.45rem 1rem; font-size:.82rem; color:#374151; box-shadow:0 1px 4px rgba(0,72,183,.07); }
.stat-pill strong{ font-weight:800; font-size:1rem; color:#0048B7; }

/* ===== SECTION HEADING ===== */
.step-heading{ font-size:1.05rem; font-weight:700; color:#0048B7; letter-spacing:-.01em; }
.summary-section-title{ font-weight:700; font-size:.95rem; color:#111827; }
.summary-sub{ color:#6b7280; font-size:.875rem; }
.summary-total-big{ font-size:1.5rem; font-weight:800; }

/* ===== STEPPER ===== */
.stepper{ display:flex; gap:24px; flex-wrap:wrap; }
.stepper .step-item{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:72px; }
.stepper .bubble{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#eef2f7; border:1px solid #d1d5db; color:#111827; font-weight:600; }
.stepper .bubble.active{ background:var(--pbpo-primary); border-color:var(--pbpo-primary); color:#fff; }
.stepper .label{ font-size:.85rem; color:#111827; text-align:center; line-height:1.1; }

/* ===== SEÇÕES DE DESTAQUE ===== */
.qty-section{ background:#f8fafc; border:1px solid #e5e7eb; border-radius:.75rem; padding:1rem 1.25rem; }
.implantacao-section{ background:linear-gradient(135deg,#f0f8ff 0%,#eff6ff 100%); border:1.5px solid #bfdbfe; border-radius:.875rem; padding:1.1rem; position:relative; overflow:hidden; }
.implantacao-section::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#0048B7,#008FFA,#38bdf8); }
.implantacao-icon-wrap,.playzap-icon-wrap{ width:38px; height:38px; background:var(--pbpo-gradient); border-radius:.6rem; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; flex-shrink:0; box-shadow:0 3px 10px rgba(0,72,183,.22); }
.plan-name-badge{ display:inline-block; background:var(--pbpo-gradient); color:#fff; border-radius:.4rem; padding:.1rem .5rem; font-size:.73rem; font-weight:700; }

/* ===== BADGES / STRIPS ===== */
.savings-badge{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; border-radius:999px; padding:.15rem .6rem; font-size:.74rem; font-weight:700; }
.urgency-strip{ display:inline-flex; align-items:center; gap:.35rem; background:#fffbeb; border:1px solid #fcd34d; border-radius:.4rem; padding:.22rem .6rem; font-size:.72rem; color:#92400e; font-weight:700; }
.guarantee-strip{ background:#f0fdf4; border:1px solid #bbf7d0; border-radius:.6rem; padding:.6rem 1rem; margin-top:.85rem; display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:#065f46; }
.payment-trust{ background:#f8fafc; border:1px solid #e5e7eb; border-radius:.5rem; padding:.55rem 1rem; font-size:.77rem; color:#6b7280; display:flex; align-items:center; gap:.5rem; }

/* ===== ENTRADA / ANIMAÇÕES ===== */
@keyframes pbpoCardEntrance{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes pbpoStepEnter{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ===== QR CODE / PIX (fluxos de pagamento) ===== */
.qrcode-placeholder{ background-color:#f0f0f0; border:1px dashed #ccc; width:10rem; height:10rem; }
.pix-status{ min-height:1.5rem; display:flex; align-items:center; gap:.35rem; }
.pix-status .spinner-border{ width:1rem; height:1rem; }