/* چون این فایل فقط در همین صفحه لود می‌شود، این override امن است */
body { background:#fff !important; }

/* صفحه */
.class-details-page {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  padding: 32px 20px 48px;
}

/* هدر کلاس (کادر زرد وسط صفحه) */
.class-header {
  display: flex;
  justify-content: center;
  margin: 0 auto 40px;
}

.class-header-inner {
  background: #333;
  color: #fff;
  padding: 38px 48px 32px;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.08);
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.class-title {
  margin: 20px;
  font-size: 70px;
  font-weight: 800;
  line-height: 1.2;
}

.class-teacher {
  margin-top: 18px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.6;
}

.class-title .label,
.class-teacher .label {
  color: #FFC000;
  font-weight: 900;
}

.class-title .value,
.class-teacher .value {
  color: #fff;
  font-weight: bold;
}


/* سکشن شیوه تدریس (کادر سفید با دورگرد و سایه) */
.class-method {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border: 1px solid #eee;
  
}
.section-title {
  display: inline-block;
  background: #FFC000;
  color:#333;
  padding: 8px 16px;
  border-radius: 10px;
  margin: 0 0 14px 0;
  font-size: 18px; font-weight: 700;
}

.section-title-inline {
  font-size: 18px;
  font-weight: bold;
  background: #FFC000;
  color: #333;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  margin-bottom: 24px;
}


.method-box ul {
  margin: 0; padding: 0 22px; list-style: disc;
  line-height: 1.9; font-size: 15.5px; color: #444;
}
.method-box li { margin-bottom: 8px; }

.teaching-style-box {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 48px;
  padding-top: 20px;
}

.teaching-style-box .title-tag {
  position: absolute;
  top: 0;
  right: 28px;
  background-color: #FFC000;
  color: #333;
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 16px;
  transform: translateY(-50%);
  z-index: 2;
}

.teaching-style-box .white-box {
  background-color: #fff;
  padding: 32px 32px 24px;
  border-radius: 20px;
  border: 1px solid #ddd;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.teaching-style-box ul {
  margin: 0;
  padding-right: 20px;
  list-style: disc;
  color: #333;
  font-size: 14px;
  line-height: 1.2;
  text-align: justify;
}

.teaching-style-box ul li {
  margin-bottom: 10px;
}

.options-outer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.options-grid-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}

.double-box-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.option-box {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  border: 1px solid #eee;
  padding: 20px 22px;
  position: relative;
}

.option-title {
  background: #FFC000;
  padding: 6px 14px;
  display: inline-block;
  font-weight: bold;
  font-size: 15.5px;
  border-radius: 8px;
  margin-bottom: 14px;
  color: #333;
}

.option-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.option-box ul li {
  background: #666;
  color: #fff;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 8px;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
    direction: rtl;         /* 👈 اضافه کن */
  text-align: right;      /* 👈 اضافه کن */
}

.option-box ul li label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  direction: rtl;         /* 👈 اضافه کن */
  text-align: right;      /* 👈 اضافه کن */
}

.option-box ul li input[type="checkbox"] {
  margin-left: 10px;
  accent-color: #FFC000;
  transform: scale(1.2);
}

/* تخفیف کنار هر گزینه */
.text-with-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* دایره درصد */
.badge.circle {
  display: inline-block;
  background: #FFC000;
  color: #333;
  font-size: 11px;
  font-weight: bold;
  border-radius: 50px;
  padding: 4px 10px;
  white-space: nowrap;
}

.badge.circle.orange {
  background: #FFB74D;
}


/* عنوان زرد مثل شیوه‌ی تدریس */
.section-title-box {
  background: #FFC000;
  display: inline-block;
  padding: 6px 16px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 24px;
}

/* موقعیت تیتر در بالای ستون اول */
.section-header-top {
  margin-bottom: -12px;
  margin-right: 0;
}

/* ✅ راست‌چین کردن آیتم‌ها */
.option-box ul li,
.option-box ul li label {
  direction: rtl;
  text-align: right;
}

