/**
 * WalkWise — Tutor LMS Overrides
 * Covers: course cards, single course, sidebar, player, dashboard, login, badges, progress
 */

/* ────────────────────────────────────────────────────────────
   COURSE CARDS (loop / catalog)
   ──────────────────────────────────────────────────────────── */
.tutor-course-card,
.tutor-course-loop-item,
.tutor-course-filter-loop-item {
  border-radius: var(--ww-radius-lg) !important;
  box-shadow:    var(--ww-shadow-card) !important;
  overflow:      hidden;
  transition:    transform var(--ww-transition), box-shadow var(--ww-transition);
  border:        none !important;
}
.tutor-course-card:hover,
.tutor-course-loop-item:hover,
.tutor-course-filter-loop-item:hover {
  transform:  translateY(-4px);
  box-shadow: var(--ww-shadow-lg) !important;
}

.tutor-course-card-thumbnail,
.tutor-course-thumbnail img {
  border-radius: var(--ww-radius-lg) var(--ww-radius-lg) 0 0 !important;
}

/* Thumbnails defensivos (QA #9): garante proporção/altura consistente e um
   fundo de marca enquanto a imagem carrega ou se faltar, evitando o retângulo
   branco vazio nos cards. */
.tutor-course-thumbnail,
.tutor-course-card-thumbnail {
  display: block;
  background: var(--ww-lavender);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.tutor-course-thumbnail img,
.tutor-course-card-thumbnail img,
.tutor-card-image-top {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.tutor-course-thumbnail:empty::before,
.tutor-course-card-thumbnail:empty::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ww-gradient);
  opacity: .15;
}

/* Archive header (QA #3 / SEO #3): título + intro acima do loop de cursos,
   compensando o header fixo (~85px) para eliminar o espaço em branco. */
.ww-courses-archive-header {
  max-width: var(--ww-container);
  margin: 0 auto;
  padding: var(--ww-space-10) var(--ww-space-6) var(--ww-space-6);
  text-align: center;
}
.ww-archive-title {
  font-family: var(--ww-font-heading) !important;
  font-weight: var(--ww-weight-bold) !important;
  font-size: var(--ww-text-4xl, 2.5rem) !important;
  color: var(--ww-text) !important;
  margin: 0 0 var(--ww-space-2) !important;
  letter-spacing: var(--ww-ls-heading, -0.02em);
}
.ww-archive-desc {
  font-family: var(--ww-font-sub) !important;
  font-size: var(--ww-text-lg, 1.125rem) !important;
  color: var(--ww-body) !important;
  margin: 0;
}

/* Course title */
.tutor-course-title a,
.tutor-course-card .tutor-course-name a {
  font-family:    var(--ww-font-heading) !important;
  font-weight:    var(--ww-weight-semibold) !important;
  color:          var(--ww-text) !important;
  letter-spacing: var(--ww-ls-heading) !important;
  transition:     color var(--ww-transition);
}
.tutor-course-title a:hover,
.tutor-course-card .tutor-course-name a:hover {
  color: var(--ww-primary) !important;
}

/* Metadata / price */
.tutor-course-meta, .tutor-meta-value, .tutor-course-loop-meta,
.tutor-course-price, .tutor-price {
  font-family: var(--ww-font-sub) !important;
  color:       var(--ww-body)  !important;
  font-size:   var(--ww-text-sm) !important;
}
.tutor-course-price .tutor-price {
  font-weight: var(--ww-weight-bold) !important;
  color:       var(--ww-primary) !important;
  font-size:   var(--ww-text-xl) !important;
}

/* Star ratings */
.tutor-ratings-count, .tutor-star-rating .tutor-filled { color: var(--ww-amber) !important; }

/* Category badges */
.tutor-course-category,
.tutor-badge,
.tutor-category-tag {
  background:    var(--ww-gradient) !important;
  color:         var(--ww-white) !important;
  border-radius: var(--ww-radius-pill) !important;
  font-family:   var(--ww-font-label) !important;
  font-weight:   var(--ww-weight-bold) !important;
  font-size:     var(--ww-text-xs) !important;
  letter-spacing: var(--ww-ls-upper) !important;
  text-transform: uppercase !important;
  padding:       3px 10px !important;
  border:        none !important;
}

