/*
 * JVFA course detail premium preview v7
 * This file is deliberately scoped to the preview document.
 */

html.course-detail-premium {
  --course-ink: #251829;
  --course-copy: #6f6875;
  --course-pink: #e62487;
  --course-pink-dark: #c91770;
  --course-purple: #7614bd;
  --course-purple-bright: #a100e4;
  --course-purple-dark: #4d0b83;
  --course-lilac: #f5ecff;
  --course-line: #eadfec;
  --course-soft: #fffafe;
  --course-green: #18ad5a;
  --course-shadow: 0 18px 44px rgba(59, 25, 70, 0.10);
  --course-content: min(94vw, 1540px);
  --course-narrow: min(90vw, 1280px);
  scroll-padding-top: 90px;
}

html.course-detail-premium,
html.course-detail-premium body {
  overflow-x: hidden;
  background: #fff !important;
}

html.course-detail-premium body {
  padding-bottom: 96px !important;
  color: var(--course-ink);
}

html.course-detail-premium body > .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.course-detail-premium *,
html.course-detail-premium *::before,
html.course-detail-premium *::after {
  box-sizing: border-box;
}

.jvfa-premium-course {
  width: 100%;
  margin: 0;
  padding: 22px 0 80px;
  background: #fff;
  color: var(--course-ink);
  font-family: Inter, Avenir, "Segoe UI", sans-serif;
}

.jvfa-premium-course .row {
  --bs-gutter-x: 0;
}

/* Hero: one page surface, without an isolated outer card. */
.jvfa-premium-course .premium-course-hero {
  display: grid !important;
  grid-template-columns: minmax(360px, 0.84fr) minmax(560px, 1.16fr);
  gap: clamp(42px, 5vw, 92px);
  align-items: start;
  width: var(--course-content) !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: clamp(18px, 2.5vw, 42px) clamp(10px, 2vw, 32px) 38px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.jvfa-premium-course .premium-course-media,
.jvfa-premium-course .premium-course-summary {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}

.jvfa-premium-course .premium-course-media {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.jvfa-premium-course .image-slider {
  width: min(100%, 470px) !important;
  margin: 0 auto !important;
  padding: 0 0 22px;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.jvfa-premium-course .slick-carousel,
.jvfa-premium-course .slick-list {
  width: 100% !important;
  min-width: 0;
}

.jvfa-premium-course .slick-track {
  display: flex !important;
  align-items: stretch;
}

.jvfa-premium-course .slick-list {
  border-radius: 24px;
  background: #faf7fb;
  box-shadow: var(--course-shadow);
  box-shadow: none !important;
}

.jvfa-premium-course .slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #faf7fb;
}

.jvfa-premium-course .slide .myImg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center;
  border: 0 !important;
  border-radius: 20px !important;
}

.jvfa-premium-course .slick-prev,
.jvfa-premium-course .slick-next {
  position: absolute !important;
  top: 50% !important;
  z-index: 4;
  display: grid !important;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--course-pink) !important;
  box-shadow: 0 10px 24px rgba(230, 36, 135, 0.28);
  transform: translateY(-50%) !important;
}

