/* kirim-truck-cart.css — "Muatan truk" (kirim-truck-cart.js): the order-card button, the cart bar and the sheet.
   Phone first: 44px targets, rows <= 52px (name + "sisa" stacked left, − box + × right), the bar fixed above the app's bottom nav
   (same offset as the order editor's cart bar), the sheet a bottom sheet whose body scrolls and whose footer stays put.
   Desktop (>= 768px): the bar sticks under the order list, the sheet is a centred dialog <= 960px. Colours are the Kirim screen's. */
.ktc-add{min-height:44px;white-space:nowrap}
.ktc-add.ktc-on{background:#EEF2FF;border-color:#6366F1;color:#3730A3}
.ktc-bar{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:10px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:9px;box-shadow:0 -4px 16px rgba(16,24,40,.08);position:sticky;bottom:10px;z-index:5}
/* .fg-root is overflow:auto but never the box that scrolls (.content is), which would trap the sticky bar: while the bar is on, let the real scroller hold it */
.fg-root.ktc-with-bar{overflow:visible}
.ktc-bar-txt{flex:1 1 auto;min-width:0;font-size:.9rem;font-weight:750;line-height:1.3;color:#344054;overflow-wrap:anywhere}
.ktc-bar-warn{font-size:.78rem;font-weight:700;color:#B42318}
.ktc-bar-btn{flex:none;min-height:46px;padding:8px 16px;white-space:nowrap}
/* sheet */
.ktc-wrap{position:fixed;inset:0;z-index:1200}
.ktc-back{position:absolute;inset:0;background:rgba(16,24,40,.45)}
.ktc-sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(960px,calc(100% - 32px));max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;min-height:0;background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(16,24,40,.35);color:#101828}
.ktc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid #EAECF0;flex:none}
.ktc-head h2{margin:0;font-size:1.05rem}
.ktc-close{min-height:44px}
.ktc-body{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 16px;-webkit-overflow-scrolling:touch}
.ktc-msg{margin:0 0 10px}
.ktc-vehicle{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px 12px;align-items:start;margin-bottom:10px}
.ktc-vehicle .ktc-nt{grid-column:1/-1}
.ktc-vehicle .fg-select,.ktc-vehicle .fg-input{min-height:44px;font-size:16px}
.ktc-cap-pre{display:flex;gap:6px;margin:4px 0 6px}
.ktc-cap-pre button{min-height:44px;padding:0 12px;border:1.5px solid #D0D5DD;border-radius:10px;background:#fff;font:inherit;font-weight:700;color:#101828;cursor:pointer}
.ktc-cap-pre button.on{border-color:#4F46E5;background:#EEF2FF}
.ktc-cap-pre button[disabled]{opacity:.5;cursor:default}
.ktc-cap-msg{font-size:.78rem;color:#B42318;margin-top:4px}
.ktc-cap-msg[hidden]{display:none}
.ktc-mode{display:flex;gap:6px;margin:0 0 10px}
.ktc-mode .fg-btn{flex:1 1 0;min-height:44px}
.ktc-mode .fg-btn[aria-pressed="true"]{background:#312E81;color:#fff;border-color:#312E81}
.ktc-sec{border:1px solid #D0D5DD;border-radius:8px;margin:0 0 10px;padding:0 10px 4px;background:#fff}
.ktc-sec-head{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 0;border-bottom:1px solid #EAECF0}
.ktc-sec-title{flex:1 1 auto;min-width:0;font-weight:800;font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}
.ktc-sec-sub{flex:none;font-weight:800;font-size:.95rem;color:#3730A3;white-space:nowrap;font-variant-numeric:tabular-nums}
.ktc-sec-x{flex:none;min-width:44px;min-height:44px;padding:0;font-size:1.4rem;color:#667085}
.ktc-sec-x:hover{color:#B42318;background:#FEF3F2}
.ktc-code{font-weight:500;color:#667085;font-size:.78rem}
.ktc-addr{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #EAECF0}
.ktc-addr .fg-label{margin:0}
.ktc-addr .fg-input{min-height:44px;font-size:15px}
/* one line: name + "sisa" | − | box | + | × ; the echo (only >= 1000, a fraction or a refusal) and the server's sentence under it */
.ktc-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 44px 96px 44px 44px;grid-template-areas:"name sisa minus box plus x" "echo echo echo echo echo echo" "msg msg msg msg msg msg";gap:2px 6px;align-items:center;padding:4px 0;border-bottom:1px solid #EAECF0;min-height:52px}
.ktc-row:last-child{border-bottom:0}
.ktc-name{grid-area:name;min-width:0;font-weight:750;font-size:.92rem;line-height:1.25}
.ktc-name-txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ktc-sisa{grid-area:sisa;min-width:0;font-size:.78rem;color:#667085;line-height:1.25;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ktc-sisa-bad{color:#B42318;font-weight:700}
.ktc-step{min-width:44px;min-height:44px;padding:0;font-size:1.4rem;line-height:1;font-weight:700;color:#4338CA;border-color:#A5B4FC}
.ktc-step[data-dir="-1"]{grid-area:minus}.ktc-step[data-dir="1"]{grid-area:plus}
.ktc-step:hover{background:#EEF2FF}
.ktc-box{display:contents}
.ktc-box .fg-input{grid-area:box;min-height:44px;padding:6px 8px;font-size:16px;text-align:right;font-variant-numeric:tabular-nums}
.ktc-box .qbox-echo{grid-area:echo;margin:0;font-size:.76rem;line-height:1.25;text-align:right;overflow-wrap:anywhere}
.ktc-box .qbox-echo:empty{display:none}
.ktc-x{grid-area:x;min-width:44px;min-height:44px;padding:0;font-size:1.5rem;line-height:1;color:#667085}
.ktc-x:hover{color:#B42318;background:#FEF3F2}
.ktc-row-msg{grid-area:msg;font-size:.8rem;font-weight:700;color:#B42318;line-height:1.3}
.ktc-row-msg[hidden]{display:none}
.ktc-row-bad{background:#FFF5F4;box-shadow:inset 4px 0 0 #D92D20;padding-left:8px;border-radius:4px}
.ktc-skipped{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name sisa restore";opacity:.75}
.ktc-skipped .ktc-name{text-decoration:line-through}
.ktc-restore{grid-area:restore;min-height:44px}
.ktc-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-top:1px solid #D0D5DD;background:#fff;border-radius:0 0 12px 12px}
.ktc-foot-sum{flex:1 1 auto;min-width:0}
.ktc-total{font-size:1.05rem;font-weight:850;line-height:1.3;color:#101828;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ktc-over{font-size:.9rem;font-weight:800;color:#B42318}
.ktc-load{font-size:.78rem;color:#667085}
.ktc-over[hidden],.ktc-load[hidden],.ktc-msg[hidden]{display:none}
.ktc-foot-btns{flex:none;display:flex;gap:8px}
.ktc-foot-btns .fg-btn{min-height:48px}
.ktc-go{padding:8px 22px}
.ktc-busy .ktc-body{opacity:.6;pointer-events:none}
@media(max-width:767px){
  .ktc-bar{position:fixed;left:0;right:0;bottom:0;margin:0;border:0;border-top:1px solid #D0D5DD;border-radius:0;z-index:110;padding:8px 10px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(16,24,40,.12)}
  body:has(.tabs) .ktc-bar{bottom:calc(66px + env(safe-area-inset-bottom));padding-bottom:8px}
  .ktc-bar-txt{font-size:.84rem}
  .ktc-bar-btn{padding:8px 12px}
  .fg-root.ktc-with-bar{padding-bottom:88px}
  .ktc-sheet{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:92vh;max-height:92dvh;border-radius:14px 14px 0 0}
  .ktc-head{padding:10px 12px}
  .ktc-body{padding:10px 12px}
  .ktc-vehicle{grid-template-columns:minmax(0,1fr)}
  .ktc-vehicle .fg-shipment-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ktc-sec{padding:0 8px 4px}
  .ktc-row{grid-template-columns:minmax(0,1fr) 44px 64px 44px 44px;grid-template-areas:"name minus box plus x" "sisa minus box plus x" "echo echo echo echo echo" "msg msg msg msg msg";gap:0 2px}
  .ktc-row .ktc-code{display:none}
  .ktc-name{font-size:.88rem;align-self:end}
  .ktc-box .fg-input{padding:6px 4px}
  .ktc-sisa{align-self:start;font-size:.74rem}
  .ktc-skipped{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name restore" "sisa restore"}
  .ktc-foot{flex-wrap:wrap;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-radius:0}
  .ktc-foot-btns{flex:1 1 100%}
  .ktc-foot-btns .fg-btn{flex:1 1 0}
}
@media(max-width:380px){.ktc-vehicle .fg-shipment-form{grid-template-columns:minmax(0,1fr)}}