/* =========================================================
   style.css — مُعدّل (final)
   - يظهر 3 بطاقات على الشاشات الكبيرة، 2 على المتوسطة، 1 على الصغيرة
   - يمنع البطاقات من التكدس عموديًا ويجعل ارتفاع الصفحة ثابتًا
   - يضع أزرار التنقل على طرفي الكاروسيل (مركزة عموديًا)
   - يحافظ على منطق الموقع السابق وإعدادات RTL وpagination
   ========================================================= */

/* ===========================
   Variables / Root
   =========================== */
:root{
  --primary: #f2b705;
  --secondary: #4a4a4a;
  --radius: 10px;
  --font: 'Tajawal', sans-serif;
  --nav-height: 54px;
  --nav-gap: 6px;

  /* three-cards carousel defaults */
  --cards-gap: 12px;    /* gap between cards */
}

/* ===========================
   Base & Helpers
   =========================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font);
  margin:0;
  background:#f9f9f9;
  color:#333;
  direction:rtl;
}
.site-content{padding-top:30px;}
@media (max-width:768px){.site-content{padding-top:20px}}

/* ===========================
   Navbar
   =========================== */
.navbar{
  position:fixed;
  top:0;
  width:100%;
  background:var(--secondary);
  color:#fff;
  z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
}
.navbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:90%;
  margin:auto;
  padding:10px 0;
}
.logo{display:flex;align-items:center;gap:8px}
.logo img{height:45px;width:auto;border-radius:6px}
.logo span{font-weight:600;color:var(--primary);font-size:1.1rem}
.navbar nav{display:flex;align-items:center;gap:10px}
.navbar nav a{
  color:#fff;text-decoration:none;font-weight:500;transition:.3s;padding:8px 10px;font-size:12px
}
.navbar nav a:hover{color:var(--primary)}

/* Hamburger (responsive) */
.hamburger{display:none;flex-direction:column;justify-content:center;cursor:pointer;width:28px;height:22px;gap:5px}
.hamburger span{display:block;height:3px;width:100%;background:#fff;border-radius:2px;transition:.3s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translateY(8px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translateY(-8px)}
#nav-menu{transition:right .4s ease}
@media (max-width:768px){
  .hamburger{display:flex}
  #nav-menu{
    position:fixed;top:0;right:-100%;width:70%;height:100%;
    background:var(--secondary);display:flex;flex-direction:column;justify-content:center;
    align-items:center;gap:18px;z-index:999;overflow-y:auto;padding:24px 14px;
  }
  #nav-menu.active{right:0}
  #nav-menu a{font-size:1.05rem;padding:8px 0;display:block}
  #nav-menu .dropdown{width:100%;text-align:center}
  #nav-menu .dropdown-toggle{justify-content:center}
  #nav-menu .dropdown-menu{
    position:static;
    width:100%;
    margin-top:8px;
    box-shadow:none;
    border-radius:8px;
    display:none;
  }
  #nav-menu .dropdown.open .dropdown-menu,
  #nav-menu .dropdown:focus-within .dropdown-menu{
    display:flex;
  }
}

/* ===========================
   Hero
   =========================== */
