/* assets/courses.css — صفحه‌ی «دوره‌ها» (includes/class-courses-renderer.php)
   متغیرهایِ رنگ/فونت از assets/hero.css می‌آد چون این المان‌ها هم زیرِ همون .ilh-hero هستن.
   عمداً بدونِ صحنه‌ی سه‌بعدی — این صفحه هم مثلِ samples/survey باید سبک بمونه. */

.ilh-courses-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem;
  margin-top: 1.8rem;
}
@media (max-width: 480px) {
  .ilh-courses-grid { grid-template-columns: 1fr; }
}

/* کارتِ گوشه‌گرد: عکس + اسم + چسبیده بهش دکمه‌ی توضیحات — طبقِ خواستِ سینا */
.ilh-course-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .7rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--ilh-radius);
  padding: 1rem;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease, border-color .2s ease;
}
.ilh-course-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 193, 7, .4);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
}

.ilh-course-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(124, 63, 174, .4), rgba(26, 16, 48, .6));
  border: 1px solid rgba(255, 193, 7, .25);
}
/* object-fit: contain — سینا گفت کراپ نشه؛ عکس‌های محصول اغلب عمودی/غیرمربع‌ان، پس به‌جایِ
   برش (cover)، کوچیک می‌شه تا کاملش تو قاب جا بشه (letterbox با پس‌زمینه‌ی گرادیانِ خودِ قاب). */
.ilh-course-image img { width: 100%; height: 100%; object-fit: contain; display: block; }

.ilh-course-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ilh-fg);
  margin: 0;
  text-align: center;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* قیمت — بینِ اسمِ دوره و دکمه‌ی توضیحات؛ حالا با کادرِ دورش و فونتِ بزرگ‌تر که چشم‌گیرتر باشه */
.ilh-course-price {
  margin: 0;
  text-align: center;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .55rem .9rem;
  border: 1.5px solid rgba(255, 193, 7, .4);
  border-radius: 12px;
  background: rgba(255, 193, 7, .06);
}
/* font-variant-numeric: tabular-nums — رقم‌ها عرضِ یکسان می‌گیرن، پس وقتی قیمت (یا هر عددِ
   دیگه‌ای که ممکنه عوض بشه) تغییر کنه، کادرِ دورش نمی‌لرزه/جابه‌جا نمی‌شه. */
.ilh-price-old { color: var(--ilh-muted); text-decoration: line-through; font-size: .75em; font-variant-numeric: tabular-nums; }
.ilh-price-now { color: var(--ilh-gold); font-weight: 800; font-variant-numeric: tabular-nums; }

/* «چسبیده به مربع» — بدونِ فاصله‌ی اضافه، مستقیم زیرِ قیمت */
.ilh-course-details-btn { margin-top: 0; }

/* صفحه‌ی جزئیات: عکسِ کوچیک‌ترِ وسط */
.ilh-course-detail-image {
  width: 140px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 1.1rem;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(124, 63, 174, .4), rgba(26, 16, 48, .6));
  border: 1px solid rgba(255, 193, 7, .25);
}
.ilh-course-detail-image img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* قیمتِ صفحه‌ی جزئیات — همون کادرِ .ilh-course-price ولی وسط‌چین به‌جایِ تمام‌عرض
   (تویِ گرید، پدرش خودش flex-columnه؛ اینجا زیرِ عنوان تنهاست، پس inline-flex می‌کنیم). */
.ilh-course-price--detail {
  display: inline-flex;
  margin: .9rem auto 0;
}

.ilh-course-options-title {
  margin: 1.8rem 0 .9rem;
  text-align: center;
  font-size: .95rem;
  font-weight: 800;
  color: var(--ilh-fg);
  position: relative;
  padding-bottom: .6rem;
}
.ilh-course-options-title::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 36px; height: 2px; border-radius: 2px; background: var(--ilh-gold);
}

/* لیستِ آپشن‌ها — بازطراحیِ حرفه‌ای‌تر: هر ردیف با یه بجِ گردِ ایموجی سمتِ راست، متن
   راست‌چین کنارش، حاشیه‌ی گرادیانیِ ظریف و افکتِ هاور که کارت‌ها زنده‌تر به‌نظر بیان. */
.ilh-course-options {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.ilh-course-options li {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-align: right;
  color: var(--ilh-fg);
  font-size: .92rem;
  line-height: 1.6;
  padding: .75rem .9rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), border-color .2s ease, background .2s ease;
}
.ilh-course-options li:hover {
  transform: translateX(-2px);
  border-color: rgba(255, 193, 7, .3);
  background: linear-gradient(135deg, rgba(255, 193, 7, .08), rgba(255, 255, 255, .02));
}
.ilh-option-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: radial-gradient(circle at 35% 30%, rgba(255, 193, 7, .22), rgba(124, 63, 174, .28));
  border: 1px solid rgba(255, 193, 7, .3);
}
.ilh-option-text { flex: 1; color: var(--ilh-muted); }

/* دکمه‌ی «خرید دوره» — یه‌کم بزرگ‌تر و متمایزتر از بقیه‌ی دکمه‌های صفحه که واضح باشه اقدامِ نهاییه */
.ilh-buy-btn { font-size: 1.05rem; padding: 1rem 1rem; }