:root{
    --tenant-main-color: #214591;
    --bs-primary-rgb: 33, 69, 145;
    --color-primary-darker: color-mix(in srgb,var(--tenant-main-color),#000 15%);
    --bs-nav-link-color: var(--tenant-accent-color) !important;
    --tenant-accent-color: #289f67;
    --tenant-accent-darker: color-mix(in srgb,var(--tenant-accent-color),#000 15%);
    --side-lesson-content-width: 475px;
    --text-on-bg-main-color: #cfe2ff; /* text color when the background is main tenant color */
    --text-on-bg-accent-color: #ebffe6; /* text color when the background is accent tenant color */

    --bs-primary: var(--tenant-main-color) !important;
    --bs-primary-text: var(--tenant-main-color) !important;
    --bs-primary-bg-subtle: color-mix(in srgb,var(--tenant-main-color),#fff 80%);
    --bs-primary-border-subtle: color-mix(in srgb,var(--tenant-main-color),#fff 70%);
}

/* ------------------------------- Colors ------------------------------- */

.text-accent{
    color: var(--tenant-accent-color);
}
.text-primary{
    color: var(--tenant-main-color);
}
.bg-primary{
    background: var(--tenant-main-color) !important;
    color: var(--text-on-bg-main-color);
}
.bg-accent{
    background: var(--tenant-accent-color);
    color: var(--text-on-bg-accent-color);
}

/* ------------------------------- END Colors ------------------------------- */

/* ------------------------------- Text Formating ------------------------------- */

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--tenant-main-color);
}
.fs-7 {
    font-size: 0.85rem !important;
}
.fs-8 {
    font-size: 0.75rem !important;
}
.fs-4-5{
    font-size: 1.4rem !important;
}
.fw-500{
    font-weight: 500;
}
.fw-600{
    font-weight: 600;
}
.fw-800{
    font-weight: 800;
}
.fw-900{
    font-weight: 900;
}

/* ------------------------------- END Text Formating ------------------------------- */

/* ------------------------------- Links ------------------------------- */

a {
    text-decoration:none;
    background-image: linear-gradient(#212529, #212529);
    padding-bottom: 3px;
    background-size: 0 1px;
    background-position-y: 100%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    transition: background-size 0.5s ease-in-out;
}
a:hover, a:focus, a:active {
    background-size: 100% 1px;
}
.link-primary {
    color: var(--tenant-main-color) !important;
    background-image: linear-gradient(var(--tenant-main-color), var(--tenant-main-color)) !important;
}
.link-primary:focus, .link-primary:hover {
    color: var(--color-primary-darker) !important;
}
.link-accent{
    color: var(--tenant-accent-color) !important;
    background-image: linear-gradient(var(--tenant-accent-color), var(--tenant-accent-color)) !important;
}
.link-accent:focus, .link-accent:hover {
    color: var(--tenant-accent-darker) !important;
}

a.text-decoration-none{
    background-image: none !important;
}
a.btn:active, a.btn:hover, a.btn:focus{
    background-image: none !important;
}

/* ------------------------------- END Links ------------------------------- */

/* ------------------------------- Buttons ------------------------------- */

.btn-primary {
    --bs-btn-bg: var(--tenant-main-color) !important;
    --bs-btn-border-color: var(--tenant-main-color) !important;
    --bs-btn-hover-bg: var(--color-primary-darker) !important;
    --bs-btn-hover-border-color: var(--color-primary-darker) !important;
    --bs-btn-active-bg: var(--color-primary-darker) !important;
    --bs-btn-active-border-color: var(--color-primary-darker) !important;
    --bs-btn-disabled-bg: var(--tenant-main-color) !important;
    --bs-btn-disabled-border-color: var(--tenant-main-color)!important;
}
.btn-outline-primary {
    --bs-btn-color: var(--tenant-main-color) !important;
    --bs-btn-border-color: var(--tenant-main-color) !important;
    --bs-btn-hover-bg: var(--tenant-main-color) !important;
    --bs-btn-hover-border-color: var(--tenant-main-color) !important;
    --bs-btn-active-bg: var(--tenant-main-color) !important;
    --bs-btn-active-border-color: var(--tenant-main-color) !important;
    --bs-btn-disabled-color: var(--tenant-main-color) !important;
    --bs-btn-disabled-border-color: var(--tenant-main-color) !important;
}
.btn-accent {
    --bs-btn-bg: var(--tenant-accent-color) !important;
    --bs-btn-color: var(--text-on-bg-accent-color) !important;
    --bs-btn-border-color: var(--tenant-accent-color) !important;
    --bs-btn-hover-bg: var(--text-on-bg-accent-color) !important;
    --bs-btn-hover-color: var(--tenant-accent-color) !important;
    --bs-btn-hover-border-color: var(--tenant-accent-darker) !important;
    --bs-btn-active-bg: var(--text-on-bg-accent-color) !important;
    --bs-btn-active-color: var(--tenant-accent-color) !important;
    --bs-btn-active-border-color: var(--tenant-accent-darker) !important;
    --bs-btn-disabled-bg: var(--tenant-accent-color) !important;
    --bs-btn-disabled-border-color: var(--tenant-accent-color)!important;
}
.btn-outline-accent {
    --bs-btn-color: var(--tenant-accent-color) !important;
    --bs-btn-border-color: var(--tenant-accent-color) !important;
    --bs-btn-hover-color: var(--text-on-bg-accent-color) !important;
    --bs-btn-hover-bg: var(--tenant-accent-color) !important;
    --bs-btn-hover-border-color: var(--tenant-accent-color) !important;
    --bs-btn-active-color: var(--text-on-bg-accent-color) !important;
    --bs-btn-active-bg: var(--tenant-accent-color) !important;
    --bs-btn-active-border-color: var(--tenant-accent-color) !important;
    --bs-btn-disabled-color: var(--tenant-accent-color) !important;
    --bs-btn-disabled-border-color: var(--tenant-accent-color) !important;
}

/* ------------------------------- END Buttons ------------------------------- */

/* ------------------------------- Spacing (margin, padding) ------------------------------- */

.mt-n1 {
    margin-top: -0.25rem !important;
}
.mt-n2 {
    margin-top: -0.5rem !important;
}
.mt-n3 {
    margin-top: -0.75rem !important;
}
.mt-n4 {
    margin-top: -1rem !important;
}
.mt-n5 {
    margin-top: -1.5rem !important;
}

/* ------------------------------- END Spacing ------------------------------- */

/* ------------------------------- Inputs (check box, select, input) ------------------------------- */

.form-check-input:checked {
    background-color: color-mix(in srgb,var(--tenant-accent-color),#fff 10%);
    border-color: var(--tenant-accent-color);
}
.form-check-input:focus {
    border-color: color-mix(in srgb,var(--tenant-accent-color),#fff 10%);
    outline: 0;
    box-shadow: 0 0 0 .25rem color-mix(in srgb,var(--tenant-accent-color),#fff 60%);
}

/* ------------------------------- END Inputs ------------------------------- */

/* ------------------------------- Images ratio ------------------------------- */

.aspect-ratio-box-16x9, .aspect-ratio-box-4x3, .aspect-ratio-box-3x1, .aspect-ratio-box-1x1, .aspect-ratio-box-4x1 {
    height: 0;
    overflow: hidden;
    position: relative;
}
.aspect-ratio-inside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.aspect-ratio-box-16x9 {
    padding-top: 56.25% ;
}
.aspect-ratio-box-3x1 {
    padding-top: 33.33%;
}
.aspect-ratio-box-4x3 {
    padding-top: 75%;
}
.aspect-ratio-box-1x1 {
    padding-top: 100%;
}
.aspect-ratio-box-4x1{
    padding-top: 25%
}

/* ------------------------------- END mages ratio ------------------------------- */

/* ------------------------------- Header ------------------------------- */

header {
    padding-top: 3.75rem;
}
header .navbar {
    z-index: 1001;
    padding: 0;
}
header .navbar-brand img{
    height: 44px;
}

/* ------------------------------- END Header ------------------------------- */

/* ------------------------------- Homepage Slider ------------------------------- */

.slide-image {
    position: relative;
    overflow: hidden;
}
.slide-overlay {
    position: absolute;
    top: 0;
    z-index: 10;
    width: 60%;
    height: 100%;
    padding: 2rem;
}
.slide-info {
    position: relative;
    transform: translate(0%, -50%);
    top: 50%;
}
.slide-info .slide-button{
    margin-top: 1rem;
}
.slide-overlay.left {
    left: 0;
}
.slide-overlay.right {
    right: 0;
}
.slide-overlay.right .slide-info {
        text-align: right;
    }
.slide-overlay-gradient {
}
.slide-overlay.left .slide-overlay-gradient {
}
.slide-overlay.right .slide-overlay-gradient {
}

/* ------------------------------- END Homepage Slider ------------------------------- */

/* ------------------------------- Lesson Series List Page ------------------------------- */

.series-item {
    margin-bottom: 0.25rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 0 solid var(--tenant-main-color);
    background-color: color-mix(in srgb, var(--tenant-main-color), #fff 90%);
}
.series-item a{
    display: block;
    color: var(--tenant-main-color);
    transition: color .15s
    ease-in-out, background-color .15s
    ease-in-out, border-color .15s
    ease-in-out;
}
.series-item a:hover, .series-item a:focus, .series-item a:active, .series-item a.active {
    background-size: 100% 100%;
    background-color: color-mix(in srgb, var(--tenant-main-color), #fff 80%);
    background-image: none !important;
}
.series-item a:hover > h2, .series-item a:focus > h2, .series-item a:active > h2, .series-item a.active > h2 {
    background: rgba(var(--bs-primary-rgb));
    color: var(--text-on-bg-main-color);
}
.series-item h2 {
    padding: 1rem;
    border-bottom: 1px solid;
    border-color: color-mix(in srgb, var(--tenant-main-color), #fff 70%);
    transition: color .15s
    ease-in-out, background-color .15s
    ease-in-out, border-color .15s
    ease-in-out;
}
.series-item .aspect-ratio-box-1x1 {
    border: 1px solid var(--tenant-main-color);
}
.series-item .label{
    background-color: var(--tenant-accent-color);
    border-radius: 30px;
    padding: 0 0.75rem 0.1rem;
    font-size: 0.9rem;
    color: var(--text-on-bg-accent-color);
    vertical-align: super;
}
.series-item .progress {
    height: 0.5rem;
    background-color: #fff;
}
.series-item .progress-bar {
    color: var(--bs-progress-bar-color);
    background-color: var(--tenant-accent-color) !important;
}
/* ------------------------------- END Lesson Series List Page ------------------------------- */

/* ------------------------------- Lesson View Page ------------------------------- */

#menu-toggle{
    position: fixed;
    top: 4rem;
    right: 1rem;
    z-index: 99999;
}
#lesson-wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#lesson-wrapper    #lesson-content-nav li:first-child{
    margin-right: auto;
}
#lesson-content-nav li:last-child{
    margin-left: auto;
}
#lesson-content-nav li {
    padding: 0.5rem;
}
#lesson-wrapper.content-menu-toggled {
    padding-right: var(--side-lesson-content-width);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
#lesson-wrapper.content-menu-toggled #side-lesson-content-wrapper {
    width: var(--side-lesson-content-width);
}
#lesson-wrapper.content-menu-toggled #page-content-wrapper {
    position: absolute;
    margin-right: var(--side-lesson-content-width);
}
#side-lesson-content-wrapper {
    z-index: 1000;
    position: fixed;
    top: 0;
    right: var(--side-lesson-content-width);
    width: 0;
    height: 100dvh;
    margin-right: calc(var(--side-lesson-content-width) * -1);
    padding-top: 6rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: #eaeaea;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#page-content-wrapper {
    width: 100%;
    position: absolute;
}
#page-content-wrapper .segment-content-container{
    min-height: calc(100vh - 13rem);
    margin-bottom: 0.5rem;
    border-radius: 0.5rem !important;
    overflow: hidden;
}
#page-content-wrapper iframe{
    height: calc(100dvh - 13rem);
    border-radius: 0.5rem !important;
    overflow: hidden;
}
#page-content-wrapper embed{
    border-radius: 0.5rem !important;
    overflow: hidden;
}

