/* Management «فروشگاه» v2 (shop.js) — catalogue layout: category rail + dense
   scannable rows + side drawer. dk tokens only, so light/dark both work. */
#shopPage{ padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
.shp{ --shp-r:14px; display:flex; flex-direction:column; gap:14px; color:var(--dk-text); }
.shp .dk-ic, .shp-veil .dk-ic{ width:17px; height:17px; flex:none; }

/* ── top ─────────────────────────────────────────────────────────── */
.shp-top{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 18px; border-radius:18px; border:1px solid var(--dk-border);
  background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--dk-accent) 16%, transparent), transparent 60%), var(--dk-surface-solid); }
.shp-title{ display:flex; align-items:center; gap:12px; flex:1 1 260px; min-width:0; }
.shp-logo{ width:48px; height:48px; border-radius:15px; display:grid; place-items:center; flex:none; color:#fff;
  background:linear-gradient(135deg, var(--dk-accent-fill), color-mix(in srgb, var(--dk-accent-fill) 55%, #ec4899)); box-shadow:0 8px 20px -10px var(--dk-accent-fill); }
.shp-logo .dk-ic{ width:23px; height:23px; }
.shp-title h2{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.2px; }
.shp-title p{ margin:2px 0 0; font-size:12.5px; color:var(--dk-muted); }
.shp-stats{ display:flex; gap:8px; flex-wrap:wrap; }
.shp-stat{ display:flex; flex-direction:column; gap:1px; min-width:104px; padding:8px 14px; border-radius:12px; background:var(--dk-surface-2); border:1px solid var(--dk-border); }
.shp-stat span{ font-size:11px; font-weight:700; color:var(--dk-muted); }
.shp-stat b{ font-size:18px; font-weight:800; line-height:1.35; }
.shp-stat small{ font-size:10.5px; font-weight:700; color:var(--dk-accent); }
.shp-stat.is-bal{ background:color-mix(in srgb, var(--dk-ok, #059669) 9%, var(--dk-surface-solid)); border-color:color-mix(in srgb, var(--dk-ok, #059669) 30%, var(--dk-border)); }
.shp-stat.is-bal b{ color:var(--dk-ok, #047857); }
.shp-icon{ width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:11px; border:1px solid var(--dk-border); background:var(--dk-surface-solid); color:var(--dk-muted); cursor:pointer; }
.shp-icon:hover{ color:var(--dk-accent); border-color:var(--dk-accent); }
.shp-icon.is-spin .dk-ic{ animation:shp-spin .9s linear infinite; }
@keyframes shp-spin{ to{ transform:rotate(-360deg); } }

/* ── tabs + notes ───────────────────────────────────────────────── */
.shp-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--dk-border); }
.shp-tabs button{ display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border:0; background:none; font:inherit; font-size:13.5px; font-weight:700; color:var(--dk-muted); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; }
.shp-tabs button.is-on{ color:var(--dk-accent); border-bottom-color:var(--dk-accent-fill); }
.shp-tabs button:hover{ color:var(--dk-text); }
.shp-info{ display:flex; align-items:flex-start; gap:8px; padding:9px 12px; border-radius:11px; background:var(--dk-accent-soft); font-size:12.5px; line-height:1.9; color:var(--dk-text); }
.shp-info .dk-ic{ margin-top:4px; color:var(--dk-accent); }

/* ── layout ─────────────────────────────────────────────────────── */
.shp-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; align-items:start; }
.shp-layout.is-orders{ grid-template-columns:minmax(0,1fr); }
.shp-layout.is-orders .shp-cats, .shp-layout.is-orders .shp-bar{ display:none; }
.shp-cats{ position:sticky; top:84px; display:flex; flex-direction:column; gap:2px; padding:8px; border-radius:var(--shp-r); border:1px solid var(--dk-border); background:var(--dk-surface-solid);
  max-height:calc(100vh - 110px); overflow:auto; scrollbar-width:thin; }
.shp-cats-h{ padding:4px 8px 6px; font-size:11px; font-weight:800; color:var(--dk-faint); }
.shp-cats button{ display:flex; align-items:center; gap:8px; width:100%; padding:7px 9px; border:0; border-radius:9px; background:none; font:inherit; font-size:13px; color:var(--dk-text); cursor:pointer; text-align:right; }
.shp-cats button:hover{ background:var(--dk-hover); }
.shp-cats button.is-on{ background:var(--dk-accent-soft); color:var(--dk-accent); font-weight:800; }
.shp-cats button i{ width:8px; height:8px; border-radius:3px; flex:none; background:hsl(var(--h) 70% 55%); }
.shp-cats button span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.shp-cats button em{ font-style:normal; font-size:11px; font-weight:700; color:var(--dk-faint); }
.shp-cats button.is-on em{ color:var(--dk-accent); }
.shp-main{ min-width:0; display:flex; flex-direction:column; gap:10px; }

/* ── toolbar ────────────────────────────────────────────────────── */
.shp-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.shp-search{ flex:1 1 240px; position:relative; display:flex; align-items:center; margin:0 !important; }
.shp-search .dk-ic{ position:absolute; inset-inline-start:12px; color:var(--dk-faint); pointer-events:none; }
#shopPage .shp-search input, .shp-input{ width:100%; height:40px; margin:0 !important; padding:0 14px; padding-inline-start:38px; border-radius:11px !important; border:1px solid var(--dk-border-strong) !important;
  background:var(--dk-surface-solid) !important; color:var(--dk-text) !important; font:inherit; font-size:13.5px; box-shadow:none !important; }
.shp-veil .shp-input{ padding-inline-start:14px; }
#shopPage .shp-search input:focus, .shp-input:focus{ outline:none; border-color:var(--dk-accent) !important; box-shadow:0 0 0 3px var(--dk-accent-soft) !important; }
.shp-seg{ display:flex; padding:3px; border-radius:11px; background:var(--dk-chip); }
.shp-seg button{ border:0; background:none; padding:6px 12px; border-radius:8px; font:inherit; font-size:12.5px; font-weight:700; color:var(--dk-muted); cursor:pointer; white-space:nowrap; }
.shp-seg button.is-on{ background:var(--dk-surface-solid); color:var(--dk-text); box-shadow:0 1px 3px rgba(15,23,42,.12); }
.shp-switch{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; user-select:none; position:relative; }
.shp-switch input{ position:absolute; opacity:0; pointer-events:none; width:1px !important; height:1px !important; }
.shp-switch i{ width:34px; height:20px; border-radius:999px; background:var(--dk-border-strong); position:relative; transition:background .15s; flex:none; }
.shp-switch i::after{ content:""; position:absolute; top:2px; inset-inline-start:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:inset-inline-start .15s; }
.shp-switch input:checked + i{ background:var(--dk-accent-fill); }
.shp-switch input:checked + i::after{ inset-inline-start:16px; }
.shp-switch input:focus-visible + i{ box-shadow:0 0 0 3px var(--dk-accent-soft); }
.shp-count{ font-size:12px; font-weight:700; color:var(--dk-muted); padding:0 2px; }

/* ── product / order rows ───────────────────────────────────────── */
.shp-list{ display:flex; flex-direction:column; border:1px solid var(--dk-border); border-radius:var(--shp-r); overflow:hidden; background:var(--dk-surface-solid); }
.shp-row{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px; border:0; border-top:1px solid var(--dk-border); background:none; color:var(--dk-text); font:inherit; text-align:right; cursor:pointer; transition:background .12s; }
.shp-row:first-child{ border-top:0; }
.shp-row:hover{ background:var(--dk-hover); }
.shp-row:hover .shp-go{ color:var(--dk-accent); transform:translateX(-2px); }
.shp-row.is-out{ opacity:.55; }
.shp-av{ width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:15px;
  color:hsl(var(--h, 222) 65% 42%); background:hsl(var(--h, 222) 80% 94%); }
html[data-theme="dark"] .shp-av{ color:hsl(var(--h, 222) 85% 78%); background:hsl(var(--h, 222) 45% 22%); }
.shp-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.shp-row-main b{ font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.shp-row-main small{ font-size:11.5px; color:var(--dk-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shp-pill{ display:inline-flex; align-items:center; gap:4px; flex:none; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--dk-chip); color:var(--dk-muted); white-space:nowrap; }
.shp-pill .dk-ic{ width:13px; height:13px; }
.shp-pill.is-ok{ background:var(--dk-ok-soft, rgba(5,150,105,.11)); color:var(--dk-ok, #047857); }
.shp-pill.is-low{ background:var(--dk-warn-soft, rgba(217,119,6,.13)); color:var(--dk-warn, #b45309); }
.shp-pill.is-out{ background:var(--dk-danger-soft, rgba(220,38,38,.10)); color:var(--dk-danger, #b91c1c); }
.shp-price{ display:flex; align-items:baseline; gap:4px; flex:none; min-width:96px; justify-content:flex-end; }
.shp-price b{ font-size:16px; font-weight:800; color:var(--dk-text); }
.shp-price small{ font-size:10.5px; font-weight:700; color:var(--dk-faint); }
.shp-price s{ font-size:11px; color:var(--dk-faint); }
.shp-go{ flex:none; color:var(--dk-faint); transition:transform .15s, color .15s; display:grid; }
.shp-row.is-skel{ cursor:default; }
.shp-row.is-skel .shp-av, .shp-sk{ background:linear-gradient(90deg, var(--dk-chip), var(--dk-hover), var(--dk-chip)); background-size:200% 100%; animation:shp-sh 1.2s ease-in-out infinite; }
.shp-sk{ height:14px; flex:1; border-radius:6px; }
@keyframes shp-sh{ to{ background-position:-200% 0; } }
.shp-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:46px 16px; text-align:center; color:var(--dk-muted); border:1px dashed var(--dk-border-strong); border-radius:var(--shp-r); }
.shp-empty .dk-ic{ width:26px; height:26px; color:var(--dk-faint); }
.shp-empty b{ color:var(--dk-text); }

/* ── buttons ────────────────────────────────────────────────────── */
.shp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 15px; border-radius:11px; border:1px solid var(--dk-border-strong);
  background:var(--dk-surface-solid); color:var(--dk-text); font:inherit; font-weight:700; font-size:13px; cursor:pointer; }
.shp-btn:hover{ border-color:var(--dk-accent); color:var(--dk-accent); }
.shp-btn.is-pri{ border-color:transparent; color:#fff; background:linear-gradient(135deg, var(--dk-accent-fill), color-mix(in srgb, var(--dk-accent-fill) 70%, #ec4899)); box-shadow:0 8px 18px -10px var(--dk-accent-fill); }
.shp-btn.is-pri:hover{ color:#fff; filter:brightness(1.06); }
.shp-btn.is-block{ width:100%; height:46px; font-size:14px; }
.shp-btn:disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(.4); }

/* ── drawer / modal ─────────────────────────────────────────────── */
.shp-veil{ position:fixed; inset:0; z-index:9000; background:rgba(15,23,42,.42); display:flex; align-items:center; justify-content:center; padding:16px; direction:rtl; opacity:0; transition:opacity .18s; }
.shp-veil.is-in{ opacity:1; }
.shp-sheet{ width:min(520px,100%); max-height:calc(100vh - 32px); display:flex; flex-direction:column; background:var(--dk-surface-solid); color:var(--dk-text); border:1px solid var(--dk-border);
  border-radius:18px; box-shadow:var(--dk-shadow-pop); overflow:hidden; }
.shp-sheet.is-wide{ width:min(640px,100%); }
.shp-veil.is-drawer{ justify-content:flex-end; align-items:stretch; padding:0; }
.shp-veil.is-drawer .shp-sheet{ width:min(460px,100%); max-height:none; height:100%; border-radius:0; border-width:0 1px 0 0; transform:translateX(-24px); transition:transform .22s ease; }
.shp-veil.is-drawer.is-in .shp-sheet{ transform:none; }
.shp-sheet-h{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--dk-border); }
.shp-sheet-h > b{ flex:1; font-size:15px; }
.shp-dh{ flex:1; min-width:0; display:flex; align-items:center; gap:11px; }
.shp-dh > span:last-child{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.shp-dh b{ font-size:14.5px; line-height:1.5; text-align:right; }
.shp-dh small{ font-size:11.5px; color:var(--dk-muted); }
.shp-sheet-b{ padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.shp-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.shp-pricebox{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:14px; background:var(--dk-accent-soft); }
.shp-pricebox span{ font-size:12px; font-weight:700; color:var(--dk-muted); }
.shp-pricebox b{ font-size:26px; font-weight:800; color:var(--dk-accent); line-height:1.3; text-align:right; }
.shp-pricebox b small{ font-size:13px; }
.shp-pricebox em{ font-style:normal; font-size:12px; color:var(--dk-faint); text-decoration:line-through; text-align:right; }
.shp-buy{ display:flex; flex-direction:column; gap:10px; }
.shp-qty{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; font-weight:700; color:var(--dk-muted); }
.shp-step{ display:flex; align-items:center; border:1px solid var(--dk-border-strong); border-radius:11px; overflow:hidden; direction:ltr; }
.shp-step button{ width:40px; height:40px; border:0; background:var(--dk-surface-2); color:var(--dk-text); font-size:18px; font-weight:700; cursor:pointer; }
.shp-step button:hover{ background:var(--dk-hover); color:var(--dk-accent); }
.shp-veil .shp-step input{ width:64px !important; height:40px; margin:0 !important; border:0 !important; border-radius:0 !important; text-align:center; font:inherit; font-size:15px; font-weight:800;
  background:var(--dk-surface-solid) !important; color:var(--dk-text) !important; box-shadow:none !important; -moz-appearance:textfield; }
.shp-step input::-webkit-outer-spin-button, .shp-step input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.shp-sum{ display:grid; grid-template-columns:1fr 1fr; gap:1px; border-radius:12px; overflow:hidden; border:1px solid var(--dk-border); background:var(--dk-border); }
.shp-sum > div{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:var(--dk-surface-2); }
.shp-sum span{ font-size:11.5px; font-weight:700; color:var(--dk-muted); }
.shp-sum b{ font-size:14.5px; font-weight:800; text-align:right; }
.shp-sum b.is-neg{ color:var(--dk-danger, #b91c1c); }
.shp-desc{ border:1px solid var(--dk-border); border-radius:12px; overflow:hidden; }
.shp-desc summary{ padding:10px 12px; cursor:pointer; font-size:13px; font-weight:700; color:var(--dk-muted); list-style:none; }
.shp-desc summary::-webkit-details-marker{ display:none; }
.shp-desc summary::before{ content:"▸"; display:inline-block; margin-inline-end:6px; transition:transform .15s; }
.shp-desc[open] summary::before{ transform:rotate(90deg); }
.shp-desc > div{ padding:4px 12px 12px; white-space:pre-wrap; font-size:12.5px; line-height:1.9; color:var(--dk-muted); max-height:320px; overflow:auto; }
.shp-acc-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.shp-acc-h em{ font-style:normal; font-size:11px; padding:1px 8px; border-radius:999px; background:var(--dk-accent-soft); color:var(--dk-accent); margin-inline-start:4px; }
.shp-acc{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; counter-reset:acc; }
.shp-acc li{ counter-increment:acc; display:flex; align-items:center; gap:8px; padding:7px 7px 7px 10px; border-radius:10px; background:var(--dk-surface-2); border:1px solid var(--dk-border); }
.shp-acc li::before{ content:counter(acc); font:700 11px/1 system-ui; color:var(--dk-faint); min-width:16px; }
.shp-acc code{ flex:1; min-width:0; font:12.5px/1.6 ui-monospace,Menlo,Consolas,monospace; word-break:break-all; color:var(--dk-text); background:none; }
.shp-acc .shp-icon{ width:30px; height:30px; border-radius:8px; }
.shp-raw{ margin:0; padding:10px 12px; border-radius:12px; background:var(--dk-surface-2); border:1px solid var(--dk-border); font:12px/1.7 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-all; max-height:260px; overflow:auto; }
.shp-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.shp-field{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:700; color:var(--dk-muted); }
.shp-field[hidden]{ display:none; }
.shp-veil select, .shp-veil .es-combo-trigger{ width:100%; min-height:40px; padding:0 12px; border-radius:11px !important; border:1px solid var(--dk-border-strong) !important; background:var(--dk-surface-solid) !important; color:var(--dk-text) !important; font:inherit; font-size:13px; box-shadow:none !important; }

/* ── responsive ─────────────────────────────────────────────────── */
@media (max-width:900px){
  .shp-layout{ grid-template-columns:minmax(0,1fr); }
  .shp-cats{ position:static; flex-direction:row; max-height:none; overflow-x:auto; padding:6px; scrollbar-width:none; }
  .shp-cats::-webkit-scrollbar{ display:none; }
  .shp-cats-h{ display:none; }
  .shp-cats button{ width:auto; flex:none; padding:6px 11px; border:1px solid var(--dk-border); border-radius:999px; }
  .shp-cats button span{ overflow:visible; }
}
@media (max-width:640px){
  .shp-top{ padding:14px; gap:12px; }
  .shp-stats{ width:100%; }
  .shp-stat{ flex:1; min-width:0; padding:8px 10px; }
  .shp-stat b{ font-size:15px; }
  .shp-seg{ flex:1; } .shp-seg button{ flex:1; padding:6px 6px; }
  .shp-row{ flex-wrap:wrap; gap:8px 10px; padding:11px 12px; }
  .shp-row-main{ flex:1 1 calc(100% - 60px); }
  .shp-row .shp-pill{ margin-inline-start:48px; }
  .shp-price{ margin-inline-start:auto; min-width:0; }
  .shp-go{ display:none; }
  .shp-veil.is-drawer .shp-sheet{ width:100%; }
}

/* warranty badge — its own colour scale so the duration reads at a glance */
.shp-war{ display:inline-flex; align-items:center; gap:5px; flex:none; min-width:118px; justify-content:center; padding:4px 10px; border-radius:9px; font-size:12px; font-weight:800; white-space:nowrap; border:1px solid transparent; }
.shp-war .dk-ic{ width:14px; height:14px; }
.shp-war.is-long{ color:#047857; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); }
.shp-war.is-mid{ color:#1d4ed8; background:rgba(59,130,246,.11); border-color:rgba(59,130,246,.32); }
.shp-war.is-short{ color:#b45309; background:rgba(245,158,11,.13); border-color:rgba(245,158,11,.35); }
.shp-war.is-none{ color:var(--dk-faint); background:transparent; border-color:var(--dk-border); border-style:dashed; font-weight:700; }
html[data-theme="dark"] .shp-war.is-long{ color:#6ee7b7; background:rgba(16,185,129,.14); }
html[data-theme="dark"] .shp-war.is-mid{ color:#93c5fd; background:rgba(59,130,246,.16); }
html[data-theme="dark"] .shp-war.is-short{ color:#fcd34d; background:rgba(245,158,11,.14); }
.shp-war.is-big{ min-width:0; padding:6px 12px; font-size:13px; border-radius:10px; }
.shp-war.is-big .dk-ic{ width:16px; height:16px; }
@media (max-width:640px){ .shp-war{ min-width:0; margin-inline-start:48px; } .shp-row .shp-pill{ margin-inline-start:0; } }

/* seller description (sanitised Telegram HTML) */
.shp-desc-body b{ color:var(--dk-text); font-weight:800; }
.shp-desc-body blockquote{ margin:6px 0; padding:6px 12px; border-inline-start:3px solid var(--dk-accent-fill); border-radius:8px; background:var(--dk-surface-2); white-space:pre-wrap; }
.shp-desc-body code, .shp-desc-body pre{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; background:var(--dk-chip); padding:1px 5px; border-radius:5px; direction:ltr; }
.shp-desc-body pre{ display:block; padding:8px 10px; white-space:pre-wrap; }
.shp-desc-body a{ color:var(--dk-accent); text-decoration:underline; word-break:break-all; }
.shp-desc-body ul, .shp-desc-body ol{ margin:4px 0; padding-inline-start:20px; }
.shp-spoiler{ background:var(--dk-border-strong); color:transparent; border-radius:4px; cursor:pointer; transition:color .15s; }
.shp-spoiler:hover{ color:inherit; background:var(--dk-chip); }
.shp-faint{ color:var(--dk-faint); }