/* =============================================
   LEARNFRISIAN - DUOLINGO-STYLE CHAPTER PAGES
   v15 - Complete Overhaul
   ============================================= */

/* === PAGE LAYOUT: Add top padding so content is not at very top === */
body.learndash-cpt .content-area {
  padding-top: 0 !important;
}
body.learndash-cpt .entry-content,
body.learndash-cpt .learndash {
  padding-top: 0 !important;
}

/* === BREADCRUMBS BAR === */
.learndash-wrapper .ld-breadcrumbs,
.learndash-wrapper .ld-lesson-status .ld-breadcrumbs {
  background: linear-gradient(135deg, #0d1f3c 0%, #1a3a5c 100%) !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  margin-bottom: 16px !important;
}
.learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
}
.learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments li a {
  color: #a8d8f0 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments li a[aria-current="page"] {
  color: #ffffff !important;
}
.learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-progress,
.learndash-wrapper .ld-lesson-status .ld-status.ld-status-progress {
  background: #00b2d4 !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-left: 8px !important;
  border: none !important;
}
.learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-complete,
.learndash-wrapper .ld-lesson-status .ld-status.ld-status-complete {
  background: #32cd32 !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-left: 8px !important;
  border: none !important;
}

/* === LESSON CONTENT AREA: Duolingo card style === */
.learndash .ld-tabs,
.learndash-wrapper .ld-tabs {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  border: 2px solid #e8f4fd !important;
}

/* === LESSON CONTENT TAB PANELS === */
.ld-tabs-content .ld-tab-content {
  padding: 16px 0 !important;
}

/* === VIDEO WRAPPER: Add breathing room === */
.lf-video-wrapper,
.learndash-wrapper iframe,
.learndash-wrapper .video-container {
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

/* === LESSON CONTENT TEXT === */
.ld-tabs-content p,
.entry-content .learndash p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #1a1a2e !important;
  margin-bottom: 16px !important;
}

