:root{
  --brand:#CF5C09;
  --brand-600:#cf5c09;
  --text:#1f2937;
  --muted:#6b7280;
  --bg-start:#f8f5f2;
  --bg-end:#f2ebe4;
  --card:#ffffffcc;
  --card-solid:#fff;
  --ring:rgba(207,92,9,0.25);
}

/* Page scaffold */
.lesson-page{
  background: radial-gradient(1200px 600px at 20% -10%, var(--bg-end) 0%, var(--bg-start) 40%, #fff 100%);
  color: var(--text);
}

/* Fixed navbar for lessons */
.lesson-navbar{
  height: 65px;
  background-color: #f7ecdf !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  backdrop-filter: saturate(120%) blur(2px);
}

/* Ensure content is visible below fixed navbar */
.course-playing{
  padding-top: 80px;
}

/* Content wrapper */
.course-playing-content{
  background: var(--card);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  border: 1px solid rgba(207,92,9,0.08);
}

/* Video container */
.video-container{
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}
.video-container video,
.video-container iframe{
  width: 100%;
  height: auto;
}

/* Plyr/menu z-index fix */
.plyr__menu__container{ z-index: 1035 !important; }

/* Audio wrapper spacing */
.audio-wrapper{ margin-top: 24px; }

/* Locked content card */
.locked-card{
  background: var(--card-solid);
  border: 1px dashed rgba(207,92,9,0.25);
  border-radius: 14px;
  padding: 28px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.locked-card i{ color: var(--brand); }

/* Bottom tabs area */
.content > div{
  background: var(--card-solid);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border: 1px solid rgba(207,92,9,0.08);
  overflow: hidden;
}

/* Navbar progress widget */
.navbar-progress{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  margin: 0 12px;
}
.navbar-progress .progress-info{
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.navbar-progress .progress-info .percentage{ color: var(--brand); font-weight: 600; }
.navbar-progress .progress-bar{
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #efe7df;
  overflow: hidden;
  outline: 1px solid rgba(207,92,9,0.1);
}
.navbar-progress .progress-bar span{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, #f39d6b 100%);
  width: 0%;
  transition: width .4s ease;
}

/* Buttons unify color */
.btn,
.btn-primary,
.btn-outline-secondary,
.btn-success,
.btn-info{
  --bs-btn-color:#fff;
}
.btn-primary,
.btn-success,
.btn-info{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
.btn-outline-secondary:hover{
  color: #fff !important;
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Typography tweaks */
.fs-6{ font-weight: 600; color: #23413a; }
.text-12px{ font-size: 12px; color: var(--muted); }

/* Responsive */
@media (max-width: 992px){
  .navbar-progress{ display: none; }
  .course-playing{ padding-top: 72px; }
} 

/* Quiz styles */
.quiz-card .card-header{
  background: transparent;
  border-bottom: 1px solid rgba(207,92,9,0.12);
}
.quiz-header h5{ font-weight: 700; color: #1f2937; }
.quiz-meta{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.quiz-meta .meta-pill{
  background: #fff;
  border: 1px solid rgba(207,92,9,0.15);
  color: #6b7280;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}

.quiz-timer{ position: sticky; top: 80px; z-index: 10; }
.quiz-timer .clock{ transform: scale(0.9); }

/* Question blocks */
.ajaxFormSubmission{ /* each question form */
  background: #fff;
  border: 1px solid rgba(207,92,9,0.10);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 18px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}
.quiz-divider{ height: 1px; background: rgba(207,92,9,0.12); margin: 10px 0 16px; border-radius: 1px; }

/* Option styling */
.ajaxFormSubmission .form-group{ margin-bottom: 10px; }
.ajaxFormSubmission input[type="radio"],
.ajaxFormSubmission input[type="checkbox"]{
  accent-color: var(--brand);
  width: 16px; height: 16px; margin-right: 8px;
}
.ajaxFormSubmission label.radio,
.ajaxFormSubmission label.checkbox{
  display: inline-block;
  padding: 8px 12px;
  background: #faf7f4;
  border: 1px solid rgba(207,92,9,0.15);
  border-radius: 10px;
  transition: background .2s ease, border-color .2s ease;
}
.ajaxFormSubmission input:checked + label{
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 4px 14px rgba(207,92,9,0.12);
}

/* Submit button area */
#quizSubmissionBtn{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  padding: 10px 28px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(207,92,9,0.22);
}

/* Quiz Result */
.quiz-summary{
  background: #fff;
  border: 1px solid rgba(207,92,9,0.12);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}
.quiz-summary .stats{ display:flex; gap: 16px; justify-content:center; flex-wrap: wrap; }
.quiz-summary .stat{ background:#faf7f4; border:1px solid rgba(207,92,9,0.12); border-radius:999px; padding:6px 12px; font-size:13px; color:#6b7280; }
.quiz-summary .obtained.pass{ color: #059669; font-weight:700; }
.quiz-summary .obtained.fail{ color: #dc2626; font-weight:700; }

/* Correct/Wrong badges */
.quiz-answer-status{ font-weight:700; margin-top:6px; }
.quiz-answer-status.correct{ color:#059669; }
.quiz-answer-status.wrong{ color:#dc2626; }