/* base.css
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

/* Footer styles */
.footer {
  margin-top: auto;
  background-color: #f8f9fa;
  padding: 3rem 0;
}

.footer h5 {
  font-size: 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.footer .list-unstyled li {
  margin-bottom: 0.5rem;
}

.footer a {
  color: #6c757d;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer a:hover {
  color: #0d6efd;
}

.footer .text-muted {
  color: #6c757d !important;
}

.footer hr {
  margin: 2rem 0;
  opacity: 0.1;
}

.footer .legal-text {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Progress bar styles (keeping your existing progress bar code) */
.progress-bar-mastered {
  width: var(--mastered-percent);
  background-color: var(--bs-success);
}

.progress-bar-reviewing {
  width: var(--reviewing-percent);
  background-color: var(--bs-info);
}

.progress-bar-learning {
  width: var(--learning-percent);
  background-color: var(--bs-warning);
}

.question-status-item {
  cursor: pointer;
}

.progress-tall {
  height: 20px;
}

/* Width utility classes (keeping your existing width classes) */
.w-mastered {
  width: var(--mastered-percent);
}

.w-reviewing {
  width: var(--reviewing-percent);
}

.w-learning {
  width: var(--learning-percent);
}

.p-zero {
  padding: 0;
}

.progress-small {
  height: 10px;
}

.w-mastered-count {
  width: var(--mastered-count-percent);
}

.w-reviewing-count {
  width: var(--reviewing-count-percent);
}

.w-learning-count {
  width: var(--learning-count-percent);
}



/* Progress bar width increments (0-100 in 5% steps) */
.w-0 { width: 0; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }