/**
* FILE INFO:: 
* Course Styles
* File Version: 1.0.0
* File Date: 2026-08-26
*/
 /* =====================================================================
   COURSE STYLES - INDEX
   ---------------------------------------------------------------------
   MARK: Base Styles
   MARK: Header
   MARK: Layout and Sidebar
   MARK: Page Layout
   MARK: Front Page Styles
   MARK: Footer
   MARK: Typography
   MARK: Buttons
   MARK: Course Styles
   MARK: Lesson Styles
   MARK: Project Styles
   MARK: Cards
   MARK: Breadcrumbs
   MARK: Dashboard
   MARK: Experimental
===================================================================== */

/* =====================================================================
   MARK: Base Styles
===================================================================== */

:root {
   /* Colors */
  --gbm-site-primary: #4da896;
  --gbm-site-primary-hover: #338373;
  --gbm-course-c1: #2e3141;
  --gbm-course-c2: #416089;
  --gbm-course-c3: #408d5b;
  --gbm-course-c4: #6a271e;
  --gbm-course-c5: #73524e;
  --dash-main-bg: #eeeeee;
  --dash-sidebar-bg: #2c3142;
  --dash-sidebar-text: #e8e9ec;
  --dash-border-color: #ddd;
  --dash-border-color-dark: rgba(255,255,255,0.10);

  --dash-member-bg: rgba(242, 254, 255, 0.166);
  --dashnav-link-color: #e8e9ec;
  --dashnav-link-hover-bg: rgba(255,255,255,0.08);
  --dashnav-link-active-bg: rgba(236, 248, 250, 0.191);
  --dash-shadow: 0 12px 24px rgba(18, 32, 38, 0.08);

  --meta: #1b6e66;
  --meta-soft: #daf2ee;
  
  /* Testing Colors */
   --paper: #fffdfa;
   --ink: #1f2937;
   --muted: #6b7280;
   --line: #e8ded2;
   --primary: #1b6e66;
   --primary-soft: #daf2ee;
   --accent: #b15f1f;
   --danger: #b33a2f;
   --radius-lg: 18px;
   --radius-md: 12px;

   /* Typography */
   --course-h1: 1.6rem;
   --course-h2: 1.4rem;
   --course-h3: 1.2rem;
   --course-h4: 1rem;
   --course-txt-sm: 0.75rem;
   --course-txt-md: 0.85rem;
   --course-txt-lg: 0.95rem;
   --course-txt-xl: 1.05rem;

   /* Spacing */
   --dash-h-space-xl: 0.6rem;
   --dash-h-space-sm: 0.8rem;
   --dash-h-space-base: 1rem;
   --dash-h-space-lg: 1.2rem;
   --dash-h-space-xl: 1.5rem;

   /* Page Accent styles */
   --gbm-pg-accent: #2e9a9e;
}

/* =====================================================================
   MARK: Header
===================================================================== */

/* .gbm-action-strip {
  background: var(--gbm-site-primary);
}

.gbm-site-header .navbar::after {
  background: var(--gbm-site-primary);
} */

/* Hover underline for ALL nav links */
.navbar-nav .nav-item:hover::after,
.navbar-nav .nav-item:focus-within::after {
   background: var(--gbm-site-primary);
}

/* =====================================================================
   MARK: Layout and Sidebar
===================================================================== */

/* =====================================================================
   MARK: Page Layout
===================================================================== */


/* =====================================================================
   MARK: Front Page Styles
===================================================================== */

.gbm-fp {
   color: var(--gbm-pg-text);
}

/* Hero section */
/* ---------- */
.gbm-fp-hero {
  padding: 60px 20px;
  background: var(--gbm-pg-bg-alt); 
}

/* .gbm-fp-hero__top {
  text-align: center;
  max-width: 700px;
  margin: 1.5rem auto 1.5rem;
} */

.gbm-fp-hero__top h1 {
  font-size: 2.5rem;
  margin: 0 0 12px;
}

.gbm-fp-hero__top p {
  font-size: 1.15rem;
  color: var(--muted);
  margin: 0;
}

.gbm-fp-hero__grid {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
}

.gbm-fp-hero__text {
  flex: 1 1 50%;
}

.gbm-fp-hero__text h2 {
  font-size: 1.8rem;
  margin: 0 0 12px;
}

.gbm-fp-hero__text-desc {
  font-size: 1.05rem;
  color: var(--muted);
  font-weight: 600;
  margin: 0;
}

