/* «دخول الموزّعين» — dealer badge, struck regular prices, dealer pages (lib/dealer_account.php).
   Theme B colours (--brand, --dark, --line, --muted, --ok); nothing here applies to anyone who is not a signed-in dealer
   except the sign-in page itself and, since 2026-10-29, the header block «رأس المتجر» below (mark, gear, globe — for
   everyone). Phone first; no line is wider than 360px. */

/* The badge: dark pill, red circle, the tick exactly in its middle (grid centring, the tick drawn centred in a 16×16 box). */
.dl-badge { display:inline-flex; align-items:center; gap:5px; background:var(--dark, #14161a); color:#fff; font-size:12px; font-weight:800;
  line-height:1; padding:4px 9px 4px 4px; border-radius:999px; white-space:nowrap; vertical-align:middle; }
[dir=rtl] .dl-badge { padding:4px 4px 4px 9px; }
.dl-badge-ic { width:16px; height:16px; border-radius:50%; background:var(--brand, #d9161e); color:#fff; display:grid; place-items:center; flex:0 0 16px; }
.dl-badge-ic svg { display:block; width:10px; height:10px; }
.dl-badge-tx { display:block; padding-top:1px; }
.dl-badge.lg { font-size:13.5px; padding-block:5px; }
.dl-badge.lg .dl-badge-ic { width:18px; height:18px; flex-basis:18px; }
.tb-act-dealer .dl-badge { margin-inline-start:2px; }
.ih-dealer { display:flex; align-items:center; }

/* Prices: his price leads, the regular one struck through beside it. */
.dl-was { color:var(--muted, #6b726d); font-weight:500; font-size:.86em; text-decoration:line-through; white-space:nowrap; }
.dl-was.dl-block { display:block; font-size:12.5px; }
.dl-price-col { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
[dir=rtl] .dl-price-col { align-items:flex-start; }
.dl-pd-carton { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:15px; margin:-2px 0 6px; }
.dl-pd-carton b { color:var(--brand, #d9161e); font-weight:900; font-size:19px; }
.dl-save { display:inline-block; background:#e9f8ef; color:var(--ok, #15803d); font-weight:800; font-size:14px; border-radius:999px; padding:5px 12px; margin:0 0 8px; }

/* Minimum order, free delivery */
.dl-min { background:#fff4e0; color:#92400e; border:1px solid #f6d7a7; border-radius:12px; padding:9px 12px; font-size:13.5px; font-weight:700; margin:10px 0 0; }
.dl-free { background:#e9f8ef; color:var(--ok, #15803d); border-radius:12px; padding:9px 12px; font-size:13.5px; font-weight:700; margin:10px 0 0; }
.dl-minbar .bar i { background:var(--dark, #14161a); }

/* Links */
.dl-link { color:var(--brand, #d9161e); font-weight:700; }

/* Sign-in page: dark heading block (as in the approved mockup), white form card */
.dl-auth-card { max-width:440px; margin:auto; padding:0 !important; overflow:hidden; }
.dl-auth-card > :not(.dl-auth-head) { margin-inline:18px; }
.dl-auth-card form { margin-top:16px; }
.dl-auth-head { display:flex; align-items:center; gap:12px; background:var(--dark, #14161a); color:#fff; padding:20px 18px; margin-bottom:14px; }
.dl-auth-head h1 { font-size:22px; margin:0; color:#fff; }
.dl-auth-head p { margin:2px 0 0; color:#d5d7db; font-size:13.5px; }
.dl-auth-ic { width:46px; height:46px; border-radius:50%; background:var(--brand, #d9161e); color:#fff; display:grid; place-items:center; flex:0 0 46px; }
.dl-auth-help { border-top:1px solid var(--line, #e7e9e6); margin-top:16px; padding:14px 0 18px; text-align:center; }
.dl-auth-help p { margin:0 0 8px; font-size:13.5px; }
.dl-wa { display:flex !important; align-items:center; justify-content:center; gap:8px; color:#15803d !important; border-color:#b7e4c7 !important; font-weight:800; }

/* «حسابي» */
.dl-acct-top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.dl-acct-top h1 { font-size:22px; margin:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dl-acct-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
/* «بياناتي» (2026-10-31): the card's colours (black head, #F20000 mark, #727271 grey) — a dark title strip, then each
   detail in its own box: small grey label over a dark bold value, thin lines between. Two boxes a row, the name full. */
.dl-me { overflow:hidden; padding:0; align-self:start; }
.dl-me .dl-sec-head { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin:0; padding:14px 18px;
  background:radial-gradient(130% 150% at 88% -10%, #202021 0%, #0d0d0d 52%, #000 100%); }
.dl-me .dl-sec-head h3 { margin:0; color:#fff; font-size:17px; font-weight:800; display:flex; align-items:center; gap:10px; }
.dl-me .dl-sec-head h3 i { display:inline-block; width:18px; height:5px; background:#F20000; transform:skewX(-30deg); flex:none; }
.dl-me .dl-sync { font-size:11.5px; color:#CCCCCC; background:rgba(255,255,255,.08); border:1px solid rgba(204,204,204,.22); border-radius:999px; padding:3px 10px; }
.dl-me-body { padding:4px 18px 18px; }
.dl-dl { margin:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.dl-dl > div { min-width:0; padding:12px 0; border-bottom:1px solid #ececec; }
.dl-dl > div:nth-child(even) { padding-inline-end:14px; }
.dl-dl > div:nth-child(odd):not(.dl-wide) { padding-inline-start:14px; border-inline-start:1px solid #ececec; }
.dl-dl > .dl-wide, .dl-dl > div:last-child:nth-child(even) { grid-column:1 / -1; padding-inline:0; border-inline-start:0; }
.dl-dl dt { color:#727271; font-size:12.5px; font-weight:500; margin:0 0 4px; }
.dl-dl dd { margin:0; min-width:0; overflow-wrap:anywhere; color:#0d0d0d; font-size:16.5px; font-weight:800; line-height:1.35; }
.dl-dl dd b { font-weight:800; }
.dl-h4 { margin:16px 0 8px; font-size:12.5px; font-weight:500; color:#727271; }
.dl-branches { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.dl-branches li { display:flex; align-items:flex-start; gap:10px; border:1px solid #ececec; border-radius:12px; padding:10px 12px; font-size:14px; color:#0d0d0d; font-weight:700; background:#fafafa; }
.dl-bn { width:24px; height:24px; border-radius:50%; background:#0d0d0d; color:#fff; display:grid; place-items:center; font-size:12px; font-weight:800; flex:0 0 24px; }
.dl-bt { flex:1; min-width:0; overflow-wrap:anywhere; }
.dl-bt small { display:block; color:#727271; font-weight:500; margin-top:2px; }
.dl-main { background:#F20000; color:#fff; border-radius:999px; font-size:11.5px; font-weight:800; padding:2px 9px; white-space:nowrap; }
/* «حسابي» on a tablet or a computer (GM 2026-11-01): the card in one column, «خاص بك» over «حسابك الآجل» in the other —
   the card on the right in Arabic, on the left in English (the grid follows the page direction). «حسابي» + the hint stay
   over the card, so «خاص بك» starts at the card's top edge; the column beside it is at least as tall as the card
   (--dl-cardh = the card's own 1012 × 638 shape) and «حسابك الآجل» takes what is left, so it ends at the card's bottom edge.
   «تنزيل/مشاركة» sit right under the card, then «رسائلي» (2026-11-02) the card's width; the last row (1fr) takes any
   difference, so both columns end on one line: «رسائلي» grows when the column beside is taller, «حسابك الآجل» when
   the card's column is. Rows that only span the 1fr row never push the card or its buttons apart.
   Under 768 px nothing here applies: the page is the phone's, unchanged (no «رسائلي» row: the top-bar envelope). */
@media (min-width:768px) {
  .dl-top { --dl-cardw:400px; --dl-cardh:calc(var(--dl-cardw) * 638 / 1012); display:grid;
    grid-template-columns:var(--dl-cardw) minmax(0,1fr); grid-template-rows:auto auto auto auto auto 1fr; column-gap:20px; align-items:start; }
  .dl-top > .ac-wrap.is-dealer { display:contents; }
  .dl-top .ac-ttl { grid-column:1; grid-row:1; }
  .dl-top .ac-hint { max-width:none; }
  .dl-top .ac-card { grid-column:1; grid-row:2; max-width:none; }
  .dl-top .ac-tools { grid-column:1; grid-row:3; margin-top:14px; }
  .dl-top .ac-tool-msg { grid-column:1; grid-row:4; }
  .dl-top > .msg-row { grid-column:1; grid-row:5 / 7; align-self:stretch; margin:14px 0 0; }
  .dl-top-side { grid-column:2; grid-row:2 / 7; align-self:stretch; min-height:var(--dl-cardh); display:flex; flex-direction:column; }
  .dl-top-side > .ac-prv { max-width:none; margin-top:0; }
  .dl-top-side > [data-dealer-credit] { flex:1 1 auto; }
  .dl-top + #dl-orders { margin-top:16px; }   /* a dealer without credit: «طلباتي» right under the row (the phone has the 16 px gap) */
}
@media (min-width:1024px) { .dl-top { --dl-cardw:520px; column-gap:24px; } }
@media (min-width:1280px) { .dl-top { --dl-cardw:600px; } }

/* Checkout */
.dl-co-layout { grid-template-columns:1fr 340px; }
.dl-branch-opt { border:1px solid var(--line, #e7e9e6); border-radius:12px; padding:10px 12px; margin:0 0 8px; display:flex; gap:10px; align-items:flex-start; }
.dl-branch-opt span { min-width:0; overflow-wrap:anywhere; }
button[data-dealer-place]:disabled, button[data-dealer-checkout-off]:disabled { opacity:.5; cursor:not-allowed; }

@media (max-width:900px) {
  .dl-acct-grid, .dl-co-layout { grid-template-columns:minmax(0,1fr); }
  .tb-actions .tb-act-dealer { gap:4px; }
}
@media (max-width:420px) {
  .dl-me .dl-sec-head { padding:13px 14px; }
  .dl-me-body { padding:2px 14px 14px; }
  .dl-dl dd { font-size:15.5px; }
}

/* ─── رأس المتجر (2026-10-29, for everyone): the brand mark instead of the word, the gear for whoever is signed in,
   the language globe on every page and size. Fits 360px with the dealer badge, search and cart. ─── */
.tb-brandmark, .ih-brandmark { display:block; height:40px; width:auto; }
.tb-gear .lbl, .ih-gear .lbl { display:none; }
.ih-gear { color:inherit; }
@media (max-width:900px) {
  .ih-logo.has-brandmark { position:static; transform:none; flex:none; }
  .ih-brandmark { height:30px; }
  .ih-head-row:has(.ih-logo.has-brandmark) .ih-tools { margin-inline-start:auto; gap:0; }
  .ih-tools .ih-circle { width:38px; height:38px; }
}
@media (max-width:600px) { .tb-brandmark { height:30px; } .tb-brand:has(.tb-brandmark) { flex:none; } }
@media (max-width:400px) {
  .ih-head-row { gap:4px; }
  .ih-burger { width:34px !important; }
  .ih-brandmark { height:26px; }
  .ih-tools .ih-circle { width:34px; height:34px; }
  .ih-dealer .dl-badge { padding:3px 7px 3px 3px; font-size:11px; }
  [dir=rtl] .ih-dealer .dl-badge { padding:3px 3px 3px 7px; }
  .tb-actions .tb-act { padding:7px; }
}

/* 2026-10-29 (المدير العام): «موزّع» right beside the mark; the gear is the last item, a small menu with
   «تغيير كلمة السر» and «تسجيل الخروج». */
.tb-dealer { display:flex; align-items:center; flex:none; }
@media (min-width:901px) { .tb-brand + .tb-dealer { margin-inline-start:-12px; } .ih-logo + .ih-dealer { margin-inline-start:-8px; } }
@media (max-width:700px) { .tb-brand + .tb-dealer { margin-inline-start:4px; } .tb-head-row:has(.tb-dealer) .tb-actions { margin-inline-start:auto; } }
@media (max-width:379px) {   /* the narrow-phone rule centres the mark; with the badge it stays at the start, the icons at the end */
  .ih-head-row:has(.ih-dealer) .ih-logo.has-brandmark { flex:none; }
  .ih-head-row:has(.ih-dealer) .ih-tools { margin-inline-start:auto; }
}
/* 2026-11-01 (المدير العام، الهاتف فقط): «حسابي» and «السلة» live in the bottom bar (same 900px), so the top bar
   drops them; what stays reads, from the left (Arabic): الإعدادات · تغيير اللغة · البحث. Computers are unchanged. */
@media (max-width:900px) {
  .tb-actions .tb-acct-act, .tb-actions .tb-cart-btn, .ih-tools .ih-cart { display:none; }
  .tb-actions .tb-search-btn, .ih-tools [data-tb-search-open] { order:1; }
  .tb-actions .tb-lang, .ih-tools .ih-lang { order:2; }
  .tb-actions .tb-gearmenu, .ih-tools .tb-gearmenu { order:3; }
  .tb-actions .tb-msg-act, .ih-tools .ih-msg { order:1; }   /* «رسائلي» right after the search (2026-11-02) */
}
/* «رسائلي» in the top bar (2026-11-02, المدير العام): the envelope with the unread count, every page and size, signed in only
   (lib/messages.php smsg_head_icon) — beside «حسابي» and «السلة» on a computer, beside the search on a phone. */
.msg-head-act .tb-bn-ic { display:inline-grid; place-items:center; }
.tb-msg-act.on, .ih-msg.on { background:var(--tb-tint, #fde8e8); color:var(--brand, #d9161e); }
.msg-head-act .tb-bn-ic .msg-badge { top:-8px; inset-inline-end:-9px; }
.tb-gearmenu { position:relative; flex:none; display:flex; }
.tb-gearmenu > summary { list-style:none; cursor:pointer; user-select:none; }
.tb-gearmenu > summary::-webkit-details-marker { display:none; }
.tb-gearmenu[open] > summary { background:var(--tb-tint, #fde8e8); color:var(--brand, #d9161e); }
.tb-gearmenu-list { position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:90; min-width:196px; max-width:calc(100vw - 16px);
  background:#fff; border:1px solid var(--line, #e7e9e6); border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.14); padding:6px; display:grid; gap:2px; }
.tb-gearmenu-list a { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; font-weight:700; font-size:14.5px;
  color:var(--ink, #222); white-space:nowrap; }
.tb-gearmenu-list a:hover { background:var(--tb-tint, #fde8e8); color:var(--brand, #d9161e); }
.tb-gearmenu-list a .tb-ic { color:var(--brand, #d9161e); flex:none; }
.tb-gearmenu-list .tb-gear-out { border-top:1px solid var(--line, #e7e9e6); border-radius:0 0 10px 10px; }
/* the first item: «فعّل التنبيهات» / «إيقاف التنبيهات» (2026-11-02, lib/messages.php 'menu'); its notes open under it */
.msg-push-menu { display:grid; gap:2px; border-bottom:1px solid var(--line, #e7e9e6); padding-bottom:4px; margin-bottom:2px; }
.msg-push-menu[hidden], .msg-push-menu [hidden] { display:none !important; }
.msg-gm-item { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:0; border-radius:10px; background:none; cursor:pointer;
  font:inherit; font-weight:700; font-size:14.5px; color:var(--ink, #222); white-space:nowrap; text-align:start; }
.msg-gm-item:hover { background:var(--tb-tint, #fde8e8); color:var(--brand, #d9161e); }
.msg-gm-item .tb-ic { color:var(--brand, #d9161e); flex:none; }
.msg-gm-note { margin:2px 4px 4px; max-width:260px; font-size:12.5px; line-height:1.65; font-weight:500; white-space:normal;
  background:#fff6e6; color:#7a4d06; border:1px solid #f6dfae; border-radius:10px; padding:8px 10px; }
.msg-gm-how { margin:0 4px 4px; justify-self:start; }
.msg-gm-msg { margin:2px 12px 6px; max-width:240px; font-size:12.5px; font-weight:700; color:var(--ok, #15803d); white-space:normal; }
.msg-push-menu .msg-pwa-proxy { display:none !important; }

/* ─── «الشراء بالآجل» (lib/dealer_credit.php) ─── */
.dc-red { color:var(--brand, #d9161e); }
.dc-bar { display:flex; height:10px; border-radius:999px; background:#e8e8e8; overflow:hidden; margin:10px 0 6px; direction:ltr; }
.dc-bar-used { background:var(--dark, #14161a); }
.dc-bar-this { background:var(--brand, #d9161e); }
.dc-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-inline-end:6px; vertical-align:middle; }
.dc-dot.k { background:var(--dark, #14161a); } .dc-dot.r { background:var(--brand, #d9161e); }
.dc-tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }   /* 2026-10-31: «المتاح» lives in the private strip now — limit + used */
.dc-tiles > div { background:#f4f4f5; border-radius:12px; padding:10px 6px; text-align:center; }
.dc-tiles > div.ok { background:#e9f8ef; } .dc-tiles > div.ok b { color:var(--ok, #15803d); }
.dc-tiles span { display:block; font-size:12px; color:var(--muted, #6b726d); }
.dc-tiles b { display:block; font-size:15px; font-weight:900; margin-top:2px; direction:ltr; }
.dc-note { font-size:12.5px; margin:4px 0 0; } .dc-soon { color:#92400e; font-weight:700; }
.dc-invs { margin-top:16px; }
.dc-inv { border:1px solid var(--line, #e5e7eb); border-radius:14px; padding:12px; margin-bottom:10px; }
.dc-inv.soon { background:#fffaf0; border-color:#f6d7a7; } .dc-inv.late { background:#fff1f1; border-color:#f3b5b5; }
.dc-inv-top { display:flex; justify-content:space-between; gap:8px; font-size:14.5px; }
.dc-inv-amt { font-size:16px; font-weight:900; white-space:nowrap; }
.dc-inv-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; margin:4px 0 8px; }
.dc-inv-bottom { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.dc-chip { display:inline-block; font-size:11.5px; font-weight:800; border-radius:999px; padding:3px 9px; background:#f1f1f1; color:#444; margin-inline-end:4px; white-space:nowrap; }
.dc-chip.red { background:var(--brand, #d9161e); color:#fff; } .dc-chip.amber { background:#fdf0d5; color:#92400e; } .dc-chip.grey { background:#e5e7eb; color:#374151; }
.dc-pay-btn { white-space:nowrap; }
.dc-inv-total { display:flex; justify-content:space-between; border-top:1px dashed var(--line, #e5e7eb); padding-top:10px; font-weight:800; }
.dc-payamt { margin-top:16px; }
.dc-payamt-row { display:flex; gap:8px; } .dc-payamt-row input { flex:1; min-width:0; }
.dc-statement { margin-top:16px; background:var(--dark, #14161a); color:#fff; }
.dc-wait { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 0; border-bottom:1px solid var(--line, #eee); font-size:14px; }
.dc-st { font-size:12px; font-weight:700; color:#1f4e8c; margin-top:3px; }
.dc-order-box { border-top:1px dashed var(--line, #e5e7eb); margin-top:8px; padding-top:8px; }
/* «طلباتي» (2026-10-31): one short row per order (date · total · status · arrow); a tap opens the rest. */
.dl-ords { background:#fff; border:1px solid var(--line, #e7e9e6); border-radius:var(--r, 14px); overflow:hidden; }
.dl-ord-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto 14px; align-items:center; gap:10px; padding:12px 14px; }
@media (min-width: 701px) { .dl-ord-row { grid-template-columns:minmax(0,180px) minmax(0,1fr) auto 14px; } }
.dl-ord-head { background:#fafbfc; font-size:13px; color:#4b515b; font-weight:800; border-bottom:1px solid var(--line, #e7e9e6); padding-block:10px; }
.dl-ord { border-bottom:1px solid var(--line, #e7e9e6); }
.dl-ord:last-child { border-bottom:0; }
.dl-ord > summary { cursor:pointer; list-style:none; font-size:14px; -webkit-tap-highlight-color:transparent; }
.dl-ord > summary::-webkit-details-marker { display:none; }
.dl-ord > summary:hover, .dl-ord[open] > summary { background:#fafbfc; }
.dl-ord > summary:focus-visible { outline:2px solid var(--brand, #d9161e); outline-offset:-2px; }
.dl-ord-date { color:var(--muted, #6b726d); white-space:nowrap; justify-self:start; }   /* dir=ltr digits, kept under «التاريخ» */
.dl-ord-total { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-ord-st .badge { white-space:nowrap; }
.dl-ord-arrow { width:8px; height:8px; justify-self:center; border-inline-end:2px solid #8a9099; border-bottom:2px solid #8a9099; transform:translateY(-2px) rotate(45deg); transition:transform .15s; }
.dl-ord[open] .dl-ord-arrow { transform:translateY(2px) rotate(-135deg); }
[dir=rtl] .dl-ord-arrow { transform:translateY(-2px) rotate(-45deg); } [dir=rtl] .dl-ord[open] .dl-ord-arrow { transform:translateY(2px) rotate(135deg); }
.dl-ord-body { padding:4px 14px 14px; background:#fafbfc; }
.dl-ord-dl { margin:0; }
.dl-ord-dl > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line, #e5e7eb); font-size:14px; }
.dl-ord-dl dt { color:var(--muted, #6b726d); flex:none; } .dl-ord-dl dd { margin:0; min-width:0; text-align:end; overflow-wrap:anywhere; }
.dl-ord-dl dd.dc-st { margin:0; font-size:13.5px; }
.dl-ord-dl > .dl-ord-note { display:block; }
.dl-ord-note dd { text-align:start; margin-top:4px; line-height:1.7; color:var(--ink, #1d2320); }
/* «ملاحظة بريستورم» as a note box in the colours of the «قيد الانتظار» badge (.b-warn in shop.css: #fff4e0 / #b45309;
   the border is that text colour at 30%). */
.dl-ord-dl > .dl-ord-note { background:#fff4e0; color:#b45309; border:1px solid rgb(180 83 9 / .3); border-radius:10px; padding:10px 12px; margin:10px 0 2px; }
.dl-ord-dl > .dl-ord-note dt { color:#b45309; font-weight:700; }
.dl-ord-dl > .dl-ord-note dt::after { content:":"; }   /* «ملاحظة بريستورم:» here only (the same words elsewhere stay as they are) */
.dl-ord-dl > .dl-ord-note dd { color:var(--ink, #1d2320); font-weight:700; }
.dl-ord-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.dl-ord-acts form { margin:0; }
.dl-ord-hint { font-size:12.5px; margin:8px 0 0; line-height:1.7; }
.dl-ord-resent { margin:10px 0 0; padding:8px 10px; border-radius:10px; background:#eef4fb; color:#1f4e8c; font-size:13.5px; font-weight:700; line-height:1.7; }
.dl-ord-resent a { color:inherit; text-decoration:underline; white-space:nowrap; unicode-bidi:isolate; }
/* Checkout */
.dc-opt { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line, #e5e7eb); border-radius:14px; padding:12px; margin-bottom:10px; cursor:pointer; }
.dc-opt.on { border-color:var(--brand, #d9161e); background:#fff5f5; }
.dc-opt input[type=radio] { margin-top:4px; flex:none; accent-color:var(--brand, #d9161e); }
.dc-opt > span { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.dc-opt small { font-size:12.5px; }
.dc-sum { display:flex; flex-direction:column; gap:6px; background:#fafafa; border-radius:12px; padding:10px; margin:4px 0 10px; }
.dc-sum > div, .dc-sum .row { display:flex; justify-content:space-between; gap:8px; font-size:14px; }
.dc-sum .small { font-size:13px; } .dc-sum .strong { font-weight:800; }
.dc-sum b { direction:ltr; }
.dc-sum.in { background:transparent; padding:4px 0 0; margin:0; }
.dc-pill-ok { background:#e9f8ef; color:var(--ok, #15803d); border-radius:999px; padding:2px 10px; }
.dc-split { display:grid; grid-template-columns:1fr auto; gap:4px 10px; background:#f4f4f5; border-radius:10px; padding:8px 10px; font-size:13.5px; }
.dc-promise { display:flex; flex-direction:column; gap:4px; margin-top:6px; font-weight:700; font-size:14px; }
.dc-promise input { height:44px; border:2px solid var(--brand, #d9161e); border-radius:12px; padding:0 10px; font-size:16px; max-width:100%; }
.dc-nocod { font-size:12.5px; margin:6px 0 0; }
.dc-over { display:flex; flex-direction:column; gap:2px; background:#fff1f1; border:1px solid #f3b5b5; border-radius:16px; padding:14px; margin-bottom:14px; }
.dc-over b { color:#7f1d1d; font-size:16px; } .dc-over-amt { color:var(--brand, #d9161e); font-weight:900; font-size:24px; direction:ltr; text-align:start; }
.dc-edit { display:block; text-align:center; margin-top:10px; text-decoration:underline; font-weight:700; }
/* The overdue stop */
.dc-stop { text-align:center; border:2px solid #f3b5b5; border-radius:22px; max-width:560px; margin:0 auto; }
.dc-stop-ic { width:78px; height:78px; border-radius:50%; background:#fdeaea; color:var(--brand, #d9161e); display:grid; place-items:center; margin:4px auto 10px; }
.dc-stop h2 { margin:0 0 8px; font-size:22px; }
.dc-stop-line { font-size:16px; line-height:1.8; margin:0 0 12px; }
.dc-inv-box { background:#f6f6f6; border-radius:14px; padding:6px 14px; margin:0 0 14px; text-align:start; }
.dc-inv-box > div { display:flex; justify-content:space-between; gap:8px; padding:7px 0; font-size:14px; }
.dc-inv-box dt { color:var(--muted, #6b726d); } .dc-inv-box dd { margin:0; font-weight:700; }
.dc-inv-box .dc-inv-sum { border-top:1px dashed #cfcfcf; font-size:16px; } .dc-inv-sum dt, .dc-inv-sum dd { color:#111; font-weight:900; }
.dc-info { max-width:560px; margin:14px auto 0; background:#f6f6f6; border:1px solid var(--line, #e5e7eb); border-radius:14px; padding:12px; font-size:13.5px; }
.dc-wa { max-width:560px; margin:14px auto 0; color:#15803d; border-color:#bfe5cc; }
/* «حسابي» → one invoice (pages/dealer_invoice.php) */
.dc-inv-link { font-weight:800; color:var(--brand, #d9161e); text-decoration:underline; text-underline-offset:3px; }
.wrap.dc-invpage { max-width:820px; }
.dc-invpage > .card { margin-top:12px; }
.dc-back { display:inline-block; font-weight:700; color:var(--brand, #d9161e); margin-bottom:6px; }
[dir=rtl] .dc-back::before { content:'→ '; } [dir=ltr] .dc-back::before { content:'← '; }
.dc-invhead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.dc-invhead h1 { font-size:22px; margin:0; display:flex; gap:6px; flex-wrap:wrap; }
.dc-invmeta { margin:0; }
.dc-invmeta > div { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line, #e7e9e6); font-size:14.5px; }
.dc-invmeta > div:last-child { border-bottom:0; }
.dc-invmeta dt { color:var(--muted, #6b726d); } .dc-invmeta dd { margin:0; min-width:0; text-align:end; overflow-wrap:anywhere; }
.dc-invitem { padding:10px 0; border-bottom:1px solid var(--line, #e7e9e6); }
.dc-invitem:last-child { border-bottom:0; }
.dc-invitem-name { font-size:14.5px; overflow-wrap:anywhere; }
.dc-invitem-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px; margin-top:3px; }
.dc-invsum > div { display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-size:14.5px; }
.dc-invsum > .strong { font-weight:800; border-bottom:1px dashed var(--line, #e5e7eb); padding-bottom:9px; margin-bottom:3px; }
.dc-invsum-left { font-size:17px !important; font-weight:900; background:#f4f4f5; border-radius:12px; padding:10px 12px !important; margin-top:6px; }
.dc-invsum-left.late { background:#fff1f1; color:#7f1d1d; }
/* «سداد إجباري» (2026-10-29): the over-limit amount by the promised date — approval step, «حسابي», checkout */
.dc-must { background:#fff8e6; border:1.5px solid #f2c46b; border-radius:14px; padding:12px; margin-bottom:14px; }
.dc-must.late { background:#fff1f1; border-color:#f3b5b5; }
.dc-must-line { font-weight:900; font-size:16px; color:#7c2d12; overflow-wrap:anywhere; }
.dc-must.late .dc-must-line { color:#7f1d1d; }
.dc-must-line.sm { font-size:14px; background:#fff8e6; border:1px dashed #f2c46b; border-radius:10px; padding:6px 10px; }
.dc-must-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0 0; font-size:13px; }
.dc-must-sub { font-size:12.5px; margin:6px 0 0; }
.dc-must form { margin-top:10px; }
.dc-promise-limit { font-weight:800; color:#92400e; }
.dc-promise input:invalid { border-color:#b91c1c; }

/* «موزّع تجريبي» (lib/dealer_demo.php): «عرض تجريبي» right after the dealer badge, in both headers and «حسابي». */
.dl-demo-badge { display:inline-flex; align-items:center; margin-inline-start:4px; background:#fef3c7; color:#92400e; border:1px solid #f59e0b;
  font-size:11.5px; font-weight:800; line-height:1; padding:4px 7px; border-radius:999px; white-space:nowrap; vertical-align:middle; }
.ih-dealer .dl-demo-badge, .tb-dealer .dl-demo-badge { font-size:10.5px; padding:3px 6px; }
/* Narrow phones: the header row is already full — the tag sits under the dealer badge and takes no width of its own. */
@media (max-width: 700px) {
  .ih-dealer, .tb-dealer { position:relative; }
  .ih-dealer .dl-demo-badge, .tb-dealer .dl-demo-badge { position:absolute; top:100%; inset-inline-start:50%; transform:translateX(50%);
    margin:2px 0 0; font-size:9.5px; padding:2px 5px; z-index:2; }
  [dir=ltr] .ih-dealer .dl-demo-badge, [dir=ltr] .tb-dealer .dl-demo-badge { transform:translateX(-50%); }
}

/* Dealer buys by piece or by carton on the product page, «كرتون» chosen first (2026-10-29). */
.dl-unit { display:flex; flex:1 1 100%; gap:8px; }
.dl-unit label { flex:1; position:relative; cursor:pointer; min-width:0; }
.dl-unit input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.dl-unit span { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:48px; padding:5px 8px;
  border:1.5px solid var(--line, #e5e7eb); border-radius:12px; background:#fff; font-weight:800; font-size:14px; text-align:center; overflow-wrap:anywhere; }
.dl-unit small { font-size:13px; font-weight:700; color:#4a514d; }
.dl-unit input:checked + span { border-color:var(--brand, #d9161e); background:var(--tb-tint, #fdecec); color:var(--brand, #d9161e); }
.dl-unit input:checked + span small { color:inherit; }
.dl-unit input:disabled + span { opacity:.4; cursor:not-allowed; }
.dl-unit input:focus-visible + span { outline:2px solid var(--brand, #d9161e); outline-offset:2px; }
.tb-pd-buy:has(.dl-unit) { flex-wrap:wrap; }
/* Dealer quick-add card (related products): the carton it adds and his carton price. */
.tb-card-carton { font-size:12.5px; font-weight:700; color:#4a514d; margin-top:2px; }
.tb-card-carton b { color:var(--brand, #d9161e); font-weight:900; }