@media(min-width:768px) {
    #lesson-wrapper {
        padding-right: var(--side-lesson-content-width);
    }
    #lesson-wrapper.content-menu-toggled {
        padding-right: 0;
    }
    #side-lesson-content-wrapper {
        width: var(--side-lesson-content-width);
    }
    #lesson-wrapper.content-menu-toggled #side-lesson-content-wrapper {
        width: 0;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    #page-content-wrapper {
        position: relative;
    }
    #lesson-wrapper.content-menu-toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
    #lesson-wrapper ~ footer {
        padding-right: var(--side-lesson-content-width);
    }
    #lesson-wrapper.content-menu-toggled ~ footer {
        padding-right: 0;
    }
}
.target-level {
    display: inline-block;
    font-size: initial;
    font-weight: 700;
}
.target-level svg{
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
#description>a.collapsed::after {
    content: 'Show Description';
}
#description>a:not(.collapsed)::after {
    content: 'Hide Description';
}
.side-content-menu .content-menu-item{
    background-color: color-mix(in srgb,var(--tenant-accent-color),#fff 85%);
    border-left: 2px solid var(--tenant-accent-color);
    border-radius: 3px;
    margin-bottom: 0.25rem;
}
.side-content-menu .btn:hover {
    background-color: color-mix(in srgb,var(--tenant-accent-color),#fff 85%);
}
.side-content-menu .btn.active, .side-content-menu .btn.show, .side-content-menu .btn:first-child:active {
    background-color: var(--bs-btn-active-bg);
    border-color: color-mix(in srgb,var(--tenant-accent-color),#fff 85%); !important;
}
.side-content-menu h2{
    font-size: 1em;
    font-weight: 600;
    text-align: left;
    margin-bottom: 0.25rem;
}
.side-content-menu .meta-progress-wrapper{
    display: grid;
    grid-auto-flow: column;
}
.side-content-menu .meta-progress{
    font-size: 0.8em;
    color: rgba(0, 0, 0, 0.6);
    text-align: left;
}
.side-content-menu .progress{
    height: 0.5rem;
    align-self: center;
    background-color: #fff;
    border-left: 1px solid var(--tenant-accent-color);
}
.side-content-menu .progress-bar {
    color: var(--bs-progress-bar-color);
    background-color: var(--tenant-accent-color) !important;
}
.side-content-menu .segment-item-wrapper{
    position: relative;
}
.side-content-menu .segment-item-wrapper a {
    background-image: none !important;
}
.side-content-menu .segment-item-wrapper a:hover,
.side-content-menu .segment-item-wrapper a:focus,
.side-content-menu .segment-item-wrapper a:active,
.side-content-menu .segment-item-wrapper a.active {
    background-size: 100% 100%;
    background-color: color-mix(in srgb,var(--tenant-accent-color),#fff 75%);
    background-image: none !important;
}
.side-content-menu .segment-item-wrapper .form-check{
    position: absolute;
    left: 0.75rem;
    top: 1px;
}
.side-content-menu .segment-item-wrapper .segment-content-link{
    padding: 0 0.75rem 0.25rem 2.25rem;
}
.side-content-menu .segment-item-wrapper .segment-item-meta {
    margin-top: -5px;
}
.side-content-menu .segment-item-wrapper .segment-item-meta svg{
    width: 14px;
    fill: var(--tenant-accent-color);
    stroke: var(--tenant-accent-color);
    display: none;
}
.side-content-menu .segment-item-wrapper .segment-item-meta div{
    display: inline-block;
    font-size: 0.8em;
    color: rgba(0, 0, 0, 0.6);
}
.side-content-menu .segment-item-wrapper .segment-item-meta div & .segment-item-video svg.video,
.side-content-menu .segment-item-wrapper .segment-item-meta div & .segment-item-text svg.text,
.side-content-menu .segment-item-wrapper .segment-item-meta div & .segment-item-pdf svg.pdf,
.side-content-menu .segment-item-wrapper .segment-item-meta div & .segment-item-quiz svg.quiz,
.side-content-menu .segment-item-wrapper .segment-item-meta div & .segment-item-practice_deal svg.practice_deal {
    display: inline-block;
}
.side-content-menu .btn.collapsed:has(~ .collapse:not(show) a.active) {
    background-color: color-mix(in srgb,var(--tenant-accent-color),#fff 75%);
}
#lesson-wrapper #lesson-content-nav li:first-child{
    margin-right: auto;
}
#lesson-wrapper #lesson-content-nav li:last-child{
    margin-left: auto;
}
#lesson-wrapper #lesson-content-nav li {
    padding: 0.5rem;
}

/* ------------------------------- END Lesson View Page ------------------------------- */


/* ------------------------------- Lesson QUIZ View Page ------------------------------- */

.quiz-holder .quiz-options{
    display: grid;
    grid-template-columns: 50% 50%;
}
.quiz-holder .answer {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    padding: 1rem 1.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-image: none !important;
    background: var(--bs-light);
    align-content: center;
    margin: 0.5rem;
}
.quiz-holder .answer&:hover,
.quiz-holder .answer&:focus,
.quiz-holder .answer&.selected {
    border-color: var(--tenant-main-color) !important;
}
.quiz-holder .answer&:hover label .answer-cha,
.quiz-holder .answer&:focus label .answer-cha,
.quiz-holder .answer&.selected  label .answer-cha{
    height: 40px;
    border: 1px solid;
    border-radius: 40px;
    align-content: center;
    text-align: center;
    background: var(--tenant-main-color);
    color: var(--text-on-bg-main-color);
}
.quiz-holder .answer&.selected {
    background-color: color-mix(in srgb, var(--tenant-main-color), #fff 85%);
}
.quiz-holder .answer&.selected label {
    display: grid;
    grid-template-columns: 40px auto;
    gap: 1rem;
    align-items: center;
}
.quiz-holder .answer&.selected label .answer-cha{
    height: 40px;
    border: 1px solid var(--bs-border-color);
    border-radius: 40px;
    align-content: center;
    text-align: center;
    background: #eaeaea;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.quiz-holder .answer&.selected label p {
    font-size: 1.2em;
    margin: 0;
    display: inline;
}
.quiz-holder .answer&.correct:not(.show) {
    border-color: var(--bs-success-border-subtle);
}
.quiz-holder .answer&.correct:not(.show) label .answer-cha{
    background: var(--tenant-main-color);
    color: var(--text-on-bg-main-color)
}

.quiz-holder .answer&.incorrect {
    border-color: var(--bs-danger-border-subtle);
}
.quiz-holder .answer&.incorrect label .answer-cha{
    background: var(--tenant-main-color);
    color: var(--text-on-bg-main-color);
}
.quiz-holder {
        transition: color .15s;
        ease-in-out, background-color .15s;
        ease-in-out, border-color .15s;
}
.quiz-holder .quiz-steps-nav{
    width: fit-content;
}
.quiz-holder .step-container {
    position: relative;
    text-align: center;
}
.quiz-holder .step-container .step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #e9ecef;
    line-height: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
}
.quiz-holder .step-container .step-circle &:last-child{
    margin-right: 0;
}
 .quiz-holder .step-container .step-circle &.correct {
     background-color: #146c43;
     border: 1px solid #fff;
     color: #fff;
 }
.quiz-holder .step-container .step-circle &.incorrect {
    background-color: #b02a37;
    border: 1px solid #fff;
    color: #fff;
}
.quiz-holder .step-container .step-circle &.active,
.quiz-holder .step-container .step-circle :first-child {
    border: 1px solid #6c757d;
}

/* ------------------------------- END Lesson QUIZ View Page ------------------------------- */

/* ------------------------------- Shopping Cart Box ------------------------------- */
.cart-box {
    position: fixed;
    top: 3.75rem;
    right: 0;
    width: 300px;
    height: calc(100vh - 3.75rem);
    background-color: #fff;
    border-left: 1px solid #e9ecef;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 1rem;
    overflow: hidden;
}
.cart-box .cart-box-inner {
    height: 100%;
    overflow-y: auto;
}
.cart-box .card-body {
    position: relative;
    padding-right: 2rem;
}
.cart-box .cart-item-close {
    position: absolute;
    top: 8px;
    right: 10px;
    cursor: pointer;
    color: #b02a37;
    line-height: 1;
    transition: transform 0.15s ease, color 0.15s ease;
}
.cart-box .cart-item-close:hover {
    color: #dc3545;
    transform: scale(1.2);
}
/* Push page content aside so the cart column doesn't cover it */
body.cart-box-open {
    padding-right: 300px;
}
@media (max-width: 991.98px) {
    .cart-box {
        width: 260px;
    }
    body.cart-box-open {
        padding-right: 260px;
    }
}
/* ------------------------------- END Shopping Cart Box ------------------------------- */

/* ------------------------------- Custom Buttons ------------------------------- */
.btn.custom-btn {
    border-radius: 50rem;
    font-weight: 700;
    padding: 0.5rem 1.4rem;
    border: 2px solid transparent;
    line-height: 1.2;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn.custom-btn.btn-sm {
    padding: 0.3rem 1rem;
    font-weight: 600;
}
/* Light variant: light fill + main color text, inverts on hover */
.btn.custom-btn.primary-light {
    background-color: var(--text-on-bg-main-color);
    color: var(--tenant-main-color);
    border-color: var(--tenant-main-color);
}
.btn.custom-btn.primary-light:hover,
.btn.custom-btn.primary-light:focus,
.btn.custom-btn.primary-light:active {
    background-color: var(--tenant-main-color);
    color: var(--text-on-bg-main-color);
    border-color: var(--tenant-main-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* ------------------------------- END Custom Buttons ------------------------------- */

/* ------------------------------- Related Lessons ------------------------------- */

/* series switcher (names separated by "|") */
.series-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .15rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--bs-primary-border-subtle);
}
.series-selector .series-tab {
    padding: .1rem .35rem;
    border-radius: .35rem;
    transition: color .2s ease, background-color .2s ease;
}
.series-selector .series-tab.active {
    color: var(--tenant-main-color) !important;
    background: var(--bs-primary-bg-subtle);
    background-image: none !important; /* cancel the animated link underline on the active pill */
}

/* "You own X / Y" heading row */
.related-series-progress {
    padding: .5rem .85rem;
    border-radius: .6rem;
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
}
.related-series-progress-bar {
    height: .5rem;
    background-color: #fff;
    border-radius: 1rem;
    overflow: hidden;
}
.related-series-progress-bar .progress-bar {
    background-color: var(--tenant-accent-color);
    border-radius: 1rem;
    transition: width .6s ease;
}
.related-series-badge {
    background: var(--tenant-main-color);
    color: var(--text-on-bg-main-color);
    font-weight: 600;
    border-radius: 1rem;
    padding: .3rem .6rem;
}

/* the list of related lessons */
.related-lessons-list .related-lesson-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .85rem;
    margin-bottom: .5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 3px solid transparent;
    border-radius: .6rem !important;
    background-image: none !important; /* cancel global anchor underline animation */
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.related-lessons-list .related-lesson-item:hover {
    transform: translateX(3px);
    box-shadow: 0 .25rem .75rem rgba(var(--bs-primary-rgb), .15);
    border-left-color: var(--tenant-main-color);
    z-index: 1;
}
.related-lesson-index {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--tenant-main-color);
    background: var(--bs-primary-bg-subtle);
    border-radius: 50%;
}
.related-lesson-title {
    color: #212529;
    font-weight: 500;
    line-height: 1.25;
}
.related-lesson-badge.owned {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--tenant-accent-color);
    background: color-mix(in srgb, var(--tenant-accent-color), #fff 85%);
    border: 1px solid color-mix(in srgb, var(--tenant-accent-color), #fff 55%);
    padding: .15rem .55rem;
    border-radius: 1rem;
}

/* the current lesson, when present in the list */
.related-lessons-list .related-lesson-item.highlighted {
    border-left-color: var(--tenant-accent-color);
    background: color-mix(in srgb, var(--tenant-accent-color), #fff 90%);
}
.related-lessons-list .related-lesson-item.highlighted .related-lesson-index {
    color: #fff;
    background: var(--tenant-accent-color);
}

.related-lessons-empty {
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: .6rem;
}

/* ------------------------------- END Related Lessons ------------------------------- */


/* ================================ Series header ================================ */
.series-header {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--bs-primary-bg-subtle), #fff 65%);
}
.series-header-top {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.series-header-img {
    flex: 0 0 auto;
    width: 140px;
    height: 140px;
    border-radius: .85rem;
    overflow: hidden;
    box-shadow: 0 .35rem 1rem rgba(var(--bs-primary-rgb), .18);
}
.series-header-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.series-header-info {
    flex: 1 1 auto;
    min-width: 0;
}
.series-header-title {
    font-weight: 900;
    color: var(--tenant-main-color);
    margin-bottom: .5rem;
}
.series-header-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-bottom: .5rem;
}
.series-header-teacher {
    color: var(--tenant-main-color);
    font-weight: 600;
    margin-right: .5rem;
}
.series-header-desc {
    color: #495057;
}

/* stat tiles */
.series-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .85rem;
    margin-top: 1.25rem;
}
/* vertical stats column, docked to the right of the top panel (shrinks header height) */
.series-stats-side {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: .55rem;
    margin-top: 0;
    flex: 0 0 auto;
    width: 210px;
    padding-left: 1.25rem;
    border-left: 1px solid var(--bs-primary-border-subtle);
}
.series-stats-side .series-stat {
    padding: .55rem .75rem;
}
/* avg price sits with the purchase action instead of a tile */
.series-avg-price {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: right;
}
.series-avg-price-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
}
.series-avg-price-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tenant-main-color);
}
.series-stat {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: .75rem;
    transition: box-shadow .15s ease, transform .15s ease;
}
.series-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 .35rem .9rem rgba(var(--bs-primary-rgb), .12);
}
.series-stat-icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--tenant-main-color);
    background: var(--bs-primary-bg-subtle);
    border-radius: .65rem;
}
.series-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.1;
    color: #212529;
}
.series-stat-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6c757d;
}