/* ────────────────────────────────────────────────────────────
   BUTTONS — all Tutor CTA buttons → pill gradient
   ──────────────────────────────────────────────────────────── */
/* Usa variáveis nativas do Tutor LMS (--tutor-color-primary via tutor_option) */
.tutor-btn,
.tutor-btn-primary,
.tutor-course-enroll-btn,
.tutor-course-enroll-button,
.tutor-start-course-btn,
.tutor-btn-login,
.tutor-button,
.tutor-enrollment-button,
a.tutor-btn,
button.tutor-btn {
  background:    linear-gradient(135deg, var(--tutor-color-primary, var(--ww-primary)) 0%, var(--ww-amber) 100%) !important;
  color:         var(--ww-white) !important;
  border:        none !important;
  border-radius: var(--ww-radius-pill) !important;
  font-family:   var(--ww-font-heading) !important;
  font-weight:   var(--ww-weight-semibold) !important;
  letter-spacing: var(--ww-ls-upper) !important;
  text-transform: uppercase !important;
  padding:        12px 32px !important;
  transition:    opacity var(--ww-transition), transform var(--ww-transition) !important;
  cursor:        pointer !important;
}
.tutor-btn:hover,
.tutor-btn-primary:hover,
.tutor-course-enroll-button:hover,
.tutor-start-course-btn:hover {
  opacity:   .88 !important;
  transform: translateY(-1px) !important;
  color:     var(--ww-white) !important;
}
.tutor-btn-outline-primary {
  background:  transparent !important;
  border:      2px solid var(--ww-primary) !important;
  color:       var(--ww-primary) !important;
  border-radius: var(--ww-radius-pill) !important;
}
.tutor-btn-outline-primary:hover {
  background: var(--ww-gradient) !important;
  color:      var(--ww-white) !important;
}
/* Continue lesson green */
.tutor-btn-success, .tutor-continue-btn {
  background:    var(--ww-green) !important;
  border-radius: var(--ww-radius-pill) !important;
  color:         var(--ww-white) !important;
}

/* ────────────────────────────────────────────────────────────
   SINGLE COURSE PAGE
   ──────────────────────────────────────────────────────────── */
.tutor-course-single-header,
.tutor-single-course-header {
  background: var(--ww-gradient) !important;
  color:      var(--ww-white) !important;
  padding:    var(--ww-space-16) 0 var(--ww-space-12) !important;
}
.tutor-course-single-header h1,
.tutor-course-single-header h2,
.tutor-single-course-header h1,
.tutor-single-course-header h2 {
  color:       var(--ww-white) !important;
  font-family: var(--ww-font-heading) !important;
  font-weight: var(--ww-weight-bold) !important;
}
.tutor-course-single-header .tutor-ratings-count,
.tutor-course-single-header .tutor-star-rating .tutor-filled {
  color: var(--ww-gold) !important;
}

/* ────────────────────────────────────────────────────────────
   COURSE SIDEBAR / ENROLLMENT CARD
   ──────────────────────────────────────────────────────────── */
.tutor-course-sidebar-card,
.tutor-sidebar,
.tutor-course-purchasing-box {
  border-radius: var(--ww-radius-lg) !important;
  box-shadow:    var(--ww-shadow-lg) !important;
  border:        none !important;
  overflow:      hidden;
}
.tutor-course-sidebar-card .tutor-price,
.tutor-course-purchasing-box .tutor-price {
  font-size:   var(--ww-text-4xl) !important;
  font-weight: var(--ww-weight-black) !important;
  color:       var(--ww-primary) !important;
}

/* ────────────────────────────────────────────────────────────
   CURRICULUM ACCORDION
   ──────────────────────────────────────────────────────────── */
