/* =========================================================================
   consulta-pedido-mrcd-v1.css • Multigiro
   Estilo do modal "Meus pedidos" (busca de pedido por CPF).

   Só toca em seletores próprios (#orderLookupModal / .pedidos-* / .pedido-*).
   A caixa, o fundo e o cabeçalho reaproveitam .modal/.backdrop/.modal__header
   do components + home, então o tema claro/escuro já vem pronto — nada de
   paleta paralela aqui.

   As cores usam as variáveis --mg-* (home-mrcd) com fallback nas do base-mrcd,
   para o modal continuar legível em página que não carregue o CSS da home.
   ========================================================================= */

#orderLookupModal.pedidos-modal {
  width: min(560px, 94vw);
  max-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pedidos-modal__body {
  padding: 14px;
  overflow-y: auto;
  display: block;
}

.pedidos-modal__hint {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mg-ink-soft, var(--muted));
}

.pedidos-modal__form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.pedidos-modal__input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--mg-line, var(--line));
  background: var(--mg-surface, rgba(255, 255, 255, 0.06));
  color: var(--mg-ink, var(--text));
  font-size: 16px; /* 16px evita o zoom automático do iOS ao focar o campo */
  letter-spacing: 0.4px;
}

.pedidos-modal__input:focus {
  outline: 2px solid var(--mg-yellow, var(--brand));
  outline-offset: 1px;
}

.pedidos-modal__form .btn {
  white-space: nowrap;
}

.pedidos-modal__msg {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  min-height: 0;
}
.pedidos-modal__msg:empty {
  margin-top: 0;
}
.pedidos-modal__msg--info {
  color: var(--mg-ink-soft, var(--muted));
}
.pedidos-modal__msg--erro {
  color: var(--mg-red, var(--danger));
  font-weight: 700;
}

/* ------------------------------- lista ------------------------------- */

.pedidos-lista {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.pedidos-lista:empty {
  margin-top: 0;
}

.pedidos-lista__cabecalho {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--mg-ink-soft, var(--muted));
}

.pedido-card {
  border: 1px solid var(--mg-line, var(--line));
  border-radius: 14px;
  padding: 12px;
  background: var(--mg-bg, rgba(255, 255, 255, 0.04));
}

.pedido-card__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pedido-card__codigo {
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.pedido-card__badge {
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Três tons e só: esperando algo, andando, terminado. Mais que isso vira
   semáforo confuso na tela de quem só quer saber se o pedido chegou. */
.pedido-card__badge--espera {
  background: rgba(255, 194, 14, 0.16);
  border-color: rgba(255, 194, 14, 0.45);
  color: var(--mg-yellow-2, #a97f00);
}
.pedido-card__badge--andamento {
  background: rgba(13, 110, 253, 0.14);
  border-color: rgba(13, 110, 253, 0.4);
  color: var(--mg-blue, #0d6efd);
}
.pedido-card__badge--concluido {
  background: rgba(30, 158, 84, 0.16);
  border-color: rgba(30, 158, 84, 0.42);
  color: var(--mg-green, #1e9e54);
}

/* ------------------------------- régua ------------------------------- */

.pedido-regua {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 12px 0 10px;
}

.pedido-regua__passo {
  display: grid;
  gap: 4px;
  text-align: center;
}

.pedido-regua__passo i {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--mg-line, var(--line));
}

.pedido-regua__passo small {
  font-size: 10px;
  line-height: 1.2;
  color: var(--mg-ink-soft, var(--muted));
}

.pedido-regua__passo--on i {
  background: var(--mg-blue, #0d6efd);
}
.pedido-regua__passo--on small {
  color: var(--mg-ink, var(--text));
  font-weight: 700;
}
.pedido-regua--espera .pedido-regua__passo--on i {
  background: var(--mg-yellow, #ffc20e);
}
.pedido-regua--concluido .pedido-regua__passo--on i {
  background: var(--mg-green, #1e9e54);
}

/* ------------------------------ detalhes ------------------------------ */

.pedido-card__desc {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mg-ink, var(--text));
}

.pedido-card__linha {
  font-size: 12.5px;
  color: var(--mg-ink-soft, var(--muted));
  margin-top: 2px;
}

.pedido-card__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--mg-line, var(--line));
  font-size: 13px;
  color: var(--mg-ink-soft, var(--muted));
}

.pedido-card__total {
  font-size: 15px;
  color: var(--mg-ink, var(--text));
}

/* --------------------- itens do pedido (abre no toque) --------------------- */

/* Alvo de toque com no mínimo 32px de altura: no celular isso é um botão de
   dedo, não de mouse. */
.pedido-card__itens {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 4px 8px;
  margin: -4px -8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mg-blue, #0d6efd);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pedido-card__itens:hover {
  background: rgba(13, 110, 253, 0.1);
}
.pedido-card__itens:focus-visible {
  outline: 2px solid var(--mg-yellow, var(--brand));
  outline-offset: 1px;
}
.pedido-card__seta {
  font-size: 11px;
  transition: transform 0.15s ease;
}
.pedido-card__itens--aberto .pedido-card__seta {
  transform: rotate(180deg);
}

.pedido-itens {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px dashed var(--mg-line, var(--line));
  display: grid;
  gap: 8px;
}

.pedido-item {
  font-size: 12.5px;
  line-height: 1.35;
}

.pedido-item__nome {
  font-weight: 700;
  color: var(--mg-ink, var(--text));
}

.pedido-item__obs {
  color: var(--mg-ink-soft, var(--muted));
  font-size: 11.5px;
  font-style: italic;
}

.pedido-item__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--mg-ink-soft, var(--muted));
  margin-top: 1px;
}

.pedido-item--mais {
  color: var(--mg-ink-soft, var(--muted));
  font-style: italic;
}

.pedido-card__pago,
.pedido-card__pendente {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
}
.pedido-card__pago {
  color: var(--mg-green, #1e9e54);
}
.pedido-card__pendente {
  color: var(--mg-ink-soft, var(--muted));
}

/* ------------------------------ celular ------------------------------ */

@media (max-width: 520px) {
  #orderLookupModal.pedidos-modal {
    width: 94vw;
    max-height: 88vh;
  }
  .pedidos-modal__form {
    flex-wrap: wrap;
  }
  .pedidos-modal__form .btn {
    width: 100%;
  }
  .pedido-regua__passo small {
    font-size: 9px;
  }
}