/**
 * Single Course Page Styles
 * 
 * This file contains all CSS styles specific to the single course page
 * including banner, sidebar, content, floating bar, and related components.
 */

/* ============================================
   Single Course Banner
   ============================================ */

.cs-single-course-banner {
  background: linear-gradient(
    90deg,
    rgba(16, 33, 125, 0.7) 38.22%,
    rgba(22, 194, 213, 0.7) 100%
  );
}

/* ============================================
   Single Course Sidebar
   ============================================ */

.cs-sidebar-nav-active {
  display: flex;
  width: 11.5rem;
  height: 2.2rem;
  justify-content: center;
  align-items: center;
  gap: var(--Spacing-2, 0.25rem);
  border-radius: var(--Spacing-5, 24px);
  border: var(--Spacing-0, 1px) solid var(--Primary-400, #3f4d97);
  background: var(--Primary-Smooth, #f6f6fa);
}

.cs-single-group-btn {
  & .the_course_button {
    & .course_button.button {
      color: white;
      margin: 0;
      padding: 0 !important;
    }
    & a {
      display: flex;
      height: 3.125rem;
      justify-content: center;
      align-items: center;
      gap: var(--Spacing-3, 0.5rem);
      border-radius: var(--Spacing-5, 24px);
      background: var(--Primary-400, #3f4d97);
      color: white;
      font-size: 1rem;
      margin: 0;
      padding: 1.7rem 0 !important;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      &:hover {
        background: #0f217d;
        color: white !important ;

        /* change stroke color of path */

        & path {
          stroke: var(--White, #fff);
        }
      }
    }
  }
  & .button.paid_course {
    background: none;
    padding: 0;
  }

  & .extra_details {
    color: #000;
  }
}

input#send_gift_form {
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
}

#cs-single-course-sidebar,
.cs-bundle-courses-sidebar {
  & input[type="number"]::-webkit-outer-spin-button,
  & input[type="number"]::-webkit-inner-spin-button,
  & input[type="number"] {
    -webkit-appearance: none;
    margin: 0;
  }
}

.cs-single-course-info {
  & .course_details {
    & ul {
      & li {
        &:not(.gift_this_course) {
          display: none;
        }
      }
    }
  }
  & .course_sharing {
    display: none;
  }
  & .gift_course_button {
    display: flex;
    width: 100%;
    height: 3.125rem;
    justify-content: center;
    border: 0.0729px solid #0f217d;
    color: white !important;
    align-items: center;
    margin-bottom: 20px;
    gap: var(--Spacing-3, 0.5rem);
    border-radius: 32px;
    background: var(--Primary-400, #3f4d97);
    margin-top: 0.5rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    &:hover {
      background: #0f217d;
      color: var(--White, #fff) !important;
    }
  }
}

/* ============================================
   Bundle Course Sidebar
   ============================================ */

.cs-bundle-course-info {
  & .course_details {
    & ul {
      & li {
        &:not(.gift_this_course) {
          display: none;
        }
      }
    }
  }

  & .gift_course_button {
    display: flex;
    width: 100%;
    height: 3.125rem;
    justify-content: center;
    align-items: center;
    gap: var(--Spacing-3, 0.5rem);
    border-radius: var(--Spacing-6, 32px);
    background: var(--Secondary-100, #b7ecf2);
    margin-top: 0.5rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    color: #0c6b75 !important;
    font-weight: 600;
    &:hover {
      background: var(--Secondary-600, #14b1c2);
      color: var(--White, #fff) !important;
    }
  }
}

#cs-sidebar-new-gift-course,
.sidebar-new-gift-course {
  & input[type="number"]::-webkit-outer-spin-button,
  & input[type="number"]::-webkit-inner-spin-button,
  & input[type="number"] {
    -webkit-appearance: none;
    margin: 0;
  }
}

.sidebar-new-gift-course {
  & .course_details {
    & ul {
      & li {
        &:not(.gift_this_course) {
          display: none;
        }
      }
    }
  }
  & .course_sharing {
    display: none;
  }
  & .gift_course_button {
    display: flex;
    width: 100%;
    height: 3.125rem;
    justify-content: center;
    border: 0.0729px solid #0f217d;
    color: white !important;
    align-items: center;
    margin-bottom: 20px;
    gap: var(--Spacing-3, 0.5rem);
    border-radius: 32px;
    background: var(--Primary-400, #3f4d97);
    margin-top: 0.5rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    &:hover {
      background: #0f217d;
      color: var(--White, #fff) !important;
    }
  }
}

/* Animation for bundle sidebar fade in */
#cs-bundle-sidebar.tw-fixed {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================
   Single Course Description Content
   ============================================ */

.cs-course-sneak-peak .vibe_editor_media {
  width: 10rem;
  height: auto;
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
}

.cs-des-article-content p {
  font-size: 1.125rem;
}

.cs-des-article-content ul {
  list-style: disc;
  list-style-position: outside;
  margin-left: 1.125rem;
}

.cs-singleCourse-content {
  max-height: 365px;
  transition: max-height 0.5s ease;
  overflow: hidden;
  position: relative;
}

.cs-singleCourse-content a {
  color: #16c2d5 !important;
  font-weight: bold !important;
}

.cs-singleCourse-content a:hover {
  color: #14b1c2 !important;
}

.cs-singleCourse-content.cs-show-content {
  max-height: fit-content;
}

.cs-content-gradient::before {
  content: "";
  height: 120px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 70%
  );
  transition: height 0.25s ease;
}

.cs-singleCourse-content.cs-show-content.cs-content-gradient::before {
  height: 0;
}

.cs-show-content {
  display: inline;
  margin-top: 16px;
}

.cs-price-line-style::before {
  position: absolute;
  content: "";
  opacity: 1;
  left: 0;
  top: 50%;
  right: 0;
  border-top: 2px solid;
  border-color: #2e4450;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

/* ============================================
   Single Course Bio Section
   ============================================ */

.cs-show-more-bio h2:hover {
  color: #16c2d5 !important;
}

.cs-show-more-bio:hover svg path {
  stroke: #16c2d5 !important;
  color: #16c2d5 !important;
}

/* ============================================
   Single Course Review Scroll
   ============================================ */

.cs-review-scroll {
  overflow-y: auto;
  clip-path: inset(-3px round 1rem);
}

/* ============================================
   Single Course Bottom Floating Bar
   ============================================ */

.cs-btn-puchased a {
  background: var(--Secondary-100, #b7ecf2) !important;
  color: var(--Primary-500, #0f217d) !important;
  border-radius: 0.25rem !important;
  font-size: 14px !important;
}

#cs-single-btn-purchase a {
  color: var(--Primary-500, #0f217d) !important;
  height: 3rem !important;
  font-size: 16px !important;
  border-radius: var(--Spacing-6, 32px) !important;
  background: var(--Secondary-100, #b7ecf2) !important;
  width: 100% !important;
  cursor: pointer;
}

#cs-single-btn-purchase .course_button.full.button.paid_course {
  background-color: #b7ecf2;
  border-radius: 32px;
}


/* ============================================
   Single Course Typography & Content
   ============================================ */

.single-course #course-questions h2 {
  font-size: 28px !important;
}

.single-course .related-courses h2 {
  font-size: 28px !important;
}

.single-course .certificate-section h2 {
  font-size: 28px !important;
}

.cs-common-accordion-content ol,
.cs-common-accordion-content ul {
  list-style: auto !important;
}

.cs-common-accordion-content div {
  font-size: 18px !important;
}

.cs-common-accordion-content p {
  font-size: 18px;
  margin: 15px 0px;
}

.cs-common-accordion-content ol {
  list-style: auto;
  margin-left: 15px;
}

/* ============================================
   Single Course Utilities
   ============================================ */

/* Hiding single course page taxonomy */
.single-texonomy {
  display: none !important;
}

/* Reviews icon */
#cs-reviews-icon svg {
  width: 14px !important;
  height: 14px !important;
}

/* Custom header sticky */
.custom-header-css {
  position: sticky;
  top: 0;
  z-index: 52;
}

/* ============================================
   Responsive Styles for Single Course Sidebar
   ============================================ */

/* For large devices */
@media (min-width: 1538px) {
  #cs-single-course-sidebar {
    right: 10% !important;
  }
}

/* For medium devices */
@media (min-width: 1024px) and (max-width: 1439px) {
  #cs-single-course-sidebar {
    right: 1% !important;
  }
}