.tutor-accordion-item {
  border:        1px solid rgba(244,123,32,.2) !important;
  border-radius: var(--ww-radius-md) !important;
  margin-bottom: var(--ww-space-2) !important;
  overflow:      hidden;
}
.tutor-accordion-item-header,
.tutor-accordion-item .tutor-accordion-header {
  background:  var(--ww-lavender) !important;
  font-family: var(--ww-font-heading) !important;
  font-weight: var(--ww-weight-semibold) !important;
  color:       var(--ww-text) !important;
  padding:     var(--ww-space-4) var(--ww-space-6) !important;
  cursor:      pointer;
}
.tutor-accordion-item-header:hover { background: rgba(244,123,32,.08) !important; }
.tutor-accordion-item.is-active .tutor-accordion-item-header {
  background: var(--ww-gradient) !important;
  color:      var(--ww-white) !important;
}
.tutor-course-lesson,
.tutor-accordion-content li,
.tutor-accordion-body li {
  padding:     var(--ww-space-2) var(--ww-space-4) !important;
  border-radius: var(--ww-radius-sm) !important;
  transition:  background var(--ww-transition);
}
.tutor-course-lesson:hover, .tutor-accordion-content li:hover {
  background: rgba(244,123,32,.06) !important;
}
/* Completed lesson checkmark */
.tutor-lesson-complete-icon { color: var(--ww-green) !important; }

/* ────────────────────────────────────────────────────────────
   VIDEO PLAYER / LESSON AREA
   ──────────────────────────────────────────────────────────── */
.tutor-video-player-wrap,
.tutor-lesson-video-wrap,
.video-js .vjs-control-bar {
  border-radius: var(--ww-radius-lg) !important;
  overflow:      hidden;
}
.video-js .vjs-progress-control .vjs-play-progress,
.video-js .vjs-volume-level {
  background: var(--ww-gradient) !important;
}
.video-js .vjs-big-play-button {
  background:    var(--ww-gradient) !important;
  border:        none !important;
  border-radius: var(--ww-radius-pill) !important;
}

/* HLS player (walkwise-lxp) */
.walkwise-hls-player {
  border-radius: var(--ww-radius-lg);
  overflow:      hidden;
}

/* ────────────────────────────────────────────────────────────
   DASHBOARD — Student & Instructor
   ──────────────────────────────────────────────────────────── */
.tutor-dashboard-sidebar,
.tutor-student-sidebar {
  background:    var(--ww-lavender) !important;
  border-radius: var(--ww-radius-lg) !important;
  padding:       var(--ww-space-6) !important;
}
.tutor-dashboard-nav li a,
.tutor-dashboard-sidebar a,
.tutor-student-sidebar a {
  font-family: var(--ww-font-sub) !important;
  color:       var(--ww-text) !important;
  border-radius: var(--ww-radius-sm) !important;
  padding:     var(--ww-space-2) var(--ww-space-4) !important;
  transition:  background var(--ww-transition), color var(--ww-transition);
  display:     block;
}
.tutor-dashboard-nav li a:hover,
.tutor-dashboard-sidebar a:hover,
.tutor-dashboard-nav li.tutor-is-active a,
.tutor-dashboard-nav li.active a {
  background: var(--ww-gradient) !important;
  color:      var(--ww-white) !important;
}
.tutor-dashboard-content,
.tutor-student-dashboard-main {
  border-radius: var(--ww-radius-lg) !important;
  box-shadow:    var(--ww-shadow-sm) !important;
}

/* Progress bars */
.tutor-progress-bar,
.tutor-course-progress-bar {
  background:    rgba(244,123,32,.15) !important;
  border-radius: var(--ww-radius-pill) !important;
  overflow:      hidden;
}
.tutor-progress-bar .tutor-progress-value,
.tutor-course-progress-bar .tutor-progress-fill {
  background:    var(--ww-gradient) !important;
  border-radius: var(--ww-radius-pill) !important;
}

/* Stats cards */
.tutor-dashboard-stat-card,
.tutor-card {
  border-radius: var(--ww-radius-lg) !important;
  box-shadow:    var(--ww-shadow-card) !important;
  border:        none !important;
}
.tutor-dashboard-stat-card .tutor-fs-5,
.tutor-card .tutor-fs-4 {
  color: var(--ww-primary) !important;
  font-weight: var(--ww-weight-black) !important;
}

/* ────────────────────────────────────────────────────────────
   LOGIN / REGISTER (Tutor)
   ──────────────────────────────────────────────────────────── */
