/* admin/css/ship.css — Hantar pantas (#/hantar): satu kad pada satu masa. Awalan kelas: .shp-
   Telefon dahulu: kad penuh lebar, butang ≥ 44 px, medan 16 px (elak zum iOS). ≥ 1100 px: kad dua lajur (maklumat | borang hantar) supaya butang Hantar kekal dalam skrin;
   senarai "Seterusnya" dan "Tidak boleh dihantar" di bawah kad. */
html.shp-on{scroll-padding-top:8.5rem}
@media (min-width:901px){html.shp-on{scroll-padding-top:5.5rem}}
.shp{display:flex;flex-direction:column;gap:.9rem}
.shp .btn{min-height:2.75rem}
.shp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t r" "k k";align-items:start;gap:.7rem .75rem}
.shp-head__t{grid-area:t;min-width:0}
.shp-sub{min-height:1.45rem;margin-top:.15rem;font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.shp-sub:empty{display:block}
.shp-sub__w:empty{display:none}
.shp-sub__w{min-height:0;margin-top:0;color:var(--warn);font-size:.8125rem}
.shp-packline{min-height:1.2rem;margin-top:.1rem;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.shp-pk b{font-weight:600;color:var(--ink-soft)}
.shp-refresh{grid-area:r;width:2.75rem;padding:0}

/* ---------- alat: senarai pek, label, salin ---------- */
.shp-tools{grid-area:k;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.shp-tool{flex-direction:column;gap:.2rem;min-width:0;min-height:3.6rem;padding:.4rem .3rem;font-size:.78rem;line-height:1.2;text-align:center}
.shp-tool .ico{width:1.2rem;height:1.2rem}
.shp-t__f{display:none}
@media (min-width:640px){
  .shp-tools{display:flex;flex-wrap:wrap}
  .shp-tool{flex-direction:row;gap:.45rem;min-height:2.75rem;padding:.5rem 1rem;font-size:.875rem;text-align:left}
  .shp-t__f{display:inline}
  .shp-t__s{display:none}
}

.shp-tools.is-wait{visibility:hidden}

/* ---------- susun atur ---------- */
.shp-layout{display:flex;flex-direction:column;gap:1rem;max-width:48rem;min-width:0}
@media (min-width:1100px){.shp-layout{max-width:none}}
.shp-stage{min-width:0}
.shp-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1rem;align-items:start;min-width:0}
.shp-side:empty{display:none}
.shp-card,.shp-host{scroll-margin-top:8.5rem}
@media (min-width:901px){.shp-card,.shp-host{scroll-margin-top:5.5rem}}

/* ---------- jalur kemajuan / buat asal (tinggi tetap: tiada lompatan susun atur) ---------- */
.shp-slot{display:flex;align-items:center;gap:.7rem;min-height:3.9rem;margin-bottom:.8rem;padding:.55rem .85rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-sm)}
.shp-slot--sent,.shp-slot--warn{position:sticky;top:calc(var(--topbar-h) + .4rem);z-index:12;box-shadow:var(--shadow-md)}
@media (min-width:901px){.shp-slot--sent,.shp-slot--warn{top:.6rem}}
.shp-slot--sent{background:var(--ok-bg);border-color:#9fd3b6;color:#154d33}
.shp-slot--warn{background:var(--warn-bg);border-color:#e5b45e;color:#6d3d00}
.shp-slot__i{flex:none}
.shp-prog{flex:1 1 auto;min-width:0}
.shp-prog__t{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.shp-prog__n{font-size:.875rem;color:var(--ink-soft)}
.shp-prog__n b{font:600 1.2rem/1 var(--font-head);color:var(--plum-900)}
.shp-prog__s{font-size:.8125rem;color:var(--muted)}
.shp-bar{display:block;height:.45rem;margin-top:.45rem;border-radius:99px;background:var(--lilac-200);overflow:hidden}
.shp-bar.skel{min-height:.45rem}
.shp-bar i{display:block;height:100%;border-radius:99px;background:var(--plum-600)}
.shp-sent{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.shp-sent__s{font-size:.8125rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.shp-undo{flex:none;flex-direction:column;gap:0;padding:.2rem .8rem;border-color:currentColor;background:transparent;color:inherit;font-weight:600;line-height:1.15}
.shp-undo:hover{background:rgba(255,255,255,.55);border-color:currentColor}
.shp-cd{font-weight:400;font-size:.7rem;font-variant-numeric:tabular-nums;opacity:.9}
.shp-hostnote:not(:empty){margin-bottom:.8rem}
.shp-hostnote,.shp-hn{scroll-margin-top:8.5rem}
.shp-hn{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.35rem .5rem}
.shp-hn__t{min-width:0;overflow-wrap:anywhere}
.shp-hn__x{margin:-.35rem -.45rem 0 0;width:2.75rem;padding:0;color:inherit}
.shp-hn__a{grid-column:1/-1}

/* ---------- kad semasa ---------- */
.shp-host{min-width:0}
.shp-skelcard{display:flex;flex-direction:column;gap:1rem;min-height:30rem;padding:1.1rem 1rem;border:1px solid var(--line);border-top:4px solid var(--lilac-300);border-radius:var(--r-lg);background:var(--card)}
.shp-sk1{width:55%;height:1.1rem}
.shp-sk2{width:80%;height:1.9rem}
.shp-sk3{width:45%;height:1.4rem}
.shp-sk4{height:5.5rem}
.shp-sk5{height:3.4rem}
.shp-sk6{height:7rem;margin-top:auto}
.shp-card{position:relative;display:flex;flex-direction:column;gap:1rem;padding:1rem 1rem 1.1rem;border:1px solid var(--line);border-top:4px solid var(--plum-700);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-sm);animation:shp-in .22s ease-out both}
.shp-card.is-leaving{opacity:0;transform:translateX(-1.4rem);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
@keyframes shp-in{from{opacity:0;transform:translateX(1.4rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.shp-card{animation:none}.shp-card.is-leaving{transition:none}}
.shp-info{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.shp-info--b{padding-top:1rem;border-top:1px dashed var(--line-strong)}
.shp-info--b:empty{display:none}
.shp-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.35rem .5rem}
.shp-top__l{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .5rem;min-width:0}
.shp-top__c{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.shp-id{font-size:.9rem;font-weight:700;color:var(--plum-900)}
.shp-age{font-size:.8125rem;color:var(--muted)}
.shp-pos{white-space:nowrap}
.shp-pos b{font:600 1.15rem/1 var(--font-head);color:var(--plum-800);font-variant-numeric:tabular-nums}
.shp-name{margin:.1rem 0 0;font:700 1.45rem/1.2 var(--font);color:var(--plum-950);overflow-wrap:anywhere}
.shp-name--long{font-size:1.15rem}
.shp-tel{display:inline-flex;align-items:center;align-self:flex-start;gap:.5rem;min-height:2.75rem;margin-top:-.4rem;font-size:1.1rem;font-weight:600;color:var(--plum-700);text-decoration:none}
.shp-tel:hover{color:var(--plum-900);text-decoration:underline}
.shp-sec{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.shp-k{font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.shp-sec__h{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.75rem;margin-bottom:-.2rem}
.shp-lbl{border-color:transparent;background:transparent;color:var(--plum-700);font-weight:600}
.shp-lbl:hover{background:var(--lilac-100);border-color:transparent;color:var(--plum-900)}
.shp-addr{padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--lilac-50);font-size:1.05rem;line-height:1.42;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.shp-addr--wait{display:flex;flex-direction:column;gap:.5rem;user-select:none;-webkit-user-select:none}
.shp-skl{height:1.1rem}
.shp-skl--s{width:60%}
.shp-atools{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem}
.shp-atools .btn,.shp-lbl{min-height:2.75rem;gap:.35rem;padding:.25rem .65rem}
.shp-pay{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .85rem;border:2px solid;border-radius:var(--r-md)}
.shp-pay__k{font-size:.8125rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.shp-pay__v{font:700 1.7rem/1.1 var(--font);font-variant-numeric:tabular-nums}
.shp-pay__v--s{font-size:1.15rem}
.shp-pay__s{font-weight:600;overflow-wrap:anywhere}
.shp-pay--cod{background:var(--warn-bg);border-color:#e5b45e;color:var(--warn)}
.shp-pay--paid{background:var(--ok-bg);border-color:#b5dfc7;color:var(--ok)}
.shp-pay--semak{background:var(--grey-bg);border-color:var(--line-strong);color:var(--grey)}
.shp-pkg{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .35rem;font-size:1rem}
.shp-pkg__b{margin-left:auto;padding:.05rem .55rem;border-radius:99px;background:var(--lilac-100);color:var(--plum-800);font-size:.8125rem;font-weight:600}
.shp-nota{padding:.65rem .85rem;border:1px solid #bfd4fb;border-radius:var(--r-md);background:var(--info-bg);color:#173f80}
.shp-nota p{margin-top:.15rem;overflow-wrap:anywhere;white-space:pre-line}
.shp-hints{display:flex;flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none}
.shp-hints li{display:flex;align-items:flex-start;gap:.5rem;font-size:.8125rem;line-height:1.4;color:var(--warn)}
.shp-hints .ico{flex:none;width:1rem;height:1rem;margin-top:.12rem}

/* ---------- borang hantar ---------- */
.shp-form{margin:0;padding-top:1rem;border-top:1px dashed var(--line-strong)}
.shp-fs{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;min-width:0;margin:0;padding:0;border:0}
.shp-fs:disabled{opacity:.7}
@media (min-width:560px){.shp-fs{grid-template-columns:14rem minmax(0,1fr);align-items:start}.shp-wa{grid-column:1/-1}}
.shp-f[hidden]{display:none}
.shp-sel,.shp-trk{min-height:3rem;font-size:1rem}
.shp-trk{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.05rem;letter-spacing:.02em}
.shp-wa{align-items:center;min-height:2.75rem;gap:.7rem}
.shp-wa input{width:1.35rem;height:1.35rem}
.shp-wa__s{display:block;font-size:.78rem;color:var(--muted)}
.shp-wa__s--w{color:var(--warn);font-weight:600}
@media (max-width:559px){.shp-wa__s:not(.shp-wa__s--w){display:none}}
.shp-wa--off{margin:0;font-size:.8125rem;color:var(--muted)}
.shp-err:not(:empty){margin-top:.8rem}
.shp-err__a{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.shp-acts{display:flex;gap:.6rem;margin-top:1rem}
.shp-acts .btn{min-height:3.25rem}
.shp-skip{flex:1 1 0}
.shp-send{flex:2 1 0;font-size:1.1rem;font-weight:600}
.shp-ghost{display:flex;flex-direction:column;gap:.7rem;margin-top:.8rem}
.shp-ghost[hidden]{display:none}
.shp-ghost__a{display:flex;flex-wrap:wrap;gap:.5rem}

@media (min-width:1100px){
  .shp-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"a f" "b f";column-gap:1.75rem;row-gap:1rem;align-items:start}
  .shp-info--a{grid-area:a}
  .shp-info--b{grid-area:b;padding-top:0;border-top:0}
  .shp-form{grid-area:f;padding:0 0 0 1.5rem;border-top:0;border-left:1px dashed var(--line-strong)}
  .shp-fs{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:900px){.shp-slot{min-height:3.4rem}}

/* ---------- kosong, seterusnya, tidak boleh dihantar ---------- */
.shp-empty{border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--card)}
.shp-empty b{font-size:1.1rem}
.shp-empty__a{justify-content:center;margin-top:.6rem}
.shp-next .card__head,.shp-blk .card__head{padding:.7rem 1rem}
.shp-nx{margin:0;padding:0;list-style:none}
.shp-nx--scroll{max-height:27rem;overflow-y:auto;overscroll-behavior:contain}
.shp-nx li+li{border-top:1px solid var(--line)}
.shp-nx__b{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n i" "s i";align-items:center;column-gap:.5rem;width:100%;min-height:3.25rem;padding:.55rem 1rem;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.shp-nx__b:hover{background:var(--lilac-50)}
.shp-nx__b:focus-visible{outline-offset:-3px}
.shp-nx__b b{grid-area:n}
.shp-nx__s{grid-area:s;font-size:.8125rem;color:var(--muted)}
.shp-nx__i{grid-area:i;color:var(--muted)}
.shp-bl{margin:0;padding:0;list-style:none}
.shp-bl li{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;padding:.7rem 1rem}
.shp-bl li+li{border-top:1px solid var(--line)}
.shp-bl__t{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .6rem;max-width:100%}
.shp-bl__w{font-size:.8125rem;color:var(--warn);font-weight:600}
.shp-tsv{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;white-space:pre;overflow:auto}

/* ---------- Ninja Van (Hantar pantas): jalur sandbox, medan berat, nota ---------- */
.shp-njbanner{margin:0 0 .8rem}
.shp-njnote{margin:0;align-self:center}
@media (min-width:560px){.shp-njnote{grid-column:1/-1}}