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

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

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,
.sub-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, .sub-rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail::-webkit-scrollbar, .sub-rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb, .sub-rail::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:999px}
.rail::-webkit-scrollbar-track, .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{ display:inline-flex; align-items:center; gap:8px; }
.subcat .sub-thumb{
  display:inline-flex; inline-size:22px; block-size:22px; border-radius:6px; overflow:hidden; flex:0 0 22px;
  border:1px solid var(--border);
}
.subcat .sub-thumb img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.subcat .sub-name{ font:inherit; line-height:1; white-space:nowrap; }

/* ملاحظة */
.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-img-link{ display:block; flex:0 0 112px; order:2; }
.ad-img-link img{ width:112px; height:84px; object-fit:cover; border-radius:10px }

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

.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; color:#64748b; font-size:.75rem }
.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 }
.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 }

.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; }

/* ===========================
   شريط الفلاتر (أيقونات فقط)
   =========================== */
.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 }
}

/* ===========================
   تحسينات للشاشات الصغيرة جدًا
   =========================== */
@media(max-width:420px){
  .ad-img-link{ flex-basis:96px; }
  .ad-img-link img{ width:96px; height:72px; }
  .ad-title{ font-size:.84rem; }
  .ad-price{ font-size:.88rem; }
}