.tutor-login-wrap,
.tutor-registration-wrap {
  background:    var(--ww-white);
  border-radius: var(--ww-radius-xl) !important;
  box-shadow:    var(--ww-shadow-lg) !important;
  padding:       var(--ww-space-10) !important;
}
.tutor-form-group label,
.tutor-login-wrap label,
.tutor-registration-wrap label {
  font-family: var(--ww-font-sub) !important;
  font-weight: var(--ww-weight-medium) !important;
  color:       var(--ww-text) !important;
}
.tutor-form-control,
.tutor-login-wrap input[type="text"],
.tutor-login-wrap input[type="password"],
.tutor-login-wrap input[type="email"] {
  border:        2px solid rgba(244,123,32,.3) !important;
  border-radius: var(--ww-radius-md) !important;
  font-family:   var(--ww-font-body) !important;
  transition:    border-color var(--ww-transition), box-shadow var(--ww-transition);
}
.tutor-form-control:focus,
.tutor-login-wrap input:focus {
  border-color: var(--ww-primary) !important;
  box-shadow:   0 0 0 3px rgba(244,123,32,.2) !important;
  outline:      none !important;
}

/* ────────────────────────────────────────────────────────────
   COURSE CATEGORIES PAGE
   ──────────────────────────────────────────────────────────── */
.tutor-archive-header,
.tutor-archive-title {
  font-family: var(--ww-font-heading) !important;
  color:       var(--ww-text) !important;
  font-weight: var(--ww-weight-bold) !important;
}

/* Filter bar */
.tutor-filter-bar select,
.tutor-filter-select {
  border:        2px solid rgba(244,123,32,.3) !important;
  border-radius: var(--ww-radius-md) !important;
  font-family:   var(--ww-font-body) !important;
}

/* ────────────────────────────────────────────────────────────
   NOTIFICATIONS / ALERTS
   ──────────────────────────────────────────────────────────── */
