/* ==========================================================================
   Course Detail Page Styles (Single Course & Interactive Sticky Widget)
   ========================================================================== */

/* Breadcrumb Band Enhancements */
.breadcrumb-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.course-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 30px;
  padding: 8px 16px;
  color: var(--navy, #0c3b2e);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.course-fav-btn .icon {
  width: 16px;
  height: 16px;
  color: #64748b;
  transition: all 0.2s ease;
}
.course-fav-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
}
.course-fav-btn:hover .icon,
.course-fav-btn.is-favourited .icon {
  color: #ef4444;
  fill: #ef4444;
}

/* 3-Column Layout */
.course-detail-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 340px;
  align-items: start;
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 60px;
}

/* Left Column: TOC & Accreditation */
.course-detail-sidebar-left {
  position: sticky;
  top: 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.course-detail-nav {
  display: grid;
  gap: 3px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}
.course-detail-nav .course-toc-link {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #475569;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 550;
  transition: all 0.18s ease;
}
.course-detail-nav .course-toc-link:hover {
  color: var(--navy, #0c3b2e);
  background: rgba(12, 59, 46, 0.04);
}
.course-detail-nav .course-toc-link.active {
  background: #f1f5f9;
  color: var(--navy, #0c3b2e);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--navy, #0c3b2e);
}
.course-accreditation-sidebar {
  padding: 16px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  max-width: 100%;
}
.course-accreditation-sidebar .accred-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #0c3b2e;
}
.course-accreditation-sidebar .accred-badge .icon {
  width: 16px;
  height: 16px;
  color: #0c3b2e;
}
.course-accreditation-sidebar .accred-logos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 4px;
  width: 100%;
  box-sizing: border-box;
}
.course-accreditation-sidebar .accred-logo-img {
  max-width: 100%;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0; /* never squeeze the logo below its aspect size */
}

/* Center Column: Main Content */
.course-detail-main {
  min-width: 0;
  display: grid;
  gap: 28px;
}
.course-detail-hero {
  padding: 34px 36px;
  border-radius: 18px;
  background: linear-gradient(145deg, #0f3d32 0%, #07231b 100%);
  color: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(12, 59, 46, 0.3);
}
.course-detail-hero h1 {
  color: inherit;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.28;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  font-weight: 800;
}
.course-detail-hero p.course-detail-notice {
  color: #fbbf24;
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 14px;
}
.course-detail-hero p.course-detail-desc {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 20px;
}
.course-detail-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.course-detail-chips span {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 30px;
  padding: 6px 14px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
}
.course-detail-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: #fbbf24;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.course-detail-share:hover {
  opacity: 0.85;
}
.course-detail-share .icon {
  width: 15px;
  height: 15px;
}

/* Sections */
.course-detail-section {
  padding: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  scroll-margin-top: 24px;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.course-detail-section-heading {
  margin-bottom: 22px;
}
.course-detail-section-heading h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: #0f172a;
  font-weight: 750;
}

/* Packages Section */
.packages-heading-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
/* Section heading title row (icon + heading), shared by all course sections */
.section-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.section-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eff6ff;
  color: #0c3b2e;
  flex-shrink: 0;
}
.section-title-icon .icon {
  width: 18px;
  height: 18px;
}
.packages-subtext {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 20px;
}
.course-package-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 30px;
  background: #f1f5f9;
}
.package-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 24px;
  padding: 8px 18px;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.package-toggle-btn .icon {
  width: 15px;
  height: 15px;
}
.package-toggle-btn.active,
.package-toggle-btn[aria-pressed="true"] {
  background: #0c3b2e;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(12, 59, 46, 0.2);
}

.course-package-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.course-package-grid > :only-child {
  grid-column: 1 / -1;
}
.course-package-card {
  position: relative;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.25s ease;
}
.course-package-card:hover {
  border-color: #94a3b8;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08);
}
.course-package-card.is-selected {
  border-color: #0c3b2e;
  background: #ffffff;
  box-shadow: 0 0 0 1px #0c3b2e, 0 10px 25px -5px rgba(12, 59, 46, 0.12);
}
.package-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.package-header-row h3 {
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  color: #0f172a;
  font-weight: 750;
}
.package-check-indicator {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.package-check-indicator .icon {
  width: 13px;
  height: 13px;
}
.course-package-card.is-selected .package-check-indicator {
  background: #0c3b2e;
  border-color: #0c3b2e;
  color: #ffffff;
}
.course-package-price-wrap {
  margin-bottom: 16px;
}
.course-package-card .course-package-price {
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.2;
  font-weight: 800;
  color: #0c3b2e;
  letter-spacing: -0.03em;
  margin: 0;
}
.package-includes-block {
  margin-top: 14px;
}
.package-includes-block h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #1e293b;
}
.course-package-card .course-package-note {
  font-size: 12px;
  line-height: 1.5;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e40af;
  margin-top: 18px;
}
.course-package-card .course-package-note p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Check List */
.course-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.course-check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.6;
  color: #334155;
}
.course-check-list .icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: #0c3b2e;
}

