:root {
  --courses-dark: #0F3D3E;
  --courses-teal: #2F7D6B;
  --courses-cream: #F6F3EA;
  --courses-orange: #E39B3A;
  --courses-border: #DCEEE8;
  --courses-teal-hover: #256657;
}

/* Listing page background (Helix main body) */
body.com_silec.view-courses #sp-main-body {
  background-color: var(--courses-cream);
}

/* Catalogue banner module — only meaningful on listing */
body.com_silec.view-courses .courses-banner {
  background: linear-gradient(90deg, #0F3D3E 0%, #1A5354 50%, #0F3D3E 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  box-shadow: 0 20px 40px rgba(15, 61, 62, 0.18);
  color: #fff;
  position: relative;
  overflow: hidden;
}

body.com_silec.view-courses .courses-banner__inner {
  position: relative;
  z-index: 2;
  padding: 2rem 1.5rem;
  max-width: 48rem;
}

@media (min-width: 576px) {
  body.com_silec.view-courses .courses-banner__inner {
    padding: 2.75rem 2.5rem;
  }
}

body.com_silec.view-courses .courses-banner__orb {
  position: absolute;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
  z-index: 1;
}

body.com_silec.view-courses .courses-banner__orb--teal {
  top: -30%;
  right: -8%;
  background: rgba(47, 125, 107, 0.32);
}

body.com_silec.view-courses .courses-banner__orb--orange {
  bottom: -35%;
  left: -10%;
  background: rgba(227, 155, 58, 0.22);
}

body.com_silec.view-courses .courses-banner__eyebrow {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #E39B3A !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}

body.com_silec.view-courses .courses-banner__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  color: #fff !important;
}

body.com_silec.view-courses .courses-banner__lead {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.65;
  color: #DCEEE8 !important;
  margin-bottom: 0;
}

body.com_silec.view-courses .courses-banner__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.75rem;
  font-weight: 700;
}

body.com_silec.view-courses .courses-banner__chip--accent {
  background: #E39B3A;
  border-color: #E39B3A;
  color: #fff;
}

body.com_silec.view-courses .moduletable.courses-banner-mod,
body.com_silec.view-courses .courses-banner-mod {
  margin: 0 0 1.5rem;
}

.courses-catalogue.is-filtering #courses-listing-results {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.courses-catalogue #courses-listing-results {
  transition: opacity 0.2s ease;
}

/* .courses-catalogue__inner {max-width: 1140px;} */

.courses-catalogue .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Filter toolbar */
.courses-toolbar {
  background: #fff;
  border: 1px solid var(--courses-border);
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(15, 61, 62, 0.04);
}

.courses-toolbar__panel {
  border-radius: inherit;
}

.courses-search .input-group {
  background: rgba(246, 243, 234, 0.6);
  border: 1px solid var(--courses-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.courses-search__icon,
.courses-search__input,
.courses-search__clear {
  background: transparent !important;
  color: var(--courses-dark);
}

.courses-search__input {
  font-size: 0.875rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.courses-search__input:focus {
  box-shadow: none;
}

.courses-search .input-group:focus-within {
  box-shadow: 0 0 0 0.15rem rgba(47, 125, 107, 0.25);
  border-color: var(--courses-teal);
}

.courses-toolbar__mobile-toggle {
  background: var(--courses-cream);
  border: 1px solid var(--courses-border);
  border-radius: 0.75rem;
  color: var(--courses-dark);
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.courses-toolbar__secondary {
  border-top: 1px solid var(--courses-border);
}

.courses-toolbar__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--courses-dark);
  margin-bottom: 0.25rem;
}

.courses-toolbar__select {
  background: rgba(246, 243, 234, 0.8);
  border: 1px solid var(--courses-border);
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--courses-dark);
}

.courses-toolbar__select:focus {
  border-color: var(--courses-teal);
  box-shadow: 0 0 0 0.15rem rgba(47, 125, 107, 0.2);
}

.courses-toolbar__price-value {
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--courses-teal);
}

.courses-toolbar__range {
  accent-color: var(--courses-teal);
  cursor: pointer;
}

