/* ================================================================
   REBEL SCHOOL — MASTER CUSTOM CSS
   Paste this ENTIRE file into: Elementor > Site Settings > Custom CSS
   Replace everything currently in that box — do not append.
   ================================================================

   CONTENTS:
   1. Signature button (shadow/hover/press) — Elementor widget-level only, see note
   2. Nav menu (pill active/hover states)
   3. Testimonial marquee slider
   4. SliceWP affiliate dashboard + registration/login (best-guess, unconfirmed markup)
   5. Tutor LMS — full verified theme (dashboard, courses, discussions,
      archive, single lesson) — confirmed against real site markup
   ================================================================ */


/* ================================================================
   1. SIGNATURE BUTTON — flat shadow / hover lift / press scale
   ------------------------------------------------------------------
   NOTE: This section uses Elementor's special `selector` keyword,
   which ONLY works when pasted into that SPECIFIC WIDGET's own
   Advanced > Custom CSS panel — NOT in Site Settings global CSS.
   Keep this block in the button widget's own custom CSS box,
   separate from everything else in this file.
   ================================================================ */

/*
selector {
    border-radius: 8px !important;
    box-shadow: 0 6px 0 #B62E1E !important;
    transition: all 0.15s ease !important;
}
selector:hover {
    box-shadow: 0 8px 0 #B62E1E !important;
    transform: translateY(-2px) !important;
}
selector:active {
    transform: scale(0.94) !important;
    box-shadow: 0 6px 0 #B62E1E !important;
}
*/


/* ================================================================
   2. NAV MENU — pill active/hover states
   ================================================================ */

.elementor-element-df3e355 .elementor-nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.elementor-element-df3e355 .elementor-nav-menu li {
  list-style: none;
}

.elementor-element-df3e355 .elementor-nav-menu .elementor-item {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 9px 16px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  color: #9498A0 !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  white-space: nowrap;
}

.elementor-element-df3e355 .elementor-nav-menu .elementor-item:hover:not(.elementor-item-anchor) {
  color: #F7F5F0 !important;
}

.elementor-element-df3e355 .elementor-nav-menu li.current-menu-item .elementor-item:not(.elementor-item-anchor),
.elementor-element-df3e355 .elementor-nav-menu li.current_page_item .elementor-item:not(.elementor-item-anchor) {
  background: #F7F5F0 !important;
  color: #14151A !important;
}

.elementor-element-df3e355 .elementor-nav-menu .elementor-item-anchor {
  color: #9498A0 !important;
  background: transparent !important;
}

.elementor-element-df3e355 .elementor-nav-menu .elementor-item-anchor:hover {
  color: #F7F5F0 !important;
}

/* ------------------------------------------------------------
   MOBILE NAV — hamburger toggle + slide-out dropdown menu
   (separate markup from the desktop pill nav above)
   ------------------------------------------------------------ */

.elementor-element-df3e355 .elementor-menu-toggle {
  color: #F7F5F0 !important;
}

.elementor-element-df3e355 .elementor-menu-toggle svg {
  fill: #F7F5F0 !important;
}

.elementor-element-df3e355 .elementor-nav-menu--dropdown {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  padding: 8px !important;
}

.elementor-element-df3e355 .elementor-nav-menu--dropdown .elementor-nav-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: stretch !important;
}

.elementor-element-df3e355 .elementor-nav-menu--dropdown .elementor-nav-menu li {
  list-style: none;
  width: 100%;
}

.elementor-element-df3e355 .elementor-nav-menu--dropdown .elementor-item {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #9498A0 !important;
  background: transparent !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  display: block !important;
  width: 100%;
  transition: all 0.15s ease !important;
}

.elementor-element-df3e355 .elementor-nav-menu--dropdown .elementor-item:hover:not(.elementor-item-anchor) {
  color: #F7F5F0 !important;
  background: #14151A !important;
}

.elementor-element-df3e355 .elementor-nav-menu--dropdown li.current-menu-item .elementor-item:not(.elementor-item-anchor),
.elementor-element-df3e355 .elementor-nav-menu--dropdown li.current_page_item .elementor-item:not(.elementor-item-anchor) {
  background: #F5C518 !important;
  color: #14151A !important;
}

.elementor-element-df3e355 .elementor-nav-menu--dropdown .elementor-item-anchor {
  color: #9498A0 !important;
}



/* ================================================================
   3. TESTIMONIAL MARQUEE SLIDER
   ================================================================ */

.marquee-slider {
  max-width: 1260px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

.marquee-slider .swiper-container,
.marquee-slider .swiper {
  overflow: visible !important;
}

.marquee-slider .swiper-wrapper {
  transition: none !important;
  animation: testimonialScroll 28s linear infinite !important;
}

.marquee-slider.swiper-container-initialized .swiper-wrapper {
  transform: none !important;
}

.marquee-slider .swiper-slide {
  flex-shrink: 0 !important;
}

@keyframes testimonialScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-slider .swiper-slide .testi-card {
  background: #1D1F26;
  border: 1px solid #33353F;
  border-radius: 14px;
  padding: 16px 20px;
  min-width: 290px;
  max-width: 290px;
}

.marquee-slider .swiper-slide .testi-card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: #F7F5F0;
  margin-bottom: 10px;
}

.marquee-slider .swiper-slide .testi-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F5C518;
  color: #14151A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  flex-shrink: 0;
}

.marquee-slider .swiper-slide .testi-author {
  font-size: 12px;
  color: #9498A0;
  font-weight: 600;
}


/* ================================================================
   4. SLICEWP — LOGIN FORM (real markup, confirmed)
   ================================================================ */

.slicewp-form {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  padding: 24px !important;
  color: #F7F5F0 !important;
  font-family: 'Inter', sans-serif !important;
  max-width: 420px;
  margin: 40px auto !important;
}

.slicewp-field-wrapper {
  margin-bottom: 20px !important;
}

.slicewp-field-label-wrapper label {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: block;
  margin-bottom: 6px;
}

.slicewp-field-inner input[type="text"],
.slicewp-field-inner input[type="password"] {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  width: 100%;
  font-family: 'Inter', sans-serif !important;
}

.slicewp-field-input-password {
  position: relative;
}

.slicewp-show-hide-password {
  color: #9498A0 !important;
}

.slicewp-show-hide-password:hover {
  color: #F7F5F0 !important;
}

.slicewp-button-primary {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  width: 100%;
  transition: all 0.15s ease !important;
}

.slicewp-button-primary:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

.slicewp-button-primary:active {
  transform: scale(0.97);
  box-shadow: 0 6px 0 #B62E1E !important;
}

.slicewp-lost-password {
  text-align: center;
  margin-top: 16px !important;
}

.slicewp-lost-password a {
  color: #F5C518 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.slicewp-lost-password a:hover {
  color: #F7F5F0 !important;
}

.page-header .entry-title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
  text-align: center;
}

.page-content {
  background: #14151A !important;
}

@media (max-width: 480px) {
  .slicewp-form {
    max-width: 100% !important;
    margin: 20px 16px !important;
    padding: 20px !important;
  }
}

/* ------------------------------------------------------------
   AFFILIATE DASHBOARD (real markup, confirmed)
   ------------------------------------------------------------ */

#slicewp-affiliate-account {
  font-family: 'Inter', sans-serif !important;
  color: #F7F5F0 !important;
}

/* Tab navigation (Dashboard / Affiliate Links / Commissions / Visits / Creatives / Payouts / Settings) */
.slicewp-nav-tab-wrapper {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #33353F !important;
  flex-wrap: wrap;
}

.slicewp-nav-tab a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #9498A0 !important;
  padding: 9px 16px !important;
  border-radius: 8px 8px 0 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease !important;
}

.slicewp-nav-tab a:hover {
  color: #F7F5F0 !important;
  background: #1D1F26 !important;
}

.slicewp-nav-tab.slicewp-active a {
  color: #F5C518 !important;
  background: #1D1F26 !important;
  border-bottom: 2px solid #F5C518 !important;
}

/* Dashboard filter bar (date range + Apply) */
.slicewp-affiliate-dashboard-filters {
  padding: 16px 0 !important;
}