/* Accordions & Facts */
.course-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
}
.course-facts-grid > div {
  padding: 13px 0;
  border-bottom: 1px solid #e2e8f0;
}
.course-facts-grid dt {
  color: #64748b;
  font-size: 12px;
  margin-bottom: 4px;
}
.course-facts-grid dd {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: #0f172a;
}
.course-detail-section .syllabus-unit-summary {
  font-size: 14px;
  padding: 18px;
  font-weight: 700;
  cursor: pointer;
}
.course-detail-section .syllabus-unit-content {
  padding: 0 18px 18px;
}
.course-process-list {
  list-style: none;
  counter-reset: course-step;
  display: grid;
  gap: 22px;
  padding: 0;
  margin: 0;
}
.course-process-list li {
  counter-increment: course-step;
  padding-left: 48px;
  position: relative;
}
.course-process-list li::before {
  content: counter(course-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #0c3b2e;
  color: white;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.course-process-list h3 {
  font-size: 16px;
  margin: 3px 0 8px;
  color: #0f172a;
}

/* ==========================================================================
   Right Sticky Booking Sidebar Widget (Nevara-Style)
   ========================================================================== */
.course-detail-sidebar {
  position: sticky;
  top: 36px;
  z-index: 25;
}

/* Ensure comfortable top clearance when WordPress Admin Bar is present */
body.admin-bar .course-detail-sidebar-left,
body.admin-bar .course-detail-sidebar {
  top: 68px;
  top: calc(var(--wp-admin--admin-bar--height, 32px) + 36px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .course-detail-sidebar-left,
  body.admin-bar .course-detail-sidebar {
    top: 82px;
    top: calc(var(--wp-admin--admin-bar--height, 46px) + 36px);
  }
}

.sticky-course-widget {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s ease;
}
.sticky-course-widget:hover {
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.12);
}

/* Tall widget fix: the sidebar is sticky (top 36px, 68px with admin bar), so a
   widget taller than the viewport gets its bottom (EFAW list, quantity, Add to
   Cart) clipped until the page scrolls past the section. Cap it to the viewport
   and let the card scroll internally instead — same pattern as .course-detail-nav
   on the left. Applied only where the sidebar is sticky (900px and up). */
@media (min-width: 900px) {
  .sticky-course-widget {
    max-height: calc(100vh - 56px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }
  body.admin-bar .sticky-course-widget {
    max-height: calc(100vh - 88px);
  }
  .sticky-course-widget::-webkit-scrollbar {
    width: 6px;
  }
  .sticky-course-widget::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
  }
}

/* Collapsible Image on Scroll */
.widget-image-container {
  position: relative;
  width: 100%;
  max-height: 200px;
  overflow: hidden;
  background: #0c3b2e;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 1;
}
.course-enquiry-image {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.sticky-course-widget:hover .course-enquiry-image {
  transform: scale(1.03);
}

/* When Scrolled Down: Image smoothly collapses */
.sticky-course-widget.is-scrolled-compact .widget-image-container {
  max-height: 0;
  opacity: 0;
}

/* Widget Body */
.sticky-course-widget .course-enquiry-body {
  padding: 22px 24px;
}
.widget-title {
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 4px;
  color: #0f172a;
  font-weight: 750;
}
.widget-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 14px;
  font-weight: 500;
}

/* Price Block */
.widget-price-block {
  margin-bottom: 12px;
}
.widget-price-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.widget-price-val {
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1.15;
  font-weight: 800;
  color: #0c3b2e;
  letter-spacing: -0.03em;
}
.widget-vat-note {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 3px;
  font-weight: 550;
}

/* Include VAT Switch Row */
.widget-vat-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  margin: 12px 0 16px;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}
.vat-switch-label {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.05em;
  color: #475569;
  text-transform: uppercase;
}
.vat-toggle-label {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  cursor: pointer;
}
.vat-toggle-label input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.vat-toggle-slider {
  position: absolute;
  inset: 0;
  background-color: #cbd5e1;
  border-radius: 20px;
  transition: 0.25s ease;
}
.vat-toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.vat-toggle-label input:checked + .vat-toggle-slider {
  background-color: #0c3b2e;
}
.vat-toggle-label input:checked + .vat-toggle-slider:before {
  transform: translateX(16px);
}

/* Upcoming Classes Section */
.widget-classes-section {
  margin-bottom: 18px;
}
.widget-classes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.classes-label {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.05em;
  color: #475569;
  text-transform: uppercase;
}
.city-select-wrap {
  position: relative;
}
.classes-city-select {
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  padding: 4px 24px 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.classes-city-select:focus {
  outline: none;
  border-color: #0c3b2e;
}
.widget-classes-list {
  max-height: 165px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.widget-classes-list::-webkit-scrollbar {
  width: 5px;
}
.widget-classes-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
.widget-class-slot {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  background: #ffffff;
  transition: all 0.18s ease;
}
.widget-class-slot:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}
.widget-class-slot.is-selected,
.widget-class-slot.is-selected:hover {
  border-color: transparent;
  background: #eaf6ee;
  box-shadow: none;
}
.widget-class-slot.is-selected .slot-dates {
  color: #0c3b2e;
}
.widget-class-slot.is-selected .slot-location {
  color: #235d4c;
}
.widget-class-slot .slot-dates {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}
.widget-class-slot .slot-location {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 3px;
}

/* UPCOMING EFAW SESSIONS Section */
.widget-efaw-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #e2e8f0;
}
.widget-efaw-section[hidden] {
  display: none !important;
}
.widget-efaw-subtext {
  font-size: 11.5px;
  color: #64748b;
  margin: 6px 0 10px;
  line-height: 1.4;
}
.widget-efaw-list {
  max-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.widget-efaw-list::-webkit-scrollbar {
  width: 5px;
}
.widget-efaw-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

/* Quantity & Add to Cart Row */
.widget-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.widget-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  height: 44px;
}
.widget-qty-stepper .qty-btn {
  width: 32px;
  height: 100%;
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.widget-qty-stepper .qty-btn:hover {
  background: #f1f5f9;
  color: #0c3b2e;
}
.widget-qty-stepper .qty-display {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.widget-add-to-cart-btn {
  flex: 1;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-btn, 9px 28px);
  background: var(--cyan, #d4af37);
  color: var(--navy, #0c3b2e);
  border: 2px solid transparent;
  font-size: 14px;
  font-weight: var(--font-weight-bold, 750);
  cursor: pointer;
  transition:
    transform var(--transition-fast, 0.18s),
    box-shadow var(--transition-fast, 0.18s),
    background var(--transition-fast, 0.18s),
    color var(--transition-fast, 0.18s),
    border-color var(--transition-fast, 0.18s);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}
.widget-add-to-cart-btn:hover {
  background: var(--navy, #0c3b2e) !important;
  color: var(--cyan, #d4af37) !important;
  border-color: var(--navy, #0c3b2e) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-elevated);
}
.widget-add-to-cart-btn:active {
  transform: translateY(0) scale(0.98);
}
.widget-add-to-cart-btn .icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}
.widget-add-to-cart-btn:disabled,
.widget-add-to-cart-btn:disabled:hover {
  background: #e5e7eb !important;
  color: #94a3b8 !important;
  border-color: transparent !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}
/* Slot status badge (e.g. "Filling Fast") — only rendered for non-default statuses */
.widget-class-slot .slot-status {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0c3b2e;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
}
/* Enquiry CTA shown instead of the cart for quote / coming-soon packages */
.widget-enquiry-btn {
  width: 100%;
  margin-top: 14px;
  white-space: nowrap; /* always a single-line label */
  justify-content: center;
  font-size: 15px; /* keep the full label ("Enquire about this package") on one line in narrow sidebars */
  gap: 8px;
  padding-left: 12px;
  padding-right: 12px;
}
.widget-enquiry-btn[hidden] {
  display: none;
}
.widget-enquiry-btn .icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}
.widget-enquiry-btn span {
  display: inline-block;
  line-height: 1.35;
  padding-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile sticky booking bar — keeps price + Add to Cart / Enquire reachable
   at the bottom of the screen while browsing packages on phones/small tablets. */
.course-mobile-bar {
  display: none;
}

/* While the widget's own action row (price + CTA) is on screen the bar only
   repeats what the user already sees — JS toggles .is-covered to slide it away. */
.course-mobile-bar.is-covered {
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(100% + 16px));
  pointer-events: none;
}

@media (max-width: 900px) {
  .course-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.12);
    transition: transform 0.24s ease, opacity 0.24s ease, visibility 0s linear 0s;
  }
  .course-mobile-bar.is-covered {
    transition: transform 0.24s ease, opacity 0.24s ease, visibility 0s linear 0.24s;
  }
  .cmb-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .cmb-title {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cmb-price {
    font-size: 16px;
    font-weight: 700;
    color: #0c3b2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cmb-btn {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 44px;
  }
  .single-course #app {
    padding-bottom: 86px;
  }
}

/* Very narrow phones: keep the bar a single tidy row — give the title/price
   column room by tightening the CTA label instead of letting it wrap. */
@media (max-width: 430px) {
  .course-mobile-bar {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  .cmb-price {
    font-size: 15px;
  }
  .cmb-btn {
    padding: 12px 14px;
    font-size: 13.5px;
  }
}
.widget-selection-hint {
  margin: 8px 2px 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.4;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 1199px) {
  .course-detail-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .course-detail-sidebar-left {
    grid-column: 1 / -1;
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
  }
  .course-detail-nav {
    display: flex;
    flex-wrap: wrap;
    max-height: none;
    overflow: visible;
  }
  .course-accreditation-sidebar {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    flex-shrink: 0; /* never let the TOC row squeeze the badge/logos */
    flex-wrap: wrap;
  }
  .course-accreditation-sidebar .accred-logos {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding-top: 0;
    width: auto;
  }
}

@media (max-width: 899px) {
  .course-detail-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 20px;
    padding-bottom: 40px;
  }
  .course-detail-sidebar-left,
  .course-detail-main,
  .course-detail-sidebar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .course-detail-sidebar-left {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
    overflow: hidden;
  }
  .course-detail-sidebar {
    position: static;
  }
  .course-detail-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 6px;
    margin: 0;
  }
  .course-detail-nav::-webkit-scrollbar {
    display: none;
  }
  .course-detail-nav .course-toc-link {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 16px;
    font-size: 13px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
  }
  .course-detail-nav .course-toc-link.active {
    background: var(--navy, #0c3b2e);
    color: #ffffff;
    border-color: var(--navy, #0c3b2e);
    box-shadow: none;
  }
  .course-accreditation-sidebar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
  }
  .course-accreditation-sidebar .accred-badge {
    font-size: 13px;
    font-weight: 700;
  }
  .course-accreditation-sidebar .accred-logos {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 100%;
    padding-top: 0;
  }
  .course-accreditation-sidebar .accred-logo-img {
    max-height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
  }
}

@media (max-width: 768px) {
  .site-breadcrumb-band .breadcrumb-container {
    padding-top: 14px;
    padding-bottom: 16px;
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
  }
  .site-breadcrumb-band .breadcrumbs {
    min-height: auto;
    padding: 0;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
  }
  .course-fav-btn {
    align-self: flex-start;
    padding: 7px 16px;
    font-size: 12.5px;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    box-shadow: none;
  }
  .course-fav-btn .icon {
    color: #ffffff;
  }
  .course-fav-btn:hover {
    background: #ffffff;
    color: #ef4444;
    border-color: #ffffff;
  }
  .course-fav-btn:hover .icon,
  .course-fav-btn.is-favourited .icon {
    color: #ef4444;
    fill: #ef4444;
  }
  .course-fav-btn.is-favourited {
    background: #ffffff;
    color: #ef4444;
    border-color: #ffffff;
  }
}

@media (max-width: 575px) {
  .course-package-grid,
  .course-facts-grid {
    grid-template-columns: 1fr;
  }
  .course-detail-hero {
    padding: 24px;
  }
  .course-detail-hero h1 {
    font-size: 24px;
  }
  .course-detail-section {
    padding: 20px;
  }
  .sticky-course-widget .course-enquiry-body {
    padding: 18px;
  }
}

/* Related Courses Section - Generous breathing room before footer on all course pages */
.course-related-section {
  padding-top: 56px;
  padding-bottom: 96px;
  margin-bottom: 0;
}
.course-related-section h2 {
  font-size: 2.15rem;
  font-weight: 800;
  color: var(--navy, #0c3b2e);
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .course-related-section {
    padding-top: 36px;
    padding-bottom: 64px;
  }
  .course-related-section h2 {
    font-size: 1.75rem;
    margin-bottom: 24px;
  }
}