.gbm-fp-hero__actions {
  margin-top: 24px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.gbm-fp-hero__actions-caption {
  margin: 24px 0 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--muted);
}

.gbm-fp-hero__links {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.gbm-fp-hero__links a {
  color: var(--primary);
  text-decoration: underline;
}

.gbm-fp-hero__graphic {
  flex: 1 1 50%;
}

.gbm-fp-hero__graphic img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
  .gbm-fp-hero__grid {
    flex-direction: column;
    text-align: center;
  }

  .gbm-fp-hero__actions {
    justify-content: center;
  }
}


/* =====================================================================
   MARK: Footer
===================================================================== */

/* .gbm-site-footer {
  border-top: solid 5px var(--gbm-site-primary);
} */

/* =====================================================================
   MARK: Typography
===================================================================== */

/* =====================================================================
   MARK: Buttons
===================================================================== */

.btn-outline-primary {
   color: var(--gbm-site-primary);
   border-color: var(--gbm-site-primary);
}

.btn-outline-primary:hover {
   background: var(--gbm-site-primary);
   border-color: white;
}

.btn-outline-primary:active {
   background: var(--gbm-site-primary) !important;
   border-color: white !important;
}

.btn-primary {
   background: var(--gbm-site-primary);
   color: white;
   border-color: var(--gbm-site-primary);
}

.btn-primary:hover {
   background: var(--gbm-site-primary-hover);
   color: white;
   border-color: var(--gbm-site-primary);
}
.btn-primary.disabled {
   background: var(--muted);
   color: white;
   border-color: var(--muted);
}
/* =====================================================================
   MARK: Course Styles
===================================================================== */

.gbm-courses {
   width: 100%;
   max-width: 1100px;
   margin: 0 auto;
   padding: 2.5rem 20px;
}

.browse-course-header {
   margin: 2rem auto 1rem;
}

.gbm-courses-hero {
   background: var(--gbm-pg-bg-alt);
   padding: 40px 20px;
}

.gbm-courses-hero__inner {
   max-width: 1100px;
   margin: 0 auto;
}

.gbm-courses-hero h1 {
   color: var(--gbm-pg-accent);
   margin-bottom: 10px;
}

.gbm-courses-hero p {
   color: var(--gbm-pg-muted);
   margin-bottom: 20px;
}

/* .browse-course-header {
   margin: 2rem auto 1rem;
   grid-column: 1 / -1;
   width: 100%;
   justify-self: stretch;
} */

/* =====================================================================
   MARK: Lesson Styles
===================================================================== */

/* =====================================================================
   MARK: Project Styles
===================================================================== */

/* =====================================================================
   MARK: Cards
===================================================================== */

/* Front Page Course Cards */
/* ----------------------- */
.gbm-fp-course-grid {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); 
  gap: 24px;
}

.gbm-fp-course-card {
  overflow: hidden;
  border: 1px solid var(--gbm-pg-border); 
  border-radius: 6px; 
  background: #fff; 
  display: flex; 
  flex-direction: column; 
  text-decoration: none; 
  color: inherit;
}

.gbm-fp-course:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(0,0,0,0.10);
}

.gbm-fp-course__image { 
  width: 100%; 
  height: 150px; 
  object-fit: cover; 
  background: var(--gbm-pg-bg-alt); 
}

.gbm-fp-course__image--placeholder {
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 2rem; 
  color: var(--gbm-pg-accent);
}

.gbm-fp-course__body { 
  padding: 16px; 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
}

.gbm-fp-course__body h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--gbm-pg-text); }
.gbm-fp-course__body p { margin: 0 0 12px; color: var(--gbm-pg-muted); font-size: 0.95rem; flex: 1; }
.gbm-fp-course__link { color: var(--gbm-pg-accent); font-weight: 600; font-size: 0.9rem; }

/* Front Page Category Cards */
/* ------------------------- */
.gbm-fp-category-grid {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); 
  gap: 24px;
}

.gbm-fp-category-card {
  overflow: hidden;
  border: 1px solid var(--gbm-pg-border); 
  border-radius: 6px; 
  background: #fff; 
  display: flex; 
  flex-direction: column; 
  text-decoration: none; 
  color: inherit;
}

.gbm-fp-category:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(0,0,0,0.10);
}