.courses-toolbar__active {
  border-top: 1px solid rgba(220, 238, 232, 0.6);
}

.courses-toolbar__chip {
  background: rgba(47, 125, 107, 0.1);
  color: var(--courses-teal);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
}

.courses-toolbar__reset {
  color: var(--courses-orange);
  text-decoration: none;
}

.courses-toolbar__reset:hover {
  text-decoration: underline;
  color: var(--courses-orange);
}

/* Buttons — match Node booking UI */
.btn-courses-primary {
  background-color: var(--courses-teal);
  color: #fff;
  border: 1px solid var(--courses-teal);
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.5rem 0.9rem;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(15, 61, 62, 0.06);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-courses-primary:hover,
.btn-courses-primary:focus {
  background-color: var(--courses-teal-hover);
  border-color: var(--courses-teal-hover);
  color: #fff;
  transform: translateY(-1px);
}

.btn-courses-outline {
  background: #fff;
  color: var(--courses-dark);
  border: 1px solid var(--courses-border);
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.5rem 0.85rem;
  line-height: 1.2;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-courses-outline:hover,
.btn-courses-outline:focus {
  background: var(--courses-cream);
  color: var(--courses-dark);
  border-color: rgba(47, 125, 107, 0.45);
}

/* Empty state */
.courses-empty {
  background: #fff;
  border: 1px solid var(--courses-border);
  border-radius: 1.5rem;
}

.courses-empty__title {
  color: var(--courses-dark);
}

/* Course cards */
.course-card {
  background: #fff;
  border: 1px solid var(--courses-border);
  border-radius: 1.5rem;
  box-shadow: 0 4px 12px rgba(15, 61, 62, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(15, 61, 62, 0.08);
  border-color: rgba(47, 125, 107, 0.4);
}

.course-card__media {
  background: #e8f2ef;
  overflow: hidden;
}

.course-card__image {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.course-card:hover .course-card__image {
  transform: scale(1.05);
}

.course-card__image--placeholder {
  background: linear-gradient(135deg, #dceee8, #f6f3ea);
}

.course-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
  opacity: 0.85;
  pointer-events: none;
}

.course-card__badges-top,
.course-card__badges-bottom {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}

.course-card__badges-top {
  top: 0;
}

.course-card__badges-bottom {
  bottom: 0;
}

.course-card__category {
  background-color: rgba(15, 61, 62, 0.92);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 50px;
}

.course-card__age {
  background: rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 600;
}

.course-card__meta {
  font-size: 11px;
  font-weight: 500;
}

.course-card__difficulty {
  display: inline-flex;
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  background: var(--courses-cream);
  color: var(--courses-dark);
  font-size: 11px;
  font-weight: 700;
}

.course-card__title {
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.35;
  margin: 0;
}

.course-card__title a {
  color: var(--courses-dark);
}

.course-card__title a:hover {
  color: var(--courses-teal);
}

.course-card__desc {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card__capacity {
  border-top: 1px solid rgba(220, 238, 232, 0.65);
  font-size: 11px;
}

.course-card__capacity-value {
  color: var(--courses-teal);
}

.course-card__capacity-bar {
  height: 6px;
  background: var(--courses-cream);
  border-radius: 999px;
  overflow: hidden;
}

.course-card__capacity-bar .progress-bar {
  background-color: var(--courses-teal);
  border-radius: 999px;
}

.course-card__footer {
  border-top: 1px solid var(--courses-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.course-card__price-block {
  min-width: 0;
  flex: 1 1 auto;
}

.course-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.course-card__book-form {
  display: inline-flex;
  margin: 0;
}

/* Eye button — Node: white + #DCEEE8 border, hover cream */
.course-card__detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  margin: 0;
  background: #fff;
  color: var(--courses-dark);
  border: 1px solid #DCEEE8;
  border-radius: 0.75rem;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.course-card__detail-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}

.course-card__detail-btn:hover,
.course-card__detail-btn:focus {
  background: #F6F3EA;
  border-color: #DCEEE8;
  color: var(--courses-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Book button — Node: #2F7D6B fill, hover #256657 */
.course-card__book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 2.5rem;
  padding: 0 0.85rem;
  margin: 0;
  background: #2F7D6B;
  color: #fff;
  border: 1px solid #2F7D6B;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 61, 62, 0.08);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.course-card__book-btn svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #fff;
}

.course-card__book-btn:hover,
.course-card__book-btn:focus {
  background: #256657;
  border-color: #256657;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(47, 125, 107, 0.28);
}

.course-card__book-btn:disabled,
.course-card__book-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.course-card__price {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--courses-teal);
  line-height: 1;
}

.course-card__price-old {
  font-size: 0.75rem;
  color: #9ca3af;
  text-decoration: line-through;
}

.course-card__price-note {
  display: block;
  font-size: 9px;
  line-height: 1.2;
  margin-top: 3px;
  color: #6b7280;
  font-weight: 600;
}

/* Pagination */
.courses-pagination {
  text-align: center;
}

.courses-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.courses-pagination a,
.courses-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--courses-border);
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--courses-dark);
  background: #fff;
  text-decoration: none;
}

.courses-pagination .active span {
  background: var(--courses-teal);
  border-color: var(--courses-teal);
  color: #fff;
}

@media (max-width: 575px) {
  .course-card__image {
    height: 160px;
  }

  .course-card__footer {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }

  .course-card__price {
    font-size: 1rem;
  }

  .course-card__detail-btn,
  .course-card__book-btn {
    height: 2.35rem;
  }

  .course-card__detail-btn {
    width: 2.35rem;
  }

  .course-card__book-btn {
    padding: 0 0.7rem;
    font-size: 0.7rem;
  }
}

/* Course detail view only — do not load on other pages */
:root {
  --course-dark: #0F3D3E;
  --course-teal: #2F7D6B;
  --course-cream: #F6F3EA;
  --course-orange: #E39B3A;
  --course-border: #DCEEE8;
  --course-teal-hover: #256657;
}

body.com_silec.view-course #sp-main-body {
  background-color: var(--course-cream);
}

/* Banner module is listing-only */
body.com_silec.view-course .courses-banner-mod,
body.com_silec.view-course .moduletable.courses-banner-mod,
body.com_silec.view-course .courses-banner {
  display: none !important;
}

.course-view {
  color: var(--course-dark);
  background: var(--course-cream);
  padding: 1.5rem 0 3rem;
}

.com-courses a.course-back,
.com-courses .course-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--course-teal, #2F7D6B);
  background: #fff;
  border: 1.5px solid var(--course-teal, #2F7D6B);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(15, 61, 62, 0.06);
  line-height: 1.2;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.com-courses a.course-back:hover,
.com-courses a.course-back:focus,
.com-courses .course-back:hover,
.com-courses .course-back:focus {
  color: var(--course-dark, #0F3D3E);
  border-color: var(--course-dark, #0F3D3E);
  background: #fff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(15, 61, 62, 0.1);
}

.com-courses a.course-back svg,
.com-courses .course-back svg {
  flex-shrink: 0;
}

.course-panel {
  background: #fff;
  border: 1px solid var(--course-border);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(15, 61, 62, 0.04);
}

@media (min-width: 576px) {
  .course-panel {
    padding: 2rem;
  }
}

.course-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

.course-tag-category {
  background: var(--course-dark);
  color: #fff;
  text-transform: uppercase;
}

.course-tag-age {
  background: rgba(47, 125, 107, 0.1);
  color: var(--course-teal);
  border: 1px solid rgba(47, 125, 107, 0.2);
}

.course-tag-level {
  background: var(--course-cream);
  color: var(--course-dark);
  border: 1px solid var(--course-border);
}

.course-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--course-dark);
  margin: 0 0 1.25rem;
}

.course-cover {
  border-radius: 1rem;
  height: 16rem;
  box-shadow: 0 8px 20px rgba(15, 61, 62, 0.12);
}

@media (min-width: 576px) {
  .course-cover {
    height: 20rem;
  }
}

.course-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.course-cover-placeholder {
  background: linear-gradient(135deg, #dceee8, #f6f3ea);
}

.course-cover-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 55%);
  pointer-events: none;
}

.course-specs {
  margin: 0;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(246, 243, 234, 0.7);
  border: 1px solid var(--course-border);
}

.course-spec-label {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.course-spec-value {
  font-size: 0.875rem;
  font-weight: 900;
  color: var(--course-dark);
}

.course-spec-accent {
  color: var(--course-teal);
}

.course-heading {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--course-dark);
  margin: 0 0 1rem;
}

.course-heading-icon {
  color: var(--course-teal);
  display: inline-flex;
}

.course-learn-text {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.65;
  color: #4b5563;
}



.course-teacher-avatar {
  width: 80px;
  height: 80px;
  border-radius: 1rem;
  object-fit: cover;
  border: 2px solid rgba(47, 125, 107, 0.3);
  box-shadow: 0 4px 12px rgba(15, 61, 62, 0.04);
  flex-shrink: 0;
}

.course-teacher-avatar-placeholder {
  background: var(--course-cream);
  color: var(--course-dark);
  font-size: 1.75rem;
  font-weight: 900;
}

.course-teacher-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--course-teal);
}

