/* GOODLOAD — लोड बाज़ार
   ═══════════════════════════════════════════════════════════════
   यहाँ सिर्फ़ वे चीज़ें हैं जो बाक़ी app में नहीं थीं:
   चुनने वाली गोलियाँ (chips), लोड का काग़ज़, और हाल की पट्टी।

   ⚠️ नाप का वही नियम — कहीं pixel में चौड़ाई नहीं। हर दबाने वाली
      चीज़ कम से कम 2.75rem (≈44px) की, वरना बड़ी उँगली से नहीं दबती।
   ═══════════════════════════════════════════════════════════════ */

/* ── चुनने वाली गोलियाँ ─────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  appearance:none; border:1.5px solid var(--border); background:#fff;
  border-radius:1.4rem; padding:9px 14px; min-height:2.75rem;
  font:inherit; font-size:.78rem; font-weight:700; color:var(--txt2);
  cursor:pointer; line-height:1.2;
}
.chip:active{ transform:scale(.97); }
.chip.on{ background:var(--p2); border-color:var(--p2); color:#fff; }

/* ── ऊपर की छननी (सब / माल / गाड़ी) ───────────────────────
   एक ही पंक्ति में, अपने अंदर सरकती है — पन्ना आड़ा नहीं होता। */
.lfil{
  display:flex; gap:7px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:4px; margin-bottom:12px;
}
.lfil .chip{ flex:none; }

