/* ===========================
   الأساسيات والألوان العامة
   =========================== */
:root{
  --primary:#36cc09;      /* ليموني */
  --primary-ink:#084608;  /* أخضر غامق */
  --ink:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;

  --card-radius:12px;
  --card-pad:8px;
  --chip-font:.75rem;
}

/* النظام الليلي */
.dark {
  --bg-primary: #10161d;
  --bg-secondary: #1a232c;
  --text-primary: #e9f0f6;
  --text-secondary: #9ca3af;
  --border-color: #273341;
}

html{scroll-behavior:smooth; font-size:15px;} /* كان ~16px */
body{background:#f9fafb; color:var(--ink); font-size:.92rem;}

/* ===========================
   سكشن الأقسام الرئيسية
   =========================== */
.home-cats{margin:16px auto; padding:0 12px; max-width:1200px;}
.home-cats__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;}
.home-cats__title{margin:0; font-weight:800; color:var(--primary-ink); font-size:clamp(16px,4vw,22px);}
.home-cats__hint{font-size:12px; color:var(--muted); text-decoration:none}

/* سكة سحب أفقية */
.rail{
  display:block;
  overflow-x:auto; overflow-y:hidden; white-space:nowrap;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  user-select:none; cursor:grab; padding:8px 0 6px; scroll-snap-type:x proximity;
}
.rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:999px}
.rail::-webkit-scrollbar-track{background:#f3f4f6; border-radius:999px}

/* ===========================
   ✅ sub-rail (الفرعي + الفرع فرعي) — نسخة محسّنة + مصغّرة
   =========================== */
.sub-rail{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  user-select:none;
  cursor:grab;
  padding:4px 2px;
  scroll-snap-type:x proximity;
}
.sub-rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.sub-rail::-webkit-scrollbar{height:6px}
.sub-rail::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:999px}
.sub-rail::-webkit-scrollbar-track{background:#f3f4f6; border-radius:999px}

/* زر/بطاقة القسم */
.cat-btn{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:top;
  height:34px; padding:0 10px; margin-inline-end:8px;
  border-radius:9px; border:1px solid var(--border);
  background:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, #fff), #fff);
  text-decoration:none; color:var(--primary-ink); font-weight:700; font-size:12px;
  width:max-content; white-space:nowrap;
  transition:transform .15s, box-shadow .15s, border-color .15s, background .15s;
  scroll-snap-align:start;
}
.cat-btn:last-child{ margin-inline-end:0; }
.cat-btn:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--primary) 45%, #fff);
  box-shadow:0 10px 18px -14px rgba(8,70,8,.30);
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 11%, #fff), #fff);
}
.cat-btn.is-active{
  border-color:color-mix(in srgb, var(--primary) 55%, #fff);
  box-shadow:0 8px 16px -12px rgba(8,70,8,.25);
}

/* ✅ زر الفرعي/الفرع فرعي (نفس التصميم) */
.cat-btn.subcat,
.cat-btn.subsubcat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
  height:auto; /* مهم عشان ما يضخم */
}

