/* =========================================================
   PRODUCTS PAGINATION – SAFE (Bootstrap + Tailwind)
========================================================= */

.pagination-modern{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 16px 12px 26px;
}

.pagination-modern nav{
  width: 100%;
  max-width: 520px;
}

/* ============ مهم: إصلاح حالة Bootstrap (ul/li) ============ */
.pagination-modern nav ul,
.pagination-modern nav ol{
  list-style: none !important;      /* يشيل النقاط السوداء */
  margin: 0 !important;
  padding: 0 !important;
}

.pagination-modern nav li{
  list-style: none !important;      /* تأكيد */
}

/* bootstrap: <ul class="pagination"> */
.pagination-modern nav .pagination{
  display: flex !important;
  flex-direction: row !important;   /* يمنع العمودي */
  flex-wrap: wrap !important;       /* إذا ضاقت الشاشة يلف سطر ثاني بشكل نظيف */
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}

/* bootstrap buttons */
.pagination-modern nav .page-link,
.pagination-modern nav .page-item > span,
.pagination-modern nav .page-item > a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 38px !important;
  min-width: 38px !important;
  padding: 0 14px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.10) !important;

  background: #ffffff !important;
  color: #0b1c2d !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  text-decoration: none !important;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.pagination-modern nav .page-link:hover,
.pagination-modern nav .page-item > a:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

/* active (bootstrap) */
.pagination-modern nav .page-item.active .page-link,
.pagination-modern nav .page-item.active > span{
  background: #0b2a45 !important;
  color: #fff !important;
  border-color: rgba(11,42,69,.35) !important;
  box-shadow: 0 10px 26px rgba(11,42,69,.25) !important;
}

/* disabled (bootstrap) */
.pagination-modern nav .page-item.disabled .page-link,
.pagination-modern nav .page-item.disabled > span{
  opacity: .45 !important;
  pointer-events: none !important;
}

/* ============ إصلاح حالة Tailwind (div/span/a) ============ */
/* هذا عشان لو Laravel عندك يطلع Tailwind markup */
.pagination-modern nav > div{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (max-width: 768px){
  .pagination-modern nav > div > div:first-child{
    display: none !important;
  }
}

.pagination-modern nav > div > div:last-child{
  display: flex !important;
  justify-content: center !important;
}

/* container that holds tailwind buttons */
.pagination-modern nav > div > div:last-child > div{
  display: flex !important;
  flex-direction: row !important;   /* يمنع العمودي */
  flex-wrap: wrap !important;       /* لو زادت الصفحات يلف سطر ثاني بشكل مرتب */
  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.10) !important;
}

.pagination-modern a,
.pagination-modern span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 38px !important;
  min-width: 38px !important;
  padding: 0 14px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.10) !important;

  background: #ffffff !important;
  color: #0b1c2d !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  text-decoration: none !important;
  user-select: none;
}
.pagination-modern span[aria-current="page"],
.pagination-modern .active span{
  background: #0b2a45 !important;
  color: #fff !important;
  border-color: rgba(11,42,69,.35) !important;
  box-shadow: 0 10px 26px rgba(11,42,69,.25) !important;
}

.pagination-modern span[aria-disabled="true"],
.pagination-modern .disabled span{
  opacity: .45 !important;
  pointer-events: none !important;
}

/* Mobile sizing */
@media (max-width: 480px){
  .pagination-modern{
    padding: 12px 10px 20px;
  }

  .pagination-modern nav{
    max-width: 360px;
  }

  .pagination-modern a,
  .pagination-modern span,
  .pagination-modern nav .page-link,
  .pagination-modern nav .page-item > span,
  .pagination-modern nav .page-item > a{
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

/* RTL */
html[dir="rtl"] .pagination-modern nav{
  direction: rtl;
}

/* ==============================
   MOBILE ARROWS PAGINATION
   (force single row)
============================== */

.pagination-mobile{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 14px 12px 22px;
}

.pagination-mobile__wrap{
  list-style: none !important;
  margin: 0 !important;
  padding: 10px 12px !important;

  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;       /* ✅ صف واحد دائمًا */
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.10) !important;
}

.pagination-mobile__item{
  display: inline-flex !important;    /* ✅ يمنع نزول العناصر */
  align-items: center !important;
}

.pagination-mobile__btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 38px !important;
  min-width: 38px !important;
  padding: 0 14px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: #fff !important;
  color: #0b1c2d !important;

  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.pagination-mobile__status{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: #fff !important;

  font-weight: 800 !important;
  color: #0b1c2d !important;
}

.pagination-mobile__sep{
  padding: 0 8px !important;
  opacity: .6 !important;
}

.pagination-mobileitem.is-disabled .pagination-mobilebtn{
  opacity: .45 !important;
  pointer-events: none !important;
}

/* Mobile sizing */
@media (max-width: 480px){
  .pagination-mobile__wrap{
    gap: 8px !important;
    padding: 10px 10px !important;
  }
  .pagination-mobile__btn,
  .pagination-mobile__status{
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }
}