/* =========================================================
   Eclat Gold — Página de Rastreio
   Mesmos tokens do resto do site.
   ========================================================= */

.eg-rt{font-family:var(--eg-body);color:var(--eg-ink);background:#fff;padding-bottom:5rem}
.eg-rt-wrap{max-width:var(--eg-site-width,1200px);margin:0 auto;padding:0 24px}

/* Centralizado como na loja e no 404: esta página tem o mesmo formato — um
   bloco de conteúdo no eixo central, não uma coluna encostada na margem. */
.eg-rt-crumb{padding:20px 0 24px;font-size:12.5px;color:var(--eg-muted);text-align:center}
.eg-rt-crumb .woocommerce-breadcrumb{margin:0;font-size:12.5px;color:var(--eg-muted)}
.eg-rt-crumb a{color:var(--eg-muted);text-decoration:none}
.eg-rt-crumb a:hover{color:var(--eg-brand)}

/* O `margin:0 auto` é o que faltava. Os max-width já existiam — os mesmos
   620px do 404 —, mas sem centralizar o conteúdo encostava à esquerda e
   sobrava metade da faixa vazia à direita, com cada bloco terminando num
   ponto diferente (620, 680 e 820px). */
.eg-rt-topo{max-width:620px;margin:0 auto;padding:6px 0 0;text-align:center}
.eg-rt-eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--eg-brand);margin-bottom:9px}
.eg-rt-topo h1{font-size:clamp(28px,3.4vw,38px);line-height:1.12;margin:0 0 16px;font-weight:600;letter-spacing:-.4px;text-wrap:balance}
.eg-rt-topo p{margin:0;font-size:15px;color:var(--eg-muted);line-height:1.7}

/* ---------- busca ---------- */
.eg-rt-busca{margin:30px auto 0;border:1px solid var(--eg-line);border-radius:16px;padding:26px;max-width:680px;box-shadow:0 4px 26px rgba(6,58,49,.05)}
/* Dentro do card o texto volta a ser alinhado à esquerda: rótulo e dica de
   um formulário se leem a partir da margem, não do centro. */
.eg-rt-busca{text-align:left}
.eg-rt-abas{display:flex;gap:6px;background:var(--eg-sand);padding:4px;border-radius:11px;margin-bottom:20px}
/* background e border declarados: o Hello Elementor pinta button de #cc3366 no
   hover/focus e põe borda rosa em todo button. */
