/* ============================================================
   Course show page (courses/{course})
   All page styles live here — the blade carries no inline CSS.
   Design language matches the learner dashboard / discovery pages.
   ============================================================ */

/* ============ Hero ============ */
.cs-hero {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--cs-hero-g1, #0d0a2b) 0%, var(--cs-hero-g2, #1b1145) 100%);
color: #fff;
padding: 48px 0 52px;
}

.cs-hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
}

.cs-orb {
position: absolute;
border-radius: 50%;
filter: blur(90px);
will-change: transform;
}

.cs-orb-1 {
width: 420px;
height: 420px;
background: var(--cs-orb-c1, #3F1190);
top: -140px;
left: -100px;
opacity: 0.8;
animation: csFloat1 16s ease-in-out infinite alternate;
}

.cs-orb-2 {
width: 360px;
height: 360px;
background: var(--cs-orb-c2, #2f57ef);
bottom: -180px;
left: 45%;
opacity: 0.4;
animation: csFloat2 20s ease-in-out infinite alternate;
}

.cs-orb-3 {
width: 300px;
height: 300px;
background: var(--cs-hero-accent, #f2b705);
top: -90px;
right: -50px;
opacity: 0.2;
animation: csFloat3 18s ease-in-out infinite alternate;
}

@keyframes csFloat1 {
to { transform: translate(70px, 50px) scale(1.1); }
}

@keyframes csFloat2 {
to { transform: translate(-60px, -40px) scale(1.15); }
}

@keyframes csFloat3 {
to { transform: translate(-50px, 60px) scale(0.92); }
}

.cs-grid-lines {
position: absolute;
inset: 0;
background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 25%, transparent 72%);
mask-image: radial-gradient(ellipse at 50% 0%, black 25%, transparent 72%);
}

.cs-hero-copy {
position: relative;
}

.cs-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0 0 18px;
padding: 0;
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.75);
}

.cs-breadcrumb li {
margin: 0;
color: rgba(255, 255, 255, 0.75);
}

.cs-breadcrumb li i {
color: rgba(255, 255, 255, 0.6);
font-size: 1.3rem;
}

.cs-breadcrumb li:last-child {
color: rgba(255, 255, 255, 0.95);
}

.cs-breadcrumb a {
color: rgba(255, 255, 255, 0.85);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255, 255, 255, 0.35);
}

.cs-breadcrumb a:hover {
color: #fff;
}

.cs-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}

.cs-type-badge {
display: inline-flex;
border-radius: 9999px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.cs-type-badge img {
display: block;
height: 34px;
width: auto;
border-radius: 9999px;
}

.cs-type-chip {
display: inline-flex;
align-items: center;
padding: 5px 14px;
border-radius: 9999px;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
background: rgba(242, 183, 5, 0.16);
border: 1px solid rgba(242, 183, 5, 0.45);
color: #f2b705;
}

.cs-type-chip--free {
background: rgba(78, 202, 33, 0.16);
border-color: rgba(78, 202, 33, 0.5);
color: #7ddf5a;
}

.cs-type-chip--membership {
background: rgba(154, 107, 255, 0.18);
border-color: rgba(154, 107, 255, 0.55);
color: #c8a8ff;
}

.cs-meta-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 13px;
border-radius: 9999px;
font-size: 1.2rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.88);
}

.cs-meta-chip--preview {
background: rgba(255, 92, 92, 0.16);
border-color: rgba(255, 92, 92, 0.45);
color: #ffb4b4;
}

.cs-title {
font-size: clamp(2.8rem, 4vw, 4.6rem);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 700;
color: #fff;
margin-bottom: 14px;
}

.cs-description {
font-size: 1.6rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.84);
max-width: 62ch;
margin-bottom: 20px;
}

.cs-description p {
color: inherit;
margin-bottom: 0.6em;
}

.cs-proof-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin-bottom: 18px;
font-size: 1.4rem;
color: rgba(255, 255, 255, 0.88);
}

.cs-rating {
display: inline-flex;
align-items: center;
gap: 8px;
}

.cs-rating strong {
font-size: 1.7rem;
color: #f2b705;
}