.course-teacher-name {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--course-dark);
}

.course-teacher-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
}

.course-teacher-bio {
  font-size: 0.8rem;
  font-weight: 500;
  color: #4b5563;
  line-height: 1.6;
}

.course-card__teacher-avatar {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 1px solid rgba(47, 125, 107, 0.3);
  flex-shrink: 0;
}

.course-card__teacher-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--course-cream);
  color: var(--course-dark);
  font-size: 11px;
  font-weight: 800;
}

.course-card__teacher-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--course-dark);
}




.course-curriculum-head {
  border-bottom: 1px solid var(--course-border);
}

.course-curriculum-meta {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}

.course-hours-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--course-teal);
  background: rgba(47, 125, 107, 0.1);
  border: 1px solid rgba(47, 125, 107, 0.2);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
}

.course-buy-full {
  padding: 0.9rem 1rem;
  border: 1px solid var(--course-border);
  border-radius: 1rem;
  background: rgba(246, 243, 234, 0.65);
}

.course-buy-full .course-add-btn {
  margin-right: 0;
}

.course-buy-full-title {
  font-size: 0.875rem;
  font-weight: 900;
  color: var(--course-dark);
}

.course-buy-full-meta {
  font-size: 0.75rem;
  color: var(--course-teal);
  font-weight: 700;
}

