:root{
  --bg: #f7fafb;
  --text:#0f1720;
  --muted:#5b6b76;
  --card:#ffffff;
  --line:#e5edf2;
  --accent:#16a34a; /* verde NF */
  --accent-2:#10b981;
  --dark:#0b1d13;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Poppins,system-ui,Segoe UI,Roboto,Ubuntu,Arial}

/* Ribbon */
.ribbon{background:linear-gradient(90deg,#000000,#22c55e 60%);}
.ribbon .wrap{width:min(1100px,94vw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:10px 4px;color:#fff}
.ribbon .logo{
  height:34px;       /* aumenta visualmente */
  width:auto;
  object-fit:contain;
  display:inline-block;
}
.ribbon .logo.small{height:16px;opacity:.9}
.ribbon .x{opacity:.7;margin:0 8px}
.ribbon .shield{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:6px 10px;border-radius:999px;font-weight:700}

/* Layout */
.container{width:min(1000px,92vw); margin:22px auto}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 6px 18px rgba(15,23,32,.04); padding:18px; margin:12px 0}
.hero-head{display:flex;justify-content:space-between;align-items:center; gap:12px}
.hero h1{margin:0;font-size:22px}
.order{font-weight:800;color:#0f4f35;background:#e8f7ee;border:1px solid #caefe0;padding:6px 10px;border-radius:10px}
.status{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.chip{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.chip .t{font-size:12px;color:var(--muted)}
.chip .b{font-weight:800;margin-top:2px}
.chip.ok .b .dot{width:8px;height:8px;background:#22c55e;border-radius:50%;display:inline-block;margin-right:6px}
.chip.warn{background:#fff9e6;border-color:#fde68a}
.chip.warn .warn-ico{display:inline-block;width:18px;height:18px;border-radius:50%;background:#f59e0b;color:#fff;text-align:center;line-height:18px;font-weight:900;margin-right:6px}
.lead{color:var(--muted);margin:8px 0 14px}
.btn{border:0;background:var(--accent);color:white;padding:12px 16px;border-radius:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn.primary{background:linear-gradient(180deg,#16a34a,#15803d)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.huge{width:100%;font-size:16px;padding:16px}
.info h3{margin:0 0 8px}
.info ul{margin:0;padding-left:18px;color:var(--muted)}

/* Footer */
.footer{border-top:1px solid var(--line); padding:18px 0; color:var(--muted)}

/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:16px; z-index:1002}
.modal.show{display:flex; background:rgba(15,23,32,.65); backdrop-filter: blur(6px)}
.modal-dialog{width:min(560px,92vw); background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 16px 50px rgba(15,23,32,.25); position:relative}
.modal-close{position:absolute; right:14px; top:10px; background:transparent; color:var(--muted); border:0; font-size:26px; cursor:pointer}
.modal-header{padding:18px 18px 0}
.modal-body{padding:14px 18px 22px}
.muted{color:var(--muted)}
.alert.soft{background:#e8f7ee;border:1px solid #caefe0;border-radius:12px;padding:12px 14px;margin:8px 0 12px}
.checkout{border:1px solid var(--line); border-radius:14px; padding:14px; background:#fbfeff}
.price-row{display:flex; justify-content:space-between; align-items:center; font-weight:800; margin-bottom:12px}
.progress-wrap{display:flex; align-items:center; gap:12px; padding:12px 18px}
.progress-bar{flex:1; height:8px; border-radius:999px; background:#e9f1f5; overflow:hidden; border:1px solid var(--line)}
.progress-bar span{display:block; height:100%; width:10%; background:linear-gradient(90deg, #84cc16, #16a34a); transition:width .3s ease}
.time{font-weight:800; color:#0f4f35}

/* Loader overlay */
.loader-overlay{position:fixed; inset:0; display:grid; place-items:center; background:linear-gradient(180deg,rgba(15,23,32,.85),rgba(15,23,32,.75)); backdrop-filter:blur(6px); z-index:2000}
.loader-card{width:min(420px,92vw); background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 16px 60px rgba(15,23,32,.45); padding:20px; text-align:center}
.loader-card .brand-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.brand-img{
  height:42px;         /* altura maior e visível */
  width:auto;
  max-width:120px;     /* evita quebrar layout em telas pequenas */
  object-fit:contain;
  display:inline-block;
}
.secure{display:flex;align-items:center;gap:6px;color:#0f4f35;font-weight:700}
.secure .dot{width:8px;height:8px;background:#22c55e;border-radius:50%}
.box-anim{position:relative;height:86px;margin-bottom:12px}
.box-anim .box{width:80px;height:52px;background:#9ca3af;border-radius:8px;margin:0 auto;transform:translateY(12px);box-shadow:0 4px 0 rgba(0,0,0,.15) inset}
.box-anim .dot{position:absolute;left:50%;top:8px;width:14px;height:14px;background:#16a34a;border-radius:50%;transform:translateX(-86px);animation:dotMove 1.2s infinite ease-in-out}
@keyframes dotMove{0%{transform:translateX(-86px)}50%{transform:translateX(86px)}100%{transform:translateX(-86px)}}
.bar{height:10px;background:#e9f1f5;border-radius:99px;overflow:hidden;border:1px solid var(--line);margin-bottom:8px}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,#84cc16,#16a34a);transition:width .25s ease}
.loader-card .msg{color:#0f4f35;font-weight:700}
.loader-hide{animation:fadeOut .35s ease forwards; pointer-events:none}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}

/* Mobile tuning */
@media (max-width: 480px){
  .hero h1{font-size:20px}
  .status{grid-template-columns:1fr;}
  .modal-dialog{max-height:90dvh; overflow:auto}
  .modal-header h2{font-size:20px; line-height:1.22}
}
@supports (padding: max(0px)){
  .modal{padding-top:max(16px, env(safe-area-inset-top)); padding-bottom:max(16px, env(safe-area-inset-bottom));}
}