.jvfa-premium-course .slick-prev { left: -22px !important; }
.jvfa-premium-course .slick-next { right: -22px !important; }
.jvfa-premium-course .slick-prev::before,
.jvfa-premium-course .slick-next::before { display: none !important; }
.jvfa-premium-course .slick-prev svg,
.jvfa-premium-course .slick-next svg { width: 22px; height: 22px; }
.jvfa-premium-course .slick-prev svg path,
.jvfa-premium-course .slick-next svg path { stroke: #fff !important; }

.jvfa-premium-course .slick-dots {
  position: static !important;
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 0 6px !important;
  list-style: none;
  overflow: hidden;
}

.jvfa-premium-course .slick-dots li {
  flex: 0 0 auto;
  width: 9px !important;
  height: 9px !important;
  margin: 1px !important;
}

.jvfa-premium-course .slick-dots button {
  width: 9px !important;
  height: 9px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #ddd9df !important;
  font-size: 0 !important;
}

.jvfa-premium-course .slick-dots button::before { display: none !important; }
.jvfa-premium-course .slick-dots .slick-active button {
  background: var(--course-pink) !important;
  transform: scale(1.25);
}

.jvfa-premium-course .slide-indicator { display: none !important; }

/* Course summary */
.jvfa-premium-course .premium-course-summary {
  padding-top: clamp(4px, 1vw, 18px) !important;
}

.jvfa-premium-course .premium-course-eyebrow,
.jvfa-premium-course .premium-section-heading > div:first-child > p {
  margin: 0 0 10px;
  color: var(--course-pink-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  /* text-transform: uppercase; */
}

.jvfa-premium-course .course-title,
.jvfa-premium-course .premium-section-heading h2,
.jvfa-premium-course #myAccordion > .faq {
  color: var(--course-ink) !important;
  font-family: Inter, Avenir, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  text-align: left;
}

.jvfa-premium-course .course-title {
  max-width: 820px;
  margin: 0 0 18px !important;
  padding: 0 !important;
  font-size: clamp(1.5rem, 2.0vw, 3.0rem) !important;
  line-height: 1.27 !important;
  text-align: left !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.jvfa-premium-course .premium-course-description {
  max-width: 780px;
  margin: 0 0 24px !important;
  color: var(--course-copy) !important;
  font-size: clamp(1rem, 1.15vw, 1.2rem) !important;
  line-height: 1.65 !important;
  text-align: left !important;
}

.jvfa-premium-course .premium-course-facts {
  width: 100%;
  margin: 0 !important;
  padding: 20px !important;
  border: 1px solid var(--course-line);
  border-radius: 22px;
  background: #fff;
}

.jvfa-premium-course .premium-course-facts .segment {
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--course-line);
}

.jvfa-premium-course .premium-course-facts .line1 {
  padding: 0 !important;
  text-align: left !important;
}

.jvfa-premium-course .CrsAttr {
  color: var(--course-ink) !important;
  font-size: 0.78rem !important;
  font-style: normal;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  /* text-transform: uppercase; */
}

.jvfa-premium-course .tutorName {
  margin-left: 2px;
  color: var(--course-purple) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.jvfa-premium-course .premium-course-facts-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.jvfa-premium-course .premium-course-facts-grid > .col-6 {
  display: flex !important;
  width: 100% !important;
  min-height: 72px;
  margin: 0 !important;
  padding: 14px 16px !important;
  border-radius: 16px;
  background: #fff0f7;
}

.jvfa-premium-course .premium-course-facts-grid > .col-6:nth-of-type(2),
.jvfa-premium-course .premium-course-facts-grid > .col-6:nth-of-type(4) { background: #f0e7fb; }
.jvfa-premium-course .premium-course-facts-grid > .col-6:nth-of-type(3) { background: #e9f5fc; }
.jvfa-premium-course .premium-course-facts-grid > .col-6:nth-of-type(5) { background: #fff3d9; }
.jvfa-premium-course .premium-course-facts-grid > .col-6:nth-of-type(6) { background: #e5f7ed; }

.jvfa-premium-course .premium-course-facts-grid .smImg {
  flex: 0 0 auto;
  width: 28px !important;
  height: 28px !important;
  margin: 0 12px 0 0 !important;
  object-fit: contain;
}

.jvfa-premium-course .premium-course-facts-grid .course_diff {
  color: #000000 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.jvfa-premium-course .premium-course-content {
  width: 100%;
  margin: 12px 0 0 !important;
  padding: 14px 18px !important;
  border: 1px solid #ddc9f3;
  border-radius: 18px;
  background: linear-gradient(110deg, #f5edff, #e8f7ff);
}

.jvfa-premium-course .premium-course-content .keyFeatures {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}

.jvfa-premium-course .premium-course-content .CrsAttr {
  color: var(--course-purple-dark) !important;
}

.jvfa-premium-course .premium-course-content .CMediaHighlights {
  color: var(--course-purple) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
}

.jvfa-premium-course .premium-course-content .subtext {
  color: #595060 !important;
  font-size: 0.78rem !important;
}

.jvfa-premium-course .premium-course-kit {
  margin: 14px 0 0 !important;
  text-align: left !important;
}

.jvfa-premium-course .premium-course-kit .btn {
  padding: 10px 16px !important;
  border: 1px solid #b6e7c9 !important;
  border-radius: 999px !important;
  background: #edfbf2 !important;
  color: #106d3c !important;
  font-size: 0.86rem !important;
  font-weight: 750 !important;
  box-shadow: none !important;
  margin-top: 0rem !important;
}

/* Payment strip inherits its content, but not its legacy geometry. */
.jvfa-premium-course .premium-course-summary > div[class*="payment"],
.jvfa-premium-course .premium-course-summary > section[class*="payment"] {
  width: 100% !important;
  max-width: none !important;
  margin: 12px 0 0 !important;
}

/* Fixed course actions: outside the scrolling main in the template. */
html.course-detail-premium .premium-course-actions {
  position: fixed !important;
  z-index: 1085 !important;
  right: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  display: block !important;
  width: min(720px, calc(100vw - 32px)) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(77, 11, 131, 0.14) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 18px 46px rgba(48, 18, 59, 0.24) !important;
  backdrop-filter: blur(14px);
}

html.course-detail-premium .premium-course-actions .submitFrame {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.course-detail-premium .premium-course-actions .submitFrame > div {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.course-detail-premium .premium-course-actions .btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 48px;
  margin: 0 !important;
  padding: 10px 15px !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: #fff !important;
  font-size: 0.9rem !important;
  font-weight: 750 !important;
  line-height: 1.15;
  text-align: center;
  text-decoration: none !important;
  white-space: normal;
}

html.course-detail-premium .premium-course-actions .comboBtn {
  background: linear-gradient(135deg, #5d13a4, #8b16cf) !important;
  box-shadow: 0 9px 20px rgba(104, 24, 170, 0.22) !important;
}

html.course-detail-premium .premium-course-actions .enrolBtn {
  background: linear-gradient(135deg, #f02a8f, #d91776) !important;
  box-shadow: 0 9px 20px rgba(230, 36, 135, 0.24) !important;
}

.jvfa-premium-course .whatsapp-overlay {
  position: fixed !important;
  z-index: 1075 !important;
  right: 18px !important;
  bottom: 96px !important;
  left: auto !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  background: none !important;
}

.jvfa-premium-course .whatsapp-overlay a {
  display: grid !important;
  place-items: center;
  width: 54px !important;
  height: 54px !important;
  border: 3px solid #fff;
  border-radius: 50%;
  background-color: transparent !important;
  background-image: url("https://assets.jvfacademy.in/static/img/RSZ/WebAssets/WhatsApp.svg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(18, 142, 73, 0.30);
  text-decoration: none;
}

.jvfa-premium-course .whatsapp-overlay span { display: none !important; }

/* Learning path */
.jvfa-premium-course .premium-learning-path {
  width: var(--course-narrow) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 22px 0 34px !important;
  border-top: 1px solid #f0e8f1;
}

.jvfa-premium-course .premium-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin: 0 0 24px;
}

.jvfa-premium-course .premium-section-heading h2 {
  margin: 0 !important;
  font-size: clamp(2.8rem, 4.7vw, 4.8rem) !important;
  line-height: 0.95 !important;
}

.jvfa-premium-course .premium-section-heading h2.premium-learning-title{
  font-size: clamp(1.35rem, 2vw, 2.25rem) !important;
}

/* Course curriculum language switcher */
.jvfa-premium-course .premium-learning-languages {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
}

.jvfa-premium-course .premium-language-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 112px;
  min-height: 44px;
  padding: 9px 22px;

  border: 2px solid rgba(37, 27, 41, 0.28);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.72);
  color: #251b29;

  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none !important;

  box-sizing: border-box;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

/* Inactive option interaction */
.jvfa-premium-course .premium-language-option:hover {
  border-color: rgba(224, 32, 130, 0.58);
  background: #fff;
  color: var(--course-pink-dark);
}

.jvfa-premium-course .premium-language-option:focus-visible {
  border-color: var(--course-pink);
  outline: 3px solid rgba(224, 32, 130, 0.18);
  outline-offset: 3px;
}

/* Selected language */
.jvfa-premium-course .premium-language-option.is-active,
.jvfa-premium-course
  .premium-language-option[aria-pressed="true"] {
  border-color: #171417;
  background: #171417;
  color: #fff;
  box-shadow: 0 7px 18px rgba(23, 20, 23, 0.16);
}

/* Prevent hover from changing the active option */
.jvfa-premium-course .premium-language-option.is-active:hover,
.jvfa-premium-course
  .premium-language-option[aria-pressed="true"]:hover {
  border-color: #171417;
  background: #171417;
  color: #fff;
  transform: none;
}

.jvfa-premium-course .premium-learning-path > .row.topics,
.jvfa-premium-course #accordionExample {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Every expanded layer occupies the same full content width as its parent. */
.jvfa-premium-course #accordionExample,
.jvfa-premium-course #accordionExample > .card,
.jvfa-premium-course #accordionExample > .card > .collapse,
.jvfa-premium-course #accordionExample > .card > .collapsing,
.jvfa-premium-course #accordionExample .card-body,
.jvfa-premium-course #accordionExample .card-body > h2,
.jvfa-premium-course #accordionExample .card-body > h2 > .collapse,
.jvfa-premium-course #accordionExample .card-body > h2 > .collapsing,
.jvfa-premium-course #accordionExample .media-files,
.jvfa-premium-course #accordionExample .media-files-notopics,
.jvfa-premium-course #accordionExample .media-file,
.jvfa-premium-course #accordionExample .row.topics {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.jvfa-premium-course #accordionExample > .card {
  margin: 0 0 12px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 15px !important;
  background: transparent !important;
  box-shadow: 0 7px 0 #f2edf4 !important;
}

.jvfa-premium-course #accordionExample .card-header {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.jvfa-premium-course #accordionExample h2 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.jvfa-premium-course #accordionExample .btn-link {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.jvfa-premium-course #accordionExample .btn-topics {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  min-height: 64px;
  margin: 0 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: linear-gradient(105deg, #6411aa, #a000e2) !important;
  color: #fff !important;
  font-size: 0.98rem !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

/* =========================================================
   FINAL PREMIUM DEMO BADGE
   Clean luxury treatment — no ribbon tails or fake folds
   ========================================================= */

.jvfa-premium-course #accordionExample .btn-topics .newTag {
  --demo-bg-start: #692660;
  --demo-bg-end: #35102f;
  --demo-border: #cba954;
  --demo-text: #f8e2a2;

  position: relative !important;
  inset: auto !important;
  z-index: 1;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  justify-self: start;

  min-width: 72px;
  min-height: 30px;
  padding: 5px 13px !important;

  border: 1px solid var(--demo-border) !important;
  border-radius: 7px !important;

  background:
    linear-gradient(
      135deg,
      var(--demo-bg-start),
      var(--demo-bg-end)
    ) !important;

  color: var(--demo-text) !important;

  box-shadow:
    0 5px 12px rgba(42, 12, 48, 0.2),
    inset 0 1px 0 rgba(255, 241, 190, 0.22) !important;

  font-size: 0.66rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;

  transform: rotate(-3deg);
  transform-origin: center;
  overflow: hidden !important;
}

/* Fine metallic highlight */
.jvfa-premium-course #accordionExample .btn-topics .newTag::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 10px;
  right: 10px;

  height: 1px;
  border-radius: 999px;
  background: rgba(255, 241, 190, 0.55);
  pointer-events: none;
}

/* Completely remove every earlier ribbon tail */
.jvfa-premium-course #accordionExample .btn-topics .newTag::before {
  content: none !important;
  display: none !important;
}

/* Champagne badge on the main purple accordion */
.jvfa-premium-course
  #accordionExample
  .btn-topics:has(.premium-topic-title)
  .newTag {
  --demo-bg-start: #fff2bd;
  --demo-bg-end: #dbb657;
  --demo-border: #f4d77a;
  --demo-text: #46143f;

  box-shadow:
    0 6px 15px rgba(60, 22, 74, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* Plum badge on the pale nested accordions */
.jvfa-premium-course
  #accordionExample
  .btn-topics:not(:has(.premium-topic-title))
  .newTag {
  --demo-bg-start: #692660;
  --demo-bg-end: #35102f;
  --demo-border: #cba954;
  --demo-text: #f8e2a2;
}

@media (max-width: 767.98px) {
  .jvfa-premium-course #accordionExample .btn-topics .newTag {
    min-width: 65px;
    min-height: 24px;
    padding: 5px 10px !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.1em !important;
    transform: rotate(-3deg);
  }
  .jvfa-premium-course .premium-learning-languages {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 0;
  }

  .jvfa-premium-course .premium-language-option {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.82rem;
  }
}

.jvfa-premium-course #accordionExample .premium-topic-title {
  grid-column: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.jvfa-premium-course #accordionExample .btn-topics > img.premium-topic-thumb,
.jvfa-premium-course #accordionExample .btn-topics > img.tn {
  display: block !important;
  box-sizing: border-box !important;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  grid-column: 2;
  align-self: center;
  justify-self: end;
  min-width: 48px !important;
  width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  /* border: 2px solid rgba(255,255,255,.96) !important; */
  border-radius: 11px !important;
  background: #f2eaf6;
  object-fit: cover;
  transform: none !important;
  box-shadow: 0 5px 12px rgba(42, 9, 68, 0.22);
}

.jvfa-premium-course #accordionExample .btn-topics > img.premium-topic-thumb.is-missing,
.jvfa-premium-course #accordionExample .btn-topics > img.tn.is-bg-missing {
  display: none !important;
}

.jvfa-premium-course #accordionExample .premium-topic-toggle,
.jvfa-premium-course #accordionExample .btn-topics > .fa {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  grid-column: 3;
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  margin: 0 !important;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  transition: transform .22s ease;
}

.jvfa-premium-course #accordionExample .premium-topic-toggle > .fa {
  margin: 0 !important;
  color: inherit;
  line-height: 1;
}

.jvfa-premium-course #accordionExample button[aria-expanded="false"] .premium-topic-toggle,
.jvfa-premium-course #accordionExample button[aria-expanded="false"] .btn-topics > .fa {
  transform: rotate(180deg);
}

.jvfa-premium-course #accordionExample > .card > .collapse > .card-body,
.jvfa-premium-course #accordionExample > .card > .collapsing > .card-body {
  display: block !important;
  margin-top: 8px !important;
  padding: 14px !important;
  border: 1px solid #eadff1 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #fcf8ff, #fff) !important;
}

/* Nested topic accordions remain full width and visually subordinate. */
.jvfa-premium-course #accordionExample .card-body > h2 {
  margin: 0 0 10px !important;
  overflow: hidden;
  border: 1px solid #eadcf4;
  border-radius: 14px;
  background: #fff;
}

