/* =========================
   PRO COURSES UI (No HTML change)
   ========================= */

/* خلفية القسم + عنوان */
.courses-h {
  padding: 35px 0;
  background: radial-gradient(circle at 20% 10%, rgba(37,99,235,.08), transparent 45%),
              radial-gradient(circle at 80% 30%, rgba(14,165,233,.08), transparent 50%),
              #f8fafc;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.courses-h .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.courses-h .title-sec {
  text-align: center;
  margin-bottom: 30px;
}
.courses-h .title-sec h3 {
  font-weight: 900;
  letter-spacing: .2px;
  color: #0f172a;
  font-size: 2.2rem;
  margin-bottom: 10px;
}
.courses-h .title-sec p {
  color: #64748b;
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

/* =========================
   التبويبات (Chips)
   ========================= */
.courses-h .nav.nav-pills {
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 22px;
  display: flex;
  list-style: none;
  padding: 0;
}
.courses-h .nav.nav-pills .nav-link {
  border-radius: 999px;
  padding: 10px 18px;
  background: rgba(255,255,255,.7);
  color: #0f172a;
  border: 1px solid rgba(226,232,240,.9);
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
}
.courses-h .nav.nav-pills .nav-link:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: #c7d2fe;
  box-shadow: 0 16px 34px rgba(2,6,23,.10);
}
.courses-h .nav.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #00B6F1, #0ea5e9);
border: 1px solid #0284c7; /* أزرق سماوي أغمق */

  color: #fff;
  box-shadow: 0 18px 40px rgba(37,99,235,.25);
}

/* =========================
   Owl: مساحة أفضل
   ========================= */
.courses-h .courses-slider {
  position: relative;
}
.courses-h .courses-slider .item {
  padding: 12px 12px 22px;
}
.courses-h .owl-stage { 
  padding-bottom: 10px;
  display: flex;
}
.courses-h .owl-carousel .owl-item {
  display: flex;
  justify-content: center;
}

/* =========================
   الكرت (Card)
   ========================= */
.courses-h .cour-block {
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 18px 44px rgba(2,6,23,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  backdrop-filter: blur(8px);
  max-width: 320px;
  margin: 0 auto;
}
.courses-h .cour-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 65px rgba(2,6,23,.14);
  border-color: #c7d2fe;
  background: linear-gradient(135deg, #e0f2fe, #ede9fe);
}

/* =========================
   صورة الكرت + شارات فوقها
   ========================= */
.courses-h .cour-block .img-block {
  position: relative;
  padding: 14px 14px 0;
}
.courses-h .cour-block .img-block .img {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  position: relative;
  background: linear-gradient(135deg, #e0f2fe, #ede9fe);
}
.courses-h .cour-block .img-block img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  transition: transform .55s ease, filter .55s ease;
  filter: saturate(1.02) contrast(1.02);
}
.courses-h .cour-block:hover .img-block img {
  transform: scale(1.06);
}

/* شارة مغلق */
.courses-h .cour-block .img-block .status {
  position: absolute;
  top: 22px;
  right: 22px;
  background: rgba(239,68,68,.95);
  color: #fff;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  box-shadow: 0 16px 34px rgba(239,68,68,.28);
  z-index: 5;
}

/* =========================
   Overlay: نجعله رايق + price pill
   ========================= */
.courses-h .cour-block .img-block .overlay {
  position: absolute;
  inset: 14px 14px 0 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(2,6,23,.10), rgba(2,6,23,.62));
  opacity: 0;
  transition: opacity .22s ease;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 12px;
  backdrop-filter: blur(6px);
}
.courses-h .cour-block:hover .img-block .overlay { 
  opacity: 1; 
}

.courses-h .cour-block .img-block .overlay .price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  padding: 8px 12px;
  border-radius: 14px;
  color: #fff;
}
.courses-h .cour-block .img-block .overlay .price .num {
  font-weight: 900;
  font-size: 18px;
  color: #fff;
}
.courses-h .cour-block .img-block .overlay .rate i {
  color: #fbbf24;
  text-shadow: 0 8px 22px rgba(0,0,0,.35);
}

/* زر تشغيل الفيديو */
.courses-h .cour-block .play_icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, #ff7a18, #f97316);
  color: #fff;
  box-shadow: 0 18px 40px rgba(249,115,22,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, filter .2s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 20px;
  cursor: pointer;
}
.courses-h .cour-block .play_icon:hover {
  transform: translate(-50%, -50%) scale(1.07);
  filter: brightness(1.03);
}

/* زر الإغلاق داخل overlay (إذا موجود) */
.courses-h .cour-block .close_video {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* =========================
   تفاصيل الكرت
   ========================= */
.courses-h .cour-block .details {
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.courses-h .cour-block .details .name {
  font-weight: 950;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.55;
  display: block;
  min-height: 50px;
  text-decoration: none;
}
.courses-h .cour-block .details ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.courses-h .cour-block .details ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
}
.courses-h .cour-block .details ul li i {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 14px;
}

/* =========================
   زر (عرض/دخول/سلة)
   ========================= */
.courses-h .cour-block .add-cart-h {
  margin-top: auto;
  padding: 12px 16px 16px;
}
.courses-h .cour-block .add-cart-h .btn-cart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 950;
  border: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #ff9f5a, #fb923c);
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
}
.courses-h .cour-block .add-cart-h .btn-cart:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ff8a3d, #f97316);
  border-color: #c7d2fe;
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
  color: #fff;
}

