/* =====================================================
   سیستم طراحی سامانه آموزش مجازی
   ===================================================== */

:root {
  --brand-primary: #4f46e5;
  --brand-primary-dark: #4338ca;
  --brand-primary-light: #eef2ff;
  --brand-accent: #f59e0b;
  --brand-accent-dark: #d97706;
  --brand-success: #10b981;
  --brand-danger: #ef4444;
  --ink-900: #111827;
  --ink-700: #374151;
  --ink-500: #6b7280;
  --ink-300: #d1d5db;
  --surface: #f7f7fb;
  --card-radius: 18px;
  --card-shadow: 0 2px 10px rgba(17, 24, 39, .06);
  --card-shadow-hover: 0 16px 32px rgba(79, 70, 229, .14);
}

* { scroll-behavior: smooth; }

body {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  background-color: var(--surface);
  color: var(--ink-900);
}

h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: -.01em; }

a { text-decoration: none; }

/* ---------- دکمه‌ها ---------- */
.btn { border-radius: 12px; font-weight: 600; padding-top: .55rem; padding-bottom: .55rem; }
.btn-sm { border-radius: 9px; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  border: none;
  box-shadow: 0 6px 16px rgba(79, 70, 229, .28);
}
.btn-primary:hover { background: var(--brand-primary-dark); box-shadow: 0 8px 20px rgba(79, 70, 229, .38); }
.btn-outline-primary { border-color: var(--brand-primary); color: var(--brand-primary); }
.btn-outline-primary:hover { background: var(--brand-primary); border-color: var(--brand-primary); }

/* ---------- ناوبری ---------- */
.navbar.site-nav {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(17,24,39,.06);
}
.site-nav .navbar-brand { font-weight: 800; color: var(--ink-900) !important; font-size: 1.25rem; }
.site-nav .navbar-brand i { color: var(--brand-primary); }
.site-nav .nav-link { color: var(--ink-700) !important; font-weight: 600; padding: .5rem 1rem !important; border-radius: 10px; transition: all .15s; }
.site-nav .nav-link:hover { color: var(--brand-primary) !important; background: var(--brand-primary-light); }
.site-nav .nav-link.active { color: var(--brand-primary) !important; }

/* ---------- هیرو / اسلایدر ---------- */
.hero-slider { border-radius: 24px; overflow: hidden; margin-bottom: 2.5rem; box-shadow: 0 20px 40px rgba(79,70,229,.15); }
.hero-slide {
  min-height: 340px;
  display: flex;
  align-items: center;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}
