/* ============================================================
   Sirat Organization — Main Stylesheet
   Colors: Green #2e7d32 | Gold #f9a825 | Blue #1565c0
   ============================================================ */

:root {
  --primary:       #2e7d32;
  --primary-light: #4caf50;
  --primary-dark:  #1b5e20;
  --secondary:     #f9a825;
  --secondary-dark:#f57f17;
  --accent:        #1565c0;
  --accent-light:  #1976d2;
  --text-dark:     #1a1a2e;
  --text-muted:    #6b7280;
  --bg-light:      #f8fffe;
  --bg-section:    #f0f7f0;
  --white:         #ffffff;
  --border:        #e5e7eb;
  --shadow:        0 2px 20px rgba(0,0,0,0.08);
  --shadow-hover:  0 8px 40px rgba(0,0,0,0.14);
  --radius:        12px;
  --radius-sm:     8px;
  --transition:    0.25s ease;
}

/* ── BASE ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  background: #fff;
  line-height: 1.7;
  font-size: 16px;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
}

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }

img { max-width: 100%; height: auto; }

.section-py { padding: 80px 0; }
.section-py-sm { padding: 50px 0; }

/* ── TOP BAR ───────────────────────────────────────────────── */
.top-bar {
  background: var(--primary-dark);
  color: rgba(255,255,255,0.85);
  padding: 8px 0;
  font-size: 13px;
}
.top-bar a.social-link { color: rgba(255,255,255,0.75); font-size: 14px; }
.top-bar a.social-link:hover { color: var(--secondary); }
.top-bar .btn-outline-light { font-size: 12px; padding: 2px 10px; }

/* ── NAVBAR ────────────────────────────────────────────────── */
.main-navbar {
  background: #fff;
  box-shadow: 0 2px 20px rgba(0,0,0,0.07);
  padding: 12px 0;
  z-index: 1000;
}
.main-navbar .navbar-brand { font-size: 22px; font-weight: 800; }
.brand-text .brand-green { color: var(--primary); }
.brand-text .brand-gold  { color: var(--secondary); }

.main-navbar .nav-link {
  color: var(--text-dark) !important;
  font-weight: 500;
  padding: 8px 14px !important;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active { background: var(--bg-section); color: var(--primary) !important; }

.btn-donate {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff !important;
  border: none;
  border-radius: 50px;
  padding: 8px 22px;
  font-weight: 600;
  font-size: 14px;
  transition: all var(--transition);
  box-shadow: 0 3px 12px rgba(46,125,50,0.3);
}
.btn-donate:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46,125,50,0.4);
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

/* ── HERO ──────────────────────────────────────────────────── */
.hero-section {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, #388e3c 100%);
  color: #fff;
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: rgba(249,168,37,0.1);
  border-radius: 50%;
}
.hero-section .container { position: relative; z-index: 1; }
.hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
}
.hero-subtitle {
  font-size: 1.15rem;
  opacity: 0.9;
  max-width: 620px;
  margin-bottom: 36px;
}
.hero-btn-group .btn { padding: 14px 32px; font-size: 1rem; font-weight: 600; border-radius: 50px; }
.btn-hero-primary {
  background: var(--secondary);
  color: var(--text-dark);
  border: 2px solid var(--secondary);
  box-shadow: 0 4px 20px rgba(249,168,37,0.4);
}
.btn-hero-primary:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); transform: translateY(-2px); }
.btn-hero-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
}
.btn-hero-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.hero-stats { margin-top: 60px; }
.hero-stat { text-align: center; }
.hero-stat .stat-num { font-size: 2rem; font-weight: 800; color: var(--secondary); }
.hero-stat .stat-label { font-size: 0.85rem; opacity: 0.85; }

/* ── SECTION HEADERS ───────────────────────────────────────── */
.section-header { text-align: center; margin-bottom: 50px; }
.section-tag {
  display: inline-block;
  background: var(--bg-section);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 14px;
  border: 1px solid rgba(46,125,50,0.2);
}
.section-header h2 { font-size: 2rem; margin-bottom: 12px; }
.section-header p { color: var(--text-muted); max-width: 580px; margin: 0 auto; }