.slicewp-date-picker-input {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 8px !important;
  color: #F7F5F0 !important;
  padding: 9px 14px !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.slicewp-date-picker-modal {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 10px !important;
}

.slicewp-date-picker-predefined-date-range {
  color: #9498A0 !important;
  font-family: 'Inter', sans-serif !important;
}

.slicewp-date-picker-predefined-date-range:hover {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

/* Generic .slicewp-card — covers the chart card and any other plain
   .slicewp-card that doesn't have the -affiliate-dashboard suffix */
#slicewp-affiliate-account .slicewp-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

.slicewp-chart-legend {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.slicewp-chart-legend span,
.slicewp-chart-legend li {
  color: #F7F5F0 !important;
}

/* KPI stat cards grid */
.slicewp-grid-affiliate-dashboard .slicewp-card,
.slicewp-card.slicewp-card-affiliate-dashboard {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  transition: all 0.15s ease !important;
}

.slicewp-card.slicewp-card-affiliate-dashboard:hover {
  border-color: #F5C518 !important;
  transform: translateY(-2px);
}

.slicewp-card-title {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.slicewp-kpi-value,
.slicewp-kpi-value > span:first-child {
  font-family: 'Archivo Black', sans-serif !important;
  color: #F7F5F0 !important;
  font-size: 24px !important;
}

.slicewp-kpi-direction .slicewp-arrow-up {
  color: #3E8E5A !important;
}

.slicewp-kpi-direction .slicewp-arrow-down {
  color: #B62E1E !important;
}

.slicewp-card-footer {
  background: #14151A !important;
  border-top: 1px solid #33353F !important;
  padding: 10px 16px !important;
}

.slicewp-card-footer a {
  color: #F5C518 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.slicewp-card-footer a:hover {
  color: #F7F5F0 !important;
}

/* Chart card */
.slicewp-chart-time-unit-selector {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 6px !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Section headings ("All time", "Program details") */
.slicewp-section-heading {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 16px !important;
  margin-top: 24px !important;
}

/* Commission rate tag */
.slicewp-commission-rate-tag-sale {
  background: #F5C518 !important;
  color: #14151A !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

/* Affiliate link field + generator */
.slicewp-section-general-affiliate-link.slicewp-card,
.slicewp-section-affiliate-link-generator.slicewp-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

.slicewp-field-description p {
  color: #9498A0 !important;
  font-size: 12px !important;
}

#slicewp-affiliate-link,
#slicewp-affiliate-custom-link-input,
#slicewp-affiliate-custom-link-output {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  width: 100%;
}

.slicewp-input-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.slicewp-user-notice.slicewp-error {
  background: rgba(182, 46, 30, 0.15) !important;
  border: 1px solid #B62E1E !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
}

/* List tables (Commissions / Visits / Payouts) */
.slicewp-list-table-filters {
  padding: 12px 0 !important;
}

.slicewp-list-table-wrapper {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 10px !important;
  overflow: hidden;
}

table.slicewp-list-table {
  width: 100%;
  border-collapse: collapse;
}

table.slicewp-list-table thead th {
  background: #14151A !important;
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px !important;
  border-bottom: 1px solid #33353F !important;
  text-align: left;
}

table.slicewp-list-table tbody td {
  color: #F7F5F0 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #33353F !important;
  font-size: 13px;
}

table.slicewp-list-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Empty state rows ("You have no commissions.", etc.) */
table.slicewp-list-table tbody td[colspan] {
  color: #9498A0 !important;
  text-align: center;
  padding: 24px !important;
}

.slicewp-list-table-pagination {
  color: #9498A0 !important;
  font-size: 12px;
  padding: 10px 16px !important;
}

/* Settings tab form */
.slicewp-tab[data-slicewp-tab="settings"] .slicewp-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

.slicewp-tab[data-slicewp-tab="settings"] label {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.slicewp-tab[data-slicewp-tab="settings"] input[type="email"],
.slicewp-tab[data-slicewp-tab="settings"] input[type="text"] {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  width: 100%;
}

/* Creatives empty state ("There aren't any creatives available.") */
.slicewp-tab[data-slicewp-tab="creatives"] p {
  color: #9498A0 !important;
  text-align: center;
  padding: 24px !important;
}

@media (max-width: 768px) {
  .slicewp-nav-tab-wrapper {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .slicewp-nav-tab a {
    white-space: nowrap;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  .slicewp-grid-affiliate-dashboard {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  table.slicewp-list-table {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .slicewp-grid-affiliate-dashboard {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   5. TUTOR LMS — FULL VERIFIED THEME
   (login, dashboard, courses tab, discussions, course archive,
   quiz intro, single lesson — every selector below was checked
   against real page source you sent)
   ================================================================ */

/* ------------------------------------------------------------
   LOGIN PAGE
   ------------------------------------------------------------ */
.tutor-login-wrap.tutor-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.tutor-login-form-wrapper .tutor-h3 {
  font-family: 'Archivo Black', sans-serif !important;
  color: #F7F5F0 !important;
}

.tutor-login-form-wrapper .tutor-form-control.tutor-input {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

.tutor-login-form-wrapper .tutor-form-control.tutor-input::placeholder {
  color: #9498A0 !important;
}

.tutor-login-form-wrapper .tutor-label {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.tutor-login-form-wrapper .tutor-btn-link-gray {
  color: #9498A0 !important;
}

.tutor-login-form-wrapper .tutor-btn-link-gray:hover {
  color: #F7F5F0 !important;
}

.tutor-login-form-wrapper button.tutor-btn.tutor-btn-primary {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.tutor-login-form-wrapper button.tutor-btn.tutor-btn-primary:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

.tutor-login-form-wrapper button.tutor-btn.tutor-btn-primary:active {
  transform: scale(0.94);
  box-shadow: 0 6px 0 #B62E1E !important;
}

.tutor-login-form-wrapper .tutor-small {
  color: #9498A0 !important;
}

.tutor-login-form-wrapper .tutor-btn-link {
  color: #F5C518 !important;
  font-weight: 700 !important;
}

.tutor-login-form-wrapper .tutor-btn-link:hover {
  color: #F7F5F0 !important;
}

@media (max-width: 768px) {
  .tutor-login-wrap.tutor-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px auto !important;
    border-radius: 10px !important;
  }

  .tutor-login-form-wrapper {
    padding: 24px !important;
  }

  .tutor-login-form-wrapper .tutor-h3 {
    font-size: 20px !important;
    margin-bottom: 24px !important;
  }

  .tutor-login-form-wrapper .tutor-form-control.tutor-input {
    padding: 11px 14px !important;
    font-size: 14px !important;
  }

  .tutor-login-form-wrapper button.tutor-btn.tutor-btn-primary {
    width: 100% !important;
    padding: 12px !important;
  }
}

@media (max-width: 480px) {
  .tutor-login-wrap.tutor-card {
    margin: 16px auto !important;
    border-radius: 8px !important;
  }

  .tutor-login-form-wrapper {
    padding: 18px !important;
  }

  .tutor-login-form-wrapper .tutor-h3 {
    font-size: 18px !important;
    margin-bottom: 18px !important;
  }

  .tutor-login-form-wrapper .tutor-flex.tutor-justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .tutor-login-form-wrapper .tutor-btn-link-gray {
    align-self: flex-start !important;
  }
}

/* ================================================================
   INFINITE SLIDER (Elementor Container + Nested Carousel,
   same proven no-pause technique as the testimonial marquee)
   ================================================================ */

.infinite-slider {
  overflow: hidden;
  display: flex !important;
  align-items: center !important;
}

.infinite-slider .swiper-container,
.infinite-slider .swiper,
.infinite-slider .e-n-carousel {
  overflow: visible !important;
  width: 100%;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.infinite-slider .swiper-wrapper {
  transition: none !important;
  animation: infiniteSliderScroll 28s linear infinite !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}

/* NOTE: do NOT add "transform: none !important" anywhere that matches
   this element. Chromium/WebKit disable a CSS animation on a property
   entirely if any !important static rule also targets that property
   on the same element — so trying to fight Swiper JS's inline
   transform this way silently kills the scroll animation instead of
   just overriding the conflict. The real fix for the overlap is to
   turn OFF Swiper's own Autoplay / Infinite Loop in the Elementor
   widget settings for this carousel, so JS never writes an inline
   transform here to begin with — then this pure CSS animation is
   the only thing moving the wrapper. */

.infinite-slider .swiper-slide {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  /* Overrides Swiper JS's inline width (e.g. "width: 430px"), which
     was narrower than the actual heading text. Since the heading is
     white-space: nowrap and nothing clips overflow, text wider than
     its slide box was bleeding visually into the next slide — that's
     what looked like overlapping/duplicated text. Sizing the slide
     to its own content removes the mismatch entirely. */
  width: auto !important;
}

/* Cascade vertical centering through Elementor's real nesting —
   align-items only, no forced height:100% (that was causing the
   extra empty space at the bottom by inflating against a taller
   flex parent) */
.infinite-slider .swiper-slide .e-con-boxed,
.infinite-slider .swiper-slide .e-con-inner,
.infinite-slider .swiper-slide .e-con-full {
  display: flex !important;
  align-items: center !important;
  width: 100%;
}

.infinite-slider .elementor-widget-heading {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.infinite-slider .elementor-heading-title {
  margin: 0 !important;
  line-height: normal !important;
  white-space: nowrap !important;
}

/* Swiper reserves space for pagination dots/scrollbar even when
   none are visible — this kills that reserved space if present */
.infinite-slider .swiper-pagination,
.infinite-slider .swiper-scrollbar {
  display: none !important;
  height: 0 !important;
}

/* The HTML widget holding the clone <script> is a sibling flex item
   inside .infinite-slider — Elementor still gives it a padded wrapper
   box even though the script itself is invisible, which was likely
   the actual source of the empty space */
.infinite-slider .elementor-widget-html {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute !important;
}

@keyframes infiniteSliderScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Mobile: slide-width and slide-count stay the same but each slide
   covers proportionally more of a narrow viewport, so the same 28s
   duration reads as much slower — speed it up on smaller screens */
@media (max-width: 768px) {
  .infinite-slider .swiper-wrapper {
    animation-duration: 12s !important;
  }
}

@media (max-width: 480px) {
  .infinite-slider .swiper-wrapper {
    animation-duration: 9s !important;
  }
}

/* ================================================================
   7. TUTOR — ACCOUNT / PROFILE PAGE (/dashboard/account/profile/)
   Confirmed classes from live DevTools inspection.
   ================================================================ */

.tutor-account-page-wrapper,
.tutor-profile-wrapper {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.tutor-account-header {
  background: #1D1F26 !important;
  border-bottom: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

.tutor-user-profile.tutor-profile-card,
.tutor-account-container .tutor-profile-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 12px !important;
}

.tutor-badge-disabled {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #9498A0 !important;
  border-radius: 8px !important;
}

/* ------------------------------------------------------------
   MOBILE — Profile page
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .tutor-account-header {
    padding: 12px 16px !important;
  }

  .tutor-user-profile.tutor-profile-card,
  .tutor-account-container .tutor-profile-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    padding: 12px !important;
  }

  .tutor-account-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Cover photo banner — full width, no side gaps on small screens */
  .tutor-profile-card .tutor-ratio,
  .tutor-profile-card img {
    border-radius: 0 !important;
  }
}

/* ================================================================
   8. TUTOR — INSTRUCTOR/ADMIN DASHBOARD HOME
   ("Course Completion Rate" chart card + "Top Performing Courses"
   card) — real markup confirmed
   ================================================================ */

.tutor-dashboard-home-card,
.tutor-dashboard-home-chart {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  padding: 20px !important;
  color: #F7F5F0 !important;
}

.tutor-dashboard-home-card .tutor-small,
.tutor-dashboard-home-chart .tutor-small {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 14px !important;
}

/* "By: Revenue" sort dropdown button */
.tutor-dashboard-home-card .tutor-btn.tutor-btn-outline {
  border: 1px solid #33353F !important;
  background: transparent !important;
  color: #9498A0 !important;
}

.tutor-dashboard-home-card .tutor-btn.tutor-btn-outline:hover {
  border-color: #F5C518 !important;
  color: #F5C518 !important;
}

/* Each row in "Top Performing Courses" */
.tutor-dashboard-home-course {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #33353F !important;
  background: #1D1F26 !important;
}

.tutor-dashboard-home-course:hover {
  background: #14151A !important;
}

.tutor-dashboard-home-course:last-child {
  border-bottom: none !important;
}

.tutor-dashboard-home-course-index {
  background: #F5C518 !important;
  color: #14151A !important;
  font-family: 'Archivo Black', sans-serif !important;
  border-radius: 999px !important;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.tutor-dashboard-home-course .tutor-p3 {
  color: #F7F5F0 !important;
}

.tutor-dashboard-home-course .tutor-tiny.tutor-text-subdued {
  color: #9498A0 !important;
}

.tutor-dashboard-home-course .tutor-tiny.tutor-font-semibold {
  color: #F7F5F0 !important;
}

.tutor-dashboard-home-course .tutor-icon-secondary {
  color: #9498A0 !important;
}

.tutor-dashboard-home-course .woocommerce-Price-amount,
.tutor-dashboard-home-course .woocommerce-Price-currencySymbol {
  color: #F5C518 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Chart legend below the completion-rate bar */
.tutor-dashboard-home-chart-legend {
  color: #9498A0 !important;
  font-size: 13px;
}

.tutor-dashboard-home-chart-legend .tutor-text-primary {
  color: #F7F5F0 !important;
}

/* Color dot before each legend label (enrolled/completed/etc.) */
.tutor-dashboard-home-chart-legend::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.tutor-dashboard-home-chart-legend[data-color="enrolled"]::before {
  background: #7C4DFF;
}

.tutor-dashboard-home-chart-legend[data-color="completed"]::before {
  background: #3E8E5A;
}

.tutor-dashboard-home-chart-legend[data-color="in_progress"]::before {
  background: #F5C518;
}

.tutor-dashboard-home-chart-legend[data-color="inactive"]::before {
  background: #33353F;
}

.tutor-dashboard-home-chart-legend[data-color="cancelled"]::before {
  background: #B62E1E;
}

/* ================================================================
   9. TUTOR — INSTRUCTOR "MY COURSES" MANAGEMENT PAGE
   (/dashboard/my-courses/) — real markup confirmed
   ================================================================ */

.tutor-dashboard-my-courses .tutor-h4 {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* "+ New Course" button */
.tutor-dashboard-my-courses .tutor-btn-primary {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.tutor-dashboard-my-courses .tutor-btn-primary:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

/* Outer card wrapper holding filter bar + search + course grid */
.tutor-dashboard-my-courses .tutor-surface-l1 {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 16px !important;
}

.tutor-dashboard-my-courses .tutor-border-b {
  border-bottom: 1px solid #33353F !important;
}

/* "Published (3)" status filter dropdown button */
.tutor-dashboard-my-courses .tutor-btn-primary-soft {
  background: #14151A !important;
  color: #F5C518 !important;
  border: 1px solid #33353F !important;
}

.tutor-dashboard-my-courses .tutor-btn-primary-soft:hover {
  border-color: #F5C518 !important;
}

.tutor-dashboard-my-courses .tutor-btn-primary-soft .tutor-icon-brand {
  color: #F5C518 !important;
}

/* Search input */
.tutor-dashboard-my-courses .tutor-input {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
}

.tutor-dashboard-my-courses .tutor-input::placeholder {
  color: #9498A0 !important;
}

.tutor-dashboard-my-courses .tutor-icon-idle {
  color: #9498A0 !important;
}

/* Sort button (up/down arrows icon) */
.tutor-dashboard-my-courses .tutor-btn-outline.tutor-btn-icon {
  background: transparent !important;
  border: 1px solid #33353F !important;
  color: #9498A0 !important;
}

.tutor-dashboard-my-courses .tutor-btn-outline.tutor-btn-icon:hover {
  border-color: #F5C518 !important;
  color: #F5C518 !important;
}

/* Individual course cards */
.tutor-my-courses-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: all 0.15s ease !important;
}

.tutor-my-courses-card:hover {
  border-color: #F5C518 !important;
  transform: translateY(-2px);
}

/* Edit/View icon buttons that appear over the thumbnail on hover */
.tutor-my-courses-card-actions .tutor-btn-secondary {
  background: #1D1F26 !important;
  color: #F7F5F0 !important;
  border: 1px solid #33353F !important;
}

.tutor-my-courses-card-actions .tutor-btn-secondary:hover {
  background: #F5C518 !important;
  color: #14151A !important;
  border-color: #F5C518 !important;
}

.tutor-my-courses-card-content .tutor-text-secondary {
  color: #9498A0 !important;
}

.tutor-my-courses-card-content .tutor-icon-brand {
  color: #F5C518 !important;
}

.tutor-my-courses-card-content a.tutor-p2 {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.tutor-my-courses-card-content a.tutor-p2:hover {
  color: #F5C518 !important;
}

.tutor-my-courses-card-content .tutor-text-subdued {
  color: #9498A0 !important;
}

/* Footer: price + "..." actions menu */
.tutor-my-courses-card-footer {
  border-top: 1px solid #33353F !important;
}

.tutor-my-courses-card-footer .price,
.tutor-my-courses-card-footer .woocommerce-Price-amount,
.tutor-my-courses-card-footer .woocommerce-Price-currencySymbol {
  color: #F5C518 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
}

.tutor-my-courses-card-footer-actions .tutor-btn-ghost {
  color: #9498A0 !important;
}

.tutor-my-courses-card-footer-actions .tutor-btn-ghost:hover {
  color: #F7F5F0 !important;
}

/* Course actions popover (Edit/Overview/Delete) */
.tutor-popover-menu-item-edit,
.tutor-popover-menu-item-overview {
  color: #9498A0 !important;
}

.tutor-popover-menu-item-edit:hover,
.tutor-popover-menu-item-overview:hover {
  color: #F7F5F0 !important;
  background: #14151A !important;
}

.tutor-popover-menu-item-delete {
  color: #B62E1E !important;
}

.tutor-popover-menu-item-delete:hover {
  background: rgba(182, 46, 30, 0.15) !important;
  color: #F7F5F0 !important;
}

@media (max-width: 768px) {
  .tutor-dashboard-my-courses .tutor-my-courses-card-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .tutor-dashboard-my-courses .tutor-my-courses-card-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   10. TUTOR — SHARED INSTRUCTOR PAGE SHELL
   (Announcements, Quiz Attempts, and any other page using this
   same surface-card + filter-bar + search pattern)
   ================================================================ */

.tutor-dashboard-announcements .tutor-h4,
.tutor-dashboard-quiz-attempts-wrapper .tutor-h4 {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* Generic outer surface card wrapper (filter bar + search + list) */
.tutor-surface-l1 {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
}

/* "+ New Announcement" button */
.tutor-dashboard-announcements .tutor-btn-primary {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
}

.tutor-dashboard-announcements .tutor-btn-primary:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

/* Generic filter/search bar border */
.tutor-border-b {
  border-bottom: 1px solid #33353F !important;
}

/* "All Courses (0)" / "All (0)" dropdown filter buttons */
.tutor-btn-primary-soft {
  background: #14151A !important;
  color: #F5C518 !important;
  border: 1px solid #33353F !important;
}

.tutor-btn-primary-soft:hover {
  border-color: #F5C518 !important;
}

.tutor-btn-primary-soft .tutor-icon-brand {
  color: #F5C518 !important;
}

.tutor-btn-outline.tutor-btn-small,
.tutor-btn-outline.tutor-btn-icon {
  background: transparent !important;
  border: 1px solid #33353F !important;
  color: #9498A0 !important;
}

.tutor-btn-outline.tutor-btn-small:hover,
.tutor-btn-outline.tutor-btn-icon:hover {
  border-color: #F5C518 !important;
  color: #F5C518 !important;
}

/* Generic search input (used across all instructor list pages) */
.tutor-input-field .tutor-input {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
}

.tutor-input-field .tutor-input::placeholder {
  color: #9498A0 !important;
}

.tutor-icon-idle {
  color: #9498A0 !important;
}

/* Empty state ("No Announcements Found", "No Quiz Attempts Found") */
.tutor-flex-center-col .tutor-text-subdued {
  color: #9498A0 !important;
}

/* ------------------------------------------------------------
   DATE-RANGE CALENDAR POPOVER (vue-calendar based widget)
   Shared by every "Filter by date range" button across the site
   ------------------------------------------------------------ */

.tutor-range-calendar-popover {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

.vc.tutor-vc-calendar {
  background: transparent !important;
  color: #F7F5F0 !important;
}

/* Left sidebar presets (All Time, Yesterday, Last 7 days, etc.) */
.vc-presets {
  border-right: 1px solid #33353F !important;
}

.vc-presets button {
  color: #9498A0 !important;
}

.vc-presets button:hover {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.vc-presets button[data-active] {
  background: #14151A !important;
  color: #F5C518 !important;
}

.vc-preset-icon {
  color: #F5C518 !important;
}

/* Month/Year header + nav arrows */
.vc-header__content .vc-month,
.vc-header__content .vc-year {
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

.vc-arrow {
  color: #9498A0 !important;
}

.vc-arrow:hover {
  color: #F5C518 !important;
}

/* Weekday labels (Mon, Tue, Wed...) */
.vc-week__day {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Individual date cells */
.vc-date__btn {
  color: #F7F5F0 !important;
  border-radius: 8px !important;
}

.vc-date__btn:hover {
  background: #14151A !important;
}

.vc-date[data-vc-date-month="prev"] .vc-date__btn,
.vc-date[data-vc-date-month="next"] .vc-date__btn {
  color: #33353F !important;
}

.vc-date[data-vc-date-today] .vc-date__btn {
  border: 1px solid #F5C518 !important;
  color: #F5C518 !important;
}

/* Selected date/range highlight */
.vc-date[data-vc-date-selected] .vc-date__btn,
.vc-date[data-vc-date-in-range] .vc-date__btn {
  background: #F5C518 !important;
  color: #14151A !important;
}

/* Footer buttons (Clear Selection / Apply) */
.vc-footer .tutor-btn-secondary {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

.vc-footer .tutor-btn-primary {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  box-shadow: 0 6px 0 #B62E1E !important;
}

/* ------------------------------------------------------------
   CUSTOM SELECT DROPDOWN (used in "New Announcement" modal's
   "Select Course" field, and similar custom selects elsewhere)
   ------------------------------------------------------------ */

.tutor-select-trigger {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
}

.tutor-select-value-placeholder {
  color: #9498A0 !important;
}

.tutor-select-menu {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 10px !important;
}

.tutor-select-search-input {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

.tutor-select-option {
  color: #9498A0 !important;
}

.tutor-select-option:hover,
.tutor-select-option[data-highlighted="true"] {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.tutor-select-option[data-selected="true"] {
  background: #F5C518 !important;
  color: #14151A !important;
}

/* "New Announcement" / any other form modal — label + textarea */
.tutor-label {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

.tutor-input.tutor-text-area {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

.tutor-modal-title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* ================================================================
   10. TUTOR — SHARED INSTRUCTOR DASHBOARD LIST PAGES
   (My Courses, Announcements, Quiz Attempts, Discussions — any page
   built on the same .tutor-surface-l1 list/filter pattern)
   ================================================================ */

.tutor-surface-l1 {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 16px !important;
}

.tutor-surface-l1 .tutor-border-b {
  border-bottom: 1px solid #33353F !important;
}

/* "All Courses (0)" / "Published (3)" / "All (0)" filter dropdowns */
.tutor-btn-primary-soft {
  background: #14151A !important;
  color: #F5C518 !important;
  border: 1px solid #33353F !important;
}

.tutor-btn-primary-soft:hover {
  border-color: #F5C518 !important;
}

.tutor-btn-primary-soft .tutor-icon-brand {
  color: #F5C518 !important;
}

/* "+ New Announcement" / "+ New Course" primary buttons */
.tutor-surface-l1 ~ .tutor-btn-primary,
.tutor-dashboard-announcements .tutor-btn-primary,
.tutor-dashboard-quiz-attempts-wrapper .tutor-btn-primary {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
}

/* Search input */
.tutor-input {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
}

.tutor-input::placeholder {
  color: #9498A0 !important;
}

.tutor-icon-idle {
  color: #9498A0 !important;
}

/* Sort / calendar icon buttons */
.tutor-btn-outline.tutor-btn-icon {
  background: transparent !important;
  border: 1px solid #33353F !important;
  color: #9498A0 !important;
}

.tutor-btn-outline.tutor-btn-icon:hover {
  border-color: #F5C518 !important;
  color: #F5C518 !important;
}

/* Empty state ("No Announcements Found", "No Quiz Attempts Found", etc.) */
.tutor-flex-center-col svg {
  --tutor-visual-gray-2: #2A2C35;
  --tutor-visual-gray-3: #3D404B;
}

.tutor-flex-center-col .tutor-text-subdued {
  color: #9498A0 !important;
}

/* Dropdown-filter search box + course list inside popover */
.tutor-dropdown-filter .tutor-popover .tutor-input {
  background: #14151A !important;
}

/* "No results found" text inside filter search */
.tutor-popover-menu .tutor-text-secondary {
  color: #9498A0 !important;
}

/* ------------------------------------------------------------
   DATE-RANGE CALENDAR POPOVER (vc-calendar library)
   ------------------------------------------------------------ */
.tutor-range-calendar-popover {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
}

.vc-presets {
  border-right: 1px solid #33353F !important;
}

.vc-presets button {
  color: #9498A0 !important;
}

.vc-presets button:hover {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.vc-presets button[data-active] {
  color: #F5C518 !important;
}

.vc-header__content .vc-month,
.vc-header__content .vc-year {
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.vc-week__day {
  color: #9498A0 !important;
}

.vc-date__btn {
  color: #F7F5F0 !important;
}

.vc-date__btn:hover {
  background: #14151A !important;
  color: #F5C518 !important;
}

.vc-date[data-vc-date-today] .vc-date__btn {
  border: 1px solid #F5C518 !important;
}

.vc-arrow {
  color: #9498A0 !important;
}

.vc-arrow:hover {
  color: #F5C518 !important;
}

.vc-footer {
  border-top: 1px solid #33353F !important;
}

/* ------------------------------------------------------------
   ANNOUNCEMENT FORM MODAL (Select Course / Title / Description)
   ------------------------------------------------------------ */
.tutor-select-trigger {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
}

.tutor-select-menu {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
}

.tutor-select-search-input {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

.tutor-select-option {
  color: #9498A0 !important;
}

.tutor-select-option:hover,
.tutor-select-option[data-highlighted="true"] {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.tutor-select-option[data-selected="true"] {
  color: #F5C518 !important;
}

.tutor-label {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

.tutor-input.tutor-text-area {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

.tutor-modal-title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.tutor-modal-footer {
  border-top: 1px solid #33353F !important;
}

/* ================================================================
   11. TUTOR — INSTRUCTOR PROFILE PAGE (Statistics cards)
   Real markup + computed CSS confirmed via DevTools.
   ================================================================ */

.tutor-account-container {
  background: #14151A !important;
}

.tutor-user-profile .tutor-user-profile-statistics {
  background: #14151A !important;
}

.tutor-user-profile .tutor-statistic-title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.tutor-user-profile .tutor-user-profile-statistics .tutor-statistic-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.tutor-statistic-card-icon {
  color: #F5C518 !important;
}

.tutor-statistic-card-value {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.tutor-statistic-card-label {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ================================================================
   12. TUTOR — SINGLE COURSE DETAILS PAGE (public sales page)
   /courses/{course-slug}/ — real markup confirmed
   ================================================================ */

.tutor-course-details-page {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

/* Header: ratings, title, categories, wishlist/share buttons */
.tutor-course-details-header {
  background: transparent !important;
}

.tutor-course-details-title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
}

/* Tutor reuses this utility class everywhere (title, price, instructor
   name) — catching it generically here instead of chasing each instance */
.tutor-course-details-page .tutor-color-black {
  color: #F7F5F0 !important;
}

.tutor-course-details-ratings .tutor-icon-star-line {
  color: #F5C518 !important;
}

.tutor-course-details-info a {
  color: #F5C518 !important;
}

.tutor-course-details-info,
.tutor-course-details-info > div {
  color: #9498A0 !important;
}

.tutor-course-details-actions .tutor-btn-ghost {
  color: #9498A0 !important;
  background: transparent !important;
}

.tutor-course-details-actions .tutor-btn-ghost:hover {
  color: #F7F5F0 !important;
}

/* Tabs: Course Info / Reviews */
.tutor-course-details-tab .tutor-nav {
  border-bottom: 1px solid #33353F !important;
}

.tutor-course-details-tab .tutor-nav-link {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

.tutor-course-details-tab .tutor-nav-link:hover {
  color: #F7F5F0 !important;
}

.tutor-course-details-tab .tutor-nav-link.is-active {
  color: #F5C518 !important;
  border-bottom: 2px solid #F5C518 !important;
}

.tutor-course-content-title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* Course Content accordion */
.tutor-accordion-item {
  border: 1px solid #33353F !important;
  border-radius: 8px !important;
  margin-bottom: 8px;
}

.tutor-accordion-item-header {
  background: #1D1F26 !important;
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

.tutor-accordion-item-header.is-active {
  color: #F5C518 !important;
}

/* Reviews tab empty state */
.tutor-tab-item .tutor-empty-state {
  color: #9498A0 !important;
}

.tutor-tab-item .tutor-empty-state img {
  opacity: 0.5;
}

/* ------------------------------------------------------------
   SIDEBAR — price card, Add to cart, course info list, instructor
   ------------------------------------------------------------ */
.tutor-sidebar-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body {
  background: #1D1F26 !important;
}

.tutor-single-course-sidebar-more > div {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

/* Tab nav bar (Course Info / Reviews) — was showing Tutor's default
   gray bar background instead of blending with the page */
.tutor-course-details-tab .tutor-is-sticky,
.tutor-course-details-tab .tutor-nav {
  background: transparent !important;
}

.tutor-course-sidebar-card-pricing .woocommerce-Price-amount,
.tutor-course-sidebar-card-pricing .woocommerce-Price-currencySymbol {
  color: #F5C518 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.tutor-card-body .tutor-color-muted {
  color: #9498A0 !important;
}

.tutor-sidebar-card .tutor-add-to-cart-button {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.tutor-sidebar-card .tutor-add-to-cart-button:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

/* "View Cart" link — replaces Add to Cart once the course is already
   in the cart, styled as an outline variant to differentiate */
.tutor-sidebar-card .tutor-woocommerce-view-cart {
  background: transparent !important;
  border: 1.5px solid #F5C518 !important;
  color: #F5C518 !important;
  border-radius: 8px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.tutor-sidebar-card .tutor-woocommerce-view-cart:hover {
  background: #F5C518 !important;
  color: #14151A !important;
}

/* "Complete Course" button (shown once all lessons are finished) */
button[name="complete_course_btn"].tutor-btn-outline-primary {
  background: transparent !important;
  border: 1.5px solid #F5C518 !important;
  color: #F5C518 !important;
  border-radius: 8px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

button[name="complete_course_btn"].tutor-btn-outline-primary:hover {
  background: #F5C518 !important;
  color: #14151A !important;
}

.tutor-card-footer {
  border-top: 1px solid #33353F !important;
}

.tutor-card-footer .tutor-ul li span.tutor-color-black {
  color: #F5C518 !important;
}

.tutor-card-footer .tutor-color-secondary {
  color: #9498A0 !important;
}

/* Instructor block ("A course by") */
.tutor-course-details-instructors h3 {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.tutor-course-details-instructors a {
  color: #F7F5F0 !important;
}

.tutor-course-details-instructors a:hover {
  color: #F5C518 !important;
}

.tutor-course-details-instructors .tutor-avatar-text {
  background: #F5C518 !important;
  color: #14151A !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* ------------------------------------------------------------
   SHARE MODAL
   ------------------------------------------------------------ */
.tutor-modal-content-white {
  background: #1D1F26 !important;
  color: #F7F5F0 !important;
}

.tutor-modal-content-white .tutor-color-black {
  color: #F7F5F0 !important;
}

.tutor-modal-content-white .tutor-color-secondary {
  color: #9498A0 !important;
}

.tutor-modal-content-white .tutor-form-control {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

.tutor-modal-content-white .tutor-copy-text.tutor-bg-white {
  background: #1D1F26 !important;
  color: #F7F5F0 !important;
}
/* ================================================================
   13. WOOCOMMERCE — CART PAGE (block-based cart)
   Outer wrapper classes (.wp-block-woocommerce-*) confirmed from real
   page source. Inner line-item classes (.wc-block-cart-item,
   .wc-block-components-product-name, etc.) are WooCommerce's standard
   React component classes, rendered client-side via JS into the
   cart-line-items-block wrapper below.
   ================================================================ */

.wp-block-woocommerce-cart {
  background: transparent !important;
  color: #F7F5F0 !important;
}

.wp-block-woocommerce-filled-cart-block,
.wp-block-woocommerce-cart-items-block {
  background: transparent !important;
}

.wp-block-woocommerce-cart-line-items-block {
  border-top: 1px solid #33353F !important;
}

/* Sidebar: order summary card */
.wp-block-woocommerce-cart-totals-block {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  padding: 24px !important;
  overflow: visible !important;
}

.wp-block-woocommerce-cart-order-summary-block {
  color: #F7F5F0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.wp-block-woocommerce-proceed-to-checkout-block {
  margin-top: 16px !important;
  padding-bottom: 4px !important;
}

.wp-block-woocommerce-cart-order-summary-heading-block,
.wp-block-woocommerce-cart-order-summary-heading-block .wc-block-components-totals-heading,
.wp-block-woocommerce-cart-order-summary-heading-block h2 {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* "Add coupons" accordion toggle */
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button {
  color: #F5C518 !important;
  background: transparent !important;
}

.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input input {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

.wp-block-woocommerce-cart-order-summary-totals-block {
  border-top: 1px solid #33353F !important;
  padding-top: 12px !important;
  margin-top: 12px !important;
}

.wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-item__description {
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-item__value {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* Empty cart state */
.wp-block-woocommerce-empty-cart-block {
  color: #9498A0 !important;
  text-align: center;
}

.wc-block-cart__empty-cart__title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* Page title ("Cart") — .entry-title is a shared theme class, so
   scope it to just this page via the WooCommerce cart page body class */
.woocommerce-cart .entry-title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 32px !important;
  line-height: 1.2 !important;
}

.wc-block-cart {
  background: transparent !important;
  color: #F7F5F0 !important;
}

.wc-block-cart-items {
  border-top: 1px solid #33353F !important;
}

.wc-block-cart-items__header {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #33353F !important;
}

.wc-block-cart-items__row {
  border-bottom: 1px solid #33353F !important;
}

.wc-block-components-product-name {
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

.wc-block-components-product-name:hover {
  color: #F5C518 !important;
}

.wc-block-components-product-price,
.wc-block-components-formatted-money-amount {
  color: #F5C518 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.wc-block-components-quantity-selector {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 8px !important;
}

.wc-block-components-quantity-selector__input {
  background: transparent !important;
  color: #F7F5F0 !important;
}

.wc-block-components-quantity-selector__button {
  color: #9498A0 !important;
}

.wc-block-components-quantity-selector__button:hover {
  color: #F5C518 !important;
}

.wc-block-cart-item__remove-link {
  color: #9498A0 !important;
}

.wc-block-cart-item__remove-link:hover {
  color: #B62E1E !important;
}

/* Sidebar: Cart Totals */
.wc-block-components-totals-wrapper {
  border-color: #33353F !important;
}

.wc-block-cart__totals-title,
.wc-block-components-totals-item__label {
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.wc-block-components-totals-item__value {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
  color: #9498A0 !important;
}

.wc-block-components-totals-coupon-link {
  color: #F5C518 !important;
}

.wc-block-components-totals-coupon .wc-block-components-text-input input {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

/* Proceed to Checkout button */
.wc-block-cart__submit-container .wp-element-button,
.wc-proceed-to-checkout .checkout-button {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.wc-block-cart__submit-container .wp-element-button:hover,
.wc-proceed-to-checkout .checkout-button:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

/* ================================================================
   13a. WOOCOMMERCE — CART PAGE — MOBILE RESPONSIVE OVERRIDES
   Two breakpoints:
   - Tablet / narrow desktop  (≤ 782px, WP's own mobile admin breakpoint,
     reused here since block themes commonly switch cart layout here too)
   - Phone                    (≤ 480px)

   CONFIRMED FROM LIVE MARKUP (view-source on the cart page):
   the sidebar-layout wrapper is .wc-block-components-sidebar-layout,
   containing .wc-block-cart__main (items) and .wc-block-cart__sidebar
   (totals) side by side. Critically, the line items are NOT a flex/grid
   set of divs — they are a real <table class="wc-block-cart-items">
   with <tr class="wc-block-cart-items__row"> and three <td> cells:
   .wc-block-cart-item__image, .wc-block-cart-item__product,
   .wc-block-cart-item__total. Tables size their columns to fit content
   and refuse to shrink below that, which is what was forcing the whole
   page to overflow horizontally (the clipped-on-both-edges look).
   Fix: break the table out of table layout on mobile and lay each row
   out as a flex card instead.
   ================================================================ */

@media (max-width: 782px) {

  /* ROOT CAUSE OF THE OVERFLOW/CLIPPING SEEN THROUGHOUT THIS PAGE:
     theme.css applies `.alignwide { margin-inline: -80px; }` — a WP
     core block-alignment utility that intentionally makes "wide"
     blocks bleed past normal content width on desktop, where extra
     page padding absorbs it. At mobile widths there's no spare padding
     to absorb it, so the cart block (which carries .alignwide) gets
     pulled 80px wider than the viewport on BOTH sides — the exact
     symmetric clipping seen in every screenshot on this page (banner
     text, coupon toggle, totals line, etc. all missing their first
     few characters). Neutralize it here, scoped to the cart block only
     so other pages relying on .alignwide elsewhere aren't affected. */
  .wp-block-woocommerce-cart.alignwide {
    margin-inline: 0 !important;
  }

  /* Safety net: nothing on this page should cause horizontal scroll */
  .woocommerce-cart,
  .wc-block-components-sidebar-layout {
    overflow-x: hidden !important;
  }

  /* Stack the items column and totals sidebar vertically */
  .wc-block-components-sidebar-layout.wc-block-cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .wc-block-cart__main,
  .wc-block-cart__sidebar {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
  }

  .wc-block-cart__main { order: 1 !important; }
  .wc-block-cart__sidebar {
    order: 2 !important;
    padding: 20px !important;
    overflow-x: hidden !important;
  }

  /* The totals/coupon sidebar showed the exact same clipping symptom as
     the product row did before its fix — same root cause (a competing
     WooCommerce rule with fixed/overflowing widths), just on different
     elements. Force every child here to respect the sidebar's width. */
  .wc-block-cart__sidebar,
  .wc-block-cart__sidebar *,
  .wp-block-woocommerce-cart-totals-block,
  .wp-block-woocommerce-cart-totals-block * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .wc-block-components-totals-wrapper,
  .wc-block-components-totals-coupon,
  .wp-block-woocommerce-cart-order-summary-coupon-form-block {
    width: 100% !important;
  }

  .wc-block-components-totals-item {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 6px 12px !important;
  }

  .wc-block-components-panel__button {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
  }

  .woocommerce-cart .entry-title {
    font-size: 26px !important;
  }

  /* --- Break the <table> out of table layout entirely --- */
  .wc-block-cart-items.wp-block-woocommerce-cart-line-items-block {
    display: block !important;
    width: 100% !important;
  }

  .wc-block-cart-items thead,
  .wc-block-cart-items__header {
    display: none !important;
  }

  .wc-block-cart-items tbody {
    display: block !important;
    width: 100% !important;
  }

  /* Each <tr> becomes a flex card: image on the left, product info
     (name/price/qty/remove) on the right, total price full-width below.

     IMPORTANT: WooCommerce's OWN default stylesheet (cart.css) already
     ships a competing rule inside `@container (max-width: 699px)`:
       div.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row
       { display: grid !important; grid-template-columns: 80px 132px; }
     That selector has higher specificity (3 classes + 2 tags) than a
     plain `.wc-block-cart-items__row`, so even with !important it wins
     the cascade tie-break and silently overrides the rule above. It also
     only defines 2 grid columns for a 3-cell row (image/product/total),
     which is what was actually causing the clipped/overlapping layout.

     Fix: repeat the class in the selector (harmless no-op semantically,
     but each repetition adds one more class to the specificity count)
     so our rule outranks WooCommerce's, on every selector below that it
     could possibly collide with. */
  .wc-block-cart-items__row.wc-block-cart-items__row.wc-block-cart-items__row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    box-sizing: border-box !important;
  }

  .wc-block-cart-item__image.wc-block-cart-item__image {
    display: block !important;
    flex: 0 0 72px !important;
    width: 72px !important;
    padding: 0 !important;
  }

  .wc-block-cart-item__image.wc-block-cart-item__image img {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  .wc-block-cart-item__product.wc-block-cart-item__product {
    display: block !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .wc-block-cart-item__total.wc-block-cart-item__total {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    text-align: right !important;
    padding: 0 !important;
    margin-top: -6px !important;
  }

  .wc-block-components-product-name {
    font-size: 15px !important;
    display: block !important;
  }

  .wc-block-components-product-price,
  .wc-block-components-formatted-money-amount {
    font-size: 14px !important;
  }

  .wc-block-cart-item__prices {
    margin: 4px 0 !important;
  }

  /* Quantity selector + remove button sit side by side, wrapping if needed */
  .wc-block-cart-item__quantity {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 8px !important;
  }

  .wc-block-components-quantity-selector {
    height: 40px !important;
    flex: 0 0 auto !important;
  }

  .wc-block-components-quantity-selector__button,
  .wc-block-components-quantity-selector__input {
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 15px !important;
  }

  .wc-block-cart-item__remove-link {
    font-size: 13px !important;
  }

  /* Checkout button goes full-width and gets a bigger tap target */
  .wc-block-cart__submit-container .wp-element-button,
  .wc-proceed-to-checkout .checkout-button {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
  }
}

/* Redundant safety net: WooCommerce's own conflicting rule triggers on
   *container* width (699px), which can differ slightly from viewport
   width once the sidebar-layout container is stacked/padded. Mirror the
   same override here so it applies at exactly the same breakpoint
   WooCommerce itself uses, regardless of viewport vs container math. */
@container (max-width: 699px) {
  div.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    box-sizing: border-box !important;
  }

  div.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image {
    display: block !important;
    flex: 0 0 72px !important;
    width: 72px !important;
    padding: 0 !important;
  }

  div.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image img {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  div.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__product {
    display: block !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  div.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__total {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    text-align: right !important;
    padding: 0 !important;
    margin-top: -6px !important;
  }
}

@media (max-width: 480px) {

  .woocommerce-cart .entry-title {
    font-size: 22px !important;
  }

  .wc-block-cart__sidebar {
    padding: 16px !important;
    border-radius: 10px !important;
  }

  .wc-block-cart-items__row {
    padding: 14px 0 !important;
    gap: 10px !important;
  }

  .wc-block-cart-item__image,
  .wc-block-cart-item__image img {
    flex-basis: 60px !important;
    width: 60px !important;
    max-width: 60px !important;
    height: 60px !important;
  }

  .wc-block-components-product-name {
    font-size: 14px !important;
  }

  .wc-block-components-quantity-selector__button,
  .wc-block-components-quantity-selector__input {
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 14px !important;
  }

  .wc-block-cart__submit-container .wp-element-button,
  .wc-proceed-to-checkout .checkout-button {
    font-size: 14px !important;
    padding: 13px 16px !important;
    box-shadow: 0 4px 0 #B62E1E !important;
  }

  .wc-block-cart__submit-container .wp-element-button:hover,
  .wc-proceed-to-checkout .checkout-button:hover {
    box-shadow: 0 6px 0 #B62E1E !important;
  }
}
/* ================================================================
   14. WOOCOMMERCE — CHECKOUT PAGE (block-based checkout)
   Outer wrapper classes confirmed from real page source. Inner
   form-field classes (.wc-block-components-*) are WooCommerce's
   standard React component classes, rendered client-side.
   ================================================================ */

.woocommerce-checkout .entry-title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 32px !important;
  line-height: 1.2 !important;
}

.wp-block-woocommerce-checkout {
  background: transparent !important;
  color: #F7F5F0 !important;
}

.wp-block-woocommerce-checkout-fields-block {
  background: transparent !important;
}

/* Each form section (Contact info, Shipping address, Payment, etc.) */
.wp-block-woocommerce-checkout-contact-information-block,
.wp-block-woocommerce-checkout-shipping-address-block,
.wp-block-woocommerce-checkout-billing-address-block,
.wp-block-woocommerce-checkout-shipping-methods-block,
.wp-block-woocommerce-checkout-payment-block,
.wp-block-woocommerce-checkout-additional-information-block,
.wp-block-woocommerce-checkout-order-note-block {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

/* Section headings inside those blocks */
.wc-block-components-checkout-step__title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.wc-block-components-checkout-step__description {
  color: #9498A0 !important;
}

/* Text inputs (email, name, address, etc.) */
.wc-block-components-text-input input,
.wc-block-components-textarea textarea {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
}

.wc-block-components-text-input label {
  color: #9498A0 !important;
}

/* Country/state select dropdowns */
.wc-block-components-dropdown-selector__control,
.wc-blocks-components-select .wc-blocks-components-select__select {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

/* Shipping/payment method radio options */
.wc-block-components-radio-control__option {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  border-radius: 8px !important;
  color: #F7F5F0 !important;
}

.wc-block-components-radio-control__option--checked {
  border-color: #F5C518 !important;
}

.wc-block-components-radio-control-accordion-option__description {
  color: #9498A0 !important;
}

/* Terms and conditions checkbox */
.wc-block-checkout__terms {
  color: #9498A0 !important;
}

.wc-block-checkout__terms a {
  color: #F5C518 !important;
}

/* Order note textarea */
.wp-block-woocommerce-checkout-order-note-block textarea {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

/* "Place Order" button */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.wc-block-components-checkout-place-order-button:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   SIDEBAR — order summary (mirrors the cart totals card)
   ------------------------------------------------------------ */
.wp-block-woocommerce-checkout-totals-block {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  padding: 24px !important;
  overflow: visible !important;
}

.wp-block-woocommerce-checkout-order-summary-block {
  color: #F7F5F0 !important;
  background: transparent !important;
}

.wc-block-components-order-summary-item__quantity {
  color: #9498A0 !important;
}

.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__total-price {
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.wp-block-woocommerce-checkout-order-summary-totals-block {
  border-top: 1px solid #33353F !important;
  padding-top: 12px !important;
  margin-top: 12px !important;
}

.wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-item__label {
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-item__value {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

@media (max-width: 768px) {
  .wp-block-woocommerce-checkout-contact-information-block,
  .wp-block-woocommerce-checkout-shipping-address-block,
  .wp-block-woocommerce-checkout-billing-address-block,
  .wp-block-woocommerce-checkout-payment-block {
    padding: 16px !important;
  }
}

/* ================================================================
   15. WOOCOMMERCE — ORDER RECEIVED (thank-you) PAGE
   Real markup confirmed — traditional shortcode template, not blocks.
   ================================================================ */

body.woocommerce-order-received .page-header .entry-title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 32px !important;
  line-height: 1.2 !important;
}

.woocommerce-order {
  color: #F7F5F0 !important;
}

/* "Thank you. Your order has been received." success banner */
.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
  background: rgba(62, 142, 90, 0.15) !important;
  border: 1px solid #3E8E5A !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

/* Order overview list (Order number / Date / Email / Total / Payment method) */
.woocommerce-order-overview {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  padding: 16px !important;
}

.woocommerce-order-overview li {
  color: #9498A0 !important;
  border-right: 1px solid #33353F !important;
}

.woocommerce-order-overview li strong {
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Order details table */
.woocommerce-order-details__title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

table.woocommerce-table--order-details {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 10px !important;
  color: #F7F5F0 !important;
}

table.woocommerce-table--order-details thead th {
  background: #14151A !important;
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  border-bottom: 1px solid #33353F !important;
}

table.woocommerce-table--order-details tbody td,
table.woocommerce-table--order-details tfoot td,
table.woocommerce-table--order-details tfoot th {
  border-top: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

table.woocommerce-table--order-details a {
  color: #F5C518 !important;
}

table.woocommerce-table--order-details tfoot tr:last-child td,
table.woocommerce-table--order-details tfoot tr:last-child th {
  font-family: 'Archivo Black', sans-serif !important;
}

/* Billing address section */
.woocommerce-customer-details {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-top: 16px !important;
}

.woocommerce-column__title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.woocommerce-customer-details address {
  color: #9498A0 !important;
  font-style: normal;
}

@media (max-width: 600px) {
  .woocommerce-order-overview {
    flex-direction: column !important;
  }

  .woocommerce-order-overview li {
    border-right: none !important;
    border-bottom: 1px solid #33353F !important;
    padding: 8px 0 !important;
  }

  .woocommerce-order-overview li:last-child {
    border-bottom: none !important;
  }
}

/* ================================================================
   16. TUTOR — STUDENT REGISTRATION FORM
   (/student-registration/) — real markup confirmed
   ================================================================ */

#tutor-registration-form {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  color: #F7F5F0 !important;
  font-family: 'Inter', sans-serif !important;
  max-width: 480px;
  margin: 40px auto !important;
}

/* Global fallback for the theme's default .entry-title on plain WP
   pages (Cart, Checkout, Order Received, Student Registration, etc.)
   — this was rendering oversized (60-70px) by default */
.entry-title {
  font-size: 32px !important;
  line-height: 1.2 !important;
}

#tutor-registration-form .tutor-form-group label {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Password label sits outside .tutor-form-group, needs its own rule */
#tutor-registration-form .tutor-password-field label {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

#tutor-registration-form .tutor-form-control.tutor-input {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  width: 100%;
}

#tutor-registration-form .tutor-form-control.tutor-input::placeholder {
  color: #9498A0 !important;
}

/* Show/hide password eye icon */
#tutor-registration-form .tutor-password-field span svg {
  color: #9498A0 !important;
}

#tutor-registration-form .tutor-password-field span:hover svg {
  color: #F7F5F0 !important;
}

/* Register button */
#tutor-registration-form .tutor-btn-primary {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  transition: all 0.15s ease !important;
}

#tutor-registration-form .tutor-btn-primary:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

#tutor-registration-form .tutor-btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 6px 0 #B62E1E !important;
}

/* "Already have an account? Login" */
#tutor-registration-form .tutor-small {
  color: #9498A0 !important;
}

#tutor-registration-form .tutor-btn-link {
  color: #F5C518 !important;
  font-weight: 700 !important;
}

#tutor-registration-form .tutor-btn-link:hover {
  color: #F7F5F0 !important;
}

@media (max-width: 480px) {
  #tutor-registration-form {
    max-width: 100% !important;
    margin: 20px 16px !important;
    padding: 20px !important;
  }
}

/* ================================================================
   17. TUTOR — REGISTRATION FORM OUTER WRAPPER FIX (double border)
   ================================================================ */
#tutor-registration-wrap.tutor-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ================================================================
   18. TUTOR — DASHBOARD EMPTY STATE (welcome card + quick tips)
   ================================================================ */
.tutor-dashboard-welcome-card,
.tutor-dashboard-quick-tips-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

.tutor-dashboard-welcome-badge {
  background: rgba(245, 197, 24, 0.15) !important;
  color: #F5C518 !important;
  border-radius: 999px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

.tutor-dashboard-welcome-content .tutor-h3 {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.tutor-dashboard-welcome-content .tutor-p2 {
  color: #9498A0 !important;
}

.tutor-dashboard-welcome-content .tutor-btn-primary {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.tutor-dashboard-welcome-content .tutor-btn-primary:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

.tutor-dashboard-quick-tips-card .tutor-surface-brand-tertiary {
  background: rgba(245, 197, 24, 0.15) !important;
}

.tutor-dashboard-quick-tips-card .tutor-icon-brand {
  color: #F5C518 !important;
}

.tutor-dashboard-quick-tips-card .tutor-medium.tutor-font-semibold {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.tutor-dashboard-quick-tips-card .tutor-text-secondary {
  color: #9498A0 !important;
}

/* ================================================================
   19. TUTOR — BILLING / ORDER HISTORY PAGE
   ================================================================ */
.tutor-billing-body {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

.tutor-billing-tabs-content {
  background: #1D1F26 !important;
}

.tutor-dropdown-filter .tutor-btn-link {
  color: #F7F5F0 !important;
}

.tutor-dropdown-filter .tutor-text-secondary {
  color: #9498A0 !important;
}

.tutor-dropdown-filter .tutor-text-primary {
  color: #F7F5F0 !important;
}

.tutor-billing-tabs .tutor-nav.tutor-nav-small.tutor-nav-primary,
.tutor-billing-tabs-content,
.tutor-billing-body {
  border-color: #33353F !important;
}

@media (max-width: 768px) {
  .tutor-billing-body,
  .tutor-billing-tabs-content {
    background: #1D1F26 !important;
  }
  .tutor-billing-tabs .tutor-nav.tutor-nav-small.tutor-nav-primary,
  .tutor-billing-tabs-content,
  .tutor-billing-body {
    border-color: #33353F !important;
  }
}

/* ================================================================
   20. TUTOR — SETTINGS PAGE (sidebar tabs + header + editor)
   ================================================================ */
.tutor-tabs-nav.tutor-profile-settings-tab {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

.tutor-tabs-tab {
  color: #9498A0 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.tutor-tabs-tab:hover {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.tutor-tabs-tab.tutor-tabs-tab-active {
  background: rgba(245, 197, 24, 0.15) !important;
  color: #F5C518 !important;
}

.tutor-tabs-tab .tutor-text-small {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

.tutor-tabs-tab .tutor-text-subdued {
  color: #9498A0 !important;
}

.tutor-tabs-tab.tutor-tabs-tab-active .tutor-text-small,
.tutor-tabs-tab.tutor-tabs-tab-active .tutor-text-subdued {
  color: #F5C518 !important;
}

.tutor-tabs-tab .tutor-icon,
.tutor-tabs-tab .tutor-icon svg {
  color: #9498A0 !important;
}

.tutor-tabs-tab.tutor-tabs-tab-active .tutor-icon,
.tutor-tabs-tab.tutor-tabs-tab-active .tutor-icon svg {
  color: #F5C518 !important;
}

.tutor-profile-header {
  border-bottom: 1px solid #33353F !important;
}

/* WP TinyMCE editor (Bio field) */
.tutor-wp-editor-container .mce-tinymce.mce-container.mce-panel {
  border: 1px solid #33353F !important;
}

#wp-tutor_profile_bio-wrap.wp-editor-wrap,
.tutor-wp-editor-container .wp-editor-container {
  border-color: #33353F !important;
}

.tutor-wp-editor-container .mce-toolbar-grp,
#wp-tutor_profile_bio-wrap div.mce-toolbar-grp {
  background-color: #1D1F26 !important;
  border-bottom: 1px solid #33353F !important;
}

.tutor-wp-editor-container .mce-btn button {
  color: #9498A0 !important;
}

.tutor-wp-editor-container .mce-btn button:hover {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.tutor-wp-editor-container .mce-btn .mce-ico {
  color: inherit !important;
}

.tutor-wp-editor-container .mce-edit-area,
.tutor-wp-editor-container .mce-edit-area iframe {
  background: #14151A !important;
}

.tutor-wp-editor-container .mce-statusbar,
.tutor-wp-editor-container div.mce-panel.mce-statusbar,
.tutor-wp-editor-container .mce-container.mce-panel.mce-statusbar {
  background-color: #1D1F26 !important;
  border-color: #33353F !important;
}

.tutor-wp-editor-container .mce-path-item {
  color: #9498A0 !important;
}

.tutor-wp-editor-container .mce-resizehandle .mce-ico {
  color: #9498A0 !important;
}

/* ================================================================
   21. TUTOR — "Explore Courses" sidebar link (dashboard)
   ================================================================ */
.tutor-see-all-courses {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1D1F26 !important;
  color: #F5C518 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.tutor-see-all-courses:hover {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.tutor-see-all-courses svg {
  color: inherit !important;
}

/* ================================================================
   22. TUTOR — CRITICAL ROOT VARIABLE NAME FIX
   Real variable names confirmed via DevTools are --tutor-border-idle
   and --tutor-surface-l1 (with "l"), NOT --tutor-border-color /
   --tutor-surface-1 as originally guessed. This corrects borders
   and surfaces across every component that reads these variables.
   ================================================================ */
:root {
  --tutor-border-idle: #33353F !important;
  --tutor-surface-l1: #1D1F26 !important;
  --tutor-surface-l2: #1D1F26 !important;
  --tutor-surface-l3: #14151A !important;
}

/* Outline button hover border color */
button.tutor-btn-outline:hover:not(:disabled):not(.disabled),
a.tutor-btn-outline:hover:not(:disabled):not(.disabled),
.tutor-btn-outline:hover:not(:disabled):not(.disabled) {
  border-color: #F5C518 !important;
}

/* ================================================================
   23. SLICEWP — AFFILIATE REGISTRATION FORM (real markup confirmed)
   ================================================================ */
.slicewp-user-notice.slicewp-warning {
  background: rgba(245, 197, 24, 0.15) !important;
  border: 1px solid #F5C518 !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

.slicewp-field-inner input:disabled {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #9498A0 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #9498A0 !important;
}

#slicewp-affiliate-register-form .slicewp-field-inner input,
#slicewp-affiliate-register-form .slicewp-field-inner textarea {
  background: #14151A !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  width: 100%;
}
/* ============================================================
   TUTOR LMS — LOGGED-IN STUDENT DASHBOARD (real markup)
   ============================================================ */

/* Page background */
.tutor-dashboard-layout,
.tutor-dashboard-body,
.tutor-dashboard-page {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

/* ------------------------------------------------------------
   DESKTOP SIDEBAR
   ------------------------------------------------------------ */
.tutor-dashboard-sidebar {
  background: #1D1F26 !important;
  border-right: 1px solid #33353F !important;
}

.tutor-dashboard-sidebar-nav ul li a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  color: #9498A0 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  transition: all 0.15s ease !important;
}

.tutor-dashboard-sidebar-nav ul li a:hover {
  color: #F7F5F0 !important;
  background: #14151A !important;
}

.tutor-dashboard-sidebar-nav ul li a.active {
  background: #F5C518 !important;
  color: #14151A !important;
}

.tutor-dashboard-sidebar-nav ul li a.active svg {
  color: #14151A !important;
}

.tutor-see-all-courses {
  color: #F5C518 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

.tutor-see-all-courses:hover {
  color: #F7F5F0 !important;
}

/* ------------------------------------------------------------
   TOP HEADER (greeting + user menu)
   ------------------------------------------------------------ */
.tutor-dashboard-header {
  background: transparent !important;
  border-bottom: 1px solid #33353F !important;
}

.tutor-dashboard-header-left .tutor-h5 {
  font-family: 'Archivo Black', sans-serif !important;
  color: #F7F5F0 !important;
}

.tutor-dashboard-header-left .tutor-text-subdued {
  color: #9498A0 !important;
}

/* Avatar circles (initials) everywhere */
.tutor-avatar {
  background: #F5C518 !important;
}

.tutor-avatar-initials {
  color: #14151A !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* User popover menu */
body .tutor-popover.tutor-dashboard-header-user-popover {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.35) !important;
}

/* This wrapper div sits directly inside the popover and was painting
   its own separate white background over the dark one above */
.tutor-dashboard-header-user-popover-profile {
  background: #1D1F26 !important;
}

/* "Account" header bar with back/settings icon buttons */
.tutor-dashboard-header-user-popover .tutor-profile-header-top {
  border-bottom: 1px solid #33353F !important;
}

.tutor-dashboard-header-user-popover .tutor-profile-header-title {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.tutor-dashboard-header-user-popover .tutor-btn-ghost {
  color: #9498A0 !important;
}

.tutor-dashboard-header-user-popover .tutor-btn-ghost:hover {
  color: #F7F5F0 !important;
}

/* Avatar + name/email block */
.tutor-dashboard-header-user-popover .tutor-user-profile-info {
  border-bottom: 1px solid #33353F !important;
}

.tutor-dashboard-header-user-popover .tutor-avatar-border {
  border: 2px solid #F5C518 !important;
}

/* Menu list wrapper + items */
.tutor-dashboard-header-user-popover-menu-wrapper {
  background: #1D1F26 !important;
}

.tutor-dashboard-header-user-popover-menu li a {
  color: #9498A0 !important;
  font-family: 'Inter', sans-serif !important;
}

.tutor-dashboard-header-user-popover-menu li a:hover {
  color: #F7F5F0 !important;
  background: #14151A !important;
}

.tutor-dashboard-header-user-popover-menu li a svg {
  color: #9498A0 !important;
}

.tutor-dashboard-header-user-popover-menu li a:hover svg {
  color: #F7F5F0 !important;
}

/* Mobile logout button/wrapper at the bottom */
.tutor-mobile-logout-wrapper {
  border-top: 1px solid #33353F !important;
}

.tutor-mobile-logout-wrapper .tutor-btn {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
}

.tutor-user-profile-meta .tutor-text-primary {
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.tutor-user-profile-meta .tutor-text-secondary {
  color: #9498A0 !important;
}

/* ------------------------------------------------------------
   STAT CARDS (Enrolled / Active / Completed / Time Spent)
   ------------------------------------------------------------ */
.tutor-stat-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  padding: 20px !important;
  transition: all 0.15s ease !important;
}

.tutor-stat-card:hover {
  border-color: #F5C518 !important;
  transform: translateY(-2px);
}

.tutor-stat-card-title {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tutor-stat-card-icon {
  color: #F5C518 !important;
}

.tutor-stat-card-value {
  font-family: 'Archivo Black', sans-serif !important;
  color: #F7F5F0 !important;
  font-size: 28px !important;
}

/* ------------------------------------------------------------
   "CONTINUE LEARNING" SECTION
   ------------------------------------------------------------ */
.tutor-student-dashboard-courses .tutor-small.tutor-font-medium {
  font-family: 'Archivo Black', sans-serif !important;
  color: #F7F5F0 !important;
  font-size: 15px !important;
}

.tutor-student-dashboard-courses .tutor-btn-link {
  color: #F5C518 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

/* Progress / course card */
.tutor-progress-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
}

.tutor-progress-card:hover {
  border-color: #F5C518 !important;
}

.tutor-progress-card-category {
  color: #F5C518 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tutor-progress-card-title {
  font-family: 'Archivo Black', sans-serif !important;
  color: #F7F5F0 !important;
}

.tutor-progress-card-details {
  color: #9498A0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}

.tutor-progress-bar {
  background: #33353F !important;
  border-radius: 999px !important;
  height: 6px !important;
}

.tutor-progress-bar-fill {
  background: #F5C518 !important;
  border-radius: 999px !important;
}

.tutor-progress-card-actions .tutor-btn-primary {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.tutor-progress-card-actions .tutor-btn-primary:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   MOBILE BOTTOM NAV (Tutor's own built-in mobile nav)
   ------------------------------------------------------------ */
.tutor-dashboard-nav-mobile {
  background: #1D1F26 !important;
  border-top: 1px solid #33353F !important;
}

.tutor-dashboard-nav-mobile-list li a {
  color: #9498A0 !important;
}

.tutor-dashboard-nav-mobile-list li a.active,
.tutor-dashboard-nav-mobile-list li a.active .tutor-dashboard-nav-mobile-icon {
  color: #F5C518 !important;
}

.tutor-dashboard-nav-mobile-text {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

/* Mobile "More" popover */
.tutor-dashboard-nav-mobile-more-popover {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

.tutor-dashboard-nav-mobile-more-popover li a {
  color: #9498A0 !important;
}

.tutor-dashboard-nav-mobile-more-popover li a:hover {
  color: #F7F5F0 !important;
}

/* ------------------------------------------------------------
   PAGE CARD WRAPPERS (Discussions page + Courses tab page)
   These are the white boxes that were still showing through
   ------------------------------------------------------------ */
.tutor-dashboard-page-card,
.tutor-dashboard-courses-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  overflow: hidden;
}

.tutor-dashboard-page-card-header,
.tutor-dashboard-courses-tab {
  background: #1D1F26 !important;
  border-bottom: 1px solid #33353F !important;
}

.tutor-dashboard-page-card-body,
.tutor-dashboard-courses-list {
  background: #1D1F26 !important;
  color: #F7F5F0 !important;
}

/* Page title e.g. "Discussions" / "Courses" */
.tutor-dashboard-discussions .tutor-h4,
.tutor-dashboard-courses-wrapper .tutor-h4 {
  font-family: 'Archivo Black', sans-serif !important;
  color: #F7F5F0 !important;
}

/* "All (0)" filter dropdown button + "Newest First" sort button */
.tutor-dropdown-filter .tutor-btn-link {
  color: #F7F5F0 !important;
}

.tutor-dropdown-filter .tutor-text-secondary,
.tutor-icon-secondary {
  color: #9498A0 !important;
}

.tutor-btn.tutor-btn-outline {
  border: 1px solid #33353F !important;
  background: transparent !important;
  color: #9498A0 !important;
}

.tutor-btn.tutor-btn-outline:hover {
  border-color: #F5C518 !important;
  color: #F5C518 !important;
}

/* The filter/sort popover menus themselves */
.tutor-popover {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 10px !important;
}

.tutor-popover-menu-item {
  color: #9498A0 !important;
  font-family: 'Inter', sans-serif !important;
  border-radius: 6px !important;
}

.tutor-popover-menu-item:hover {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.tutor-popover-menu-item.tutor-active {
  background: #F5C518 !important;
  color: #14151A !important;
}

.tutor-popover-menu-item .tutor-text-primary {
  color: inherit !important;
}

/* Border dividers inside cards (tutor-border-b utility) */
.tutor-dashboard-page-card-body .tutor-border-b {
  border-bottom: 1px solid #33353F !important;
}

/* Empty state ("No Questions Found!") — icon uses CSS vars, easy override */
.tutor-dashboard-page-card-body svg {
  --tutor-visual-gray-2: #2A2C35;
  --tutor-visual-gray-3: #3D404B;
}

.tutor-dashboard-page-card-body .tutor-text-subdued {
  color: #9498A0 !important;
}

/* Generic .tutor-card utility — used for empty states like
   "No Courses Found" wherever they appear across the site */
.tutor-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

.tutor-card svg {
  --tutor-visual-gray-2: #2A2C35;
  --tutor-visual-gray-3: #3D404B;
}

.tutor-card .tutor-text-subdued {
  color: #9498A0 !important;
}

/* ------------------------------------------------------------
   COURSE ARCHIVE / LISTING PAGE (public, real markup)
   ------------------------------------------------------------ */
.tutor-courses-wrap {
  background: transparent !important;
}

/* Sort dropdown ("Release Date (newest first)") */
.tutor-course-filter .tutor-form-select {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 8px !important;
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.tutor-course-filter .tutor-form-select-label {
  color: #F7F5F0 !important;
}

.tutor-course-filter .tutor-form-select-dropdown {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 8px !important;
}

.tutor-course-filter .tutor-form-select-option {
  color: #9498A0 !important;
}

.tutor-course-filter .tutor-form-select-option:hover {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.tutor-course-filter .tutor-form-select-option.is-active {
  background: #F5C518 !important;
  color: #14151A !important;
}

/* Course card */
.tutor-course-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: all 0.15s ease !important;
}

.tutor-course-card:hover {
  border-color: #F5C518 !important;
  transform: translateY(-2px);
}

.tutor-course-card .tutor-card-body {
  background: transparent !important;
}

/* Star ratings (currently empty outline stars) */
.tutor-course-card .tutor-icon-star-line {
  color: #F5C518 !important;
}

/* Course title */
.tutor-course-card .tutor-course-name a {
  font-family: 'Archivo Black', sans-serif !important;
  color: #F7F5F0 !important;
}

.tutor-course-card .tutor-course-name a:hover {
  color: #F5C518 !important;
}

/* Meta row (student count, duration) */
.tutor-course-card .tutor-meta {
  color: #9498A0 !important;
  font-family: 'Inter', sans-serif !important;
}

.tutor-course-card .tutor-meta-icon,
.tutor-course-card .tutor-meta-value {
  color: #9498A0 !important;
}

/* Instructor avatar + "By ___ In ___" line */
.tutor-course-card .tutor-avatar-text {
  background: #F5C518 !important;
  color: #14151A !important;
  font-family: 'Archivo Black', sans-serif !important;
}

.tutor-course-card .tutor-meta a {
  color: #F7F5F0 !important;
  font-weight: 600 !important;
}

.tutor-course-card .tutor-meta a:hover {
  color: #F5C518 !important;
}

/* Card footer button (Continue Learning / Start Learning / Enroll Course) */
.tutor-course-card .tutor-card-footer {
  background: transparent !important;
  border-top: 1px solid #33353F !important;
}

.tutor-course-card .tutor-btn-outline-primary {
  background: transparent !important;
  border: 1.5px solid #F5C518 !important;
  color: #F5C518 !important;
  border-radius: 8px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.tutor-course-card .tutor-btn-outline-primary:hover {
  background: #F5C518 !important;
  color: #14151A !important;
}

/* Bookmark/wishlist icon button on card thumbnail */
.tutor-course-wishlist-btn {
  background: #1D1F26 !important;
  color: #9498A0 !important;
}

.tutor-course-wishlist-btn:hover {
  color: #F5C518 !important;
}

/* ------------------------------------------------------------
   TUTOR LMS 4.0 DESIGN TOKENS — root-level override
   Tutor 4.0 paints many surfaces via CSS custom properties
   (e.g. var(--tutor-surface-base)) rather than plain classes.
   Overriding the tokens directly catches components that
   per-class rules above don't reach.
   ------------------------------------------------------------ */
:root {
  --tutor-surface-base: #14151A !important;
  --tutor-surface-1: #1D1F26 !important;
  --tutor-surface-2: #1D1F26 !important;
  --tutor-surface-3: #14151A !important;
  --tutor-border-color: #33353F !important;
  --tutor-border-hover: #F5C518 !important;
  --tutor-text-primary: #F7F5F0 !important;
  --tutor-text-secondary: #9498A0 !important;
  --tutor-text-subdued: #9498A0 !important;
  --tutor-actions-brand-primary: #F5C518 !important;
  --tutor-actions-gray-empty: #33353F !important;
  --tutor-visual-gray-1: #1D1F26 !important;
  --tutor-visual-gray-2: #2A2C35 !important;
  --tutor-visual-gray-3: #3D404B !important;
}

html[data-tutor-theme] {
  background-color: #14151A !important;
}

/* ------------------------------------------------------------
   QUIZ INTRO PAGE (real markup)
   ------------------------------------------------------------ */
.tutor-quiz-intro {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.tutor-quiz-intro-title {
  font-family: 'Archivo Black', sans-serif !important;
  color: #F7F5F0 !important;
}

.tutor-quiz-intro-icon {
  background: #1D1F26 !important;
  border-radius: 10px !important;
}

/* Quiz parameters table (Questions / Total Marks / Passing Grade) */
.tutor-quiz-intro-params.tutor-table-wrapper {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.tutor-quiz-intro-params .tutor-table {
  background: transparent !important;
}

.tutor-quiz-intro-params .tutor-table tr {
  border-bottom: 1px solid #33353F !important;
}

.tutor-quiz-intro-params .tutor-table td {
  color: #F7F5F0 !important;
  background: transparent !important;
  border-color: #33353F !important;
}

.tutor-quiz-intro-params .tutor-table td svg {
  color: #F5C518 !important;
}

/* Footer: Skip Quiz / Start Quiz */
.tutor-quiz-intro .tutor-learning-area-footer {
  background: #1D1F26 !important;
  border-top: 1px solid #33353F !important;
}

.tutor-quiz-intro .tutor-btn-ghost {
  color: #9498A0 !important;
}

.tutor-quiz-intro .tutor-btn-ghost:hover {
  color: #F7F5F0 !important;
}

.tutor-quiz-intro .tutor-btn-primary {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.tutor-quiz-intro .tutor-btn-primary:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

/* "Do You Want to Skip This Quiz?" confirmation modal */
.tutor-quiz-autostart-card {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

.tutor-quiz-autostart-title {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.tutor-quiz-autostart-digit {
  color: #F5C518 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* ------------------------------------------------------------
   LESSON / LEARNING AREA PAGE (video/reading lesson view)
   ------------------------------------------------------------ */
.tutor-learning-area {
  background: #14151A !important;
}

/* Top header bar */
.tutor-learning-header {
  background: #1D1F26 !important;
  border-bottom: 1px solid #33353F !important;
}

.tutor-learning-header-inner,
.tutor-learning-header-content {
  background: #1D1F26 !important;
}

.tutor-learning-header-title {
  font-family: 'Archivo Black', sans-serif !important;
  color: #F7F5F0 !important;
  font-size: 15px !important;
}

.tutor-learning-header-back svg,
.tutor-learning-header-toggle-mobile svg {
  color: #9498A0 !important;
}

/* Left curriculum sidebar */
.tutor-learning-sidebar {
  background: #1D1F26 !important;
  border-right: 1px solid #33353F !important;
}

.tutor-learning-sidebar-curriculum {
  background: #1D1F26 !important;
}

/* "20% Completed" progress box — was missing its own background */
.tutor-learning-progress {
  background: #1D1F26 !important;
}

/* Default (non-hover, non-active) state of lesson list items —
   previously only hover/active had a background set, so the
   resting state still showed Tutor's own white default */
.tutor-learning-nav-item {
  background: #1D1F26 !important;
}

/* "More" box at the bottom of the sidebar (Announcements/Reviews/Course Info) */
.tutor-learning-sidebar-pages {
  background: #1D1F26 !important;
  border-top: 1px solid #33353F !important;
}

.tutor-learning-pages-item {
  background: #1D1F26 !important;
}

.tutor-learning-progress {
  border-bottom: 1px solid #33353F !important;
}

.tutor-learning-progress-text {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.tutor-learning-progress-text span {
  color: #F5C518 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* Topic accordion headers */
.tutor-learning-nav-header {
  background: transparent !important;
  border-bottom: 1px solid #33353F !important;
  transition: all 0.15s ease !important;
}

.tutor-learning-nav-header:hover {
  background: #14151A !important;
}

.tutor-learning-nav-header-title {
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

.tutor-learning-nav-header-arrow svg,
.tutor-learning-nav-header-summary svg {
  color: #9498A0 !important;
}

.tutor-learning-nav-topic.active .tutor-learning-nav-header-title {
  color: #F5C518 !important;
}

/* Individual lesson/quiz items inside each topic */
.tutor-learning-nav-item {
  color: #9498A0 !important;
  border-bottom: 1px solid #33353F !important;
  transition: all 0.15s ease !important;
}

.tutor-learning-nav-item:hover {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.tutor-learning-nav-item.active {
  background: #14151A !important;
  color: #F5C518 !important;
  border-left: 2px solid #F5C518 !important;
}

.tutor-learning-nav-item .tutor-tiny-2.tutor-text-subdued {
  color: #9498A0 !important;
}

/* "More" popover (Announcements / Reviews / Course Info) */
.tutor-learning-pages-item {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

.tutor-learning-pages-item:hover {
  color: #F7F5F0 !important;
  background: #14151A !important;
}

/* Main lesson content area */
.tutor-learning-area-content {
  background: #14151A !important;
}

.tutor-lesson-content {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
}

/* Kills the leftover light-mode divider line between the overview
   text box and the Previous/Mark as Complete/Next footer bar */
.tutor-lesson-content .tutor-lesson-content-tab {
  background: #1D1F26 !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: none !important;
}

.tutor-lesson-content-tab,
.tutor-lesson-content-tab * {
  border-color: #33353F !important;
}

.tutor-tabs-content,
.tutor-tab-panel,
.tutor-lesson-content-tab {
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Catch-all: kills any leftover light-mode box-shadow "divider" line
   inside the lesson content area, wherever it actually lives */
.tutor-lesson-content,
.tutor-lesson-content *,
.tutor-tabs-content,
.tutor-tabs-content *,
.tutor-tab-panel,
.tutor-tab-panel * {
  box-shadow: none !important;
}

/* The wildcard rules above only match real DOM elements — CSS "*"
   does NOT match generated ::before/::after pseudo-elements.
   If the divider line is drawn that way, this catches it. */
.tutor-lesson-content::before,
.tutor-lesson-content::after,
.tutor-tabs-content::before,
.tutor-tabs-content::after,
.tutor-tab-panel::before,
.tutor-tab-panel::after,
.tutor-lesson-wrapper::before,
.tutor-lesson-wrapper::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* This inner tab panel sits ON TOP of .tutor-lesson-content and had
   its own separate white background — the actual box the overview
   text sits in, not just the outer wrapper */
.tutor-tab-panel {
  background: #1D1F26 !important;
}

.tutor-lesson-wrapper {
  background: transparent !important;
  color: #F7F5F0 !important;
  font-family: 'Inter', sans-serif !important;
}

.tutor-lesson-wrapper p {
  color: #E7E7EA !important;
}

/* Footer: Previous / Mark as Complete / Next */
.tutor-learning-area-footer {
  background: #1D1F26 !important;
  border-top: 1px solid #33353F !important;
}

.tutor-learning-area-footer .tutor-btn-ghost {
  color: #9498A0 !important;
}

.tutor-learning-area-footer .tutor-btn-ghost:hover {
  color: #F7F5F0 !important;
}

.tutor-mark-as-complete-button {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.tutor-mark-as-complete-button:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

.tutor-mark-as-complete-button .tutor-icon-brand {
  color: #14151A !important;
}

/* Fullscreen toggle + secondary "Complete the Course" button */
.tutor-expand-btn {
  border-color: #33353F !important;
  color: #9498A0 !important;
  background: transparent !important;
}

.tutor-btn-secondary {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  color: #F7F5F0 !important;
}

.tutor-btn-secondary:hover {
  border-color: #F5C518 !important;
  color: #F5C518 !important;
}

/* ------------------------------------------------------------
   MODAL CONTENT WRAPPER (shared by ALL Tutor modals — course
   complete, quiz skip, quiz autostart, etc.)
   ------------------------------------------------------------ */
.tutor-modal-content {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  color: #F7F5F0 !important;
}

.tutor-modal-content h5.tutor-h5,
.tutor-modal-content .tutor-h5 {
  color: #F7F5F0 !important;
}

.tutor-modal-content .tutor-text-secondary {
  color: #9498A0 !important;
}

.tutor-modal-close {
  color: #9498A0 !important;
}

.tutor-modal-close:hover {
  color: #F7F5F0 !important;
}

/* "Finish Course Early?" confirmation modal */
.tutor-finish-course-progress {
  background: #14151A !important;
  border: 1px solid #33353F !important;
}

.tutor-finish-course-progress .tutor-text-secondary {
  color: #9498A0 !important;
}

.tutor-btn-destructive {
  background: #B62E1E !important;
  color: #F7F5F0 !important;
  border: none !important;
}

.tutor-btn-destructive:hover {
  background: #942617 !important;
}

/* Tooltip bubbles (hover info icons on topic headers) */
.tutor-tooltip {
  background: #14151A !important;
  color: #F7F5F0 !important;
  border: 1px solid #33353F !important;
}

/* ------------------------------------------------------------
   MOBILE RESPONSIVE — Lesson/Learning Area
   ------------------------------------------------------------ */
@media (max-width: 992px) {
  .tutor-learning-sidebar {
    background: #1D1F26 !important;
  }

  .tutor-learning-header-title {
    font-size: 14px !important;
  }

  .tutor-lesson-content {
    border-radius: 10px !important;
  }
}

@media (max-width: 600px) {
  .tutor-learning-area-footer {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .tutor-mark-as-complete-button {
    width: 100% !important;
    order: -1;
  }

  .tutor-lesson-content {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
}

/* ============================================================
   MOBILE RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 992px) {
  /* Course archive: 3-col grid drops to 2-col on tablets */
  .tutor-course-list.tutor-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tutor already hides the sidebar and shows bottom nav on mobile —
     these rules just make sure spacing/sizing stays clean */
  .tutor-dashboard-page {
    padding: 16px !important;
  }

  .tutor-student-dashboard-stats .tutor-grid {
    gap: 12px !important;
  }

  .tutor-stat-card {
    padding: 14px !important;
  }

  .tutor-stat-card-value {
    font-size: 22px !important;
  }
}

/* ------------------------------------------------------------
   SUB-TAB NAV (Courses tab: Enrolled/Active/Wishlist/Quiz Attempts,
   Discussions tab: Q&A, and any other .tutor-nav-primary bar)
   ------------------------------------------------------------ */

.tutor-nav.tutor-nav-primary {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #33353F !important;
  padding-bottom: 0 !important;
}

.tutor-nav-item {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #9498A0 !important;
  background: transparent !important;
  padding: 9px 16px !important;
  border-radius: 8px 8px 0 0 !important;
  transition: all 0.15s ease !important;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.tutor-nav-item:hover {
  color: #F7F5F0 !important;
  background: #1D1F26 !important;
}

.tutor-nav-item.active {
  color: #F5C518 !important;
  background: #1D1F26 !important;
  border-bottom: 2px solid #F5C518 !important;
}

.tutor-nav-item svg,
.tutor-nav-item .tutor-icon-subdued {
  color: currentColor !important;
}

/* Dropdown popover (the "Enrolled (1)" caret menu) */
.tutor-nav-dropdown {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 10px !important;
  padding: 6px !important;
}

.tutor-nav-dropdown-item {
  color: #9498A0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease !important;
}

.tutor-nav-dropdown-item:hover {
  background: #14151A !important;
  color: #F7F5F0 !important;
}

.tutor-nav-dropdown-item.active {
  background: #F5C518 !important;
  color: #14151A !important;
}

/* Mobile responsiveness for the sub-tab nav */
@media (max-width: 768px) {
  .tutor-nav.tutor-nav-primary {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    flex-wrap: nowrap;
  }

  .tutor-nav.tutor-nav-primary::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .tutor-nav-item {
    font-size: 13px !important;
    padding: 8px 12px !important;
    flex-shrink: 0;
  }

  .tutor-nav-item svg {
    width: 16px !important;
    height: 16px !important;
  }
}

@media (max-width: 480px) {
  .tutor-nav-item {
    font-size: 12px !important;
    padding: 7px 10px !important;
    gap: 4px;
  }

  /* Hide icon text labels' extra spacing, keep icon+count compact */
  .tutor-nav-dropdown {
    min-width: 180px;
  }

  .tutor-nav-dropdown-item {
    font-size: 12px !important;
    padding: 7px 10px !important;
  }
}

@media (max-width: 600px) {
  /* Course archive: single column on phones */
  .tutor-course-list.tutor-grid-3 {
    grid-template-columns: 1fr !important;
  }

  .tutor-course-filter {
    text-align: left !important;
  }

  .tutor-course-filter .tutor-form-select {
    width: 100% !important;
  }

  /* Stack stat cards 2-per-row instead of 4-per-row on small phones */
  .tutor-student-dashboard-stats .tutor-grid.tutor-grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tutor-progress-card-inner {
    flex-direction: column !important;
  }

  .tutor-progress-card-thumbnail img {
    width: 100% !important;
    height: auto !important;
  }

  .tutor-dashboard-header-left .tutor-h5 {
    font-size: 16px !important;
  }
}
/* ================================================================
   SLICEWP — AFFILIATE ACCOUNT — COMMISSIONS TAB
   Same dark theme tokens used across the site:
     background dark:  #14151A
     card background:  #1D1F26
     border:           #33353F
     text (light):     #F7F5F0
     text (muted):     #9498A0
     accent (gold):    #F5C518
     accent (red):     #B62E1E
     heading font:     'Archivo Black', sans-serif
     body font:        'Space Grotesk', sans-serif

   Like the WooCommerce cart, SliceWP renders its tables as real
   <table>/<tr>/<td> markup, so the same "break out of table layout on
   mobile" approach is used below for both the main commissions table
   and the nested Item/Visit detail tables.
   ================================================================ */

.slicewp-tab {
  background: transparent !important;
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* --- Filter bar (date range picker + Apply button) --- */

.slicewp-list-table-filters {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.slicewp-date-picker-input {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 8px !important;
  color: #F7F5F0 !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.slicewp-date-picker-input svg {
  fill: #9498A0 !important;
  width: 18px !important;
  height: 18px !important;
}

.slicewp-date-picker-modal {
  background: #1D1F26 !important;
  border: 1px solid #33353F !important;
  border-radius: 10px !important;
  color: #F7F5F0 !important;
}

.slicewp-date-picker-predefined-date-range {
  color: #F7F5F0 !important;
}

.slicewp-date-picker-predefined-date-range:hover {
  color: #F5C518 !important;
}

.slicewp-button-primary {
  background: #F5C518 !important;
  color: #14151A !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  transition: all 0.15s ease !important;
}

.slicewp-button-primary:hover {
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

/* --- Tables (main commissions table + nested Item/Visit tables) --- */

.slicewp-list-table-wrapper {
  border: 1px solid #33353F !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #1D1F26 !important;
}

.slicewp-list-table {
  width: 100% !important;
  border-collapse: collapse !important;
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.slicewp-list-table thead th {
  color: #9498A0 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid #33353F !important;
  padding: 14px 16px !important;
  text-align: left !important;
  background: transparent !important;
}

.slicewp-list-table tbody td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #33353F !important;
  color: #F7F5F0 !important;
  font-size: 14px !important;
}

.slicewp-list-table tbody tr:last-child td {
  border-bottom: none !important;
}

.slicewp-list-table tbody tr:hover {
  background: rgba(245, 197, 24, 0.04) !important;
}

/* Nested Item / Visit detail panel (expanded "Details" row) */

.slicewp-list-table-item-details-row td {
  background: #14151A !important;
  border-bottom: 1px solid #33353F !important;
}

.slicewp-list-table-item-details-row h4 {
  color: #9498A0 !important;
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 10px !important;
}

.slicewp-list-table-item-details-row .slicewp-list-table {
  border: 1px solid #33353F !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* --- Status pills --- */

.slicewp-status-pill {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.slicewp-status-paid {
  background: rgba(76, 201, 141, 0.12) !important;
  color: #4CC98D !important;
}

.slicewp-status-pending {
  background: rgba(245, 197, 24, 0.12) !important;
  color: #F5C518 !important;
}

.slicewp-status-unpaid,
.slicewp-status-rejected {
  background: rgba(182, 46, 30, 0.12) !important;
  color: #E9573F !important;
}

/* --- Links (product name, "Details" toggle) — match theme gold
   instead of the default pink/magenta --- */

.slicewp-list-table a,
.slicewp-toggle-item-details {
  color: #F5C518 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.15s ease !important;
}

.slicewp-list-table a:hover,
.slicewp-toggle-item-details:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.slicewp-toggle-item-details svg {
  fill: currentColor !important;
  width: 16px !important;
  height: 16px !important;
}

/* --- Pagination footer --- */

.slicewp-list-table-after {
  color: #9498A0 !important;
  font-size: 13px !important;
  padding: 14px 4px !important;
}

/* ================================================================
   MOBILE RESPONSIVE
   Break every <table> out of table layout and stack rows as cards,
   labeling each cell via generated content matched to its column
   position (this markup has no data-label attributes to key off).
   ================================================================ */

@media (max-width: 782px) {

  .slicewp-list-table-filters {
    flex-wrap: wrap !important;
  }

  .slicewp-date-picker-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .slicewp-button-primary {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Main commissions table -> stacked cards */
  .slicewp-list-table-wrapper table.slicewp-list-table {
    display: block !important;
    width: 100% !important;
  }

  .slicewp-list-table-wrapper table.slicewp-list-table thead {
    display: none !important;
  }

  .slicewp-list-table-wrapper table.slicewp-list-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .slicewp-list-table-wrapper table.slicewp-list-table tbody tr:not(.slicewp-list-table-item-details-row) {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    gap: 4px 12px !important;
  }

  .slicewp-list-table-wrapper table.slicewp-list-table tbody tr:not(.slicewp-list-table-item-details-row) td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 4px 0 !important;
    border-bottom: none !important;
    font-size: 13px !important;
  }

  /* Label each cell using its column name via generated content,
     since this markup has no data-label attribute to read from */
  .slicewp-column-id::before        { content: "ID"; }
  .slicewp-column-amount::before    { content: "Amount"; }
  .slicewp-column-reference::before { content: "Reference"; }
  .slicewp-column-type::before      { content: "Type"; }
  .slicewp-column-date::before      { content: "Date"; }
  .slicewp-column-status::before    { content: "Status"; }

  .slicewp-column-id::before,
  .slicewp-column-amount::before,
  .slicewp-column-reference::before,
  .slicewp-column-type::before,
  .slicewp-column-date::before,
  .slicewp-column-status::before {
    color: #9498A0 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
  }

  .slicewp-column-actions {
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding-top: 10px !important;
    border-top: 1px solid #33353F !important;
  }

  /* Nested Item / Visit tables inside the expanded details row */
  .slicewp-list-table-item-details-row .slicewp-list-table {
    display: block !important;
    width: 100% !important;
  }

  .slicewp-list-table-item-details-row .slicewp-list-table thead {
    display: none !important;
  }

  .slicewp-list-table-item-details-row .slicewp-list-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .slicewp-list-table-item-details-row .slicewp-list-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    gap: 6px !important;
  }

  .slicewp-list-table-item-details-row .slicewp-list-table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 2px 0 !important;
    font-size: 13px !important;
    word-break: break-word !important;
  }

  .slicewp-column-item-name::before        { content: "Name"; }
  .slicewp-column-item-commission-amount::before { content: "Commission"; }
  .slicewp-column-landing_url::before      { content: "Landing URL"; }
  .slicewp-column-referrer_url::before     { content: "Referrer URL"; }

  .slicewp-column-item-name::before,
  .slicewp-column-item-commission-amount::before,
  .slicewp-column-landing_url::before,
  .slicewp-column-referrer_url::before {
    color: #9498A0 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
  }

  .slicewp-list-table-item-details-row td[style*="height"] {
    height: auto !important;
  }
}

@media (max-width: 480px) {
  .slicewp-list-table-wrapper table.slicewp-list-table tbody tr:not(.slicewp-list-table-item-details-row) td,
  .slicewp-list-table-item-details-row .slicewp-list-table tbody td {
    font-size: 12.5px !important;
  }

  .slicewp-status-pill {
    font-size: 11px !important;
    padding: 3px 10px !important;
  }
}
/* ================================================================
   TUTOR LMS — COURSE SINGLE PAGE — "Course Content" accordion
   Same dark theme tokens used across the site:
     background dark:  #14151A
     card background:  #1D1F26
     border:           #33353F
     text (light):     #F7F5F0
     text (muted):     #9498A0
     accent (gold):    #F5C518
     accent (red):     #B62E1E
     heading font:     'Archivo Black', sans-serif
     body font:        'Space Grotesk', sans-serif

   Currently the accordion header renders dark (as intended) but the
   body/list content renders on Tutor's default WHITE background,
   which is the mismatch being fixed here.
   ================================================================ */

.tutor-accordion {
  border: 1px solid #33353F !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
}

.tutor-accordion-item {
  border-bottom: 1px solid #33353F !important;
}

.tutor-accordion-item:last-child {
  border-bottom: none !important;
}

/* Safety net: force every possible border/divider inside the
   accordion to the theme's border color, in case a specific inner
   divider (not just the outer item border) is still defaulting to
   Tutor's own white/light border color */
.tutor-accordion,
.tutor-accordion *,
.tutor-accordion-item,
.tutor-accordion-item-header,
.tutor-accordion-item-body,
.tutor-accordion-item-body-content,
.tutor-course-content-list,
.tutor-course-content-list-item {
  border-color: #33353F !important;
}

/* --- Accordion header --- */

.tutor-accordion-item-header {
  background: #1D1F26 !important;
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 15px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.tutor-accordion-item-header.is-active {
  color: #F5C518 !important;
}

/* Chevron/arrow icon — Tutor renders this as an icon-font character
   via the header's ::after pseudo-element, currently plain white.
   Give it an explicit color matching the theme: muted gray when
   collapsed, gold (matching the active heading text) when expanded. */
.tutor-accordion-item-header::after {
  color: #9498A0 !important;
}

.tutor-accordion-item-header.is-active::after {
  color: #F5C518 !important;
}

.tutor-accordion-item-header::after {
  color: #F5C518 !important;
}

/* --- Accordion body / content list (was rendering on white) ---
   Boosted with real ancestor classes from the page markup
   (.tutor-tab-item, .tutor-mt-40) in case Tutor's own stylesheet sets
   a white background with higher specificity than a bare class. */

.tutor-tab-item .tutor-mt-40 .tutor-accordion-item-body,
.tutor-accordion-item-body {
  background: #14151A !important;
}

.tutor-tab-item .tutor-mt-40 .tutor-accordion-item-body-content,
.tutor-accordion-item-body-content {
  background: #14151A !important;
}

.tutor-tab-item .tutor-mt-40 ul.tutor-course-content-list,
.tutor-course-content-list {
  background: #14151A !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.tutor-tab-item .tutor-mt-40 li.tutor-course-content-list-item,
.tutor-course-content-list-item {
  background: #14151A !important;
  color: #F7F5F0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #33353F !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.tutor-course-content-list-item:last-child {
  border-bottom: none !important;
}

.tutor-course-content-list-item:hover {
  background: rgba(245, 197, 24, 0.04) !important;
}

.tutor-course-content-list-item-title {
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin: 0 !important;
}

.tutor-course-content-list-item-icon {
  color: #9498A0 !important;
}

.tutor-course-content-list-item-duration {
  color: #9498A0 !important;
}

.tutor-course-content-list-item-status {
  color: #9498A0 !important;
}

/* Unlocked/completed items, if Tutor adds these classes, should stand
   out with the gold accent rather than muted gray */
.tutor-course-content-list-item-status.tutor-icon-circle-mark-line,
.tutor-course-content-list-item-status.tutor-icon-circle-play-line {
  color: #F5C518 !important;
}

/* --- Course Content section heading above the accordion ---
   Tutor ships this heading with its own utility class
   `tutor-color-black` (visible in the actual page markup), which
   Tutor's plugin CSS almost certainly sets with !important. A plain
   `h3 { color }` rule loses that fight on specificity, so target the
   exact class Tutor put there and outrank it directly. */

.tutor-course-content-title,
h3.tutor-color-black.tutor-course-content-title,
.tutor-fs-5.tutor-fw-bold.tutor-color-black {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* Tutor's own muted/secondary utility classes likely also ship
   !important and were probably overriding the duration/lock-icon
   colors below — target them directly rather than relying on the
   plain tutor-course-content-list-item-duration/-status selectors */
.tutor-color-muted,
.tutor-color-secondary {
  color: #9498A0 !important;
}

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */

@media (max-width: 782px) {
  .tutor-accordion-item-header {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }

  .tutor-course-content-list-item {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .tutor-course-content-list-item-title {
    font-size: 13.5px !important;
  }

  .tutor-course-content-list-item > .tutor-d-flex:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .tutor-course-content-list-item-title {
    white-space: normal !important;
    word-break: break-word !important;
  }
}

@media (max-width: 480px) {
  .tutor-accordion-item-header {
    padding: 12px 14px !important;
    font-size: 13.5px !important;
  }

  .tutor-course-content-list-item {
    padding: 10px 14px !important;
  }

  .tutor-course-content-list-item-title {
    font-size: 13px !important;
  }
}
/* ================================================================
   GLOBAL FIX — .alignwide / .alignfull negative-margin overflow
   at tablet/mobile widths.

   theme.css sets `.alignwide { margin-inline: -80px; }` (and likely
   a similar rule for .alignfull) — a WordPress core block-alignment
   utility meant to let "wide" blocks bleed past normal content width
   on desktop, where extra page padding absorbs it. At tablet/mobile
   widths there isn't enough spare padding, so ANY block using these
   classes gets pulled ~80px wider than the viewport on both sides —
   symmetric clipping of text on both edges (seen on the homepage
   ticker banner, stat numbers, and testimonial cards, same signature
   as the earlier cart page bug).

   This was previously fixed only for the cart block specifically
   (.wp-block-woocommerce-cart.alignwide); this version covers every
   .alignwide/.alignfull block sitewide.
   ================================================================ */

@media (max-width: 1024px) {
  .alignwide,
  .alignfull {
    margin-inline: 0 !important;
  }
}

/* Safety net: nothing on this site should be able to force a
   horizontal scrollbar/shift at these widths */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden !important;
  }
}
/* ================================================================
   TUTOR LMS — "Start Learning" button (course sidebar CTA)
   Currently renders in Tutor's default blue via its own CSS variable
   (--tutor-color-primary), which is what .tutor-btn-primary reads
   from. Override it to match the site's gold accent used everywhere
   else (cart checkout, SliceWP Apply button, etc.)
   ================================================================ */

.tutor-btn-primary {
  background-color: #F5C518 !important;
  border-color: #F5C518 !important;
  color: #14151A !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 0 #B62E1E !important;
  transition: all 0.15s ease !important;
}

.tutor-btn-primary:hover,
.tutor-btn-primary:focus {
  background-color: #F5C518 !important;
  border-color: #F5C518 !important;
  color: #14151A !important;
  box-shadow: 0 8px 0 #B62E1E !important;
  transform: translateY(-2px);
}

/* Covers any other primary Tutor buttons sitewide (enroll, submit,
   continue lesson, etc.) that read the same CSS variable */
:root {
  --tutor-color-primary: #F5C518 !important;
}
/* ================================================================
   TUTOR LMS — COURSE SINGLE PAGE — "Course Content" accordion
   Same dark theme tokens used across the site:
     background dark:  #14151A
     card background:  #1D1F26
     border:           #33353F
     text (light):     #F7F5F0
     text (muted):     #9498A0
     accent (gold):    #F5C518
     accent (red):     #B62E1E
     heading font:     'Archivo Black', sans-serif
     body font:        'Space Grotesk', sans-serif

   Currently the accordion header renders dark (as intended) but the
   body/list content renders on Tutor's default WHITE background,
   which is the mismatch being fixed here.
   ================================================================ */

.tutor-accordion {
  border: 1px solid #33353F !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
}

.tutor-accordion-item {
  border-bottom: 1px solid #33353F !important;
}

.tutor-accordion-item:last-child {
  border-bottom: none !important;
}

/* Safety net: force every possible border/divider inside the
   accordion to the theme's border color, in case a specific inner
   divider (not just the outer item border) is still defaulting to
   Tutor's own white/light border color */
.tutor-accordion,
.tutor-accordion *,
.tutor-accordion-item,
.tutor-accordion-item-header,
.tutor-accordion-item-body,
.tutor-accordion-item-body-content,
.tutor-course-content-list,
.tutor-course-content-list-item {
  border-color: #33353F !important;
}

/* --- Accordion header --- */

.tutor-accordion-item-header {
  background: #1D1F26 !important;
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 15px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.tutor-accordion-item-header.is-active {
  color: #F5C518 !important;
}

/* Chevron/arrow icon — Tutor renders this as an icon-font character
   via the header's ::after pseudo-element, currently plain white.
   Give it an explicit color matching the theme: muted gray when
   collapsed, gold (matching the active heading text) when expanded. */
.tutor-accordion-item-header::after {
  color: #9498A0 !important;
}

.tutor-accordion-item-header.is-active::after {
  color: #F5C518 !important;
}

.tutor-accordion-item-header::after {
  color: #F5C518 !important;
}

/* --- Accordion body / content list (was rendering on white) ---
   Boosted with real ancestor classes from the page markup
   (.tutor-tab-item, .tutor-mt-40) in case Tutor's own stylesheet sets
   a white background with higher specificity than a bare class. */

.tutor-tab-item .tutor-mt-40 .tutor-accordion-item-body,
.tutor-accordion-item-body {
  background: #14151A !important;
}

.tutor-tab-item .tutor-mt-40 .tutor-accordion-item-body-content,
.tutor-accordion-item-body-content {
  background: #14151A !important;
}

.tutor-tab-item .tutor-mt-40 ul.tutor-course-content-list,
.tutor-course-content-list {
  background: #14151A !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.tutor-tab-item .tutor-mt-40 li.tutor-course-content-list-item,
.tutor-course-content-list-item {
  background: #14151A !important;
  color: #F7F5F0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #33353F !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.tutor-course-content-list-item:last-child {
  border-bottom: none !important;
}

.tutor-course-content-list-item:hover {
  background: rgba(245, 197, 24, 0.04) !important;
}

.tutor-course-content-list-item-title {
  color: #F7F5F0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin: 0 !important;
}

.tutor-course-content-list-item-icon {
  color: #9498A0 !important;
}

.tutor-course-content-list-item-duration {
  color: #9498A0 !important;
}

.tutor-course-content-list-item-status {
  color: #9498A0 !important;
}

/* Unlocked/completed items, if Tutor adds these classes, should stand
   out with the gold accent rather than muted gray */
.tutor-course-content-list-item-status.tutor-icon-circle-mark-line,
.tutor-course-content-list-item-status.tutor-icon-circle-play-line {
  color: #F5C518 !important;
}

/* --- Course Content section heading above the accordion ---
   Tutor ships this heading with its own utility class
   `tutor-color-black` (visible in the actual page markup), which
   Tutor's plugin CSS almost certainly sets with !important. A plain
   `h3 { color }` rule loses that fight on specificity, so target the
   exact class Tutor put there and outrank it directly. */

.tutor-course-content-title,
h3.tutor-color-black.tutor-course-content-title,
.tutor-fs-5.tutor-fw-bold.tutor-color-black {
  color: #F7F5F0 !important;
  font-family: 'Archivo Black', sans-serif !important;
}

/* Tutor's own muted/secondary utility classes likely also ship
   !important and were probably overriding the duration/lock-icon
   colors below — target them directly rather than relying on the
   plain tutor-course-content-list-item-duration/-status selectors */
.tutor-color-muted,
.tutor-color-secondary {
  color: #9498A0 !important;
}

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */

@media (max-width: 782px) {
  .tutor-accordion-item-header {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }

  .tutor-course-content-list-item {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .tutor-course-content-list-item-title {
    font-size: 13.5px !important;
  }

  .tutor-course-content-list-item > .tutor-d-flex:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .tutor-course-content-list-item-title {
    white-space: normal !important;
    word-break: break-word !important;
  }
}

@media (max-width: 480px) {
  .tutor-accordion-item-header {
    padding: 12px 14px !important;
    font-size: 13.5px !important;
  }

  .tutor-course-content-list-item {
    padding: 10px 14px !important;
  }

  .tutor-course-content-list-item-title {
    font-size: 13px !important;
  }
}