/* Cartao "Onde esta seu pedido" (static/localizacao.js). O cartao usa as classes dos cartoes que ja existem
   (timeline-container/timeline-head/timeline-kicker), entao herda o tema de cada cliente; aqui so o que e dele. */
.localizacao-card[hidden],
.localizacao-card .loc-cena[hidden] { display: none !important; }
.localizacao-card .loc-frase { margin: 2px 0 14px; font-size: 17px; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.localizacao-card .loc-cidade { white-space: nowrap; }
.localizacao-card .loc-cidade .loc-nome { opacity: .7; }
.localizacao-card .loc-atual { font-size: 19px; }
.localizacao-card .loc-atual .loc-nome { opacity: 1; }
.localizacao-card .loc-transito { opacity: .7; font-style: italic; }
.localizacao-card .loc-seta { width: 22px; height: 11px; flex: 0 0 auto; opacity: .75; }
.localizacao-card .loc-flag {
  width: 21px; height: 15px; object-fit: cover; border-radius: 2px; vertical-align: -2px; margin-right: 6px;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, .38);
}
/* mapa grande no lugar da cena (09/10/2026) */
.localizacao-card .loc-cena { border-radius: 16px; overflow: hidden; }
.localizacao-card .loc-mapa-svg { display: block; width: 100%; height: auto; }
.localizacao-card .loc-rotulo {
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  paint-order: stroke; stroke-width: 4px; stroke-linejoin: round; stroke-opacity: .85;
}
/* trilho em 3 passos: origem | onde esta | destino */
.localizacao-card .loc-trilho { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.localizacao-card .loc-ponto {
  grid-column: var(--slot); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0;
}
.localizacao-card .loc-ponto strong { font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.localizacao-card .loc-ponto span { font-size: 11px; opacity: .65; }
.localizacao-card .loc-icone-chegada { width: 13px; height: 15px; flex: 0 0 auto; }
.localizacao-card .loc-nota { margin: 10px 0 0; font-size: 11px; opacity: .55; text-align: center; }

@media (max-width: 560px) {
  .localizacao-card .loc-frase { font-size: 15px; gap: 2px 8px; }
  .localizacao-card .loc-atual { font-size: 16px; }
  .localizacao-card .loc-trilho { gap: 6px; }
  .localizacao-card .loc-ponto strong { font-size: 11.5px; }
  .localizacao-card .loc-ponto span { font-size: 10.5px; }
}