/* ✅ الصورة المصغرة (تُستخدم للفرعي والفرع فرعي) */
.sub-thumb{
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  background:#f3f4f6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.sub-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* اسم القسم */
.sub-name{
  font-size:12px;
  font-weight:800;
  line-height:1;
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ✅ موبايل */
@media(max-width:420px){
  .sub-thumb{ width:24px; height:24px; flex-basis:24px; }
  .cat-btn.subcat, .cat-btn.subsubcat{ padding:6px 8px; gap:7px; }
  .sub-name{ font-size:11px; max-width:110px; }
}

/* ملاحظة */
.note{margin:8px 0 0; font-size:12px; color:var(--muted)}

/* ===========================
   قائمة الإعلانات
   =========================== */
.ads-list{display:flex; flex-direction:column; gap:10px}
.ad-row{
  display:flex; gap:10px; align-items:stretch;
  background:#fff; border:1px solid var(--border); border-radius:var(--card-radius); overflow:hidden;
  padding:var(--card-pad); transition:.2s box-shadow;
}
.ad-row:hover{ box-shadow:0 8px 22px rgba(0,0,0,.06) }

.ad-row.ad-clickable{cursor:pointer}
.ad-row.ad-clickable:focus{outline:2px solid rgba(54,204,9,.35); outline-offset:2px; border-radius:12px}

/* ✅ الصورة: مربع ثابت + بلور خلفي + contain */
.ad-img-link{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 112px;
  order:2;
}

/* ✅ المربع */
.ad-thumb{
  width:112px;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  border:1px solid #e5e7eb;
  background:#f3f4f6;
  isolation:isolate;
}

/* ✅ الخلفية البلور (تملأ الفراغ) */
.ad-thumb::before{
  content:"";
  position:absolute;
  inset:-18%;
  background-image:var(--thumb);
  background-size:cover;
  background-position:center;
  filter:blur(14px);
  transform:scale(1.1);
  opacity:.95;
  z-index:0;
}

/* ✅ الصورة الأصلية: تظهر كاملة داخل المربع مهما كان مقاسها */
.ad-thumb__img{
  position:relative;
  z-index:1;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block;
  background:transparent !important;
}

/* المحتوى على اليمين (RTL) */
.ad-content{ flex:1; display:flex; flex-direction:column; gap:5px; order:1; min-width:0; }

.ad-title{
  font-weight:800; font-size:.86rem; line-height:1.25;
  color:var(--primary); text-decoration:none; display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.ad-cats{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; row-gap:2px; color:#64748b; font-size:.75rem }
.ad-time{font-size:.72rem;color:#6b7280;font-weight:600}
.ad-chip{ background:transparent; border:0; padding:0; font-weight:600; font-size:var(--chip-font) }
.ad-chip.sub{ color:#475569 }
.ad-sep{ color:#94a3b8; font-size:.74rem }

.ad-price{ color:var(--primary-ink); font-weight:800; font-size:.92rem }
.ad-user{ display:flex; align-items:center; gap:6px; margin-top:2px; flex-wrap:wrap; }
.ad-user-avatar{ width:26px; height:26px; border-radius:999px; overflow:hidden; border:1px solid var(--border); background:#f3f4f6; display:grid; place-items:center }
.ad-user-avatar img{ width:100%; height:100%; object-fit:cover }
.ad-initials{ font-size:.72rem; font-weight:700; color:var(--primary-ink) }
.ad-user-name{ font-size:.8rem; color:#334155; font-weight:600; display:inline-flex; align-items:center; gap:6px; }

.empty{ text-align:center; color:#6b7280; padding:2rem 0; width:100% }
.load-more{display:none}
.load-more.show{display:flex}
#loadMoreBtn{ font-size:.85rem; padding:.55rem .9rem; }

@media(max-width:420px){
  .ad-img-link{ flex-basis:96px; }
  .ad-thumb{ width:96px; }
  .ad-title{ font-size:.84rem; }
  .ad-price{ font-size:.88rem; }
}

/* قصّ العنوان لسطرين */
.ads-list .ad-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  word-break: break-word;
  max-height: calc(1.35em * 2);
}
.ads-list .ad-cats{overflow-wrap:anywhere;}

/* ✅ شارة التوثيق الصغيرة بجوار الاسم */
.v-badge { display:inline-block; width:16px; height:16px; vertical-align:middle; }
.v-badge svg { width:16px; height:16px; display:block; overflow:visible; }

/* ===========================
   شريط الفلاتر (أيقونات فقط)
   =========================== */
.filter-bar.icons-toolbar{
  display:flex; gap:6px; background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:8px; margin:8px 8px 0; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.ficon{ flex:0 0 auto; scroll-snap-align:start; }
.ficon.no-pop{ position:static; }

.icon-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:36px; min-width:44px; padding:0 10px;
  background:#fff; color:#111; border:1px solid var(--border); border-radius:999px;
  font-weight:700; font-size:.85rem;
  transition:.15s transform ease,.15s box-shadow ease,.15s border-color ease;
}
.icon-btn:hover{ box-shadow:0 4px 14px rgba(0,0,0,.07); border-color:#d1d5db }
.icon-btn:active{ transform:translateY(1px) }
.icon-btn i{ font-size:.95rem; color:#475569 }
.icon-apply{ background:var(--primary); border-color:var(--primary); color:#fff }
.icon-apply i{ color:#fff }
.icon-reset{ background:#fff; border-color:var(--border); color:#111 }
.icon-label{ display:none; font-size:.78rem; font-weight:700 }
@media (min-width:1024px){
  .icon-btn{ gap:8px; padding:0 12px; }
  .icon-label{ display:inline; }
}

/* ===========================
   النوافذ المنبثقة (Modals)
   =========================== */
.modal[hidden]{ display:none !important; }
.modal{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
}
.modal__backdrop{
  position:absolute; inset:0; background:rgba(15,23,42,.42); backdrop-filter:blur(2px);
}
.modal__card{
  position:relative; width:min(520px, 92vw); max-height:88vh; overflow:auto;
  background:#fff; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.25);
  border:1px solid var(--border); animation:modalIn .16s ease;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:translateY(0) } }

.modal__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid #eef2f7;
}
.modal__title{ font-weight:800; color:#111827; display:flex; align-items:center; gap:8px; font-size:1rem; }
.modal__title i{ color:#475569 }
.modal__close{
  background:transparent; border:0; font-size:1.25rem; line-height:1;
  color:#64748b; cursor:pointer; padding:2px 8px; border-radius:8px;
}
.modal__close:hover{ background:#f3f4f6; color:#111827 }

.modal__body{ padding:14px; display:grid; gap:10px }
.field{ display:grid; gap:6px }
.field > span{ font-size:.8rem; color:#64748b }
.input{
  width:100%; height:38px; border:1px solid var(--border); border-radius:9px; padding:0 10px;
  background:#fff; font-size:.9rem; color:#111827;
}
.modal__actions{
  display:flex; gap:8px; justify-content:flex-end; padding:10px 14px 14px;
}
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; border-radius:10px; padding:0 12px; font-weight:700; font-size:.88rem; }
.btn-primary{ background:var(--primary); color:#fff; border:1px solid var(--primary) }
.btn-secondary{ background:#fff; color:#111; border:1px solid var(--border) }

/* مودال ملء الشاشة للجوال */
@media (max-width: 639px){
  .modal__card{ width:100vw; height:100vh; max-height:100vh; border-radius:0 }
  .modal__head{ padding:16px }
  .modal__body{ padding:16px }
  .modal__actions{ padding:12px 16px 20px }
}

/* ==== Featured rail (صور دائرية بحد ليموني) ==== */
.featured-wrap{ padding:8px 10px 0; margin:0; }
.featured-rail{ display:flex; gap:8px; overflow:auto; padding:4px 6px 0; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.featured-rail.dragging{cursor:grabbing}
.feat-item{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:0; text-decoration:none; color:#111; }
.feat-thumb{ width:58px; height:58px; border-radius:999px; overflow:hidden; position:relative; border:2px solid var(--primary); box-shadow:0 6px 14px rgba(54,204,9,.16); background:#fff; }
.feat-thumb img{width:100%; height:100%; object-fit:cover; display:block}
@media (min-width:768px){ .feat-thumb{width:66px;height:66px} }

/* إخفاء الهيدر النصي للأقسام */
.home-cats__head{display:none !important;}
.home-cats{padding-top:0 !important; margin-top:0 !important;}
.home-cats .rail{margin-top:2px !important;}

/* ===========================
   ✅ النظام الليلي فقط (بدون تغيير النهاري)
   =========================== */
.dark body {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* الإعلانات في الوضع الليلي */
.dark .ad-row {
  background: var(--bg-primary);
  border-color: var(--border-color);
}
.dark .ad-title { color: var(--primary); }
.dark .ad-price { color: var(--primary) !important; }
.dark .ad-user-name { color: var(--text-primary); }
.dark .ad-user-avatar {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}
.dark .ad-initials { color: var(--text-primary); }
.dark .ad-cats { color: var(--text-secondary); }
.dark .ad-chip.sub { color: var(--text-secondary); }
.dark .ad-time{ color: var(--text-secondary); }
.dark .ad-thumb{ border-color: var(--border-color); background: var(--bg-secondary); }

/* الأقسام في الوضع الليلي */
.dark .cat-btn {
  background: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.dark .cat-btn:hover {
  background: var(--bg-primary);
  border-color: var(--primary);
}
.dark .cat-btn.is-active {
  background: var(--primary);
  color: white;
}

/* الفلاتر في الوضع الليلي */
.dark .filter-bar.icons-toolbar {
  background: var(--bg-primary);
  border-color: var(--border-color);
}
.dark .icon-btn {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.dark .icon-btn:hover { border-color: var(--primary); }

/* المودالات في الوضع الليلي */
.dark .modal__card {
  background: var(--bg-primary);
  border-color: var(--border-color);
}
.dark .modal__head { border-color: var(--border-color); }
.dark .modal__title { color: var(--text-primary); }
.dark .modal__close { color: var(--text-secondary); }
.dark .modal__close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.dark .input {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.dark .field > span { color: var(--text-secondary); }
.dark .btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* زر التحميل الإضافي */
.dark .load-more {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.dark .load-more:hover { background: var(--bg-secondary); }

/* المنتجات المميزة */
.dark .feat-item { color: var(--text-primary); }
.dark .feat-thumb { background: var(--bg-primary); }

/* الرسالة الفارغة */
.dark .empty { color: var(--text-secondary); }