<style id="natiga-mobile-separated-cards-v81">
/* =========================================================
   Natiga Net - Mobile Separated Cards UI V81
   ضع هذا الكود آخر index.php قبل </body>
   الهدف:
   - ألوان أهدى ومتناسقة مع اللوجو.
   - الكروت منفصلة وليست داخل بلوك ملون واحد.
   - تقليل لون/مساحة الجوانب على الموبايل.
   - تحسين كارت المحافظة في الموبايل والديسكتوب.
   ========================================================= */

:root{
  --nn-blue:#2f67d8;
  --nn-blue-dark:#163b8f;
  --nn-yellow:#f5b400;
  --nn-ink:#0f172a;
  --nn-muted:#64748b;
  --nn-soft:#f8fbff;
  --nn-cream:#fffaf2;
  --nn-border:#e5edf8;
  --nn-card-border:#ead7b7;
  --nn-shadow:0 12px 28px rgba(15,23,42,.06);
}

/* خلفية عامة هادية جداً */
body,
html{
  background:
    radial-gradient(circle at 100% 0%, rgba(47,103,216,.035), transparent 28%),
    radial-gradient(circle at 0% 45%, rgba(245,180,0,.035), transparent 30%),
    linear-gradient(180deg,#fbfdff 0%,#fffdf8 100%)!important;
}

/* شيل إحساس إن الكروت جوا بلوك واحد */
#ww,
#ww > .container,
.rn-ng-results-section#results-list{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}

/* مساحة الكروت */
.rn-ng-results-section#results-list{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  padding:18px 14px 26px!important;
  box-sizing:border-box!important;
}

/* خلي الكروت منفصلة وبينها نفس محترم */
.rn-ng-results-grid#rnGovCardsGrid,
.rn-ng-results-grid{
  width:100%!important;
  max-width:1760px!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(260px,1fr))!important;
  gap:22px!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}

/* كارت المحافظة: منفصل وناعم */
.rn-ng-gov-card.rn-ng-original-card{
  position:relative!important;
  min-height:365px!important;
  border-radius:28px!important;
  overflow:hidden!important;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg,rgba(47,103,216,.22),rgba(245,180,0,.30)) border-box!important;
  border:1px solid transparent!important;
  box-shadow:var(--nn-shadow)!important;
  contain:layout paint!important;
}

/* خط علوي بسيط من ألوان اللوجو */
.rn-ng-gov-card.rn-ng-original-card:before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto 0!important;
  height:4px!important;
  background:linear-gradient(90deg,var(--nn-yellow),var(--nn-blue))!important;
  opacity:.9!important;
  z-index:2!important;
}

/* رابط الكارت */
.rn-ng-original-card .rn-ng-card-link{
  min-height:365px!important;
  height:100%!important;
  padding:24px!important;
  display:flex!important;
  flex-direction:column!important;
  text-decoration:none!important;
  box-sizing:border-box!important;
}

/* أعلى الكارت: اللوكيشن يمين والحالة شمال */
.rn-ng-card-top{
  position:relative!important;
  display:block!important;
  height:54px!important;
  margin-bottom:16px!important;
  direction:rtl!important;
}

.rn-ng-card-top .rn-ng-location-icon{
  position:absolute!important;
  right:0!important;
  left:auto!important;
  top:0!important;
  width:50px!important;
  height:50px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:17px!important;
  background:#fff7ed!important;
  color:#a86624!important;
  box-shadow:inset 0 0 0 1px rgba(245,180,0,.14)!important;
}

.rn-ng-card-top .rn-ng-status-pill{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  top:8px!important;
  min-width:100px!important;
  height:31px!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:900!important;
}

/* حالة متاحة الآن */
.rn-ng-status-available .rn-ng-status-pill,
.rn-ng-status-now .rn-ng-status-pill,
.rn-ng-status-active .rn-ng-status-pill,
.rn-ng-status-pill{
  background:#ecfdf5!important;
  color:#047857!important;
}

/* حالة انتظرونا */
.rn-ng-status-wait .rn-ng-status-pill,
.rn-ng-status-pending .rn-ng-status-pill{
  background:#fff7ed!important;
  color:#c2410c!important;
}

/* العنوان */
.rn-ng-original-card h3,
.rn-ng-original-card .rn-ng-card-title-text{
  min-height:58px!important;
  margin:0 0 10px!important;
  color:var(--nn-ink)!important;
  font-size:24px!important;
  line-height:1.42!important;
  font-weight:900!important;
  text-align:right!important;
}

/* لو عندك العنوان الطويل القديم، خليه يبان أنضف */
.rn-ng-original-card h3 strong,
.rn-ng-original-card .rn-ng-card-title-text strong{
  color:var(--nn-blue)!important;
}

/* الوصف */
.rn-ng-original-card .rn-ng-card-desc{
  min-height:58px!important;
  margin:0 0 12px!important;
  color:var(--nn-muted)!important;
  font-size:14.5px!important;
  line-height:1.75!important;
  font-weight:800!important;
  text-align:right!important;
}

/* كروت الإحصائيات */
.rn-ng-card-stats-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  margin-top:auto!important;
  padding:12px 0 10px!important;
  border-top:1px solid #edf2f7!important;
}