/* ✅ فاصله checkbox از متن سمت راست */
.option-box ul li label {
  justify-content: space-between;
  gap: 12px;
}

.option-box ul li label span {
  direction: rtl;
  text-align: right;
  display: inline-block;
  width: 100%;
}






/* 🎯 ریسپانسیو برای بخش انتخاب شرایط برگزاری کلاس */
@media (max-width: 1024px) {
  .options-grid-3col {
    grid-template-columns: 1fr 1fr;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .options-grid-3col {
    grid-template-columns: 1fr;
    justify-content: center;
  }

  .options-outer {
    padding: 0 16px;
    max-width: 100%;
  }

  .option-box {
    padding: 16px;
  }

  .option-title {
    font-size: 15px;
  }

  .option-box ul li {
    font-size: 14px;
  }

  .option-box ul li label span {
    font-size: 14px;
  }

  .badge.circle {
    font-size: 11px;
    padding: 3px 8px;
  }

  .double-box-col {
    flex-direction: column;
    gap: 16px;
  }
}




.section-title-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  margin-top: 20px;
}

.section-title-divider::before,
.section-title-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #ccc;
  margin: 0 16px;
}

.section-title-divider span {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}


.class-pricing-section {
  max-width: 1100px; /* 👈 یکسان با باکس‌های قبلی */
  margin: 60px auto 40px;
  padding: 0 20px;
}


.pricing-table-box {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  border: 1px solid #eee;
  padding: 24px 32px;
  font-size: 15px;
  line-height: 2;
}

.pricing-table-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #ddd;
}

.pricing-table-row:last-child {
  border-bottom: none;
}

.pricing-table-row.header {
  font-weight: bold;
  color: #333;
  border-bottom: 2px solid #ccc;
  margin-bottom: 8px;
}

.table-heading {
  background: #FFC000;
  color: #333;
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
}

@media (max-width: 768px) {
  .pricing-table-row {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    margin-bottom: 18px;
    padding: 16px 0;
  }

  .pricing-table-row.header {
    display: none;
  }

  .pricing-table-row > div {
    margin-bottom: 8px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .pricing-table-row > div::before {
    content: attr(data-label);
    background: #FFC000;
    color: #333;
    font-size: 13px;
    font-weight: bold;
    border-radius: 8px;
    padding: 4px 10px;
    min-width: 110px;
    display: inline-block;
  }

  .pricing-table-row > div.table-heading {
    display: none;
  }
}

/* =======================
   فقط سکشن آخر (انتخاب تعداد جلسات)
   ======================= */

/* محدودکننده کلی سکشن آخر */
.class-sessions-section {
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 16px;
}



/* 🎯 عنوان سکشن انتخاب تعداد جلسات با خط‌های کامل در دو طرف */
.class-sessions-section .section-header-line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto 32px;
  max-width: 1100px;
  padding: 0 16px;
}

.class-sessions-section .section-header-line::before,
.class-sessions-section .section-header-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #ccc;
  margin: 0 16px;
}

.class-sessions-section .section-title-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}




/* شبکه کارت‌های سکشن آخر */
.class-sessions-section .session-cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* کارت‌ها در سکشن آخر */
.class-sessions-section .session-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 16px 16px 36px;
  position: relative;
  text-align: right;
  border: 1px solid #eee;
}

/* سربرگ هر کارت: عین لیست‌های خاکستری سکشن قبلی + چک‌باکس */
.class-sessions-section .session-topline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background: #444;    /* خاکستری تیره یکسان */
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
}
.class-sessions-section .session-topline input[type="checkbox"] {
  accent-color: #FFC000; /* زرد برند */
  transform: scale(1.2);
}

/* تیتر داخل سربرگ کارت‌ها */
.class-sessions-section .session-title {
  font-weight: 700;
  font-size: 15.5px;  /* هم‌اندازه آیتم‌های سکشن قبلی */
  line-height: 1.6;
}