.course-check-wrap {
  display: inline-flex;
  align-items: center;
  padding-left: 1rem;
}

.course-check {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--course-teal);
  cursor: pointer;
}

.course-module-head,
.course-lesson-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.course-lesson-toggle-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.course-lesson-main {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}

.course-lesson-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.course-lesson-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.course-selection-summary {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}

.course-book-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.course-module,
.course-lesson {
  border: 1px solid var(--course-border);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.course-module.is-open {
  border-color: var(--course-teal);
  box-shadow: 0 2px 8px rgba(47, 125, 107, 0.08);
}

.course-lesson.is-open {
  border-color: var(--course-teal);
  background: rgba(246, 243, 234, 0.3);
}

.course-module-toggle,
.course-lesson-toggle {
  background: transparent;
  border: 0;
  padding: 1rem 0.75rem;
  color: inherit;
  min-width: 0;
}

.course-module-toggle:hover,
.course-lesson-toggle:hover {
  background: rgba(246, 243, 234, 0.35);
}

.course-module-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--course-teal);
}

.course-module-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--course-dark);
}

.course-module-count {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
  margin-top: 0.15rem;
}

.course-chevron {
  color: #9ca3af;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.course-module.is-open > .course-module-toggle .course-chevron,
.course-lesson.is-open > .course-lesson-toggle .course-chevron {
  transform: rotate(180deg);
  color: var(--course-dark);
}

.course-module-body {
  padding: 0 1.15rem 1.15rem;
  border-top: 1px solid rgba(220, 238, 232, 0.6);
}

.course-module-desc {
  font-size: 0.8rem;
  color: #4b5563;
  font-weight: 500;
  margin: 0.85rem 0 1rem;
}

.course-lesson-toggle {
  padding: 0.85rem 0.5rem;
}

.course-lesson-num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: var(--course-cream);
  color: var(--course-dark);
  font-size: 0.75rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.course-lesson.is-open .course-lesson-num {
  background: var(--course-teal);
  color: #fff;
}

.course-lesson-num.is-trial {
  background: var(--course-orange);
  color: #fff;
}

.course-lesson.is-open .course-lesson-num.is-trial {
  background: var(--course-orange);
  color: #fff;
}

.course-lesson-title {
  font-size: 0.875rem;
  font-weight: 900;
  color: var(--course-dark);
  line-height: 1.35;
  word-break: break-word;
}

.course-lesson-duration {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
  margin-top: 0.15rem;
}

.course-lesson-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid rgba(220, 238, 232, 0.6);
}