.gbm-fp-category__image { 
  width: 100%; 
  height: 150px; 
  object-fit: cover; 
  background: var(--gbm-pg-bg-alt); 
}

.gbm-fp-category__image--placeholder {
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 2rem; 
  color: var(--gbm-pg-accent);
}

.gbm-fp-category__body { 
  padding: 16px; 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
}

.gbm-fp-category__body h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--gbm-pg-text); }
.gbm-fp-category__body p { margin: 0 0 12px; color: var(--gbm-pg-muted); font-size: 0.95rem; flex: 1; }
.gbm-fp-category__link { color: var(--gbm-pg-accent); font-weight: 600; font-size: 0.9rem; }


/* MARK: Course Card
-------------------- */
.course-card {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   /* grid-template-columns: repeat(3, 1fr); */
   gap: 1rem;
   /* padding: 1rem; */
}

.course-card__pad {
   padding: 1rem;
}

.course-card__item {
   background: #fff;
   border: 1px solid var(--gbm-pg-border);
   border-radius: 8px;

   display:flex; 
   flex-direction:column; 
   height:100%;
   transition: transform 0.15s ease, box-shadow 0.15s ease;

   text-decoration: none;
   color: inherit;
}
.course-card__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(0,0,0,0.10);
}
.course-card__graphic img {
   /* max-width: 100%; */
   width: 100%;
   border-radius: 8px 8px 0 0;
   aspect-ratio: 16 / 9;
   object-fit: cover;
   display: block;
}
.course-card__content {
   display:flex; 
   flex-direction:column; 
   flex:1;
   /* padding: 0 0.8rem 0.8rem 0.8rem; */
   margin: 0;
}

.course-card__title {
   margin: 0;
   font-size: 1.2rem;
   color: var(--gbm-course-c1);
   margin-bottom: 0.5rem;
   padding: 0.15rem;
}

.course-card__title h2 {
   margin: 0.5rem 0;
   font-size: 1.2rem;
   color: var(--gbm-course-c2);
   padding: 0.6rem;
}

.course-card__price {
   margin: 0;
   font-size: 1.2rem;
   color: var(--gbm-course-c1);
   margin-left:auto;
}

.course-card__price span {
   font-size: 1.05rem;
   font-weight: 600;
   color: var(--gbm-course-c2);
   padding: 0.6rem;
}

.course-card__action {
   margin-top:auto;
   background: var(--gbm-pg-bg);
   padding: 0.5rem 1rem 0.5rem 0.5rem;
   border-top: 1px solid var(--gbm-pg-border);
   border-radius: 0 0 8px 8px;
   display:inline-flex;
   justify-content:flex-end;
}
.course-card__action a {
   text-decoration: none;
   color: var(--gbm-pg-muted);
   font-size: 1.1rem;
}

.course-card__action a:hover {
   color: var(--gbm-course-c2);
}

#dash-top {
  scroll-margin-top: 100px;
}

/* @media (max-width: 992px) {
   .course-card { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
   .course-card { grid-template-columns: 1fr; }
} */

/* =====================================================================
   MARK: Breadcrumbs
===================================================================== */

/* =====================================================================
   MARK: DASHBOARD
===================================================================== */

/* MARK: Reusable badges
------------------------ */
.course-process-badge {
   display: inline-flex;
   align-items: center;
   min-height: 32px;
   padding: 0.3rem 0.75rem;
   border-radius: 999px;
   font-size: var(--course-txt-sm);
   font-weight: 700;
}

.course-process-badge--in-progress {
   background: #e5f3ff;
   color: #115f9a;
}

.course-process-badge--next-up {
   background: #e6f6ea;
   color: #24683a;
}

.course-process-badge--locked {
   background: #f3f4f6;
   color: #6b7280;
}

.course-process-badge--to-do {
   background: #db8955;
   color: #24683a;
}
.course-process-badge--review {
   background: #e6f6ea;
   color: #24683a;
}

/* MARK: Reusable tags
---------------------- */

.course-tag-badge {
   display: inline-flex;
}

/* MARK: Reusable eyebrows
-------------------------- */
.course-eyebrow-sm {
   margin: 0 0 0.75rem;
   font-size: var(--course-txt-sm);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
}
.course-eyebrow-lg {
   margin: 0 0 0.75rem;
   font-size: var(--course-txt-lg);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
}
.course-eyebrow-xl {
   margin: 0 0 0.75rem;
   font-size: var(--course-txt-xl);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
}

