/* الأساسيات */
.appp-wrap{ position:relative; }
.appp-track{ display:flex; gap:18px; overflow:hidden; scroll-behavior:smooth; }
.appp-track::-webkit-scrollbar{ display:none; height:0; width:0; }
.appp-track{ -ms-overflow-style:none; scrollbar-width:none; }

/* GRID — باستخدام متغيرات للأعمدة */
.appp-wrap.layout-grid .appp-track{ display:grid; gap:18px; }
.appp-wrap.layout-grid .appp-card{ min-width:0; }

/* Desktop / Tablet / Mobile */
@media (min-width:1024px){
  .appp-wrap.layout-grid .appp-track{ grid-template-columns: repeat(var(--cols-desktop,4), 1fr); }
}
@media (min-width:768px) and (max-width:1023px){
  .appp-wrap.layout-grid .appp-track{ grid-template-columns: repeat(var(--cols-tablet,2), 1fr); }
}
@media (max-width:767px){
  .appp-wrap.layout-grid .appp-track{ grid-template-columns: repeat(var(--cols-mobile,1), 1fr); }
}

/* الكارت والصورة */
.appp-card{
  border-radius:16px; background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  overflow:hidden; position:relative; min-width:280px;
  cursor:pointer;
}
.appp-img{
  display:block; width:100%; aspect-ratio:1/1;
  background-size:cover; background-position:center; border-radius:16px;
}

/* الاسم */
.appp-name{ background:#044332; color:#fff; text-align:center; padding:10px 12px; font-weight:800; }
.appp-name.as-top{ background:none; color:#fff; text-align:center; padding:6px 8px; }
.appp-name.as-hover{ position:absolute; left:0; right:0; bottom:0; transform:translateY(100%); transition:transform .25s ease; background:rgba(0,0,0,.55); }
.appp-card:hover .appp-name.as-hover{ transform:translateY(0); }

/* الوصف الأبيض */
.appp-card .appp-desc{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:16px; background:rgba(255,255,255,.96); color:#044332;
  font-size:14px; line-height:1.6; font-weight:600; border-radius:16px;
  opacity:0; transform:scale(.98); transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
/* إظهار الوصف عند فتحه بالضغط */
.appp-card.desc-open .appp-desc{ opacity:1; transform:scale(1); pointer-events:auto; }

/* الأسهم والنقاط (للكاروسيل فقط) */
.appp-nav{ position:absolute; top:45%; transform:translateY(-50%); background:rgba(0,0,0,.35); color:#fff; border:none; width:36px; height:36px; border-radius:50%; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:3; }
.appp-nav.prev{ left:6px; } .appp-nav.next{ right:6px; }
.appp-wrap[data-arrows="1"] .appp-nav{ display:flex; }
@media (max-width:767px){ .appp-nav{ display:none !important; } }

.appp-bullets{ position:absolute; left:0; right:0; bottom:-18px; display:none; gap:6px; justify-content:center; }
.appp-wrap[data-bullets="1"] .appp-bullets{ display:flex; }
.appp-bullets .dot{ width:8px; height:8px; border-radius:50%; background:#cfd8dc; }
.appp-bullets .dot.active{ background:#044332; }
@media (max-width:767px){ .appp-bullets{ display:none !important; } }

/* موبايل تحسينات */
@media (max-width:767px){
  .appp-card{ min-width:0; }
  .appp-card .appp-desc{ font-size:13px; padding:12px; }
}