/* =========================
   ✅ Layout 3 أعمدة
   ========================= */
.content{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 20px;
  flex:1;
}

/* أزرار موبايل */
.search-toggle,
.extra-column1{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border:0;
  border-radius:8px;
  background:#007bff;
  color:#fff;
  font:inherit;
  cursor:pointer;
}

/* ✅ البحث + العمود الإضافي */
.search-filter,
.extra-column{
  width:250px;
  background:#fff;
  padding:10px 25px;
  border-radius:8px;
  box-shadow:0 0 10px rgba(0,0,0,.1);
}

.search-filter h3{margin-bottom:10px;font-size:16px;}

.search-filter input,
.search-filter select,
.extra-column input,
.extra-column select{
  width:100%;
  padding:8px;
  margin-bottom:10px;
  border:1px solid #ddd;
  border-radius:5px;
}
.search-filter input:focus,
.search-filter select:focus,
.extra-column input:focus,
.extra-column select:focus{
  border-color:#007bff;
  outline:none;
}



/* ✅ الوسط */
.main-content{
  flex:1;
  min-width:0;
  width:100%;
}

/* ✅ موبايل: مخفيين افتراضياً (JS يفتحهم) */
#searchFilter{display:none;}
#extraColmn{display:none;}

/* ✅ ديسكتوب: يظهرون دائماً */
@media (min-width: 900px){
  .search-toggle{display:none !important;}
  .extra-column1{display:none !important;}
  #searchFilter{display:block !important;}
  #extraColmn{display:block !important;}
}

/* =========================================================
   ✅✅ شبكة الإعلانات (ثابتة)
   - الكرت عرض ثابت
   - إعلانين دائمًا في أصغر الشاشات
   ========================================================= */

/* ثوابت المقاس */
:root{
  --ad-card-w: 160px;   /* عرض ثابت */
  --ad-img-h: 110px;    /* ارتفاع ثابت للصورة */
  --ad-gap: 10px;
}

/* wrapper */
.home-ads-wrapper{width:100%;}

/* grid */
.home-ads-grid{
  display:grid;
  gap:var(--ad-gap);
  justify-content:center;      /* ✅ توسيط الشبكة داخل الوسط */
  align-content:flex-start;

  /* ✅ إعلانين دائمًا (أساسًا) */
  grid-template-columns: repeat(2, var(--ad-card-w));
}

/* ✅ على الشاشات الواسعة: زِد الأعمدة تلقائيًا (والكرت ثابت) */
@media (min-width: 0){
  .home-ads-grid{
    grid-template-columns: repeat(auto-fit, var(--ad-card-w));
  }
}

/* ✅ الكرت (ثابت) */
.home-ad-card{
  width:var(--ad-card-w);
  max-width:var(--ad-card-w);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction:column;
  position:relative;
}
.home-ad-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* ✅ الصورة ثابتة */
.home-ad-image{
  width:100%;
  height:var(--ad-img-h);
  object-fit:cover;
  display:block;
  background:#e5e7eb;
}

/* ✅ جسم البطاقة ثابت */
.home-ad-body{
  padding:6px 8px;
  text-align:center;
}

