/* ═══════════════════════════════════════════════════════════════
   نَقدر — الطبقة النهائية (final.css)

   الملف ده بيتحمّل بعد base.css و app.css، وفيه التعريف
   *الوحيد والنهائي* للمكوّنات اللي كانت بتتعارض.

   ليه موجود؟ لأن app.css اتبنى على مراحل، فبقى فيه محدّدات
   مكرّرة (.pcard اتعرّفت 5 مرات مثلاً) وده خلّى النتيجة
   غير متوقّعة. بدل ما نلخبط الملف القديم، بنحسم هنا.

   القاعدة: أي تعديل على المكوّنات دي يتعمل في الملف ده بس.
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════ 1) بطاقة المشروع ═══════════════ */

.pgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:16px;
  align-items:stretch;
}

.pcard{
  /* عمود رأسي — base.css كان معرّفها flex أفقي وده كان
     بيصفّ العنوان والوصف والمواصفات جنب بعض */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  flex-wrap:nowrap;
  gap:0;

  position:relative;
  height:100%;
  padding:18px;
  border-radius:16px;
  background:var(--surface);
  border:1px solid var(--line);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.pcard:hover{
  border-color:var(--amber);
  box-shadow:0 10px 26px -12px rgba(7,26,56,.26);
  transform:translateY(-3px);
}
.pcard > *{width:100%;min-width:0}

/* البطاقة كلها رابط */
.pcard .pcard-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.pcard a:not(.pcard-link),
.pcard button,
.pcard form{position:relative;z-index:2}

.pcard h3{
  font-size:16px;font-weight:800;line-height:1.55;
  margin:10px 0 0;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard h3 a{color:inherit}
.pcard:hover h3 a{color:var(--amber-d)}

.pcard .desc{
  font-size:13.5px;line-height:1.85;color:var(--ink-soft);margin:8px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* المواصفات: صف أفقي متساوي */
.pcard .specs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:14px 0 0;
}
.pcard .specs .spec{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  background:var(--paper);border:1px solid var(--line);border-radius:11px;
  padding:10px 8px;text-align:center;min-width:0;
}
.pcard .specs .spec .k{
  font-size:10.5px;font-weight:700;color:var(--ink-mute);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pcard .specs .spec .v{
  font-size:14px;font-weight:800;color:var(--ink);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.pcard .foot{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line);
  font-size:12px;font-weight:700;color:var(--ink-mute);
}
.pcard .foot .btn{margin-inline-start:auto}


/* ═══════════════ 2) بطاقة المصنّع ═══════════════ */

.mcard{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:18px;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.mcard:hover{
  border-color:var(--amber);
  box-shadow:0 10px 26px -12px rgba(7,26,56,.26);
  transform:translateY(-3px);
}
.mcard .mcard-link{color:var(--ink)}
.mcard:hover .mcard-link{color:var(--amber-d)}
.mcard .mcard-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.mcard a:not(.mcard-link),
.mcard button,
.mcard form,
.mcard .acts{position:relative;z-index:2}
.mcard .acts{margin-top:auto;padding-top:14px}


/* ═══════════════ 3) الرؤوس الداكنة ═══════════════
   العنوان كان بيطلع أسود على خلفية كحلي غامقة */

.store-hero,
.phead.blog-head,
.dh-main{color:#fff}

.store-hero h1,
.phead.blog-head h1,
.dh-main h1{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}

.store-hero p,
.phead.blog-head p,
.phead.blog-head .intro,
.phead.blog-head .sub,
.dh-main > p{color:#C3D0E4}

.store-hero .eyebrow,
.phead.blog-head .eyebrow,
.dh-main .eyebrow{
  color:var(--amber);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
}
.store-hero .eyebrow .dot,
.phead.blog-head .eyebrow .dot,
.dh-main .eyebrow .dot{background:var(--amber)}

/* حقول البحث جوّه الرؤوس الداكنة تفضل بيضا */
.store-hero .inp,
.phead.blog-head .inp,
.dh-main .inp{background:#fff;color:var(--ink);border-color:transparent}
.store-hero .inp::placeholder,
.phead.blog-head .inp::placeholder,
.dh-main .inp::placeholder{color:var(--ink-mute)}

.store-hero .hero-stats b,
.dh-stats b{color:#fff}
.store-hero .hero-stats span,
.dh-stats span{color:#B9C7DC}


/* ═══════════════ 4) الشريط السفلي (موبايل) ═══════════════ */

.tabbar{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;align-items:stretch;
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
}
.tabbar a{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 2px;min-width:0;overflow:hidden;text-align:center;
  font-size:10px;font-weight:700;line-height:1.25;
}
.tabbar a svg{width:21px;height:21px;flex-shrink:0}
.tabbar a span{
  display:block;width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tabbar .tb-cta{color:var(--amber-d)}
.tabbar .tb-cta svg{
  width:34px;height:34px;padding:7px;margin-top:-4px;border-radius:50%;
  background:linear-gradient(135deg,var(--amber),#E89512);
  color:var(--steel-deep);
  box-shadow:0 3px 9px -2px rgba(245,166,30,.55);
}
.tabbar .tb-dot{
  position:absolute;top:6px;inset-inline-end:calc(50% - 15px);
  width:7px;height:7px;border-radius:50%;background:#C4331B;border:1.5px solid #fff;
}


/* ═══════════════ 5) شريط الأقسام (بدون سكرول) ═══════════════ */

.pillbar .pills{display:flex;flex-wrap:wrap;gap:8px;overflow:visible}
.pillbar.collapsed .pills > a.extra{display:none}
.pillbar:not(.collapsed) .more .lbl-show{display:none}
.pillbar.collapsed .more .lbl-hide{display:none}


/* ═══════════════ 6) بطاقة المنتج ═══════════════ */

.prod-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(225px,1fr));
  gap:16px;align-items:stretch;
}
.prod{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--surface);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.prod:hover{
  border-color:var(--amber);
  box-shadow:0 10px 26px -10px rgba(7,26,56,.28);
  transform:translateY(-4px);
}
.prod .thumb{aspect-ratio:1/1}
.prod .body{display:flex;flex-direction:column;flex:1;gap:8px;padding:14px 15px 15px}
.prod h3{
  font-size:14.5px;font-weight:800;line-height:1.6;min-height:2.9em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.prod .pricerow{margin-top:auto}


/* ═══════════════ 7) ترقيم الصفحات ═══════════════ */

.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:26px 0 6px}
.pager a,.pager .cur,.pager .gap{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;border-radius:10px;
  font-size:13.5px;font-weight:700;
}
.pager a{background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);transition:.15s}
.pager a:hover{border-color:var(--amber);color:var(--ink)}
.pager .cur{background:var(--steel-deep);color:#fff;font-weight:900}
.pager .gap{min-width:24px;padding:0;color:var(--ink-mute)}


/* ═══════════════ 8) الموبايل ═══════════════ */

@media (max-width:760px){

  .pgrid{grid-template-columns:1fr;gap:12px}
  .pcard{padding:15px;border-radius:14px}
  .pcard h3{font-size:15px}
  .pcard .desc{font-size:13px;-webkit-line-clamp:2}
  .pcard .specs{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .pcard .specs .spec{padding:9px 8px}
  .pcard .specs .spec .v{font-size:13px}
  .pcard .foot{gap:9px;padding-top:12px;font-size:11.5px}
  .pcard .foot .btn{width:100%;margin-inline-start:0;margin-top:4px}

  .mcard{padding:15px;border-radius:14px}

  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .prod{border-radius:15px}
  .prod .body{padding:11px 11px 12px;gap:6px}
  .prod h3{font-size:12.8px;line-height:1.5}

  .store-hero{padding:24px 18px;border-radius:16px}
  .store-hero h1{font-size:23px}
  .phead.blog-head{padding:24px 18px;border-radius:16px}
  .phead.blog-head h1{font-size:23px}

  .tabbar a{font-size:9.5px}
  .tabbar a svg{width:20px;height:20px}

  .pager a,.pager .cur{min-width:34px;height:34px;padding:0 9px;font-size:12.5px}

  /* مفيش سكرول أفقي في أي مكان */
  .pillbar .pills,.sortbar,.tabs{overflow-x:visible}
}

@media (max-width:400px){
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .pcard .specs .spec .k{font-size:10px}
  .tabbar a{font-size:9px}
  .tabbar a svg{width:19px;height:19px}
}


/* ═══════════════ 9) أساسيات لا تُكسر ═══════════════ */

/* الحاوية لازم تفضل بعرضها المحدّد — سطر زي
   .wrap{max-width:100%} كان بيمدّد الصفحة على الشاشة كلها */
.wrap{width:100%;max-width:1160px;margin-inline:auto}

/* منع السكرول الأفقي — من غير ما نكسر position:sticky.
   ملاحظة مهمة: overflow-x:hidden على body بيلغي sticky
   لكل العناصر جوّاه. فبنستخدم clip بدلها (مدعومة في كل
   المتصفحات الحديثة وما بتعملش سياق سكرول جديد). */
/* html بس — عشان sticky وfixed يفضلوا شغّالين جوّه body */
html{overflow-x:clip}
body{overflow-x:visible !important}
img,video,canvas,svg,iframe,table,pre{max-width:100%}


/* ═══════════════ 10) صورة الإيميل ═══════════════ */

.eimg{
  height:19px;width:auto;display:inline-block;vertical-align:-4px;
  image-rendering:auto;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
.contact .eimg{height:18px;vertical-align:-4px}
@media (max-width:560px){
  .eimg,.contact .eimg{height:16px;vertical-align:-3px}
}

/* ═══════════════ 11) استيراد الدليل ═══════════════ */

.steps-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.steps-bar span{
  padding:8px 15px;border-radius:100px;font-size:12.5px;font-weight:800;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-mute);
}
.steps-bar span.on{background:var(--steel-deep);border-color:var(--steel-deep);color:#fff}
.steps-bar span.done{background:#E8F5EE;border-color:#B8DFC9;color:#0B5E3A}

/* صفوف ربط الأعمدة */
.maprow{
  display:grid;grid-template-columns:1.1fr 1.2fr 1.4fr;
  gap:10px;align-items:center;
  padding:8px 10px;border-radius:10px;border-bottom:1px solid var(--line);
}
.maprow:hover{background:var(--paper)}
.maprow.ok{background:rgba(46,125,107,.045)}
.maprow.person .mf{color:var(--ink-mute);font-size:12px}
.maprow-head{
  font-size:11px;font-weight:800;color:var(--ink-mute);
  background:var(--paper);border-radius:10px 10px 0 0;padding:10px;
}
.maprow-head:hover{background:var(--paper)}
.maprow .mf{font-size:13px;font-weight:700;color:var(--ink)}
.maprow .sel{min-height:36px;font-size:13px;padding-block:5px}
.maprow .ms{
  font-size:12px;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media(max-width:760px){
  .maprow{grid-template-columns:1fr;gap:6px;padding:11px 10px}
  .maprow-head{display:none}
  .maprow .mf{font-size:12.5px;color:var(--ink-mute)}
  .maprow .ms{font-size:11.5px}
}

/* بطاقة المعاينة */
.pvcard{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;
}
.pvcard .pv-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pvcard .pv-n{
  width:22px;height:22px;border-radius:50%;background:var(--steel-deep);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;flex-shrink:0;
}
.pvcard .pv-h b{font-size:14.5px;color:var(--ink)}
.pvcard .pv-en{font-size:11.5px;color:var(--ink-mute);margin-top:3px}
.pvcard .pv-g{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:8px;margin-top:11px;
}
.pvcard .pv-f{
  background:var(--paper);border:1px solid var(--line);border-radius:9px;
  padding:7px 10px;min-width:0;
}
.pvcard .pv-f .k{display:block;font-size:10.5px;font-weight:700;color:var(--ink-mute)}
.pvcard .pv-f .v{
  display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ═══════════════ 12) علامة الذكاء الاصطناعي ═══════════════ */

.aimark{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:7px;
  font-size:11.5px;font-weight:900;font-family:ui-monospace,monospace;
  vertical-align:middle;flex-shrink:0;cursor:help;
}
.aimark.ai-on{background:#E8F5EE;color:#0B5E3A;border:1px solid #8FCFAE}
.aimark.ai-off{background:#FDECE7;color:#9A3412;border:1px solid #F0B4A0}

/* ═══════════════ 13) شريط التحديد الجماعي ═══════════════ */

.bulkbar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);
  border-radius:13px;padding:11px 13px;margin-bottom:13px;
  position:sticky;top:8px;z-index:12;
  box-shadow:0 3px 12px -6px rgba(7,26,56,.16);
}
.bulkbar .sel,.bulkbar .inp{min-height:36px;font-size:13px;padding-block:5px;max-width:190px}
.bulkbar .btn{min-height:36px}
.bulkbar .bcount{
  font-size:12px;font-weight:800;color:var(--ink-mute);
  background:var(--paper);border-radius:100px;padding:5px 12px;
}
.bulkbar .bcount.on{background:var(--amber);color:var(--steel-deep)}
@media(max-width:760px){
  .bulkbar{position:static;padding:10px;gap:7px}
  .bulkbar .sel,.bulkbar .inp{max-width:100%;flex:1 1 130px}
}

/* ═══════════════ 14) بطاقة نتيجة الشركة ═══════════════ */

.rescard{
  position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;margin-bottom:12px;transition:.16s;
}
.rescard:hover{border-color:var(--amber);box-shadow:0 8px 22px -12px rgba(7,26,56,.22)}

.rescard .rc-head{display:flex;align-items:flex-start;gap:10px}
.rescard .rank{
  width:24px;height:24px;border-radius:50%;background:var(--steel-deep);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;flex-shrink:0;margin-top:1px;
}
.rescard .rc-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.rescard .rc-title a{font-size:16px;font-weight:800;color:var(--ink);line-height:1.45}
.rescard:hover .rc-title a{color:var(--amber-d)}

.rescard .rc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.rescard .tg{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:4px 10px;font-size:11.5px;font-weight:700;color:var(--ink-soft);
}
a.tg:hover{border-color:var(--amber);color:var(--ink)}

.rescard .rc-desc{font-size:13px;line-height:1.85;color:var(--ink-soft);margin-top:9px}
.rescard .why{
  margin-top:10px;padding:9px 12px;border-radius:10px;
  background:rgba(245,166,30,.09);border:1px solid rgba(245,166,30,.24);
  font-size:12.5px;font-weight:600;color:var(--amber-d);line-height:1.75;
}
.rescard .rc-foot{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
}

/* النافذة المنبثقة */
.copop{
  margin-top:12px;border-radius:13px;overflow:hidden;
  background:var(--paper);border:1px solid var(--line-2);
  animation:cpIn .16s ease-out;
}
@keyframes cpIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.copop .cp-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px;background:var(--steel-deep);color:#fff;
}
.copop .cp-head b{font-size:13.5px;font-weight:800;line-height:1.4}
.copop .cp-x{
  width:26px;height:26px;border:0;border-radius:7px;cursor:pointer;flex-shrink:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:18px;line-height:1;
  display:grid;place-items:center;
}
.copop .cp-body{padding:9px}
.copop .cp-row{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:9px;background:var(--surface);
  border:1px solid var(--line);margin-bottom:6px;
  font-size:13.5px;font-weight:700;color:var(--ink);
}
a.cp-row:hover{border-color:var(--amber)}
.copop .cp-row .ci{font-size:15px;flex-shrink:0}
.copop .cp-empty{padding:14px;text-align:center;font-size:13px;color:var(--ink-mute)}
.copop .cp-addr{
  padding:9px 11px;font-size:12.5px;color:var(--ink-soft);line-height:1.8;
  border-top:1px dashed var(--line);margin-top:4px;
}
.copop .cp-certs{display:flex;gap:5px;flex-wrap:wrap;padding:0 11px 9px}
.copop .cp-certs span{
  background:#E8F5EE;border:1px solid #B8DFC9;color:#0B5E3A;
  border-radius:7px;padding:3px 8px;font-size:11px;font-weight:700;
}
.copop .cp-full{
  display:block;padding:10px;text-align:center;
  background:var(--surface);border-top:1px solid var(--line);
  font-size:12.5px;font-weight:800;color:var(--steel);
}
.copop .cp-full:hover{background:var(--paper);color:var(--amber-d)}

@media(max-width:560px){
  .rescard{padding:14px;border-radius:14px}
  .rescard .rc-title a{font-size:14.5px}
  .rescard .rc-foot .btn{flex:1 1 auto}
}

/* ═══════════════ 15) الحصّة والإحصائيات ═══════════════ */

.dir-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;
}
.dir-bar .db-count{font-size:13px;font-weight:700;color:var(--ink-mute)}
.dir-bar .db-quota{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:100px;
  padding:6px 14px;font-size:12px;font-weight:700;color:var(--ink-soft);
}
.dir-bar .db-quota b{color:var(--steel-deep);font-size:13.5px}
.dir-bar .db-quota.low{background:#FFF7E8;border-color:#F0C36A;color:#7A5B12}
.dir-bar .db-quota.low b{color:var(--amber-d)}
.dir-bar .db-quota.out{background:#FDECE7;border-color:#F0B4A0;color:#9A3412}
.dir-bar .db-quota.out b{color:#C4331B}
.dir-bar .db-quota a{color:var(--steel);font-weight:800;text-decoration:underline}

/* بطاقات الإحصاء */
.statcards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin-bottom:18px;
}
.statcards .sc{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 12px;text-align:center;
}
.statcards .sc .ic{font-size:19px;display:block;margin-bottom:5px;opacity:.85}
.statcards .sc b{display:block;font-size:21px;font-weight:900;color:var(--steel-deep);letter-spacing:-.5px}
.statcards .sc em{display:block;font-size:11px;font-style:normal;color:var(--ink-mute);margin-top:3px}

/* رسالة السقف */
.capnote{
  background:linear-gradient(150deg,#FFF7E8,#FFEFD1);
  border:1px solid #F3D9A6;border-radius:18px;
  padding:26px 22px;text-align:center;margin-top:18px;
}
.capnote .ic{font-size:32px;margin-bottom:8px}
.capnote b{display:block;font-size:16.5px;font-weight:900;color:var(--steel-deep);margin-bottom:8px}
.capnote p{font-size:13.5px;line-height:1.9;color:#7A6136;max-width:460px;margin:0 auto 14px}

/* نافذة نفاد الحصّة */
.copop.quota .cp-head{background:#C4331B}
.copop.quota .qmsg{
  padding:14px 12px;font-size:13.5px;line-height:1.9;
  color:var(--ink-soft);text-align:center;
}
.rescard .btn.spent{opacity:.55;cursor:not-allowed}

@media(max-width:760px){
  .dir-bar{gap:8px}
  .dir-bar .db-count{font-size:12px}
  .dir-bar .db-quota{font-size:11.5px;padding:5px 11px;width:100%;justify-content:center}
  .statcards{grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
  .statcards .sc{padding:11px 6px;border-radius:12px}
  .statcards .sc .ic{font-size:16px}
  .statcards .sc b{font-size:17px}
  .statcards .sc em{font-size:9.5px}
  .capnote{padding:20px 16px;border-radius:15px}
  .capnote b{font-size:15px}
  .capnote p{font-size:12.5px}
}
@media(max-width:400px){
  .statcards{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════════════
   16) لوحة التحكّم — تجاوب وتنظيم
   ═══════════════════════════════════════════════════ */

/* التخطيط: قائمة جانبية ثابتة + محتوى مرن */
.adm{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
@media(max-width:1000px){.adm{grid-template-columns:1fr}}

.adm-main{
  padding:clamp(14px,2.6vw,26px);
  max-width:1340px;width:100%;min-width:0;
}

/* تبويبات الإعدادات */
.set-tabs{flex-wrap:wrap}
.set-tabs a{white-space:nowrap}

/* الجداول: تسكرول أفقي نظيف بدل ما تكسر الصفحة */
.tbl-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:15px;background:var(--surface);
  scrollbar-width:thin;
}
.tbl-wrap::-webkit-scrollbar{height:8px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
table.tbl{min-width:640px}

/* الشبكات في اللوحة تنهار على الموبايل */
.adm-main .grid.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}
.adm-main .grid.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
@media(max-width:900px){
  .adm-main .grid.g2,
  .adm-main .grid.g3{grid-template-columns:1fr}
}

/* النماذج: حقلين جنب بعض على الشاشة الواسعة */
.adm-main .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.adm-main .row2{grid-template-columns:1fr;gap:0}}

/* رأس الصفحة */
.adm-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  padding-bottom:15px;margin-bottom:20px;border-bottom:1px solid var(--line);
}
.adm-head h1{font-size:clamp(19px,2.8vw,26px);font-weight:900;letter-spacing:-.5px;margin:0}

/* المؤشّرات */
.adm-main .kpi{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:22px}
@media(max-width:640px){
  .adm-main .kpi{grid-template-columns:repeat(2,1fr);gap:9px}
  .adm-main .kpi .k{padding:12px 13px}
  .adm-main .kpi .k .n{font-size:20px}
}

/* أزرار الجدول على الموبايل */
@media(max-width:640px){
  .tbl-acts{gap:4px}
  .tbl-acts .btn-sm{min-height:29px;padding:0 9px;font-size:11.5px}
}

/* شريط الفلاتر */
.filterbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.filterbar .inp,.filterbar .sel{min-height:40px;flex:1 1 160px;min-width:0}
.filterbar .btn{min-height:40px}
@media(max-width:640px){
  .filterbar{padding:11px;gap:7px}
  .filterbar .inp,.filterbar .sel{flex:1 1 100%}
  .filterbar .btn{width:100%}
}

/* الحقول */
.adm-main .inp,.adm-main .sel,.adm-main .ta{width:100%;max-width:100%}
.adm-main .check{display:flex;align-items:flex-start;gap:9px;padding:9px 0;line-height:1.6}
.adm-main .check input{margin-top:3px;flex-shrink:0}

/* شبكة صفحة الاستفسار */
.ask-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}

/* ═══════════════════════════════════════════════════
   17) مراجعة شاملة للموبايل
   ═══════════════════════════════════════════════════ */

@media (max-width:760px){

  /* ---------- أساسيات ---------- */
  .wrap{padding-inline:14px}
  .page{padding-block:16px}
  .phead{margin-bottom:16px}
  .phead h1{font-size:clamp(20px,5.6vw,26px);line-height:1.35}
  .phead .intro{font-size:13.5px;line-height:1.85}
  .section-t{font-size:17px;margin:24px 0 12px}

  /* الكل ما يعدّيش عرض الشاشة */
  .card,.rescard,.pcard,.mcard,.prod,.post{max-width:100%}
  .card{padding:15px;border-radius:14px}

  /* ---------- أي شبكة تبقى عمود ---------- */
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr;gap:12px}
  .row2,.row3{grid-template-columns:1fr;gap:0}
  .editor-grid{grid-template-columns:1fr;gap:12px}
  .editor-side{position:static}

  /* ---------- الأزرار ---------- */
  .btn{min-height:44px}
  .btn-sm{min-height:36px}
  .btn-lg{min-height:50px;font-size:15px}
  .flex.gap10>.btn,.flex.gap8>.btn{flex:1 1 auto}

  /* ---------- الحقول: 16px يمنع تكبير iOS ---------- */
  .inp,.sel,.ta{font-size:16px;min-height:46px}
  .ta{min-height:110px}

  /* ---------- صفحة الاستفسار والبحث ---------- */
  .ask-grid{grid-template-columns:1fr!important;gap:14px}
  .hero-search{flex-direction:column;gap:8px}
  .hero-search .inp,.hero-search .btn{width:100%}

  /* ---------- الحبّات والفلاتر ---------- */
  .pillbar .pills{gap:6px}
  .pillbar .pills a,.pillbar .more{
    padding:8px 13px;font-size:12.5px;min-height:38px;
  }
  .sortbar{gap:6px;flex-wrap:wrap}
  .sortbar .sel{flex:1 1 140px;min-width:0}

  /* ---------- الجداول تبقى بطاقات ---------- */
  .rte table{font-size:12.5px}

  /* ---------- المسافة السفلية للشريط ---------- */
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .footer{margin-bottom:0}

  /* ---------- منع أي تجاوز أفقي ---------- */
  .flex.wrapf{min-width:0}
  .flex>*{min-width:0}
  code,pre,.mono{word-break:break-word;overflow-wrap:anywhere}
  a[href^="tel:"],a[href^="mailto:"]{word-break:break-all}
}

@media (max-width:420px){
  .wrap{padding-inline:12px}
  .card{padding:13px;border-radius:12px}
  .phead h1{font-size:20px}
  .btn{font-size:13.5px;padding-inline:14px}
  .badge{font-size:10.5px;padding:3px 7px}
}

/* ---------- لوحة الأدمن على الموبايل ---------- */
@media (max-width:1000px){
  .adm-side{
    padding:12px;
    position:relative;height:auto;
  }
  .adm-side .lg{margin-bottom:12px;font-size:18px}
  .adm-nav{display:none;max-height:66vh;overflow-y:auto;margin-top:10px}
  .adm-nav.open{display:block}
  .adm-side a{padding:12px;min-height:46px;font-size:14px}
  .adm-side .grp{padding:12px 10px 5px}
  .adm-burger{
    display:flex;align-items:center;justify-content:center;gap:9px;
    width:100%;min-height:46px;border:0;border-radius:11px;cursor:pointer;
    background:rgba(255,255,255,.12);color:#fff;
    font-family:inherit;font-size:14.5px;font-weight:800;
  }
  .adm-main{padding:14px}
  .adm-head{padding-bottom:12px;margin-bottom:15px}
  .adm-head .btn{flex:1 1 auto}
  .bulkbar{position:static}
}

/* ═══════════════════════════════════════════════════
   18) لوحة الأدمن — التخطيط النهائي

   ليه القائمة كانت بتقف؟ سببين:

   1. body{overflow-x:hidden} — دي بتعمل "سياق سكرول"
      جديد وبتلغي position:sticky لكل العناصر جوّاها.
      اتغيّرت لـ overflow-x:clip فوق.

   2. .adm كان min-height:100vh من غير align-items،
      فالعمود بيتمدّد لطول المحتوى كله بدل الشاشة.

   الحل: بدل sticky خالص، بنستخدم عمود ثابت (fixed)
   على الشاشات الكبيرة. مضمون 100% ومش بيعتمد على
   أي سياق سكرول في الأب.
   ═══════════════════════════════════════════════════ */

@media (min-width:1001px){

  .adm{
    display:block !important;      /* مش grid — العمود fixed */
    min-height:100vh;
    background:var(--paper);
  }

  /* القائمة: عمود ثابت ملتصق بحافة الشاشة */
  .adm-side{
    position:fixed !important;
    inset-block:0 !important;      /* من فوق لتحت */
    inset-inline-start:0 !important;
    width:250px !important;
    height:100vh !important;
    max-height:100vh !important;
    z-index:40;

    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    padding:16px 12px 0 !important;
    background:var(--steel-deep);
    box-shadow:1px 0 0 rgba(255,255,255,.06);
  }

  .adm-side .lg{flex:0 0 auto;margin-bottom:14px}

  /* القائمة هي اللي بتسكرول — الحاوية ثابتة */
  .adm-side .adm-nav{
    display:block !important;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-bottom:28px;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.22) transparent;
  }
  .adm-side .adm-nav::-webkit-scrollbar{width:6px}
  .adm-side .adm-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
  .adm-side .adm-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34)}
  .adm-side .adm-nav::-webkit-scrollbar-track{background:transparent}

  /* المحتوى بياخد مسافة مكان العمود الثابت.
     مهم: width:100% مع margin بتخلّي العنصر يعدّي الشاشة
     بمقدار الهامش. لازم نحسب العرض بـcalc. */
  .adm-main{
    margin-inline-start:250px !important;
    width:calc(100% - 250px) !important;
    max-width:calc(100% - 250px) !important;
    min-width:0;
    padding:clamp(16px,2.2vw,28px);
    box-sizing:border-box;
  }

  /* الحاوية الداخلية هي اللي بتحدّد أقصى عرض للقراءة */
  .adm-main > *{max-width:1340px}

  .adm-burger{display:none !important}
}

/* الموبايل والتابلت: القائمة عادية فوق المحتوى */
@media (max-width:1000px){
  .adm{display:block}
  .adm-side{
    position:relative;height:auto;max-height:none;
    padding:12px;overflow:visible;
  }
  .adm-side .lg{margin-bottom:12px;font-size:18px}
  .adm-nav{display:none;max-height:68vh;overflow-y:auto;margin-top:10px}
  .adm-nav.open{display:block}
  .adm-side a{padding:12px;min-height:46px;font-size:14px}
  .adm-side .grp{padding:12px 10px 5px}
  .adm-burger{
    display:flex;align-items:center;justify-content:center;gap:9px;
    width:100%;min-height:46px;border:0;border-radius:11px;cursor:pointer;
    background:rgba(255,255,255,.12);color:#fff;
    font-family:inherit;font-size:14.5px;font-weight:800;
  }
  .adm-main{margin-inline-start:0;padding:14px}
  .bulkbar{position:static}
}

/* المحتوى ما يمدّدش الصفحة — والجداول العريضة بتسكرول
   جوّه غلافها هي بس. */
.adm-main{overflow-x:hidden;min-width:0}
.adm-main .tbl-wrap{max-width:100%;overflow-x:auto}
.adm-main table.tbl{min-width:min(620px,100%)}
.adm-main .card,
.adm-main form,
.adm-main .grid{min-width:0;max-width:100%}

/* ═══════════════ 19) الأكورديون — الحسم النهائي ═══════════════

   ليه كان مفتوح دايماً؟ ثلاث قواعد بتتضارب:
     base.css :  .acc{display:flex}          ← بيخلّي .a عنصر flex ظاهر
     base.css :  .acc .a{max-height:0}       ← قصّ بارتفاع ثابت
     app.css  :  .acc .a{display:none}       ← إخفاء بالكامل
   وأنا كتبت grid — فالنتيجة كانت عشوائية حسب ترتيب التحميل.

   الحسم: display:block على الحاوية، والجسم مقفول بـmax-height:0
   ومفتوح بقيمة كبيرة. أبسط من grid وبيكسب على كل اللي فوق.
   ═══════════════════════════════════════════════════════════ */

.acc{
  display:block !important;
  flex-direction:unset;
  gap:0;
  max-width:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:10px;
  overflow:hidden;
  transition:border-color .16s, box-shadow .16s;
}
.acc:hover{border-color:var(--line-2)}
.acc.open{border-color:var(--amber);box-shadow:0 4px 16px -8px rgba(7,26,56,.18)}

.acc > .q{
  display:flex !important;
  align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;min-height:58px;cursor:pointer;
  font-size:15px;font-weight:800;color:var(--ink);line-height:1.6;
  user-select:none;
}
.acc > .q:hover{color:var(--amber-d)}

.acc > .q i,
.acc > .q .ic{
  width:26px;height:26px;flex:0 0 auto;border-radius:8px;
  display:grid;place-items:center;
  background:var(--paper);color:var(--ink-mute);
  font-size:18px;font-weight:400;font-style:normal;line-height:1;
  transition:transform .22s, background .16s, color .16s;
}
.acc.open > .q i,
.acc.open > .q .ic{
  transform:rotate(45deg);
  background:var(--amber);color:var(--steel-deep);
}

/* الجسم — مقفول افتراضياً */
.acc > .a{
  display:block !important;
  max-height:0;
  overflow:hidden;
  padding:0 18px;
  font-size:14.5px;line-height:2;color:var(--ink-soft);
  transition:max-height .28s ease, padding .2s ease;
}
/* مفتوح: رقم كبير يكفي أطول إجابة */
.acc.open > .a{
  max-height:1600px;
  padding:0 18px 18px;
}

@media(max-width:560px){
  .acc > .q{padding:14px;min-height:52px;font-size:14px;gap:10px}
  .acc > .a{padding-inline:14px;font-size:13.5px;line-height:1.9}
  .acc.open > .a{padding:0 14px 15px;max-height:2200px}
}

/* ═══════════════ 20) هيرو المتجر والمدوّنة ═══════════════ */

.store-hero,
.phead.blog-head,
.dh-main{
  position:relative;overflow:hidden;
  border-radius:20px;
  padding:clamp(24px,4vw,38px) clamp(18px,3.4vw,34px);
  background:linear-gradient(135deg,#0B2247 0%,#16386B 60%,#1C4784 100%);
}
.store-hero::after,
.phead.blog-head::after,
.dh-main::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 260px at 88% 8%, rgba(245,166,30,.20), transparent 68%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.032) 0 2px, transparent 2px 15px);
}
.store-hero > *,
.phead.blog-head > *,
.dh-main > *{position:relative;z-index:1}

/* عنوان ونص متّسقين في التلاتة */
.store-hero h1,
.phead.blog-head h1,
.dh-main h1{
  color:#fff;font-size:clamp(23px,4vw,36px);font-weight:900;
  letter-spacing:-.7px;line-height:1.32;margin:12px 0 10px;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.store-hero p,
.phead.blog-head .intro,
.phead.blog-head p,
.dh-main > p{
  color:#C3D0E4;font-size:clamp(13.5px,1.6vw,15.5px);
  line-height:1.95;max-width:560px;margin:0;
}

/* شريط البحث جوّه الهيرو */
.store-hero .hero-search,
.phead.blog-head .hero-search{
  display:flex;gap:9px;margin-top:20px;max-width:560px;
}
.store-hero .hero-search .inp,
.phead.blog-head .hero-search .inp{
  flex:1;min-height:50px;background:#fff;border-color:transparent;
  color:var(--ink);font-size:14.5px;
}
.store-hero .hero-search .btn,
.phead.blog-head .hero-search .btn{min-height:50px;padding-inline:26px}

/* إحصاءات الهيرو */
.store-hero .hero-stats{
  display:flex;gap:clamp(20px,4vw,38px);flex-wrap:wrap;
  margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.13);
}
.store-hero .hero-stats > *{font-size:12px;color:#B9C7DC;line-height:1.5;text-align:center}
.store-hero .hero-stats b{display:block;font-size:23px;font-weight:900;color:#fff;letter-spacing:-.5px}

@media(max-width:760px){
  .store-hero,.phead.blog-head,.dh-main{border-radius:16px}
  .store-hero .hero-search,
  .phead.blog-head .hero-search{flex-direction:column;gap:8px;max-width:100%}
  .store-hero .hero-search .inp,
  .store-hero .hero-search .btn{width:100%}
  .store-hero .hero-stats{gap:18px;margin-top:16px;padding-top:14px}
  .store-hero .hero-stats b{font-size:19px}
}

/* ═══════════════ 21) تخطيط صفحة الإعدادات ═══════════════ */
.set-wrap{display:block;max-width:760px}
.set-wrap > .card{width:100%;max-width:100%}

/* الشارة جنب العنوان ما تتقصّش */
.adm-head{flex-wrap:wrap;row-gap:8px}
.adm-head h1{min-width:0;flex:1 1 auto}
.adm-head .badge,
.adm-head .btn{flex:0 0 auto}

/* شريط التبويبات: يلتفّ بدل ما يعدّي العرض */
.set-tabs{flex-wrap:wrap;overflow:visible;gap:4px}
.set-tabs a{white-space:nowrap;flex:0 0 auto}