selector {
  font-family: IRANSans;
}

:root {
  --c-card:       #ffffff;
  --c-text:       #1a1f36;
  --c-muted:      #8a94a6;
  --c-teal:       #0d9488;
  --c-teal-dark:  #0f766e;
  --c-teal-light: #e6f7f5;
  --c-border:     rgba(0,0,0,.06);
  --shadow-card:  0 2px 6px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.03);
  --shadow-hover: 0 4px 12px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.06);
  --radius-card:  24px;
  --radius-pill:  50px;
}

/* ── Root / grid ─────────────────────────────────────────────────────────────── */
#courses-root {
  direction: rtl;
  padding: 0 0 4rem;
}

#courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1100px) { #courses-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { #courses-grid { grid-template-columns: 1fr; } }

/* ── Card shell ──────────────────────────────────────────────────────────────── */
.course-card {
  background:     var(--c-card);
  border-radius:  var(--radius-card);
  box-shadow:     var(--shadow-card);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  transition:     transform .22s ease, box-shadow .22s ease;
  animation:      cardIn .35s ease both;
  corner-shape: squircle;
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
@keyframes cardIn {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Banner image (top, square crop) ────────────────────────────────────────── */
.card-banner {
  display:         block;
  width:           100%;
  aspect-ratio:    1/1;
  overflow:        hidden;
  flex-shrink:     0;
  text-decoration: none;
  position:        relative;
  corner-shape: squircle;
  border-top-left-radius:  var(--radius-card);
  border-top-right-radius:  var(--radius-card);
}
.card-banner__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .3s ease;
}
.course-card:hover .card-banner__img { transform: scale(1.04); }

/* Blurred badge strip at bottom of image */
.card-banner__overlay {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    10px 12px;
  display:    flex;
  justify-content: space-between;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 100%);
}

.banner-badge {
  display:        inline-flex;
  align-items:    center;
  padding:        5px 12px;
  border-radius:  var(--radius-pill);
  font-size:      .78rem;
  font-weight:    700;
  color:          #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space:    nowrap;
  letter-spacing: .2px;
}
.banner-badge.badge--onsite { background: rgba(13,148,136,.65); }
.banner-badge.badge--online { background: rgba(37,99,235,.65); }
.banner-badge.badge--hybrid { background: rgba(217,119,6,.65); }

/* ── Card body: column of rows ───────────────────────────────────────────────── */
.card-body {
  display:        flex;
  flex-direction: column;
  gap:            .55rem;
  padding:        .85rem 1rem;
  flex:           1;
  width: 100%;
}

/* Shared row base */
.card-row {
  display:     flex;
  align-items: center;
  gap:         .45rem;
  min-width:   0;
  justify-content: space-between;
}

/* Row 1: teacher avatars + course name */
.card-row--title {
  gap: .6rem;
}
.card-title {
  margin:        0;
  font-size:     .95rem;
  font-weight:   800;
  color:         var(--c-text);
  line-height:   1.3;
  word-break:    break-word;
  flex:          1;
}

/* Row 2: date */
.card-row--date { }
.card-row__icon { font-size: .8rem; color: var(--c-muted); font-weight: 500; }
.card-row__text { font-size: .8rem; color: var(--c-muted); font-weight: 500; }
.card-row__text--muted { color: var(--c-muted); }

/* Row 3: days */
.card-row--days { flex-wrap: wrap; align-items: flex-start; }

/* Day chips */
.day-chips {
  display:  flex;
  flex-wrap: wrap;
  gap:      4px;
}
.day-chip {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: 20px;
  font-size:     .65rem;
  font-weight:   600;
  background:    #e0f2fe;
  color:         #0369a1;
  white-space:   nowrap;
  line-height:   1.6;
}
.day-chip--empty { background:transparent; color:var(--c-muted); font-weight:400; }

/* Row 4: footer — CTA left, seats right */
.card-row--footer {
  margin-top:      auto;   /* push to bottom if card-body has extra space */
  padding-top:     .3rem;
  border-top:      1px solid var(--c-border);
  justify-content: space-between;
  align-items:     center;
  flex-direction: row-reverse;
}

