/* =========================================================================
   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;
  /* Defensive: ensure flex column sizes to content despite external CSS injection */
  align-items: stretch;
  justify-content: flex-start;
  height: auto;
}

.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;
}
.pedidos-modal__msg--sucesso {
  color: var(--mg-green, #1e9e54);
  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;
}

/* --- botão "Repetir pedido" --- */
.pedido-card__repetir {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1.5px solid var(--mg-accent, #e5a100);
  border-radius: 6px;
  background: transparent;
  color: var(--mg-accent, #e5a100);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pedido-card__repetir:hover {
  background: var(--mg-accent, #e5a100);
  color: #fff;
}
.pedido-card__repetir:disabled {
  opacity: .6;
  cursor: default;
  border-color: var(--mg-green, #1e9e54);
  color: var(--mg-green, #1e9e54);
}

.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 ------------------------------ */

/* ===================== DARK MODE OVERRIDES ===================== */
/* O tema escuro resolve --mg-* para tons escuros, mas os badges e
   superfícies internas precisam de ajustes de contraste manuais.     */

html[data-theme="dark"] .pedido-card {
  background: var(--mg-surface);             /* #11161e em vez de --mg-bg #0b0f14 */
  border-color: rgba(255, 255, 255, 0.14);   /* borda levemente mais visível */
}

html[data-theme="dark"] .pedidos-modal__input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}

html[data-theme="dark"] .pedido-card__codigo {
  color: #fff;
}

/* Badges: cores mais claras no escuro para legibilidade */
html[data-theme="dark"] .pedido-card__badge--espera {
  background: rgba(255, 194, 14, 0.18);
  border-color: rgba(255, 194, 14, 0.50);
  color: #ffd54f;
}
html[data-theme="dark"] .pedido-card__badge--andamento {
  background: rgba(66, 133, 244, 0.16);
  border-color: rgba(66, 133, 244, 0.45);
  color: #64b5f6;
}
html[data-theme="dark"] .pedido-card__badge--concluido {
  background: rgba(76, 175, 80, 0.16);
  border-color: rgba(76, 175, 80, 0.42);
  color: #81c784;
}

/* Botão repetir: tom mais visível no escuro */
html[data-theme="dark"] .pedido-card__repetir:disabled {
  color: #81c784;
  border-color: #81c784;
}

/* Mensagem de sucesso: tom mais claro */
html[data-theme="dark"] .pedidos-modal__msg--sucesso {
  color: #81c784;
}

/* Pagamento confirmado */
html[data-theme="dark"] .pedido-card__pago {
  color: #81c784;
}

/* Régua (progress bar): linhas ativas mais vibrantes */
html[data-theme="dark"] .pedido-regua--espera .pedido-regua__passo--on i {
  background: #ffd54f;
}
html[data-theme="dark"] .pedido-regua--concluido .pedido-regua__passo--on i {
  background: #81c784;
}

/* ===================== FIM DARK MODE ========================== */

/* ===================== POPUP "REPETIR COMPRA" ================ */
/* Aparece ao retornar ao site quando há CPF salvo.              */

.repetir-popup {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  animation: repetir-fadeIn 0.25s ease;
}
@keyframes repetir-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.repetir-popup__card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 22px 22px;
  max-width: 340px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.28);
}

.repetir-popup__icone {
  font-size: 32px;
  margin-bottom: 10px;
}

.repetir-popup__texto {
  font-size: 15px;
  line-height: 1.55;
  color: #1a1a1a;
  margin: 0 0 20px;
  font-weight: 500;
}

.repetir-popup__acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.repetir-popup__sim {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: var(--mg-accent, #e5a100);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.repetir-popup__sim:hover {
  background: #c98e00;
}

.repetir-popup__nao {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: #888;
  font-size: 13.5px;
  cursor: pointer;
  padding: 8px;
  transition: color 0.15s;
}
.repetir-popup__nao:hover {
  color: #555;
}

/* Popup dark mode */
html[data-theme="dark"] .repetir-popup__card {
  background: var(--mg-surface, #11161e);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .repetir-popup__texto {
  color: var(--mg-ink, #e8eef6);
}
html[data-theme="dark"] .repetir-popup__nao {
  color: rgba(232, 238, 246, 0.55);
}
html[data-theme="dark"] .repetir-popup__nao:hover {
  color: rgba(232, 238, 246, 0.8);
}

/* ---- loading overlay spinner (recompra automática) ---- */
@keyframes spin { to { transform: rotate(360deg); } }
.recompra-overlay {
  position: fixed; inset: 0; z-index: 10010;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
}
.recompra-overlay__spinner {
  width: 44px; height: 44px; border: 4px solid rgba(255,255,255,.25);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .8s linear infinite;
}
.recompra-overlay__text {
  margin-top: 14px; color: #fff; font-size: 15px; font-weight: 500;
}

/* ---- diálogo de conflito de carrinho (recompra) ---- */
.recompra-dialog {
  position: fixed; inset: 0; z-index: 10011;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
}
.recompra-dialog__box {
  background: #fff; border-radius: 14px; padding: 28px 22px 18px;
  max-width: 340px; width: 90%; text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
html[data-theme="dark"] .recompra-dialog__box {
  background: #1e2530; color: #e0e6ee;
}
.recompra-dialog__title {
  font-size: 16px; font-weight: 700; margin-bottom: 8px;
}
.recompra-dialog__msg {
  font-size: 14px; color: #555; margin-bottom: 18px;
}
html[data-theme="dark"] .recompra-dialog__msg { color: #aab; }
.recompra-dialog__actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.recompra-dialog__btn {
  border: none; border-radius: 8px; padding: 10px 18px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  min-width: 90px; transition: opacity .15s;
}
.recompra-dialog__btn:hover { opacity: .85; }
.recompra-dialog__btn--add { background: #f5a623; color: #fff; }
.recompra-dialog__btn--replace { background: #e74c3c; color: #fff; }
.recompra-dialog__btn--cancel { background: #ddd; color: #333; }
html[data-theme="dark"] .recompra-dialog__btn--cancel { background: #3a4050; color: #ccc; }

/* ===================== FIM POPUP ============================= */

/* ============== MODAL IMPORTAR CARRINHO COMPARTILHADO ============== */
#importCartModal {
  z-index: 10002;
}
#importCartModal .modal__title {
  font-size: 16px;
}
html[data-theme="dark"] #importCartItems > div {
  border-color: rgba(255, 255, 255, 0.14) !important;
}
/* ============== FIM IMPORTAR CARRINHO ============================== */

@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;
  }
}