/* course detail page - learning path, compact view, view toggle */

/* Minimal custom styles - most replaced with Bootstrap utilities */
.lp-chapter-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.lp-chapter-card:hover { transform: translateY(-2px); }
.lp-chapter-num { width: 28px; height: 28px; min-width: 28px; line-height: 1; }
.lp-section-link { transition: background 0.12s ease, color 0.12s ease; }
.lp-section-link:hover { background: rgba(0, 123, 255, 0.08); }
.lp-sec-dot {
   width: 7px;
   height: 7px;
   min-width: 7px;
   margin-top: 5px;
   transition: background 0.12s ease;
}
.lp-section-link:hover .lp-sec-dot { background: var(--primary); }
.lp-btn {font-size: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.15);}

/* Underline the view toggle label ("Learning path" / "Compact") */
.view-mode-label { text-decoration: underline; }

/* S-Curve Learning Path - minimal custom styles */
.sroad-curve { width: 100%; height: 60px; line-height: 0; margin: 2px 0px -1px 0px; }
.sroad-curve svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sroad-item { width: 42%; }
.sroad-item--left { margin: 0 auto 0 4%; }
.sroad-item--right { margin: 0 4% 0 auto; }
.sroad-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.sroad-card:hover { transform: translateY(-3px); }
.sroad-card-header:hover { opacity: 0.93; }
.sroad-ch-num { width: 36px; height: 36px; min-width: 36px; font-size: 1.7rem !important; line-height: 0px;}
.sroad-ch-name { word-break: break-word; }

/* Compact view styles */
.compact-chapter-wrapper { transition: all 0.15s ease; }
.compact-chapter-item { border-left: 10px solid #007bff26 !important; }
.compact-chapter-link { transition: color 0.15s ease; font-size: 0.9rem !important; }
.compact-chapter-link:hover { color: var(--primary) !important; text-decoration: underline !important; }
.compact-section-item { transition: all 0.12s ease; background: #f8f9fa; font-size: 0.9rem; }
.compact-section-item:hover { background: rgba(0, 123, 255, 0.08); padding-left: 1.75rem !important; }
.compact-toggle-btn { transition: all 0.2s ease; outline: none !important; box-shadow: none !important; }
.compact-toggle-btn:hover { color: var(--primary) !important; }
.compact-toggle-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.compact-toggle-btn i { transition: transform 0.2s ease; display: inline-block; }

/* Mobile styles - keep the desktop S-curve road, just make the boxes wider */
@media (max-width: 767.98px) {
   .sroad-item { width: 90%; }
   .sroad-ch-name { font-size: 13px; }
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 991.98px) {
   .sroad-item { width: 46%; }
   .sroad-item--left { margin-left: 2%; }
   .sroad-item--right { margin-right: 2%; }
   .sroad-ch-name { font-size: 13px; }
   .sroad-curve { height: 90px; }
}

/* course completed page - trophy emoji, sized up */
.completed-trophy { font-size: 6rem; line-height: 1; }

/* learning path - start/finish marker on the road */
.map-marker { position: relative; z-index: 3; text-align: center; margin-top: 2px; }
.map-marker-object {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 96px;
   height: 96px;
   border-radius: 50%;
   font-size: 3rem;
   line-height: 1;
   background: radial-gradient(circle at 38% 30%, #ffffff, #eaf3fc 70%);
   border: 5px solid #007bff;
   box-shadow: 0 12px 26px -10px #000;
   cursor: default;
}
.map-marker-label {
   display: block;
   margin-top: 12px;
   font-weight: 800;
   color: #000000;
   letter-spacing: 0.06em;
   font-size: 1.05rem;
}
.map-marker-sub { display: block; color: #6c7a8a; font-size: 0.85rem; margin-top: 2px; }