/* ===========================
       الأساسيات والألوان العامة
       =========================== */
    :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;
    }

    .dark body {
      background: var(--bg-secondary);
      color: var(--text-primary);
    }

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

    /* ==== 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;}

    /* قصّ العنوان لسطرين */
    .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-content{min-width:0;}
    .ads-list .ad-cats{overflow-wrap:anywhere;}

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

    /* ===========================
       النظام الليلي فقط (بدون تغيير النهاري)
       =========================== */
    
    /* الخلفيات العامة */
    .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 .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);
    }