/* driver/assets/style/delivery-flow.css
   Fluxo de entrega: modal de oferta direcionada + card por etapas (stepper).
   Visual moderno inspirado em apps de delivery (machine.global). */

/* ───────── Modal de oferta direcionada (push 1-a-1) ───────── */
#dlvDirectedModal {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(10, 12, 20, .55);
  padding: 0;
}
#dlvDirectedModal.show { display: flex; }
.dlvDir-sheet {
  background: #fff;
  width: 100%; max-width: 480px;
  max-height: 88vh; overflow-y: auto;
  border-radius: 22px 22px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  animation: dlvDirUp .22s ease;
}
@keyframes dlvDirUp { from { transform: translateY(40px); opacity: .6 } to { transform: none; opacity: 1 } }
.dlvDir-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dlvDir-title { font-weight: 800; font-size: 18px; color: #0b0f19; display: flex; align-items: center; gap: 8px; }
.dlvDir-count {
  font-weight: 800; font-size: 18px; color: #0b0f19;
  background: #F9D515; border-radius: 999px; min-width: 52px;
  text-align: center; padding: 5px 12px;
}
.dlvDir-count.urgent { background: #FF4D4D; color: #fff; }
.dlvDir-store { font-weight: 800; font-size: 16px; color: #0b0f19; margin-bottom: 10px; }
.dlvDir-store .plat { font-size: 11px; font-weight: 800; color: #EA1D2C; background: #ffe9eb; padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.dlvDir-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; font-size: 13.5px; color: #1f2a37; }
.dlvDir-row .pin { flex: 0 0 22px; text-align: center; font-size: 15px; }
.dlvDir-row .addr { flex: 1; line-height: 1.35; }
.dlvDir-row .addr small { color: #6b7280; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.dlvDir-stats { display: flex; gap: 14px; margin: 14px 0 4px; }
.dlvDir-stat { flex: 1; background: #f7f8fa; border-radius: 12px; padding: 10px 12px; }
.dlvDir-stat b { font-size: 19px; color: #0b0f19; display: block; }
.dlvDir-stat span { font-size: 11px; color: #6b7280; }
.dlvDir-stat.pay b { color: #16a34a; }
/* Aceite por slide-to-confirm (igual à corrida) — evita aceite acidental. */
.dlvDir-slideWrap { margin-top: 16px; }
.dlvDir-slideWrap .movaSlide { width: 100%; }

/* Recusar fica abaixo do slide, secundário e largura cheia. */
.dlvDir-actions { display: flex; gap: 10px; margin-top: 10px; }
.dlvDir-btn {
  padding: 13px 12px; border-radius: 14px; font-weight: 800; font-size: 15px;
  cursor: pointer; border: 0; transition: filter .12s, transform .05s;
}
.dlvDir-btn:active { transform: scale(.98); }
.dlvDir-reject { flex: 1; background: #f1f3f5; color: #4b5563; }
.dlvDir-reject:hover { filter: brightness(.96); }
/* fallback (sem MovaSlide): botão de aceite amarelo */
.dlvDir-accept { flex: 2; background: #F9D515; color: #0b0f19; }
.dlvDir-accept:hover { filter: brightness(.95); }
.dlvDir-accept:disabled { opacity: .6; cursor: default; }

/* barra de progresso do tempo */
.dlvDir-bar { height: 4px; background: #eef0f2; border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.dlvDir-bar > i { display: block; height: 100%; background: #F9D515; transition: width .25s linear; }
.dlvDir-bar.urgent > i { background: #FF4D4D; }

/* badge de número do pedido na oferta direcionada (push) */
.dlvDir-store .ref {
  font-size: 12px; font-weight: 800; color: #0b0f19;
  background: #f1f3f5; border-radius: 6px; padding: 2px 7px;
  margin-left: 6px; vertical-align: middle;
}

/* badge de número do pedido na oferta individual (fallback REST) */
.dlvOfferRef {
  font-size: .8rem; font-weight: 700;
  background: rgba(255, 255, 255, .12); border-radius: 6px;
  padding: 2px 7px; margin-left: 6px; vertical-align: middle;
}

/* ───────── Card da entrega ativa (stepper por etapas) ───────── */
.dlvFlow {
  background: #fff; border-radius: 18px;
  padding: 14px 14px 16px;
  box-shadow: 0 6px 24px rgba(11, 15, 25, .12);
  color: #0b0f19;
}
/* Cabeçalho com número do pedido (+ badge de plataforma) */
.dlvFlow-ref {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.dlvFlow-plat {
  font-size: 11px; font-weight: 800; color: #EA1D2C;
  background: #ffe9eb; padding: 3px 8px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .3px;
}
.dlvFlow-refnum {
  font-size: 14px; font-weight: 800; color: #0b0f19;
  background: #f1f3f5; padding: 3px 9px; border-radius: 6px;
}
/* Stepper horizontal */
.dlvFlow-steps { display: flex; align-items: center; margin-bottom: 14px; }
.dlvFlow-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.dlvFlow-step .dot {
  width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #eef0f2; color: #9ca3af; font-size: 15px; font-weight: 800;
  z-index: 2; transition: background .2s, color .2s;
}
.dlvFlow-step .lbl { font-size: 10.5px; color: #9ca3af; margin-top: 5px; text-align: center; font-weight: 600; }
.dlvFlow-step::before, .dlvFlow-step::after {
  content: ''; position: absolute; top: 15px; height: 3px; background: #eef0f2; z-index: 1;
}
.dlvFlow-step::before { left: 0; right: 50%; }
.dlvFlow-step::after  { left: 50%; right: 0; }
.dlvFlow-step:first-child::before { display: none; }
.dlvFlow-step:last-child::after { display: none; }
.dlvFlow-step.done   .dot { background: #16a34a; color: #fff; }
.dlvFlow-step.active .dot { background: #F9D515; color: #0b0f19; box-shadow: 0 0 0 5px rgba(249,213,21,.25); }
.dlvFlow-step.done::after, .dlvFlow-step.done::before { background: #16a34a; }
.dlvFlow-step.active::before { background: #16a34a; }

/* Cabeçalho de status atual */
.dlvFlow-now { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dlvFlow-now .ico { font-size: 22px; }
.dlvFlow-now .txt b { font-size: 16px; display: block; color: #0b0f19; }
.dlvFlow-now .txt span { font-size: 12px; color: #6b7280; }

/* Detalhe loja/cliente */
.dlvFlow-line { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid #f1f3f5; }
.dlvFlow-line .pin { flex: 0 0 24px; text-align: center; font-size: 16px; padding-top: 1px; }
.dlvFlow-line .info { flex: 1; min-width: 0; }
.dlvFlow-line .info b { font-size: 14px; color: #0b0f19; }
.dlvFlow-line .info small { display: block; font-size: 12px; color: #6b7280; line-height: 1.35; }
.dlvFlow-line .act { flex: 0 0 auto; }
.dlvFlow-navbtn {
  border: 1px solid #e5e7eb; background: #fff; border-radius: 10px;
  width: 38px; height: 38px; font-size: 17px; cursor: pointer;
}

/* "Pedido pronto" — status que a loja liga no painel dela (Central de
   Pedidos). Puramente informativo pro motoboy, só enquanto ele ainda não
   coletou (ACCEPTED/COLLECTING). */
/* Chip minimalista de status de preparo: bolinha + label, sem caixa "alarmante".
   Âmbar pulsando = preparando; verde sólido = pronto. */
.dlv-prep {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 2px; font-size: 13px; font-weight: 600; color: #6b7280;
}
.dlv-prep__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: #f59e0b; animation: dlvPrepPulse 1.6s ease-out infinite;
}
.dlv-prep__txt { line-height: 1.2; }
.dlv-prep--ready { color: #15803d; }
.dlv-prep--ready .dlv-prep__dot {
  background: #22c55e; animation: none; box-shadow: 0 0 0 3px rgba(34,197,94,.16);
}
@keyframes dlvPrepPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
/* Destino bloqueado até a coleta — nota discreta. */
.dlv-dest-locked {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 0 4px; font-size: 12px; color: #9ca3af;
}
.dlv-dest-locked__ic { opacity: .7; font-size: 11px; }

/* Pagamento */
.dlvFlow-pay { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 4px; padding-top: 10px; border-top: 1px solid #f1f3f5; }
.dlvFlow-pay b { font-size: 20px; color: #16a34a; }
.dlvFlow-pay span { font-size: 12px; color: #6b7280; }

/* Botão de ação principal por etapa */
.dlvFlow-cta {
  width: 100%; margin-top: 12px; padding: 16px;
  border: 0; border-radius: 14px; font-weight: 800; font-size: 16px;
  background: #F9D515; color: #0b0f19; cursor: pointer;
}
.dlvFlow-cta:active { transform: scale(.99); }
.dlvFlow-cta:disabled { background: #eef0f2; color: #9ca3af; cursor: default; }
.dlvFlow-cta.deliver { background: #16a34a; color: #fff; }
.dlvFlow-cta.deliver:disabled { background: #eef0f2; color: #9ca3af; }
.dlvFlow-hint { text-align: center; font-size: 12px; color: #9ca3af; margin-top: 8px; }

/* ───────── Código de coleta iFood/99Food (motoboy informa à LOJA) ─────────
   Direção INVERSA do PIN de entrega: a plataforma gera o código por pedido,
   o motoboy o mostra/fala na retirada e a LOJA valida. Card dark com dígitos
   grandes em amarelo Ridee, destacado dentro do card branco da etapa. */
.dlv-pickup-code {
  background: #0b0f19; color: #fff;
  border: 1px solid rgba(249, 213, 21, .4);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0 2px;
  text-align: center;
}
.dlv-pickup-code__title {
  font-size: 11px; font-weight: 800; color: #F9D515;
  text-transform: uppercase; letter-spacing: .06em;
}
.dlv-pickup-code__digits {
  font-size: 38px; font-weight: 900; color: #F9D515;
  letter-spacing: .18em; line-height: 1.2;
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}
.dlv-pickup-code__hint { font-size: 12px; color: #cbd5e1; }
.dlv-pickup-code__badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 2px;
  font-size: 12.5px; font-weight: 800; color: #4ade80;
}
/* Loja já validou o código: contorno verde, sem urgência (hint sai, badge entra) */
.dlv-pickup-code--ok { border-color: rgba(22, 163, 74, .6); }

/* Espera da validação da loja: substitui o slide de coleta enquanto o lojista
   não valida o código no painel (o backend também bloqueia o dispatch). */
.dlv-pickup-wait {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 10px; padding: 15px 14px;
  border: 1.5px dashed rgba(217, 164, 6, .55);
  border-radius: 14px;
  background: #fffbeb; color: #92400e;
  font-weight: 700; font-size: 13.5px; text-align: center;
}
.dlv-pickup-wait__spin {
  width: 16px; height: 16px; flex: 0 0 16px;
  border: 2.5px solid rgba(217, 164, 6, .3);
  border-top-color: #d9a406;
  border-radius: 50%;
  animation: dlvPickupSpin .9s linear infinite;
}
@keyframes dlvPickupSpin { to { transform: rotate(360deg); } }

/* Linha secundária de botões (chat / problema) */
.dlvFlow-sub { display: flex; gap: 8px; margin-top: 10px; }
.dlvFlow-sub button {
  flex: 1; padding: 11px; border-radius: 11px; border: 1px solid #e5e7eb;
  background: #fff; color: #4b5563; font-weight: 700; font-size: 13.5px; cursor: pointer;
}
/* Chat com a loja: destaque escuro (é a ação secundária mais usada) */
.dlvFlow-sub .dlvFlow-chatlink {
  background: #0b0f19; color: #fff; border-color: #0b0f19;
}
.dlvFlow-sub .dlvFlow-chatlink:active { filter: brightness(1.15); }

/* ───────── TROCO / MAQUININHA / RETORNO — blocos destacados ─────────
   Aparecem na OFERTA (modal direcionado) e no card da entrega ativa.
   O motoboy precisa ver ANTES de aceitar o que vai carregar/receber. */
.dlvPayFlags { margin: 10px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.dlvPayFlag {
  border-radius: 12px; padding: 9px 12px;
  border: 1.5px solid transparent;
}
.dlvPayFlag b { display: block; font-size: 13.5px; }
.dlvPayFlag span { display: block; font-size: 12px; margin-top: 1px; }
.dlvPayFlag--cash {
  background: #f0fdf4; border-color: rgba(22, 163, 74, .45); color: #14532d;
}
.dlvPayFlag--cash b { color: #15803d; }
.dlvPayFlag--card {
  background: #eff6ff; border-color: rgba(37, 99, 235, .4); color: #1e3a8a;
}
.dlvPayFlag--card b { color: #1d4ed8; }
.dlvPayFlag--return {
  background: #fffbeb; border-color: rgba(217, 164, 6, .5); color: #92400e;
}
.dlvPayFlag--return b { color: #b45309; }

/* ───────── Chat com a loja (folha sobre o app do motoboy) ─────────
   Mesma conversa 3-vias do painel do lojista/rastreio do cliente.
   Overlay fixo (padrão dos sheets do app), toggle por .show. */
#dlvChatSheet {
  position: fixed; inset: 0; z-index: 10800;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(10, 12, 20, .55);
}
#dlvChatSheet.show { display: flex; }
.dlvChat-sheet {
  background: #fff; width: 100%; max-width: 480px;
  max-height: 78vh; display: flex; flex-direction: column;
  border-radius: 22px 22px 0 0;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  animation: dlvDirUp .22s ease;
}
.dlvChat-head { display: flex; align-items: center; justify-content: space-between; }
.dlvChat-title { font-weight: 800; font-size: 16px; color: #0b0f19; }
.dlvChat-close {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid #e5e7eb;
  background: #fff; color: #4b5563; font-size: 15px; cursor: pointer;
}
.dlvChat-hintTop { font-size: 11.5px; color: #9ca3af; margin: 2px 0 8px; }
.dlvChat-msgs {
  flex: 1; min-height: 140px; max-height: 46vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; padding: 4px 0;
}
.dlvChat-msg {
  max-width: 85%; padding: 8px 12px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.4; color: #0b0f19;
  align-self: flex-start; background: #f1f3f5;
}
.dlvChat-msg b { display: block; font-size: 11px; opacity: .65; margin-bottom: 1px; }
.dlvChat-msg--me { align-self: flex-end; background: #F9D515; }
.dlvChat-msg--client { background: #eff6ff; }
.dlvChat-inputRow { display: flex; gap: 8px; margin-top: 8px; }
.dlvChat-inputRow input {
  flex: 1; min-width: 0; padding: 11px 12px;
  border: 1px solid #e5e7eb; border-radius: 12px;
  font-size: 14px; font-family: inherit; outline: none;
}
.dlvChat-inputRow input:focus { border-color: #F9D515; }
.dlvChat-inputRow button {
  border: 0; border-radius: 12px; padding: 0 18px;
  background: #F9D515; color: #0b0f19; font-weight: 800; font-size: 14px; cursor: pointer;
}
.dlvChat-inputRow button:disabled { opacity: .6; cursor: default; }

/* Lembrete de retorno à loja dentro do overlay de congratulations */
.dlvCongratsReturn {
  margin: 0 0 14px; padding: 9px 12px;
  background: #fffbeb; border: 1.5px solid rgba(217, 164, 6, .5);
  border-radius: 12px;
  font-size: 13px; color: #92400e;
}
.dlvCongratsReturn b { color: #b45309; }

/* ─────────────────────────────────────────────────────────────────────────
   CONGRATULATIONS — overlay full-screen ao concluir entrega/corrida
   z-index 11000 fica ACIMA do modal de oferta direcionada (10000).
   ───────────────────────────────────────────────────────────────────────── */
.dlvCongrats {
  position: fixed; inset: 0; z-index: 11000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 0%, #1b2440 0%, #0b0f19 70%);
  animation: dccFadeIn .25s ease both;
  overflow: hidden;
}
@keyframes dccFadeIn { from { opacity: 0; } to { opacity: 1; } }

.dlvCongratsCard {
  position: relative; z-index: 2;
  width: 100%; max-width: 360px;
  background: #fff; border-radius: 22px;
  padding: 30px 24px 24px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  animation: dccPop .42s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes dccPop { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }

.dlvCongratsCheck { margin: 0 auto 10px; width: 84px; height: 84px; }
.dccCircle { stroke: #16a34a; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: dccStroke .5s ease-out .15s forwards; }
.dccCheck  { stroke: #16a34a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: dccStroke .35s ease-out .55s forwards; }
@keyframes dccStroke { to { stroke-dashoffset: 0; } }

.dlvCongratsTitle { font-size: 19px; font-weight: 800; color: #0b0f19; margin-bottom: 14px; }
.dlvCongratsLabel { font-size: 13px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.dlvCongratsAmount { font-size: 42px; font-weight: 900; color: #16a34a; line-height: 1.1; margin: 2px 0 6px; }
.dlvCongratsDaily { font-size: 13.5px; color: #4b5563; margin-bottom: 18px; min-height: 18px; }
.dlvCongratsDaily b { color: #0b0f19; }

.dlvCongratsCta {
  width: 100%; padding: 16px; border: 0; border-radius: 14px;
  font-weight: 800; font-size: 16px; background: #F9D515; color: #0b0f19; cursor: pointer;
}
.dlvCongratsCta:active { transform: scale(.99); }
.dlvCongratsCta.next { background: #16a34a; color: #fff; }
.dlvCongratsNextHint { font-size: 12px; color: #9ca3af; margin-top: 10px; }

/* Confete — 14 peças em CSS puro, caem de cima */
.dlvCongratsConfetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.dlvCongratsConfetti i {
  position: absolute; top: -12px; width: 9px; height: 14px; opacity: 0;
  border-radius: 2px; animation: dccFall linear forwards;
}
@keyframes dccFall {
  0%   { opacity: 0; transform: translateY(-10px) rotate(0deg); }
  10%  { opacity: 1; }
  100% { opacity: .9; transform: translateY(105vh) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dlvCongrats, .dlvCongratsCard { animation: none; }
  .dccCircle, .dccCheck { animation: none; stroke-dashoffset: 0; }
  .dlvCongratsConfetti { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   FILA — badge da próxima entrega reservada (durante entrega ativa)
   ───────────────────────────────────────────────────────────────────────── */
.dlvQueueBadge {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 900; background: #0b0f19; color: #fff;
  border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  animation: dccPop .3s ease both;
}
.dlvQueueBadge .qbIco { font-size: 20px; }
.dlvQueueBadge .qbBody { flex: 1; min-width: 0; }
.dlvQueueBadge .qbTitle { font-size: 12px; color: #F9D515; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.dlvQueueBadge .qbInfo { font-size: 13.5px; color: #e5e7eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlvQueueBadge .qbRelease {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff;
  font-size: 16px; cursor: pointer;
}

/* Convite de fila (sheet) reusa .dlvCongrats backdrop mas card próprio */
.dlvQueueInvite { position: fixed; inset: 0; z-index: 10500; display: none; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(11,15,25,.55); }
.dlvQueueInvite.show { display: flex; }
.dlvQueueInviteCard { width: 100%; max-width: 420px; background: #fff; border-radius: 18px; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.4); animation: dccPop .3s ease both; }
.dlvQueueInviteCard h3 { font-size: 17px; font-weight: 800; color: #0b0f19; margin: 0 0 4px; }
.dlvQueueInviteCard .qiInfo { font-size: 14px; color: #4b5563; margin-bottom: 16px; }
.dlvQueueInviteBtns { display: flex; gap: 10px; }
.dlvQueueInviteBtns button { flex: 1; padding: 14px; border-radius: 12px; font-weight: 800; font-size: 14.5px; cursor: pointer; border: 0; }
.qiReserve { background: #16a34a; color: #fff; }
.qiSkip { background: #eef0f2; color: #4b5563; }

/* ─────────────────────────────────────────────────────────────────────────
   ENTREGAS PENDENTES — reoferta SILENCIOSA
   Pedidos que VOLTARAM a este motoboy (recusou e nenhum outro era elegivel).
   Entram sem modal/alarme: 1 vibracao leve e listados aqui ate aceitar OU
   surgir outro motoboy. Folha discreta no rodape, SEM o vermelho/urgencia do
   modal de oferta. Some sozinha quando a lista zera.
   ───────────────────────────────────────────────────────────────────────── */
.dlvSilentList {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 880; background: #0b0f19; color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,.4);
  animation: dccPop .28s ease both;
}
/* Variante INLINE: a lista vive DENTRO do gavetão #pendingBox (junto das
   corridas pendentes), não flutuando sobre a tela. Sem position/z-index/sombra
   pesada — herda o fluxo normal do painel. */
.dlvSilentList.dlvSilentList--inline {
  position: relative; left: auto; right: auto; bottom: auto;
  z-index: auto; width: 100%; box-shadow: none;
  margin-top: 2px;
}
.dlvSilentList.dlvSilentList--inline .dslItems { max-height: none; }
.dlvSilentList .dslHeader {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dlvSilentList .dslTitle { font-size: 12px; font-weight: 800; color: #F9D515; text-transform: uppercase; letter-spacing: .04em; }
.dlvSilentList .dslCount {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F9D515; color: #0b0f19; border-radius: 999px;
  font-size: 12px; font-weight: 800;
}
.dlvSilentList .dslItems { max-height: 46vh; overflow-y: auto; }
.dlvSilentItem {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.dlvSilentItem:last-child { border-bottom: 0; }
.dlvSilentItem .dsiBody { flex: 1; min-width: 0; }
.dlvSilentItem .dsiHead { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.dlvSilentItem .dsiPlat { font-size: 10.5px; font-weight: 800; color: #0b0f19; background: #F9D515; border-radius: 6px; padding: 1px 6px; }
.dlvSilentItem .dsiRef { font-size: 12.5px; font-weight: 800; color: #93c5fd; }
.dlvSilentItem .dsiStore { font-size: 13px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlvSilentItem .dsiAddr { font-size: 12px; color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlvSilentItem .dsiMeta { font-size: 12px; color: #9ca3af; margin-top: 3px; }
.dlvSilentItem .dsiAccept {
  flex: 0 0 auto; padding: 10px 16px; border: 0; border-radius: 10px;
  background: #16a34a; color: #fff; font-weight: 800; font-size: 13.5px; cursor: pointer;
}
.dlvSilentItem .dsiAccept:disabled { opacity: .6; cursor: default; }
/* Em modo entrega ativa o nav some e o painel-folha sobe — a lista sobe junto
   para nao ficar atras do painel. */
body.dlv-active .dlvSilentList { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   MODO PEDIDO (entrega ativa) — body.dlv-active
   Enquanto o motoboy está numa entrega: o nav inferior some, então o painel
   da entrega cola no rodapé E nas duas laterais (full-width), SEM scroll, com
   o conteúdo completo à mostra. O mapa encolhe (fitMapToPanel) e a rota é
   re-enquadrada acima do painel (map.js). Só vale com .dlv-active no <body>.
   ════════════════════════════════════════════════════════════════════════ */
/* NOTA DE ESPECIFICIDADE: o panel-driver.css (carregado DEPOIS deste arquivo)
   posiciona o painel com `.panel#panel { left:12px !important; ... }`
   (especificidade 0,1,1). Para vencer SEM depender da ordem de carga, usamos
   aqui `.dlv-active .panel#panel` (0,2,1 — uma classe a mais). NÃO baixar para
   `#panel` puro: empata e perde para o panel-driver pela ordem. */
body.dlv-active .panel#panel {
  /* cola nas laterais e no rodapé — vira uma "folha" inferior, não um card */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  border-radius: 18px 18px 0 0 !important;  /* só topo arredondado */
  box-shadow: 0 -8px 30px rgba(11,15,25,.18) !important;
  padding: 8px 12px calc(env(safe-area-inset-bottom) + 12px) !important;
  z-index: 400;                       /* acima de qualquer resíduo de nav */
}
/* Entrega ÚNICA: o conteúdo completo aparece sem scroll. Em telas pequenas,
   uma rede de segurança permite rolar APENAS se o conteúdo estourar a tela
   (teto alto = 88vh) — assim nunca corta stepper/CTA, mas em telas normais
   nada rola (o card cabe folgado). */
body.dlv-single .panel#panel {
  max-height: 88vh !important;
  overflow-y: auto !important;
}
/* Lote ativo: cola no rodapé mas preserva scroll (lista de paradas longa). */
body.dlv-active:not(.dlv-single) .panel#panel {
  max-height: 72vh !important;
}
@media (min-width: 1024px) {
  /* no desktop mantém centralizado, mas colado embaixo e mais largo */
  body.dlv-active .panel#panel {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(560px, 100%) !important;
  }
}
/* Em modo pedido o nav inferior some (o motoboy está focado na entrega) — é
   justamente o espaço que o painel-folha ocupa. Sem isto a .bottomNav
   (z-index:1000) fica POR CIMA do painel colado no rodapé. */
body.dlv-active .bottomNav { display: none !important; }
/* a "alça" cinza do topo do painel não faz sentido no modo folha */
body.dlv-active .panel#panel::before { display: none !important; }
/* esconde tudo que é da "home" do motoboy — só a entrega importa agora */
body.dlv-active .panel#panel > h3,
body.dlv-active .panel#panel .drvTopRow,
body.dlv-active .panel#panel .drvStatsRow,
body.dlv-active .panel#panel #status { display: none !important; }

/* card da entrega vira "edge-to-edge": sem sombra/raio próprios (o #panel já
   é a folha) e com padding enxuto pra caber sem scroll */
body.dlv-active #dlvActiveBox { margin: 0 !important; }
body.dlv-active .dlvFlow {
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px 2px 2px !important;
  background: transparent !important;
}
/* compactação fina das seções pra tudo caber numa tela pequena */
body.dlv-active .dlvFlow-steps { margin-bottom: 10px; }
body.dlv-active .dlvFlow-now   { margin-bottom: 8px; }
body.dlv-active .dlvFlow-line  { padding: 6px 0; }
body.dlv-active .dlvFlow-pay   { margin: 8px 0 4px; padding-top: 8px; }
body.dlv-active .dlvFlow-cta   { margin-top: 4px; }
body.dlv-active .dlvFlow-sub   { margin-top: 8px; }
/* código de coleta compactado no modo folha (tudo precisa caber sem scroll) */
body.dlv-active .dlv-pickup-code { margin: 8px 0 2px; padding: 10px 12px; }
body.dlv-active .dlv-pickup-code__digits { font-size: 32px; }
/* troco/maquininha/retorno compactados no modo folha */
body.dlv-active .dlvPayFlags { margin: 8px 0 2px; gap: 5px; }
body.dlv-active .dlvPayFlag { padding: 7px 10px; }

/* ── Entrega PENDENTE padronizada com o card de corrida (.pendingCard) ──
   O bloco escuro .dlvSilentList foi aposentado; as entregas devolvidas usam a
   MESMA estrutura do card de corrida pendente. Ajustes mínimos aqui: */
.pendingCard--dlv { margin-top: 10px; }
.pendingCard--dlv .proposalEyebrow .dlvFlow-plat { vertical-align: middle; margin: 0 2px; }

/* ───────── Chegada automática por GPS (ACCEPTED) ─────────
   Estado padrão enquanto o app detecta sozinho a chegada na loja — some e dá
   lugar ao slide manual (.dlvFlow-cta / #dlvSlideCta) se o GPS "parar" por
   GPS_STALL_MS (ver delivery.js). Mesmo visual do .dlv-pickup-wait (âmbar),
   mas em azul pra não confundir com "aguardando a loja". */
.dlv-auto-arrive {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 13px 14px;
  border: 1.5px dashed rgba(37, 99, 235, .45);
  border-radius: 14px;
  background: #eff6ff; color: #1e3a8a;
}
.dlv-auto-arrive__spin {
  width: 18px; height: 18px; flex: 0 0 18px;
  border: 2.5px solid rgba(37, 99, 235, .25);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: dlvPickupSpin .9s linear infinite;
}
.dlv-auto-arrive__txt { min-width: 0; }
.dlv-auto-arrive__txt b { display: block; font-size: 13.5px; }
.dlv-auto-arrive__txt span { display: block; font-size: 11.5px; color: #3b5998; margin-top: 1px; }

/* ───────── Menu "⋮" de emergência (kebab) ─────────
   Botão discreto no canto do card + popover com ações manuais (confirmar
   chegada / cancelar com motivo). Sempre disponível durante a entrega. */
.dlvFlow-kebab {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid #e5e7eb; background: #fff; color: #4b5563;
  font-size: 18px; font-weight: 900; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dlvFlow-kebab:active { background: #f1f3f5; }
.dlvFlow { position: relative; } /* âncora do kebab (sobrescreve/soma ao bloco original) */

.dlvKebabMenu {
  position: fixed; z-index: 10900;
  min-width: 240px; max-width: calc(100vw - 24px);
  background: #fff; border-radius: 14px;
  box-shadow: 0 12px 36px rgba(11, 15, 25, .28);
  border: 1px solid #eef0f2;
  overflow: hidden;
  animation: dlvKebabIn .14s ease;
}
@keyframes dlvKebabIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dlvKebabItem {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 0; border-bottom: 1px solid #f1f3f5;
  background: #fff; text-align: left; cursor: pointer;
}
.dlvKebabItem:last-child { border-bottom: 0; }
.dlvKebabItem:active { background: #f8f9fa; }
.dlvKebabItem__ico { font-size: 17px; flex: 0 0 auto; }
.dlvKebabItem__txt b { display: block; font-size: 13.5px; color: #0b0f19; }
.dlvKebabItem__txt small { display: block; font-size: 11px; color: #9ca3af; margin-top: 1px; }
.dlvKebabItem--danger .dlvKebabItem__txt b { color: #dc2626; }

/* Select de motivo no picker de cancelamento (reusa a folha .msCodeSheet) */
.dlvReasonSelect {
  width: 100%; margin: 6px 0 14px; padding: 12px 14px;
  border: 1px solid #e5e7eb; border-radius: 12px;
  font-size: 14px; font-family: inherit; color: #0b0f19; background: #fff;
}

/* ───────── Banner de "etapa confirmada" (feedback rápido a cada ação) ─────────
   Pedido do dono: cada confirmação (chegada/coleta) merece uma animação clara
   pra ele entender "ok, já posso seguir". Reusa 1 elemento fixo — sem empilhar. */
.dlvStepFlash {
  position: fixed; left: 50%; top: 18%; z-index: 11500;
  transform: translate(-50%, -14px) scale(.92); opacity: 0;
  display: flex; align-items: center; gap: 10px;
  background: #16a34a; color: #fff; font-weight: 800; font-size: 14.5px;
  padding: 14px 20px; border-radius: 999px;
  box-shadow: 0 14px 36px rgba(22, 163, 74, .4);
  pointer-events: none;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.4), opacity .2s;
}
.dlvStepFlash.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.dlvStepFlash__ico { font-size: 22px; animation: dlvStepFlashPop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes dlvStepFlashPop { 0% { transform: scale(.2) rotate(-15deg); } 60% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
.pendingCard--dlv .dlvOfferRef { background: #f1f3f5; color: #0b0f19; }

/* Badge de mensagens novas no botão "Falar com a loja". */
.dlvFlow-chatlink { position: relative; }
.dlvChat-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  background: #d32f2f; color: #fff; border-radius: 9px; font-size: 11px; font-weight: 800;
  vertical-align: middle;
}