/* Vaakrasa: LifterLMS surface styling.
   Loaded after vaakrasa-overrides.css on course, lesson, catalog, dashboard
   and checkout pages.

   The plugin ships light-theme templates. Earlier work turned the TEXT white but
   left several of the plugin's own light backgrounds in place, which produced
   white-on-white in the syllabus, the lesson rows and the progress area. This
   file fixes the backgrounds rather than the text. */

/* ---------- The dashboard shell ----------
   The dashboard page wraps [lifterlms_my_account] in .vk-lms-shell. Logged out
   that shortcode renders a login form, which should be a narrow centred card
   rather than a full-width stretch. Logged in it renders the real dashboard,
   which wants the full width. */
.vk-lms-shell .llms-person-login-form-wrapper,
.vk-lms-shell .llms-new-person-form-wrapper {
  max-width: 460px;
  margin: 0 auto;
  padding: clamp(26px, 3.5vw, 40px);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
}
.vk-lms-shell .llms-person-login-form-wrapper h2,
.vk-lms-shell .llms-new-person-form-wrapper h2 {
  margin: 0 0 6px;
  font-size: 1.5rem !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: -.02em;
}
.vk-lms-shell .llms-person-login-form-wrapper .llms-form-field { margin-bottom: 6px; }
.vk-lms-shell button[type="submit"],
.vk-lms-shell .llms-button-action { width: 100%; justify-content: center; }
.vk-lms-shell .llms-form-field.type-checkbox { display: flex; align-items: center; gap: 8px; }

/* Checkboxes shipped as a white box with white text next to them. */
.llms-field-checkbox,
input[type="checkbox"].llms-field-checkbox {
  accent-color: var(--accent);
  width: 16px; height: 16px;
  background: rgba(0,0,0,.4) !important;
}
.llms-form-field.type-checkbox label { color: rgba(255,255,255,.6) !important; }

/* Dashboard navigation reads as tabs rather than plain links. */
.llms-sd-nav ul, .llms-sd-nav .llms-sd-items {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 28px; padding: 0;
  border-bottom: 1px solid var(--border-subtle);
}
.llms-sd-nav li { margin: 0 !important; }
.llms-sd-nav a {
  display: inline-block;
  padding: 10px 16px !important;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.6) !important;
}
.llms-sd-nav a:hover { color: #fff !important; background: rgba(255,255,255,.04) !important; }
.llms-sd-nav .current a, .llms-sd-nav li.active a {
  color: var(--accent) !important;
  border-color: var(--border-subtle);
  background: rgba(255,255,255,.03) !important;
}

/* ---------- Layout: no theme sidebar on any LMS surface ---------- */
.single-course #right-sidebar,
.single-lesson #right-sidebar,
.single-llms_membership #right-sidebar,
.post-type-archive-course #right-sidebar,
.llms-checkout-wrapper ~ #right-sidebar,
body[class*="llms"] #right-sidebar,
.single-course .sidebar-primary,
.single-lesson .sidebar-primary,
.post-type-archive-course .sidebar-primary {
  display: none !important;
}

/* Reclaim the space the sidebar was using. */
.single-course #primary,
.single-lesson #primary,
.single-llms_membership #primary,
.post-type-archive-course #primary,
.single-course .content-area,
.single-lesson .content-area,
.post-type-archive-course .content-area {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  float: none !important;
}

/* Give the content room under the fixed header. */
.single-course #content-wrap,
.single-lesson #content-wrap,
.post-type-archive-course #content-wrap,
body[class*="llms"] #content-wrap {
  padding-top: clamp(96px, 12vh, 140px) !important;
  padding-bottom: clamp(60px, 9vh, 110px) !important;
}

/* ---------- Kill every light background the plugin ships ---------- */
.llms-syllabus-wrapper,
.llms-section,
.llms-section-title,
.llms-lesson-preview,
.llms-lesson-link,
.llms-lesson-title,
.llms-lesson-counter,
.llms-lesson-excerpt,
.llms-pricing-table,
.llms-access-plan,
.llms-access-plan-content,
.llms-access-plan-pricing,
.llms-access-plan-footer,
.llms-access-plan-restrictions,
.llms-progress,
.llms-course-progress,
.llms-instructor-info,
.llms-author,
.llms-meta-info,
.llms-meta,
.llms-notice,
.llms-widget,
.llms-sd-widget,
.llms-sd-section,
.llms-student-dashboard,
.llms-table,
.llms-table tr,
.llms-table td,
.llms-table th,
.llms-loop-item,
.llms-loop-item-content {
  background-color: transparent !important;
  background-image: none !important;
}

/* Then give the pieces that should read as cards a dark surface. */
.llms-lesson-preview,
.llms-access-plan,
.llms-widget,
.llms-sd-widget,
.llms-sd-section,
.llms-notice,
.llms-instructor-info,
.llms-loop-item {
  background-color: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 10px !important;
}