/* MARK: Reusable Panel Links
-------------------------- */
.course-panel-link {
   display: flex;
   align-items: center;
   gap: 1rem;
   text-decoration: none;
   transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;

   background: #ffffff;
   border: 2px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 0.6rem 0.6rem 0.6rem 1rem;
   margin: 0.5rem 1rem;
   box-shadow: 0 2px 4px var(--dash-shadow);
   color: #333;
}
.course-panel-link:hover {
   background: #f3f5f5;
   transform: translateY(-2px);
   border-color: rgba(77, 168, 150, 0.5);
}

.course-panel-link p {
   margin: 0;
   font-size: 1.1rem;
}

/* MARK: Reusable Dash Panel
---------------------------- */
.course-dash h1 {
   margin: var(--dash-h-space-sm) 0;
   font-size: 1.4rem;
   color: var(--gbm-site-primary);
}

.course-dash h2 {
   margin: var(--dash-h-space-sm) 0 var(--dash-h-space-base);
   color: var(--gbm-course-c2);
   font-size: 1.3rem;
}

.course-dash h3 {
   margin: 0.5rem 0rem;
   color: var(--gbm-course-c3);
   font-size: 1.2rem;
}

.course-dash,
.course-dash * {
   box-sizing: border-box;
}

.course-dash {
   font-family: Arial, sans-serif;
   color: #222;
}

.add-announcement {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.add-announcement p {
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
}

.course-dash-announce {
   font-size: var(--course-h2);
   font-weight: 700;
   color: var(--gbm-course-c2);
}

.course-dash-layout {
   display: grid;
   grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
   gap: 0;
   background: var(--dash-main-bg);
   overflow: hidden;
}

.course-dash-sidebar {
   background: var(--dash-sidebar-bg);
   border-right: 2px solid #5b6160; 
   color: var(--dash-sidebar-text);
   padding: 1.5rem 1rem;
   min-width: 0;
}

.course-dash-main {
   padding: 1rem;
   min-width: 0;
}

.course-dash-panel {
   background: #fff;
   border: 1px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 1rem;
   margin: 1rem;
   box-shadow: 0 2px 4px var(--dash-shadow);
}

.course-dash-panel img {
   max-width: 100%;
   border-radius: 8px;
}

.course-dash-panel--top {
   background: #fff;
   border: 1px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 1rem;
   margin: 1rem;
}

.course-dash-panel-header {
   background: #fff;
   border: 1px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 1rem;
   margin: 1rem;
}

/* Dashnav Menu */
/* ------------ */
.course-dashnav {
   display: grid;
   gap: 0.25rem;
}

.course-dash-sidebar h2 {
   color: white;
}

.course-dashnav__link {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  color: var(--dashnav-link-color);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.course-dashnav__link:hover {
  background: var(--dashnav-link-hover-bg);
}

.course-dashnav__link.is-active {
  background: var(--dashnav-link-active-bg);
  border: 1px solid var(--dash-border-color-dark);
  border-bottom: 2px solid var(--gbm-site-primary);
  font-weight: 600;
}

.course-dashnav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.course-dashnav__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: 0.8;
}

.course-dashnav__link.is-active .course-dashnav__icon {
  opacity: 1;
}

/* MARK: Dash Member 
------------------- */
.course-dashmember {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.9rem 0.85rem;
   margin-bottom: 1rem;

   border-radius: 12px;
   background: var(--dash-member-bg);
   border: 1px solid var(--dash-border-color-dark);
}

.course-dashmember__name {
   font-size: var(--course-txt-lg);
   font-weight: 600;
   line-height: 1.2;
   color: var(--dash-sidebar-text);
   word-break: break-word;
}

.course-dashmember__sub {
   margin-top: 0.15rem;
   font-size: var(--course-txt-sm);
   opacity: 0.85;
}

/* MARK: Course Overview
------------------------ */

.course-overview-hero {
   display: grid;
   grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.4fr);
   gap: 1.5rem;
   align-items: center;
}
.course-overview-hero__eyebrow {
   margin: 0 0 0.75rem;
   font-size: var(--course-txt-sm);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
}
.course-overview-hero__summary {
   margin: 0.9rem 0 0;
   max-width: 62ch;
   color: var(--muted);
   font-size: var(--course-txt-xl);
   line-height: 1.65;
}
.course-overview-hero__meta {
   display:flex;
   flex-wrap: wrap;
   gap: 0.65rem;
   margin-top: 1rem;
}
.course-overview-hero__meta span {
   display: inline-flex;
   align-items: center;
   min-height: 34px;
   padding: 0.35rem 0.85rem;
   border-radius: 999px;
   background: var(--meta-soft);
   color: var(--meta);
   font-size: var(--course-txt-md);
   font-weight: 600;
}
.course-overview-hero__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   margin-top: 1.25rem;
}