.eg-rt-aba{flex:1;text-align:center;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--eg-muted);cursor:pointer;border:none;background:none;font-family:var(--eg-body);transition:.15s}
.eg-rt-aba:hover,
.eg-rt-aba:focus{background:rgba(255,255,255,.6);color:var(--eg-ink)}
.eg-rt-aba.eg-on,
.eg-rt-aba.eg-on:hover,
.eg-rt-aba.eg-on:focus{background:#fff;color:var(--eg-ink);box-shadow:0 1px 3px rgba(0,0,0,.07)}
.eg-rt-aba:focus-visible{outline:2px solid var(--eg-brand);outline-offset:1px}

/* Sem JS as duas aparecem, e as duas funcionam — é um GET normal. */
.eg-rt-form{display:block}
.js .eg-rt-form{display:none}
.js .eg-rt-form.eg-on{display:block}

.eg-rt-linha{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.eg-rt-dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.eg-rt-campo{display:flex;flex-direction:column;gap:6px;margin:0}
.eg-rt-campo label{font-size:12.5px;font-weight:600;color:#3a3a38}
.eg-rt-campo input{height:48px;padding:0 14px;border:1px solid var(--eg-line);border-radius:10px;font-family:var(--eg-body);font-size:15px;color:var(--eg-ink);background:#fff;width:100%;box-shadow:none;-webkit-appearance:none;appearance:none}
.eg-rt-campo input::placeholder{color:#b6b4ae}
.eg-rt-campo input:focus{outline:none;border-color:var(--eg-brand);box-shadow:0 0 0 3px rgba(14,110,92,.12)}
#eg_codigo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5px;text-transform:uppercase}

.eg-rt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:10px;background:var(--eg-brand);color:#fff;font-family:var(--eg-body);font-size:14.5px;font-weight:600;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;transition:.15s}
.eg-rt-btn:hover,
.eg-rt-btn:focus{background:var(--eg-brand-dark);color:#fff}
.eg-rt-btn:focus-visible{outline:2px solid var(--eg-brand);outline-offset:2px}
.eg-rt-btn svg{width:18px;height:18px;display:block}
.eg-rt-btn--ghost{background:#fff;color:var(--eg-ink);border:1px solid var(--eg-line);height:42px;padding:0 16px;font-size:13.5px}
.eg-rt-btn--ghost:hover,
.eg-rt-btn--ghost:focus{background:var(--eg-g50);color:var(--eg-brand-dark)}

.eg-rt-linha-pe{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.eg-rt-link{font-size:13px;color:var(--eg-muted);text-decoration:underline;text-underline-offset:3px}
.eg-rt-link:hover{color:var(--eg-brand-dark)}
.eg-rt-dica{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;font-size:12.5px;color:var(--eg-muted);line-height:1.55}
.eg-rt-dica svg{width:15px;height:15px;color:var(--eg-brand);flex-shrink:0;margin-top:3px;display:block}

/* ---------- resultado ---------- */
.eg-rt-res{margin:30px auto 0;border:1px solid var(--eg-line);border-radius:16px;overflow:hidden;max-width:820px;scroll-margin-top:110px}
.eg-rt-res-topo{padding:22px 26px;border-bottom:1px solid var(--eg-line);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.eg-rt-res-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex-shrink:0}
.eg-rt-res-ic svg{width:24px;height:24px;display:block}
.eg-rt-res-topo h2{margin:0;font-size:19px;font-weight:600;font-family:var(--eg-body)}
.eg-rt-res-topo p{margin:2px 0 0;font-size:13.5px;color:var(--eg-muted)}
.eg-rt-res-topo > div{flex:1;min-width:200px}
.eg-rt-pill{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:5px 12px;border-radius:20px}

.eg-rt-e-transito .eg-rt-res-ic{background:var(--eg-g50);color:var(--eg-brand)}
.eg-rt-e-transito .eg-rt-pill{background:var(--eg-g50);color:var(--eg-brand-dark)}
.eg-rt-e-entregue .eg-rt-res-ic{background:var(--eg-brand);color:#fff}
.eg-rt-e-entregue .eg-rt-pill{background:var(--eg-brand);color:#fff}
.eg-rt-e-preparo .eg-rt-res-ic{background:#fdf6e6;color:#a97f16}
.eg-rt-e-preparo .eg-rt-pill{background:#fdf6e6;color:#a97f16}
.eg-rt-e-cancelado .eg-rt-res-ic{background:#fdf0ee;color:#c0392b}
.eg-rt-e-cancelado .eg-rt-pill{background:#fdf0ee;color:#c0392b}

.eg-rt-info{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--eg-line)}
.eg-rt-dado{background:#fff;padding:16px 26px}
.eg-rt-dado span{display:block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--eg-muted);margin-bottom:5px}
.eg-rt-dado b{font-size:14.5px;font-weight:600}
.eg-rt-cod{display:inline-flex;align-items:center;gap:9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
.eg-rt-copiar{border:1px solid var(--eg-line);background:#fff;border-radius:7px;width:28px;height:28px;display:grid;place-items:center;cursor:pointer;color:var(--eg-muted);padding:0;flex-shrink:0;transition:.15s}
.eg-rt-copiar:hover,
.eg-rt-copiar:focus{background:var(--eg-g50);color:var(--eg-brand);border-color:var(--eg-line)}
.eg-rt-copiar svg{width:14px;height:14px;display:block}
.eg-rt-copiar.eg-copiado{background:var(--eg-brand);border-color:var(--eg-brand);color:#fff}

/* ---------- linha do tempo ---------- */
.eg-rt-tl{padding:26px}
.eg-rt-tl-h{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--eg-muted);margin:0 0 20px}
.eg-rt-passos{list-style:none;margin:0;padding:0}
.eg-rt-passo{display:grid;grid-template-columns:34px 1fr;gap:16px;position:relative;padding-bottom:24px;text-align:left}
.eg-rt-passo:last-child{padding-bottom:0}
.eg-rt-passo::before{content:"";position:absolute;left:16px;top:34px;bottom:0;width:2px;background:var(--eg-line)}
.eg-rt-passo:last-child::before{display:none}
.eg-rt-passo.eg-rt-feito::before{background:var(--eg-brand)}
.eg-rt-bola{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--eg-line);color:#c3c3bd;z-index:1}
.eg-rt-bola svg{width:16px;height:16px;display:block}
.eg-rt-feito .eg-rt-bola{background:var(--eg-brand);border-color:var(--eg-brand);color:#fff}
.eg-rt-agora .eg-rt-bola{background:#fff;border-color:var(--eg-brand);color:var(--eg-brand);box-shadow:0 0 0 4px var(--eg-g50)}
.eg-rt-passo b{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
.eg-rt-passo small{display:block;font-size:12.5px;color:var(--eg-muted);margin-top:2px}
.eg-rt-futuro b{color:var(--eg-muted);font-weight:500}

.eg-rt-res-pe{padding:18px 26px;background:var(--eg-sand);border-top:1px solid var(--eg-line);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.eg-rt-res-pe p{margin:0;flex:1;min-width:220px;font-size:12.5px;color:var(--eg-muted);line-height:1.55}

/* ---------- estados vazios ---------- */
/* Este é irmão do card de busca e só aparece depois de uma consulta sem
   resultado — por isso escapou da primeira passada de centralização. */
.eg-rt-vazio{margin:30px auto 0;max-width:680px;border:1px solid var(--eg-line);border-radius:16px;padding:30px 26px;text-align:center;scroll-margin-top:110px}
.eg-rt-vazio .eg-rt-res-ic{margin:0 auto 14px;background:#fdf0ee;color:#c0392b}
.eg-rt-vazio--preparo .eg-rt-res-ic{background:#fdf6e6;color:#a97f16}
.eg-rt-vazio h2{margin:0 0 8px;font-size:18px;font-weight:600;font-family:var(--eg-body)}
.eg-rt-vazio p{margin:0 auto 18px;max-width:46ch;font-size:14px;color:var(--eg-muted);line-height:1.65}
.eg-rt-passos--centro{max-width:320px;margin:22px auto 22px;text-align:left}

/* ---------- transportadoras ---------- */
.eg-rt-transp{margin:38px auto 0;padding:22px 0 0;border-top:1px solid var(--eg-line);max-width:820px;text-align:center}
.eg-rt-transp > span{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--eg-muted)}
.eg-rt-transp-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.eg-rt-transp-lista i{font-style:normal;font-size:12.5px;padding:6px 13px;border:1px solid var(--eg-line);border-radius:20px;color:#3a3a38}

/* ---------- responsivo ---------- */
@media(max-width:760px){
	.eg-rt-info{grid-template-columns:1fr}
	.eg-rt-linha{grid-template-columns:1fr}
	.eg-rt-dupla{grid-template-columns:1fr}
}
@media(max-width:600px){
	.eg-rt{padding-bottom:4rem}
	.eg-rt-wrap{padding:0 16px}
	.eg-rt-crumb{padding:16px 0 18px}
	.eg-rt-busca{padding:20px 18px;border-radius:14px}
	.eg-rt-res-topo,.eg-rt-tl,.eg-rt-res-pe{padding-left:18px;padding-right:18px}
	.eg-rt-dado{padding:14px 18px}
	.eg-rt-btn{width:100%}
	.eg-rt-btn--ghost{width:auto}
	.eg-rt-res-pe .eg-rt-btn--ghost{width:100%}
}
@media(prefers-reduced-motion:reduce){
	.eg-rt-aba,.eg-rt-btn,.eg-rt-copiar{transition:none!important}
}