.jvfa-premium-course #accordionExample .card-body > h2 > .btn-link .btn-topics {
  min-height: 56px;
  padding: 10px 14px !important;
  background: linear-gradient(105deg, #f5eaff, #eadcff) !important;
  color: var(--course-purple-dark) !important;
  font-size: 0.9rem !important;
}

.jvfa-premium-course #accordionExample .card-body > h2 > .btn-link .btn-topics > .fa {
  background: #dcc0f4;
  color: var(--course-purple-dark);
}

.jvfa-premium-course #accordionExample .card-body > h2 > .collapse,
.jvfa-premium-course #accordionExample .card-body > h2 > .collapsing {
  padding: 0 !important;
  border-top: 1px solid #efe5f3;
  background: #fff;
}

@media (min-width: 62.01em) {
  .jvfa-premium-course #accordionExample .card-body > h2 > .collapse.show {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px !important;
  }

  .jvfa-premium-course #accordionExample .card-body > h2 > .collapse.show > .media-files,
  .jvfa-premium-course #accordionExample .card-body > h2 > .collapse.show > .media-files-notopics {
    height: 100%;
    padding: 0 !important;
  }

  .jvfa-premium-course #accordionExample .card-body > h2 > .collapse.show > .media-files:only-child,
  .jvfa-premium-course #accordionExample .card-body > h2 > .collapse.show > .media-files-notopics:only-child {
    grid-column: 1 / -1;
  }

  .jvfa-premium-course #accordionExample .card-body > h2 > .collapse.show > .media-files:has(.lazy-background),
  .jvfa-premium-course #accordionExample .card-body > h2 > .collapse.show > .media-files-notopics:has(.lazy-background) {
    grid-column: 1 / -1;
  }
}

.jvfa-premium-course #accordionExample .media-files,
.jvfa-premium-course #accordionExample .media-files-notopics {
  display: block !important;
  padding: 0 14px !important;
  background: #fff !important;
}

.jvfa-premium-course #accordionExample .media-file {
  display: block !important;
  height: 100%;
  padding: 11px !important;
  border: 1px solid #eee3f2 !important;
  border-radius: 12px;
  background: #fcf9fd !important;
}

.jvfa-premium-course #accordionExample .media-file:last-child { border-bottom: 1px solid #eee3f2 !important; }

.jvfa-premium-course #accordionExample .media-file > .row.topics {
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 0 !important;
}

.jvfa-premium-course #accordionExample .media-file > .row.topics:has(.lazy-background) {
  grid-template-columns: 1fr;
}