/* === NAVIGATION BUTTONS === */
.ld-content-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 20px 0 !important;
  margin-top: 12px !important;
}
.ld-content-actions .ld-button {
  background: linear-gradient(135deg, #00b2d4, #0094b0) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 14px 28px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(0,178,212,0.4) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.ld-content-actions .ld-button:hover {
  background: linear-gradient(135deg, #0094b0, #007a94) !important;
  box-shadow: 0 6px 20px rgba(0,178,212,0.5) !important;
  transform: translateY(-2px) !important;
}

/* === MARK COMPLETE BUTTON === */
.learndash_mark_complete_button,
#learndash_mark_complete_button,
.ld-button.learndash-mark-complete-button {
  background: linear-gradient(135deg, #32cd32, #28a428) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 14px 32px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(50,205,50,0.4) !important;
  cursor: pointer !important;
}
.learndash_mark_complete_button:hover {
  background: linear-gradient(135deg, #28a428, #1f8c1f) !important;
  box-shadow: 0 6px 20px rgba(50,205,50,0.5) !important;
  transform: translateY(-2px) !important;
}

/* === COURSE BACK LINK === */
.ld-course-step-back a {
  color: #00b2d4 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  border: 2px solid #00b2d4 !important;
  border-radius: 20px !important;
  transition: all 0.2s ease !important;
}
.ld-course-step-back a:hover {
  background: #00b2d4 !important;
  color: #ffffff !important;
}

/* === SIDEBAR STYLES === */
.primary-sidebar .sidebar-inner-wrap {
  background: linear-gradient(180deg, #0d1f3c 0%, #1a2f4e 100%) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  overflow: hidden !important;
}
.primary-sidebar .ld-item-list-item {
  background: linear-gradient(135deg, #e8f4fd 0%, #f8fcff 100%) !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
}
.primary-sidebar .ld-item-list-item:hover {
  border-left-color: #00b2d4 !important;
  background: linear-gradient(135deg, #d0eaf8 0%, #e8f7ff 100%) !important;
  transform: translateX(3px) !important;
}
.primary-sidebar .ld-item-name {
  color: #0d1f3c !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}
.primary-sidebar .ld-item-list-item.learndash-current {
  border-left-color: #32cd32 !important;
  background: linear-gradient(135deg, #e8fde8 0%, #f0fff0 100%) !important;
}
.primary-sidebar .ld-item-list-item.learndash-current .ld-item-name {
  color: #1a6b1a !important;
  font-weight: 700 !important;
}
.primary-sidebar .ld-status-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #c8e6f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.primary-sidebar .ld-status-icon.ld-status-complete {
  background: #32cd32 !important;
  color: #ffffff !important;
}
.primary-sidebar .ld-status-icon.ld-status-in-progress {
  background: #FF5D00 !important;
  color: #ffffff !important;
}

/* === QUIZ: Add proper spacing so it is not at the very top === */
.wpProQuiz_content {
  margin-top: 30px !important;
  padding: 0 !important;
}
body.learndash-cpt-sfwd-quiz .entry-content {
  padding-top: 24px !important;
}
body.learndash-cpt-sfwd-quiz .learndash-wrapper {
  margin-top: 10px !important;
}

/* === QUIZ CONTAINER: Duolingo card style === */
.wpProQuiz_content .wpProQuiz_quiz {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 30px rgba(0,0,0,0.1) !important;
  padding: 24px !important;
  border: 2px solid #e8f4fd !important;
  margin: 0 auto !important;
  max-width: 700px !important;
}

/* === QUIZ PROGRESS BAR === */
.wpProQuiz_content .wpProQuiz_time_limit,
.wpProQuiz_content .wpProQuiz_progress {
  background: #e8f4fd !important;
  border-radius: 10px !important;
  height: 8px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

/* === QUIZ QUESTION === */
.wpProQuiz_question_text,
.wpProQuiz_questionListItem .wpProQuiz_questionList {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0d1f3c !important;
  text-align: center !important;
  margin-bottom: 24px !important;
  line-height: 1.4 !important;
}

/* === QUIZ ANSWER OPTIONS === */
/* NOTE: NO display property here — wpProQuiz JS controls show/hide */
.wpProQuiz_questionList li:not([style*="display: none"]),
.wpProQuiz_listItem:not([style*="display: none"]) {
  background: #f0f8ff !important;
  border: 2px solid #c8e6f0 !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  margin-bottom: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-size: 16px !important;
  color: #1a1a2e !important;
  align-items: center !important;
  gap: 12px !important;
}
/* Hard safety: keep quiz JS hidden items hidden */
.wpProQuiz_listItem[style*="display: none"],
ol.wpProQuiz_list > li[style*="display: none"] {
  display: none !important;
}
.wpProQuiz_questionList li:not([style*="display: none"]):hover,
.wpProQuiz_listItem:not([style*="display: none"]):hover {
  background: #d0eaf8 !important;
  border-color: #00b2d4 !important;
  transform: scale(1.01) !important;
}
.wpProQuiz_questionList li.wpProQuiz_answerCorrect,
.wpProQuiz_listItem.wpProQuiz_answerCorrect {
  background: #e8fde8 !important;
  border-color: #32cd32 !important;
}
.wpProQuiz_questionList li.wpProQuiz_answerIncorrect,
.wpProQuiz_listItem.wpProQuiz_answerIncorrect {
  background: #fde8e8 !important;
  border-color: #ff4444 !important;
}

/* === QUIZ RADIO/CHECKBOX === */
.wpProQuiz_listItem input[type="radio"],
.wpProQuiz_listItem input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: #00b2d4 !important;
}

/* === QUIZ QUESTION COUNTER === */
.wpProQuiz_questionCountPage {
  background: #00b2d4 !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
}

/* === QUIZ BUTTONS (CHECK / BACK / NEXT) === */
.wpProQuiz_button,
.wpProQuiz_button2 {
  border-radius: 50px !important;
  padding: 12px 28px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.wpProQuiz_button[name="check"],
.wpProQuiz_button2[name="check"] {
  background: linear-gradient(135deg, #32cd32, #28a428) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(50,205,50,0.4) !important;
}
.wpProQuiz_input[name="next"],
.wpProQuiz_button2[name="next"] {
  background: linear-gradient(135deg, #00b2d4, #0094b0) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0,178,212,0.4) !important;
}
.wpProQuiz_button[name="back"],
.wpProQuiz_button2[name="back"] {
  background: #f0f8ff !important;
  color: #00b2d4 !important;
  border: 2px solid #00b2d4 !important;
}

/* === QUIZ RESULTS === */
.wpProQuiz_results {
  text-align: center !important;
  padding: 24px !important;
  background: linear-gradient(135deg, #f0fff0 0%, #e8fde8 100%) !important;
  border-radius: 20px !important;
  border: 2px solid #32cd32 !important;
}
.wpProQuiz_results h4 {
  font-size: 24px !important;
  color: #0d1f3c !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
}

/* === START LESSON BUTTON (on quiz intro page) === */
.ld-button.ld-primary-color-bg,
.ld-course-step-start {
  background: linear-gradient(135deg, #FF5D00, #e05200) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 16px 40px !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(255,93,0,0.4) !important;
  display: block !important;
  text-align: center !important;
  width: fit-content !important;
  margin: 20px auto !important;
}

/* === COURSE PAGE: Section headings === */
.ld-section-heading,
.ld-item-list-section-heading,
.ld-lesson-section-heading,
.learndash-wrapper .ld-item-list-section-heading,
.learndash-wrapper .ld-lesson-section-heading,
body .ld-item-list-section-heading,
body .ld-lesson-section-heading {
  background: linear-gradient(135deg, #32cd32, #28a428) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 12px !important;
  margin-top: 16px !important;
}

/* === COURSE LESSON LIST ITEMS === */
.ld-item-list-item.ld-lesson-item {
  background: #ffffff !important;
  border: 2px solid #e8f4fd !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
}
.ld-item-list-item.ld-lesson-item:hover {
  border-color: #00b2d4 !important;
  box-shadow: 0 4px 16px rgba(0,178,212,0.15) !important;
}
.ld-item-list-item.ld-lesson-item .ld-item-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0d1f3c !important;
}
.ld-item-list-item.ld-lesson-item.ld-is-complete {
  border-color: #32cd32 !important;
  background: linear-gradient(135deg, #f0fff0 0%, #ffffff 100%) !important;
}
.ld-item-list-item.ld-lesson-item.ld-is-current-item {
  border-color: #FF5D00 !important;
  background: linear-gradient(135deg, #fff8f5 0%, #ffffff 100%) !important;
}

/* === COURSE PROGRESS BAR === */
.ld-progress .ld-progress-heading {
  font-weight: 700 !important;
  color: #0d1f3c !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
}
.ld-progress-bar {
  height: 12px !important;
  border-radius: 6px !important;
  background: #e8f4fd !important;
  overflow: hidden !important;
}
.ld-progress-bar-percentage {
  background: linear-gradient(90deg, #32cd32, #00b2d4) !important;
  height: 100% !important;
  border-radius: 6px !important;
  transition: width 0.5s ease !important;
}

/* === RESPONSIVE: Mobile-friendly quiz and lesson === */
@media (max-width: 768px) {
  .wpProQuiz_content .wpProQuiz_quiz {
    padding: 16px !important;
    border-radius: 16px !important;
  }
  .wpProQuiz_question_text {
    font-size: 17px !important;
  }
  .wpProQuiz_questionList li:not([style*="display: none"]) {
    padding: 12px 16px !important;
  }
  .ld-content-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ld-content-actions .ld-button {
    width: 100% !important;
    text-align: center !important;
  }
  .learndash_mark_complete_button {
    width: 100% !important;
    text-align: center !important;
  }
  .learndash .ld-tabs {
    padding: 16px !important;
    border-radius: 12px !important;
  }
}

/* ---- END v15 ---- */