/* ownership + purchase actions */
.series-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--bs-primary-border-subtle);
}
/* reuses the .related-series-* look from lessons/show; this only sizes it for the actions row */
.series-own-progress {
    flex: 1 1 260px;
    min-width: 220px;
}

/* ================================ Lesson list ================================ */
.lesson-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.lesson-list-item {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 1.15rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 4px solid transparent;
    border-radius: .75rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lesson-list-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 .4rem 1rem rgba(var(--bs-primary-rgb), .14);
    border-left-color: var(--tenant-main-color);
}

/* left image */
.lesson-list-item-img {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: .6rem;
    overflow: hidden;
    background: var(--bs-primary-bg-subtle);
}
.lesson-list-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* muted default icon (no real image) — centered, not stretched */
.lesson-list-item-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary-bg-subtle);
}
.lesson-list-item-img--placeholder img {
    width: 52%;
    height: 52%;
    object-fit: contain;
    opacity: .7;
}

.lesson-list-item-body {
    flex: 1 1 auto;
    min-width: 0;
}
.lesson-list-item-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tenant-main-color);
    margin-bottom: .35rem;
    line-height: 1.2;
}
.lesson-list-item-link {
    color: inherit;
    background-image: none !important; /* cancel global anchor underline animation */
}
.lesson-list-item-link:hover {
    color: var(--color-primary-darker);
}
/* level badge next to the title — raised above the stretched-link overlay so its
   hover popover (the difficulty-range legend) still triggers */