.jvfa-premium-course #accordionExample .media-file > .row.topics > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.jvfa-premium-course #accordionExample .thumbnail {
  display: block !important;
}

.jvfa-premium-course #accordionExample .thumbnail > a,
.jvfa-premium-course #accordionExample .thumbnail-wrapper {
  display: block !important;
  width: 132px !important;
  max-width: 100% !important;
}

.jvfa-premium-course #accordionExample .thumbnail-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 11px;
  background: #eee7f0;
}

.jvfa-premium-course #accordionExample .thumbnail-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit;
  object-fit: cover;
  filter: brightness(.72);
}

.jvfa-premium-course #accordionExample .thumbnail-img.noDim { filter: none; }

.jvfa-premium-course #accordionExample .play-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.jvfa-premium-course #accordionExample .video-duration {
  position: absolute;
  z-index: 2;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1.2;
}

.jvfa-premium-course #accordionExample .media-file .link-secondary {
  display: block;
  color: #403546 !important;
  font-size: 0.9rem !important;
  font-weight: 620 !important;
  line-height: 1.4;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.jvfa-premium-course #accordionExample .center-cropped.lazy-background {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 330px) !important;
  min-height: 360px;
  margin: 0 auto !important;
  border-radius: 12px;
  background-color: #f3edf5;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Accordion reference images: compact, centered, and independent of media-card sizing. */
.jvfa-premium-course #accordionExample .media-files:has(.premium-reference-image),
.jvfa-premium-course #accordionExample .media-files-notopics:has(.premium-reference-image),
.jvfa-premium-course #accordionExample .media-files:has(.center-cropped.lazy-background),
.jvfa-premium-course #accordionExample .media-files-notopics:has(.center-cropped.lazy-background) {
  padding: 4px !important;
  background: transparent !important;
}

.jvfa-premium-course #accordionExample .media-file:has(.premium-reference-image),
.jvfa-premium-course #accordionExample .media-file:has(.center-cropped.lazy-background) {
  height: auto !important;
  padding: 8px !important;
  border: 0 !important;
  background: transparent !important;
}

.jvfa-premium-course #accordionExample .media-file:has(.premium-reference-image) > .row.topics,
.jvfa-premium-course #accordionExample .media-file:has(.center-cropped.lazy-background) > .row.topics {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding: 0 !important;
  background: transparent !important;
}

.jvfa-premium-course #accordionExample .premium-reference-image,
.jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background {
  display: block !important;
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  flex: 0 1 320px !important;
  width: min(100%, 320px) !important;
  max-width: 320px !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  margin: 0 !important;
  padding: 0 !important;
  border: 8px solid #f6f0f8 !important;
  border-radius: 18px !important;
  background-color: #f6f0f8;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 7px 18px rgba(51, 24, 60, 0.08);
}

.jvfa-premium-course #accordionExample .premium-reference-image.col-6,
.jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background.col-6 {
  flex-basis: min(46%, 280px) !important;
  width: min(46%, 280px) !important;
  max-width: 280px !important;
}

/* FAQ */
.jvfa-premium-course > .col-lg-12 {
  width: var(--course-narrow) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 42px 0 30px !important;
}

.jvfa-premium-course #myAccordion {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.jvfa-premium-course #myAccordion > .faq {
  display: block;
  margin: 0 0 30px !important;
  font-size: clamp(2.3rem, 2vw, 2rem) !important;
  line-height: 1 !important;
}

.jvfa-premium-course #myAccordion > .card {
  width: 100% !important;
  margin: 0 0 12px !important;
  overflow: hidden;
  border: 1px solid #e8d9ef !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 7px 20px rgba(55, 20, 67, 0.055) !important;
}

.jvfa-premium-course #myAccordion .card-header {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fbf4ff !important;
}

.jvfa-premium-course #myAccordion .accord {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  min-height: 64px;
  margin: 0 !important;
  padding: 15px 64px 15px 20px !important;
  border: 0 !important;
  background: #f8edff !important;
  color: var(--course-purple-dark) !important;
  font-size: 0.98rem !important;
  font-weight: 720 !important;
  line-height: 1.35;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.jvfa-premium-course #myAccordion .accord[aria-expanded="true"] {
  background: linear-gradient(105deg, #6411aa, #9917db) !important;
  color: #fff !important;
}

.jvfa-premium-course #myAccordion .accordion-icon {
  position: absolute;
  top: 50%;
  right: 18px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e8d1f8;
  color: var(--course-purple-dark);
  transform: translateY(-50%);
}

.jvfa-premium-course #myAccordion .accordion-icon::before {
  content: "+";
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.jvfa-premium-course #myAccordion .accord[aria-expanded="true"] .accordion-icon {
  background: rgba(255,255,255,.18);
  color: #fff;
}

.jvfa-premium-course #myAccordion .accord[aria-expanded="true"] .accordion-icon::before {
  content: "−";
}

.jvfa-premium-course #myAccordion .collapse,
.jvfa-premium-course #myAccordion .collapsing,
.jvfa-premium-course #myAccordion .card-body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.jvfa-premium-course #myAccordion .card-body {
  padding: 20px 22px !important;
  border-top: 0 !important;
  background: linear-gradient(180deg, #fff, #fffbfe) !important;
  color: #5c5161 !important;
}

.jvfa-premium-course #myAccordion .card-body label {
  display: block;
  width: 100%;
  margin: 0 !important;
  font-size: 0.92rem;
  line-height: 1.7;
}

.jvfa-premium-course #myAccordion .response {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: 450 !important;
}

/* Install-app banner remains in normal flow under the fixed header. */
html.course-detail-premium .app-banner.show {
  position: relative !important;
  top: auto !important;
  z-index: 5 !important;
  width: min(94vw, 900px) !important;
  margin: 12px auto 4px !important;
}

/* Tablet: a deliberate single-column hero. */
@media (max-width: 62em) {
  .jvfa-premium-course { padding-top: 12px; }

  .jvfa-premium-course .premium-course-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    width: min(92vw, 820px) !important;
    padding: 14px 0 28px !important;
  }

  .jvfa-premium-course .premium-course-media,
  .jvfa-premium-course .premium-course-summary {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .jvfa-premium-course .image-slider {
    width: min(100%, 390px) !important;
  }

  .jvfa-premium-course .premium-course-summary { padding-top: 0 !important; }
  .jvfa-premium-course .course-title { font-size: clamp(2rem, 4vw, 2.3rem) !important; }

  .jvfa-premium-course .premium-learning-path,
  .jvfa-premium-course > .col-lg-12 {
    width: min(92vw, 820px) !important;
  }

  .jvfa-premium-course #accordionExample .premium-reference-image,
  .jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background {
    flex-basis: 300px !important;
    width: min(100%, 300px) !important;
    max-width: 300px !important;
  }

  .jvfa-premium-course #accordionExample .premium-reference-image.col-6,
  .jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background.col-6 {
    flex-basis: min(46%, 230px) !important;
    width: min(46%, 230px) !important;
    max-width: 230px !important;
  }
}