.course-overview-hero__media img {
   display: block;
   width: 100%;
   height: auto;
   object-fit: contain;
   border-radius: 16px;
   box-shadow: 0 16px 36px rgba(27, 110, 102, 0.14);
}

/* MARK: Section Head
--------------------- */
.course-overview-sectionhead {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
}

.course-overview-sectionhead span {
   color: var(--muted);
   font-size: var(--course-txt-md);
   font-weight: 600;
}

/* MARK: Lesson Menu
--------------------- */
.lesson-dashnav__link {
   display: block;
   padding: 0.65rem 0.85rem;
   border-radius: 8px;
   color: var(--dashnav-link-color);
   text-decoration: none;
   font-size: 0.9rem;
   transition: background 0.15s ease, color 0.15s ease;
}

.lesson-dashnav__link:hover {
  background: var(--dashnav-link-hover-bg);
}

.lesson-dashnav__link.is-active {
  background: var(--dashnav-link-active-bg);
  border: 1px solid var(--dash-border-color-dark);
  border-bottom: 2px solid var(--gbm-site-primary);
  font-weight: 600;
}

.lesson-dashnav__index {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 25px;
   min-height: 25px;
   border-radius: 8px;
   /* border: 0.5px solid var(--gbm-site-primary); */
   background: var(--gbm-site-primary);
   color: #f4f8f7;
   font-weight: 600;
}
 
/* MARK: Lesson Row
------------------- */
/* .course-dash-panel-link {
   background: #ffffff;
   border: 2px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 0.6rem 0.6rem 0.6rem 1rem;
   margin: 0.5rem 1rem;
   box-shadow: 0 2px 4px var(--dash-shadow);
   color: #333;
}

.course-dash-panel-link:hover {
   border-bottom: 2px solid var(--gbm-site-primary);
}

.course-dash-panel-link p {
   margin: 0;
   font-size: 1.1rem;
}

.course-dash-panel:last-child {
   margin-bottom: 0;
} */

.course-lesson-row {
   display: flex;
   align-items: center;
   gap: 1rem;
   text-decoration: none;
   transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;

   background: #ffffff;
   border: 2px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 0.6rem 0.6rem 0.6rem 1rem;
   margin: 0.5rem 1rem;
   box-shadow: 0 2px 4px var(--dash-shadow);
   color: #333;
}
.course-lesson-row:hover {
   transform: translateY(-2px);
   border-color: rgba(77, 168, 150, 0.5);
}

.course-lesson-row p {
   margin: 0;
   font-size: 1.1rem;
}

.course-lesson-row:last-child {
   margin-bottom: 0;
}
.course-lesson-row__index {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 46px;
   min-height: 46px;
   border-radius: 12px;
   background: #f4f8f7;
   color: var(--gbm-course-c1);
   font-weight: 700;
}
.course-lesson-row__textbook {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 46px;
   min-height: 46px;
   border-radius: 12px;
   background: #f4f8f7;
   color: var(--gbm-course-c1);
   font-weight: 700;
   padding: 0.25rem 0.5rem;
}
.course-lesson-row__body {
   flex: 1;
   min-width: 0;
}

.course-lesson-row__title {
   margin: 0;
   color: var(--gbm-course-c2);
   font-size: 1.05rem;
   font-weight: 600;
}

.course-lesson-row__meta {
   display: inline-block;
   margin-top: 0.25rem;
   color: var(--muted);
   font-size: var(--course-txt-md);
}

.course-lesson-row__img img {
   width: 200px;
   height: auto;
   border-radius: 8px;
   object-fit: cover;
}

.course-lesson-row__status {
   margin-left: auto;
}

.course-lesson-badge {
   display: inline-flex;
   align-items: center;
   min-height: 32px;
   padding: 0.3rem 0.75rem;
   border-radius: 999px;
   font-size: var(--course-txt-sm);
   font-weight: 700;
}