.lesson-list-item .target-level {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .35rem;
    margin-left: .4rem;
    font-size: .9rem;
    font-weight: 800;
    border: 2px solid;
    border-radius: .4rem;
    vertical-align: middle;
    cursor: help;
}

/* description excerpt */
.lesson-list-item-excerpt {
    margin: .4rem 0 .5rem;
    color: #6c757d;
    font-size: .92rem;
    line-height: 1.4;
}

/* metadata rows */
.meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
    color: #495057;
    margin-bottom: .2rem;
}
.meta-ico {
    color: var(--tenant-main-color);
    flex: 0 0 auto;
}
.meta-type {
    font-weight: 600;
    color: var(--tenant-main-color);
    margin-right: .5rem;
}
.meta-term {
    color: #343a40;
}
/* clickable series links — raised above the card's stretched-link so they're clickable */
.meta-series-link {
    position: relative;
    z-index: 2;
    color: var(--tenant-main-color);
    background-image: none !important; /* cancel global anchor underline animation */
    transition: color .15s ease;
}
.meta-series-link:hover {
    color: var(--color-primary-darker);
    text-decoration: underline;
}
.meta-sep {
    color: var(--bs-primary-border-subtle);
    margin: 0 .1rem;
}
.meta-line-tags {
    gap: .3rem;
}

