/* ============================================================
   TaskineRavan — Academic Lessons (Bootstrap 5 only layout)
   - 3 cards per row on desktop, 2 on sm, 1 on xs  (row-cols utility)
   - Large rectangular cover (contain)
   - Inline labels with decorative dot instead of ':' (BNazanin-safe)
   - 12-line clamp for attribute block
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --card-radius: 16px;
  --card-border: #e5e7eb;     /* gray-200 */
  --card-shadow: 0 .35rem 1rem rgba(0,0,0,.06);
  --card-shadow-hover: 0 .75rem 2rem rgba(0,0,0,.10);

  --text-900: #0f172a;        /* slate-900 */
  --text-800: #111827;        /* slate-800 */
  --text-700: #374151;        /* gray-700 */

  --brand-green-50:  #f0fdf4;
  --brand-green-200: #bbf7d0;
  --brand-green-700: #15803d;

  --badge-bg:   #eefbf4;
  --badge-brd:  #c7ead5;

  --blue-600: #2563eb;
  --blue-800: #1e40af;

  --attr-fs: 13.5px;
  --attr-lh: 1.8;
}

/* Respect RTL container */
[dir="rtl"]{ unicode-bidi: plaintext; }

/* ---------- Card ---------- */
.lesson-card{
  position:relative;
  background:#fff;
  border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lesson-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--card-shadow-hover);
  border-color:#d1d5db; /* gray-300 */
}

/* Saved ribbon */
.lesson-saved-ribbon{
  position:absolute; top:10px; left:10px; z-index:2;
  background:var(--badge-bg); color:#166534;
  border:1px solid var(--badge-brd);
  border-radius:999px;
  padding:.2rem .6rem;
  font-size:12px; font-weight:600;
}

/* ---------- Cover (rectangular, contain) ---------- */
.lesson-thumb{
  padding:18px 18px 0;
  display:flex; justify-content:center; align-items:flex-end;
}
.thumb-plate{
  width:100%;
  height:220px;               /* large cover */
  padding:16px;
  background: radial-gradient(65% 60% at 50% 40%, #f8fafc 0%, #eef2f7 75%, #e5e7eb 100%);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.thumb-rect{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--card-border);
}
.thumb-rect img{
  max-width:100%; max-height:100%;
  object-fit:contain; display:block;
  transform:scale(1);
  transition:transform .25s ease;
}
.lesson-card:hover .thumb-rect img{ transform:scale(1.02); }

/* ---------- Body ---------- */
.lesson-body{ padding:14px 16px 10px; }
.lesson-title{
  margin:0 0 8px;
  font-size:16px;
  font-weight:800;
  color:var(--text-900);
  line-height:1.5;
  text-align:right;
}

/* ---------- book-attr (inline labels, justified, without ':') ---------- */
.book-attr{
  direction: rtl;
  text-align: justify;
  text-align-last: right;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.05);
  font-size: var(--attr-fs);   /* مثلا 13.5px */
  line-height: 1.8;
  color: var(--text-800);
}
.book-attr *{ box-sizing:border-box; }

/* Publisher badge centered */
.book-attr .badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.18rem .6rem; border-radius:999px;
  border:1px solid var(--badge-brd);
  background:var(--badge-bg);
  color:var(--brand-green-700);
  font-weight:600; font-size:12.5px;
  margin:.1rem auto .45rem; /* center horizontally */
}

/* Soft divider */
.book-attr .sep{
  height:1px;
  background:linear-gradient(90deg,transparent,#e5e7eb,transparent);
  margin:.5rem 0 .45rem;
}

/* Label + value in one line, decorative dot instead of ':' (font-safe) */
.book-attr .label{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:.4rem;                 /* space between label and value */
  margin:0 .55rem 0 0;       /* small separation from next chunk */
  color:var(--text-700); font-weight:700;
}
/* decorative dot */
.book-attr .label::after{
  content:"";
  display:inline-block;
  width:.45em; height:.45em;
  min-width:6px; min-height:6px;
  background:#cbd5e1;          /* slate-300 */
  border-radius:999px;
  box-shadow:0 0 0 2px #fff;   /* little ring */
  margin-inline: .1rem .15rem;
  transform: translateY(.1em);
}

/* If value uses <div>, keep inline */
.book-attr .label + div{ display:inline; }

/* Authors as inline list with Persian comma */
.book-attr ul{ display:inline; margin:0; padding:0; }
.book-attr li{ display:inline; margin:0; padding:0; }
.book-attr li::before{ content:none; }
.book-attr li::after{ content:"، "; }
.book-attr li:last-child::after{ content:""; }

/* Compact */
/* Compact – ارتفاع ثابت برای یکدست شدن همهٔ باکس‌ها */
.book-attr--compact{
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.05);

  /* ارتفاع ثابت؛ حدوداً جا برای ۳–۴ خط متن (نویسندگان، مترجمان، مقطع) */
  height: 9.2em;
  overflow: hidden;
}