.hero{
  height:90vh;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;position:relative;margin-top:60px;
}
.hero .overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.hero-content{position:relative;text-align:center;color:#fff;max-width:700px;padding:20px}
.hero-content h1{font-size:2.5rem;color:var(--primary);margin-bottom:15px}
.hero-content p{font-size:1.1rem;margin-bottom:25px;color:#eee}

/* ===========================
   Buttons
   =========================== */
.btn-primary{
  background:var(--primary);color:#000;padding:12px 32px;border-radius:30px;
  text-decoration:none;font-weight:600;transition:.3s;display:inline-block;
}
.btn-primary:hover{background:#dba704}
.btn-secondary{
  display:inline-block;background:#fff;color:var(--secondary);border:1px solid #ddd;
  padding:8px 14px;border-radius:8px;text-decoration:none;
}

/* ===========================
   Sections / Layout helpers
   =========================== */
.section{padding:80px 0}
.container{width:90%;max-width:1100px;margin:auto}
h2{text-align:center;color:var(--secondary);margin-bottom:40px}
.gray-section{background:#f0f0f0}

/* ===========================
   Generic Grid & Card
   =========================== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:25px}
.card{
  background:#fff;border-radius:var(--radius);box-shadow:0 2px 10px rgba(0,0,0,.08);
  text-align:center;overflow:hidden;transition:.3s;padding-bottom:15px;cursor:pointer;
}
.card:hover{transform:translateY(-5px)}
.card img{width:100%;height:180px;object-fit:cover}
.card h3{color:var(--secondary);margin:15px 0 8px}
.card p{color:#555;font-size:.95rem;margin:0 10px}

/* ===========================
   Logos & Gallery
   =========================== */
.logos{display:flex;justify-content:center;flex-wrap:wrap;gap:25px}
.logo-item{text-align:center}
.logo-item img{width:100px;height:auto;margin-bottom:8px}

.gallery img{width:100%;border-radius:var(--radius);transition:.3s;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.gallery img:hover{transform:scale(1.04)}

/* ===========================
   Footer
   =========================== */
.footer{background:var(--secondary);color:#fff;padding:30px 0;text-align:center;font-size:.95rem;margin-top:60px}

/* ===========================
   Accordion
   =========================== */
.accordion{width:100%;max-width:800px;margin:auto}
.accordion-btn{
  width:100%;text-align:right;background:var(--primary);color:#000;border:none;padding:15px;
  margin-bottom:5px;font-weight:600;cursor:pointer;border-radius:8px;
}
.accordion-content{
  display:none;background:#fff;padding:15px;border-radius:8px;margin-bottom:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}

/* ===========================
   Contact inputs
   =========================== */
.contact-container{max-width:700px;margin:auto;text-align:center}
.contact-info{margin-bottom:30px;text-align:right}
.contact-container input,.contact-container textarea{
  width:100%;padding:12px;margin-bottom:15px;border-radius:6px;border:1px solid #ccc;
}

/* ===========================
   Lang Button
   =========================== */
.lang-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;
  padding:6px 10px;border-radius:50%;width:45px;height:45px;background:#333;color:var(--primary);
  font-weight:600;font-size:11px;transition:all .3s ease;box-shadow:0 2px 6px rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.2);
}
.lang-btn i{font-size:18px;margin-bottom:2px;transition:color .3s ease,text-shadow .3s ease}
.lang-btn:hover{background:#333;color:var(--primary);transform:translateY(-2px)}
[dir="rtl"] .lang-btn{margin-right:12px;margin-left:0}
[dir="ltr"] .lang-btn{margin-left:12px;margin-right:0}

/* ===========================
   Dropdowns
   =========================== */
.dropdown{position:relative}
.dropdown-toggle{
  color:#fff;text-decoration:none;font-weight:500;padding:8px 10px;display:inline-flex;align-items:center;gap:4px;transition:color .3s;
}
.dropdown-toggle:hover{color:var(--primary)}
.dropdown-menu{
  position:absolute;top:100%;right:0;background:#fff;min-width:200px;border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.15);display:none;flex-direction:column;text-align:right;z-index:1000;
}
.dropdown-menu a{color:#333;padding:10px 15px;text-decoration:none;font-weight:500;transition:background .3s,color .3s}
.dropdown-menu a:hover{background:var(--primary);color:#fff}
.dropdown:hover .dropdown-menu{display:flex}
[dir="ltr"] .dropdown-menu{right:auto;left:0;text-align:left}
.dropdown-menu a{color:#000 !important}

/* ===========================
   Program-specific helpers
   =========================== */
.program-main-image{width:100%;max-width:500px;border-radius:15px;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.program-title{color:var(--primary);font-size:1.8rem;margin-bottom:15px}
.program-short{color:#444;font-size:1rem;line-height:1.8;margin-bottom:20px}

@media (max-width:768px){
  .program-intro{
    flex-direction:column;
    gap:16px !important;
  }

  .program-intro-image,
  .program-intro-meta{
    flex:1 1 100% !important;
    width:100%;
  }

  .program-detail [style*="min-width:300px"],
  .program-detail [style*="min-width:260px"]{
    min-width:0 !important;
    width:100%;
  }
}

/* ===========================
   Duration, Certificates, Platform, Colleges, Accreditations
   =========================== */
.section-heading{text-align:center;margin-bottom:30px;font-size:1.4rem;font-weight:700;color:#b28900}

/* ===========================
   Base program card wrapper
   =========================== */
.program-card-wrapper{
  flex:0 0 32%;
  max-width:360px;
  min-width:220px;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
}

/* normal program-card visuals */
.program-card{width:100%;display:flex;flex-direction:column;border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.06);transition:transform .18s ease,box-shadow .18s ease}
.program-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,0,0,.10)}
.card-media{height:170px;overflow:hidden;border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:center;background:#f7f7f7}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.media-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f0f0f0}
.card-body{padding:18px 14px;text-align:right}
.program-title{margin:0 0 10px;color:var(--secondary);font-size:1.05rem;font-weight:700}
.program-short{margin:0;color:#666;font-size:.95rem;line-height:1.6;min-height:66px}
.program-actions{margin-top:12px;text-align:left}
.program-actions .btn-secondary{padding:8px 12px}

/* ===========================
   section-icons-grid
   =========================== */
.section-icons-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items:stretch;
  justify-items:stretch;
  padding: 6px;
}
.section-icon-box{
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  transition: transform .16s ease, box-shadow .16s ease;
  min-height: 120px;
  overflow: hidden;
}
.section-icon-box img{max-width:100%;max-height:100%;object-fit:contain;display:block}
@media (max-width:1100px){ .section-icons-grid{grid-template-columns: repeat(3, 1fr);} }
@media (max-width:800px){ .section-icons-grid{grid-template-columns: repeat(2, 1fr);} .section-icon-box{min-height:110px} }
@media (max-width:480px){ .section-icons-grid{grid-template-columns: repeat(1, 1fr);} .section-icon-box{min-height:90px} }

/* ===========================
   Accreditations carousel
   =========================== */
.accreditations-carousel{
  position:relative;
  height: 230px; /* container height (adjust if needed) */
  display:block;
  margin: 18px auto 8px;
  max-width: 520px;
  min-width: 260px;
}
.accreditations-carousel:focus{outline: none; box-shadow: 0 0 0 3px rgba(242,183,5,0.18);}

.accreditations-carousel .carousel-item{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%) scale(.98);
  width: 100%;
  max-width: 420px;
  text-align:center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, transform .6s ease, visibility .01s linear;
  z-index: 0;
  padding: 18px;
  box-sizing: border-box;
}
.accreditations-carousel .carousel-item img{
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  display:block;
  margin: 0 auto 12px;
}
.accreditations-carousel .carousel-item p{
  margin:0;color:#444;font-weight:600;
}
.accreditations-carousel .carousel-item.active{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
}

/* dots */
.accreditation-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top: 14px;
}
.ac-credit-buttons, .ac-dot{border:0;background:transparent;padding:0;cursor:pointer}
.ac-dot{
  width:10px;height:10px;border-radius:50%;background:#d7d7d7;border:none;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06);
  transition: transform .12s ease, background .15s ease;
}
.ac-dot.active{background:var(--primary); box-shadow: 0 6px 18px rgba(242,183,5,0.12); transform: translateY(-2px);}

/* responsive: reduce carousel height on small screens */
@media (max-width:900px){
  .accreditations-carousel{height:190px; max-width:420px}
  .accreditations-carousel .carousel-item img{max-height:100px}
}
@media (max-width:480px){
  .accreditations-carousel{height:150px; max-width:320px}
  .accreditations-carousel .carousel-item img{max-height:72px}
}

/* ===========================
   Other responsive adjustments
   =========================== */
@media (max-width:1100px){
  .three-cards-row{gap:18px}
  .program-card-wrapper{flex:0 0 48%;max-width:48%}
  @media (max-width:900px){ .program-card{min-height:280px} }
}
@media (max-width:900px){
  .duration-row,.certificates-section .certificates-row,.overview-grid,.platform-row{flex-direction:column-reverse;align-items:center}
  .duration-image,.cert-image,.overview-image,.platform-image{order:1;flex:1 1 100%}
  .duration-text,.cert-text,.overview-text,.platform-text{order:2;flex:1 1 100%}
  .duration-illustration,.cert-illustration,.platform-illustration{max-width:100%}
  .platform-section{flex-direction:column-reverse}
  .platform-section img{max-width:100%;margin-bottom:16px}
  .accredit-card{padding:18px;gap:14px}
  .accredit-icon{width:60px;height:60px;font-size:26px}
}
@media (max-width:700px){
  .three-cards-row{flex-wrap:wrap;gap:16px}
  .program-card-wrapper{flex:0 0 100%;max-width:520px}
  .program-card{min-height:auto}
}
@media (max-width:600px){
  .program-card{min-height:240px}
  .training-swiper .program-card{max-width:520px}
  .training-swiper .swiper-button-prev,.training-swiper .swiper-button-next{width:48px;height:48px}
  .programs-carousel-wrapper{padding:8px 28px}
  .carousel-arrow{width:44px;height:44px;font-size:18px}
}

/* ===========================
   Accessibility / helpers
   =========================== */
.sr-only{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* safety: avoid overflow clipping by parent unless intended */
.container,.site-content,main{ /* leave overflow as default */ }

/* =========================================================
   Swiper-specific styles (new + fixes)
   These rules assume you're using Swiper's CSS (from CDN),
   and add local overrides to match the site design.
   ========================================================= */

/* container spacing: add side padding so nav arrows don't push content */
.three-cards-swiper {
  position: relative;
  overflow: hidden;           /* prevent wrapper overflow increasing page height */
  padding: 10px 56px;         /* space for nav buttons so they sit outside slides */
  margin: 6px 0 28px;
}

/* the Swiper main element */
.three-cards-swiper .swiper {
  width: 100%;
  overflow: visible; /* allow slides to be visible inside container */
  box-sizing: border-box;
}

/* make sure swiper wrapper behaves as flex (override potential resets) */
.three-cards-swiper .swiper .swiper-wrapper {
  display: flex !important;
  align-items: flex-start;
  flex-wrap: nowrap !important; /* important: don't wrap slides into vertical rows */
}

/* slides: ensure deterministic width (3/2/1 behavior) and remove stacking */
.three-cards-swiper .swiper-slide {
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  /* default desktop: 3 visible */
  flex: 0 0 calc((100% - (2 * var(--cards-gap))) / 3) !important;
  max-width: calc((100% - (2 * var(--cards-gap))) / 3) !important;
  /* prevent content inside from causing extra height */
  display:flex;
  align-items:stretch;
  justify-content:center;
}

/* Ensure card fills the slide without overflowing */
.three-cards-swiper .swiper-slide > .program-card-wrapper { width:100%; }

/* Responsive breakpoints to mirror Swiper JS breakpoints */
@media (max-width:1000px) {
  .three-cards-swiper .swiper-slide {
    flex: 0 0 calc((100% - var(--cards-gap)) / 2) !important;
    max-width: calc((100% - var(--cards-gap)) / 2) !important;
  }
}
@media (max-width:700px) {
  .three-cards-swiper { padding: 6px 20px; } /* less side padding on small screens */
  .three-cards-swiper .swiper-slide {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* slide inner card sizing */
.three-cards-swiper .program-card {
  width: 100%;
  max-width: 420px;
}

/* ===========================
   Navigation arrows (positioned at sides, vertically centered)
   =========================== */
.three-cards-swiper .swiper-button-prev,
.three-cards-swiper .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: #fff;
  color: var(--secondary);
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  cursor: pointer;
}

/* left / right positions (RTL-aware) */
[dir="rtl"] .three-cards-swiper .swiper-button-prev { right: 16px; } /* previous on right in RTL */
[dir="rtl"] .three-cards-swiper .swiper-button-next { left: 16px;  }  /* next on left in RTL */
[dir="ltr"] .three-cards-swiper .swiper-button-prev { left: 16px; }
[dir="ltr"] .three-cards-swiper .swiper-button-next { right: 16px; }

/* smaller nav on mobile */
@media (max-width:700px){
  .three-cards-swiper .swiper-button-prev,
  .three-cards-swiper .swiper-button-next {
    width:40px;height:40px;font-size:20px;
  }
}

/* hide default ::after content if necessary and keep icon visible (we use button text) */
.three-cards-swiper .swiper-button-prev::after,
.three-cards-swiper .swiper-button-next::after {
  display: none;
}

/* ===========================
   Pagination bullets (kept & positioned)
   =========================== */
.three-cards-swiper .swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  gap: 8px;
}
.three-cards-swiper .swiper-pagination-bullet {
  width:10px; height:10px; background:#e2e2e2; opacity:1; border-radius:50%;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06); transition: transform .12s ease, background .15s ease;
}
.three-cards-swiper .swiper-pagination-bullet-active {
  background:var(--primary);
  transform: translateY(-2px);
  box-shadow:0 6px 18px rgba(242,183,5,0.12);
}

/* ensure images and card content do not overflow slide */
.three-cards-swiper .swiper-slide img,
.three-cards-swiper .swiper-slide .program-card { max-width: 100%; min-width: 0; }

/* safety: prevent any global rule that forces slides to display:block 100% wide */
.three-cards-swiper .swiper-slide > * { width: 100%; box-sizing: border-box; }

/* =========================================================
   End of modified Swiper + layout rules.
   ========================================================= */

/* ===========================
   Sections carousel styles (محسّن)
   - عرض قسم واحد في كل مرة باستخدام opacity فقط
   - pointer-events لإيقاف التفاعل مع الشرائح غير النشطة
   - z-index لترتيب الشرائح بدل visibility
   - container سيحصل min-height ديناميكياً عبر JS
   =========================== */

.sections-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  /* ملاحظة: min-height سيُضبط ديناميكيًا بواسطة JS بعد قياس الشرائح. */
}

/* كل مقال (قسم) يصبح slide (مكدّس فوق بعضه) */
.sections-carousel .section-slide {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none; /* لا يمكن التفاعل مع الشرائح المخفية */
  transform: translateZ(0);
  transition: opacity 420ms ease;
  z-index: 1;
  /* لا نستخدم visibility مع تأخير لتفادي "شاشة فارغة" أثناء التحويل */
}

/* active: يظهر بشكل كامل ويمكّن التفاعل */
.sections-carousel .section-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* لو المستخدم يطلب تقليل الحركة نجعل التبديل فوري */
@media (prefers-reduced-motion: reduce) {
  .sections-carousel .section-slide,
  .sections-carousel .section-slide.active {
    transition: none !important;
  }
}

/* تأكد أن محتوى البطاقات داخل كل slide لا يكسر العرض */
.sections-carousel .section-slide .section-icons-grid {
  /* تبقى كما هي */
}

/* إضافة صغيرة لضمان عدم تداخل الظل مع العناصر المجاورة */
.sections-carousel .section-slide {
  padding-bottom: 0; /* في حال لديك padding خارجي */
}

/* ===== Accreditations cards ===== */
.accredits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  align-items: stretch;
  margin-top: 10px;
}
.accredit-card {
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  transition: transform .22s ease, box-shadow .22s ease;
  border: 1px solid rgba(74,74,74,0.04);
}
.accredit-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.09); }
.accredit-icon {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(242,183,5,0.12), rgba(242,183,5,0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 72px;
  color: var(--primary);
  font-size: 30px;
  box-shadow: 0 6px 14px rgba(242,183,5,0.08);
}
.accredit-body h3 { margin: 0 0 8px; color: var(--secondary); font-size: 1.05rem; }
.accredit-body p { margin: 0; color: #444; line-height: 1.7; font-size: 0.98rem; }
.logos { margin-top: 6px; display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ===========================
   Student Dashboard Layout
   =========================== */

.student-layout{
  display:flex;
  min-height:calc(100vh - 80px);
  padding-top:80px;
}

/* Sidebar */
.student-sidebar{
  width:260px;
  background:#fff;
  border-left:1px solid #eee;
  padding:25px 15px;
  position:sticky;
  top:0;
  height:calc(100vh - 80px);
}

.sidebar-title{
  font-size:1.2rem;
  margin-bottom:25px;
  color:var(--secondary);
  text-align:center;
}

.sidebar-link{
  display:block;
  padding:12px 15px;
  margin-bottom:8px;
  border-radius:8px;
  text-decoration:none;
  color:#444;
  font-weight:500;
  transition:.2s;
}

.sidebar-link:hover,
.sidebar-link.active{
  background:var(--primary);
  color:#000;
}

.sidebar-link-button{
  width:100%;
  border:none;
  text-align:right;
  font:inherit;
  background:transparent;
  cursor:pointer;
}

.sidebar-logout:hover{
  background:#ef4444;
  color:#fff;
}

/* Content */
.student-content{
  flex:1;
  padding:40px;
  background:#f9f9f9;
  min-width:0;
}

/* Responsive */
@media (max-width:900px){
  .student-layout{
    flex-direction:column;
  }
  .student-sidebar{
    width:100%;
    height:auto;
    position:relative;
    border-left:none;
    border-bottom:1px solid #eee;
  }
  .student-content{
    padding:20px;
  }
}

@media (max-width:600px){
  .student-content{
    padding:14px;
  }
  .student-content .card{
    padding:16px !important;
  }
}

/* ===========================
   Student Dashboard (new)
   =========================== */
.student-dashboard{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.student-dashboard-hero{
  background:#fff;
  border:1px solid #ececec;
  border-radius:14px;
  padding:22px;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}

.student-dashboard-empty{
  border-right:4px solid var(--primary);
}

.student-dashboard-title{
  margin:0 0 8px;
  color:var(--secondary);
  font-size:1.5rem;
}

.student-dashboard-subtitle{
  margin:0;
  color:#666;
  line-height:1.8;
}

.student-dashboard-username{
  margin:0 0 8px;
  color:#4f4f4f;
  font-weight:600;
}

.student-dashboard-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.student-dashboard-actions-grid{
  margin-top:10px;
}

.student-dashboard-btn{
  text-decoration:none;
  border-radius:10px;
  padding:10px 16px;
  font-weight:600;
  border:1px solid transparent;
  transition:.2s;
}

.student-dashboard-btn-primary{
  background:var(--primary);
  color:#000;
}

.student-dashboard-btn-primary:hover{
  background:#dba704;
}

.student-dashboard-btn-light{
  background:#fff;
  color:#333;
  border-color:#ddd;
}

.student-dashboard-btn-light:hover{
  border-color:#c7c7c7;
  background:#fdfdfd;
}

.student-dashboard-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.student-dashboard-kpi-card{
  background:#fff;
  border:1px solid #ececec;
  border-radius:12px;
  padding:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.03);
}

.student-dashboard-kpi-label{
  display:block;
  color:#666;
  margin-bottom:8px;
  font-size:.95rem;
}

.student-dashboard-kpi-value{
  color:#222;
  font-size:1.4rem;
  line-height:1;
}

.student-dashboard-kpi-value-accepted{
  color:#1f8f4d;
}

.student-dashboard-kpi-value-under-review{
  color:#b87905;
}

.student-dashboard-panel{
  background:#fff;
  border:1px solid #ececec;
  border-radius:12px;
  padding:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.03);
}

.student-dashboard-panel h3{
  margin:0 0 12px;
  color:var(--secondary);
}

.student-dashboard-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.student-dashboard-link{
  color:#1f6fb2;
  text-decoration:none;
  font-weight:600;
}

.student-dashboard-link:hover{
  text-decoration:underline;
}

.student-dashboard-table-wrap{
  overflow-x:auto;
}

.student-dashboard-table{
  width:100%;
  border-collapse:collapse;
}

.student-dashboard-table th,
.student-dashboard-table td{
  text-align:right;
  padding:10px 8px;
  border-bottom:1px solid #f0f0f0;
}

.student-dashboard-table th{
  color:#666;
  font-weight:600;
}

.student-dashboard-status{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
}

.student-dashboard-status.accepted{
  background:#e8f8ef;
  color:#1f8f4d;
}

.student-dashboard-status.under_review{
  background:#fff5df;
  color:#b87905;
}

.student-dashboard-status.rejected{
  background:#ffe9e9;
  color:#cb2b2b;
}

.student-dashboard-steps h3{
  margin:0 0 10px;
  color:var(--secondary);
}

.student-dashboard-step-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.student-dashboard-step-card{
  background:#fff;
  border:1px solid #ececec;
  border-radius:10px;
  padding:14px;
}

.student-dashboard-step-card p{
  margin:6px 0 0;
}

.student-dashboard-step-number{
  display:inline-flex;
  width:26px;
  height:26px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--primary);
  color:#000;
  font-weight:700;
}

@media (max-width:1100px){
  .student-dashboard-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){
  .student-content.student-dashboard{
    padding:20px;
  }

  .student-dashboard-kpis,
  .student-dashboard-step-grid{
    grid-template-columns:1fr;
  }

  .student-dashboard-actions{
    flex-direction:column;
  }

  .student-dashboard-btn{
    width:100%;
    text-align:center;
  }
}

/* ===========================
   Footer social icons (improved)
   =========================== */
.footer-socials{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  margin-top:12px; /* بدل style-inline */
}

/* البوتون نفسه */
.footer-socials .social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:transparent;
  color:#fff;
  text-decoration:none;
  font-size:20px;              /* أيقونة بحجم جيد */
  transition: transform .16s ease, box-shadow .16s ease, background .18s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}

/* individual brand colors (subtle filled circle on hover / focus) */
.footer-socials .social-link.whatsapp-link{
  /* optional subtle WhatsApp brand tint when hovered; default white icon on dark bg */
}
.footer-socials .social-link.facebook-link{
  /* optional Facebook tint on hover */
}

/* hover effect (scale + colored background) */
.footer-socials .social-link:hover,
.footer-socials .social-link:focus{
  transform: translateY(-3px) scale(1.05);
  outline: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* specific hover backgrounds so buttons are recognizable */
.footer-socials .whatsapp-link:hover,
.footer-socials .whatsapp-link:focus{
  background: linear-gradient(180deg, #25D366 0%, #1DA851 100%); /* WhatsApp green */
  color: #fff;
  border-color: rgba(0,0,0,0.08);
}

.footer-socials .facebook-link:hover,
.footer-socials .facebook-link:focus{
  background: linear-gradient(180deg, #1877F2 0%, #165EE3 100%); /* Facebook blue */
  color: #fff;
  border-color: rgba(0,0,0,0.08);
}

/* larger icon variant for small screens if you want */
@media (max-width:480px){
  .footer-socials .social-link{
    width:44px;
    height:44px;
    font-size:18px;
  }
}

/* keyboard focus visible (accessibility) */
.footer-socials .social-link:focus{
  box-shadow: 0 0 0 4px rgba(242,183,5,0.14);
}

/* ===========================
   Contact Page
   =========================== */
.contact-page{
  max-width:860px;
}

.contact-page-card{
  background:#fff;
  border:1px solid #ececec;
  border-radius:14px;
  padding:28px;
  box-shadow:0 10px 26px rgba(0,0,0,.05);
}

.contact-page-title{
  margin:0 0 8px;
  text-align:center;
  color:var(--secondary);
}

.contact-page-subtitle{
  margin:0 0 22px;
  text-align:center;
  color:#666;
}

.contact-page-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.contact-page-block{
  background:#fafafa;
  border:1px solid #efefef;
  border-radius:12px;
  padding:16px;
}

.contact-page-block h3{
  margin:0 0 10px;
  color:#333;
  font-size:1.05rem;
}

.contact-page-block p{
  margin:0 0 6px;
  color:#555;
}

.contact-page-action{
  margin-top:18px;
  text-align:center;
}

@media (max-width:768px){
  .contact-page-card{
    padding:20px;
  }

  .contact-page-grid{
    grid-template-columns:1fr;
  }
}

/* ===========================
   Student Pages Responsive Helpers
   =========================== */
.student-record-item{
  border:1px solid #e5e5e5;
  border-radius:8px;
  margin-bottom:20px;
  overflow:hidden;
}

.student-record-head{
  background:#f8f8f8;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.student-record-body{
  padding:16px;
}

.student-record-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.student-schedule-item{
  border:1px solid #e5e5e5;
  border-radius:8px;
  margin-bottom:12px;
  overflow:hidden;
}

.student-schedule-head{
  background:#f8f8f8;
  padding:10px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.student-schedule-body{
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

@media (max-width:768px){
  .student-record-head,
  .student-schedule-head,
  .student-schedule-body{
    flex-direction:column;
    align-items:flex-start;
  }

  .student-record-meta-grid{
    grid-template-columns:1fr;
  }
}

/* optional: spacing under the copyright line */
.footer .container p { margin-bottom:8px; }