.cs-stars i {
color: #f2b705;
font-size: 1.3rem;
}

.cs-stars i.off {
color: rgba(255, 255, 255, 0.25);
}

.cs-proof-link {
color: rgba(255, 255, 255, 0.75);
text-decoration: underline;
text-underline-offset: 3px;
}

.cs-proof-link:hover {
color: #fff;
}

.cs-proof-item {
display: inline-flex;
align-items: center;
gap: 7px;
}

.cs-learners {
display: inline-flex;
align-items: center;
gap: 12px;
}

.cs-learners-avatars {
display: flex;
}

.cs-learner-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
background: #fff;
border: 2px solid rgba(255, 255, 255, 0.9);
margin-left: -11px;
cursor: default;
}

.cs-learner-avatar:first-child {
margin-left: 0;
}

.cs-learner-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.cs-learners-count {
display: flex;
flex-direction: column;
line-height: 1.25;
}

.cs-learners-count strong {
font-size: 1.6rem;
color: #fff;
font-variant-numeric: tabular-nums;
}

.cs-learners-count span {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.7);
}

.cs-hero[data-hero-mode="light"] .cs-learner-avatar {
border-color: rgba(25, 35, 53, 0.35);
}

.cs-hero[data-hero-mode="light"] .cs-learners-count strong {
color: #161a30;
}

.cs-hero[data-hero-mode="light"] .cs-learners-count span {
color: #5d6680;
}

.cs-creator-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
font-size: 1.4rem;
color: rgba(255, 255, 255, 0.75);
}

.cs-creator-row a {
color: #fff;
font-weight: 600;
}

.cs-creator-row a:hover {
color: #f2b705;
}

.cs-creator-avatar {
flex: 0 0 auto;
}

.cs-creator-avatar img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
background: #fff;
border: 2px solid rgba(255, 255, 255, 0.85);
}

.cs-meta-row {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
list-style: none;
margin: 0;
padding: 0;
font-size: 1.4rem;
color: rgba(255, 255, 255, 0.92);
}

.cs-meta-row li {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
color: rgba(255, 255, 255, 0.92);
}

.cs-meta-row i {
font-size: 1.4rem;
color: rgba(255, 255, 255, 0.75);
}


/* ============ Hero light mode (bright course covers) ============
   Selected deterministically from the cover image's average luminance;
   the generated background lightness is clamped, so these text colors
   always have sufficient contrast. */
.cs-hero[data-hero-mode="light"] {
color: #192335;
}

.cs-hero[data-hero-mode="light"] .cs-grid-lines {
background-image:
    linear-gradient(rgba(25, 35, 53, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 35, 53, 0.06) 1px, transparent 1px);
}

.cs-hero[data-hero-mode="light"] .cs-orb {
opacity: 0.35;
}

.cs-hero[data-hero-mode="light"] .cs-breadcrumb,
.cs-hero[data-hero-mode="light"] .cs-breadcrumb li {
color: #3a4158;
}

.cs-hero[data-hero-mode="light"] .cs-breadcrumb li i {
color: #6b7385;
}

.cs-hero[data-hero-mode="light"] .cs-breadcrumb a {
color: #444d68;
}

.cs-hero[data-hero-mode="light"] .cs-breadcrumb a:hover {
color: #192335;
}

.cs-hero[data-hero-mode="light"] .cs-breadcrumb li:last-child {
color: #2c3349;
}

.cs-hero[data-hero-mode="light"] .cs-title {
color: #161a30;
}

.cs-hero[data-hero-mode="light"] .cs-description {
color: #3c4257;
}

.cs-hero[data-hero-mode="light"] .cs-meta-chip {
background: rgba(25, 35, 53, 0.06);
border-color: rgba(25, 35, 53, 0.15);
color: #3c4257;
}

.cs-hero[data-hero-mode="light"] .cs-proof-row {
color: #3c4257;
}