/* Mobile: app-like density, not desktop typography squeezed into a phone. */
@media (max-width: 48em) {
  html.course-detail-premium body { padding-bottom: 86px !important; }

  html.course-detail-premium .app-banner.show {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    width: calc(100% - 24px) !important;
    margin: 10px auto 2px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
  }

  html.course-detail-premium .app-banner-logo {
    width: 38px !important;
    height: 38px !important;
  }

  html.course-detail-premium .app-banner-text { min-width: 0; font-size: 0.78rem !important; }
  html.course-detail-premium .app-banner-text small { font-size: 0.68rem !important; }
  html.course-detail-premium .app-banner-actions { gap: 4px !important; }
  html.course-detail-premium .app-banner-btn { padding: 6px 8px !important; font-size: 0.72rem !important; }

  .jvfa-premium-course { padding: 8px 0 56px; }

  .jvfa-premium-course .premium-course-hero {
    gap: 22px !important;
    width: calc(100% - 30px) !important;
    max-width: 560px !important;
    padding: 10px 0 12px !important;
  }

  .jvfa-premium-course .premium-course-media,
  .jvfa-premium-course .premium-course-summary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .jvfa-premium-course .image-slider {
    width: min(100%, 340px) !important;
    padding-bottom: 12px;
  }

  .jvfa-premium-course .slick-list { border-radius: 20px; }
  .jvfa-premium-course .slick-prev,
  .jvfa-premium-course .slick-next { width: 40px !important; height: 40px !important; }
  .jvfa-premium-course .slick-prev { left: 8px !important; }
  .jvfa-premium-course .slick-next { right: 8px !important; }
  .jvfa-premium-course .slick-dots { gap: 7px; margin-top: 12px !important; }
  .jvfa-premium-course .slick-dots li,
  .jvfa-premium-course .slick-dots button { width: 8px !important; height: 8px !important; }

  .jvfa-premium-course .premium-course-eyebrow {
    margin-bottom: 7px;
    font-size: 0.68rem;
    letter-spacing: 0.13em;
  }

  .jvfa-premium-course .course-title {
    margin-bottom: 12px !important;
    font-size: clamp(1.45rem, 4vw, 1.05rem) !important;
    line-height: 0.97 !important;
  }

  .jvfa-premium-course .premium-course-description {
    margin-bottom: 17px !important;
    font-size: 0.91rem !important;
    line-height: 1.55 !important;
  }

  .jvfa-premium-course .premium-course-facts { padding: 14px !important; border-radius: 18px; }
  .jvfa-premium-course .premium-course-facts .segment { margin-bottom: 10px !important; padding-bottom: 10px !important; }

  .jvfa-premium-course .premium-course-facts-grid { gap: 8px; }
  .jvfa-premium-course .premium-course-facts-grid > .col-6 {
    min-height: 88px;
    padding: 12px 10px !important;
    border-radius: 14px;
    align-items: flex-start !important;
    flex-direction: column;
    justify-content: center;
  }

  .jvfa-premium-course .premium-course-facts-grid .smImg {
    width: 25px !important;
    height: 25px !important;
    margin: 0 0 7px !important;
  }

  .jvfa-premium-course .premium-course-facts-grid .course_diff {
    font-size: 0.78rem !important;
    line-height: 1.42 !important;
  }

  .jvfa-premium-course .premium-course-content { padding: 12px !important; }
  .jvfa-premium-course .premium-course-content .CMediaHighlights { font-size: 1rem !important; }
  .jvfa-premium-course .premium-course-content .subtext { font-size: 0.7rem !important; }
  .jvfa-premium-course .premium-course-kit { text-align: center !important; }

  .jvfa-premium-course .premium-learning-path {
    width: calc(100% - 30px) !important;
    max-width: 560px !important;
    padding: 32px 0 24px !important;
  }

  .jvfa-premium-course .premium-section-heading {
    display: block;
    margin-bottom: 18px;
  }

  .jvfa-premium-course .premium-section-heading > div:first-child > p {
    margin-bottom: 7px;
    font-size: 0.68rem;
  }

  .jvfa-premium-course .premium-section-heading h2 {
    font-size: clamp(2.35rem, 12vw, 3.25rem) !important;
  }

  .jvfa-premium-course .premium-section-heading h2.premium-learning-title{
    font-size: clamp(1.35rem, 4vw, 2.25rem) !important;
  }

  .jvfa-premium-course #accordionExample > .card {
    margin-bottom: 10px !important;
    border-radius: 16px !important;
  }

  .jvfa-premium-course #accordionExample .btn-topics {
    min-height: 62px;
    gap: 9px;
    padding: 6px 13px !important;
    font-size: 0.87rem !important;
  }

  .jvfa-premium-course #accordionExample .btn-topics > img.premium-topic-thumb,
  .jvfa-premium-course #accordionExample .btn-topics > img.tn {
    min-width: 40px !important;
    width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    border-radius: 9px !important;
  }

  .jvfa-premium-course #accordionExample .premium-topic-toggle,
  .jvfa-premium-course #accordionExample .btn-topics > .fa { width: 32px; height: 32px; }
  .jvfa-premium-course #accordionExample > .card > .collapse > .card-body,
  .jvfa-premium-course #accordionExample > .card > .collapsing > .card-body { padding: 10px !important; }

  .jvfa-premium-course #accordionExample .card-body > h2 > .btn-link .btn-topics {
    min-height: 54px;
    font-size: 0.81rem !important;
  }

  .jvfa-premium-course #accordionExample .media-files,
  .jvfa-premium-course #accordionExample .media-files-notopics { padding: 0 10px !important; }

  .jvfa-premium-course #accordionExample .media-file > .row.topics {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 11px;
  }

  .jvfa-premium-course #accordionExample .thumbnail > a,
  .jvfa-premium-course #accordionExample .thumbnail-wrapper { width: 112px !important; }

  .jvfa-premium-course #accordionExample .media-file .link-secondary {
    font-size: 0.76rem !important;
    line-height: 1.32;
  }

  .jvfa-premium-course #accordionExample .center-cropped.lazy-background { min-height: 190px; }

  .jvfa-premium-course #accordionExample .media-file:has(.premium-reference-image),
  .jvfa-premium-course #accordionExample .media-file:has(.center-cropped.lazy-background) {
    padding: 4px !important;
  }

  .jvfa-premium-course #accordionExample .media-file:has(.premium-reference-image) > .row.topics,
  .jvfa-premium-course #accordionExample .media-file:has(.center-cropped.lazy-background) > .row.topics {
    gap: 8px;
  }

  .jvfa-premium-course #accordionExample .premium-reference-image,
  .jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background {
    flex-basis: 280px !important;
    width: min(100%, 280px) !important;
    max-width: 280px !important;
    min-height: 0 !important;
    border-width: 6px !important;
    border-radius: 15px !important;
  }

  .jvfa-premium-course #accordionExample .premium-reference-image.col-6,
  .jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background.col-6 {
    flex-basis: calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    max-width: 150px !important;
  }

  .jvfa-premium-course > .col-lg-12 {
    width: calc(100% - 30px) !important;
    max-width: 560px !important;
    padding: 30px 0 16px !important;
  }

  .jvfa-premium-course #myAccordion > .faq {
    margin-bottom: 16px !important;
    font-size: clamp(1rem, 4.5vw, 1.8rem) !important;
    text-align: left;
  }

  .jvfa-premium-course #myAccordion .accord {
    min-height: 58px;
    padding: 13px 54px 13px 15px !important;
    font-size: 0.84rem !important;
  }

  .jvfa-premium-course #myAccordion .accordion-icon { right: 13px; width: 32px; height: 32px; }
  .jvfa-premium-course #myAccordion .card-body { padding: 16px !important; }
  .jvfa-premium-course #myAccordion .card-body label { font-size: 0.79rem; line-height: 1.62; }

  html.course-detail-premium .premium-course-actions {
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 20px) !important;
    padding: 8px !important;
    border-radius: 17px !important;
  }

  html.course-detail-premium .premium-course-actions .submitFrame { gap: 8px !important; }
  html.course-detail-premium .premium-course-actions .btn {
    min-height: 46px;
    padding: 8px 10px !important;
    border-radius: 11px !important;
    font-size: 0.78rem !important;
  }

  .jvfa-premium-course .whatsapp-overlay {
    right: 10px !important;
    bottom: 78px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .jvfa-premium-course .whatsapp-overlay a { width: 48px !important; height: 48px !important; }
}