/* توضیح کارت‌ها */
.class-sessions-section .session-description {
  font-size: 13.5px;
  color: #444;
  line-height: 1.9;
}

/* نشان تخفیف فقط در سکشن آخر */
.class-sessions-section .discount-badge {
  position: absolute;
  bottom: -12px;
  left: -12px;
  width: 52px;
  height: 52px;
  background: #C79600;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ریسپانسیو فقط برای سکشن آخر */
@media (max-width: 900px){
  .class-sessions-section .session-cards-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .class-sessions-section .session-cards-container { grid-template-columns: 1fr; }
  .class-sessions-section .session-card { padding: 14px 14px 32px; }
  .class-sessions-section .session-title { font-size: 15px; }
}



/* 🎯 نسخه جذاب‌تر و متحرک برای نشان تخفیف */
.class-sessions-section .discount-badge {
  position: absolute;
  bottom: -14px;
  left: -14px;
  width: 64px;
  height: 64px;
  background: radial-gradient(circle at center, #FFC000 0%, #C79600 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 0 0 rgba(255, 192, 0, 0.7);
  animation: pulse 2s infinite;
  z-index: 3;
  text-align: center;
  padding: 4px;
}

/* درصد بزرگ‌تر، متن تخفیف کوچک‌تر */
.discount-badge .percent {
  font-size: 30px;
  line-height: 1.2;
}

.discount-badge .off-label {
  font-size: 11px;
  line-height: 1;
  margin-top: 2px;
  opacity: 0.85;
}

/* پالس هیجانی */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 192, 0, 0.6);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 192, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 192, 0, 0);
  }
}


/* 🎯 استایل کارت غیرفعال در سکشن آخر */
.class-sessions-section .session-card.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(70%);
  transition: all 0.3s ease;
}


/* 🎯 آیتم غیرفعال در سکشن انتخاب شرایط */
.class-options-section .option-box ul li.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(60%);
  transition: all 0.3s ease;
}

.class-options-section .option-box ul li.feature-locked {
  opacity: .72;
  filter: grayscale(35%);
  background: #747474;
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 2px 8px;
  color: #5f4700;
  background: #fff1bd;
  border: 1px solid #e2bc43;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.semi-private-coming-soon {
  margin: 4px 0 0;
  padding: 9px 11px;
  color: #6b5208;
  background: #fff8df;
  border: 1px solid #eed78a;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.8;
}


/* 🎯 تعیین زمان کلاس */
.class-time-section {
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 16px;
  margin-top: 100px;
}

/* باکس خاکستری توضیح */
.class-time-description-box {
  background-color: #f3f3f3;
  padding: 24px 28px;
  border-radius: 16px;
  font-size: 14px;
  color: #444;
  line-height: 1.2;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  text-align: justify;
}

.class-timeslots-section {
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 16px;
}

.timeslot-wrapper-box {
  background-color: #f3f3f3;
  border-radius: 18px;
  padding: 32px 24px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.05);
}

/* راهنمای رنگ‌ها */
.legend-flex-box {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 24px;
  padding-right: 30px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14.8px;
  color: #444;
  line-height: 1.2;
}

.legend-box {
  padding: 6px 16px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 14px;
  min-width: 80px;
  text-align: center;
  color: #fff;
}

.legend-box.available {
  background-color: #444;
}

.legend-box.reserved {
  background-color: #FFC000;
  color: #333;
}

.legend-box.selected {
  background-color: #4CAF50;
}

/* خط باریک زرد سازمانی */
.legend-divider-line {
  height: 1px;
  background-color: #FFC000;
  margin: 32px 0;
  border-radius: 4px;
}

/* جدول زمان‌بندی */
.timeslot-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.timeslot-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.slots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.slot {
  min-width: 60px;
  height: 34px;              /* 👈 ارتفاع یکسان با day-label */
  padding: 0 12px;           /* 👈 حذف padding عمودی اضافه */
  display: flex;             /* 👈 برای وسط‌چین شدن متن */
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  transition: 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}






