/* ============================================================
   BabyPlus POS — neworder-mobile.css  (v9.2)
   "নতুন অর্ডার" ট্যাবের মোবাইল-ফ্রেন্ডলি ডিজাইন।

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

/* ---------- ডেস্কটপ: নতুন এলিমেন্ট লুকানো, ড্রপডাউন সবসময় খোলা ---------- */
@media (min-width: 901px) {
  #tab-neworder .bp-no-hero,
  #tab-neworder .bp-legend,
  #tab-neworder .bp-sec,
  #tab-neworder .bp-badge,
  #tab-neworder .bp-bar-amt,
  #tab-neworder .bp-dd > summary,
  #tab-neworder .bp-stepper button { display: none !important; }
  #tab-neworder .bp-stepper { display: contents; }
}

/* ---------- মোবাইল ---------- */
@media (max-width: 900px) {

  #tab-neworder {
    --bp-ink: #1B2140;
    --bp-muted: #6B7391;
    --bp-line: #E3E7F3;
    --bp-field: #F6F7FC;
    --bp-pri: #4F46E5;
    --bp-pri2: #7C5CFF;
    --bp-dd-bg: #F1EEFF;
    --bp-dd-line: #8B7CF6;
    --bp-dd-ink: #4B3DC9;
    --bp-mint: #0FA37F;
    --bp-mint2: #12B5A0;
    --bp-nav-h: 64px;
    color: var(--bp-ink);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  /* স্টিকি বারের নিচে কনটেন্ট চাপা না পড়ার জন্য ফাঁকা জায়গা */
  #tab-neworder::after { content: ""; display: block; height: 96px; }
  #tab-neworder svg.bp-ic {
    width: 20px; height: 20px; flex: none;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }

  /* ---------- হিরো + ধাপ ---------- */
  #tab-neworder .bp-no-hero {
    background: linear-gradient(135deg, #3A2FB8, #6C4DF6 60%, #8F70FF);
    color: #fff;
    border-radius: 22px;
    padding: 16px 16px 14px;
    margin-bottom: 12px;
  }
  #tab-neworder .bp-no-hero-title { font-size: 20px; font-weight: 700; line-height: 1.25; }
  #tab-neworder .bp-no-hero-title small { display: block; font-size: 12px; font-weight: 500; opacity: .82; margin-top: 2px; }
  #tab-neworder .bp-steps { display: flex; margin-top: 16px; }
  #tab-neworder .bp-st {
    flex: 1; position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0;
    color: #fff; font: inherit; font-size: 12px; font-weight: 600;
    opacity: .85; cursor: pointer;
  }
  #tab-neworder .bp-st::before {
    content: ""; position: absolute; top: 13px; right: 50%;
    width: 100%; height: 2px; background: rgba(255, 255, 255, .3);
  }
  #tab-neworder .bp-st:first-child::before { display: none; }
  #tab-neworder .bp-st i {
    position: relative; z-index: 1;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    border: 2px solid rgba(255, 255, 255, .55);
    display: grid; place-items: center;
    font-style: normal; font-size: 13px; font-weight: 700;
  }
  #tab-neworder .bp-st i svg.bp-ic { width: 15px; height: 15px; stroke-width: 3; }
  #tab-neworder .bp-st.bp-done { opacity: 1; }
  #tab-neworder .bp-st.bp-done i { background: #3DDBB0; border-color: #3DDBB0; color: #0A3D31; }
  #tab-neworder .bp-st.bp-done::before { background: #3DDBB0; }

  #tab-neworder .bp-legend {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--bp-muted);
    padding: 0 4px; margin-bottom: 12px;
  }
  #tab-neworder .bp-badge {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--bp-dd-bg); color: var(--bp-dd-ink);
    border: 1px solid var(--bp-dd-line);
    font-size: 11.5px; font-weight: 600; line-height: 1.5;
    padding: 0 8px; border-radius: 99px; white-space: nowrap;
  }
  #tab-neworder .bp-badge svg.bp-ic { width: 12px; height: 12px; stroke-width: 2.8; }

  /* ---------- দুই কলাম → এক কলাম, নিজের ক্রমে সাজানো ---------- */
  #tab-neworder .bp-no-grid {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px;
    padding: 0 !important;
    width: 100%;
  }
  #tab-neworder .bp-no-grid > *,
  #tab-neworder .bp-no-col > .card > * { min-width: 0; }
  #tab-neworder .bp-no-col,
  #tab-neworder .bp-no-col > .card { display: contents !important; }
  #tab-neworder .bp-no-col > .card > h2 { display: none !important; }

  #tab-neworder .bp-blk-paste    { order: 1; }
  #tab-neworder .bp-blk-customer { order: 2; }
  #tab-neworder .bp-blk-product  { order: 3; }
  #tab-neworder .bp-blk-delivery { order: 4; }
  #tab-neworder .bp-blk-extra    { order: 5; }
  #tab-neworder .bp-blk-summary  { order: 6; }
  #tab-neworder .bp-blk-bar      { order: 7; }

  /* ---------- কার্ড ব্লক ---------- */
  #tab-neworder .bp-blk {
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
    background: #fff;
    border: 1px solid #E8ECF4;
    border-radius: 20px;
    padding: 16px;
    margin: 0;
    box-shadow: 0 6px 24px rgba(58, 47, 184, .07);
    scroll-margin-top: 78px;
  }
  #tab-neworder .bp-sec {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; font-size: 16px; font-weight: 700;
  }
  #tab-neworder .bp-chip {
    width: 34px; height: 34px; border-radius: 11px;
    display: grid; place-items: center; flex: none;
  }
  #tab-neworder .bp-c-cust { background: #E7E5FF; color: #4F46E5; }
  #tab-neworder .bp-c-prod { background: #DDF7EC; color: #0B7A5C; }
  #tab-neworder .bp-c-del  { background: #FFE9DE; color: #C8481A; }

  /* ---------- ফর্ম ফিল্ড ---------- */
  #tab-neworder .bp-blk label {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
    font-size: 12.5px; font-weight: 600; color: var(--bp-muted);
    margin: 0 0 5px;
  }
  #tab-neworder .bp-blk .form-group { margin: 0 0 12px; }
  #tab-neworder .bp-blk .form-group:last-child { margin-bottom: 0; }
  #tab-neworder .bp-blk :where(input:not([type=hidden]):not([type=checkbox]), select, textarea) {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    font: inherit; font-size: 16px !important;
    color: var(--bp-ink);
    background: var(--bp-field);
    border: 1px solid var(--bp-line);
    border-radius: 12px;
    padding: 0 13px;
    height: 46px;
    margin: 0;
    outline: 0;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
  }
  #tab-neworder .bp-blk textarea { height: auto; padding: 11px 13px; resize: none; line-height: 1.45; }
  #tab-neworder .bp-blk :where(input, textarea)::placeholder { color: var(--bp-muted); opacity: .7; }
  #tab-neworder .bp-blk :where(input, textarea, select):focus {
    border-color: var(--bp-pri2);
    box-shadow: 0 0 0 3px rgba(124, 92, 255, .18);
  }

  #tab-neworder .bp-blk .bp-g2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 12px;
  }
  #tab-neworder .bp-blk .bp-g2 .form-group { margin: 0; }
  #tab-neworder .bp-blk .bp-stack {
    display: block !important;
  }
  #tab-neworder .bp-blk .bp-stack .form-group { margin-bottom: 12px; }

  /* ড্রপডাউন সিলেক্ট — বেগুনি হাইলাইট */
  #tab-neworder .bp-blk select {
    -webkit-appearance: none; appearance: none;
    background-color: var(--bp-dd-bg);
    border: 1.5px solid var(--bp-dd-line);
    color: var(--bp-dd-ink);
    font-weight: 600;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236C4DF6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }

  /* ---------- ড্রপডাউন কার্ড (details) ---------- */
  #tab-neworder details.bp-dd.bp-blk {
    background: var(--bp-dd-bg);
    border: 1.5px dashed var(--bp-dd-line);
    padding: 0;
    overflow: hidden;
    box-shadow: none;
  }
  #tab-neworder .bp-dd > summary {
    list-style: none;
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #tab-neworder .bp-dd > summary::-webkit-details-marker { display: none; }
  #tab-neworder .bp-dd-chip {
    width: 38px; height: 38px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    background: #fff; color: var(--bp-dd-ink);
  }
  #tab-neworder .bp-dd-txt { display: flex; flex-direction: column; min-width: 0; }
  #tab-neworder .bp-dd-txt b { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--bp-ink); }
  #tab-neworder .bp-dd-txt small { font-size: 12.5px; color: var(--bp-muted); line-height: 1.3; }
  #tab-neworder .bp-dd-txt b.bp-due { font-size: 20px; font-weight: 800; color: var(--bp-dd-ink); }
  #tab-neworder .bp-arrow {
    margin-left: auto; flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bp-dd-line); color: #fff;
    transition: transform .2s;
  }
  #tab-neworder .bp-arrow svg.bp-ic { width: 16px; height: 16px; stroke-width: 2.8; }
  #tab-neworder .bp-dd[open] > summary .bp-arrow { transform: rotate(180deg); }
  #tab-neworder .bp-dd-body { padding: 2px 14px 14px; }
  #tab-neworder .bp-dd-body :where(input:not([type=hidden]), textarea) { background: #fff; }

  /* স্মার্ট পেস্ট — পুরনো বক্সের সাজ সরিয়ে ড্রপডাউনের ভেতরে সাদামাটা */
  #tab-neworder .smart-paste-box {
    background: none !important; border: 0 !important;
    padding: 0 !important; margin: 0 !important;
  }
  #tab-neworder .smart-paste-box label { display: none !important; }

  /* WhatsApp বক্স — পুরনো সবুজ বক্সের সাজ মোবাইলে নরম করা */
  #tab-neworder .bp-wa {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  #tab-neworder .bp-wa label { color: var(--bp-muted) !important; }
  #tab-neworder .bp-wa .section-note {
    background: #fff !important;
    font-size: 12px !important; line-height: 1.55;
    color: var(--bp-muted);
    border-radius: 10px;
  }

  /* ---------- প্রোডাক্ট সার্চ ---------- */
  #tab-neworder .bp-blk-product .order-row { display: block !important; }
  #tab-neworder .prod-search-container { position: relative; }
  #tab-neworder .prod-results-list {
    position: static !important;
    max-height: 250px; overflow-y: auto;
    margin-top: 8px;
    background: var(--bp-dd-bg);
    border: 1.5px dashed var(--bp-dd-line) !important;
    border-radius: 14px;
    box-shadow: none !important;
  }
  #tab-neworder .prod-results-list::before {
    content: "ড্রপডাউন · সার্চ রেজাল্ট";
    display: block; padding: 8px 12px;
    font-size: 11.5px; font-weight: 600; color: var(--bp-dd-ink);
  }
  #tab-neworder .prod-result-item {
    padding: 11px 12px !important;
    border: 0 !important;
    border-top: 1px solid var(--bp-line) !important;
    font-size: 14px;
    background: transparent;
  }
  #tab-neworder .prod-result-item:active { background: rgba(124, 92, 255, .12); }

  #tab-neworder .bp-blk .bp-prow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: end;
    margin-top: 12px;
  }
  #tab-neworder .bp-stepper {
    display: flex; align-items: center;
    height: 46px; overflow: hidden;
    border: 1px solid var(--bp-line); border-radius: 12px;
    background: var(--bp-field);
  }
  #tab-neworder .bp-stepper button {
    width: 42px; height: 100%; padding: 0;
    border: 0; background: transparent;
    color: var(--bp-pri); font-size: 22px; font-weight: 600; line-height: 1;
    cursor: pointer;
  }
  #tab-neworder .bp-stepper button:active { background: rgba(124, 92, 255, .12); }
  #tab-neworder .bp-blk .bp-stepper input {
    width: 44px !important; height: 100% !important;
    border: 0 !important; background: transparent !important;
    padding: 0 !important; text-align: center; font-weight: 700;
    -moz-appearance: textfield; appearance: textfield;
  }
  #tab-neworder .bp-stepper input::-webkit-outer-spin-button,
  #tab-neworder .bp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  #tab-neworder .bp-blk-product .btn-teal {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 48px; margin-top: 12px !important;
    border: 0 !important; border-radius: 14px !important;
    background: linear-gradient(135deg, var(--bp-mint), var(--bp-mint2)) !important;
    color: #fff !important; font-size: 15.5px !important; font-weight: 700;
  }
  #tab-neworder .bp-blk-product .btn-teal:active { transform: scale(.98); }

  /* ---------- কার্ট: টেবিল → কার্ড ---------- */
  #tab-neworder .bp-blk-product .table-responsive {
    overflow: visible; border-radius: 0;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px dashed var(--bp-line);
  }
  #tab-neworder .cart-table {
    display: block; width: 100%; min-width: 0 !important;
    border: 0; background: none;
  }
  #tab-neworder .cart-table thead { display: none; }
  #tab-neworder .cart-table tbody { display: block; }
  #tab-neworder .cart-table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 10px;
    padding: 12px; margin: 0 0 10px;
    background: #F8F9FE;
    border: 1px solid var(--bp-line);
    border-radius: 14px;
  }
  #tab-neworder .cart-table tr:last-child { margin-bottom: 0; }
  #tab-neworder .cart-table td {
    display: block; min-width: 0;
    border: 0 !important; padding: 0 !important;
    font-size: 13.5px; background: none !important;
  }
  #tab-neworder .cart-table td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; font-size: 14.5px; align-self: center; }
  #tab-neworder .cart-table td:nth-child(6) { grid-column: 3; grid-row: 1; justify-self: end; }
  #tab-neworder .cart-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 12px; color: var(--bp-muted); margin-bottom: 4px; }
  #tab-neworder .cart-table td:nth-child(2)::before { content: "কেনা দাম: "; }
  #tab-neworder .cart-table td:nth-child(3) { grid-column: 1; grid-row: 3; }
  #tab-neworder .cart-table td:nth-child(4) { grid-column: 2; grid-row: 3; }
  #tab-neworder .cart-table td:nth-child(5) { grid-column: 3; grid-row: 3; align-self: end; text-align: right; font-size: 16px; font-weight: 800; padding-bottom: 10px !important; }
  #tab-neworder .cart-table td:nth-child(3)::before,
  #tab-neworder .cart-table td:nth-child(4)::before {
    display: block; margin-bottom: 3px;
    font-size: 11.5px; font-weight: 600; color: var(--bp-muted);
  }
  #tab-neworder .cart-table td:nth-child(3)::before { content: "বিক্রি (৳)"; }
  #tab-neworder .cart-table td:nth-child(4)::before { content: "পরিমাণ"; }
  #tab-neworder .bp-blk .cart-inline-input {
    width: 100% !important; height: 40px; font-size: 15px !important;
    padding: 0 8px; text-align: center; background: #fff;
  }
  #tab-neworder .cart-table .btn-remove {
    width: 32px; height: 32px; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 10px;
    background: rgba(229, 72, 77, .10); color: #E5484D;
    font-size: 15px; cursor: pointer;
  }
  #tab-neworder .cart-table td.empty-hint {
    grid-column: 1 / -1; grid-row: 1;
    text-align: center; padding: 10px 6px !important;
    color: var(--bp-muted); font-size: 13.5px;
  }
  #tab-neworder .cart-table tr:has(td.empty-hint) {
    background: none; border: 0; padding: 0; margin: 0;
  }

  /* ---------- হিসাবের সারাংশ ---------- */
  #tab-neworder .cart-summary {
    background: none !important; border: 0 !important;
    padding: 8px 0 0 !important; margin: 0 !important;
    border-top: 1px solid var(--bp-dd-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100%;
  }
  #tab-neworder .cart-summary > div {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 6px 0; font-size: 14px; color: var(--bp-muted);
    border: 0;
  }
  #tab-neworder .cart-summary > div > span:last-child { color: var(--bp-ink); font-weight: 600; white-space: nowrap; }
  #tab-neworder .cart-summary > div.total {
    border-top: 1px dashed var(--bp-dd-line);
    margin-top: 6px; padding-top: 10px;
    font-size: 15px; font-weight: 700; color: var(--bp-ink);
  }

  /* ---------- নিচের স্টিকি কনফার্ম বার ---------- */
  #tab-neworder .bp-blk-bar {
    position: fixed;
    left: 50%; right: auto;
    width: min(100%, 640px);
    box-sizing: border-box;
    transform: translateX(-50%);
    bottom: calc(var(--bp-nav-h) + env(safe-area-inset-bottom));
    z-index: 850;
    display: flex; align-items: center; gap: 14px;
    background: #fff;
    border-top: 1px solid #E8ECF4;
    border-radius: 20px 20px 0 0;
    padding: 10px 14px;
    box-shadow: 0 -8px 24px rgba(58, 47, 184, .14);
  }
  #tab-neworder .bp-bar-amt { flex: none; }
  #tab-neworder .bp-bar-amt small { display: block; font-size: 12px; color: var(--bp-muted); line-height: 1.2; }
  #tab-neworder .bp-bar-amt b { font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--bp-ink); white-space: nowrap; }
  #tab-neworder .bp-blk-bar .btn {
    flex: 1; width: auto !important; min-width: 0;
    height: 48px; margin: 0 !important; padding: 0 12px !important;
    border: 0 !important; border-radius: 14px !important;
    background: linear-gradient(135deg, var(--bp-pri), var(--bp-pri2)) !important;
    color: #fff !important; font-size: 15.5px !important; font-weight: 700;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .32);
  }
  #tab-neworder .bp-blk-bar .btn:active { transform: scale(.98); }

  /* টোস্ট যেন স্টিকি বারের নিচে চাপা না পড়ে */
  body:has(#tab-neworder.active) #toastHost {
    bottom: calc(150px + env(safe-area-inset-bottom));
  }
}

/* খুব ছোট ফোন */
@media (max-width: 360px) {
  #tab-neworder .bp-bar-amt b { font-size: 18px; }
  #tab-neworder .bp-blk-bar .btn { font-size: 14px !important; }
  #tab-neworder .bp-blk { padding: 14px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #tab-neworder .bp-arrow { transition: none; }
}

/* প্রিন্টে কোনো প্রভাব নেই */
@media print {
  #tab-neworder .bp-blk-bar, #tab-neworder .bp-no-hero, #tab-neworder .bp-legend { display: none !important; }
}