@media (max-width: 23.75em) {
  .jvfa-premium-course .premium-course-hero,
  .jvfa-premium-course .premium-learning-path,
  .jvfa-premium-course > .col-lg-12 { width: calc(100% - 20px) !important; }

  .jvfa-premium-course .course-title { font-size: 1.6rem !important; }
  .jvfa-premium-course .premium-course-description { font-size: 0.84rem !important; }
  .jvfa-premium-course #accordionExample .media-file > .row.topics {
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .jvfa-premium-course #accordionExample .thumbnail > a,
  .jvfa-premium-course #accordionExample .thumbnail-wrapper { width: 96px !important; }
  .jvfa-premium-course #accordionExample .premium-reference-image,
  .jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background {
    flex-basis: 250px !important;
    width: min(100%, 250px) !important;
    max-width: 250px !important;
  }
  .jvfa-premium-course #accordionExample .premium-reference-image.col-6,
  .jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background.col-6 {
    flex-basis: calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    max-width: 130px !important;
  }
  html.course-detail-premium .premium-course-actions .btn { font-size: 0.7rem !important; }
}

/* --------------------------------------------------------------------------
   v11 final accordion image guard

   The stable template uses an <i class="tn center-cropped lazy-background">
   while the premium template uses <img class="premium-topic-thumb">. These
   final source-order rules intentionally support both DOM shapes.
   -------------------------------------------------------------------------- */
.jvfa-premium-course #accordionExample .card-header .btn-topics {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  overflow: hidden !important;
}

.jvfa-premium-course #accordionExample .card-header .btn-topics > .tn,
.jvfa-premium-course #accordionExample .card-header .btn-topics > .premium-topic-thumb {
  display: block !important;
  position: static !important;
  inset: auto !important;
  grid-column: 2 !important;
  align-self: center !important;
  justify-self: end !important;
  flex: 0 0 48px !important;
  box-sizing: border-box !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  /* border: 2px solid rgba(255, 255, 255, 0.96) !important; */
  border-radius: 11px !important;
  background-color: #efe7f3 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  object-fit: cover !important;
  transform: none !important;
  box-shadow: 0 5px 12px rgba(42, 9, 68, 0.22) !important;
}

.jvfa-premium-course #accordionExample .card-header .btn-topics > .tn.is-bg-missing,
.jvfa-premium-course #accordionExample .card-header .btn-topics > .premium-topic-thumb.is-missing {
  display: none !important;
}

.jvfa-premium-course #accordionExample .card-header .btn-topics > .fa,
.jvfa-premium-course #accordionExample .card-header .btn-topics > .premium-topic-toggle {
  grid-column: 3 !important;
  justify-self: end !important;
}

/* An open topic keeps the full-width lesson list, but reference imagery is a
   compact content card instead of a full-width pale canvas. */
.jvfa-premium-course #accordionExample .media-files:has(.premium-reference-image),
.jvfa-premium-course #accordionExample .media-files-notopics:has(.premium-reference-image),
.jvfa-premium-course #accordionExample .media-files:has(.center-cropped.lazy-background),
.jvfa-premium-course #accordionExample .media-files-notopics:has(.center-cropped.lazy-background) {
  box-sizing: border-box !important;
  width: fit-content !important;
  max-width: min(100%, 620px) !important;
  margin: 10px auto 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.jvfa-premium-course #accordionExample .media-files:has(.premium-reference-image) .media-file,
.jvfa-premium-course #accordionExample .media-files-notopics:has(.premium-reference-image) .media-file,
.jvfa-premium-course #accordionExample .media-files:has(.center-cropped.lazy-background) .media-file,
.jvfa-premium-course #accordionExample .media-files-notopics:has(.center-cropped.lazy-background) .media-file {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.jvfa-premium-course #accordionExample .media-file:has(.premium-reference-image) > .row.topics,
.jvfa-premium-course #accordionExample .media-file:has(.center-cropped.lazy-background) > .row.topics {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 10px !important;
  background: transparent !important;
}

.jvfa-premium-course #accordionExample .media-file .premium-reference-image,
.jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background:not(.tn) {
  display: block !important;
  position: static !important;
  inset: auto !important;
  flex: 0 0 260px !important;
  box-sizing: border-box !important;
  width: 260px !important;
  min-width: 0 !important;
  max-width: min(100%, 260px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #eadff0 !important;
  border-radius: 14px !important;
  background-color: #fff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transform: none !important;
  box-shadow: 0 8px 22px rgba(52, 24, 61, 0.1) !important;
}

.jvfa-premium-course #accordionExample .media-file .premium-reference-image.col-6,
.jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background.col-6:not(.tn) {
  flex-basis: 250px !important;
  width: 250px !important;
  max-width: min(100%, 250px) !important;
}

@media (max-width: 48em) {
  .jvfa-premium-course #accordionExample .card-header .btn-topics > .tn,
  .jvfa-premium-course #accordionExample .card-header .btn-topics > .premium-topic-thumb {
    flex-basis: 42px !important;
    width: 46px !important;
    min-width: 42px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 42px !important;
    max-height: 46px !important;
    border-radius: 9px !important;
  }

  .jvfa-premium-course #accordionExample .media-files:has(.premium-reference-image),
  .jvfa-premium-course #accordionExample .media-files-notopics:has(.premium-reference-image),
  .jvfa-premium-course #accordionExample .media-files:has(.center-cropped.lazy-background),
  .jvfa-premium-course #accordionExample .media-files-notopics:has(.center-cropped.lazy-background) {
    max-width: 100% !important;
    margin: 8px auto 12px !important;
  }

  .jvfa-premium-course #accordionExample .media-file .premium-reference-image,
  .jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background:not(.tn) {
    flex-basis: 220px !important;
    width: 220px !important;
    max-width: min(100%, 220px) !important;
    border-radius: 12px !important;
  }

  .jvfa-premium-course #accordionExample .media-file .premium-reference-image.col-6,
  .jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background.col-6:not(.tn) {
    flex-basis: calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    max-width: 140px !important;
  }
}