.cs-hero[data-hero-mode="light"] .cs-rating strong {
color: var(--cs-hero-accent, #b45309);
}

.cs-hero[data-hero-mode="light"] .cs-stars i {
color: var(--cs-hero-accent, #b45309);
}

.cs-hero[data-hero-mode="light"] .cs-stars i.off {
color: rgba(25, 35, 53, 0.2);
}

.cs-hero[data-hero-mode="light"] .cs-proof-link {
color: #444d68;
}

.cs-hero[data-hero-mode="light"] .cs-proof-link:hover {
color: #192335;
}

.cs-hero[data-hero-mode="light"] .cs-creator-row {
color: #5d6680;
}

.cs-hero[data-hero-mode="light"] .cs-creator-row a {
color: #192335;
}

.cs-hero[data-hero-mode="light"] .cs-creator-row a:hover {
color: var(--cs-hero-accent, #b45309);
}

.cs-hero[data-hero-mode="light"] .cs-creator-avatar img {
background: #fff;
border-color: rgba(25, 35, 53, 0.5);
}

.cs-hero[data-hero-mode="light"] .cs-meta-row,
.cs-hero[data-hero-mode="light"] .cs-meta-row li {
color: #3a4158;
}

.cs-hero[data-hero-mode="light"] .cs-meta-row i {
color: #5d6680;
}

.cs-hero[data-hero-mode="light"] .cs-type-chip {
background: rgba(180, 130, 4, 0.14);
border-color: rgba(180, 130, 4, 0.45);
color: #8a6500;
}

.cs-hero[data-hero-mode="light"] .cs-type-chip--free {
background: rgba(38, 130, 8, 0.12);
border-color: rgba(38, 130, 8, 0.4);
color: #2c7a0b;
}

.cs-hero[data-hero-mode="light"] .cs-type-chip--membership {
background: rgba(96, 49, 199, 0.12);
border-color: rgba(96, 49, 199, 0.4);
color: #5b2fc4;
}

.cs-hero[data-hero-mode="light"] .cs-meta-chip--preview {
background: rgba(201, 42, 59, 0.1);
border-color: rgba(201, 42, 59, 0.4);
color: #b02438;
}

/* Available translations row */
.cs-translations {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 14px;
max-width: 72ch;
font-size: 1.3rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}

.cs-translations i {
flex: 0 0 auto;
margin-top: 2px;
font-size: 1.6rem;
color: rgba(255, 255, 255, 0.75);
}

.cs-translations strong {
color: #fff;
}

.cs-translations-more,
.cs-translations-more:visited,
.cs-translations-more:focus,
.cs-translations-more:active {
color: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
}

.cs-translations-more:hover {
color: #fff;
}

.cs-hero[data-hero-mode="light"] .cs-translations-more:hover {
color: #161a30;
}

.cs-translations em {
font-style: normal;
color: rgba(255, 255, 255, 0.6);
white-space: nowrap;
}

.cs-hero[data-hero-mode="light"] .cs-translations {
color: #3a4158;
}

.cs-hero[data-hero-mode="light"] .cs-translations i {
color: #5d6680;
}

.cs-hero[data-hero-mode="light"] .cs-translations strong {
color: #161a30;
}

.cs-hero[data-hero-mode="light"] .cs-translations em {
color: #6b7385;
}

/* On-demand languages modal */
.cs-ondemand-modal {
border-radius: 20px;
border: 0;
}

.cs-ondemand-modal .modal-header {
align-items: center;
border-bottom: 0;
padding: 30px 34px 6px;
}

.cs-ondemand-modal .modal-body {
padding: 14px 34px 34px;
}

.cs-ondemand-title {
font-size: 26px !important;
margin-bottom: 0;
}

.cs-ondemand-intro {
display: flex;
align-items: flex-start;
gap: 14px;
background: #f6f7fc;
border: 1px solid #e9ecf5;
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 24px;
}

.cs-ondemand-intro i {
flex: 0 0 auto;
margin-top: 2px;
font-size: 2.1rem;
color: var(--color-primary);
}

.cs-ondemand-intro p {
margin: 0;
font-size: 1.5rem;
line-height: 1.6;
color: #444a5e;
}

.cs-ondemand-intro strong {
color: #161a30;
}

.cs-ondemand-grid {
display: flex;
flex-wrap: wrap;
gap: 9px;
}

.cs-ondemand-chip {
display: inline-flex;
align-items: center;
padding: 7px 15px;
border-radius: 9999px;
background: #f1f3fa;
border: 1px solid #e9ecf5;
color: #3c4257;
font-size: 1.3rem;
font-weight: 600;
}

/* Hero entrance (CSS only) */
@keyframes csRise {
from {
    opacity: 0;
    transform: translateY(24px);
}

to {
    opacity: 1;
    transform: none;
}
}

.cs-hero-reveal {
animation: csRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.cs-hero-reveal:nth-child(2) { animation-delay: 0.08s; }
.cs-hero-reveal:nth-child(3) { animation-delay: 0.16s; }
.cs-hero-reveal:nth-child(4) { animation-delay: 0.24s; }
.cs-hero-reveal:nth-child(5) { animation-delay: 0.32s; }
.cs-hero-reveal:nth-child(6) { animation-delay: 0.4s; }
.cs-hero-reveal:nth-child(7) { animation-delay: 0.48s; }

/* Sidebar overlap: the theme pulls .course-sidebar-top up by -480px,
   sized for the old tall breadcrumb banner. The hero is content-sized
   now, so guarantee a minimum height and use a pull that the shortest
   hero can always absorb. */
@media only screen and (min-width: 992px) {
.cs-hero {
min-height: 440px;
display: flex;
align-items: center;
}

.cs-hero > .container {
width: 100%;
}

.tgd-course-show .course-sidebar-top {
margin-top: -360px;
}
}

/* ============ Layout / content sections ============ */
.tgd-course-show .rbt-course-details-area {
background: #f6f7fc;
padding-top: 0;
padding-bottom: 80px;
}

/* Breathing room between the content band and the related courses */
.tgd-course-show #course-recommendations {
padding-top: 80px;
}

.tgd-course-show .rbt-course-details-area > .container {
padding-top: 10px;
}

.tgd-course-show .rbt-course-details-area > .container .row {
flex-direction: column-reverse;
}

@media only screen and (min-width: 992px) {
.tgd-course-show .rbt-course-details-area > .container .row {
flex-direction: row;
}
}

/* Uniform framed cards for every content section */
.tgd-course-show .rbt-shadow-box {
border: 1px solid #e9ecf5;
border-radius: 16px;
box-shadow: 0 18px 40px rgba(23, 22, 54, 0.06);
background: #fff;
}

/* Section anchor nav: segmented pill control — the housing shares the
   same full radius as its buttons so the curvature reads as one shape. */
.tgd-course-show .rbt-inner-onepage-navigation {
top: 55px;
border: 1px solid #e9ecf5;
border-radius: 9999px;
box-shadow: 0 10px 28px rgba(23, 22, 54, 0.07);
background: #fff;
padding: 6px;
}

.tgd-course-show .rbt-inner-onepage-navigation .mainmenu-nav .mainmenu {
margin: 0;
gap: 4px;
}

.tgd-course-show .rbt-inner-onepage-navigation .mainmenu-nav .mainmenu li {
margin: 0;
}

.tgd-course-show .rbt-inner-onepage-navigation .mainmenu li a {
font-weight: 600;
padding: 10px 22px;
}

.tgd-course-show .rbt-inner-onepage-navigation .mainmenu li a::after {
background: transparent;
transition: background 0.2s ease;
}

.tgd-course-show .rbt-inner-onepage-navigation .mainmenu li:not(.current):hover a::after {
background: #f1f3fa;
}

.tgd-course-show .rbt-inner-onepage-navigation .mainmenu li:not(.current):hover a {
color: var(--color-heading);
}

.tgd-course-show .rbt-inner-onepage-navigation .mainmenu li.current a::after,
.tgd-course-show .rbt-inner-onepage-navigation .mainmenu li.current:hover a::after {
background: var(--color-primary);
}

.tgd-course-show .rbt-inner-onepage-navigation .mainmenu li.current a,
.tgd-course-show .rbt-inner-onepage-navigation .mainmenu li.current:hover a {
color: #fff;
}

@media only screen and (max-width: 991px) {
.tgd-course-show .rbt-inner-onepage-navigation {
border-radius: 18px;
padding: 6px;
}

.tgd-course-show .rbt-inner-onepage-navigation .mainmenu-nav .mainmenu {
padding: 0;
}
}

/* ============ Sidebar ============ */
.cs-sidebar {
border: 1px solid #e9ecf5;
border-radius: 18px;
box-shadow: 0 22px 48px rgba(23, 22, 54, 0.1);
overflow: hidden;
}

.cs-sidebar .inner {
display: flex;
flex-direction: column-reverse;
}

@media only screen and (min-width: 992px) {
.cs-sidebar .inner {
display: block;
}
}

.cs-sidebar-media {
position: relative;
display: block;
}

.cs-sidebar-media .video-content {
position: relative;
}

.cs-sidebar-media-hint {
position: absolute;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 9999px;
background: rgba(13, 10, 43, 0.78);
color: #fff;
font-size: 1.2rem;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
}

.video-popup-wrapper {
margin-top: 30px;
}

@media only screen and (min-width: 992px) {
.video-popup-wrapper {
margin-top: 0;
}
}

.cs-price-block {
margin-top: 18px;
}

.cs-price-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
}

.cs-price {
font-size: 3.2rem;
font-weight: 800;
line-height: 1;
color: #192335;
font-variant-numeric: tabular-nums;
}

.cs-price-original {
font-size: 1.7rem;
color: #8a93ad;
text-decoration: line-through;
}

.cs-price-save {
display: inline-flex;
padding: 4px 12px;
border-radius: 9999px;
background: rgba(4, 195, 23, 0.12);
color: #0b9a1d;
font-size: 1.2rem;
font-weight: 700;
}

.cs-price-urgency {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 5px 13px;
border-radius: 9999px;
background: rgba(220, 53, 69, 0.1);
color: #c92a3b;
font-size: 1.25rem;
font-weight: 700;
}

.cs-price-estimate {
margin-top: 10px;
font-size: 1.25rem;
color: #6b7280;
}

.cs-price-meta {
display: flex;
gap: 16px;
margin: 10px 0;
font-size: 1.3rem;
color: #586585;
}

.cs-login-hint {
font-size: 1.4rem;
margin: 0 0 15px;
}

.cs-includes {
border-top: 1px solid #eff1f8;
margin-top: 14px;
padding: 22px 4px 8px;
}

.cs-includes-label {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8a93ad;
margin-bottom: 16px;
}

.cs-includes-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}

.cs-includes-list li {
display: flex;
align-items: center;
gap: 13px;
margin: 0;
font-size: 1.45rem;
line-height: 1.5;
color: #3c4257;
}

.cs-includes-list i {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(32, 26, 112, 0.06);
color: var(--color-primary);
font-size: 1.6rem;
}

.cs-includes-list li:has(.cs-lang-text) {
align-items: center;
}

/* Only top-align when the full language list is expanded (multi-line) */
.cs-includes-list li:has(.cs-lang-rest:not([hidden])) {
align-items: flex-start;
}

.cs-includes-list li:has(.cs-lang-rest:not([hidden])) i {
margin-top: 3px;
}

.cs-lang-text {
min-width: 0;
}

.cs-lang-toggle {
display: inline;
border: 0;
padding: 0;
background: none;
color: var(--color-primary);
font-size: inherit;
font-weight: 700;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
}

.cs-share {
margin-top: 22px;
border-top: 1px solid #eff1f8;
padding-top: 16px;
}

.course-sharing-options {
margin-bottom: 12px;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8a93ad;
}

/* Sidebar + mobile bar CTAs follow the rounded design language */
.cs-sidebar .content-item-content .rbt-btn,
.cs-mobile-cta .rbt-btn {
border-radius: 9999px;
}

.btn-discount {
border: 2px solid #04C317;
color: #fff;
background: #04C317;
margin-top: 12px;
}

.btn-discount:hover {
background: #04C317;
color: #fff;
}

.side-join-newsletter {
display: none !important;
}

/* ============ Mobile sticky buy bar ============ */
.cs-mobile-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 998;
display: flex;
align-items: center;
gap: 14px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: #fff;
border-top: 1px solid #e9ecf5;
box-shadow: 0 -12px 32px rgba(23, 22, 54, 0.12);
}