.legend-title {
  font-size: 20px;
  font-weight: bold;
  color: #444;
  margin-bottom: 24px;
  text-align: right;
}

.day-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;         /* 👈 عرض ثابت و یکسان */
  height: 34px;         /* 👈 ارتفاع ثابت و یکسان */
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  background-color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}


/* ============================
   کلاس زمان — نسخه مدرن و رسپانسیو
   فقط روی .class-timeslots-section اثر می‌گذارد
   ============================ */

.class-timeslots-section {
  --slot-h: 34px;              /* ارتفاع یکسان با day-label */
  --slot-min-w: 42px;          /* حداقل عرض هر اسلات */
  --gap: 10px;
  --brand: #FFC000;
  --gray-900: #222;
  --gray-800: #333;
  --gray-700: #444;
  --ok: #41b853;               /* سبز انتخاب */
  --shadow: 0 6px 24px rgba(0,0,0,0.06);
}

/* باکس کلی (قبلاً دارید) را کمی شیک‌تر می‌کنیم */
.class-timeslots-section .timeslot-wrapper-box{
  background: #f5f5f5;
  border-radius: 20px;
  padding: 28px 20px 36px;
  box-shadow: var(--shadow);
}

/* تیتر "راهنما" کمی شکیل‌تر */
.class-timeslots-section .legend-title{
  font-size: 18px; font-weight: 600; color: var(--gray-700);
  margin: 0 0 16px 0; text-align: right;
}

