/* ==========================================================================
   LeadMinds — course cards
   Used by: home booking section, course archive, related courses.
   Source design: booking-section-merged.html / archive-courses-responsive.html
   All class names are prefixed (lm-…) and fully specified so no other theme
   stylesheet can change them.
   ========================================================================== */

.lm-booking,
.lm-ch {
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  color: #0E2727;
}
.lm-ch *,
.lm-booking * { box-sizing: border-box; }
.lm-ch ul { list-style: none; margin: 0; padding: 0; }
.lm-ch a { text-decoration: none; color: inherit; }

/* ---------- Section heading ---------- */
.lm-booking { background: #F8FAFC; }
.lm-booking .lm-booking-head { padding: 64px 20px 40px; }
.lm-booking .lm-booking-head .lm-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.lm-booking .lm-badge {
  display: inline-flex; align-items: center; height: 28px; padding: 0 14px;
  background: rgba(243, 116, 88, .12); color: #B8441F; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: 0; border: 0;
}
.lm-booking h2.lm-h-title { margin: 0; padding: 0; font-size: clamp(26px, 4vw, 36px); font-weight: 700; line-height: 1.3; color: #0E2727; border: 0; }
.lm-booking h2.lm-h-title::before,
.lm-booking h2.lm-h-title::after { content: none; }
.lm-booking p.lm-h-sub { margin: 0; max-width: 640px; font-size: 16.5px; line-height: 1.75; color: #4C6161; }
@media (max-width: 520px) {
  .lm-booking .lm-booking-head { padding: 44px 16px 32px; }
}

/* ---------- Card ---------- */
.lm-ch .lm-card {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(14, 39, 39, .08); border-radius: 16px;
  overflow: hidden; box-shadow: 0 10px 26px -18px rgba(14, 39, 39, .6);
  text-align: start; padding: 0; margin: 0; transform: none; transition: none;
}
.lm-ch .lm-card::before,
.lm-ch .lm-card::after { content: none; display: none; }
.lm-ch .lm-media { position: relative; margin: 0; aspect-ratio: 16/9; background: #E6E9E8; overflow: hidden; border-radius: 0; }
.lm-ch .lm-media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.lm-ch .lm-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #E6E9E8; color: #9AA6A6; font-size: 12px; font-weight: 600; }
.lm-ch .lm-chip { position: absolute; display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 11px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; margin: 0; }
.lm-ch .lm-chip--delivery { top: 12px; inset-inline-end: 12px; background: rgba(14, 39, 39, .84); color: #fff; }
.lm-ch .lm-chip--discount { top: 12px; inset-inline-start: 12px; background: #F37458; color: #0E2727; direction: ltr; unicode-bidi: isolate; }
.lm-ch .lm-chip--full { bottom: 12px; inset-inline-end: 12px; background: #5A6B6B; color: #fff; }
.lm-ch .lm-cbody { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 18px; }
.lm-ch .lm-taxrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lm-ch .lm-cat { font-size: 13px; font-weight: 700; color: #B8441F; }
.lm-ch .lm-track { font-size: 12.5px; font-weight: 600; color: #4C6161; padding-inline-end: 9px; border-inline-end: 1px solid rgba(14, 39, 39, .08); }
.lm-ch .lm-card h3 { margin: 0; padding: 0; font-size: 17px; font-weight: 700; line-height: 1.55; color: #0E2727; font-family: inherit; }
.lm-ch .lm-card h3::before,
.lm-ch .lm-card h3::after { content: none; }
.lm-ch .lm-desc { margin: 0; font-size: 14.5px; line-height: 1.75; color: #4C6161; }
.lm-ch .lm-meta { margin: 2px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(14, 39, 39, .08); display: flex; flex-wrap: wrap; gap: 8px 14px; }
.lm-ch .lm-meta li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.4; color: #4C6161; margin: 0; padding: 0; }
.lm-ch .lm-meta li::before,
.lm-ch .lm-meta li::marker { content: none; display: none; }
.lm-ch .lm-meta svg { flex: none; color: #6B8080; }
.lm-ch .lm-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.lm-ch .lm-price { display: flex; align-items: baseline; gap: 10px; }
.lm-ch .lm-now { font-size: 22px; font-weight: 700; color: #0E2727; }
.lm-ch .lm-cur { font-size: 14px; font-weight: 600; }
.lm-ch .lm-old { font-size: 14px; font-weight: 500; color: #5F6F6D; }
.lm-ch .lm-inst { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 10px; border-radius: 9px; background: rgba(250, 186, 61, .16); color: #6B4E06; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.lm-ch .lm-inst b { padding: 3px 7px; border-radius: 5px; background: #fff; font-size: 11px; font-weight: 700; color: #0E2727; }
.lm-ch .lm-cta {
  min-height: 48px; display: flex; align-items: center; justify-content: center;
  background: #F37458; color: #0E2727; border-radius: 12px; font-size: 15px; font-weight: 700;
  border: 0; width: 100%; cursor: pointer; font-family: inherit; text-decoration: none;
  padding: 0 16px; box-shadow: none; transition: filter .2s;
}
.lm-ch .lm-cta:hover { filter: brightness(.96); color: #0E2727; }
.lm-ch .lm-cta.is-disabled { background: #E4E8E8; color: #5A6B6B; cursor: default; }
.lm-ch .lm-waitlist { min-height: 44px; margin: 0 18px 18px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #0B2E4A; }
.lm-ch .lm-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #4C6161; }
.lm-ch .lm-rating b { font-weight: 700; color: #0E2727; }
.lm-ch .lm-stars { display: inline-flex; gap: 2px; color: #B07E12; }

/* ---------- Home grid: 4 columns → 2 → mobile carousel ---------- */
.lm-ch .lm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 0 40px 64px; max-width: 1200px; margin: 0 auto; }

@media (max-width: 1100px) and (min-width: 621px) {
  .lm-ch .lm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lm-ch .lm-grid > .lm-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 10px); margin: 0 auto; width: 100%; }
}

@media (max-width: 620px) {
  .lm-ch .lm-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; padding: 4px 20px 8px; margin: 0; max-width: 100%;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .lm-ch .lm-grid::-webkit-scrollbar { display: none; }
  .lm-ch .lm-grid > .lm-card { flex: 0 0 85%; scroll-snap-align: start; }
}

.lm-ch .lm-dots { display: none; justify-content: center; gap: 7px; margin: 4px 0 44px; }
.lm-ch .lm-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(14, 39, 39, .22); transition: all .2s ease; }
.lm-ch .lm-dots span.is-active { width: 20px; border-radius: 4px; background: #F37458; }
@media (max-width: 620px) { .lm-ch .lm-dots { display: flex; } }

.lm-ch .lm-empty { grid-column: 1 / -1; text-align: center; padding: 40px; color: #6b7280; font-size: 17px; }

/* "Browse all courses" link under the grid */
.lm-ch .lm-all { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 1.5px solid #0B2E4A; border-radius: 12px; font-size: 15px; font-weight: 700; color: #0B2E4A; background: transparent; }
.lm-ch .lm-all:hover { background: #0B2E4A; color: #fff; }

/* ---------- Dark mode ---------- */
[data-theme="dark"] .lm-booking { background: #0b1220; }
[data-theme="dark"] .lm-booking h2.lm-h-title { color: #f1f5f9; }
[data-theme="dark"] .lm-booking p.lm-h-sub,
[data-theme="dark"] .lm-ch .lm-desc,
[data-theme="dark"] .lm-ch .lm-meta li,
[data-theme="dark"] .lm-ch .lm-rating { color: #cbd5e1; }
[data-theme="dark"] .lm-ch .lm-card { background: #111a2e; border-color: #1f2a44; }
[data-theme="dark"] .lm-ch .lm-card h3,
[data-theme="dark"] .lm-ch .lm-now,
[data-theme="dark"] .lm-ch .lm-rating b { color: #f1f5f9; }
[data-theme="dark"] .lm-ch .lm-all { color: #cbd5e1; border-color: #cbd5e1; }

/* keep the media link filling the 16:9 box (theme sets img{height:auto}) */
.lm-ch .lm-media > a { display: block; width: 100%; height: 100%; }
.lm-ch .lm-media img { height: 100% !important; width: 100% !important; max-width: none; }