/* ============================================================
   BabyPlus POS — orders-mobile.css (v2.0)
   শুধু মোবাইল ভিউয়ে "সব অর্ডার" (#tab-orders) সেকশনের কার্ড ডিজাইন —
   pos_orders_mobile_redesign.html রেফারেন্স মকআপ অনুযায়ী হুবহু।

   ⚠️ গুরুত্বপূর্ণ:
   - এই ফাইলটি সম্পূর্ণ "additive" — style.css/mobile-ui.css এর কোনো
     লাইন মোছা বা পরিবর্তন করা হয়নি।
   - ৯০০px এর বড় স্ক্রিনে (ডেস্কটপ) কিছুই বদলায় না।
   - এই ফাইলটি mobile-ui.css এর *পরে* লোড করুন।
   ============================================================ */

#bpOmCards { display: none; }
.bp-om-sheet-backdrop { display: none; }

@media (max-width: 900px) {

  #tab-orders .table-responsive { display: none !important; }
  #bpOmCards { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

  /* উপরের দুইটা অ্যাকশন বাটন (QR স্ক্যান / লাইভ সিঙ্ক) ফুল-উইথ স্ট্যাক */
  #tab-orders .card > div:first-of-type {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #tab-orders .card > div:first-of-type .btn {
    width: 100%;
    justify-content: center;
    padding: 11px 10px !important;
    font-size: 13.5px !important;
    border-radius: 12px !important;
  }

  /* ---------- ফিল্টার — কোলাপ্সড অ্যাকর্ডিয়ন (মকআপ অনুযায়ী) ---------- */
  details.bp-om-filter {
    background: #fff;
    border: 1px solid #E8ECF4;
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .bp-om-filter-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 13.5px;
    color: #1F2937;
  }
  .bp-om-filter-summary::-webkit-details-marker { display: none; }
  .bp-om-filter-summary::marker { content: ""; }
  .bp-om-filter-summary span { display: flex; align-items: center; }
  .bp-om-filter-summary svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; }
  .bp-om-filter-summary span svg { margin-right: 8px; color: #64748B; }
  .bp-om-filter-summary > svg { color: #94A3B8; transition: transform .2s ease; }
  details.bp-om-filter[open] .bp-om-filter-summary > svg { transform: rotate(180deg); }

  #tab-orders details.bp-om-filter .filter-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 14px 14px !important;
  }

  /* ---------- অর্ডার কার্ড (মকআপ অনুযায়ী) ---------- */
  .bp-om-card {
    background: #fff;
    border: 1px solid #E8ECF4;
    border-left: 3px solid #94A3B8;
    border-radius: 12px;
    padding: 12px 14px;
  }
  .bp-om-card.bp-om-pending   { border-left-color: #EF9F27; }
  .bp-om-card.bp-om-shipped   { border-left-color: #378ADD; }
  .bp-om-card.bp-om-delivered { border-left-color: #1D9E75; }
  .bp-om-card.bp-om-review    { border-left-color: #8B5CF6; }
  .bp-om-card.bp-om-void      { border-left-color: #D4537E; opacity: .9; }

  .bp-om-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
  }
  .bp-om-id { font-weight: 500; font-size: 13.5px; color: #1F2937; }
  .bp-om-date { font-size: 11px; color: #94A3B8; margin-top: 2px; }

  .bp-om-badge {
    font-size: 11px; font-weight: 500; padding: 3px 9px;
    border-radius: 10px; white-space: nowrap;
  }
  .bp-om-badge-pending   { background: #FEF3C7; color: #92400E; }
  .bp-om-badge-shipped   { background: #DBEAFE; color: #1E40AF; }
  .bp-om-badge-delivered { background: #D1FAE5; color: #065F46; }
  .bp-om-badge-review    { background: #EDE9FE; color: #5B21B6; }
  .bp-om-badge-void      { background: #FCE7F3; color: #9D174D; }

  .bp-om-cust { border-top: 0.5px solid #E8ECF4; padding-top: 8px; margin-bottom: 8px; }
  .bp-om-name { font-size: 13px; font-weight: 500; color: #1F2937; margin: 0 0 2px; }
  .bp-om-addr {
    font-size: 12px; color: #64748B; margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bp-om-phone {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: #378ADD; font-weight: 500; margin: 4px 0 0;
    text-decoration: none;
  }
  .bp-om-phone svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.3; }

  .bp-om-meta {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; font-size: 12px; margin-bottom: 10px;
  }
  .bp-om-items { color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bp-om-profit { font-weight: 500; color: #1D9E75; white-space: nowrap; }

  .bp-om-closed { font-size: 12px; font-weight: 700; color: #9D174D; display: flex; align-items: center; gap: 5px; }
  .bp-om-closed svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; }

  .bp-om-actions { display: flex; gap: 6px; }
  .bp-om-btn {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    border: none; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 500; padding: 0 8px; height: 34px; border-radius: 8px; color: #fff;
  }
  .bp-om-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; }
  .bp-om-btn-primary { flex: 1; background: #1D9E75; }
  .bp-om-btn-warn { flex: 1; background: #D4537E; }
  .bp-om-btn-secondary { flex: 1; background: #EF9F27; }
  .bp-om-btn-ghost { width: 40px; flex: none; background: #F1F5F9; color: #475569; }

  /* ---------- আরও অপশন — বটম শিট ---------- */
  .bp-om-sheet-backdrop {
    display: flex; align-items: flex-end; justify-content: center;
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(11, 23, 57, 0);
    transition: background .2s ease;
  }
  .bp-om-sheet-backdrop.bp-om-show { background: rgba(11, 23, 57, .45); }

  .bp-om-sheet {
    width: 100%; max-width: 480px;
    background: #fff; border-radius: 20px 20px 0 0;
    padding: 10px 0 14px;
    transform: translateY(100%);
    transition: transform .24s ease;
    max-height: 80vh; overflow-y: auto;
  }
  .bp-om-sheet-backdrop.bp-om-show .bp-om-sheet { transform: translateY(0); }

  .bp-om-sheet-handle { width: 36px; height: 4px; background: #E2E8F0; border-radius: 4px; margin: 0 auto 10px; }

  .bp-om-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px 10px; border-bottom: 1px solid #EEF1F7;
    font-weight: 700; font-size: 14.5px; color: #1F2937;
  }
  .bp-om-sheet-close {
    width: 28px; height: 28px; border: none; border-radius: 50%;
    background: #F1F5F9; display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .bp-om-sheet-close svg { width: 15px; height: 15px; stroke: #475569; fill: none; stroke-width: 2.3; }

  .bp-om-sheet-item {
    width: 100%; display: flex; align-items: center; gap: 12px;
    background: none; border: none; cursor: pointer; text-align: left;
    padding: 11px 16px; font-size: 14px; font-family: inherit; color: #1F2937;
  }
  .bp-om-sheet-item:active { background: #F8FAFC; }
  .bp-om-sheet-item small { color: #94A3B8; font-size: 11.5px; }
  .bp-om-sheet-item > svg:last-child { width: 15px; height: 15px; stroke: #CBD5E1; fill: none; stroke-width: 2.2; margin-left: auto; flex: none; }
  .bp-om-sheet-text { flex: 1; }
  .bp-om-sheet-danger .bp-om-sheet-text { color: #DC2626; font-weight: 700; }

  .bp-om-sheet-icon {
    width: 32px; height: 32px; border-radius: 9px; flex: none;
    display: flex; align-items: center; justify-content: center;
  }
  .bp-om-sheet-icon svg { width: 15px; height: 15px; fill: none; stroke-width: 2.2; }
  .bp-om-ic-orange { background: #FEF3C7; } .bp-om-ic-orange svg { stroke: #B45309; }
  .bp-om-ic-violet { background: #EDE9FE; } .bp-om-ic-violet svg { stroke: #6D28D9; }
  .bp-om-ic-green  { background: #D1FAE5; } .bp-om-ic-green  svg { stroke: #047857; }
  .bp-om-ic-aqua   { background: #CFFAFE; } .bp-om-ic-aqua   svg { stroke: #0E7490; }
  .bp-om-ic-red    { background: #FEE2E2; } .bp-om-ic-red    svg { stroke: #B91C1C; }
}
/* ============================================================
   Order Edit / View Popup (mobile) + PC funnel SVG fix
   ============================================================ */

/* PC: prevent huge filter SVG if accordion wrapper was applied */
.bp-om-filter-summary svg,
.bp-om-filter-summary > svg {
  width: 15px !important;
  height: 15px !important;
  max-width: 18px;
  max-height: 18px;
  flex-shrink: 0;
}
@media (min-width: 901px) {
  details.bp-om-filter > .bp-om-filter-summary { display: none !important; }
  details.bp-om-filter {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }
}

/* Card is tappable */
@media (max-width: 900px) {
  .bp-om-card {
    cursor: pointer;
    transition: box-shadow .15s ease, transform .12s ease;
  }
  .bp-om-card:active {
    transform: scale(0.985);
  }
  .bp-om-actions,
  .bp-om-actions * {
    /* clicks on buttons should not open edit sheet */
  }
}

/* ===== Edit popup ===== */
.bp-oe-backdrop {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(11, 23, 57, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: background .28s ease, opacity .28s ease, visibility .28s ease;
}
.bp-oe-backdrop.bp-oe-show {
  background: rgba(11, 23, 57, 0.5);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bp-oe-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(110%);
  opacity: 0.96;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
  overflow: hidden;
  will-change: transform;
}
.bp-oe-backdrop.bp-oe-show .bp-oe-sheet {
  transform: translateY(0);
  opacity: 1;
}

.bp-oe-handle {
  width: 36px; height: 4px;
  background: #E2E8F0;
  border-radius: 4px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.bp-oe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #EEF1F7;
  flex-shrink: 0;
  gap: 8px;
}
.bp-oe-head-left { min-width: 0; flex: 1; }
.bp-oe-oid { font-weight: 800; font-size: 15px; color: #1F2937; }
.bp-oe-date { font-size: 11.5px; color: #94A3B8; margin-top: 1px; }
.bp-oe-badge {
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 10px; white-space: nowrap;
}
.bp-oe-badge-pending   { background: #FEF3C7; color: #92400E; }
.bp-oe-badge-shipped   { background: #DBEAFE; color: #1E40AF; }
.bp-oe-badge-delivered { background: #D1FAE5; color: #065F46; }
.bp-oe-badge-review    { background: #EDE9FE; color: #5B21B6; }
.bp-oe-badge-void      { background: #FCE7F3; color: #9D174D; }

.bp-oe-close {
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: #F1F5F9; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.bp-oe-close svg { width: 16px; height: 16px; stroke: #475569; fill: none; stroke-width: 2.3; }

.bp-oe-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 20px;
  padding-bottom: 100px;
}

.bp-oe-sec { margin-bottom: 16px; }
.bp-oe-sec-title {
  font-size: 11.5px; font-weight: 700; color: #64748B;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
}

.bp-oe-field { margin-bottom: 10px; }
.bp-oe-field label {
  display: block; font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 4px;
}
.bp-oe-field input,
.bp-oe-field textarea,
.bp-oe-field select {
  width: 100%; border: 1.5px solid #E8ECF4; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  color: #1F2937; background: #F8FAFC; outline: none;
}
.bp-oe-field input:focus,
.bp-oe-field textarea:focus,
.bp-oe-field select:focus { border-color: #378ADD; background: #fff; }
.bp-oe-field textarea { resize: vertical; min-height: 64px; }

.bp-oe-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.bp-oe-items { display: flex; flex-direction: column; gap: 8px; }

.bp-oe-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px; background: #F8FAFC; border: 1px solid #E8ECF4; border-radius: 12px;
}
.bp-oe-item-info { flex: 1; min-width: 0; }
.bp-oe-item-name { font-size: 13.5px; font-weight: 600; color: #1F2937; }
.bp-oe-item-price { font-size: 12px; color: #64748B; margin-top: 2px; }

.bp-oe-qty {
  display: flex; align-items: center;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 8px; overflow: hidden;
}
.bp-oe-qty button {
  width: 30px; height: 30px; border: none; background: #F1F5F9;
  font-size: 16px; font-weight: 700; color: #475569; cursor: pointer;
}
.bp-oe-qty button:active { background: #E2E8F0; }
.bp-oe-qty span {
  min-width: 28px; text-align: center; font-size: 13.5px; font-weight: 700; color: #1F2937;
}

.bp-oe-item-total {
  font-size: 13.5px; font-weight: 700; color: #1F2937;
  white-space: nowrap; min-width: 52px; text-align: right;
}

.bp-oe-item-del {
  width: 32px; height: 32px; border: none; border-radius: 8px;
  background: #FEE2E2; color: #DC2626; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bp-oe-item-del svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.3; }

.bp-oe-add-wrap {
  margin-top: 10px; padding: 12px;
  background: #F0FDF4; border: 1.5px dashed #86EFAC; border-radius: 12px;
}
.bp-oe-add-row { display: flex; gap: 8px; align-items: stretch; }
.bp-oe-add-row select {
  flex: 1; border: 1.5px solid #E8ECF4; border-radius: 10px;
  padding: 10px 12px; font-size: 13.5px; font-family: inherit;
  color: #1F2937; background: #fff; outline: none;
}
.bp-oe-add-row input[type="number"] {
  width: 64px; border: 1.5px solid #E8ECF4; border-radius: 10px;
  padding: 10px 8px; font-size: 13.5px; font-family: inherit;
  color: #1F2937; background: #fff; outline: none; text-align: center;
}
.bp-oe-add-btn {
  border: none; border-radius: 10px; padding: 0 14px;
  background: #1D9E75; color: #fff; font-family: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.bp-oe-add-hint { font-size: 11.5px; color: #64748B; margin-top: 6px; }

.bp-oe-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bp-oe-chip {
  background: #F1F5F9; border-radius: 8px; padding: 8px 12px; font-size: 12.5px;
}
.bp-oe-chip b { display: block; font-size: 15px; color: #1F2937; margin-top: 2px; }
.bp-oe-chip.profit b { color: #1D9E75; }
.bp-oe-chip.cod b { color: #B45309; }
.bp-oe-chip.charge b { color: #1E40AF; }

.bp-oe-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid #EEF1F7;
  box-shadow: 0 -4px 20px rgba(0,0,0,.06); z-index: 5;
}
.bp-oe-btn {
  flex: 1; height: 46px; border: none; border-radius: 12px;
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.bp-oe-btn-save { background: #1D9E75; color: #fff; }
.bp-oe-btn-save:active { background: #178F68; }
.bp-oe-btn-close { background: #F1F5F9; color: #475569; flex: 0.55; }
.bp-oe-btn-close:active { background: #E2E8F0; }

@media (min-width: 901px) {
  .bp-oe-backdrop { display: none !important; visibility: hidden !important; }
}

/* ============================================================
   v2.0 — স্মার্ট কার্ড + অর্ডার আইডি কপি + ডেলিভারি চার্জ চিপ
   + চার্জ কুইক-এডিট শিট + নতুন এডিট শিট ডিজাইন
   (শুধু মোবাইল; ডেস্কটপে কিছুই বদলায় না)
   ============================================================ */
@media (max-width: 900px) {

  #bpOmCards { gap: 12px; }

  .bp-om-card {
    border-radius: 16px;
    border-left-width: 4px;
    padding: 14px 14px 12px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
  }

  .bp-om-top { align-items: center; margin-bottom: 10px; gap: 8px; }
  .bp-om-idwrap { min-width: 0; }
  .bp-om-idbtn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0; margin: 0;
    font-family: inherit; font-size: 15px; font-weight: 800; color: #0F172A;
    letter-spacing: .01em; cursor: pointer;
  }
  .bp-om-idbtn svg, .bp-oe-oidbtn svg {
    width: 14px; height: 14px; stroke: #94A3B8; fill: none; stroke-width: 2.2; flex: none;
  }
  .bp-om-idbtn.bp-copied svg, .bp-oe-hchip-btn.bp-copied svg, .bp-oe-oidbtn.bp-copied svg { stroke: #1D9E75; }
  .bp-om-date { font-size: 11.5px; color: #94A3B8; margin-top: 3px; line-height: 1.35; }
  .bp-om-badge { font-weight: 700; padding: 4px 11px; border-radius: 999px; }

  /* চিপ সারি: Parcel ID · COD · ডেলিভারি চার্জ */
  .bp-om-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .bp-om-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 10px; border-radius: 999px; border: none;
    font-family: inherit; font-size: 11.5px; font-weight: 700; line-height: 1;
    white-space: nowrap; max-width: 100%;
  }
  .bp-om-chip > span { overflow: hidden; text-overflow: ellipsis; }
  .bp-om-chip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.3; flex: none; }
  button.bp-om-chip { cursor: pointer; }
  button.bp-om-chip:active { transform: scale(.96); }
  .bp-om-chip-parcel { background: #EEF2FF; color: #4338CA; }
  .bp-om-chip-cod    { background: #FEF3C7; color: #92400E; }
  .bp-om-chip-charge { background: #E0F2FE; color: #075985; }
  .bp-om-chip-wa     { background: #ECFDF5; color: #047857; }
  .bp-om-chip-charge svg:last-child { width: 11px; height: 11px; opacity: .7; }

  /* ঠিকানা এখন কেটে না গিয়ে ২ লাইন পর্যন্ত দেখায় */
  .bp-om-cust { padding-top: 10px; margin-bottom: 10px; }
  .bp-om-name { font-size: 14px; font-weight: 700; }
  .bp-om-addr {
    white-space: normal; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.45; margin-top: 2px;
  }
  .bp-om-phone { font-size: 13px; margin-top: 6px; }

  .bp-om-meta { font-size: 12.5px; }
  .bp-om-profit {
    font-weight: 800; background: #ECFDF5; color: #047857;
    padding: 3px 9px; border-radius: 999px; font-size: 12px;
  }
  .bp-om-profit.bp-neg { background: #FEF2F2; color: #B91C1C; }

  .bp-om-actions { gap: 8px; }
  .bp-om-btn { height: 40px; border-radius: 11px; font-size: 12.5px; font-weight: 700; }
  .bp-om-btn-ghost { width: 44px; }

  /* ---------- চার্জ কুইক-এডিট শিট ---------- */
  .bp-ch-body { padding: 14px 16px 6px; }
  .bp-ch-label { display: block; font-size: 12.5px; font-weight: 700; color: #64748B; margin-bottom: 8px; }
  .bp-ch-inputwrap {
    display: flex; align-items: center; gap: 8px;
    border: 2px solid #E2E8F0; border-radius: 14px; background: #F8FAFC; padding: 0 14px;
  }
  .bp-ch-inputwrap:focus-within { border-color: #378ADD; background: #fff; }
  .bp-ch-inputwrap span { font-size: 22px; font-weight: 800; color: #94A3B8; }
  .bp-ch-inputwrap input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    height: 54px; font-size: 24px; font-weight: 800; color: #0F172A; font-family: inherit;
  }
  .bp-ch-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
  .bp-ch-preset {
    border: 1.5px solid #E2E8F0; background: #fff; color: #334155;
    border-radius: 999px; padding: 7px 14px; font-family: inherit;
    font-size: 13px; font-weight: 700; cursor: pointer;
  }
  .bp-ch-preset:active { background: #E0F2FE; border-color: #7DD3FC; }
  .bp-ch-preview { min-height: 22px; margin: 10px 0 12px; font-size: 13px; color: #64748B; }
  .bp-ch-preview s { color: #94A3B8; }
  .bp-ch-preview b.bp-pos { color: #047857; }
  .bp-ch-preview b.bp-neg { color: #B91C1C; }
  .bp-ch-save {
    width: 100%; height: 48px; border: none; border-radius: 13px;
    background: #1D9E75; color: #fff; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
    margin-bottom: 4px;
  }
  .bp-ch-save:disabled { opacity: .7; }
  .bp-ch-save .spinner { margin-right: 6px; }

  /* ---------- এডিট শিট — স্মার্ট লুক ---------- */
  .bp-oe-sheet { max-height: 94vh; max-height: 94dvh; border-radius: 22px 22px 0 0; }
  .bp-oe-head { padding: 12px 16px; }
  .bp-oe-oidbtn {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0;
    font-family: inherit; font-weight: 800; font-size: 16px; color: #0F172A; cursor: pointer;
  }
  .bp-oe-badge { font-weight: 700; padding: 4px 11px; border-radius: 999px; }

  .bp-oe-body { padding: 12px 16px 20px; padding-bottom: 110px; }

  .bp-oe-hero { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .bp-oe-hchip {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
    border-radius: 999px; background: #F1F5F9; color: #475569; border: none;
    font-family: inherit; font-size: 11.5px; font-weight: 700;
  }
  .bp-oe-hchip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.3; }
  .bp-oe-hchip-btn { background: #EEF2FF; color: #4338CA; cursor: pointer; }

  .bp-oe-note { border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
  .bp-oe-note-info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
  .bp-oe-note-warn { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

  .bp-oe-sec {
    background: #fff; border: 1px solid #EEF1F7; border-radius: 16px;
    padding: 12px 12px 4px; margin-bottom: 12px;
  }
  .bp-oe-sec-title { text-transform: none; font-size: 13px; color: #0F172A; letter-spacing: 0; margin-bottom: 10px; }
  .bp-oe-count { font-weight: 600; color: #94A3B8; font-size: 12px; }
  .bp-oe-field label i { font-style: normal; font-size: 11px; font-weight: 600; color: #94A3B8; margin-left: 4px; }

  .bp-oe-item { display: block; padding: 10px 10px 10px; }
  .bp-oe-item-top { display: flex; align-items: flex-start; gap: 8px; }
  .bp-oe-item-name { flex: 1; min-width: 0; line-height: 1.35; }
  .bp-oe-item-bottom { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .bp-oe-x { color: #94A3B8; font-weight: 700; }
  .bp-oe-pricein {
    display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0;
    background: #fff; border: 1px solid #E2E8F0; border-radius: 8px; padding: 0 8px; height: 32px;
  }
  .bp-oe-pricein span { font-size: 13px; color: #94A3B8; font-weight: 700; }
  .bp-oe-pricein input {
    width: 100%; min-width: 0; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: #1F2937; padding: 0;
  }
  .bp-oe-total-line { text-align: right; font-size: 13px; color: #64748B; padding: 10px 2px 8px; }
  .bp-oe-total-line b { color: #0F172A; font-size: 14.5px; }
  .bp-oe-add-wrap { margin-top: 10px; }

  .bp-oe-charge-box {
    background: linear-gradient(135deg, #E0F2FE, #EFF6FF); border: 1.5px solid #BAE6FD;
    border-radius: 14px; padding: 12px; margin-bottom: 12px;
  }
  .bp-oe-charge-box label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 800; color: #075985; margin-bottom: 6px;
  }
  .bp-oe-charge-box label svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; }
  .bp-oe-charge-box input {
    width: 100%; border: 1.5px solid #BAE6FD; background: #fff; border-radius: 10px;
    height: 46px; padding: 0 12px; font-size: 20px; font-weight: 800; color: #0F172A;
    font-family: inherit; outline: none;
  }
  .bp-oe-charge-box input:focus { border-color: #378ADD; }

  .bp-oe-hint { font-size: 12px; color: #64748B; margin: -2px 0 10px; line-height: 1.5; }
  .bp-oe-hint a { color: #D4537E; font-weight: 700; text-decoration: underline; }

  .bp-oe-sec .bp-oe-chips { margin: 0 0 8px; }
  .bp-oe-chip { flex: 1 1 28%; border-radius: 12px; text-align: center; padding: 9px 8px; font-size: 11.5px; font-weight: 600; color: #64748B; }
  .bp-oe-chip.neg b { color: #B91C1C; }

  .bp-oe-btn { height: 48px; border-radius: 13px; }
  .bp-oe-btn:disabled { opacity: .7; }
}