.cs-mobile-cta-price {
display: flex;
flex-direction: column;
min-width: 0;
}

.cs-mobile-cta-price strong {
font-size: 2rem;
line-height: 1.2;
color: #192335;
}

.cs-mobile-cta-price span {
font-size: 1.15rem;
color: #8a93ad;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.cs-mobile-cta-original {
text-decoration: line-through;
}

.cs-mobile-cta-action {
flex: 1;
min-width: 0;
}

.cs-mobile-cta-action .add-to-card-button,
.cs-mobile-cta-action .buy-now-btn {
margin: 0 !important;
}

.cs-mobile-cta-action .rbt-btn {
padding: 0 18px;
height: 48px;
line-height: 48px;
}

/* Keep page content clear of the fixed bar on small screens */
@media only screen and (max-width: 991px) {
body {
padding-bottom: 76px;
}
}

@media only screen and (min-width: 992px) {
.cs-mobile-cta {
display: none;
}
}

/* ============ Migrated page rules ============ */
#course-upsell-modal .list-item li,
#course-prerequisites-modal .list-item li,
#course-login-prompt-modal .list-item li {
display: block !important;
}

@media only screen and (min-width: 1200px) {
#course-upsell-modal .pricing-table .pricing-header .price-wrap .amount,
#course-prerequisites-modal .pricing-table .pricing-header .price-wrap .amount,
#course-login-prompt-modal .pricing-table .pricing-header .price-wrap .amount {
font-size: 32px;
}