/* --------------------------------------------------------------------------
   v14: reserve clear space for the install-app banner on tablet and mobile.
   The fixed navigation must not cover the banner, and the hero should begin
   only after the complete banner has been displayed.
   -------------------------------------------------------------------------- */

@media (max-width: 62em) {
  html.course-detail-premium .app-banner.show {
    width: min(94vw, 820px) !important;
    min-height: 64px !important;
    margin: 88px auto 22px !important;
    padding: 12px 14px !important;
    overflow: visible !important;
  }

  .jvfa-premium-course {
    padding-top: 4px !important;
  }
}

@media (max-width: 48em) {
  html.course-detail-premium .app-banner.show {
    width: calc(100% - 24px) !important;
    min-height: 58px !important;
    margin: 82px auto 20px !important;
    padding: 10px 12px !important;
  }

  /* The course level is already communicated by the title on a phone. */
  .jvfa-premium-course .premium-course-eyebrow {
    display: none !important;
  }

  /* Match the app: icon and label share one vertically centred row. */
  .jvfa-premium-course .premium-course-facts-grid > .col-6 {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 42px !important;
  }

  .jvfa-premium-course .premium-course-facts-grid .smImg {
    margin: 0 10px 0 0 !important;
  }

  .jvfa-premium-course .premium-course-facts-grid .course_diff {
    display: flex !important;
    align-items: center !important;
    min-height: 2.45em;
  }
}

/* --------------------------------------------------------------------------
   v12 focused interaction polish

   - deterministic down/up chevrons for closed/open accordion buttons
   - clean, left-aligned lesson cards without inherited green borders
   - lighter CTA typography and restored green combo-deals action
   -------------------------------------------------------------------------- */

/* Draw the chevron in CSS so its direction does not depend on a Font Awesome
   glyph, font version, or an inherited transform. */
.jvfa-premium-course #accordionExample button .premium-topic-toggle,
.jvfa-premium-course #accordionExample button .btn-topics > .fa {
  transform: none !important;
}

.jvfa-premium-course #accordionExample button .premium-topic-toggle > .fa {
  display: none !important;
}

.jvfa-premium-course #accordionExample button .premium-topic-toggle::before,
.jvfa-premium-course #accordionExample button .btn-topics > .fa::before {
  content: "" !important;
  display: block !important;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border: 0 !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
  transition: transform 180ms ease !important;
}

.jvfa-premium-course #accordionExample button[aria-expanded="true"] .premium-topic-toggle::before,
.jvfa-premium-course #accordionExample button[aria-expanded="true"] .btn-topics > .fa::before {
  transform: rotate(225deg) !important;
}

.jvfa-premium-course #accordionExample button[aria-expanded="false"] .premium-topic-toggle::before,
.jvfa-premium-course #accordionExample button[aria-expanded="false"] .btn-topics > .fa::before {
  transform: rotate(45deg) !important;
}

/* Nested subtopics intentionally use two columns on wide desktops for faster
   scanning. Tablet and mobile retain the existing one-column flow. */
.jvfa-premium-course #accordionExample .card-body > h2 > .collapse,
.jvfa-premium-course #accordionExample .card-body > h2 > .collapsing,
.jvfa-premium-course #accordionExample .card-body > h2 > .collapse.show,
.jvfa-premium-course #accordionExample .card-body > h2 > .collapse.show > .media-files,
.jvfa-premium-course #accordionExample .card-body > h2 > .collapse.show > .media-files-notopics {
  border-color: #eee3f2 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.jvfa-premium-course #accordionExample .media-files,
.jvfa-premium-course #accordionExample .media-files-notopics,
.jvfa-premium-course #accordionExample .media-basics,
.jvfa-premium-course #accordionExample .media-pants {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.jvfa-premium-course #accordionExample .media-file {
  border: 1px solid #eadff0 !important;
  background: #fffafd !important;
  box-shadow: 0 3px 10px rgba(74, 39, 86, 0.045) !important;
  text-align: left !important;
}

.jvfa-premium-course #accordionExample .media-file > .row.topics,
.jvfa-premium-course #accordionExample .media-file > .row.topics > [class*="col-"],
.jvfa-premium-course #accordionExample .media-file .link-secondary {
  justify-items: start !important;
  justify-content: start !important;
  text-align: left !important;
}

.jvfa-premium-course #accordionExample .media-file .link-secondary {
  width: 100%;
  font-weight: 560 !important;
  line-height: 1.35 !important;
}

.jvfa-premium-course #accordionExample .card-body > h2 > .btn-link .btn-topics {
  text-align: left !important;
}