.course-lesson-badge--in-progress {
   background: #e5f3ff;
   color: #115f9a;
}

.course-lesson-badge--submitted {
   background: #e6f6ea;
   color: #24683a;
}

.course-lesson-badge--completed {
   background: #e6f6ea;
   color: #24683a;
}

.course-lesson-badge--locked {
   background: #f3f4f6;
   color: #6b7280;
}

/* MARK: Lesson Overview
------------------------ */

.lesson-overview-hero {
   display: grid;
   grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.4fr);
   gap: 1.5rem;
   align-items: center;
}
.lesson-overview-hero__eyebrow {
   margin: 0 0 0.75rem;
   font-size: var(--course-txt-lg);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
}
.lesson-overview-hero__summary {
   margin: 0.9rem 0 0;
   max-width: 62ch;
   color: var(--muted);
   font-size: var(--course-txt-xl);
   line-height: 1.65;
}
.lesson-overview-hero__meta {
   display:flex;
   flex-wrap: wrap;
   gap: 0.65rem;
   margin-top: 1rem;
}
.lesson-overview-hero__meta span {
   display: inline-flex;
   align-items: center;
   min-height: 34px;
   padding: 0.35rem 0.85rem;
   border-radius: 999px;
   background: var(--meta-soft);
   color: var(--meta);
   font-size: var(--course-txt-md);
   font-weight: 600;
}
.lesson-overview-hero__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   margin-top: 1.25rem;
}

.lesson-overview-hero__media img {
   display: block;
   width: 100%;
   height: auto;
   object-fit: contain;
   border-radius: 16px;
   box-shadow: 0 16px 36px rgba(27, 110, 102, 0.14);
}
.lesson-overview-hero__media img:hover {
   transform: translateY(-2px);
   box-shadow: 0 24px 48px rgba(27, 110, 102, 0.20);
}

/* MARK: Lesson Layout 
---------------------- */
.lesson-content {
   display: grid;
   grid-template-columns: 1fr 0.6fr;
   /* gap: 0.5rem;  */
}

.lesson-content__media {
   display: grid;
}
.lesson-content__project {
   display: grid;
}

/* MARK: Lesson Video
--------------------- */

.lesson-video {
  display: flex;
  flex-direction: column;
  /* align-items: center;
  gap: 1rem; */
}

.lesson-video__head {
  font-size: var(--course-h2);
  color: var(--gbm-course-c1);
}

.lesson-video__item {
  margin-bottom: 1.5rem;
}

.lesson-video__frame {
  width: min(100%, 640px); /* change max width as needed */
  /* margin: 0 auto 1rem; */
}

.lesson-video__video {
  display: block;
  width: 100%;
  height: auto;
  /* aspect-ratio: 16 / 9; */
}

/* Mark: Lesson Audio
--------------------- */

/* Mark: Lesson Ebook
--------------------- */

/* Mark: Lesson Project
----------------------- */

.lesson-project-submit textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 1rem;
}

/* MARK: Evaluation Overview
---------------------------- */
.evaluation-overview-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
   gap: 0;
}
.evaluation-overview-progress {
   background: #fffdfa;
   /* display: flex;
   flex-direction: column; */
   /* background:
      linear-gradient(135deg, rgba(77, 168, 150, 0.12), rgba(255, 255, 255, 0.94)),
      #fff; */
}
.evaluation-overview-progress__bar {
   width: 100%;
   height: 12px;
   margin-top: 1rem;
   overflow: hidden;
   border-radius: 999px;
   background: #dfe8e6;
}
.evaluation-overview-progress__bar span {
   display: block;
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, var(--gbm-site-primary), var(--gbm-site-primary-hover));
}

.evaluation-overview-stats {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.85rem;
   margin-top: 1.1rem;
}

.evaluation-overview-stat {
   padding: 1rem;
   border: 1px solid #d7e7e3;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.88);
}

.evaluation-overview-stat strong {
   display: block;
   margin-top: 0.4rem;
   color: var(--gbm-course-c2);
   font-size: 1rem;
   line-height: 1.4;
}