#course-upsell-modal .pricing-table .pricing-header .title,
#course-prerequisites-modal .pricing-table .pricing-header .title,
#course-login-prompt-modal .pricing-table .pricing-header .title {
min-height: 60px;
}

#course-upsell-modal .pricing-table .pricing-body,
#course-prerequisites-modal .pricing-table .pricing-body,
#course-login-prompt-modal .pricing-table .pricing-body {
min-height: 460px;
}
}

#instructor .about-author .media .thumbnail {
max-width: 150px;
margin-right: 30px;
}

#instructor .about-author .media .thumbnail a {
width: 100%;
}

#instructor .about-author .media .thumbnail a img {
max-width: 100%;
max-height: 100%;
width: 100%;
min-width: 100%;
margin-right: 0;
border-radius: 14px;
}

/* "More courses by" lives in the content column: house it in the same
   framed card as the other sections. */
#creator-course-recommendations {
background: #fff;
border: 1px solid #e9ecf5;
border-radius: 16px;
box-shadow: 0 18px 40px rgba(23, 22, 54, 0.06);
padding: 30px;
}

#creator-course-recommendations .tgd-course-card-description,
#creator-course-recommendations .tgd-course-card-cta,
#course-recommendations .tgd-course-card-description,
#course-recommendations .tgd-course-card-cta,
#course-recommendations .tgd-course-category {
display: none;
}

#course-recommendations .tgd-course-card-title a,
#creator-course-recommendations .tgd-course-card-title a {
font-size: 1.6rem !important;
}

#course-recommendations [data-course-type="Free"] .tgd-course-card-price,
#course-recommendations [data-course-type="Membership"] .tgd-course-card-price,
#creator-course-recommendations [data-course-type="Membership"] .tgd-course-card-price {
display: none;
}

#course-recommendations .tgd-course-card .tgd-course-card-image a.tgd-course-card-image-link,
#creator-course-recommendations .tgd-course-card .tgd-course-card-image a.tgd-course-card-image-link {
max-height: 240px;
min-height: 240px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

#course-recommendations .tgd-course-card .tgd-course-card-image a > img,
#creator-course-recommendations .tgd-course-card .tgd-course-card-image a > img {
width: 100%;
}

.mfp-content {
max-width: 800px;
width: 100%;
margin: 0 auto;
}

.mfp-container {
padding: 20px;
}

.swal2-container.swal2-center.llt-swal-container.swal2-backdrop-show {
z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
.cs-orb,
.cs-hero-reveal {
animation: none;
}
}