/* ── क्या डाल रहे हैं — दो बड़े बटन ─────────────────────── */
.kyaBtn{ display:flex; gap:10px; margin-bottom:14px; }
.kyaBtn button{
  flex:1; min-width:0; appearance:none; cursor:pointer; font:inherit;
  background:#fff; border:1.5px solid var(--border); border-radius:.9rem;
  padding:12px 8px; min-height:4.4rem;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:var(--txt2);
}
.kyaBtn button .ci{ width:var(--ic-lg); height:var(--ic-lg); }
.kyaBtn button b{ font-size:.82rem; font-weight:800; color:#0E1D33; }
.kyaBtn button small{ font-size:.64rem; font-weight:600; line-height:1.2; }
.kyaBtn button.on{ border-color:var(--p2); background:#EAF0FB; box-shadow:var(--shadow-sm); }
.kyaBtn button.on b{ color:var(--p2); }

/* गोली पर गिनती — किस श्रेणी में कितने काग़ज़ हैं */
.chip-n{
  display:inline-block; margin-inline-start:6px;
  background:#EAF0FB; color:var(--p2);
  border-radius:.6rem; padding:1px 6px; font-size:.68rem; font-weight:800;
}
.chip.on .chip-n{ background:rgba(255,255,255,.26); color:#fff; }

/* श्रेणी की पट्टी का सिर */
.lfil-t{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:7px;
}
.lfil-t span{
  display:flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:800; color:#0E1D33;
}
.lfil-t .ci{ width:var(--ic-sm); height:var(--ic-sm); color:var(--p2); }
.lfil-t small{ font-size:.65rem; font-weight:700; color:var(--txt3); }

/* कितने काग़ज़, किस छननी पर */
.ginti{
  margin:0 0 9px; font-size:.72rem; font-weight:800; color:var(--txt3);
}

/* ── लोड का काग़ज़ ──────────────────────────────────────── */
.load{
  background:#fff; border:1px solid var(--border); border-left:4px solid var(--tint,#1B54B0);
  border-radius:.9rem; margin-bottom:9px; box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.load-in{
  display:block; width:100%; text-align:start; appearance:none; font:inherit;
  background:none; border:0; padding:12px 13px; cursor:pointer;
}
.load-in:active{ background:#F7FAFF; }
.load-top{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.load-tag{
  flex:none; border-radius:1rem; padding:3px 9px;
  font-size:.62rem; font-weight:800; letter-spacing:.02em;
  background:#EAF0FB; color:var(--p2);
}
.load-tag.gaadi{ background:#E7F4EE; color:var(--green); }
.load-shreni{
  flex:none; border-radius:1rem; padding:3px 9px;
  font-size:.62rem; font-weight:800; background:#F4EAF8; color:#6A1B9A;
}
.load-when{ flex:1; min-width:0; text-align:end; font-size:.66rem; font-weight:700; color:var(--txt3); }

.load-route{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.load-route b{ font-size:.92rem; font-weight:800; color:#0E1D33; }
.load-route .ci{ width:var(--ic-sm); height:var(--ic-sm); color:var(--acc); flex:none; }
.load-tan{
  border-radius:1rem; padding:2px 9px; font-size:.68rem; font-weight:800;
  background:#FDEEE0; color:#9A4A00;
}

/* काग़ज़ के नीचे के दो बटन — खोले बिना ही भाव और बुकिंग */
.load-btn{
  display:flex; gap:8px; padding:0 13px 12px;
}
.lbtn{
  flex:1; min-width:0; appearance:none; font:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:5px;
  min-height:2.75rem; border-radius:.7rem; padding:8px 10px;
  border:1.5px solid var(--border); background:#EAF0FB; color:var(--p2);
  font-size:.78rem; font-weight:800; line-height:1.2;
}
.lbtn .ci{ width:var(--ic-sm); height:var(--ic-sm); }
.lbtn:active{ transform:scale(.98); }
.lbtn.go{ background:var(--acc); border-color:var(--acc); color:#fff; }
.lbtn.done{ background:#E7F4EE; border-color:#C9E7DA; color:var(--green); cursor:default; }
.row .lbtn{ flex:none; width:auto; }

.load-mid{ display:block; margin-top:4px; font-size:.74rem; font-weight:600; color:var(--txt2); line-height:1.45; }

.load-bot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:8px;
  margin-top:9px; padding-top:8px; border-top:1px dashed var(--border);
}
.load-amt{ font-size:1rem; font-weight:800; color:var(--green); }
.load-amt.baat{ font-size:.76rem; font-weight:700; color:var(--txt2); }
.load-who{ font-size:.66rem; font-weight:700; color:var(--txt3); text-align:end; line-height:1.35; }

/* ── हाल की पट्टी (खुला / मिल गया / पूरा) ──────────────── */
.lhaal{
  display:inline-block; border-radius:1rem; padding:3px 10px;
  font-size:.64rem; font-weight:800;
  background:#E7F4EE; color:var(--green);
}
.lhaal.mila{ background:#FFF4E5; color:#9A5B00; }
.lhaal.poora{ background:#EEF1F7; color:var(--txt2); }
.lhaal.radd{ background:#FDECEE; color:var(--red); }
.lhaal.atka{ background:#FFF4E5; color:#9A5B00; }

/* ── एक लोड पूरा — दो खाने की पर्ची ────────────────────── */
.lrow{
  display:flex; gap:10px; justify-content:space-between;
  padding:9px 0; border-bottom:1px solid var(--border);
  font-size:.8rem; font-weight:600; color:var(--txt2);
}
.lrow:last-child{ border-bottom:0; }
.lrow b{ text-align:end; font-weight:800; color:#0E1D33; }

/* ── टन का घटा-बढ़ा ────────────────────────────────────── */
.tan{ display:flex; align-items:center; gap:10px; }
.tan input{ flex:1; min-width:0; text-align:center; font-weight:800; margin:0; }
.tan button{
  flex:none; width:2.75rem; height:2.75rem; appearance:none; cursor:pointer;
  border:1.5px solid var(--border); background:#fff; border-radius:.7rem;
  font-size:1.2rem; font-weight:800; color:var(--p2); line-height:1;
}
.tan button:active{ background:#EAF0FB; }
.tan span{ flex:none; font-size:.8rem; font-weight:700; color:var(--txt2); }