.evaluation-overview-stat__label {
   display: block;
   color: var(--muted);
   font-size: var(--course-txt-sm);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.evaluation-overview-sidecard {
   background: #fffdfa;
}

.evaluation-overview-guide {
   display: grid;
   gap: 0.9rem;
   margin: 1rem 0 0;
}
.evaluation-overview-guide div {
   padding-bottom: 0.9rem;
   border-bottom: 1px solid var(--line);
}
.evaluation-overview-guide div:last-child {
   padding-bottom: 0;
   border-bottom: 0;
}
.evaluation-overview-results {
   display: flex;
   flex-direction: column;
   padding: 1rem;
   border: 1px solid #d7e7e3;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.88);
   margin-top: 0.6rem;
}
.evaluation-overview-results span {
   display: block;
   font-size: var(--course-txt-lg);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
   text-align: center;
   margin-bottom: 0.6rem;
}
.evaluation-overview-results strong {
   display: block;
   color: var(--gbm-course-c2);
   font-size: 1.25rem;
   line-height: 1.4;
   text-align: center;
   margin-bottom: 0.6rem;
}
.evaluation-overview-results p {
   display: block;
   color: var(--gbm-course-c2);
   font-size: 1rem;
   line-height: 1.4;
   text-align: center;
}
.evaluation-overview-results__buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin: 0 auto;
}

/* 

.course-overview-facts dt {
   margin-bottom: 0.3rem;
   color: var(--muted);
   font-size: var(--course-txt-sm);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.course-overview-facts dd {
   margin: 0;
   color: var(--gbm-course-c2);
   font-size: var(--course-txt-lg);
   font-weight: 600;
} */

/* MARK: Evaluation Question
---------------------------- */

/* input[type="checkbox"] {
  width: 25px;
  height: 25px;
  accent-color: var(--gbm-site-primary);
} */

.course-eval-option label {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.35;
  cursor: pointer;
  
}

.course-eval-option input[type="checkbox"] {
  width: 25px;
  height: 25px;
  accent-color: var(--gbm-site-primary);
  margin: 2px 0 0;
  flex: 0 0 25px;
}


/* MARK: Media Queries
---------------------- */

@media (max-width: 992px) {

   /* Course card */
   /* .course-card {
      grid-template-columns: 1fr;
   } */
   .course-dash-main .course-card {
      grid-template-columns: 1fr;
   }
   .course-card__item {
      max-width: 100%;
   }

   /* Course Overview */
   .course-overview-hero,
   .course-overview-grid,
   .course-overview-stats {
      grid-template-columns: 1fr;
   }

   .lesson-overview-hero {
      grid-template-columns: 1fr;
   }

   /* Lesson Content */
   .lesson-content {
      grid-template-columns: 1fr;
   }

   /* Evaluation Overview */
   .evaluation-overview-grid {
      grid-template-columns: 1fr;
   }

   .evaluation-overview-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem;
   }
}


@media (max-width: 768px) {
   .course-dash-layout {
      grid-template-columns: 1fr;
   }
   .course-dash-sidebar {
   border-right: 0;
   border-bottom: 1px solid var(--dash-border-color);
   }
   .course-overview-sectionhead {
      flex-direction: column;
      align-items: flex-start;
   }
   .course-lesson-row {
      flex-wrap: wrap;
      align-items: flex-start;
   }
   .course-lesson-row__status {
      margin-left: 0;
   }

   /* Evaluation Overview */
   .evaluation-overview-stats {
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 0.5rem;
   }

}

/* =====================================================================
   MARK: Course Details
===================================================================== */

.course-details {
   width: 100%;
   max-width: 1320px;
   margin: 0 auto;
   padding: 2rem 1.5rem;
}

.course-header {
   padding: 1rem;
}

.course-header h1 {
   padding: 0;
   margin: 1rem 0;
}

.course-layout {
   display: grid;
   grid-template-columns: 1fr 320px;
   gap: 2rem;
   align-items: start;
}

.course-overview {
   border: 1px solid #e2e2e2;
   border-radius: 12px;
   padding: 1.25rem;
   background-color:white;
}

/* Header */

.course-category {
  margin: 0 0 4px;
  font-size: 14px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.course-meta {
  margin: 8px 0 0;
  font-size: 16px;
  color: #666;
}

/* Lessons */

.lesson-list {
   list-style: none;
   margin: 0;
   padding: 0;
   border: 1px solid #e2e2e2;
   border-radius: 8px;
}

.lesson-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
   border-bottom: 1px solid #e2e2e2;
}

.lesson-item:last-child {
   border-bottom: none;
}

.lesson-info {
   display: flex;
   align-items: center;
   gap: 10px;
}