.course-lesson-desc {
  font-size: 0.8rem;
  color: #4b5563;
  font-weight: 500;
  line-height: 1.6;
  margin: 0.85rem 0 1rem;
}

.course-doc {
  padding: 1rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid var(--course-border);
}

.course-doc + .course-doc {
  margin-top: 0.65rem;
}

.course-doc-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: rgba(47, 125, 107, 0.1);
  color: var(--course-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.course-doc-name {
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--course-dark);
}

.course-doc-meta {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
}

.course-doc-btn {
  background: var(--course-teal);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
}

.course-doc-btn:hover {
  background: var(--course-teal-hover);
  color: #fff;
}

.course-doc-locked {
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.45rem 0.75rem;
}

.course-aside-col {
  align-self: stretch;
}

.course-aside {
  position: -webkit-sticky;
  position: sticky;
  top: 7rem;
  z-index: 5;
}

body.com_silec.view-course #sp-main-body,
body.com_silec.view-course #sp-component,
body.com_silec.view-course .course-view,
body.com_silec.view-course .course-view > .container,
body.com_silec.view-course .course-view .row {
  overflow: visible !important;
}

.course-aside-card {
  background: #fff;
  border: 2px solid var(--course-border);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 12px 28px rgba(15, 61, 62, 0.1);
}

.course-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  margin: 0 0.65rem 0 0;
  flex-shrink: 0;
  background: #fff;
  color: #2F7D6B;
  border: 1px solid #2F7D6B;
  border-radius: 0.75rem;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.course-add-btn:hover,
.course-add-btn:focus {
  background: #2F7D6B;
  color: #fff;
  border-color: #2F7D6B;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(47, 125, 107, 0.25);
}

.course-add-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.course-add-btn__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.course-lesson-trial {
  display: inline-flex;
  align-items: center;
  background: rgba(227, 155, 58, 0.18);
  color: #d48c2b;
  border: 1px solid rgba(227, 155, 58, 0.35);
  font-size: 10px;
  font-weight: 800;
  text-transform: none;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  line-height: 1.2;
  white-space: nowrap;
}

.course-cart-feedback {
  min-height: 1.25rem;
}

.course-price-box {
  border-bottom: 1px solid var(--course-border);
}

.course-price-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.course-price {
  font-size: 1.875rem;
  font-weight: 900;
  color: var(--course-teal);
  line-height: 1;
}

.course-price-old {
  font-size: 0.875rem;
  color: #9ca3af;
  text-decoration: line-through;
}

.course-sale-badge {
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
  font-weight: 900;
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
}

.course-capacity {
  padding: 1rem;
  border-radius: 1rem;
  background: var(--course-cream);
  border: 1px solid var(--course-border);
}

.course-capacity-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--course-dark);
}

.course-capacity-label svg {
  color: var(--course-teal);
}

.course-capacity-value {
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--course-teal);
}