/* ── CAMPAIGN CARDS ────────────────────────────────────────── */
.campaign-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  border: 1px solid var(--border);
  height: 100%;
}
.campaign-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.campaign-card-img {
  width: 100%; height: 210px; object-fit: cover;
}
.campaign-card-img-placeholder {
  width: 100%; height: 210px;
  background: linear-gradient(135deg, var(--bg-section), #d4edda);
  display: flex; align-items: center; justify-content: center;
}
.campaign-card-img-placeholder i { font-size: 3rem; color: var(--primary); opacity: 0.4; }
.campaign-card-body { padding: 24px; }
.campaign-type-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 50px;
}
.badge-zakat  { background: #fff3e0; color: #e65100; }
.badge-charity { background: #e8f5e9; color: var(--primary); }
.badge-general { background: #e3f2fd; color: var(--accent); }

.campaign-title { font-size: 1.05rem; font-weight: 700; margin: 10px 0 8px; }
.campaign-desc  { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 16px; }
.campaign-progress { margin-bottom: 14px; }
.progress { height: 8px; border-radius: 50px; background: var(--border); }
.progress-bar { background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 50px; }
.campaign-meta { display: flex; justify-content: space-between; font-size: 0.83rem; margin-bottom: 16px; }
.campaign-meta .raised { color: var(--primary); font-weight: 700; }
.campaign-meta .target { color: var(--text-muted); }
.campaign-meta .percent { color: var(--secondary-dark); font-weight: 700; }

/* ── DONATIONS FEED ────────────────────────────────────────── */
.donations-section { background: var(--bg-section); }
.donation-feed { max-width: 700px; margin: 0 auto; }
.donation-item {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border-radius: var(--radius-sm);
  padding: 14px 18px; margin-bottom: 10px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  animation: slideIn 0.3s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.donation-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.donation-avatar.anon { background: linear-gradient(135deg, #607d8b, #90a4ae); }
.donation-info .name  { font-weight: 600; font-size: 0.93rem; }
.donation-info .detail { font-size: 0.82rem; color: var(--text-muted); }
.donation-amount { margin-left: auto; text-align: right; }
.donation-amount .amount-num { color: var(--primary); font-weight: 700; font-size: 1rem; }
.donation-amount .time { font-size: 0.78rem; color: var(--text-muted); }

/* ── ABOUT SECTION ─────────────────────────────────────────── */
.about-icon-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  border: 1px solid var(--border);
}
.about-icon-box:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.about-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 24px; }
.icon-green  { background: #e8f5e9; color: var(--primary); }
.icon-gold   { background: #fff8e1; color: var(--secondary-dark); }
.icon-blue   { background: #e3f2fd; color: var(--accent); }
.icon-red    { background: #fce4ec; color: #c62828; }

/* ── ACADEMY SECTION ───────────────────────────────────────── */
.academy-section { background: linear-gradient(135deg, #0d47a1, #1565c0); color: #fff; }
.academy-section .section-tag { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.2); }
.academy-section h2 { color: #fff; }
.academy-section p  { color: rgba(255,255,255,0.85); }
.course-mini-card {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  padding: 20px;
  transition: all var(--transition);
}
.course-mini-card:hover { background: rgba(255,255,255,0.18); transform: translateY(-3px); }
.course-mini-card h6 { color: #fff; font-weight: 600; }
.course-mini-card p  { color: rgba(255,255,255,0.75); font-size: 0.85rem; }

/* ── NEWS CARDS ────────────────────────────────────────────── */
.news-card {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: all var(--transition);
  border: 1px solid var(--border); height: 100%;
}
.news-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.news-card-img { width: 100%; height: 200px; object-fit: cover; }
.news-card-img-placeholder {
  width: 100%; height: 200px;
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  display: flex; align-items: center; justify-content: center;
}
.news-card-body { padding: 22px; }
.news-category { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); }
.news-title { font-size: 1rem; font-weight: 700; margin: 8px 0 10px; }
.news-excerpt { font-size: 0.875rem; color: var(--text-muted); }
.news-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 12px; }

/* ── FORMS ─────────────────────────────────────────────────── */
.form-control, .form-select {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 0.93rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(46,125,50,0.12);
}
.form-label { font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; color: var(--text-dark); }

/* ── DONATE PAGE ───────────────────────────────────────────── */
.donate-page { background: var(--bg-section); min-height: 60vh; padding: 60px 0; }
.donate-card {
  background: #fff; border-radius: var(--radius); padding: 36px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}
.donation-code-box {
  background: #f0fff4; border: 2px dashed var(--primary);
  border-radius: var(--radius-sm); padding: 18px 24px; text-align: center;
}
.donation-code { font-size: 1.8rem; font-weight: 800; color: var(--primary); letter-spacing: 3px; }
.payment-method-radio { display: none; }
.payment-method-label {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 16px; cursor: pointer; transition: all var(--transition);
  font-weight: 500; font-size: 0.9rem;
}
.payment-method-label:hover { border-color: var(--primary); background: var(--bg-section); }
.payment-method-radio:checked + .payment-method-label {
  border-color: var(--primary);
  background: #e8f5e9;
  color: var(--primary);
}
.payment-method-label i { font-size: 1.3rem; color: var(--primary); }
.amount-quick-btn {
  border: 2px solid var(--border); background: #fff;
  border-radius: var(--radius-sm); padding: 8px 18px;
  font-weight: 600; cursor: pointer; transition: all var(--transition); font-size: 0.9rem;
}
.amount-quick-btn:hover, .amount-quick-btn.active {
  border-color: var(--primary); background: var(--bg-section); color: var(--primary);
}

/* ── SUCCESS PAGE ──────────────────────────────────────────── */
.success-icon {
  width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: #fff; margin: 0 auto 24px;
  animation: popIn 0.4s ease;
}
@keyframes popIn {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── INVOICE ───────────────────────────────────────────────── */
.invoice-page { background: #f5f5f5; min-height: 100vh; padding: 40px 0; }
.invoice-card {
  background: #fff; border-radius: var(--radius); padding: 48px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.1); max-width: 700px; margin: 0 auto;
}
.invoice-logo { font-size: 1.6rem; font-weight: 800; }
.invoice-logo .org-green { color: var(--primary); }
.invoice-logo .org-gold  { color: var(--secondary); }
.invoice-number { font-size: 0.85rem; color: var(--text-muted); }
.invoice-divider { border-top: 2px solid var(--border); margin: 24px 0; }
.invoice-status {
  display: inline-block; padding: 4px 14px; border-radius: 50px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.status-pending  { background: #fff3e0; color: #e65100; }
.status-approved { background: #e8f5e9; color: var(--primary); }
.status-rejected { background: #fce4ec; color: #c62828; }
.invoice-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.invoice-row:last-child { border-bottom: none; }
.invoice-row .label { color: var(--text-muted); font-size: 0.9rem; }
.invoice-row .value { font-weight: 600; font-size: 0.9rem; }
.invoice-total { font-size: 1.4rem; font-weight: 800; color: var(--primary); }

/* ── COURSES ───────────────────────────────────────────────── */
.course-card {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: all var(--transition);
  border: 1px solid var(--border); height: 100%;
}
.course-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.course-card-img { width: 100%; height: 190px; object-fit: cover; }
.course-card-img-placeholder {
  width: 100%; height: 190px;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  display: flex; align-items: center; justify-content: center;
}
.course-card-img-placeholder i { font-size: 3rem; color: var(--accent); opacity: 0.5; }
.course-card-body { padding: 20px; }
.course-level-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 9px; border-radius: 50px; }
.level-beginner     { background: #e8f5e9; color: var(--primary); }
.level-intermediate { background: #fff3e0; color: #e65100; }
.level-advanced     { background: #fce4ec; color: #c62828; }
.level-all          { background: #e3f2fd; color: var(--accent); }
.course-title { font-size: 0.97rem; font-weight: 700; margin: 8px 0 6px; }
.course-instructor { font-size: 0.82rem; color: var(--text-muted); }
.course-price { font-weight: 800; color: var(--primary); font-size: 1rem; }
.course-price.free { color: var(--primary); }
.course-meta { font-size: 0.8rem; color: var(--text-muted); }

/* ── PAGE HERO ─────────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff; padding: 60px 0; text-align: center;
}
.page-hero h1 { color: #fff; font-size: 2.2rem; }
.page-hero p  { opacity: 0.85; max-width: 500px; margin: 10px auto 0; }
.breadcrumb-item a  { color: rgba(255,255,255,0.75); }
.breadcrumb-item.active { color: var(--secondary); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5); }

/* ── CONTACT ───────────────────────────────────────────────── */
.contact-info-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px; background: #fff; border-radius: var(--radius-sm);
  box-shadow: var(--shadow); margin-bottom: 14px;
}
.contact-icon {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}

/* ── ALERTS ────────────────────────────────────────────────── */
.alert { border-radius: var(--radius-sm); border: none; }
.alert-success { background: #e8f5e9; color: #2e7d32; }
.alert-danger   { background: #fce4ec; color: #c62828; }
.alert-warning  { background: #fff3e0; color: #e65100; }
.alert-info     { background: #e3f2fd; color: #1565c0; }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn-primary {
  background: var(--primary); border-color: var(--primary);
  font-weight: 600; border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); }
.btn-warning { background: var(--secondary); border-color: var(--secondary); color: var(--text-dark); font-weight: 600; }
.btn-warning:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); }
.btn-outline-primary { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.btn-outline-primary:hover { background: var(--primary); color: #fff; }
.btn-donate-footer { border-radius: 50px; padding: 10px 24px; font-weight: 700; }

/* ── FOOTER ────────────────────────────────────────────────── */
.site-footer { background: #1a1a2e; color: rgba(255,255,255,0.75); }
.footer-top { padding: 60px 0 40px; }
.footer-brand { font-size: 1.5rem; font-weight: 800; margin-bottom: 14px; }
.footer-about { font-size: 0.88rem; line-height: 1.7; }
.footer-heading { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; margin-bottom: 18px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: rgba(255,255,255,0.65); font-size: 0.88rem; transition: color var(--transition); }
.footer-links a:hover { color: var(--secondary); }
.footer-contact-list { list-style: none; padding: 0; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 0.88rem; }
.footer-contact-list i { color: var(--primary-light); margin-top: 3px; }
.social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75); font-size: 14px; margin-right: 6px;
  transition: all var(--transition);
}
.social-btn:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0; font-size: 0.82rem; color: rgba(255,255,255,0.45);
}
.footer-legal-link { color: rgba(255,255,255,0.5); font-size: 0.82rem; }
.footer-legal-link:hover { color: var(--secondary); }

/* ── ACADEMY PAGE ──────────────────────────────────────────── */
.academy-feature-card {
  background: #fff; border-radius: var(--radius);
  padding: 30px; text-align: center; box-shadow: var(--shadow);
  border: 1px solid var(--border); transition: all var(--transition);
}
.academy-feature-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.academy-feature-icon {
  width: 70px; height: 70px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; font-size: 1.8rem;
}

/* ── STUDENT DASHBOARD ─────────────────────────────────────── */
.enrolled-course-card {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--border); padding: 20px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: all var(--transition);
}
.enrolled-course-card:hover { box-shadow: var(--shadow); }

/* ── ZAKAT PAGE ────────────────────────────────────────────── */
.zakat-info-card {
  background: linear-gradient(135deg, #fff8e1, #fffde7);
  border: 2px solid var(--secondary);
  border-radius: var(--radius); padding: 30px;
}

/* ── MISC ──────────────────────────────────────────────────── */
.text-primary { color: var(--primary) !important; }
.text-gold    { color: var(--secondary) !important; }
.bg-primary-subtle { background: var(--bg-section) !important; }
.rounded-pill  { border-radius: 50px !important; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state i { font-size: 3rem; margin-bottom: 16px; opacity: 0.3; }

.card-shadow { box-shadow: var(--shadow); border-radius: var(--radius); }

@media (max-width: 768px) {
  .hero-section    { padding: 70px 0 50px; }
  .hero-title      { font-size: 1.8rem; }
  .section-py      { padding: 50px 0; }
  .donate-card     { padding: 24px 18px; }
  .invoice-card    { padding: 28px 20px; }
}

/* ── LANGUAGE SWITCHER ─────────────────────────────────────── */
.lang-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
}
.lang-btn:hover { background: var(--bg-section); }
.lang-switcher .dropdown-menu { min-width: 130px; }

/* ── UDEMY-STYLE COURSE HERO ───────────────────────────────── */
.course-hero {
  background: #1a1a2e;
  color: #fff;
  padding: 50px 0;
}
.course-hero h1 { color: #fff; font-size: 1.9rem; }
.course-hero .text-muted { color: rgba(255,255,255,.7) !important; }
.course-enroll-box {
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
  padding: 24px;
  position: sticky; top: 80px;
}
.course-enroll-price { font-size: 2rem; font-weight: 800; color: var(--primary); }
.what-learn-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 6px 0; font-size: .9rem;
}
.what-learn-item i { color: var(--primary); margin-top: 3px; flex-shrink: 0; }
.lesson-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.lesson-row:hover { background: var(--bg-section); }
.lesson-row .lesson-title { display: flex; align-items: center; gap: 8px; flex: 1; }
.lesson-row .lesson-dur { color: var(--text-muted); font-size: .8rem; flex-shrink: 0; }

@media print {
  .navbar, .site-footer, .top-bar, .btn, nav { display: none !important; }
  body { background: #fff; }
  .invoice-card { box-shadow: none; padding: 0; }
}