/* GOODLOAD — भाड़े के हिसाब का रूप
   ═══════════════════════════════════════════════════════════════
   सिर्फ़ `#bhada` पर्दे के अंदर की चीज़ें। बाहर कुछ नहीं बदलता —
   यह file हटा दीजिए तो बाक़ी app वैसी की वैसी चलती रहेगी।

   ⚠️ कहीं pixel में चौड़ाई नहीं है (css/01-rang.css का नियम)।
      सब rem, %, flex और grid में, ताकि 320px वाले पुराने फ़ोन
      पर भी, और 200% बड़े अक्षरों पर भी, पन्ना बाहर न निकले।
   ═══════════════════════════════════════════════════════════════ */

/* ── ख़ाली हालत — दूरी डाले बिना ─────────────────────────── */
#bhada .bh-khali{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center;
  padding:1.6rem 1rem;
  border:1.5px dashed var(--border);
  border-radius:var(--r-card);
  color:var(--txt3);
}
#bhada .bh-khali .ci{ width:var(--ic-xl); height:var(--ic-xl); color:#C3CFE6; }
#bhada .bh-khali b{ font-size:.9rem; font-weight:800; color:var(--txt2); }
#bhada .bh-khali span{ font-size:.75rem; font-weight:600; }

/* ── ऊपर वाला डिब्बा: रास्ता + तीन आँकड़े ─────────────────── */
#bhada .bh-top{ padding:.85rem .9rem; }
#bhada .bh-raasta{
  display:block;
  font-size:.98rem; font-weight:800; color:var(--txt);
  line-height:1.35;
  /* ⚠️ लंबे शहर के नाम (जैसे "छत्रपति संभाजीनगर") तोड़ने ही हैं,
     वरना डिब्बा चौड़ा होकर पूरा पन्ना बग़ल में खिसका देता है। */
  overflow-wrap:anywhere;
}
#bhada .bh-top small{
  display:block; margin-top:.15rem;
  font-size:.72rem; font-weight:600; color:var(--txt3);
}
#bhada .bh-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
  margin-top:.75rem;
}
#bhada .bh-3 > div{
  background:var(--bg2);
  border-radius:.7rem;
  padding:.5rem .3rem;
  text-align:center;
  min-width:0;
}
#bhada .bh-3 b{
  display:block;
  font-size:1.05rem; font-weight:800; color:var(--p2);
  line-height:1.15;
  overflow-wrap:anywhere;
}
#bhada .bh-3 span{
  display:block; margin-top:.1rem;
  font-size:.64rem; font-weight:700; color:var(--txt3);
}

/* ── ख़र्च की एक पंक्ति ──────────────────────────────────── */
#bhada .bh-kharch{ padding:.85rem .9rem; }
#bhada .bh-kharch .secname{ margin-top:0; }
#bhada .bh-row{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.55rem 0;
  border-bottom:1px solid var(--bg);
}
#bhada .bh-row .ci{
  width:var(--ic); height:var(--ic); flex:none;
  color:var(--txt3); margin-top:.1rem;
}
#bhada .bh-row-t{ flex:1; min-width:0; }
#bhada .bh-row-t b{
  display:block;
  font-size:.82rem; font-weight:700; color:var(--txt);
}
#bhada .bh-row-t small{
  display:block; margin-top:.1rem;
  font-size:.66rem; font-weight:600; color:var(--txt3);
  /* हिसाब की पूरी पंक्ति दिखे — "840 km ÷ 4 km/L × ₹95" */
  overflow-wrap:anywhere;
}
#bhada .bh-row-r{
  flex:none;
  font-size:.86rem; font-weight:800; color:var(--txt);
  /* पैसों के अंक एक-दूसरे के नीचे सीधे रहें */
  font-variant-numeric:tabular-nums;
}
#bhada .bh-kul{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.6rem;
  padding-top:.7rem;
}
#bhada .bh-kul span{ font-size:.86rem; font-weight:800; color:var(--red); }
#bhada .bh-kul b{
  font-size:1.15rem; font-weight:800; color:var(--red);
  font-variant-numeric:tabular-nums;
}

/* ── कम से कम इतना माँगिए ───────────────────────────────── */
#bhada .bh-maango{ padding:0; overflow:hidden; }
#bhada .bh-note-sm{
  display:block;
  padding:.6rem .8rem .7rem;
  font-size:.66rem; font-weight:600; color:var(--txt3);
  line-height:1.5;
}

/* ── बचत / घाटा ─────────────────────────────────────────── */
#bhada .bh-ntj{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem;
  padding:.8rem .9rem;
  /* छोटे पर्दे पर दोनों तरफ़ की लिखावट टकराए नहीं */
  flex-wrap:wrap;
}
#bhada .bh-ntj.ok{ background:#F0FBF5; border-color:#BFE8D6; }
#bhada .bh-ntj.na{ background:#FDECEE; border-color:#F8CDD2; }
#bhada .bh-ntj-l{ min-width:0; }
#bhada .bh-ntj-r{ text-align:end; min-width:0; }
#bhada .bh-ntj b{ font-size:.92rem; font-weight:800; line-height:1.25; }
#bhada .bh-ntj-r b{
  font-size:1.2rem;
  font-variant-numeric:tabular-nums;
}
#bhada .bh-ntj small{
  display:block; margin-top:.12rem;
  font-size:.66rem; font-weight:600; color:var(--txt2);
  overflow-wrap:anywhere;
}
#bhada .bh-ntj.ok b{ color:var(--green); }
#bhada .bh-ntj.na b{ color:var(--red); }

/* ── ख़ाली वापसी का निशान ────────────────────────────────── */
#bhada .bh-check{
  display:flex; align-items:flex-start; gap:.6rem;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:.8rem;
  padding:.65rem .75rem;
  margin-bottom:.75rem;
  cursor:pointer;
}
#bhada .bh-check input{
  /* नाप rem में — फ़ोन की बड़ी font setting पर निशान भी बड़ा हो */
  width:1.15rem; height:1.15rem; flex:none; margin-top:.05rem;
  accent-color:var(--p2);
}
#bhada .bh-check b{
  display:block;
  font-size:.82rem; font-weight:700; color:var(--txt);
}
#bhada .bh-check small{
  display:block; margin-top:.15rem;
  font-size:.68rem; font-weight:600; color:var(--txt3);
  line-height:1.5;
}

/* ── सबसे नीचे की सच्ची बात ──────────────────────────────── */
#bhada .bh-sach{
  margin:.9rem 0 0;
  font-size:.66rem; font-weight:600; color:var(--txt3);
  line-height:1.65; text-align:center;
}

/* ── "फिर से अंदाज़ों पर" वाला छोटा बटन ───────────────────── */
#bhada .bh-phir-wrap{ display:flex; justify-content:flex-end; margin-top:-.4rem; }
#bhada #bh-phir{
  background:none; border:none;
  font-size:.7rem; font-weight:700; color:var(--p2);
  padding:.35rem .1rem;
  text-decoration:underline;
}