.btn-more {
  display:         inline-block;
  padding:         8px 18px;
  border-radius:   var(--radius-pill);
  background:      var(--c-teal);
  color:           #fff;
  font-size:       .82rem;
  font-weight:     700;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background .18s, transform .18s;
  flex-shrink:     0;
}
.btn-more:hover { color:#fff; background: var(--c-teal-dark); transform: translateY(-1px); }

/* Seat info */
.seat-info {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  line-height:    1.2;
}
.seat-info__label {
  font-size:   .65rem;
  color:       var(--c-muted);
  font-weight: 500;
}
.seat-info__nums {
  font-size:   .85rem;
  font-weight: 700;
  color:       var(--c-text);
}
.seat-info__total { font-size:.7rem; font-weight:400; color:var(--c-muted); }
.seat--low  .seat-info__nums { color: #d97706; }
.seat--full .seat-info__nums { color: #dc2626; }

/* ── Teacher avatar stack ─────────────────────────────────────────────────────── */
.teacher-stack {
  display:        flex;
  flex-direction: row-reverse;
  align-items:    center;
  flex-shrink:    0;
}
.teacher-avatar + .teacher-avatar { margin-left: -10px; }
.teacher-avatar {
  width:          36px;
  height:         36px;
  border-radius:  50%;
  border:         0px solid var(--c-card);
  overflow:       hidden;
  display:        flex;
  align-items:    center;
  justify-content: center;
  background:     #e2e8f0;
  font-size:      .7rem;
  font-weight:    700;
  color:          var(--c-text);
  cursor:         default;
  flex-shrink:    0;
  transition:     transform .18s;
  position:       relative;
}
.teacher-avatar:hover         { transform: scale(1.1); z-index: 10; }
.teacher-avatar img           { width:100%; height:100%; object-fit:cover; display:block; }
.teacher-avatar--initials     { background: linear-gradient(135deg,#6366f1,#0d9488); color:#fff; }
.teacher-avatar--extra        { background: #f1f5f9; color:var(--c-muted); font-size:.68rem; }

/* ── Language filter + search bar ────────────────────────────────────────────── */
#courses-filter {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-bottom:  1.5rem;
  direction:      rtl;
}

.filter-search-wrap {
  position:  relative;
  width:     100%;
  max-width: 380px;
}
.filter-search-icon {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--c-muted);
  pointer-events: none;
}
.filter-search-input {
  width:       100%;
  padding:     9px 38px 9px 14px;
  border-radius: var(--radius-pill);
  border:      2px solid #e2e8f0;
  background:  #fff;
  color:       var(--c-text);
  font-size:   .875rem;
  outline:     none;
  box-sizing:  border-box;
  transition:  border-color .18s;
}
.filter-search-input:focus       { border-color: var(--c-teal); }
.filter-search-input::placeholder{ color: var(--c-muted); }

.filter-tabs-row { display:flex; flex-wrap:wrap; gap:8px; }

.filter-tab {
  display:      inline-flex;
  align-items:  center;
  padding:      6px 16px;
  border-radius: 20px;
  border:       2px solid #e2e8f0;
  background:   #fff;
  color:        var(--c-muted);
  font-size:    .83rem;
  font-weight:  600;
  cursor:       pointer;
  transition:   border-color .18s, background .18s, color .18s;
  white-space:  nowrap;
}
.filter-tab:hover         { border-color:var(--c-teal); color:var(--c-teal); }
.filter-tab--active       { background:var(--c-teal); border-color:var(--c-teal); color:#fff; }
.filter-tab--active:hover { background:var(--c-teal-dark); border-color:var(--c-teal-dark); }

/* ── Skeleton ────────────────────────────────────────────────────────────────── */
.course-card--skeleton { pointer-events:none; animation:none; }
@keyframes shimmer {
  0%   { background-position:-600px 0; }
  100% { background-position: 600px 0; }
}
.sk-banner,.sk-pill,.sk-btn,.sk-line,.sk-avatar {
  background:      linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
  background-size: 600px 100%;
  animation:       shimmer 1.4s infinite linear;
}
.sk-banner       { width:100%; aspect-ratio:1/1; }
.sk-pill         { height:30px; width:100px; border-radius:50px; }
.sk-btn          { height:34px; width:110px; border-radius:50px; }
.sk-line         { height:11px; border-radius:6px; margin-bottom:4px; width:80%; }
.sk-line--wide   { width:95%; }
.sk-line--short  { width:50%; }
.sk-line--med    { width:70%; }
.sk-avatars      { display:flex; flex-direction:row-reverse; }
.sk-avatar       { width:36px; height:36px; border-radius:50%; border:2.5px solid #fff; flex-shrink:0; }
.sk-avatar+.sk-avatar { margin-left:-10px; }

/* ── Misc ────────────────────────────────────────────────────────────────────── */
.courses-error    { grid-column:1/-1; text-align:center; color:#ef4444; font-size:.9rem; padding:2rem; }
#courses-end-msg  { color:var(--c-muted); font-size:.875rem; text-align:center; padding:2rem; direction:rtl; }
#courses-sentinel { height:1px; }