/* ══════════════════════════════════════════════════════════════════════════
 * css/board.css — homepage listing cards
 *
 * Ye rules BidBegin ke bidder panel ki app.css se NIKAALE gaye hain, poori
 * 456 KB CSS copy kiye bina — sirf wahi 60 rules jo card banate hain: route
 * strip, chalta hua jahaz/plane/truck, aur unke keyframes.
 *
 * Ditto kyun aur "lagbhag waisa" kyun nahi: bidder ko jo card dikhta hai wo
 * hi is site ka sabse achha sabooot hai ki andar kya hai. Ek halki nakal
 * banane par wo sabooot kamzor ho jaata — aur customer ko andar jaakar kuch
 * aur milta.
 *
 * Marketing par ALAG file rakhi hai (app par se serve nahi ki) taaki site app
 * ke chalne par nirbhar na ho aur uska koi andar ka dhaancha bahar na jaye.
 * ══════════════════════════════════════════════════════════════════════════ */

@keyframes sh-pulse{0%,100%{opacity:1}50%{opacity:.6}}
/* ===== Animated Route Infographic ===== */
/* v28.1.69: from/to chips get priority — width adapts to content (max 90px each).
   Line shrinks if needed (min 60px) so city names stay readable. */
.tra-from,.tra-to{font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;flex:0 1 auto;min-width:0;max-width:90px}
@keyframes truck-move{0%{left:0%}100%{left:100%}}
.tr-route-anim{display:flex;flex-direction:column;gap:0;min-width:0;width:100%}
.sh-rl-wrap{flex:1 1 140px;min-width:110px;max-width:240px;position:relative;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* v28.35.9: origin/dest base clamp — full name on up to 2 lines, ellipsis only if longer */
.sh-arena-origin,.sh-arena-dest{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;overflow-wrap:break-word;line-height:1.2}
.sh-rl-line{width:100%;height:3px;border-radius:3px;position:relative;overflow:visible;margin-top:2px}
.sh-rl-line.sh-mode-fcl-line{background:linear-gradient(90deg,#1e40af 0%,#0ea5e9 50%,#1e40af 100%)}
.sh-rl-line.sh-mode-lcl-line{background:linear-gradient(90deg,#0d9488 0%,#14b8a6 50%,#0d9488 100%)}
.sh-rl-line.sh-mode-air-line{background:transparent}
.sh-rl-line.sh-mode-air-line::before{content:'';position:absolute;left:0;right:0;bottom:1px;height:13px;border-top:2px dashed #f59e0b;border-radius:50% 50% 0 0/100% 100% 0 0;pointer-events:none}
.sh-rl-veh{position:absolute;top:50%;transform:translate(-50%,-65%);left:0%;animation:sh-veh-move 26s linear infinite;line-height:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));z-index:2;display:inline-block}
.sh-rl-veh svg{display:block;overflow:visible}
.sh-rl-line.sh-mode-air-line + .sh-rl-veh,.sh-rl-wrap.sh-mode-air-wrap .sh-rl-veh{animation-duration:22s;animation-name:sh-veh-move-air}
.sh-rl-wrap.sh-mode-lcl-wrap .sh-rl-veh{animation-duration:24s}
@keyframes sh-veh-move{0%{left:0%}100%{left:100%}}
@keyframes sh-veh-move-air{0%{left:0%;transform:translate(-50%,-65%) translateY(1px) rotate(-16deg)}25%{transform:translate(-50%,-65%) translateY(-9px) rotate(-7deg)}50%{left:50%;transform:translate(-50%,-65%) translateY(-13px) rotate(0deg)}75%{transform:translate(-50%,-65%) translateY(-9px) rotate(7deg)}100%{left:100%;transform:translate(-50%,-65%) translateY(1px) rotate(16deg)}}
@keyframes sh-veh-move-air-anchored{0%{left:0%;transform:translate(0,-65%) translateY(0) rotate(-15deg)}25%{transform:translate(-25%,-65%) translateY(-6px) rotate(-6deg)}50%{left:50%;transform:translate(-50%,-65%) translateY(-9px) rotate(0deg)}75%{transform:translate(-75%,-65%) translateY(-6px) rotate(6deg)}100%{left:100%;transform:translate(-100%,-65%) translateY(0) rotate(15deg)}}
.sh-rl-wrap::before{content:'';position:absolute;top:calc(50% + 2px);left:0;width:8px;height:8px;border-radius:50%;border:2px solid #fff;z-index:1}
.sh-rl-wrap::after{content:'';position:absolute;top:calc(50% + 2px);right:0;width:8px;height:8px;border-radius:50%;border:2px solid #fff;z-index:1}
.sh-rl-wrap.sh-mode-fcl-wrap::before,.sh-rl-wrap.sh-mode-fcl-wrap::after{background:#1e40af;box-shadow:0 0 0 1px #1e40af}
.sh-rl-wrap.sh-mode-lcl-wrap::before,.sh-rl-wrap.sh-mode-lcl-wrap::after{background:#0d9488;box-shadow:0 0 0 1px #0d9488}
.sh-rl-wrap.sh-mode-air-wrap::before,.sh-rl-wrap.sh-mode-air-wrap::after{background:#b45309;box-shadow:0 0 0 1px #b45309}
.sh-rl-dist{font-size:10px;font-weight:700;white-space:nowrap;text-align:center;display:block;line-height:1.2;margin-bottom:3px;background:#fff;padding:1px 6px;border-radius:8px;border:1px solid #cbd5e1;box-shadow:0 1px 2px rgba(0,0,0,.04);align-self:center;width:max-content;color:#475569}
.sh-mode-fcl-icon {
  background: linear-gradient(135deg, #1e40af, #2563eb) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.35) !important;
}
.sh-mode-lcl-icon {
  background: linear-gradient(135deg, #0f766e, #0d9488) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(13,148,136,.35) !important;
}
.sh-mode-air-icon {
  background: linear-gradient(135deg, #b45309, #d97706) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(217,119,6,.35) !important;
}
@keyframes sh-live-pulse-fcl { 0%,100%{border-left-color:#e53935} 50%{border-left-color:#ff6b6b} }
@keyframes sh-live-pulse-lcl { 0%,100%{border-left-color:#0d9488} 50%{border-left-color:#5eead4} }
@keyframes sh-live-pulse-air { 0%,100%{border-left-color:#d97706} 50%{border-left-color:#fbbf24} }
.ar-route-strip .tra-line-wrap{height:44px}
.sh-rl-veh svg { display: block; }
.sh-arena-route-line .sh-rl-wrap {
  flex: 1 1 160px !important;
  min-width: 130px !important;
  max-width: 300px !important;
  height: 44px !important;
}
.sh-arena-route-line .sh-rl-veh svg,
.sh-cr-route .sh-rl-veh svg { transform: none !important; }
/* ═══════════════════════════════════════════════════════════════════════════
   v28.74.173 — SHIPPING COLLAPSED CARD: SAAF, PROFESSIONAL, BLACK & WHITE
   Niraj: "collapsed cards me jitni bhi information hai sabhi aisa lagta hai ek
   button hai — background aur colourful hone se unprofessional feel aata hai;
   simple black & white karo, bina background effect ke."
   Sahi baat: har value (Material, Containers, $ rate, Closes, bids, mode, term)
   ek bhari-bharkam rangeen pill me thi — teen alag neele/hare/peele shades ek
   hi line me. Aankh ko pata hi nahi chalta ki kaunsi cheez padhni hai, aur
   sab kuch "click karne wali cheez" lagta hai.
   Ab: har cheez text hai — chhota grey UPPERCASE label + gehra value. Koi
   background, koi border, koi rangeen pill. Sirf DO cheezein rang rakhti hain
   aur jaan-boojh kar: LIVE ka chhota laal dot (status hai, chip nahi) aur
   mode-icon (jisse ship/plane/truck pehchana jaata hai).
   Ye niyam SIRF shipping ke card ke andar lagte hain — baaki modules ke chips
   waise ke waise (unke apne test/gates unhe pin karte hain).
   ═══════════════════════════════════════════════════════════════════════════ */
.sh-cr-wrap .bb-meta,
.sh-stock-row .bb-meta,
.sh-arena-meta .bb-meta,
#sh-arena-container .arena-card .bb-meta {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 3px;
}
.sh-cr-wrap .bb-meta-lb,
.sh-stock-row .bb-meta-lb,
.sh-arena-meta .bb-meta-lb,
#sh-arena-container .arena-card .bb-meta-lb { color: #94a3b8 !important; font-weight: 600 !important; }
.sh-cr-wrap .bb-meta-vl,
.sh-stock-row .bb-meta-vl,
.sh-arena-meta .bb-meta-vl,
#sh-arena-container .arena-card .bb-meta-vl { color: #0f172a !important; font-weight: 600 !important; }
/* 📦 🧱 💲 🔴 — rang aur shor dono */
/* mode icon: rangeen gradient ki jagah gehra slate — ship/plane/truck ka
   farq shakl se pata chalta hai, rang se nahi */
.sh-mode-fcl-icon, .sh-mode-lcl-icon, .sh-mode-air-icon,
.sh-cr-icon {
  background: #0f172a !important; color: #fff !important;
  box-shadow: none !important; border: 0 !important;
}
/* route ki line aur dono sire ke dot — monochrome */
.sh-cr-route .sh-rl-line, .sh-cr-route .sh-rl-dot,
.sh-mode-air-line::before, .sh-cr-route .sh-rl-wrap .sh-rl-end {
  border-color: #cbd5e1 !important; background-color: #cbd5e1 !important;
}

/* ── Board ka apna dhaancha ── */
.lbx-wrap{max-width:760px;margin:0 auto}
.lbx-sec{margin-bottom:34px}
.lbx-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.lbx-h h3{margin:0;font-size:1.05rem;color:#0f172a;font-weight:800}
.lbx-live{font-size:.68rem;font-weight:800;letter-spacing:.4px;color:#b91c1c;background:#fee2e2;padding:3px 9px;border-radius:20px}
.lbx-sub{color:#94a3b8;font-size:.82rem}
.lbx-more{display:block;width:100%;margin-top:10px;padding:11px;border:1px dashed #0B9D6A;color:#0B9D6A;
  background:#fff;border-radius:12px;cursor:pointer;font-weight:700;font-size:.88rem;text-align:center}
.lbx-more:hover{background:#f0fdf9}

/* Bidder card — wahi shakl */
.sh-stock-card{border:1px solid #e6eaf0;border-radius:14px;background:#fff;margin:0 0 10px;
  padding:0;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.05);cursor:pointer;transition:.16s}
.sh-stock-card:hover{box-shadow:0 8px 24px rgba(15,23,42,.10);transform:translateY(-2px)}
.lbx-bar{font-size:9px;font-weight:700;padding:2px 10px;letter-spacing:.5px;color:#fff}
.lbx-bar.live{background:#e53935}
.lbx-bar.soon{background:#1d4ed8}
.lbx-dot{display:inline-block;animation:sh-pulse 1.4s infinite}
.lbx-uid{font-size:10px;font-weight:700;color:#1d4ed8;font-family:monospace}
.lbx-chip{font-size:8px;background:#f1f5f9;color:#64748b;padding:0 4px;border-radius:3px;font-weight:600}
.lbx-meta{font-size:9px;color:#64748b}

/* Item tags, flags, bid count — wahi cheezein jo bidder ke card par hain */
.lbx-tags{font-size:9.5px;color:#475569;margin-top:4px;line-height:1.7}
.lbx-tag{background:#f1f5f9;padding:1px 5px;border-radius:3px;margin-right:3px}
.lbx-flag{font-size:8px;font-weight:800;letter-spacing:.3px;background:#fef3c7;color:#92400e;
  padding:1px 6px;border-radius:10px;text-transform:uppercase}
.lbx-bids{font-size:9.5px;color:#0f766e;background:#f0fdfa;border:1px solid #ccfbf1;
  border-radius:5px;padding:1px 6px;font-weight:600}


/* ══ TRANSPORT ROUTE STRIP (bbr-*) ═════════════════════════════════════════
 * Bidder ke transport card me route strip `bbr-*` classes par chalti hai,
 * `tra-*` par nahi. Pehla version tra-* copy kar laya tha — classes maujood
 * thi par wrapper (.tra-route) tha hi nahi, isliye layout bhi nahi bana aur
 * truck bhi nahi chala. Ab wahi classes jo asli card use karta hai.
 * ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   v28.68.15 — ROUTE STRIP (.bbr) — admin + bidder dono
   Purana design 270px column ke liye tha: location names par max-width caps
   (90px / 24%) the, isliye full-width row me bhi "Kanpur" → "K..." ho jaata
   tha aur beech me sirf ek lambi khaali line bachti thi — bahut jagah, bahut
   kam jaankari. Ab har stop ek NODE hai (dot + action + poora naam + state +
   qty) aur saare nodes rail par space-between fail jaate hain.
   ══════════════════════════════════════════════════════════════════════════ */
.bbr{width:100%;min-width:0}
.bbr-head{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-bottom:2px}
.bbr-km{font-size:10px;font-weight:800;color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:1px 7px;white-space:nowrap}
.bbr-chip{font-size:9px;font-weight:800;color:#5b21b6;background:#ede9fe;border:1px solid #c4b5fd;border-radius:8px;padding:1px 6px;white-space:nowrap}
.bbr-map{font-size:9px;font-weight:800;color:#fff;background:#2563eb;border-radius:8px;padding:1px 7px;cursor:pointer;white-space:nowrap;user-select:none}
.bbr-map:hover{background:#1d4ed8}
.bbr-rail{position:relative}
/* dot center = line center: nodes padding-top(18) - dot top(-18) = 0, dot 13px → center 6.5 = line center (top 5 + h3/2) */
.bbr-line{position:absolute;left:6px;right:6px;top:5px;height:3px;border-radius:3px;z-index:0;
  background:linear-gradient(90deg,#059669 0%,#0ea5e9 30%,#7c3aed 55%,#f59e0b 78%,#dc2626 100%)}
.bbr-truck{position:absolute;top:6px;left:0;transform:translate(-50%,-50%);z-index:3;line-height:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));pointer-events:none}
/* v28.74.0 — animation inline; v28.74.4 — pointer-events:none (decorative, clicks block na kare) */
/* v28.74.0 — bbr-truck-move hata: ab per-stop-count keyframes JS se bante hain (soft-stop) */

.bbr-nodes{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-top:18px;position:relative;z-index:1}
.bbr-node{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.bbr-node:first-child{align-items:flex-start;text-align:left}
.bbr-node:last-child{align-items:flex-end;text-align:right}
.bbr-node-more{cursor:pointer}
/* Dot rail par baithta hai (top:-18px se line ke center pe) */
.bbr-dot{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;
  border:2px solid #fff;box-sizing:border-box;z-index:2}
.bbr-node:first-child .bbr-dot{left:0;transform:none}
.bbr-node:last-child .bbr-dot{left:auto;right:0;transform:none}
.bbr-node-load   .bbr-dot{background:#059669;animation:tra-loading-pulse 2.2s ease-in-out infinite}
.bbr-node-unload .bbr-dot{background:#dc2626;animation:tra-unloading-pulse 2.2s ease-in-out infinite}
.bbr-node-via    .bbr-dot{background:#d97706;animation:tra-ms-via-pulse 2s ease-in-out infinite}
.bbr-node-more   .bbr-dot{background:#7c3aed}
.bbr-num{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:13px;height:13px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff;line-height:1;z-index:3;pointer-events:none}
.bbr-node:first-child .bbr-num{left:0;transform:none}
.bbr-node:last-child .bbr-num{left:auto;right:0;transform:none}
.bbr-lbl{font-size:8px;font-weight:800;letter-spacing:.4px;line-height:1.1;white-space:nowrap}
.bbr-node-load   .bbr-lbl{color:#059669}
.bbr-node-unload .bbr-lbl{color:#dc2626}
.bbr-node-via    .bbr-lbl{color:#d97706}
.bbr-node-more   .bbr-lbl{color:#7c3aed}
/* Poora naam — koi max-width cap nahi. Lamba naam 2 line me wrap ho jayega. */
.bbr-loc{font-size:12px;font-weight:800;color:#0f172a;line-height:1.25;margin-top:1px;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bbr-sub{font-size:9px;color:#64748b;font-weight:600;line-height:1.2;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* v28.74.0 — node ka default (truck nahi pahuncha) — halka.
   JS-generated keyframes (bbr-node-N-i) truck pahunchne par ise 1 kar dete hain. */
.bbr-node { transition: opacity .2s ease; }
.bbr-node .bbr-lbl,
.bbr-node .bbr-loc,
.bbr-node .bbr-sub { transition: color .2s ease; }
/* ══════════════════════════════════════════════════════════════════════════
   v28.74.6 — SHIPPING listing (CA + Bidder) MOBILE route: TRANSPORT-STYLE ends.
   marker: SH_MOBILE_ENDS_v28_74_6
   Pehle (v28.74.5): origin/dest apni poori-width line par (ek upar, ek neeche) —
   isse line ke SIRE par koi naam nahi tha aur bahut BLANK space bachta tha.
   Ab (transport .bbr card jaisa): route line UPAR (thodi chhoti — right me MAP ke
   liye jagah), aur naam DONO SIRE par NEECHE — origin start-side (left), dest
   end-side (right), jaise transport ke nodes. Compact, koi blank space nahi,
   naam seedhe apne endpoint ke neeche. Vehicle endpoints anchored (clip nahi).
   Sab kuch ek 640px block me → desktop/tablet (>640px) UNCHANGED.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Route container: 2 row — line (upar) + naam dono sire par (neeche) */
  .sh-cr-route,
  .sh-arena-route-line {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0 8px !important;
    row-gap: 2px !important;
    position: relative !important;
    padding-right: 40px !important;   /* MAP button ke liye jagah — line thodi chhoti */
    min-width: 0 !important;
  }

  /* ROW 1 — route line (poori, reduced width) */
  .sh-cr-route > .sh-route-anim,
  .sh-arena-route-line > .sh-rl-wrap {
    order: 0 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .sh-cr-route .sh-route-anim { display: flex !important; width: 100% !important; }
  .sh-cr-route .sh-route-anim .sh-rl-wrap {
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100% !important;
  }
  .sh-cr-route .sh-rl-wrap,
  .sh-arena-route-line .sh-rl-wrap {
    height: 32px !important;
    min-width: 0 !important;
  }
  .sh-cr-route .sh-rl-line,
  .sh-arena-route-line .sh-rl-line {
    width: 100% !important;
    margin: 0 !important;
  }

  /* VEHICLE — endpoints anchor (line ke bahar clip/overflow nahi) */
  .sh-cr-route .sh-rl-veh,
  .sh-arena-route-line .sh-rl-veh {
    animation-name: sh-veh-move-anchored !important;
  }

  /* mode-pill — chhota, line ke top-center par (row height na badhe) */
  .sh-cr-route .sh-rl-dist,
  .sh-arena-route-line .sh-rl-dist {
    position: absolute !important;
    top: -1px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    align-self: auto !important;
    font-size: 8px !important;
    padding: 0 5px !important;
    line-height: 1.4 !important;
    z-index: 3 !important;
  }

  /* ROW 2 — naam DONO SIRE par: origin start-side (left), dest end-side (right) */
  .sh-cr-route > span:first-child,
  .sh-arena-origin {
    order: 1 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 62% !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  .sh-cr-route > span:nth-child(3),
  .sh-arena-dest {
    order: 2 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 62% !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  /* MAP — right gutter me float (vertically center), flow se bahar */
  .sh-cr-route .sh-map-btn,
  .sh-arena-route-line .sh-map-btn {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    order: 3 !important;
    flex: 0 0 auto !important;
  }

  /* CARDS ke beech saaf GAP — alag-alag listing differentiate */
  .sh-stock-row { margin-bottom: 12px !important; }
  .arena-card   { margin-bottom: 14px !important; }
}
/* v28.74.52 — BBR_TL_GRID_v28_74_52: Route timeline (bidder + CA detail) is a
   responsive multi-column grid — the stop list used to stack in one tall left
   column while the section had huge blank width. Columns scale with screen:
   wide desktop 3-4, tablet 2, phone 1 (auto-fill does the math). */
.bbr-tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 22px;align-items:start}
.bbr-tl-grid>div{min-width:0}
/* v28.74.60 — BOTH_STOP_LABEL_v28_74_60: jis stop par loading + unloading
   dono hoti hai wahan pehle "VIA" dikhta tha — ab apna label (⇅ LOAD +
   UNLOAD) aur purple pulse, taaki route strip par ek nazar me samajh aaye. */
.bbr-node-both .bbr-dot{background:#7c3aed;animation:tra-ms-via-pulse 2s ease-in-out infinite}
.bbr-node-both .bbr-lbl{color:#7c3aed}

/* ══ SHIPPING KE GAYAB KEYFRAMES ═══════════════════════════════════════════
 * app.css me `.sh-arena-route-line .sh-rl-veh` ka animation-name
 * `sh-veh-move-anchored` par override hota hai. Wo OVERRIDE copy ho gaya tha
 * par uska KEYFRAME nahi — aur CSS me jis animation ka keyframe na ho, wo
 * chup-chaap chalti hi nahi. Jahaz aur plane isi wajah se khade the.
 * ══════════════════════════════════════════════════════════════════════════ */
@keyframes sh-veh-move-anchored {
  0%   { left: 0%;   transform: translate(0,     -65%); }
  100% { left: 100%; transform: translate(-100%, -65%); }
}
@keyframes sh-veh-move-air-anchored{0%{left:0%;transform:translate(0,-65%) translateY(0) rotate(-15deg)}25%{transform:translate(-25%,-65%) translateY(-6px) rotate(-6deg)}50%{left:50%;transform:translate(-50%,-65%) translateY(-9px) rotate(0deg)}75%{transform:translate(-75%,-65%) translateY(-6px) rotate(6deg)}100%{left:100%;transform:translate(-100%,-65%) translateY(0) rotate(15deg)}}
.sh-arena-route-line .sh-rl-veh{animation-name:sh-veh-move-anchored}
.sh-arena-route-line .sh-rl-wrap.sh-mode-air-wrap .sh-rl-veh{animation-name:sh-veh-move-air-anchored}


/* Loading / unloading / via dots ka pulse.
 * Ye keyframes `bbr-node-*` ke dots chalate hain — naam `tra-` se shuru hota
 * hai (purani transport strip se aaya), par istemal bbr me hota hai. Pehli
 * safai me main "bekaar tra-*" samajh kar inhe hata deta, aur teenon dot
 * chup-chaap khade reh jaate. Check ne pakad liya. */
@keyframes tra-loading-pulse{
  0%,100%{box-shadow:0 0 0 1px rgba(5,150,105,.45),0 0 0 4px rgba(5,150,105,0)}
  50%{box-shadow:0 0 0 1px rgba(5,150,105,.7),0 0 0 8px rgba(5,150,105,.22)}
}
@keyframes tra-unloading-pulse{
  0%,100%{box-shadow:0 0 0 1px rgba(220,38,38,.45),0 0 0 4px rgba(220,38,38,0)}
  50%{box-shadow:0 0 0 1px rgba(220,38,38,.7),0 0 0 8px rgba(220,38,38,.22)}
}
@keyframes tra-ms-via-pulse{
  0%,100%{box-shadow:0 0 0 1px rgba(217,119,6,.4),0 0 0 3px rgba(217,119,6,0)}
  50%{box-shadow:0 0 0 1px rgba(217,119,6,.5),0 0 0 5px rgba(217,119,6,.2)}
}
@keyframes tra-ms-loading{
  0%,100%{box-shadow:0 0 0 1px rgba(22,163,74,.4),0 0 0 4px rgba(22,163,74,0)}
  50%{box-shadow:0 0 0 1px rgba(22,163,74,.6),0 0 0 7px rgba(22,163,74,.25)}
}
@keyframes tra-ms-unloading{
  0%,100%{box-shadow:0 0 0 1px rgba(220,38,38,.4),0 0 0 4px rgba(220,38,38,0)}
  50%{box-shadow:0 0 0 1px rgba(220,38,38,.6),0 0 0 7px rgba(220,38,38,.25)}
}


/* ══ CARD — asli bidder card jaisa ══════════════════════════════════════════
 * Screenshot milane par do farq the: (1) chips me LABEL nahi tha, sirf value;
 * (2) company/location upar chips me nahi, neeche ek chhoti line me the.
 * Dono theek — ab wahi shakl.
 * ══════════════════════════════════════════════════════════════════════════ */
.lbx-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lbx-uid{font-size:11px;font-weight:800;color:#1d4ed8;font-family:ui-monospace,monospace;
  background:#eff6ff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px}
.lbx-co{font-size:11px;color:#475569;background:#f8fafc;border:1px solid #eef2f7;
  border-radius:6px;padding:1px 7px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbx-loc{font-size:11px;color:#1d4ed8;background:#eff6ff;border:1px solid #dbeafe;
  border-radius:6px;padding:1px 7px}
.lbx-dir{font-size:8.5px;font-weight:800;letter-spacing:.3px;padding:2px 7px;border-radius:20px;margin-left:auto}
.lbx-dir.fwd{background:#dcfce7;color:#166534}
.lbx-dir.rev{background:#dbeafe;color:#1d4ed8}
.lbx-bids{font-size:10px;color:#0f766e;background:#f0fdfa;border:1px solid #ccfbf1;
  border-radius:6px;padding:1px 7px;font-weight:700}

.lbx-route{font-size:15px;font-weight:800;color:#0f172a;line-height:1.35;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lbx-route b{font-weight:800}
.lbx-via{color:#64748b;font-weight:700;font-size:13px}
.lbx-stops{background:#7c3aed;color:#fff;font-size:10px;font-weight:800;
  padding:2px 9px;border-radius:20px;letter-spacing:.2px}
.lbx-det{font-size:11.5px;color:#64748b;margin-top:1px}

/* Bade, bordered, LABEL wale chips — bilkul bidder card ki tarah */
.lbx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.lbx-chipm{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:3px 9px;
  box-shadow:0 1px 1px rgba(16,24,40,.03)}
.lbx-chipm i{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.4px;color:#94a3b8}
.lbx-chipm b{font-weight:700;color:#0f172a}

/* Route strip apni patti par, asli card ki tarah */
.lbx-strip{background:linear-gradient(90deg,#f0fdf4 0%,#fefce8 50%,#fef2f2 100%);
  border-top:1px solid #f1f5f9;padding:6px 12px 10px}


/* ══ MOBILE ════════════════════════════════════════════════════════════════
 * App me in cards ke liye 17 alag media-query rules hain — jahaz/plane chhote
 * ho jaate hain, route line ki height badalti hai, chips wrap hote hain.
 * Maine sirf desktop wale rules copy kiye the, isliye mobile par card tut kar
 * bikhar jaata tha. Ab wahi rules yahan bhi.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
.sh-arena-route-line .sh-rl-line.sh-mode-air-line::before{height:9px;bottom:0}
.sh-arena-route-line .sh-rl-wrap.sh-mode-air-wrap .sh-rl-veh{animation-name:sh-veh-move-air-anchored !important}
}
@media(max-width:640px){
/* v28.1.68: shipping vehicles scale down on mobile */
  .sh-rl-wrap{flex:1 1 100px!important;width:auto!important;max-width:none!important;height:30px!important}
.sh-rl-dist{font-size:9px!important;padding:1px 5px!important}
.sh-rl-veh svg{transform:scale(0.78);transform-origin:center}
}
@media(max-width: 768px) {
/* Stock card compact */
  .sh-stock-card > div[style*="padding:8px 10px"] { padding: 7px 8px !important; gap: 6px !important; }
}
@media (max-width: 768px) {
.sh-arena-route-line       { font-size: 11px !important; gap: 4px !important; }
.sh-arena-route-line > .sh-arena-origin,
  .sh-arena-route-line > .sh-arena-dest { font-size: 11px !important; }
.sh-arena-route-line .sh-map-btn { padding: 1px 6px !important; font-size: 9px !important; }
.sh-arena-route-line .sh-map-btn-lbl { font-size: 8px !important; }
/* Top-row badges */
  .sh-stock-card > div > div[style*="font-size:9px"]  { font-size: 8px !important; }
.sh-stock-card > div > div[style*="font-size:10px"] { font-size: 9px !important; }
/* Right column rank + L1 + bid count strip */
  .sh-stock-card [data-my-rank-listing]   { font-size: 11px !important; }
.sh-stock-card [id^="sh-arank-"]         { font-size: 11px !important; }
}
@media (max-width: 480px) {
.sh-arena-route-line     { font-size: 10px !important; }
.sh-arena-route-line .sh-map-btn { padding: 1px 5px !important; font-size: 8px !important; }
}
@media (max-width: 768px) {
.sh-cr-route .sh-rl-dist { display: none !important; }
}
@media (max-width: 480px) {
.sh-arena-route-line { font-size: 11px !important; gap: 3px !important; }
.sh-arena-route-line > .sh-arena-origin,
  .sh-arena-route-line > .sh-arena-dest { font-size: 10px !important; }
}
@media (max-width: 768px) {
/* Bidder arena card */
  .sh-arena-route-line { font-size: 10px !important; gap: 3px !important; }
.sh-arena-route-line > .sh-arena-origin,
  .sh-arena-route-line > .sh-arena-dest { font-size: 9.5px !important; }
}
@media (max-width: 768px) {
/* Bidder card aggressive reduction */
  .sh-arena-route-line { font-size: 10px !important; gap: 3px !important; }
.sh-arena-route-line > .sh-arena-origin,
  .sh-arena-route-line > .sh-arena-dest { font-size: 10px !important; }
.sh-arena-route-line .sh-map-btn { padding: 0 5px !important; font-size: 8px !important; height: 16px !important; line-height: 16px !important; }
.sh-arena-route-line .sh-map-btn-lbl { font-size: 7.5px !important; }
/* Bidder card right column metrics — smaller */
  .sh-stock-card [data-my-rank-listing] { font-size: 10px !important; }
.sh-stock-card [id^="sh-arank-"]      { font-size: 10px !important; }
.sh-stock-card [id^="sh-al1-"]         { font-size: 9px !important; }
.sh-stock-card [id^="sh-abidcnt-"]     { font-size: 9px !important; }
/* All sub-info chips */
  .sh-stock-card span[style*="font-size:10px"] { font-size: 8.5px !important; }
.sh-stock-card div[style*="font-size:10px"]  { font-size: 8.5px !important; }
.sh-stock-card span[style*="font-size:11px"] { font-size: 9px !important; }
/* Title row (e.g. SHP-2026-XXXX, mode pills) */
  .sh-stock-card [class*="sh-arena-title"]  { font-size: 11px !important; }
}
@media (max-width: 480px) {
.sh-arena-route-line { font-size: 9px !important; }
.sh-arena-route-line > .sh-arena-origin,
  .sh-arena-route-line > .sh-arena-dest { font-size: 9px !important; }
.sh-arena-route-line .sh-map-btn { padding: 0 4px !important; font-size: 7.5px !important; }
.sh-arena-route-line .sh-map-btn-lbl { font-size: 7px !important; }
.sh-stock-card [data-my-rank-listing] { font-size: 9px !important; }
.sh-stock-card [id^="sh-arank-"]      { font-size: 9px !important; }
.sh-stock-card [id^="sh-al1-"]         { font-size: 8.5px !important; }
.sh-stock-card [id^="sh-abidcnt-"]     { font-size: 8.5px !important; }
}
@media (max-width: 768px) {
.sh-cr-route .sh-rl-wrap {
    flex: 1 1 auto !important; width: 100% !important;
    min-width: 0 !important; max-width: none !important; height: 26px !important;
  }
.sh-cr-route .sh-rl-dist { display: none !important; }
}
@media(max-width:640px){
.bbr-head{justify-content:flex-start}
.bbr-nodes{gap:6px;padding-top:16px}
.bbr-lbl{font-size:7px;letter-spacing:.2px}
/* v28.74.4 — mobile: LOADING/UNLOADING label chhota + kam letter-spacing → padoswale node se overlap na ho */
  .bbr-loc{font-size:10px}
/* v28.74.4 — 11 → 10 (location name mobile) */
  .bbr-sub{font-size:7.5px}
/* v28.74.4 — 8 → 7.5 (state · qty mobile) */
  .bbr{--bbr-dur:14s}
/* mobile: thoda tez */
  .bbr-truck svg{width:34px;height:19px}
}
@media (max-width: 640px) {
.sh-rl-veh svg { width: 44px; height: auto; }
.sh-rl-wrap { height: 34px; }
}
@media (max-width: 640px) {
.sh-arena-route-line .sh-rl-wrap,
  .sh-cr-route .sh-rl-wrap { height: 36px !important; min-width: 90px !important; }
.sh-arena-route-line .sh-rl-veh svg,
  .sh-cr-route .sh-rl-veh svg { width: 46px; height: auto; }
}
@media (max-width: 640px) {
/* Route container: 2 row — line (upar) + naam dono sire par (neeche) */
  .sh-cr-route,
  .sh-arena-route-line {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0 8px !important;
    row-gap: 2px !important;
    position: relative !important;
    padding-right: 40px !important;   /* MAP button ke liye jagah — line thodi chhoti */
    min-width: 0 !important;
  }
/* ROW 1 — route line (poori, reduced width) */
  .sh-cr-route > .sh-route-anim,
  .sh-arena-route-line > .sh-rl-wrap {
    order: 0 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
.sh-cr-route .sh-route-anim .sh-rl-wrap {
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100% !important;
  }
.sh-cr-route .sh-rl-wrap,
  .sh-arena-route-line .sh-rl-wrap {
    height: 32px !important;
    min-width: 0 !important;
  }
.sh-cr-route .sh-rl-line,
  .sh-arena-route-line .sh-rl-line {
    width: 100% !important;
    margin: 0 !important;
  }
/* VEHICLE — endpoints anchor (line ke bahar clip/overflow nahi) */
  .sh-cr-route .sh-rl-veh,
  .sh-arena-route-line .sh-rl-veh {
    animation-name: sh-veh-move-anchored !important;
  }
/* mode-pill — chhota, line ke top-center par (row height na badhe) */
  .sh-cr-route .sh-rl-dist,
  .sh-arena-route-line .sh-rl-dist {
    position: absolute !important;
    top: -1px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    align-self: auto !important;
    font-size: 8px !important;
    padding: 0 5px !important;
    line-height: 1.4 !important;
    z-index: 3 !important;
  }
/* ROW 2 — naam DONO SIRE par: origin start-side (left), dest end-side (right) */
  .sh-cr-route > span:first-child,
  .sh-arena-origin {
    order: 1 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 62% !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
.sh-cr-route > span:nth-child(3),
  .sh-arena-dest {
    order: 2 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 62% !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
/* MAP — right gutter me float (vertically center), flow se bahar */
  .sh-cr-route .sh-map-btn,
  .sh-arena-route-line .sh-map-btn {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    order: 3 !important;
    flex: 0 0 auto !important;
  }
}
@media(max-width:640px){
.bbr-tl-grid{grid-template-columns:1fr;gap:0}
}
@media (max-width: 640px) {
#sh-arena-container .arena-card .sh-arena-rowa { flex-wrap: wrap !important; row-gap: 4px !important; }
#sh-arena-container .arena-card .sh-arena-route { flex: 1 1 100% !important; padding-right: 0 !important; }
#sh-arena-container .arena-card .sh-rowa-mid,
  #sh-arena-container .arena-card .sh-arena-rowa > div:not(.sh-arena-route) {
    border-left: 0 !important; border-right: 0 !important; }
/* naam kinaron par, line beech me — teeno ek hi line par par ab poori chaudai */
  .sh-arena-route-line { gap: 6px !important; }
.sh-arena-route-line .sh-rl-wrap { flex: 1 1 auto !important; min-width: 90px !important; }
.sh-arena-origin { text-align: left !important; }
.sh-arena-dest   { text-align: right !important; }
/* vehicle line ke ANDAR hi rahe — dono sire par aakar ruke, naam par na chadhe */
  .sh-arena-route-line .sh-rl-veh { animation-name: sh-veh-move-anchored !important; }
.sh-arena-route-line .sh-rl-veh svg { width: 34px !important; height: auto !important; }
}

/* Board ka apna mobile behaviour */
@media (max-width:640px){
  .lbx-wrap{max-width:100%}
  .lbx-sec{margin-bottom:22px}
  .lbx-h{gap:6px;margin-bottom:9px}
  .lbx-h h3{font-size:1rem}
  .lbx-sub{display:none}          /* chhoti screen par ye sirf jagah khata hai */

  /* Pehli line: UID + company + location. Mobile par company chhoti ho jaati
     hai par gayab nahi — visitor ko yahi batata hai ki asli buyer hai. */
  .lbx-head{gap:4px}
  .lbx-uid{font-size:10px;padding:1px 6px}
  .lbx-co{font-size:10px;max-width:120px;padding:1px 6px}
  .lbx-loc{font-size:10px;padding:1px 6px}
  .lbx-dir{font-size:7.5px;padding:2px 6px;margin-left:0}
  .lbx-bids{font-size:9px;padding:1px 6px}

  .lbx-route{font-size:13.5px;gap:4px}
  .lbx-via{font-size:11.5px}
  .lbx-stops{font-size:9px;padding:1px 7px}
  .lbx-det{font-size:10.5px}

  /* Chips do line me wrap hote hain — 6 chips ek line me thoonsne par sab
     kat jaate the. */
  .lbx-chips{gap:4px;margin-top:6px}
  .lbx-chipm{font-size:10px;padding:2px 7px;gap:4px}
  .lbx-chipm i{font-size:7.5px}

  .lbx-tags{font-size:9px}
  .lbx-strip{padding:4px 8px 8px}

  /* Truck ki route strip: mobile par nodes ke naam chhote, par dono chhor
     dikhte rahen. */
  .bbr-loc{font-size:10px}
  .bbr-lbl{font-size:7px}
  .bbr-sub{font-size:8px}
  .bbr-truck svg{width:32px;height:18px}
  .bbr-head{font-size:9px}
}

@media (max-width:400px){
  /* Sabse chhoti screen: company chip line badal leta hai, warna UID hi
     kat jaata hai. */
  .lbx-co{max-width:100%;order:9}
  .lbx-dir{margin-left:auto}
  .lbx-chipm{font-size:9.5px}
  .lbx-route{font-size:12.5px}
}

.lbx-sea{margin:6px 0 2px}
@media (max-width:640px){.lbx-sea{margin:5px 0 1px}}