.course-capacity-bar {
  height: 0.5rem;
  background: #fff;
  border: 1px solid var(--course-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.course-capacity-bar .progress-bar {
  background: var(--course-teal);
}

.course-capacity-note {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
}

.course-book-btn {
  background: var(--course-teal);
  color: #fff;
  border: 1px solid var(--course-teal);
  border-radius: 1rem;
  font-weight: 900;
  font-size: 0.875rem;
  padding: 0.9rem 1rem;
  box-shadow: 0 6px 14px rgba(47, 125, 107, 0.25);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.course-book-btn:hover,
.course-book-btn:focus {
  background: var(--course-teal-hover);
  border-color: var(--course-teal-hover);
  color: #fff;
}

.course-trust {
  padding-top: 0.85rem;
  border-top: 1px solid var(--course-border);
  font-size: 0.75rem;
  color: #4b5563;
  font-weight: 500;
}

.course-trust-icon {
  color: var(--course-teal);
  display: inline-flex;
  flex-shrink: 0;
}

.course-trust-icon svg {
  width: 16px;
  height: 16px;
}

/* Cart + sticky fixes for course flow */
body.com_silec.view-cart #sp-main-body { background-color: var(--courses-cream, #F6F3EA); }
body.com_silec.view-cart .courses-banner-mod,
body.com_silec.view-cart .moduletable.courses-banner-mod,
body.com_silec.view-cart .courses-banner { display: none !important; }
.courses-cart { color: var(--courses-dark, #0F3D3E); padding: 1.5rem 0 3rem; }
.courses-cart-empty { background:#fff; border:1px solid var(--courses-border,#DCEEE8); border-radius:1.5rem; padding:3rem 1.5rem; text-align:center; max-width:36rem; margin:2rem auto; }
.courses-cart-empty-icon { width:5rem; height:5rem; border-radius:50%; background:var(--courses-cream,#F6F3EA); color:#9ca3af; display:inline-flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.courses-cart-empty-title { font-size:1.5rem; font-weight:900; color:var(--courses-dark,#0F3D3E); margin-bottom:.5rem; }
.courses-cart-empty-text { font-size:.75rem; font-weight:500; color:#6b7280; margin-bottom:1.5rem; }
.courses-cart-head { margin-bottom:2rem; }
.courses-cart-title { font-size:clamp(1.25rem,2.5vw,1.5rem); font-weight:900; color:var(--courses-dark,#0F3D3E); margin:0; display:inline-flex; align-items:center; gap:.5rem; }
.courses-cart-title svg { color:var(--courses-teal,#2F7D6B); }
.courses-cart-panel { background:#fff; border:1px solid var(--courses-border,#DCEEE8); border-radius:1.5rem; padding:1.5rem; box-shadow:0 2px 8px rgba(15,61,62,.04); }
.courses-cart-panel-head { border-bottom:1px solid var(--courses-border,#DCEEE8); padding-bottom:.75rem; margin-bottom:1rem; font-size:.75rem; font-weight:700; color:#6b7280; }
.courses-cart-clear { color:#ef4444; font-size:.75rem; font-weight:700; background:none; border:0; padding:0; display:inline-flex; align-items:center; gap:.25rem; text-decoration:none; }
.courses-cart-clear:hover { color:#dc2626; text-decoration:underline; }
.courses-cart-item { padding-top:1rem; border-top:1px solid rgba(220,238,232,.6); }
.courses-cart-item:first-child { padding-top:0; border-top:0; }
.courses-cart-thumb { width:5rem; height:4rem; object-fit:cover; border-radius:.75rem; border:1px solid var(--courses-border,#DCEEE8); flex-shrink:0; }
.courses-cart-thumb-placeholder { background:linear-gradient(135deg,#dceee8,#f6f3ea); }
.courses-cart-badge { display:inline-block; background:var(--courses-cream,#F6F3EA); color:var(--courses-dark,#0F3D3E); font-size:10px; font-weight:900; text-transform:uppercase; padding:.15rem .5rem; border-radius:.25rem; margin-bottom:.25rem; }
.courses-cart-item-title { font-size:.875rem; font-weight:900; color:var(--courses-dark,#0F3D3E); margin:0 0 .15rem; line-height:1.35; }
.courses-cart-item-meta { font-size:11px; font-weight:500; color:#6b7280; margin:0; }
.courses-cart-item-price { font-size:1rem; font-weight:900; color:var(--courses-teal,#2F7D6B); display:block; }
.courses-cart-item-price-old { font-size:10px; color:#9ca3af; text-decoration:line-through; display:block; }
.courses-cart-remove { border:0; background:transparent; color:#9ca3af; padding:.5rem; border-radius:.75rem; line-height:1; }
.courses-cart-remove:hover { color:#ef4444; background:#fef2f2; }
.courses-cart-member { padding:1rem; border-radius:1rem; background:rgba(47,125,107,.1); border:1px solid rgba(47,125,107,.2); margin-top:1rem; }
.courses-cart-member-title { display:block; font-size:.75rem; font-weight:900; color:var(--courses-dark,#0F3D3E); }
.courses-cart-member-text { display:block; font-size:11px; font-weight:500; color:#4b5563; }
.courses-cart-summary { background:#fff; border:2px solid var(--courses-border,#DCEEE8); border-radius:1.5rem; padding:1.5rem; box-shadow:0 8px 20px rgba(15,61,62,.08); }
.courses-cart-summary-title { font-size:1.125rem; font-weight:900; color:var(--courses-dark,#0F3D3E); padding-bottom:.75rem; margin:0 0 1.25rem; border-bottom:1px solid var(--courses-border,#DCEEE8); }
.courses-cart-promo-label { display:block; font-size:.75rem; font-weight:700; color:var(--courses-dark,#0F3D3E); margin-bottom:.35rem; }
.courses-cart-promo-input { background:var(--courses-cream,#F6F3EA); border:1px solid var(--courses-border,#DCEEE8); border-radius:.75rem; font-size:.75rem; font-weight:500; text-transform:uppercase; color:var(--courses-dark,#0F3D3E); }
.courses-cart-promo-input:focus { border-color:var(--courses-teal,#2F7D6B); box-shadow:0 0 0 .15rem rgba(47,125,107,.2); }
.courses-cart-promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--courses-dark, #0F3D3E);
  color: #fff;
  border: 1.5px solid var(--courses-dark, #0F3D3E);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.55rem 1.25rem;
  white-space: nowrap;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 61, 62, 0.12);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.courses-cart-promo-btn:hover,
.courses-cart-promo-btn:focus {
  background: var(--courses-teal-hover, #256657);
  border-color: var(--courses-teal-hover, #256657);
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 61, 62, 0.16);
}
.courses-cart-breakdown { font-size:.75rem; font-weight:500; border-top:1px solid var(--courses-border,#DCEEE8); padding-top:.75rem; margin-top:1rem; }
.courses-cart-breakdown-row { display:flex; justify-content:space-between; color:#4b5563; margin-bottom:.5rem; }
.courses-cart-breakdown-row.is-save { color:#15803d; font-weight:700; }
.courses-cart-breakdown-row.is-promo { color:var(--courses-orange,#E39B3A); font-weight:700; }
.courses-cart-total { border-top:1px solid var(--courses-border,#DCEEE8); padding-top:.75rem; margin-top:.75rem; display:flex; justify-content:space-between; align-items:baseline; }
.courses-cart-total-label { font-size:.875rem; font-weight:900; color:var(--courses-dark,#0F3D3E); }
.courses-cart-total-value { font-size:1.5rem; font-weight:900; color:var(--courses-teal,#2F7D6B); }
.courses-cart-checkout { width:100%; margin-top:1.25rem; background:var(--courses-teal,#2F7D6B); color:#fff; border:0; border-radius:1rem; font-weight:900; font-size:.875rem; padding:.9rem 1rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; box-shadow:0 6px 14px rgba(47,125,107,.25); }
.courses-cart-checkout:hover { background:var(--courses-teal-hover,#256657); color:#fff; }
.courses-cart-secure { display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:11px; font-weight:700; color:#6b7280; margin-top:.75rem; }
.courses-cart-secure svg { color:var(--courses-teal,#2F7D6B); }
body.com_silec.view-course .course-layout-row { align-items: stretch !important; }
body.com_silec.view-course .course-aside-col { align-self: stretch !important; }
body.com_silec.view-course .course-aside { position:-webkit-sticky !important; position:sticky !important; top:7rem !important; z-index:20; }
body.com_silec.view-course #sp-main,
body.com_silec.view-course #sp-main-body,
body.com_silec.view-course #sp-component,
body.com_silec.view-course .body-innerwrapper,
body.com_silec.view-course .sp-page-container,
body.com_silec.view-course .course-view,
body.com_silec.view-course .course-view > .container,
body.com_silec.view-course .course-layout-row { overflow: visible !important; }

.course-cover-video,
.course-cover-carousel {
  border-radius: 1rem;
  overflow: hidden;
  background: #000;
}

.course-cover-carousel .course-cover-img {
  height: 16rem;
  object-fit: cover;
}

@media (min-width: 576px) {
  .course-cover-carousel .course-cover-img {
    height: 20rem;
  }
}

.course-aside-short {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #4b5563;
  border-bottom: 1px solid var(--course-border, #DCEEE8);
}

/* Responsive: listing + detail on phones / small tablets */
@media (max-width: 767.98px) {
  .courses-toolbar__panel {
    padding: 0.85rem !important;
  }

  .course-card__footer {
    flex-wrap: nowrap;
    align-items: center;
  }

  .course-card__book-label {
    display: none;
  }

  .course-card__book-btn {
    width: 2.35rem;
    padding: 0;
  }

  .course-module-head,
  .course-lesson-head {
    align-items: center;
    gap: 0.15rem;
  }

  .course-check-wrap {
    padding-left: 0.65rem;
  }

  .course-module-toggle,
  .course-lesson-toggle {
    padding-left: 0.35rem;
    padding-right: 0.25rem;
  }

  .course-add-btn {
    margin-right: 0.5rem;
    width: 2.2rem;
    height: 2.2rem;
  }

  .course-lesson-main {
    gap: 0.55rem;
  }

  .course-lesson-num {
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    font-size: 0.7rem;
  }

  .course-lesson-title {
    font-size: 0.8rem;
  }

  .course-lesson-trial {
    font-size: 9px;
    padding: 0.12rem 0.4rem;
  }

  .course-aside {
    position: static !important;
    top: auto !important;
  }

  .course-aside-card {
    padding: 1.15rem;
  }

  .course-book-btn {
    font-size: 0.8125rem;
    padding: 0.85rem 0.9rem;
  }

  .course-doc {
    align-items: stretch !important;
  }

  .course-doc-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .course-module-title {
    font-size: 0.875rem;
  }

  .course-lesson-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .course-cover-carousel .course-cover-img,
  .course-hero-panel .course-cover-img {
    height: 12rem;
  }

  .course-card__price {
    font-size: 0.95rem;
  }

  .course-card__detail-btn,
  .course-card__book-btn {
    width: 2.25rem;
    height: 2.25rem;
  }
}

@media (max-width: 380px) {
  .course-card__actions {
    gap: 0.3rem;
  }

  .course-card__detail-btn,
  .course-card__book-btn {
    width: 2.1rem;
    height: 2.1rem;
  }
}














/* ---------------------------------------------------------------------------
   Course custom fields — rendered on the detail page at the position chosen
   for each field in the backend (above/below image, price or description).
   --------------------------------------------------------------------------- */

.course-cf {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* The image and price positions sit inside tighter blocks than the description
   panels, so they get their own breathing room rather than a shared margin. */
.course-cf--above_image,
.course-cf--below_image {
  margin-bottom: 1.5rem;
}

.course-cf--above_price {
  margin-bottom: 1rem;
}

.course-cf--below_price {
  margin-bottom: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--course-border, #DCEEE8);
}

/* Label and value sit on one line — "Label: value" — wrapping onto the next line
   only when the value is too long to fit beside it. */
.course-cf__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.45rem;
}

.course-cf__label {
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--course-dark, #0F3D3E);
}

.course-cf__label::after {
  content: ':';
}

.course-cf__value {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--course-dark, #0F3D3E);
  overflow-wrap: anywhere;
}

.course-cf__value a {
  color: var(--course-teal, #2F7D6B);
  text-decoration: underline;
}

.course-cf__value a:hover {
  color: var(--course-teal-hover, #256657);
}