.home-ad-title{
  font-size:13px;
  font-weight:700;
  margin:0 0 4px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.home-ad-meta{
  font-size:11px;
  margin:0;
  color:#6b7280;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



.home-ad-actions{display:flex;gap:6px;}

.home-ad-btn{
  padding:2px 10px;
  border-radius:10px;
  font-size:11px;
  cursor:pointer;
  border:none;
  transition:.2s;
}
.home-ad-btn.view{background:#111827;color:#fff;}
.home-ad-btn:hover{opacity:.85;}
.home-ad-btn i{font-size:11px;}

/* شارة جديد */
.home-ad-badge-new{
  position:absolute;
  top:8px;
  left:8px;
  z-index:2;
  background:#f97316;
  color:#fff;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* =========================================================
   ✅ إصلاح (أقل من 369): خفّف padding + قلّل عرض الكرت
   عشان يظل "إعلانين" حتى أصغر شاشة
   ========================================================= */
@media (max-width: 369px){
  .content{
    padding:10px 10px;     /* بدل 20 يمين/يسار */
  }
  :root{
    --ad-card-w: 145px;    /* ثابت أصغر */
    --ad-gap: 8px;         /* ثابت أصغر */
  }
}

/* أصغر جدًا (مثل 320px) */
@media (max-width: 330px){
  :root{
    --ad-card-w: 140px;
    --ad-gap: 8px;
  }
}

/* =========================================================
   ✅ موبايل: تحويل الأعمدة للتكديس (يمين/يسار فوق)
   ========================================================= */
@media (max-width: 899px){
  .content{flex-direction:column;}
  .search-filter{width:100%;order:1;margin-bottom:15px;}
  .extra-column{width:100%;order:2;margin-bottom:15px;}
  .main-content{order:3;}
}

/* زر تحميل المزيد */
.load-more-container{
  text-align:center;
  margin:20px auto;
  padding-bottom:20px;
}
#loadMoreBtn{
  background:#007bff;
  color:#fff;
  font-size:16px;
  font-weight:bold;
  border:none;
  padding:3px 20px;
  border-radius:5px;
  cursor:pointer;
  transition:background .3s, transform .2s;
  display:none;
}
#loadMoreBtn:hover{background:#0056b3;transform:scale(1.05);}
#loadMoreBtn:active{transform:scale(.95);}

/* الفوتر */
footer{
  display:flex;
  justify-content:space-between;
  direction:rtl;
  font-size:15px;
  width:100%;
  padding:15px;
  background:#007bff;
  color:#fff;
  border-top:1px solid #ddd;
  margin-top:30px;
  font-family:Arial,sans-serif;
}
footer a{color:#fff;}

/* ✅ الفوتر ثابت */
.home-ad-footer{
  border-top:0px solid #e5e7eb; /* هذا الخط الفاصل بين المناطق والمدن وبين زر عرض تم اخفائه بعد اخفاء زر عرض من Home.js */
  padding:5px 8px;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* ===== إعلان مميز ===== */
.extra-column h3{
  text-align:center;
  margin-bottom:10px;
  font-size:18px;
  color:#333;
}

.left-ad-card{
  width:100%;
  background:#fff;
  border-radius:10px;
  overflow:visible;
  box-shadow:0 0 8px rgba(0,0,0,.12);
  margin-bottom:15px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.left-ad-image-box{
  width:calc(100% - 12px);
  aspect-ratio:4/3;
  margin:6px auto 0;
  border-radius:6px;
  overflow:hidden;
  background:#e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
}

.left-ad-image-box img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.left-ad-info{
  width:100%;
  padding:10px 10px 12px;
  text-align:center;
}
.left-ad-info h4{
  font-size:15px;
  font-weight:bold;
  color:#333;
  margin:5px 0;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.left-ad-meta{font-size:12px;color:#777;margin:3px 0;}
.no-left-ad{text-align:center;color:#999;font-size:14px;}

@media (max-width: 768px){
  .left-ad-image-box{width:80%;}
}


/* ❌ تم حذف قاعدة إخفاء الموقع تحت 350px لأنها تمنع "أصغر نقطة" */

/* =========================================================
   ✅ بنرات مواقع خارجية (ImagesPenar)
   - مقاس ثابت 200×100
   - ديسكتوب: عمودي تحت بعض
   - موبايل: أفقي منزلق يمين/يسار تحت البحث وفوق الإعلانات
   - إخفاء كامل إذا لا يوجد بنرات فعّالة
   ========================================================= */

/* ✅ ثوابت البنر (مرة واحدة فقط) */
:root{
  --penar-w: 200px;
  --penar-h: 100px;
  --penar-gap: 10px;
}

/* ✅ إذا لا يوجد بنرات → لا يظهر القسم نهائياً حتى على الديسكتوب */
#extraColmn.penar-empty{ display:none !important; }

/* ✅ عنوان القسم */
#extraColmn h3{
  text-align:center;
  margin-bottom:10px;
  font-size:18px;
  color:#333;
}

/* ✅ اجعل العمود الأيسر مناسب لعرض البنر */
#extraColmn{
  width: calc(var(--penar-w) + 20px) !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

/* ✅ قائمة البنرات (ديسكتوب افتراضي) */
.penar-list{
  display:flex;
  flex-direction:column;
  gap:var(--penar-gap);
  align-items:center;
}

/* ✅ عنصر البنر (ثابت المقاس) */
.penar-item{
  width:var(--penar-w);
  height:var(--penar-h);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 8px rgba(0,0,0,.12);
  display:block;
  flex:0 0 auto;
  margin:0 auto;
}

/* ✅ صورة البنر */
.penar-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ✅ الديسكتوب: تثبيت عرض العمود */
@media (min-width: 900px){
  #extraColmn{
    min-width: calc(var(--penar-w) + 20px) !important;
    max-width: calc(var(--penar-w) + 20px) !important;
  }
}

/* ✅ موبايل: يتحول لسلايدر أفقي */
@media (max-width: 899px){
  #extraColmn{
    width: 100% !important;
    padding: 10px !important;
  }

  .penar-list{
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    gap:var(--penar-gap);
    padding:6px 2px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .penar-item{
    scroll-snap-align:start;
  }

  /* تحسين شكل شريط التمرير (اختياري) */
  .penar-list::-webkit-scrollbar{height:8px;}
  .penar-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;}
}

/* اسم الموقع الخارجي على البنر */
.penar-item{ position:relative; }
.penar-site-name{
  position:absolute;
  top:4px;
  right:4px;
  background:rgba(255,255,255,0.85);
  color:#111;
  font-size:11px;
  font-weight:700;
  padding:3px 6px;
  border-radius:6px;
  white-space:nowrap;
  max-width:90%;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:2;
  pointer-events:none;
  box-shadow:0 0 4px rgba(0,0,0,.15);
}

.imagespenar_h5{
    text-align:center;
    padding: 0 0 5px 0;
}