.tutor-alert-success, .tutor-notice.success { border-left: 4px solid var(--ww-green) !important; background: rgba(93,177,47,.08) !important; }
.tutor-alert-warning, .tutor-notice.warning { border-left: 4px solid var(--ww-amber) !important; background: rgba(251,181,14,.08) !important; }
.tutor-alert-danger,  .tutor-notice.error   { border-left: 4px solid #e74c3c !important; }
.tutor-alert-info,    .tutor-notice.info    { border-left: 4px solid var(--ww-primary) !important; background: rgba(244,123,32,.08) !important; }

/* ────────────────────────────────────────────────────────────
   QUIZ / ASSIGNMENT
   ──────────────────────────────────────────────────────────── */
.tutor-quiz-wrap,
.tutor-assignment-wrap {
  border-radius: var(--ww-radius-lg) !important;
  box-shadow:    var(--ww-shadow-sm) !important;
  padding:       var(--ww-space-8) !important;
}
.tutor-quiz-question {
  border-bottom: 2px solid var(--ww-lavender) !important;
  padding-bottom: var(--ww-space-6) !important;
  margin-bottom:  var(--ww-space-6) !important;
}
.tutor-option-field:checked + .tutor-option-field-label {
  border-color: var(--ww-primary) !important;
  background:   rgba(244,123,32,.08) !important;
}
.tutor-quiz-result-wrap {
  background:    var(--ww-gradient) !important;
  color:         var(--ww-white) !important;
  border-radius: var(--ww-radius-xl) !important;
  padding:       var(--ww-space-12) !important;
  text-align:    center;
}

/* ────────────────────────────────────────────────────────────
   INSTRUCTOR DASHBOARD
   ──────────────────────────────────────────────────────────── */
.tutor-chart-bar { fill: var(--ww-primary) !important; }
.tutor-earnings-amount { color: var(--ww-primary) !important; font-weight: var(--ww-weight-black) !important; }
.tutor-table th { background: var(--ww-lavender) !important; font-family: var(--ww-font-sub) !important; color: var(--ww-text) !important; }
.tutor-table tr:hover td { background: rgba(244,123,32,.04) !important; }

/* ────────────────────────────────────────────────────────────
   SEARCH BAR (TutorStarter default)
   ──────────────────────────────────────────────────────────── */
.tutor-course-search-wrap input[type="search"],
.tutor-search-box input {
  border:        2px solid rgba(244,123,32,.35) !important;
  border-radius: var(--ww-radius-pill) !important;
  padding:       var(--ww-space-3) var(--ww-space-6) !important;
  font-family:   var(--ww-font-body) !important;
}
.tutor-course-search-wrap input:focus { border-color: var(--ww-primary) !important; outline: none !important; }
.tutor-search-btn,
.tutor-course-search-wrap button { background: var(--ww-gradient) !important; border-radius: var(--ww-radius-pill) !important; color: var(--ww-white) !important; border: none !important; }

/* ────────────────────────────────────────────────────────────
   RESPONSIVE TUTOR
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .tutor-dashboard-sidebar,
  .tutor-student-sidebar {
    padding: var(--ww-space-4, 1rem) !important;
  }
  .tutor-dashboard-content,
  .tutor-student-dashboard-main {
    padding: var(--ww-space-4, 1rem) !important;
  }
  .tutor-course-sidebar-card,
  .tutor-course-purchasing-box {
    margin-bottom: var(--ww-space-6, 1.5rem);
  }
}

@media (max-width: 768px) {
  .tutor-dashboard-sidebar, .tutor-student-sidebar { border-radius: var(--ww-radius-md) !important; }
  .tutor-login-wrap, .tutor-registration-wrap { padding: var(--ww-space-6) !important; }
}

@media (max-width: 414px) {
  .tutor-course-card,
  .tutor-course-loop-item,
  .tutor-course-filter-loop-item {
    border-radius: var(--ww-radius-md) !important;
  }
  .tutor-btn,
  .tutor-btn-primary,
  .tutor-course-enroll-btn,
  .tutor-course-enroll-button,
  .tutor-start-course-btn {
    padding: 10px 20px !important;
    font-size: 0.8125rem !important;
  }
  .tutor-login-wrap,
  .tutor-registration-wrap {
    padding: var(--ww-space-4, 1rem) !important;
    border-radius: var(--ww-radius-lg) !important;
  }
  .ww-archive-title {
    font-size: var(--ww-text-3xl, 1.875rem) !important;
  }
  .ww-archive-desc {
    font-size: var(--ww-text-base, 1rem) !important;
  }
  .ww-lesson-nav__inner {
    gap: 0.5rem;
  }
  .ww-lesson-nav__btn {
    min-width: 70px;
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
  }
  .ww-lesson-nav__complete {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
  }
  body.single-lesson {
    padding-bottom: 70px;
  }
  .ww-onboarding {
    padding: 1.25rem;
  }
  .ww-ob-courses {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 375px) {
  .tutor-course-thumbnail,
  .tutor-course-card-thumbnail {
    aspect-ratio: 16 / 9;
  }
  .tutor-btn,
  .tutor-btn-primary,
  .tutor-course-enroll-btn,
  .tutor-course-enroll-button,
  .tutor-start-course-btn {
    padding: 8px 16px !important;
    font-size: 0.75rem !important;
  }
  .tutor-login-wrap,
  .tutor-registration-wrap {
    padding: 0.875rem !important;
  }
  .ww-archive-title {
    font-size: var(--ww-text-2xl, 1.5rem) !important;
  }
  .ww-lesson-nav__btn {
    min-width: 60px;
    padding: 0.375rem 0.625rem;
    font-size: 0.6875rem;
  }
  .ww-lesson-nav__complete {
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
  }
  body.single-lesson {
    padding-bottom: 60px;
  }
  .ww-onboarding {
    padding: 1rem;
  }
  .ww-onboarding__title {
    font-size: var(--ww-text-xl, 1.25rem);
  }
  .ww-onboarding__lead {
    font-size: 0.875rem;
  }
  .ww-progress-trail__inner {
    gap: 0;
  }
  .ww-trail-step {
    min-width: 60px;
  }
  .ww-trail-step__circle {
    width: 44px;
    height: 44px;
  }
  .ww-trail-connector {
    max-width: 24px;
    margin-top: 18px;
  }
  .ww-trail-step__label {
    font-size: 0.625rem;
  }
  .ww-dash-stats {
    gap: 0.5rem;
  }
  .ww-dash-stat {
    padding: 0.5rem 0.875rem;
    min-width: 80px;
  }
  .ww-dash-stat span {
    font-size: 1.25rem;
  }
}

/* ────────────────────────────────────────────────────────────
   ONBOARDING WIZARD (Sprint 1B) — new-student 3-step welcome
   ──────────────────────────────────────────────────────────── */
.ww-onboarding {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 1.75rem;
  background: var(--ww-white);
  border: 1px solid rgba(244, 123, 32, .18);
  border-radius: var(--ww-radius-xl);
  box-shadow: var(--ww-shadow-card);
  overflow: hidden;
}
.ww-onboarding::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--ww-gradient);
}
.ww-onboarding__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.ww-onboarding__steps { display: flex; gap: .5rem; }
.ww-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E0E0E0;
  transition: background var(--ww-transition), transform var(--ww-transition);
}
.ww-step-dot.is-active { background: var(--ww-primary); transform: scale(1.25); }
.ww-step-dot.is-done   { background: var(--ww-green); }
.ww-onboarding__skip {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ww-font-sub);
  font-size: var(--ww-text-sm);
  font-weight: var(--ww-weight-medium);
  color: var(--ww-body);
  padding: .25rem .5rem;
  border-radius: var(--ww-radius-sm);
  transition: color var(--ww-transition), background var(--ww-transition);
}
.ww-onboarding__skip:hover  { color: var(--ww-primary); background: rgba(244, 123, 32, .06); }
.ww-onboarding__skip:focus-visible { outline: 2px solid var(--ww-primary); outline-offset: 2px; }
.ww-onboarding__step[aria-hidden="true"] { display: none; }
.ww-onboarding__title {
  font-family: var(--ww-font-heading);
  font-size: var(--ww-text-2xl);
  font-weight: var(--ww-weight-bold);
  line-height: var(--ww-lh-heading);
  color: var(--ww-text);
  margin: 0 0 .5rem;
  outline: none;
}
.ww-onboarding__lead {
  font-family: var(--ww-font-sub);
  font-size: var(--ww-text-base);
  line-height: var(--ww-lh-body);
  color: var(--ww-body);
  margin: 0 0 1.25rem;
  max-width: 52ch;
}
.ww-ob-courses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem;
  margin: 0 0 1.5rem;
}
.ww-ob-course {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem .875rem;
  background: var(--ww-lavender);
  border-radius: var(--ww-radius-md);
  border: 1px solid transparent;
  transition: border-color var(--ww-transition), transform var(--ww-transition);
}
.ww-ob-course:hover { border-color: rgba(244, 123, 32, .25); transform: translateY(-2px); }
.ww-ob-course__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ww-gradient);
  color: var(--ww-white);
  font-family: var(--ww-font-heading);
  font-size: var(--ww-text-xs);
  font-weight: var(--ww-weight-bold);
}
.ww-ob-course__title {
  flex: 1;
  font-family: var(--ww-font-sub);
  font-size: var(--ww-text-sm);
  font-weight: var(--ww-weight-semibold);
  color: var(--ww-text);
  line-height: 1.3;
}
.ww-ob-course__badge {
  flex-shrink: 0;
  font-family: var(--ww-font-sub);
  font-size: .625rem;
  font-weight: var(--ww-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ww-ls-label);
  color: var(--ww-green);
  background: rgba(93, 177, 47, .12);
  padding: .15rem .45rem;
  border-radius: var(--ww-radius-pill);
}
.ww-onboarding .ww-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--ww-font-sub);
  font-size: var(--ww-text-base);
  font-weight: var(--ww-weight-semibold);
  padding: .75rem 1.5rem;
  border-radius: var(--ww-radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--ww-transition), box-shadow var(--ww-transition), background var(--ww-transition), color var(--ww-transition);
}
.ww-onboarding .ww-btn--primary {
  background: var(--ww-gradient);
  color: var(--ww-white);
  box-shadow: 0 4px 14px rgba(244, 123, 32, .3);
  margin-right: .5rem;
}
.ww-onboarding .ww-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(244, 123, 32, .4); color: var(--ww-white); }
.ww-onboarding .ww-btn--ghost {
  background: transparent;
  color: var(--ww-body);
  border-color: rgba(38, 70, 83, .2);
}
.ww-onboarding .ww-btn--ghost:hover { color: var(--ww-primary); border-color: var(--ww-primary); }
.ww-onboarding .ww-btn:focus-visible { outline: 2px solid var(--ww-primary); outline-offset: 2px; }
.ww-onboarding .ww-btn[disabled] { opacity: .6; cursor: progress; }

