/* ===========================
   Rastreamento de Pedido (mobile-first)
   arquivo: static/home/css/rastrear_pedidos.css
   =========================== */

/* Variáveis de tema */
:root{
  --bg: #0b0c10;
  --card: #111318;
  --text: #e7e9ee;
  --muted: #a7b0c0;
  --brand: #6ee7b7;         /* verde menta */
  --brand-strong: #34d399;
  --accent: #60a5fa;        /* azul suave */
  --danger: #f87171;
  --ok: #86efac;

  --border: rgba(255,255,255,0.08);
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --radius: 16px;

  --spacing-1: .5rem;
  --spacing-2: .75rem;
  --spacing-3: 1rem;
  --spacing-4: 1.25rem;
  --spacing-5: 1.75rem;
  --spacing-6: 2rem;

  --font-title: 600;
}

.btn-pedido{
  display: none;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f6f7fb;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --border: rgba(15,23,42,.08);
    --shadow: 0 10px 20px rgba(2,6,23,.08);
  }
}

/* Reseta básico */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1800px 800px at 10% -10%, #0d1b2a 0%, transparent 40%) , var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utilidades */
.rp-hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Container */
.rp-container{
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--spacing-5) var(--spacing-3) var(--spacing-6);
}

/* Header */
.rp-header{
  text-align: center;
  margin-bottom: var(--spacing-5);
}
.rp-brand{
  margin: 0 0 var(--spacing-2);
  font-weight: var(--font-title);
  letter-spacing: .2px;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}
.rp-sub{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

/* Card */
.rp-card{
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 88%, #000 12%));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-4);
  box-shadow: var(--shadow);
}

/* Busca */
.rp-search{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-2);
}
.rp-input{
  width: 100%;
  padding: .9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  outline: none;
  background: color-mix(in srgb, var(--card) 92%, #fff 8%);
  color: var(--text);
  font-size: 1rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.rp-input:focus{
  border-color: color-mix(in srgb, var(--accent) 70%, #fff 30%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent 82%);
}
.rp-btn{
  padding: .9rem 1.1rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
  color: #0b1220;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 16px rgba(52,211,153,.25);
}
.rp-btn:hover{ filter: brightness(1.02); }
.rp-btn:active{ transform: translateY(1px); }

.rp-hint{
  margin: var(--spacing-2) 0 0;
  color: var(--muted);
  font-size: .9rem;
}

/* Grid resultado (mobile-first = 1 coluna) */
.rp-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
  margin-top: var(--spacing-5);
}

/* Timeline */
.rp-title{
  margin: 0 0 var(--spacing-3);
  font-size: 1.05rem;
  font-weight: var(--font-title);
  letter-spacing: .2px;
}

.rp-timeline{
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

/* Item base */
.rp-timeline li{
  position: relative;
  padding-left: 2.25rem;
  padding-right: .5rem;
  padding-bottom: var(--spacing-3);
  color: var(--muted);
}

/* Linha vertical */
.rp-timeline li::before{
  content: "";
  position: absolute;
  left: .88rem;
  top: .65rem;
  bottom: -0.2rem;
  width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--border) 70%, transparent 30%), transparent);
}

/* Nó (bolinha) */
.rp-timeline li::after{
  content: "";
  position: absolute;
  left: 0.6rem;
  top: .25rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--border) 50%, transparent 50%);
  border: 2px solid var(--border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--card) 100%, transparent);
}

/* Estados */
.rp-timeline li.done{
  color: color-mix(in srgb, var(--text) 88%, #0f0 12%);
}
.rp-timeline li.done::after{
  background: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 55%, #0a0 45%);
}
.rp-timeline li.current{
  color: var(--text);
  font-weight: 600;
}
.rp-timeline li.current::after{
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, #0a58 45%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent 80%);
}
.rp-timeline li.pending{
  opacity: .85;
}

/* KVs (Informações) */
.rp-kvs{
  margin: 0;
  display: grid;
  gap: var(--spacing-3);
}
.rp-kv{
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  padding: .6rem .8rem;
  background: color-mix(in srgb, var(--card) 94%, #000 6%);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.rp-kv dt{
  font-size: .8rem;
  color: var(--muted);
}
.rp-kv dd{
  margin: 0;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Extras (links de etiqueta/rastreio) */
.rp-extras{
  margin-top: var(--spacing-3);
  display: grid;
  gap: var(--spacing-2);
}
.rp-extras a{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, #fff 8%);
  color: var(--text);
  transition: background .2s ease, border-color .2s ease, transform .06s ease;
}
.rp-extras a:hover{
  background: color-mix(in srgb, var(--card) 86%, #fff 14%);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border) 60%);
}

/* Loading & Error */
.rp-loading, .rp-error{
  margin-top: var(--spacing-4);
  text-align: center;
}
.rp-spinner{
  width: 18px; height: 18px;
  display: inline-block;
  border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent 75%);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rp-spin 1s linear infinite;
  vertical-align: -3px;
  margin-right: .5rem;
}
@keyframes rp-spin { to { transform: rotate(360deg); } }
.rp-error{
  color: #fff;
  background: linear-gradient(180deg, #ef4444, #dc2626);
  border-radius: 12px;
  padding: .9rem 1rem;
  font-weight: 600;
  box-shadow: 0 10px 20px rgba(220,38,38,.18);
}

/* Responsivo (>= 768px: 2 colunas) */
@media (min-width: 768px){
  .rp-grid{
    grid-template-columns: 1.2fr .8fr;
    align-items: start;
  }
}

/* Pequenos ajustes em telas muito largas */
@media (min-width: 1200px){
  .rp-container{
    padding-top: var(--spacing-6);
    padding-bottom: calc(var(--spacing-6) * 1.2);
  }
}

/* STICKY FOOTER BÁSICO */
html, body { height: 100%; }
body{
  min-height: 100dvh;          /* cobre altura da tela */
  display: flex;
  flex-direction: column;
}

/* Se você tiver <main> para o conteúdo */
main{ flex: 1 0 auto; }

/* Se não tiver <main>, use no container da página */
.rp-container{ 
  flex: 1 0 auto; 
  /* (opcional) reduza o padding de fundo se estiver grande */
  padding-bottom: var(--spacing-4);
}

/* Footer cola no fim */
footer{ margin-top: auto; }

/* Garante que não existe margem “sobrando” no último filho */
body > *:last-child{ margin-bottom: 0 !important; }