/* Componentes Keepit compartilhados por todos os apps do simulador. */

/* Selo de status do pedido */
.kst { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; background: var(--sz-surface-3); color: var(--sz-text-2); }
.kst i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.kst-pending_payment { color: var(--sz-text-2); }
.kst-paid { background: var(--sz-warning-050); color: var(--sz-warning); }
.kst-preparing { background: rgb(47 127 193 / 14%); color: #4b9be0; }
.kst-ready_for_collection { background: var(--sz-violet-050); color: var(--sz-violet); }
.kst-in_transit { background: rgb(224 169 42 / 14%); color: var(--sz-ice-500); }
.kst-available_for_pickup { background: var(--sz-blue-050); color: var(--sz-blue); }
.kst-available_for_pickup i { animation: kpPulse 1.6s ease-in-out infinite; }
.kst-picked_up { background: var(--sz-success-050); color: var(--sz-success); }
.kst-cancelled, .kst-expired, .kst-exception { background: var(--sz-danger-050); color: var(--sz-danger); }
@keyframes kpPulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 4px transparent; } }

/* Tamanho de gaveta */
.kgav { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; font: 700 11.5px var(--sz-mono); background: var(--sz-surface-3); color: var(--sz-text); border: 1px solid var(--sz-border-2); }
.kgav.on { background: var(--kp-neon); color: #0d2410; border-color: transparent; }

/* Linha do tempo vertical */
.ktl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ktl-i { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding-bottom: 14px; }
.ktl-i:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--sz-border); }
.ktl-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sz-blue-050); color: var(--sz-blue); }
.ktl-ic .icon { width: 15px; height: 15px; }
.ktl-i.is-alert .ktl-ic { background: var(--sz-danger-050); color: var(--sz-danger); }
.ktl-b p { margin: 4px 0 2px; font-size: 13.5px; line-height: 1.4; }
.ktl-b small { color: var(--sz-text-3); font-size: 11.5px; }

/* Indicador de etapas (cliente) */
.kstep { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; position: relative; }
.kstep-i { display: grid; justify-items: center; gap: 6px; text-align: center; position: relative; }
.kstep-i::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 3px; background: var(--sz-border); z-index: 0; }
.kstep-i:first-child::before { display: none; }
.kstep-i.done::before, .kstep-i.now::before { background: var(--kp-neon); }
.kstep-i i { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sz-surface-3); border: 2px solid var(--sz-border-2); }
.kstep-i i .icon { width: 13px; height: 13px; color: #0d2410; }
.kstep-i.done i { background: var(--kp-neon); border-color: var(--kp-neon); }
.kstep-i.now i { border-color: var(--kp-neon); box-shadow: 0 0 0 4px rgb(61 233 15 / 20%); background: var(--sz-surface); }
.kstep-i span { font-size: 10.5px; line-height: 1.2; color: var(--sz-text-3); font-weight: 600; }
.kstep-i.done span, .kstep-i.now span { color: var(--sz-text); }

/* Foto com proporção fixa e fundo enquanto carrega */
.kimg { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sz-surface-3); border-radius: 12px; }
.kimg.wide { aspect-ratio: 16 / 9; }

/* Preço */
.kpreco { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kpreco b { font-weight: 800; font-size: 15px; }
.kpreco s { color: var(--sz-text-3); font-size: 12px; }
.kpromo { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--kp-neon); color: #0d2410; font-size: 11px; font-weight: 800; }

/* Faixa neon inclinada (como nos banners da marca) */
.kband { position: relative; background: var(--kp-neon); color: #0d2410; font-weight: 700; padding: 10px 16px 10px 26px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }

/* Selos de situação usados por badgeSituacao/pill */
.pill-warn { background: var(--sz-warning-050); color: var(--sz-warning); }
.pill-muted { background: var(--sz-surface-3); color: var(--sz-text-2); }