/* =========================================================================
   SPOJAK.sk — sledovanie.css
   Sledovanie zásielky: lookup, výsledok so stavom, kuriér, timeline statusov,
   obsah zásielky, ukážky e-mailov. Zdieľaný základ (tokeny, .btn*, header,
   footer, toast, .crumbs, .site-shell) je v base.css.
   ========================================================================= */

.tk{max-width:900px;margin:0 auto;padding:30px 28px 36px}
.tk-head{text-align:center;margin-bottom:24px}
.tk-head .eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--red);font-weight:500;margin-bottom:12px}
.tk-head h1{font-size:30px;font-weight:600;letter-spacing:-0.8px;margin-bottom:8px}
.tk-head p{font-size:14.5px;color:var(--muted);line-height:1.55;max-width:520px;margin:0 auto}

/* lookup */
.lookup{max-width:520px;margin:0 auto;border:1px solid var(--line);border-radius:var(--rad-lg);padding:22px}
.tk .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.tk .field label{font-size:12.5px;font-weight:600}
.tk .field input{border:1.5px solid var(--line);border-radius:var(--rad);padding:12px 13px;font:inherit;font-size:14px;outline:none;color:var(--ink)}
.tk .field input:focus{border-color:var(--red)}.tk .field.err input{border-color:var(--red);background:#FEF3F3}
.tk .field .emsg{font-size:11.5px;color:var(--red);display:none}.tk .field.err .emsg{display:block}
.tk .field .hint{font-size:11.5px;color:var(--muted)}
.lookup .legal{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.5}.lookup .legal a{color:var(--red);text-decoration:none}

/* result */
.result{display:none}.result.show{display:block}
.lookwrap.hide{display:none}
.rsum{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--ink);color:#fff;border-radius:var(--rad-lg);padding:18px 22px;flex-wrap:wrap}
.rsum .rl{display:flex;align-items:center;gap:14px}
.rsum .ri{width:48px;height:48px;border-radius:11px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}.rsum .ri [data-ic]{font-size:25px;color:var(--lgreen)}
.rsum .rno{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.5px}
.rsum .rstat{font-size:19px;font-weight:600;margin-top:2px}

/* timeline */
.tl{margin:22px 0 0;padding:4px 0}

/* obsah zásielky */
/* Stav objednávky — pilulka v tmavej zhrňujúcej karte. Predtým sa stav nezobrazoval vôbec,
   hoci je v databáze; zákazník videl len dátum a položky. */
.rpill{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;white-space:nowrap}
.rpill.delivered{background:var(--lgreen);color:var(--ink)}
.rpill.shipped{background:rgba(255,255,255,.92);color:var(--ink)}
.rpill.cancelled{background:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}

/* Časová os z histórie stavov objednávky. */
.rtimeline{border:1px solid var(--line);border-radius:var(--rad-lg);margin-top:18px;overflow:hidden}
.rtimeline .rh{background:var(--bg);padding:11px 16px;font-size:12px;font-weight:600;border-bottom:1px solid var(--line)}
.tstep{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line)}
.tstep:last-child{border-bottom:none}
.tstep .tdot{width:26px;height:26px;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tstep .tdot [data-ic]{font-size:14px;color:var(--muted)}
.tstep.on .tdot{background:var(--lgreen);border-color:var(--lgreen)}
.tstep.on .tdot [data-ic]{color:var(--ink)}
.tstep .tlabel{font-size:13.5px;font-weight:500}
.tstep.on .tlabel{font-weight:600}
.tstep .tdate{font-size:12px;color:var(--muted);margin-top:2px}

/* Podacie číslo zásielky (oc_order.tracking_number) — zobrazí sa len keď je vyplnené. */
.rtrack{border:1px solid var(--line);border-radius:var(--rad-lg);margin-top:18px;overflow:hidden}
.rtrack .rh{background:var(--bg);padding:11px 16px;font-size:12px;font-weight:600;border-bottom:1px solid var(--line)}
.rtrack .trow{display:flex;gap:12px;align-items:center;padding:14px 16px;flex-wrap:wrap}
.rtrack .trow>[data-ic]{font-size:20px;color:var(--muted);flex-shrink:0}
.rtrack .trow>div{flex:1;min-width:0}
.rtrack .tlabel{font-size:12px;color:var(--muted)}
.rtrack .tcode{font-size:15px;font-weight:600;letter-spacing:.5px;word-break:break-all}

.ritems{border:1px solid var(--line);border-radius:var(--rad-lg);margin-top:18px;overflow:hidden}
.ritems .rh{background:var(--bg);padding:11px 16px;font-size:12px;font-weight:600;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}
.ritems .rh .more{color:var(--red);font-weight:600;text-decoration:none}
.tk .mi{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--div)}.tk .mi:last-child{border-bottom:none}
.tk .mi .miic{width:40px;height:40px;background:var(--ph);border-radius:var(--rad);display:flex;align-items:center;justify-content:center;flex-shrink:0}.tk .mi .miic [data-ic]{font-size:20px;color:var(--ink)}
.tk .mi .mn{flex:1;font-size:13px}.tk .mi .mq{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ractions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

/* help karty */
.helpgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:30px}
.hcard{border:1px solid var(--line);border-radius:var(--rad-lg);padding:16px;text-decoration:none;color:var(--ink);transition:.15s}
.hcard:hover{border-color:var(--red)}
.hcard .hi{width:38px;height:38px;border-radius:9px;background:var(--pink);display:flex;align-items:center;justify-content:center;margin-bottom:10px}.hcard .hi [data-ic]{font-size:19px;color:var(--red)}
.hcard .ht{font-size:13.5px;font-weight:600}.hcard .hd{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}

/* e-mail ukážky */
.emails{margin-top:34px}
.emails h2{font-size:18px;font-weight:600;letter-spacing:-0.3px;display:flex;align-items:center;gap:8px;margin-bottom:5px}.emails h2 [data-ic]{font-size:20px;color:var(--red)}
.email{border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden;background:#fff}
.email .ec{background:var(--bg);padding:10px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.email h3{font-size:18px;font-weight:600;letter-spacing:-0.3px;margin-bottom:6px}
.email p{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:16px}.email p b{color:var(--ink);font-weight:500}
.es{flex:1;text-align:center;position:relative}
.es::before{content:'';position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line);z-index:1}.es:first-child::before{display:none}
.es.done::before,.es.cur::before{background:var(--green)}
.es .el{font-size:9.5px;color:var(--muted);margin-top:6px;line-height:1.2}.es.cur .el{color:var(--red);font-weight:600}.es.done .el{color:var(--ink)}

@media(max-width:768px){
  .tk{padding:22px 16px}.tk-head h1{font-size:25px}
  .helpgrid{grid-template-columns:1fr}
  .rsum{flex-direction:column;align-items:flex-start}
}

/* Čestné upozornenie na mieste bývalého (vymysleného) panelu dopravcu — sledovanie
   u dopravcu zatiaľ nie je napojené, viď DOROBIT.md → 1b. */
.tracknote{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);background:#FFF8E6;border-radius:var(--rad-lg);padding:14px 18px;margin-top:14px;font-size:13.5px;line-height:1.55}
.tracknote [data-ic]{font-size:19px;color:var(--amber);flex:none;margin-top:1px}
.tracknote a{color:var(--red);font-weight:600;text-decoration:none}