/* clickable filter chips (categories / topics) — above the stretched link so they click */
.lesson-list-item-filters {
    position: relative;
    z-index: 2;
}
.meta-chip {
    display: inline-flex;
    align-items: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--tenant-main-color);
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    padding: .1rem .55rem;
    border-radius: 1rem;
    background-image: none !important; /* cancel global anchor underline animation */
    transition: background-color .15s ease, color .15s ease;
}
.meta-chip:hover {
    color: var(--text-on-bg-main-color);
    background: var(--tenant-main-color);
}
.lesson-tag {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--tenant-accent-color);
    background: color-mix(in srgb, var(--tenant-accent-color), #fff 85%);
    border: 1px solid color-mix(in srgb, var(--tenant-accent-color), #fff 55%);
    padding: .1rem .5rem;
    border-radius: 1rem;
    background-image: none !important; /* cancel global anchor underline animation */
    transition: background-color .15s ease, color .15s ease;
}
.lesson-tag:hover {
    color: #fff;
    background: var(--tenant-accent-color);
}

/* right column: last-update date + price/buy/owned. Above the stretched link. */
.lesson-list-item-aside {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
.lesson-updated {
    text-align: right;
    white-space: nowrap;
}
.lesson-updated-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #adb5bd;
    line-height: 1;
}
.lesson-updated-date {
    font-size: .85rem;
    font-weight: 600;
    color: #6c757d;
}
.lesson-purchase {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
    text-align: right;
    min-width: 6.5rem;
}
.lesson-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--tenant-main-color);
}
.lesson-buy-btn {
    white-space: nowrap;
}
.lesson-owned-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--tenant-accent-color);
    background: color-mix(in srgb, var(--tenant-accent-color), #fff 85%);
    border: 1px solid color-mix(in srgb, var(--tenant-accent-color), #fff 55%);
    padding: .3rem .7rem;
    border-radius: 1rem;
}

@media (max-width: 767.98px) {
    .series-header-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    /* on narrow screens lay the side stats out horizontally to save vertical space */
    .series-stats-side {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        padding-left: 0;
        padding-top: 1rem;
        margin-top: .25rem;
        border-left: none;
        border-top: 1px solid var(--bs-primary-border-subtle);
    }
    .series-stats-side .series-stat {
        flex: 1 1 140px;
        text-align: left;
    }
    .lesson-list-item {
        flex-wrap: wrap;
    }
    .lesson-list-item-aside {
        align-self: stretch;
        width: 100%;
        justify-content: space-between;
        padding-top: .5rem;
        margin-top: .25rem;
        border-top: 1px dashed var(--bs-border-color, #dee2e6);
    }
}
/* ================================ Lesson filter panel ================================ */
.lesson-filter {
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--bs-primary-bg-subtle), #fff 40%);
}
.lesson-filter-title {
    font-weight: 800;
    color: var(--tenant-main-color);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--bs-primary-border-subtle);
}
/* keep the filter alongside the list while scrolling on wide screens */
@media (min-width: 992px) {
    .lesson-filter {
        position: sticky;
        top: 1rem;
    }
}
.lesson-filter .form-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--tenant-main-color);
    margin-bottom: .25rem;
}
/* align select2 widgets with bootstrap form controls */
.lesson-filter .select2-container .select2-selection--multiple {
    min-height: calc(2.375rem + 2px);
    border-color: var(--bs-border-color, #ced4da);
    border-radius: .375rem;
}
.lesson-filter .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    color: var(--tenant-main-color);
    border-radius: 1rem;
    padding: 0 .3rem 0 .5rem;
}
/* ------------------------------- END Series header & Lesson list ------------------------------- */