.hero-slide::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 120%, rgba(255,255,255,.18), transparent 55%),
              radial-gradient(circle at 90% -10%, rgba(255,255,255,.15), transparent 45%);
}
.hero-slide.variant-1 { background: linear-gradient(120deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%); }
.hero-slide.variant-2 { background: linear-gradient(120deg, #0ea5e9 0%, #06b6d4 55%, #14b8a6 100%); }
.hero-slide.variant-3 { background: linear-gradient(120deg, #f59e0b 0%, #f97316 55%, #ef4444 100%); }
.hero-slide .hero-content { position: relative; z-index: 2; color: #fff; max-width: 640px; }
.hero-slide h2 { font-size: 2rem; font-weight: 800; margin-bottom: .75rem; }
.hero-slide p { opacity: .95; font-size: 1.05rem; margin-bottom: 1.5rem; }
.hero-slide .btn-light { border-radius: 12px; font-weight: 700; padding: .65rem 1.6rem; }
.hero-slider .carousel-indicators [data-bs-target] { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55); }
.hero-slider .carousel-indicators .active { background: #fff; }
.hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { width: 5%; opacity: .8; }

/* ---------- نوار دسته‌بندی‌ها ---------- */
.category-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 18px; margin-bottom: 1.5rem; scrollbar-width: thin; }
.category-pill {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #fff; border-radius: 16px; padding: 16px 20px; min-width: 108px;
  box-shadow: var(--card-shadow); border: 1px solid rgba(17,24,39,.04);
  color: var(--ink-700); font-weight: 600; font-size: .82rem; transition: all .18s;
}
.category-pill:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); color: var(--brand-primary); }
.category-pill.active { background: var(--brand-primary); color: #fff; }
.category-pill .cat-icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--brand-primary-light); color: var(--brand-primary); font-size: 1.15rem;
}
.category-pill.active .cat-icon { background: rgba(255,255,255,.2); color: #fff; }

/* ---------- عنوان بخش‌ها ---------- */
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.section-heading h5 { margin: 0; font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.section-heading h5 i { color: var(--brand-accent); }
.section-heading a { font-size: .85rem; font-weight: 600; color: var(--brand-primary); }

/* ---------- کارت دوره ---------- */
.course-card {
  border: none; border-radius: var(--card-radius); overflow: hidden;
  box-shadow: var(--card-shadow); transition: transform .2s ease, box-shadow .2s ease;
  background: #fff;
}
.course-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); }
.course-card .thumb-wrap { position: relative; overflow: hidden; height: 170px; }
.course-card .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.course-card:hover .thumb-wrap img { transform: scale(1.08); }
.course-card .badge-level {
  position: absolute; top: 10px; right: 10px; font-size: .68rem; font-weight: 700;
  padding: 5px 11px; border-radius: 20px; background: rgba(255,255,255,.92); color: var(--brand-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.course-card .card-body { padding: 1.1rem; }
.course-card .card-title { font-size: 1rem; font-weight: 700; line-height: 1.5; }
.course-card .instructor-line { font-size: .8rem; color: var(--ink-500); display: flex; align-items: center; gap: 6px; }
.course-card .rating-line { font-size: .8rem; color: var(--ink-500); display: flex; align-items: center; gap: 5px; }
.course-card .rating-line .fa-star { color: #f59e0b; }
.course-card .price-tag { font-weight: 800; color: var(--brand-primary); font-size: 1.05rem; }
.course-card .btn-outline-primary { padding: .35rem 1rem; font-size: .82rem; }

/* کارت دوره کوچک (پیشنهادی) */
.course-card.mini .thumb-wrap { height: 110px; }
.course-card.mini .card-body { padding: .7rem; }
.course-card.mini .card-title { font-size: .85rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- ویژگی‌ها (آیکون‌های رنگی) ---------- */
.feature-icon {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 14px;
}
.feature-icon.f-indigo { background: #eef2ff; color: #4f46e5; }
.feature-icon.f-amber { background: #fffbeb; color: #d97706; }
.feature-icon.f-teal  { background: #ecfdf5; color: #059669; }
.feature-icon.f-rose  { background: #fef2f2; color: #e11d48; }

/* ---------- فرم جستجو ---------- */
.search-bar { background: #fff; border-radius: 16px; box-shadow: var(--card-shadow); padding: 10px; }
.search-bar .form-control, .search-bar .form-select { border: none; border-radius: 12px; background: var(--surface); }
.search-bar .form-control:focus, .search-bar .form-select:focus { box-shadow: 0 0 0 3px var(--brand-primary-light); }

/* ---------- عمومی ---------- */
.badge-level { font-size: .72rem; }
.progress { height: 10px; border-radius: 20px; }
.progress-bar { background: linear-gradient(90deg, var(--brand-primary), #7c3aed); }
.lesson-list .list-group-item.active-lesson { background: var(--brand-primary-light); border-right: 3px solid var(--brand-primary); }
.lesson-list .list-group-item.done i.fa-circle-check { color: var(--brand-success); }
.sidebar-panel { background: #fff; border-radius: 16px; box-shadow: var(--card-shadow); }
.cert-box { border: 8px double var(--brand-primary); padding: 50px; text-align: center; background: #fff; border-radius: 20px; }
.stat-card { border-radius: 16px; border: none; box-shadow: var(--card-shadow); }
.card { border-radius: 16px; border: none; box-shadow: var(--card-shadow); }
.pagination .page-link { border-radius: 10px; margin: 0 3px; border: none; color: var(--ink-700); font-weight: 600; }
.pagination .page-item.active .page-link { background: var(--brand-primary); }

footer.site-footer { background: #111827; color: #d1d5db; }
footer.site-footer a { color: #e5e7eb; }
footer.site-footer a:hover { color: #fff; }