.rn-ng-stat-mini{
  min-height:54px!important;
  border-radius:15px!important;
  background:#f9fbff!important;
  border:1px solid var(--nn-border)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

.rn-ng-students-stat{
  background:linear-gradient(180deg,#eef6ff,#ffffff)!important;
  border-color:#cfe0fa!important;
}

.rn-ng-stat-mini b{
  display:block!important;
  color:var(--nn-ink)!important;
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:900!important;
  direction:ltr!important;
}

.rn-ng-stat-mini small{
  display:block!important;
  margin-top:3px!important;
  color:var(--nn-muted)!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  font-weight:900!important;
}

/* زر فتح الصفحة */
.rn-ng-card-bottom{
  margin-top:0!important;
  padding-top:10px!important;
  border-top:0!important;
}

.rn-ng-open-page{
  width:100%!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  border:1px solid var(--nn-border)!important;
  color:#315a8c!important;
  font-size:14px!important;
  font-weight:900!important;
}

/* بحث المحافظة */
.rn-home-gov-search-v78,
.rn-home-gov-search{
  background:#ffffff!important;
  border:1px solid var(--nn-border)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.045)!important;
}

/* إخفاء الكروت أثناء البحث */
.rn-ng-gov-card.rn-gov-card-hidden{
  display:none!important;
}

/* زر عرض النتيجة في الموبايل والديسكتوب */
.rn-search-submit:before,
.rn-search-submit:after,
.rn-search-submit span:before,
.rn-search-submit span:after{
  content:none!important;
  display:none!important;
}

.rn-search-submit span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:900!important;
  white-space:nowrap!important;
  opacity:1!important;
  visibility:visible!important;
}

.rn-search-submit i{
  color:#fff!important;
  font-size:16px!important;
  opacity:1!important;
  visibility:visible!important;
}

/* تابلت */
@media(max-width:1300px){
  .rn-ng-results-grid#rnGovCardsGrid,
  .rn-ng-results-grid{
    grid-template-columns:repeat(3,minmax(250px,1fr))!important;
    gap:18px!important;
  }
}

/* الموبايل */
@media(max-width:700px){

  body,
  html{
    overflow-x:hidden!important;
    background:#fbfdff!important;
  }

  #ww,
  #ww > .container,
  .rn-ng-results-section#results-list{
    background:transparent!important;
  }

  .rn-ng-results-section#results-list{
    padding:8px 6px 18px!important;
    margin:0!important;
  }

  .rn-ng-results-grid#rnGovCardsGrid,
  .rn-ng-results-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin:0 auto!important;
  }

  .rn-ng-gov-card.rn-ng-original-card{
    width:100%!important;
    min-height:330px!important;
    border-radius:23px!important;
    box-shadow:0 8px 22px rgba(15,23,42,.05)!important;
  }

  .rn-ng-original-card .rn-ng-card-link{
    min-height:330px!important;
    padding:17px!important;
  }

  .rn-ng-card-top{
    height:48px!important;
    margin-bottom:12px!important;
  }

  .rn-ng-card-top .rn-ng-location-icon{
    width:44px!important;
    height:44px!important;
    border-radius:15px!important;
  }

  .rn-ng-card-top .rn-ng-status-pill{
    top:7px!important;
    min-width:88px!important;
    height:29px!important;
    font-size:11px!important;
  }

  .rn-ng-original-card h3,
  .rn-ng-original-card .rn-ng-card-title-text{
    min-height:auto!important;
    font-size:21px!important;
    line-height:1.45!important;
    margin-bottom:9px!important;
  }

  .rn-ng-original-card .rn-ng-card-desc{
    min-height:auto!important;
    font-size:13.4px!important;
    line-height:1.7!important;
    margin-bottom:12px!important;
  }

  .rn-ng-card-stats-row{
    gap:6px!important;
    padding:9px 0 8px!important;
  }

  .rn-ng-stat-mini{
    min-height:50px!important;
    border-radius:13px!important;
  }

  .rn-ng-stat-mini b{
    font-size:12.5px!important;
  }

  .rn-ng-stat-mini small{
    font-size:10px!important;
  }

  .rn-ng-open-page{
    min-height:44px!important;
    border-radius:13px!important;
    font-size:13.5px!important;
  }

  /* فورمة البحث في صفحة المحافظة */
  .rn-search-input-group{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
  }

  .rn-search-input-group input,
  .rn-search-input-group #searchBox{
    order:1!important;
    width:100%!important;
    height:52px!important;
    min-height:52px!important;
    line-height:52px!important;
    padding:0 14px!important;
    border-radius:16px!important;
    border:1px solid #d8e2f0!important;
    background:#fff!important;
    box-shadow:0 10px 24px rgba(15,23,42,.04)!important;
  }

  .rn-search-input-group .input-group-btn{
    order:2!important;
    display:block!important;
    width:100%!important;
  }

  .rn-search-submit{
    width:100%!important;
    min-width:0!important;
    height:52px!important;
    min-height:52px!important;
    border-radius:16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    padding:0 12px!important;
    background:linear-gradient(135deg,#163b8f,#2f67d8)!important;
    color:#fff!important;
  }

  .rn-search-submit span{
    font-size:15px!important;
    display:inline-flex!important;
  }
}

/* موبايلات ضيقة */
@media(max-width:380px){
  .rn-ng-results-section#results-list{
    padding-left:4px!important;
    padding-right:4px!important;
  }

  .rn-ng-original-card .rn-ng-card-link{
    padding:15px!important;
  }
}
</style>
