/*
 * Ajustes responsivos / overrides — carregado DEPOIS do app.css,
 * então não é perdido quando o app.css é regenerado pelo build-assets.
 */

/* === Auto-preenchimento: aviso de cadastro encontrado === */
.cliente-hint { display:none; margin:0 0 12px; padding:9px 12px; border-radius:10px;
  background:rgba(34,197,94,.12); color:#15803d; border:1px solid rgba(34,197,94,.28);
  font-size:13px; font-weight:600; line-height:1.3; }
.cliente-hint.show { display:block; animation:cliente-hint-in .3s ease; }
@keyframes cliente-hint-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* === Pagamento dividido em 2 Pix (acima de R$500) === */
.aviso-split-etapa { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:12px;
  padding:11px 13px; font-size:13px; line-height:1.45; margin:0 0 12px; }
.pix-split-aviso { width:100%; background:#fff7ed; border:1px solid #fed7aa; border-radius:12px;
  padding:10px 12px; margin-top:10px; text-align:center; }
.pix-split-aviso .psa-step { font-size:15px; color:#9a3412; font-weight:800; margin-bottom:3px; }
.pix-split-aviso .psa-msg { font-size:12.5px; color:#b45309; line-height:1.4; }
.pix-split-aviso .psa-ok { background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.3); color:#15803d;
  font-weight:700; font-size:13px; border-radius:9px; padding:7px 10px; margin-bottom:8px; }

/* === Tela de rastreio da entrega (mapa) === */
.rastreio-screen { position:relative; display:flex; flex-direction:column; height:calc(100svh - var(--topbar-height,136px)); background:#fff; }
.rastreio-header { display:flex; align-items:center; gap:13px; padding:14px 16px; background:#fff; border-bottom:1px solid var(--line,#eee); z-index:5; }
.rastreio-spinner { width:26px; height:26px; flex:0 0 26px; border:3px solid #f0f0f0; border-top-color:#e97800; border-radius:50%; animation:rastreio-spin .9s linear infinite; }
.rastreio-texts h2 { margin:0; font-size:16px; font-weight:800; color:#1f2937; line-height:1.2; }
.rastreio-texts p { margin:3px 0 0; font-size:12.5px; color:#6b7280; }
.mapa-entrega { flex:1 1 auto; min-height:0; width:100%; background:#dfe7ea; z-index:1; }
@keyframes rastreio-spin { to { transform:rotate(360deg); } }
.moto-icon, .casa-icon { background:none; border:0; }
.moto-pin { width:44px; height:44px; border-radius:50%; background:#e97800; border:2px solid #fff; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 9px rgba(0,0,0,.4); }
.moto-pin svg { width:26px; height:26px; fill:#fff; }
.moto-pin.moto-pin-logo { background:#0f1520; overflow:hidden; }
.moto-pin.moto-pin-logo img { width:32px; height:32px; object-fit:contain; }
.casa-pin svg { width:34px; height:42px; fill:#1f2937; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.leaflet-container { font:inherit; background:#dfe7ea; }

/* === Esteira "Peça também": auto-scroll lento e contínuo para a esquerda === */
.checkout-suggest-rail { display: block; overflow: hidden; }
.checkout-suggest-rail .suggest-track {
  display: flex;
  width: max-content;
  animation: suggest-marquee 120s linear infinite; /* base; o JS ajusta p/ velocidade constante */
  will-change: transform;
}
.checkout-suggest-rail .suggest-track .suggest-card { margin-right: 14px; }
/* pausa ao interagir (facilita clicar no +) */
.checkout-suggest:hover .suggest-track,
.checkout-suggest:active .suggest-track { animation-play-state: paused; }
@keyframes suggest-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--shift, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-suggest-rail .suggest-track { animation: none; }
}

/* === Footer compacto da empresa (tela de checkout) === */
/* footer preto igual o header, em barra full-width (sem card) */
.loja-footer{display:flex;align-items:center;gap:12px;background:#191919;color:#cbd5e1;padding:14px 18px;font-size:11px;line-height:1.45}
.loja-footer-icon{width:50px;height:50px;flex:0 0 50px;object-fit:contain;border-radius:10px;padding:5px}
.loja-footer-icon-ph{display:grid;place-items:center;background:#2a2a2a;color:#fbbf24}
.loja-footer-icon-ph svg{width:24px;height:24px}
.loja-footer-text{min-width:0}
.loja-footer-text strong{color:#fff;font-weight:700}

/* === Tela do Pix gerado: cabe na tela do celular SEM scroll === */
.pix-screen{
  height:calc(100svh - var(--topbar-height, 136px));
  min-height:0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; background:#f4f6f8; padding:12px 0; overflow:hidden;
}
.pix-box{
  background:#fff; border-radius:18px; box-shadow:var(--shadow);
  width:calc(100% - 32px); max-width:none;
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:16px 18px;
}
.pix-top, .pix-bottom{display:flex;flex-direction:column;align-items:center;width:100%;flex:0 0 auto}
.pix-screen .pix-brand{display:none}
.pix-screen .pix-spinner{width:30px;height:30px;margin:0 auto 6px}
.pix-screen #status-titulo{font-size:18px;line-height:1.18;margin:0}
.pix-screen .pix-top p{font-size:12px;line-height:1.3;margin:4px 0 0}
.pix-screen .qr-box{flex:0 1 auto;min-height:0;width:100%;margin:0 auto;padding:14px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 16px rgba(15,23,42,.08)}
.pix-screen #img-qrcode{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:1/1;object-fit:contain}
.pix-screen .qr-box .qr-pix-logo{display:grid!important;place-items:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:20%;aspect-ratio:1/1;background:#fff;border-radius:8px;padding:4px;box-shadow:0 0 0 3px #fff}
.pix-screen .qr-box .qr-pix-logo img{width:100%;height:100%;object-fit:contain;display:block}
.pix-screen .pix-code{width:100%;height:44px;font-size:9px;margin:0}
.pix-screen .pix-copy-btn{width:100%;height:48px;margin-top:10px}
.pix-screen .loja-footer{width:100%;margin:0 0 -12px}

/* Desktop: conteúdo maior, distribuído topo / meio / base */
@media (min-width:560px){
  .pix-box{padding:34px 30px}
  .pix-screen .pix-spinner{width:44px;height:44px;margin:0 auto 12px}
  .pix-screen #status-titulo{font-size:26px}
  .pix-screen .pix-top p{font-size:16px;margin-top:8px}
  .pix-screen .qr-box{padding:20px;border-radius:20px}
  .pix-screen .pix-code{height:60px;font-size:13px}
  .pix-screen .pix-copy-btn{height:58px;font-size:19px;margin-top:14px}
}

@media (max-width: 520px) {
  /* hero um pouco mais alto no mobile (pedido) */
  .hero { height: 250px; }

  /* fix: o app.css empurra o dropdown de endereço para left:-48px e ele
     vaza para fora da tela à esquerda. Basta reancorar no 0. */
  .address-pop { left: 0; }

  /* gap dos cards da esteira no mobile */
  .checkout-suggest-rail .suggest-track .suggest-card { margin-right: 12px; }
}