/* Keep the fixed action bar clear and purposeful without looking heavy. */
html.course-detail-premium .premium-course-actions .btn {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html.course-detail-premium .premium-course-actions .comboBtn,
html.course-detail-premium .premium-course-actions .comboBtn:hover,
html.course-detail-premium .premium-course-actions .comboBtn:focus {
  background: linear-gradient(135deg, #00ad83, #009b76) !important;
  box-shadow: 0 8px 18px rgba(0, 157, 119, 0.22) !important;
  color: #fff !important;
}

html.course-detail-premium .premium-course-actions .enrolBtn {
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   v13 desktop hero balance

   Give the opening section more breathing room below navigation, widen the
   centered canvas, move the gallery subtly left, and keep every Slick dot
   fully visible. Tablet/mobile rules above remain unchanged.
   -------------------------------------------------------------------------- */

.jvfa-premium-course .slick-dots {
  align-items: center !important;
  min-height: 18px !important;
  gap: 6px !important;
  margin-top: 14px !important;
  padding: 3px 8px !important;
  overflow: visible !important;
  line-height: 1 !important;
}

.jvfa-premium-course .slick-dots li,
.jvfa-premium-course .slick-dots button {
  width: 8px !important;
  min-width: 8px !important;
  height: 8px !important;
  min-height: 8px !important;
}

@media (min-width: 62.01em) {
  .jvfa-premium-course {
    padding-top: 30px !important;
  }

  .jvfa-premium-course .premium-course-facts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .jvfa-premium-course .premium-course-hero {
    grid-template-columns: minmax(430px, 0.7fr) minmax(620px, 1.3fr) !important;
    gap: clamp(48px, 4.25vw, 84px) !important;
    width: min(96vw, 1680px) !important;
    max-width: 1680px !important;
    padding: clamp(38px, 3vw, 54px) 24px 8px !important;
  }

  .jvfa-premium-course .premium-course-media {
    transform: translateX(-16px);
  }

  .jvfa-premium-course .image-slider {
    width: min(100%, 490px) !important;
    padding-bottom: 30px !important;
  }
}

@media (max-width: 23.75em) {
  .jvfa-premium-course #accordionExample .card-header .btn-topics > .tn,
  .jvfa-premium-course #accordionExample .card-header .btn-topics > .premium-topic-thumb {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  .jvfa-premium-course #accordionExample .media-file .premium-reference-image,
  .jvfa-premium-course #accordionExample .media-file .center-cropped.lazy-background:not(.tn) {
    flex-basis: 190px !important;
    width: 190px !important;
    max-width: min(100%, 190px) !important;
  }
}

.jvfa-premium-course .slick-list,
.jvfa-premium-course .slide {
  background: transparent !important;
}

.jvfa-premium-course .slide .myImg {
  object-fit: cover !important;
}

@media (min-width: 1200px) {
  .jvfa-premium-course .premium-course-hero {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.6fr) !important;
    column-gap: clamp(36px, 3vw, 56px) !important;
  }

  .jvfa-premium-course .premium-course-media {
    width: min(100%, 490px) !important;
    justify-self: end !important;
  }

  .jvfa-premium-course .image-slider {
    width: 100% !important;
    max-width: 490px !important;
  }

  .jvfa-premium-course .premium-course-summary {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: start !important;
  }
}

/* Make an expanded main accordion feel like one connected panel */
.jvfa-premium-course
#accordionExample
> .card:has(> .collapse.show) {
  border: 1px solid #e8dcef !important;
  border-radius: 15px !important;
  background: #fbf7fd !important;
  box-shadow: 0 7px 0 #f2edf4 !important;
}

/* Open header: remove only its lower corner rounding */
.jvfa-premium-course
#accordionExample
> .card
> .card-header
button[aria-expanded="true"]
.btn-topics {
  border-radius: 15px 15px 0 0 !important;
}

/* Join the body directly beneath the purple header */
.jvfa-premium-course
#accordionExample
> .card
> .collapse
> .card-body,
.jvfa-premium-course
#accordionExample
> .card
> .collapsing
> .card-body {
  margin-top: 0 !important;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 0 0 15px 15px !important;
  background: #fbf7fd !important;
}

/* Remove the different white layer inside the expanded body */
.jvfa-premium-course
#accordionExample
> .card
> .collapse
> .card-body
.media-files,
.jvfa-premium-course
#accordionExample
> .card
> .collapse
> .card-body
.media-files-notopics {
  background: transparent !important;
}
/* Clean lesson rows inside expanded accordions */
.jvfa-premium-course
#accordionExample
.media-file:has(.thumbnail) {
  padding: 12px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid #eadff0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* No divider after the final lesson */
.jvfa-premium-course
#accordionExample
.media-file:has(.thumbnail):last-child {
  border-bottom: 0 !important;
}

/* Optional subtle interaction */
.jvfa-premium-course
#accordionExample
.media-file:has(.thumbnail):hover {
  background: rgba(111, 24, 170, 0.035) !important;
}

/* Do not retain an empty reference-image card if its asset fails. */
.jvfa-premium-course
#accordionExample
.premium-reference-image.is-bg-missing {
  display: none !important;
}

/* ==========================================================
   Accordion cleanup: compact headers, joined expanded panels
   ========================================================== */

/* Remove the pale strip beneath every closed accordion. */
.jvfa-premium-course #accordionExample > .card {
    margin-bottom: 9px !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Reduce the height of the purple accordion headers. */
.jvfa-premium-course #accordionExample .card-header .btn-topics {
    min-height: 56px !important;
    padding: 7px 14px !important;
}

/* Slightly reduce header thumbnails. */
.jvfa-premium-course
#accordionExample
.card-header
.btn-topics > .tn,

.jvfa-premium-course
#accordionExample
.card-header
.btn-topics > .premium-topic-thumb {
    flex-basis: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
}

/* Join the expanded body directly to its purple header. */
.jvfa-premium-course
#accordionExample
> .card:has(> .collapse.show)
> .card-header
.btn-topics,

.jvfa-premium-course
#accordionExample
> .card:has(> .collapsing)
> .card-header
.btn-topics {
    border-radius: 15px 15px 0 0 !important;
}

.jvfa-premium-course
#accordionExample
> .card
> .collapse
> .card-body,

.jvfa-premium-course
#accordionExample
> .card
> .collapsing
> .card-body {
    margin-top: 0 !important;
    padding: 10px 12px 12px !important;
    border-top: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: #fffafd !important;
    box-shadow: none !important;
}

/* Remove stacked left/right padding inside expanded content. */
.jvfa-premium-course #accordionExample .media-files,
.jvfa-premium-course #accordionExample .media-files-notopics {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove individual lesson capsules. */
.jvfa-premium-course #accordionExample .media-file {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Use a subtle divider instead of a capsule around every lesson. */
.jvfa-premium-course
#accordionExample
.media-files + .media-files,

.jvfa-premium-course
#accordionExample
.media-files-notopics + .media-files-notopics {
    border-top: 1px solid #eee5f1 !important;
}

/* Hide a failed reference image completely. */
.jvfa-premium-course
#accordionExample
.premium-reference-image.is-bg-missing {
    display: none !important;
}

/*
 * Do not reserve a large blank 4:5 image area while loading or
 * when the supplied GPath is invalid. The show.bs.collapse handler
 * still loads the hidden image; the wrapper appears after success.
 */
.jvfa-premium-course
#accordionExample
.media-files:has(
    .premium-reference-image:not(.is-bg-loaded)
),

.jvfa-premium-course
#accordionExample
.media-files-notopics:has(
    .premium-reference-image:not(.is-bg-loaded)
) {
    display: none !important;
}

/* Restore the reference-image wrapper only after loading succeeds. */
.jvfa-premium-course
#accordionExample
.media-files:has(.premium-reference-image.is-bg-loaded),

.jvfa-premium-course
#accordionExample
.media-files-notopics:has(.premium-reference-image.is-bg-loaded) {
    display: block !important;
}

/* Mobile-specific compact sizing. */
@media (max-width: 48em) {
    .jvfa-premium-course
    #accordionExample
    .card-header
    .btn-topics {
        min-height: 48px !important;
        padding: 6px 11px !important;
        font-size: 0.78rem !important;
    }

    .jvfa-premium-course
    #accordionExample
    .card-header
    .btn-topics > .tn,

    .jvfa-premium-course
    #accordionExample
    .card-header
    .btn-topics > .premium-topic-thumb {
        flex-basis: 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    .jvfa-premium-course
    #accordionExample
    > .card
    > .collapse
    > .card-body {
        padding: 8px 10px 10px !important;
    }

    .jvfa-premium-course #accordionExample .media-file {
        padding: 9px 0 !important;
    }
}
/* Final language-switcher state overrides */
.jvfa-premium-course
.premium-learning-languages
.premium-language-option:not(.is-active):not([aria-pressed="true"]) {
    border: 2px solid #777078 !important;
    background: #ffffff !important;
    color: #251b29 !important;
    box-shadow: inset 0 0 0 1px rgba(37, 27, 41, 0.04) !important;
}

.jvfa-premium-course
.premium-learning-languages
.premium-language-option.is-active,
.jvfa-premium-course
.premium-learning-languages
.premium-language-option[aria-pressed="true"] {
    border: 2px solid #171417 !important;
    background: #171417 !important;
    color: #ffffff !important;
    box-shadow: 0 7px 18px rgba(23, 20, 23, 0.16) !important;
}

/* Keep the desktop profile dropdown inside the viewport */
html.course-detail-premium #baseProfileMenu.dropdown-menu-right,
html.course-detail-premium #baseProfileMenu.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
    inset: 100% 0 auto auto !important;
    transform: none !important;
    max-width: min(22rem, calc(100vw - 1.5rem)) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}