.lesson-icon {
   flex-shrink: 0;
   color: #999;
}

/* Video Player */

.course-video {
   aspect-ratio: 16 / 9;
   background: #000;
   border-radius: 8px;
   overflow: hidden;
}

.course-video video {
   width: 100%;
   height: 100%;
   display: block;
}

/* Action */

.course-action {
   position: sticky;
   top: 10rem;
   background-color:white;
}

.price {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
}

.price-box {
   border: 1px solid #e2e2e2;
   border-radius: 12px;
   padding: 1.25rem;
}

.course-graphic {
   aspect-ratio: 16 / 9;
   margin: 1rem 0;
   overflow: hidden;
   border-radius: 8px;
}

.course-graphic img {
   width: 100%;
   display: block;
   border-radius: 8px;
}

.enroll-button {
   width: 100%;
   height: 44px;
   border: none;
   border-radius: 6px;
   background: var(--gbm-site-primary);
   color: #ffffff;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
}

.enroll-button:hover {
   background: var(--gbm-site-primary-hover);
}

.add-cart-button {
   display: block;
   width: 100%;
   background: none;
   border: none;
   padding: 0;
   font: inherit;
   appearance: none;
   text-align: center;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   margin: 0.5rem 0;
}

.add-cart-button:hover {
   text-decoration: underline;
}

.in-cart-message {
   display: block;
   width: 100%;
   background: none;
   border: none;
   padding: 0;
   font: inherit;
   appearance: none;
   text-align: center;
   font-size: 15px;
   font-weight: 600;
   margin: 0.5rem 0;
   color: red;
}

.guarantee {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   margin: 10px 0 0;
   padding-bottom: 12px;
   border-bottom: 1px solid #e2e2e2;
   font-size: 14px;
   font-style: italic;
   color: #6b7280;
}

.guarantee::before {
   content: "+";
   font-style: normal;
   color: #1a1a1a;
}

.includes-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.includes-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #444;
}

.includes-list li::before {
  content: "✓";
  color: #1a1a1a;
  flex-shrink: 0;
}

/* Benefits/Description */

.course-benefits {
   margin: 2rem;
}

.benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.benefits-list li {
  display: flex;
  gap: 8px;
  /* font-size: 14px; */
}

.benefits-list li::before {
  content: "✓";
  color: green;
  flex-shrink: 0;
}

/* Media queries */

@media (max-width: 992px) {
  .course-layout {
    grid-template-columns: 1fr;
  }

  .course-action {
    position: static;
    order: -1;
  }

  .benefits-list {
      grid-template-columns: 1fr;
   }
}

/* =====================================================================
   MARK: 00) EXPERIMENTAL
===================================================================== */

/* .course-overview-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
   gap: 0;
}

.course-overview-progress {
   background:
      linear-gradient(135deg, rgba(77, 168, 150, 0.12), rgba(255, 255, 255, 0.94)),
      #fff;
}

.course-overview-progress__bar {
   width: 100%;
   height: 12px;
   margin-top: 1rem;
   overflow: hidden;
   border-radius: 999px;
   background: #dfe8e6;
}

.course-overview-progress__bar span {
   display: block;
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, var(--gbm-site-primary), var(--gbm-course-c1));
}

.course-overview-stats {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.85rem;
   margin-top: 1.1rem;
}

.course-overview-stat {
   padding: 1rem;
   border: 1px solid #d7e7e3;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.88);
}

.course-overview-stat strong {
   display: block;
   margin-top: 0.4rem;
   color: var(--gbm-course-c2);
   font-size: 1rem;
   line-height: 1.4;
}

.course-overview-stat__label {
   display: block;
   color: var(--muted);
   font-size: var(--course-txt-sm);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.course-overview-sidecard {
   background: #fffdfa;
}

.course-overview-facts {
   display: grid;
   gap: 0.9rem;
   margin: 1rem 0 0;
}

.course-overview-facts div {
   padding-bottom: 0.9rem;
   border-bottom: 1px solid var(--line);
}

.course-overview-facts div:last-child {
   padding-bottom: 0;
   border-bottom: 0;
}

.course-overview-facts dt {
   margin-bottom: 0.3rem;
   color: var(--muted);
   font-size: var(--course-txt-sm);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.course-overview-facts dd {
   margin: 0;
   color: var(--gbm-course-c2);
   font-size: var(--course-txt-lg);
   font-weight: 600;
} */