/* ---------- Syllabus ----------
   The lesson rows are <section> elements, and locked ones carry their own light
   background. Both were still painting near-white under white text. */
.llms-syllabus-wrapper section,
section.llms-lesson-preview,
.llms-lesson-preview,
.llms-lesson-locked,
.llms-lesson-complete,
.llms-lesson-incomplete-placeholder {
  background-color: rgba(255, 255, 255, .03) !important;
  background-image: none !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
}
.llms-syllabus-wrapper section:hover,
.llms-lesson-preview:hover { border-color: rgba(79, 205, 97, .45) !important; }

/* The locked state should read as dimmer, not lighter. */
.llms-lesson-locked { opacity: .72; }
.llms-lesson-locked .llms-lesson-title { color: rgba(255,255,255,.75) !important; }

/* The FREE badge shipped as accent-green text on a blue fill. */
.llms-icon-free, .llms-icon-free *,
.llms-free-lesson, .llms-free-lesson *,
.llms-lesson-preview .llms-icon-free,
.llms-lesson-preview .llms-icon-free * {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: var(--accent-text-on) !important;
  fill: var(--accent-text-on) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: var(--fw-bold) !important;
}

.llms-syllabus-wrapper { margin-top: 8px; }
.llms-section-title {
  font-size: 1.375rem !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: -.015em !important;
  color: var(--text-on-dark) !important;
  margin: 28px 0 14px !important;
  padding: 0 !important;
}
.llms-lesson-preview { margin: 0 0 10px !important; overflow: hidden; }
.llms-lesson-preview:hover { border-color: rgba(79, 205, 97, .45) !important; }
.llms-lesson-link {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 18px 20px !important;
  color: var(--text-on-dark) !important;
}
.llms-lesson-counter {
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  flex: none;
}
.llms-lesson-title {
  font-size: 1.0625rem !important;
  font-weight: var(--fw-normal) !important;
  color: var(--text-on-dark) !important;
}
.llms-lesson-excerpt { color: rgba(255,255,255,.55) !important; font-size: .9375rem !important; }
.llms-lesson-complete, .llms-lesson-incomplete { color: var(--accent) !important; }
.llms-free-lesson-svg, .llms-lesson-preview .llms-icon-free { fill: var(--accent) !important; color: var(--accent) !important; }

/* ---------- Author / instructor block ----------
   The default avatar renders at 100px, which dominated the card. */
.llms-author .avatar,
.llms-instructor-info .avatar,
img.avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border-subtle);
}
.llms-author {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 16px 0 !important;
  border: none !important;
}
.llms-author .llms-author-info { display: flex; flex-direction: column; gap: 2px; }
.llms-author .name, .llms-author-info .name {
  font-size: .9375rem !important;
  font-weight: var(--fw-bold) !important;
  color: var(--text-on-dark) !important;
}
.llms-author .llms-author-label {
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.45) !important;
}
.llms-author .llms-author-bio { color: rgba(255,255,255,.6) !important; font-size: 1rem !important; line-height: 1.6 !important; }

/* ---------- Pricing / enrol ---------- */
.llms-access-plan { overflow: hidden; }
.llms-access-plan-title {
  background: rgba(255, 255, 255, .05) !important;
  padding: 14px 18px !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.7) !important;
}
.llms-access-plan-pricing { padding: 22px 18px 6px !important; }
.llms-access-plan-price, .llms-price-currency-symbol, .llms-access-plan-price .lifterlms-price {
  color: var(--accent) !important;
  font-weight: var(--fw-bold) !important;
  font-size: 1.75rem !important;
}
.llms-access-plan-footer { padding: 18px !important; }

/* ---------- Progress ---------- */
.llms-progress { margin: 20px 0 !important; }
.llms-progress-bar {
  background: rgba(255, 255, 255, .1) !important;
  border-radius: 999px !important;
  height: 8px !important;
  overflow: hidden;
}
.llms-progress-bar .progress-bar-complete { background: var(--accent) !important; height: 100% !important; }
.llms-progress .llms-progress-caption {
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.5) !important;
}

/* ---------- Tables on the dashboard ---------- */
.llms-table { border: 1px solid var(--border-subtle) !important; border-radius: 10px !important; overflow: hidden; width: 100%; }
.llms-table thead th { background: rgba(255,255,255,.05) !important; color: var(--text-on-dark) !important; font-size: 11px !important; letter-spacing: .18em !important; text-transform: uppercase !important; }
.llms-table td, .llms-table th { border-color: var(--border-faint) !important; padding: 14px 16px !important; color: var(--text-on-dark) !important; }
.llms-table tbody tr:hover td { background: rgba(255,255,255,.03) !important; }

/* ---------- Anything the plugin still paints light ---------- */
.llms-content-wrapper *[style*="background: #fff"],
.llms-content-wrapper *[style*="background-color: #fff"] {
  background: transparent !important;
}