/* Clamp (12 lines) */
.book-attr--clamp{
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}
.clamp-12{
  /* Standard (where supported) */
  line-clamp: 12;
  /* WebKit / Blink */
  -webkit-line-clamp: 12;
  max-height: calc(12 * var(--attr-lh) * 1em);
}
/* Fallback: when neither standard nor WebKit is supported */
@supports ((not (line-clamp: 1)) and (not (-webkit-line-clamp: 1))) {
  .clamp-12{ display:block; max-height:none; }
}

/* ---------- Actions (Save / Continue) ---------- */
.lesson-actions{
  padding:10px 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* حالت عادی دکمه ذخیره */
.btn-save{
  border:1px solid var(--card-border);
  background:#fff;
  color:var(--text-800);
  border-radius:10px;
  padding:.4rem .65rem;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  cursor:pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.btn-save i{
  font-size:16px;
  line-height:1;
}

.btn-save:hover{
  background:#f8fafc;
  border-color:#d1d5db;
}

/* حالت ذخیره‌شده: سبز پررنگ و کاملاً متمایز */
.btn-save.is-saved{
  color:#ffffff;
  border-color:var(--brand-green-700);
  background:var(--brand-green-700);
  box-shadow:0 .25rem .75rem rgba(22,101,52,.35);
}

.btn-save.is-saved:hover{
  background:#166534;          /* سبز تیره‌تر */
  border-color:#14532d;
}

/* دکمه ادامه */
.btn-continue{
  color:var(--blue-600);
  text-decoration:none;
  font-weight:700;
  font-size:13.5px;
  display:inline-flex;
  align-items:center;
  gap:.15rem;
  padding:.4rem .2rem;
  border-radius:8px;
  transition:color .2s ease, background .2s ease;
}

.btn-continue:hover{
  color:var(--blue-800);
  background:#eff6ff;
}

/* ---------- Pagination polish (optional) ---------- */
.pagination .page-link{ border-radius:8px; }
.pagination .page-item.active .page-link{
  background:var(--blue-600); border-color:var(--blue-600);
}

/* ---------- Page-size control ---------- */
.page-size-control{
  text-align:center;
}
.page-size-control span{
  white-space:nowrap;
}

/* Ensure Bootstrap Icons align nicely inside RTL buttons */
[dir="rtl"] .bi{ transform: translateY(1px); }




/* ================================
   Lesson Mode Select – Green Theme
   فقط روی .lesson-mode-main اثر می‌گذارد
===================================*/

.lesson-mode-main {
  padding-top: 7.5rem;   /* اگر با منو تداخل داشت، این را بیشتر کن */
  padding-bottom: 4rem;
  background-color: #f9fafb; /* پس‌زمینه روشن خنثی */
}

/* ---------- Hero ---------- */

.lesson-mode-hero {
  direction: rtl;
  text-align: center;
}

.lesson-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: 999px;
  background-color: #f6f1e3; /* نسکافه‌ای ملایم */
  color: #374151;
  font-size: .9rem;
  font-weight: 600;
}

.lesson-mode-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.6;
  margin-top: .75rem;
}

.lesson-mode-title-accent {
  color: #16a34a; /* سبز روشن روی عنوان درس */
}

.lesson-mode-subtitle {
  font-size: .98rem;
  color: #374151;
  max-width: 42rem;
  margin: 1rem auto 0;
  direction: rtl;
  text-align: justify;
  text-align-last: center;
}

/* ---------- Cards container ---------- */

.lesson-mode-options {
  direction: rtl;
}

/* ---------- Card base ---------- */

.mode-card {
  border-radius: 1.25rem;
  border: 1px solid #bbf7d0; /* سبز خیلی ملایم */
  background: linear-gradient(135deg, #ffffff 0, #f0fdf4 100%); /* پس‌زمینه سبز روشن داخل کارت */
  box-shadow: 0 18px 40px rgba(22, 163, 74, 0.16); /* سایه واضح روی زمینه سفید */
  padding: 1.7rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mode-card-secondary {
  background: linear-gradient(135deg, #ffffff 0, #f9fafb 100%);
  border-color: #e5e7eb;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10);
}

.mode-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(21, 128, 61, 0.25);
  border-color: #22c55e;
}

/* ---------- Card header ---------- */

.mode-card-header {
  text-align: right;
  margin-bottom: 1rem;
}

/* آیکون مستطیلی با گوشه گرد (نه دایره) */
.mode-icon-wrapper {
  min-width: 70px;
  height: 40px;
  border-radius: .9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .7rem;
  padding-inline: .6rem;
  font-size: 1.25rem;
  color: #ecfdf5;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
}

.mode-icon-primary {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.mode-icon-secondary {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.mode-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #064e3b;
  margin-bottom: .3rem;
}

/* ---------- Badges ---------- */

.mode-badge {
  display: inline-block;
  margin-top: .25rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
}

.mode-badge-primary {
  background-color: #dcfce7;
  color: #166534;
}

.mode-badge-secondary {
  background-color: #e0f2fe;
  color: #075985;
}

/* ---------- Card body (متن‌ها RTL + Justify) ---------- */

.mode-body {
  margin-top: .7rem;
  flex: 1;
  direction: rtl;
  text-align: justify;
}

.mode-text {
  font-size: .95rem;
  color: #374151;
  line-height: 1.9;
  margin-bottom: .9rem;
  direction: rtl;
  text-align: justify;
}

.mode-features {
  margin: .7rem 0 0;
  padding: 0;
  list-style: none;
  direction: rtl;
}

.mode-features li {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .9rem;
  color: #374151;
  margin-bottom: .4rem;
  direction: rtl;
  text-align: justify;
}

.mode-features i {
  font-size: 1rem;
  color: #16a34a;
  margin-top: .1rem;
}

/* ---------- Footer & buttons ---------- */

.mode-footer {
  margin-top: 1.2rem;
}

.mode-footer .btn {
  border-radius: .9rem;
  font-weight: 600;
  font-size: .93rem;
}

/* دکمه سبز اصلی */
.mode-footer .btn-success {
  background-color: #16a34a;
  border-color: #16a34a;
}

.mode-footer .btn-success:hover {
  background-color: #15803d;
  border-color: #15803d;
}

/* دکمه outline سبز */
.mode-footer .btn-outline-success {
  color: #15803d;
  border-color: #16a34a;
  background-color: #ffffff;
}

.mode-footer .btn-outline-success:hover {
  background-color: #16a34a;
  color: #ffffff;
}

/* ---------- Back link ---------- */

.lesson-mode-back-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;
  color: #6b7280;
  text-decoration: none;
}

.lesson-mode-back-link:hover {
  color: #111827;
  text-decoration: underline;
}

/* ---------- Responsive ---------- */

@media (max-width: 576px) {
  .lesson-mode-main {
    padding-top: 6.8rem;
  }
  .lesson-mode-title {
    font-size: 1.55rem;
  }
  .mode-card {
    padding: 1.5rem 1.2rem 1.3rem;
  }
}


/* نوار پیام سبز زیر تیتر فلش‌کارت‌ها */
.flashcards-message-strip {
  background-color: #ecfdf5;          /* سبز خیلی ملایم */
  border: 1px solid #bbf7d0;          /* خط دور سبز روشن */
  border-radius: 0.9rem;
  padding: 0.75rem 1rem 0.9rem;
}

/* خط سبز بالای پیام (همون خطی که گفتی) */
.flashcards-message-strip-line {
  height: 3px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #16a34a); /* سبز گرادیانی */
}

/* خود متن پیام */
.flashcards-message {
  font-size: 0.93rem;
  color: #166534;                     /* سبز خوانا */
}

/* اگر message.tags = error بود */
.flashcards-message-error {
  color: #b91c1c;
}

/* اگر message.tags = success بود */
.flashcards-message-success {
  color: #166534;
}


.lesson-restricted-icon {
  font-size: 0.9rem;
  color: #f59e0b;     /* زرد-نارنجی مثل قفل طلایی */
  vertical-align: middle;
}
.restricted-note {
  font-size: 0.95rem;
  color: #374151;        /* مثل متن اصلی، خوانا */
  font-weight: 600;      /* پررنگ‌تر */
}

.restricted-note-icon {
  color: #f59e0b;        /* طلایی قفل */
  vertical-align: middle;
}