/* Acompanhar a encomenda (/acompanhar), pop-up de acompanhar, carrinha de entregas e chat de apoio (botão flutuante em todas as páginas). */

/* ---------- Palco premium: luz de fim de tarde com um toque bordô ---------- */
.van-scene {
  --stage: radial-gradient(110% 120% at 50% 0%, #fff 0%, #faf4f6 46%, #f1e5ea 100%);
  position: relative; width: 100%; max-width: 560px; margin: 0 auto; overflow: hidden; border-radius: 28px;
  background: var(--stage); box-shadow: inset 0 0 0 1px #8558651a, 0 24px 60px -28px #85586559, 0 2px 6px #0000000a;
}
.van-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, #ffffff66 0%, transparent 38%); }
.van-scene svg { display: block; width: 100%; height: auto; overflow: hidden; }

/* ---------- Acompanhar a encomenda ---------- */
.track-page { max-width: 920px; }
.track-lookup { text-align: center; }
.track-lookup h1, .track-result h1 { margin: 0 0 12px; font-size: clamp(32px, 5vw, 54px); letter-spacing: -.045em; }
.track-lookup .lead, .track-result .lead { margin: 0 auto 26px; color: var(--muted); max-width: 520px; }
.track-page > .van-scene { margin-bottom: 30px; max-width: 600px; }
.track-form { display: grid; gap: 14px; max-width: 460px; margin-inline: auto; text-align: left; }
.track-form label, .track-dialog label { display: grid; gap: 7px; font-size: 12.5px; font-weight: 650; letter-spacing: .02em; color: var(--muted); }
.track-form input, .support-composer textarea, .support-identity input, .track-dialog input {
  width: 100%; min-height: 52px; padding: 13px 18px; border: 1px solid #d9d9de; border-radius: 16px; background: #fff; color: var(--ink);
  font-size: 16px; box-shadow: 0 1px 2px #0000000a; transition: border-color .25s, box-shadow .25s;
}
.track-form input:hover, .track-dialog input:hover { border-color: #b9a2aa; }
.track-form input:focus-visible, .track-dialog input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px #85586522; }
.track-form .button { justify-self: stretch; min-height: 52px; margin-top: 4px; }
.track-error { margin: 14px 0 0; color: #b3261e; font-weight: 600; font-size: 14px; }

/* Cartão principal do resultado: estágio atual + rota da encomenda */
.track-hero { position: relative; margin-bottom: 22px; padding: 30px clamp(20px, 4vw, 40px) 24px; border-radius: 30px; background: var(--stage, linear-gradient(#fff, #f5eef1)); box-shadow: inset 0 0 0 1px #8558651a, 0 30px 70px -36px #85586566; overflow: hidden; }
.track-hero::before { content: ""; position: absolute; right: -90px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(#8558660f, transparent 70%); pointer-events: none; }
.track-ref { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #8558662b; color: var(--accent); font-size: 12px; letter-spacing: .1em; font-weight: 700; }
.track-ref i { width: 7px; height: 7px; border-radius: 50%; background: #2e9e5b; box-shadow: 0 0 0 0 #2e9e5b66; animation: track-live 2.2s ease-out infinite; }
@keyframes track-live { 70% { box-shadow: 0 0 0 8px #2e9e5b00; } 100% { box-shadow: 0 0 0 0 #2e9e5b00; } }
.track-hero h1 { margin-bottom: 8px; }
.track-hero .lead { margin: 0 0 34px; max-width: 560px; }

/* Rota: a carrinha avança até ao estágio atual */
.route { --i: 0; position: relative; padding: 44px 0 6px; }
.route.go { --i: var(--target); }
.route-rail { position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 64px; height: 5px; border-radius: 3px; background: #85586622; }
.route-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--i) / 6 * 100%); border-radius: inherit; background: linear-gradient(90deg, #b07a8c, #855865 60%, #1d1d1f); transition: width 1.5s cubic-bezier(.5, 0, .15, 1); }
.route-nodes { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.route-nodes li { display: grid; justify-items: center; gap: 12px; text-align: center; }
.route-dot { position: relative; z-index: 1; margin-top: 15px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #cdb6bd; transition: background .4s .6s, box-shadow .4s .6s; }
.route-nodes .done .route-dot { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.route-nodes .current .route-dot { background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 6px #85586626; }
.route-name { font-size: 12px; line-height: 1.3; color: var(--muted); max-width: 11ch; }
.route-nodes .current .route-name { color: var(--ink); font-weight: 700; }
.route-nodes .done .route-name { color: #4a4a4f; }
.route-van { position: absolute; top: 36px; z-index: 2; width: 52px; margin-left: -26px; left: calc((var(--i) + .5) / 7 * 100%); transition: left 1.5s cubic-bezier(.5, 0, .15, 1); filter: drop-shadow(0 6px 5px #1d1d1f33); animation: route-bob .8s ease-in-out infinite alternate; }
.route-van svg { display: block; width: 100%; height: auto; }
@keyframes route-bob { to { transform: translateY(-1.5px); } }

.track-eta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin: 0 0 22px; border-radius: 22px; overflow: hidden; background: #ececf0; box-shadow: 0 0 0 1px #ececf0; }
.track-eta > div { padding: 16px 20px; background: #fff; font-size: 15px; font-weight: 550; }
.track-eta strong { display: block; margin-bottom: 3px; font-size: 11px; letter-spacing: .09em; color: var(--muted); font-weight: 700; text-transform: uppercase; }

.track-steps { list-style: none; margin: 0 0 26px; padding: 6px 4px 0; position: relative; }
.track-steps li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 0 18px; padding-bottom: 22px; }
.track-steps li:last-child { padding-bottom: 0; }
.track-steps li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: #e4e4e8; }
.track-steps li:last-child::before { display: none; }
.track-steps li.done::before { background: linear-gradient(var(--ink), #4a4a4f); }
.track-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #dcdce0; background: #fff; display: grid; place-items: center; font-size: 14px; line-height: 1; color: #fff; z-index: 1; }
.track-steps .done .track-dot { background: var(--ink); border-color: var(--ink); }
.track-steps .current .track-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 6px #85586526; animation: track-pulse 2.2s ease-in-out infinite; }
.track-steps h3 { margin: 3px 0 2px; font-size: 17px; letter-spacing: -.01em; }
.track-steps .todo h3 { color: var(--muted); font-weight: 500; }
.track-steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.track-steps .todo p { display: none; }
@keyframes track-pulse { 50% { box-shadow: 0 0 0 11px #85586511; } }

.track-card { margin-bottom: 18px; padding: 24px 26px; background: #fff; border-radius: 26px; box-shadow: 0 0 0 1px #ececf0, 0 14px 40px -26px #00000040; }
.track-card h2 { margin: 0 0 16px; font-size: 20px; letter-spacing: -.025em; }
.track-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.track-items li { display: grid; grid-template-columns: 68px 1fr; gap: 16px; align-items: center; font-size: 15px; }
.track-items img { width: 68px; height: 68px; object-fit: contain; background: linear-gradient(#f7f7f9, #eeeef1); border-radius: 16px; padding: 4px; }
.track-items .muted { color: var(--muted); font-size: 14px; margin-top: 2px; }
.track-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; font-size: 15px; }
.track-history li { padding-left: 16px; border-left: 2px solid #e4e4e8; }
.track-history li:first-child { border-left-color: var(--accent); }
.track-history time { display: block; font-size: 12px; color: var(--muted); }
.track-history .note { margin: 3px 0 0; color: var(--ink); white-space: pre-wrap; }
.track-help { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; color: #fff; border-radius: 28px; background: radial-gradient(120% 140% at 100% 0%, #6e4452 0%, #26262a 55%, #1d1d1f 100%); box-shadow: 0 30px 60px -34px #1d1d1f; }
.track-help p { margin: 0; max-width: 460px; color: #d7d0d3; }
.track-help h2 { color: #fff; margin-bottom: 6px; }
.track-help .button { background: #fff; color: var(--ink); }
.track-page [hidden], .support-panel [hidden] { display: none !important; }
@media (max-width: 640px) {
  .route-name { display: none; }
  .route { padding-bottom: 0; }
  .route-van { width: 44px; margin-left: -22px; }
  .track-hero { border-radius: 24px; padding: 24px 18px 20px; }
}

/* ---------- Carrinha de entregas: aspeto (o movimento é gerado em js/van-scene.js, ciclo de 16 s) ---------- */
.vs-skyline rect { fill: #ebdfe4; }
.vs-trunk { fill: none; stroke: #8b6f5e; stroke-width: 4; stroke-linecap: round; }
.vs-fronds path { fill: #7aa388; }
.vs-cast { fill: #000; opacity: .16; }
.vs-bush { fill: #cfdbd1; }
.vs-wall { stroke: #0000000f; }
.vs-slab { fill: #2a2a2e; }
.vs-line { fill: #855865; }
.vs-win { stroke: #0000001f; stroke-width: 1; }
.vs-mullion { stroke: #ffffff99; stroke-width: 1.4; }
.vs-handle { fill: #ecc98d; }
.vs-bell { fill: #dedee3; stroke: #0000002b; stroke-width: .8; }
.vs-bell-led { fill: #ffd266; opacity: 0; }
.vs-bell-glow { opacity: 0; }
.vs-lamp { fill: #f3ead8; stroke: #0000001a; stroke-width: .6; }
.vs-porch-glow { opacity: 0; }
.vs-step { fill: #d8d8de; }
.vs-joint { stroke: #00000014; stroke-width: 1; }
.vs-curb { fill: #d6d0d3; }
.vs-dash { stroke: #ffffffcc; stroke-width: 3; stroke-dasharray: 26 22; stroke-linecap: round; }

.vs-van-shadow { fill: #000; opacity: .3; }
.vs-beam, .vs-brake-glow, .vs-hazard { opacity: 0; }
.vs-tail { fill: #ff6b6b; opacity: .55; }
.vs-edge { stroke: #ffffff40; stroke-width: 1.6; stroke-linecap: round; }
.vs-x { stroke: #ffffffd9; stroke-width: 3; stroke-linecap: round; fill: none; }
.vs-cargo rect { fill: #f7f2ef; stroke: #00000030; stroke-width: .8; }
.vs-cargo path { stroke: #8a6a45; stroke-width: 1.2; opacity: .5; }

.vs-courier, .vs-courier-shadow, .vs-hand-box, .vs-placed, .vs-ring, .vs-chime, .vs-tick { opacity: 0; }
.vs-courier-shadow { fill: #000; }
.vs-ring { fill: none; stroke: #855865; stroke-width: 1.5; }
.vs-chime path { fill: none; stroke: #855865; stroke-width: 1.6; stroke-linecap: round; }
.vs-spark path { fill: #e0b86f; opacity: 0; }
.vs-tick { filter: drop-shadow(0 4px 5px #1d6b3f55); }
.vs-tick path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; }
.van-scene.is-shaking { animation: vs-shake .45s; }
@keyframes vs-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- Entradas visíveis: cabeçalho e carrinho ---------- */
.track-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px 0 11px; margin-right: 6px;
  border: 0; border-radius: 999px; background: linear-gradient(180deg, #fff, #f6eff2); color: var(--ink); font-size: 13.5px; font-weight: 650; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #85586633, 0 1px 2px #0000000d; transition: box-shadow .3s, transform .3s var(--ease-soft), color .3s;
}
.track-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-soft); }
.track-btn:hover, .track-btn:focus-visible { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 8px 20px -10px #85586599; transform: translateY(-1px); }
.track-btn:hover svg { transform: translateX(3px); }
@media (max-width: 640px) {
  .track-btn { padding: 0; width: 38px; justify-content: center; margin-right: 2px; }
  .track-btn span { display: none; }
}
body.menu-open .track-btn { opacity: 0; pointer-events: none; }

.bag-track {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 22px; padding: 14px 18px; text-align: left; border: 0; border-radius: 20px;
  background: linear-gradient(180deg, #fbf7f9, #f4ecef); color: var(--ink); box-shadow: inset 0 0 0 1px #8558662b; transition: box-shadow .3s, transform .3s var(--ease-soft);
}
.bag-track:hover { box-shadow: inset 0 0 0 1px var(--accent), 0 14px 30px -20px #85586599; transform: translateY(-1px); }
.bag-track svg { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px #85586626; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bag-track > span:first-of-type { flex: 1; font-size: 14px; line-height: 1.35; color: var(--muted); }
.bag-track > span:last-child { flex: none; font-size: 18px; color: var(--accent); transition: transform .3s var(--ease-soft); }
.bag-track:hover > span:last-child { transform: translateX(4px); }
.bag-track strong { display: block; color: var(--ink); font-size: 15px; }

/* ---------- Pop-up de acompanhar ---------- */
.track-dialog { width: min(472px, calc(100% - 28px)); padding: 0; overflow: hidden; border-radius: 30px; box-shadow: 0 40px 120px -20px #1d1d1f66, 0 0 0 1px #ffffff1a; }
.track-dialog::backdrop { background: rgba(29, 20, 24, .5); backdrop-filter: blur(10px) saturate(1.2); }
.track-dialog .close { z-index: 3; background: #ffffffd9; backdrop-filter: blur(6px); box-shadow: 0 2px 8px #0000001a; }
.track-stage .van-scene { max-width: none; border-radius: 0; box-shadow: none; }
.track-stage .van-scene svg { margin-top: 6px; }
.track-body { padding: 24px 32px 30px; }
.track-dialog .eyebrow { display: block; text-align: center; margin: 0 0 10px; color: var(--accent); font-weight: 700; }
.track-dialog h2 { text-align: center; font-size: 27px; letter-spacing: -.035em; margin: 0 0 8px; }
.track-dialog .muted { text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 auto 22px; max-width: 360px; }
.track-dialog form { display: grid; gap: 14px; }
.track-dialog .button { width: 100%; justify-content: center; margin-top: 4px; min-height: 54px; font-size: 16px; }
.track-dialog .button:disabled { opacity: .75; }
.track-dialog .button.is-ok { background: #238a52; }
.track-dialog .track-error { margin: 0; text-align: center; }
.track-trust { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 16px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.track-trust svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Chat de apoio ---------- */
.support-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff;
  font-weight: 600; font-size: 15px; box-shadow: 0 10px 30px #0004; transition: transform .25s var(--ease-soft), box-shadow .25s;
}
.support-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px #0005; }
.support-fab svg { width: 22px; height: 22px; }
.support-fab .badge { position: absolute; top: -4px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #d93025; color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.support-fab[hidden], .support-panel[hidden] { display: none; }

.support-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 41; width: min(380px, calc(100vw - 24px)); height: min(600px, calc(100dvh - 36px));
  display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 70px #0000004d, 0 0 0 1px #0000001a; animation: dialog-rise .3s var(--ease-soft);
}
.support-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--ink); color: #fff; }
.support-head h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; color: #fff; }
.support-head p { margin: 2px 0 0; font-size: 12.5px; color: #c7c7cc; line-height: 1.3; }
.support-head button { border: 0; background: #ffffff1f; color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; line-height: 1; }
.support-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--canvas); overscroll-behavior: contain; }
.support-msg { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-msg.customer { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.support-msg.bot, .support-msg.team { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.support-msg.team { border-color: var(--accent); }
.support-msg small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.support-msg.team small { color: var(--accent); }
.support-msg a { color: var(--blue); text-decoration: underline; }
.support-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.support-chips button { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 8px 12px; border-radius: 999px; font-size: 13.5px; }
.support-chips button:hover { border-color: var(--ink); }
.support-note { margin: 0; padding: 8px 16px; font-size: 12.5px; color: var(--muted); background: #fff; border-top: 1px solid var(--line); }
.support-identity { display: grid; gap: 8px; padding: 10px 16px 0; background: #fff; }
.support-identity input { min-height: 40px; padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.support-composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px 16px; background: #fff; }
.support-composer textarea { min-height: 44px; max-height: 120px; resize: none; padding: 10px 14px; border-radius: 22px; font-size: 15px; }
.support-composer button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 18px; }
.support-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 520px) {
  .support-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
  .support-fab { right: 12px; bottom: 12px; }
}

.support-panel [hidden], .track-page [hidden] { display: none !important; }


.support-composer textarea { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  .route-van, .route-fill, .track-ref i, .track-steps .current .track-dot { animation: none !important; transition: none !important; }
}