/* زر اضافة للسلة */
.courses-h .cour-block .add-cart-h .btn-cart.add_to_cart {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 18px 44px rgba(37,99,235,.25);
}
.courses-h .cour-block .add-cart-h .btn-cart.add_to_cart:hover {
  filter: brightness(1.03);
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

/* =========================
   نقل السعر + النجوم تحت عنوان الدورة
   ========================= */

/* 1) اخفاء السعر والنجوم داخل الـ overlay (حتى ما تتكرر) */
.courses-h .cour-block .img-block .overlay .price,
.courses-h .cour-block .img-block .overlay .rate {
  display: none !important;
}

/* 3) ترتيب السعر + النجوم تحت العنوان مباشرة */
.courses-h .cour-block .details {
  position: relative;
}

/* نخلي العنوان أعلى */
.courses-h .cour-block .details .name {
  margin-bottom: 6px;
}

/* سطر السعر + التقييم */
.courses-h .cour-block .details .price-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: -2px;
  margin-bottom: 12px;
}

/* 4) ستايل السعر */
.courses-h .cour-block .details .price {
  font-weight: 950;
  font-size: 14px;
  color: #000;
  background: rgba(249,115,22,.10);
  border: 1px solid rgba(249,115,22,.18);
  padding: 6px 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* رقم السعر لو موجود .num */
.courses-h .cour-block .details .price .num {
  font-weight: 950;
  font-size: 18px;
  margin-left: 4px;
}

/* 5) ستايل النجوم */
.courses-h .cour-block .details .rate {
  display: flex;
  gap: 3px;
}
.courses-h .cour-block .details .rate i {
  color: #fbbf24;
  font-size: 14px;
}

/* =========================
   أوامر Owl Carousel
   ========================= */
.owl-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
.owl-nav button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: white !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(37,99,235,.25);
  transition: all 0.3s ease;
}
.owl-nav button:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(37,99,235,.35);
}
.owl-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.owl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cbd5e1 !important;
  transition: all 0.3s ease;
}
.owl-dot.active {
  background: #2563eb !important;
  transform: scale(1.2);
}

/* =========================
   موبايل
   ========================= */
@media (max-width: 768px) {
  .courses-h .cour-block .img-block img { 
    height: 170px; 
  }
  .courses-h .cour-block .details .name { 
    min-height: auto; 
    font-size: 15px;
  }
  .courses-h .cour-block .img-block { 
    padding: 12px 12px 0; 
  }
  .courses-h .cour-block .img-block .overlay { 
    inset: 12px 12px 0 12px; 
  }
  .courses-h .title-sec h3 {
    font-size: 1.8rem;
  }
  .courses-h .nav.nav-pills .nav-link {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
  .courses-h .cour-block .details .price-rate {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .owl-nav {
    margin-top: 20px;
  }
  .owl-nav button {
    width: 44px;
    height: 44px;
    font-size: 20px !important;
  }
}
.courses-h .cour-block .details .price-rate{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  margin-top:-16px;
  margin-bottom:2px;
}


@media (max-width: 480px) {
  .courses-h {
    padding: 25px 0;
  }
  .courses-h .container {
    padding: 0 15px;
  }
  .courses-h .title-sec h3 {
    font-size: 1.6rem;
  }
  .courses-h .nav.nav-pills {
    gap: 8px;
  }
  .courses-h .nav.nav-pills .nav-link {
    padding: 8px 14px;
    font-size: 0.85rem;
  }
}

/* =========================================
   COURSES-H CTA COLORS (Put at VERY END)
   - add_to_cart: red/orange (محمر)
   - enter/complete: orange
   ========================================= */

:root{
  /* add to cart (أحمر محمّر) */
  --cartRed1:#FF7A6E;
  --cartRed2:#F04438;
  --cartRed3:#C81E1E;
  --cartRedGlow:rgba(240,68,56,.45);

  /* enter/complete (برتقالي) */
  --enter1:#FFD08A;
  --enter2:#FF8A00;
  --enter3:#E46F00;
  --enterGlow:rgba(255,138,0,.45);
}

/* 1) أساس الزر فقط (بدون لون عام قوي) */
.courses-h .cour-block .add-cart-h .btn-cart{
  width: 100%;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 950;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff !important;
  border:none !important;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* 2) زر أضف للسلة = أحمر محمّر */
.courses-h .cour-block .add-cart-h .btn-cart.add_to_cart{
  background: linear-gradient(180deg, var(--cartRed1) 0%, var(--cartRed2) 55%, var(--cartRed3) 100%) !important;
  box-shadow: 0 16px 34px var(--cartRedGlow), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.courses-h .cour-block .add-cart-h .btn-cart.add_to_cart:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 22px 46px rgba(200,30,30,.55) !important;
}

/* 3) زر الدخول/إكمال الدورة (بدون كلاس خاص) = برتقالي
   - عندك في الكود: <a ... class="btn-cart"> ... enter_course ...</a>
*/
.courses-h .cour-block .add-cart-h .btn-cart:not(.add_to_cart){
  background: linear-gradient(180deg, var(--enter1) 0%, var(--enter2) 55%, var(--enter3) 100%) !important;
  box-shadow: 0 16px 34px var(--enterGlow), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.courses-h .cour-block .add-cart-h .btn-cart:not(.add_to_cart):hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 22px 46px rgba(255,138,0,.55) !important;
}

/* 4) أيقونات ونص */
.courses-h .cour-block .add-cart-h .btn-cart i,
.courses-h .cour-block .add-cart-h .btn-cart span{
  color:#fff !important;
}





#courses {
    scroll-margin-top: 110px;
}

.home-course-target {
    border-radius: 24px;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.home-course-target.course-nav-highlight {
    transform: translateY(-5px);
    box-shadow:
        0 0 0 4px rgba(14, 165, 233, .22),
        0 22px 50px rgba(14, 165, 233, .22);
}

.home-course-target.course-nav-highlight .cour-block {
    border-color: #0ea5e9;
}