/* ────────────────────────────────────────────────────────────
   BADGE GRID — Rich SVG (Sprint 1B)
   ──────────────────────────────────────────────────────────── */
.ww-badges { margin: 1.5rem 0; padding: 1.25rem; background: var(--ww-lavender); border-radius: var(--ww-radius-lg); }
.ww-badges__title { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ww-body); margin: 0 0 1rem; }
.ww-badges__grid { display: flex; gap: 1rem; flex-wrap: wrap; }
.ww-badge { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 80px; position: relative; }
.ww-badge__icon-wrap { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.ww-badge.is-earned .ww-badge__icon-wrap { background: linear-gradient(135deg, var(--ww-primary) 0%, var(--ww-amber) 100%); box-shadow: 0 4px 12px rgba(244,123,32,.35); }
.ww-badge.is-locked .ww-badge__icon-wrap { background: #E8E8E8; filter: grayscale(1); }
.ww-badge.is-earned:hover .ww-badge__icon-wrap { transform: scale(1.1) rotate(-3deg); }
.ww-badge__icon-wrap svg { width: 28px; height: 28px; }
.ww-badge.is-earned .ww-badge__icon-wrap svg { fill: white; }
.ww-badge.is-locked .ww-badge__icon-wrap svg { fill: #999; }
.ww-badge__label { font-size: .6875rem; font-weight: 600; text-align: center; line-height: 1.2; color: var(--ww-text); }
.ww-badge.is-locked .ww-badge__label { color: var(--ww-body); }
.ww-badge__earned-mark { position: absolute; top: -4px; right: 0; width: 18px; height: 18px; background: var(--ww-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .625rem; color: white; font-weight: 700; }

/* ────────────────────────────────────────────────────────────
   TOAST NOTIFICATIONS (Sprint 1B)
   ──────────────────────────────────────────────────────────── */
.ww-toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 99999; display: flex; flex-direction: column; gap: .75rem; pointer-events: none; }
.ww-toast { background: white; border-radius: var(--ww-radius-lg); padding: 1rem 1.25rem; box-shadow: 0 8px 32px rgba(0,0,0,.15); display: flex; align-items: center; gap: .75rem; transform: translateX(120%); opacity: 0; transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .4s ease; border-left: 4px solid var(--ww-primary); max-width: 280px; }
.ww-toast--visible { transform: translateX(0); opacity: 1; }
.ww-toast__icon { font-size: 1.5rem; flex-shrink: 0; }
.ww-toast__body { font-size: .875rem; line-height: 1.4; color: var(--ww-text); }
.ww-toast__body strong { color: var(--ww-primary); }

/* Respect reduced-motion preferences for all Sprint 1B animations. */
@media (prefers-reduced-motion: reduce) {
  .ww-step-dot,
  .ww-ob-course,
  .ww-onboarding .ww-btn,
  .ww-badge__icon-wrap,
  .ww-toast { transition: none !important; }
  .ww-badge.is-earned:hover .ww-badge__icon-wrap,
  .ww-ob-course:hover,
  .ww-onboarding .ww-btn--primary:hover { transform: none !important; }
}

/* ────────────────────────────────────────────────────────────
   PROGRESS TRAIL (student dashboard) + ROLE DASHBOARD STATS
   ──────────────────────────────────────────────────────────── */
.ww-progress-trail { margin: 1.5rem 0; }
.ww-progress-trail__inner { display: flex; align-items: flex-start; gap: 0; justify-content: center; }
.ww-trail-step { display: flex; flex-direction: column; align-items: center; gap: .5rem; min-width: 80px; position: relative; z-index: 1; }
/* Connector sits BETWEEN steps as a sibling element, so target it via the
   adjacent-sibling combinator (the spec's descendant selector never matches). */
.ww-trail-connector { flex: 1; height: 3px; background: var(--ww-border); margin-top: 24px; min-width: 20px; max-width: 60px; }
.ww-trail-step--done + .ww-trail-connector,
.ww-trail-step--active + .ww-trail-connector { background: var(--ww-primary); }
.ww-trail-step__circle { width: 56px; height: 56px; position: relative; }
.ww-trail-step__circle svg { transform: rotate(-90deg); }
.ww-trail-step__circle .bg { fill: none; stroke: var(--ww-border); stroke-width: 3; }
.ww-trail-step__circle .fg { fill: none; stroke: var(--ww-primary); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.ww-trail-step--locked .ww-trail-step__circle .fg { stroke: var(--ww-border); }
.ww-trail-step__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .6875rem; font-weight: 700; color: var(--ww-text); }
.ww-trail-step__label { font-size: .75rem; font-weight: 600; color: var(--ww-body); text-align: center; line-height: 1.2; }
.ww-trail-step--done .ww-trail-step__label { color: var(--ww-primary); }

.ww-dash-stats { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.ww-dash-stat { background: rgba(255,255,255,.15); border-radius: var(--ww-radius-md); padding: .75rem 1.25rem; text-align: center; min-width: 100px; }
.ww-dash-stat span { display: block; font-size: 1.75rem; font-weight: 700; color: inherit; }
.ww-dash-stat label { font-size: .75rem; opacity: .8; }
.ww-dash-stat--alert span { color: #FF6B6B; }

/* Banner variants — coordinator/manager/instructor use solid gradients, so the
   base decorative welcome image (::after) is hidden to keep the KPIs readable.
   The student variant keeps the default brand gradient + welcome image. */
.ww-lms-dashboard-banner--manager,
.ww-lms-dashboard-banner--coordinator { background: linear-gradient(135deg, var(--ww-text) 0%, #1a3a4a 100%); color: white; }
.ww-lms-dashboard-banner--instructor { background: linear-gradient(135deg, #264653 0%, #2d6a4f 100%); color: white; }
.ww-lms-dashboard-banner--manager::after,
.ww-lms-dashboard-banner--coordinator::after,
.ww-lms-dashboard-banner--instructor::after { display: none; }
.ww-lms-dashboard-banner--student .ww-lms-dashboard-banner__text { flex: 0 1 auto; }

/* ─────────────────────────────────────────────────────────────
   WalkWise Lesson Navigation Bar (fixed footer on lesson pages)
   ───────────────────────────────────────────────────────────── */
.ww-lesson-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: white; border-top: 1px solid var(--ww-border, #E8E8E8);
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
  padding: .75rem 1.5rem;
}
.ww-lesson-nav__inner {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ww-lesson-nav__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .625rem 1.25rem; border-radius: var(--ww-radius-pill, 9999px);
  font-size: .875rem; font-weight: 600; text-decoration: none;
  color: var(--ww-text, #264653); border: 2px solid var(--ww-border, #E8E8E8);
  transition: border-color .15s, color .15s; min-width: 100px;
}
.ww-lesson-nav__btn--prev { justify-content: flex-start; }
.ww-lesson-nav__btn--next { justify-content: flex-end; }
.ww-lesson-nav__btn:hover, .ww-lesson-nav__btn:focus-visible {
  border-color: var(--ww-primary, #F47B20); color: var(--ww-primary, #F47B20);
  outline: none;
}
.ww-lesson-nav__btn.is-disabled { visibility: hidden; }
.ww-lesson-nav__complete {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.75rem; border-radius: var(--ww-radius-pill, 9999px);
  background: linear-gradient(135deg, var(--ww-primary, #F47B20) 0%, var(--ww-amber, #FBB50E) 100%);
  color: white; font-size: .9375rem; font-weight: 700; border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(244,123,32,.4); transition: transform .15s, box-shadow .15s;
  min-height: 44px;
}
.ww-lesson-nav__complete:hover, .ww-lesson-nav__complete:focus-visible {
  transform: translateY(-1px); box-shadow: 0 6px 20px rgba(244,123,32,.5);
  outline: 2px solid var(--ww-primary, #F47B20); outline-offset: 2px;
}
.ww-lesson-nav__complete:disabled { opacity: .7; cursor: default; }
.ww-lesson-nav__done {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.75rem; border-radius: var(--ww-radius-pill, 9999px);
  background: var(--ww-green, #5DB12F); color: white;
  font-size: .9375rem; font-weight: 700; min-height: 44px;
}
/* Push page content up to avoid fixed nav overlap */
body.single-lesson { padding-bottom: 80px; }
@media (prefers-reduced-motion: reduce) { .ww-lesson-nav__complete { transition: none; } }