/* آیتم‌های راهنما فشرده و هم‌تراز */
.class-timeslots-section .legend-flex-box{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.class-timeslots-section .legend-item{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  color: var(--gray-700);
  font-size: 14px;
  line-height: 1.2;
  text-align: justify;
}
.class-timeslots-section .legend-box{
  padding: 6px 14px; border-radius: 8px; font-weight: 500; min-width: 68px; text-align: center;
  color:#11356e;
}
.class-timeslots-section .legend-box.available{ background: #D0E8FF; }
.class-timeslots-section .legend-box.reserved { background: var(--brand); color: var(--gray-800); }
.class-timeslots-section .legend-box.selected { background: var(--ok); }
.class-timeslots-section .legend-box.unavailable { background: #e8ecf0; color: #637083; }
.class-timeslots-section .legend-box.pending { background: #ffe0af; color: #8a4c00; }

/* خط سازمانی زیر راهنما */
.class-timeslots-section .legend-divider-line{
  height: 1px; background: var(--brand); border-radius: 2px; margin: 18px 0 22px;
}

/* ردیف‌ها */
.class-timeslots-section .timeslot-grid{
  display: flex; flex-direction: column; gap: 16px;
}

/* لیبل روز: اندازه ثابت و ظاهری نرم */
.class-timeslots-section .day-label{
  display: inline-flex; align-items: center; justify-content: center;
  width: 100px; height: var(--slot-h);
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  font-size: 16px; font-weight: 500; color: var(--gray-800);
  background: #fff; border: 1px solid #e5e5e5; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  flex: 0 0 auto;
}

/* ظرف اسلات‌ها */
.class-timeslots-section .timeslot-row{
  display: flex; align-items: center; gap: 18px; /* فاصله بین لیبل و اسلات‌ها */
}

/* اسلات‌ها در دسکتاپ رَپ می‌شوند؛ در موبایل اسکرول افقی خواهند داشت */
.class-timeslots-section .slots{
  display: flex; flex-wrap: wrap; gap: var(--gap);
}

/* خود اسلات */
.class-timeslots-section .slot{
  min-width: var(--slot-min-w);
  height: var(--slot-h);
  padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 14px; font-weight: 800;
  color: #11356e;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, outline-color .15s ease;
  outline: 0 solid transparent;
  user-select: none;
}


/* حالت‌های تعاملی زیبا */
.class-timeslots-section .slot:not(.reserved):hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.class-timeslots-section .slot:not(.reserved):focus-visible{
  outline-width: 3px; outline-style: solid; outline-color: rgba(255,192,0,.5);
  transform: translateY(-1px);
}

/* —— رسپانسیو هوشمند —— */

/* تا 1024px: چینش دو ستونه در راهنما و بهبود فاصله‌ها */
@media (max-width: 1024px){
  .class-timeslots-section .legend-flex-box{
    grid-template-columns: 1fr 1fr;
  }
}

/* تا 900px: اسلات‌ها به صورت اسکرول افقی با Scroll-Snap؛ لیبل روز Sticky سمت راست (با توجه به RTL) */
@media (max-width: 900px){
  .class-timeslots-section .timeslot-row{
    position: relative;
  }

  .class-timeslots-section .day-label{
    position: sticky;
    right: 0;                 /* چون صفحه RTL است، day-label سمت راست می‌ماند */
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }

  .class-timeslots-section .slots{
    flex-wrap: nowrap;        /* جلوگیری از شکستن به خطوط بعدی */
    overflow-x: auto;         /* اسکرول افقی */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--gap);
    padding: 6px 4px;
  }

  .class-timeslots-section .slot{
    scroll-snap-align: center;
    min-width: 84px;          /* کمی پهن‌تر برای تاچ راحت‌تر */
    border-radius: 14px;
  }

  /* راهنمای دو ستونه در موبایل تک‌ستونه شود */
  .class-timeslots-section .legend-flex-box{
    grid-template-columns: 1fr;
  }
}

/* تا 600px: بهینه‌سازی تاچ‌تارگت‌ها، فونت و فاصله‌ها */
@media (max-width: 600px){
  .class-timeslots-section .day-label{
    width: 88px; height: 32px; font-size: 15px; border-radius: 12px;
  }
  .class-timeslots-section .slot{
    height: 32px; min-width: 28px; font-size: 13.5px; border-radius: 12px;
  }
  .class-timeslots-section .timeslot-wrapper-box{
    padding: 22px 14px 28px;
  }
  .class-timeslots-section .legend-title{
    font-size: 18px;
  }
}

/* افکت راهنمای اسکرول (اختیاری و سبک) */
@media (max-width: 900px){
  .class-timeslots-section .slots{
    mask-image: linear-gradient(to left, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  }
}

/* حالت disabled برای اسلات‌ها اگر لازم شد (سازگار با JS شما) */
.class-timeslots-section .slot.disabled{
  opacity: .5; filter: grayscale(60%); pointer-events: none;
}

/* دکمه‌های پایانی صفحه */
.page-footer-actions{
  max-width: 1100px;
  margin: 28px auto 80px;
  padding: 0 16px;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
}

.btn{
  appearance: none;
  border: 0;
  outline: none;
  height: 52px;
  min-width: 180px;
  padding: 0 22px;
  border-radius: 18px;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}






.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: #FFC000;  /* رنگ سازمانی */
  color: #333;
}
.btn-primary:hover{ box-shadow: 0 10px 26px rgba(255,192,0,.35); }

.btn-gray{
  background: #7d7d7d;
  color: #fff;
}
.btn-gray:hover{ box-shadow: 0 10px 26px rgba(0,0,0,.15); }

/* ریسپانسیو */
@media (max-width: 560px){
  .page-footer-actions{ flex-direction: column-reverse; }
  .btn{ width: 100%; min-width: 0; }
}

/* ===== مودال هشدار خروج (نسخه جمع‌وجور) ===== */
.exit-guard-modal[aria-hidden="true"] { display: none; }
.exit-guard-modal[aria-hidden="false"] { display: block; }

.exit-guard-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.38);
  z-index: 1000; animation: eg-fade .16s ease;
}

.exit-guard-dialog {
  position: fixed; inset: 0; margin: auto;
  width: min(420px, calc(100% - 28px));
  background: #fff; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  z-index: 1001; padding: 16px 16px 14px;
  direction: rtl; text-align: right;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  animation: eg-pop .16s ease;
}

.exit-guard-header { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.exit-guard-header h3 { margin:0; font-size:16px; font-weight:800; color:#333; }

.exit-guard-icon {
  width:28px; height:28px; border-radius:8px; background:#FFC000; color:#333;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:16px; box-shadow:0 6px 14px rgba(255,192,0,.35);
}

.exit-guard-text { margin:0 0 10px; color:#444; line-height:1.8; font-size:14px; }
.exit-guard-text strong { color:#111; }

.exit-guard-actions { display:flex; gap:10px; justify-content:flex-start; }

.btn { height:44px; min-width:140px; padding:0 18px; border-radius:14px; font-size:15px; font-weight:800; }
.btn-primary{ background:#FFC000; color:#333; }
.btn-gray{ background:#7d7d7d; color:#fff; }

@keyframes eg-pop { from{ transform:translateY(4px) scale(.985); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes eg-fade { from{ opacity:0; } to{ opacity:1; } }

@media (max-width:480px){
  .exit-guard-actions{ flex-direction: column-reverse; }
  .btn{ width:100%; min-width:0; }
}


.limitations-box {
  margin-top: 20px;
    max-width: 1100px;
  margin: 10px auto;
  padding: 0 16px;
}

.limitations-box .white-box {
  background: #eeeee4;
  padding: 18px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  font-size: 13px;
  line-height: 1.3;
  color: #444;

}

.limitations-box ul {
  padding-right: 18px;
  
}

.limitations-box li {
  margin-bottom: 10px;
  list-style-type: "⚠️ ";
  
}

.title-tag {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  margin-bottom: 10px;
}

.timeslot-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

.timeslot-row .day-label {
  flex: 0 0 100px; /* عرض ثابت برای دکمه روز */
  text-align: center;
  font-weight: bold;
  background: #f8f8f8;
  border: none;
  padding: 8px 0;
  margin-left: 8px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.timeslot-row .slots {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.timeslot-row .slots::-webkit-scrollbar {
  height: 6px;
}
.timeslot-row .slots::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.timeslot-row .slots::-webkit-scrollbar-track {
  background: #f2f2f2;
}






/* اسلات آزاد */
.slot.available {
  background-color: #D0E8FF !important;
  color: #333;
  cursor: pointer;
  border-radius: 6px;
  padding: 1px 6px;
  transition: background-color 0.2s ease;
}

/* هاور اسلات آزاد */
.slot.available:hover {
  background-color: #A9D5FF !important;  /* 👈 پررنگ‌تر در هاور */
}


/* اسلات رزرو شده */
.slot.reserved {
  background: #FFC000;
  color: #333;
  border-radius: 6px;
  padding: 1px 6px;
  cursor: not-allowed;
  opacity: 0.8;
}

/* اسلات انتخاب‌شده */
.slot.selected {
  background-color: var(--ok) !important; /* سبز  */
  color: #ffffff;
  font-weight: 500;
  
}


.slot:hover:not(.reserved):not(.selected) {
  transform: scale(1.05);
  background: #333;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0px 24px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-gray {
  background-color: #888;
  color: #fff;
}

/* Compact session choices and accessible trial guide. */
.class-sessions-section .session-cards-container{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;direction:rtl}
.class-sessions-section .session-cards-container:not(:has(.session-card--trial)){grid-template-columns:repeat(4,minmax(0,1fr))}
.class-sessions-section .session-card{min-width:0;padding:16px 16px 32px;box-sizing:border-box}
.class-sessions-section .session-topline{gap:8px;padding:10px 8px;white-space:nowrap}
.class-sessions-section .session-title{font-size:14px}
.class-sessions-section .session-description{font-size:12px;line-height:1.9;text-align:center;margin-top:16px}
.class-sessions-section .discount-badge{animation:none;width:60px;height:60px;box-sizing:border-box;border:2px solid #ffe17d}
.class-sessions-section .session-card:has(input:checked){border-color:#ffc000;box-shadow:0 4px 16px #ffc00025}
.class-sessions-section .session-card--trial.disabled{pointer-events:auto;opacity:1;filter:none}
.class-sessions-section .session-card--trial.disabled .session-topline{opacity:.5;cursor:not-allowed}
.trial-help{position:absolute;bottom:-9px;left:-7px;z-index:5}
.trial-help__trigger{border:0;border-radius:20px;background:#fff4c9;color:#805c00;font:inherit;font-size:11px;padding:4px 10px;cursor:pointer}
.trial-help__trigger:focus-visible{outline:2px solid #b58500;outline-offset:3px}
.trial-help__panel{position:absolute;top:100%;right:-100px;width:330px;max-width:calc(100vw - 48px);box-sizing:border-box;background:#fff;border:1px solid #eadba8;border-radius:14px;padding:18px;box-shadow:0 12px 32px #26304b24;color:#475569;font-size:12px;line-height:1.9;text-align:right;white-space:normal}
.trial-help__panel[hidden]{display:none}
.trial-help__panel strong{color:#805c00;font-size:14px}
.trial-help__panel p{margin:9px 0 0}
.trial-help__unavailable{background:#fff4c9;padding:8px;border-radius:8px}
@media(max-width:1000px){.class-sessions-section .session-cards-container,.class-sessions-section .session-cards-container:not(:has(.session-card--trial)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.class-sessions-section .session-cards-container,.class-sessions-section .session-cards-container:not(:has(.session-card--trial)){grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.class-sessions-section .session-card{padding:12px 10px 28px}.class-sessions-section .session-title{font-size:12px}.class-sessions-section .session-topline{gap:6px}.trial-help__panel{right:auto;left:-100px;width:290px}}


/* Persistent booking notice: visibility changes only through explicit close buttons. */
#warningPopup{position:fixed;top:24px;right:24px;z-index:9999;width:460px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 48px);overflow:auto;box-sizing:border-box;background:#fff;border:1px solid #eee1b5;border-top:4px solid #f5b800;border-radius:18px;box-shadow:0 16px 50px #17233b26;color:#334155;text-align:right;font-size:14px;line-height:1.95;animation:none;opacity:1;transform:none}
.booking-warning__header{display:flex;align-items:center;gap:12px;padding:18px 20px;background:#fffbef;border-bottom:1px solid #f2ead1}
.booking-warning__icon{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;background:#fff0b4;color:#a67500;border-radius:13px}
.booking-warning__header strong{display:block;font-size:15px;color:#604b19}
.booking-warning__header small{display:block;font-size:11px;color:#927e50;margin-top:2px}
#warningPopup .warning-close{margin-right:auto;align-self:flex-start;border:0;background:transparent;color:#81765a;font:inherit;font-size:25px;line-height:1;padding:4px 6px;cursor:pointer;border-radius:8px}
#warningMessage{white-space:pre-line;padding:18px 22px}
.booking-warning__footer{padding:0 22px 18px;display:flex;justify-content:flex-end}
.booking-warning__footer button{border:0;border-radius:10px;padding:9px 22px;font:inherit;font-size:13px;font-weight:700;color:#493600;background:#ffc000;cursor:pointer}
#warningPopup button:focus-visible{outline:2px solid #805d00;outline-offset:3px}
@media(max-width:600px){#warningPopup{top:16px;right:16px}.booking-warning__header{padding:14px;gap:9px}.booking-warning__header strong{font-size:13px}#warningMessage{padding:16px;font-size:13px}}

.slot.pending{background:#ffe0af!important;color:#8a4c00!important;cursor:not-allowed}.slot.unavailable{background:#e8ecf0!important;color:#8b95a3!important;cursor:not-allowed}.slot.mine{background:#e6defb!important;color:#604394!important}.slot[data-selectable="false"]{cursor:not-allowed}#booking-grid-status{padding:12px 16px;background:#fff9e8;border:1px solid #f1dfb1;border-radius:12px;font-size:12px;line-height:2;margin:12px 0}