/* Global Background and Text */
body, html {
  background-color: #000000 !important;
  color: #f0f0f0 !important;
}

/* All main containers */
section, .course-card, .course-description, .main-content, .card-wrapper {
  background-color: #000000 !important;
}

/* Course Card Styling */
.course-card {
  border-radius: 12px;
  overflow: hidden;
  background-color: #000000;
  border: 1px solid #333;
  text-align: center;
}

/* Force the images to be square */
.course-card img {
  width: 100%;
  height: 0;
  padding-top: 100%; /* This makes it square */
  object-fit: cover;
  display: block;
}

/* Course Titles */
.course-card h3 {
  color: #FFFF00 !important;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 10px;
}

/* Course Description */
.course-card p {
  font-size: 0.9rem;
  margin: 10px;
  color: #f0f0f0;
}

/* Button Styling */
a.tw-btn-primary {
  background-color: #FFFF00 !important;
  color: #000000 !important;
  border: none !important;
  font-weight: bold !important;
  text-transform: uppercase;
  padding: 10px 20px;
  margin-top: 10px;
}

a.tw-btn-primary:hover {
  background-color: #e0e000 !important;
}

/* Hover Effect for Cards */
.course-card:hover {
  border-color: #FFFF00;
  box-shadow: 0 0 10px #FFFF0033;
}

/* Sidebar links */
.sidebar ul.tw-menu a {
  color: #f0f0f0 !important;
}

.sidebar ul.tw-menu a.tw-active {
  background-color: #252525 !important;
  color: #FFFF00 !important;
  border-left: 3px solid #FFFF00 !important;
}

.sidebar ul.tw-menu a:hover {
  background-color: #1a1a1a !important;
}

/* Progress Bar */
.sidebar progress.tw-progress {
  accent-color: #FFFF00;
}

.sidebar progress.tw-progress::-webkit-progress-value {
  background-color: #FFFF00;
}

.sidebar progress.tw-progress::-moz-progress-bar {
  background-color: #FFFF00;
}

.sidebar progress.tw-progress::-webkit-progress-bar {
  background-color: #333;
}

/* "Back to my courses" link */
a#back-to-courses {
  color: #f0f0f0 !important;
}

a#back-to-courses:hover {
  color: #FFFF00 !important;
}

.tw-card figure img {
   height: auto;
}

.lesson-content {
    display: flex;
    flex-direction: column;
}

.lesson-content > div {
   order: 10;
}

@media (min-width: 1024px) {
    .lesson-content > div.tw-items-center {
         height: 0;
    }
}

.lesson-content > h1,
.lesson-content > h1 + .video-container,
.lesson-content > div.tw-items-center,
.lesson-content > div:has(#next) {
   order: 1;
}

main {
  background-color: #000000;
  color: #f0f0f0;
  --color-background: 0, 0, 0;
   --bc: 0 100% 100%;
}

.courses .private.not-enrolled {
   order: 10;
}

main svg {
   max-width: none;
}

.categories-filter {
   display: none !important;
}

[lang="en"] [data-category]:not([data-category="en"]),
[lang="ar"] [data-category]:not([data-category="ar"]) {
   order: 10;
}

select > option {
  background-color: #000;
  color: #f0f0f0;
}