/* MAIN STYLES */
:root {
    --main-bg-color: #f5faff;
    --main-bg-hover-color: #91c8ff45;
    --white: #ffffff;
    --black: #000000;
    --blue: #143f5e;
    --hoverblue: #29648f;
    --accent: #fd9752;
    --accent2: #fd6703;
    --border: #dddddd;
    --completed: #009f00;
    --slide: #d9eae9;
  }

#mlListingCoursesShortcode {
    background-color: var(--white);
}
.mlAllCoursesWrapper {
    display: flex;
    flex-direction: column;
}
.mlLink{
    z-index: 4;
    position: relative;
    text-decoration: none;
}

/* SEARCH */
/* clears the 'X' from Internet Explorer */
.mlSearchInput::-ms-clear,
.mlSearchInput::-ms-reveal {
  display: none;
  width: 0;
  height: 0; 
}

/* clears the 'X' from Chrome */
.mlSearchInput::-webkit-search-decoration,
.mlSearchInput::-webkit-search-cancel-button,
.mlSearchInput::-webkit-search-results-button,
.mlSearchInput::-webkit-search-results-decoration {
  display: none; 
}
.mlSearch {
    position: relative;
    flex: 1;
}
.mlComboFilter .mlSearchInput {
    width: 100%;
    padding: 16px 42px 16px 18px;
    border: none;
    border-radius: 0 14px 14px 0;
    box-shadow: none;
    background: transparent;
}
.mlComboFilter .mlSearchInput:focus {
    outline: none;
    box-shadow: none;
}

.mlSearchInput:focus::placeholder {
    opacity: 0;
}
.searchIcon {
    width: 22px;
    height: 22px;
    z-index: 5;
    background: transparent;
    border: 3px solid  var(--hoverblue);
    border-radius: 50%;
    position: absolute;
    transition: all 0.2s ease-in-out;
    right: 17px;
    top: 48%;
    transform: translateY(-50%);
  }

  .searchIcon.active:before, .searchIcon.active:after {
    top: 3px;
    right: 7px;
  }
  .searchIcon.active:after {
    transform: rotate(45deg);
  }
  

  .searchIcon:before, .searchIcon:after {
    width: 2px;
    height: 11px;
    display: block;
    content: "";
    background:  var(--hoverblue);
    position: absolute;
    top: 15px;
    right: -4px;
    transform: rotate(-45deg);
    transition: all 0.2s ease-in-out;
  }

/* Combined level + search control — one bordered pill instead of two
   separate boxes, so choosing a level reads as refining the search rather
   than a second, unrelated filter sitting next to it. */
.mlComboFilter {
    display: flex;
    align-items: stretch;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 63, 94, .08);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mlComboFilter:focus-within {
    border-color: var(--hoverblue);
    box-shadow: 0 2px 8px rgba(41, 100, 143, .18);
}
.mlComboFilter .mlLevelFilterWrap {
    flex: 0 0 auto;
    border-right: 1.5px solid var(--border);
}
.mlComboFilter select.mlLevelFilter {
    border: none;
    border-radius: 14px 0 0 14px;
    box-shadow: none;
    width: 210px;
}

  .mlPopularSearches {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mlPopularSearchesItems {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mlPopularSearches .heading {
    font-weight: 600;
    font-size: 13.5px;
    color: #5c7488;
}

.searchItem {
    background: var(--hoverblue);
    color: var(--white);
    padding: 6px 16px;
    border-radius: 18px;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1.4em;
    transition: all 0.2s ease-in-out;

}
.searchItem:hover {
    background: var(--blue);
}
.searchItem,
.searchIcon.active{
    cursor: pointer;
}
/* TITLES */

.mlFilters .ml_title {
    margin: 0;
    text-align: left;
}
.mlResultHead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 30px;
    margin-bottom: 6px;
}
.mlResultCount {
    font-size: 13px;
    color: #8ba0b0;
    font-weight: 600;
    white-space: nowrap;
}

/* LISTING */

.mlListingWrapper {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 40px;
    padding: 20px;
}
.mlRow {
    position: relative;
}
.mlListingWrapper.nothing_found {
    display: flex;
}
.mlCourseTitle{
    width: 100%;
    margin-top: 0!important;
}
/* Reserve consistent header height for the grid card specifically (not the
   slider or My Courses card, which reuse this same class) — otherwise a
   one-line title leaves a big empty gap before the progress bar while a
   three-line title doesn't, making adjacent cards look inconsistent even
   though they're all the same overall height. */
.mlItemWrapper .mlCourseTitle {
    min-height: 3.3em;
    line-height: 1.15;
}

/* Images */
.mlLangFlag {
    max-width: 60px;
    max-height: 35px;
}
.mlLoaderImg {
    max-width: 100px;
    margin: 0 auto;
}

.mlCourseThumbnail {
    width: 100%;
    height: 250px;
    object-fit: cover; 
    /* transition: 0.2s linear; */
}

.mlLangFlagThumb{
    display: inline-block;
    width: 24px;
    margin-right: 5px;
}
/* Views */
.mlCourseViews {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4;
    background: var(--white);
    font-size: 12px;
    font-weight: bold;
    padding: 3px;
    border-top-right-radius: 5px;
    display: flex;
    align-items: center;
    line-height: 1em;
    gap: 3px;
}

/* Blocks */

.mlCourseInfoBlock{
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.mlLangBox{
    background: #ffffffe8;
    display: flex;
    align-items: center;
    padding: 10px 6px;
    position: absolute;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(20, 63, 94, .15);
    z-index: 1;
    font-size: 14px;
    top: 5px;
    left: 5px;
}

.mlItemWrapper{
    min-height: 480px;
    height: 100%;
    background: var(--white);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 9px;

    box-shadow: 0 2px 8px rgba(20, 63, 94, .10);
    -moz-box-shadow: 0 2px 8px rgba(20, 63, 94, .10);
    -webkit-box-shadow: 0 2px 8px rgba(20, 63, 94, .10);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mlItemWrapper:hover {
    box-shadow: 0 8px 20px rgba(20, 63, 94, .18);
    transform: translateY(-2px);
}

.mlThumbnailWrapper{
    overflow: hidden;
}
.mlCourseInfoBlock .progress {
    margin-top: auto;
}
/* Buttons and arrows */
a.ld-course-resume.ld-button:before {
    content: '';
    background: url('/wp-content/plugins/ml-mylinguistics/assets/img/play.svg');
    width: 22px;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
}
.progress  .mlCourseButton , .progress .learndash-wrapper .ld-course-resume.ld-button.ld-button:not(.ld-button-reverse):not(.learndash-link-previous-incomplete):not(.ld-button-transparent){
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    width: 100%;
    border-radius: 6px;
    background: var(--hoverblue)!important;
    color: var(--white);
    padding: 10px 0;
    text-decoration: none;
    transition: 0.2s linear;
    opacity: 1;
    line-height: inherit;
    max-width: 100%;
    margin: 0;
}
.progress  .mlCourseButton:hover, .progress .learndash-wrapper .ld-course-resume.ld-button.ld-button:not(.ld-button-reverse):not(.learndash-link-previous-incomplete):not(.ld-button-transparent):hover {
    background: var(--blue)!important;
}
.progress.Completed .mlCourseButton {
    background: var(--completed)!important;
}
.progress.Completed .mlCourseButton:hover {
    background: #007c00!important;
}
.mlArrow {
    display: flex;
    position: absolute;
    bottom: -20px;
    right: 20px;
}
.mlRightArrow{
 
    background: var(--accent);
    border-radius: 50%;
    padding: 8px 7px;
    width: 40px;
    height: 40px;

    fill: var(--white);
    transition: 0.2s linear;
}

/* Animations */

.mlCourseItem:hover .mlRightArrow{
    transform: translateX(8px);
}


.btn-particles {
    border-radius: 50%;
    color: #eee;
    font-family: monospace;
    z-index: 0;
    position: relative;
    transform: translate(-36px, -91px);

}

.shape {
	position: absolute;
    right:0;
	width: 50px;
	height: 50px;
	transform: scale(0.8);
}
.cir {
	position: absolute;
	border-radius: 50%;
	z-index: 5;
}
/* FILTERS */
/* .mlSelectInput { */
    /* display: none; */
/* } */
.mlInnerSection {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    gap: 20px;
}
.mlInnerSection.mlComboLayout {
    flex-direction: column;
    align-items: stretch;
    padding: 4px 30px 52px;
    gap: 0;
}
.mlComboLayout .mlComboFilter {
    margin-bottom: 18px;
}
.mlLevelFilterWrap {
    flex: 1 4 100%;
}

select.mlLevelFilter {
    width: 100%;
    height: 60px;
    padding: 0 36px 0 18px;
    background-color: #fff;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    font-weight: normal;
    color: #333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2329648f'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(20, 63, 94, .08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select.mlLevelFilter:hover {
    border-color: var(--hoverblue);
}

select.mlLevelFilter:focus {
    outline: none;
    border-color: var(--hoverblue);
    box-shadow: 0 2px 8px rgba(41, 100, 143, .18);
}
.mlSearchWrap {
    flex: 0 1 100%;
}
.loading {
    opacity: 0.3;
    pointer-events: none;
}

.mlLangFilter:checked + label .heading {
    font-weight: bold;
} 
.mlLangFilterWrap {
    display: flex;
    gap: 6px;
    background-color: var(--white);
} 

.mlLangFilterItem {
    display: flex;
    align-items: center;
    position: relative;
}
.mlLangFilterItem label {
    height: 100%;
    padding: 18px 28px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 10px 10px 0px 0;
    /* min/max-width: 310px removed — that fixed width per tab was the actual
       cause of the row overflowing once more than ~4 languages existed. */
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.1em;
    z-index: 99;
    white-space: nowrap;
}
.mlLangFilterItem.mlLangActive label {
    background-color: var( --main-bg-color);
    
}

.mlLangFilter {
    visibility: hidden;
    opacity: 0;
    width: 0;
    height: 0;
}

/* LANGUAGE TAB — CALM CARD STYLE (.mlTileStyle) -----------------------------
   White card, thin border, soft shadow — same visual language as the course
   cards, search bar, and level select elsewhere on this page, instead of the
   earlier full-bleed photo-tile treatment. The image lives in a small
   circular icon inside the card rather than as the card's own background, so
   the label text sits on a plain light surface and never needs a legibility
   overlay. (Still used as-is on the My Courses page's own language filter,
   which doesn't have this modifier class — that one intentionally wasn't
   touched here.) */
.mlLangFilterWrap.mlTileStyle {
    padding: 28px 30px 0;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}
.mlLangFilterWrap.mlTileStyle .mlLangFilterItem {
    border-radius: 14px;
    overflow: visible;
    background-color: transparent;
    border: 1.5px solid #d0dde8;
    box-shadow: none;
    flex-shrink: 0;
    width: 210px;
    transition: border-color .15s ease, background-color .15s ease;
}
.mlLangFilterWrap.mlTileStyle .mlLangFilterItem label {
    position: static;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--white);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 2;
}
.mlLangFilterWrap.mlTileStyle .mlLangIcon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #5a7a8f; /* fallback when no thumbnail is set on the term */
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 2px rgba(20, 63, 94, .2);
}
.mlLangFilterWrap.mlTileStyle .mlLangFilterItem .heading {
    color: var(--blue);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    /* Every tile is the same fixed width now, so a short name like
       "Français" sits on one line while a long one like "North American
       English" wraps to two — same width either way, instead of one tile
       stretching wide while its neighbors stay compact. The row's own
       align-items:stretch (set on .mlLangFilterWrap.mlTileStyle) then makes
       every tile in the row match whichever one ends up tallest, so a
       two-line neighbor doesn't leave the one-line tiles looking short. */
}
.mlLangFilterWrap.mlTileStyle .mlLangFilterItem.mlLangActive {
    border-color: var(--accent);
    box-shadow: none;
}
.mlLangFilterWrap.mlTileStyle .mlLangFilterItem.mlLangActive label {
    background: var(--main-bg-color);
}
.mlLangFilterWrap.mlTileStyle .btn-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Corner style toggle — ML Suite > Course Listing Style. Rounded (default)
   is a circular icon; Square is a rounded-square icon. Only the small icon
   is affected — the card itself, search, select, and course cards keep
   their rounded corners regardless, since this setting is specifically
   about the language/track images, not the page's corner radius generally. */
.mlSquareTiles .mlLangIcon,
.mlSquareTiles .mlTrackIcon {
    border-radius: 10px;
}

/* TRACK ROW (exam-track children: FIDE FR, DELF, etc.) ---------------------
   One row per language, only the active language's row is shown. Each tile
   shares one identical treatment — Standard included — sized deliberately
   smaller than the language tabs above so the hierarchy stays legible.
   Tiles take a background-image from term meta ("track_thumbnail" on the
   parent for Standard, "thumbnail" on the child term for exam tracks) and
   fall back to a flat color when no image has been set yet. */
.mlTrackWrap {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 16px 30px 0;
    background-color: transparent;
    flex-wrap: wrap;
}
.mlTrackWrap.mlTrackWrapActive {
    display: flex;
}
.mlTrackItem {
    position: relative;
    border-radius: 18px;
    background: var(--white);
    border: 1.5px solid #d0dde8;
    flex-shrink: 0;
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.mlTrackItem label {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    cursor: pointer;
    margin: 0;
}
.mlTrackIcon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 2px rgba(20, 63, 94, .15);
}
.mlTrackItem .mlTrackLabelText {
    color: var(--blue);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}
.mlTrackItem.active {
    border-color: var(--accent);
    background: var(--main-bg-color);
    box-shadow: none;
}
.mlTrackFilter {
    visibility: hidden;
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* SETTINGS GEAR + POPUP -----------------------------------------------------
   Gear icon sits at the trailing edge of the language tab row. Clicking it
   opens the language-settings panel as an anchored popup rather than
   requiring a separate page — see mlLangSettingsGear handling in
   listing-filters.js and lib/settings/language-settings.php for the content. */
.mlLangSettingsGearItem {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    align-self: center;
}
.mlLangSettingsGearItem label {
    height: 100%;
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #7c93a4;
    border-radius: 10px 10px 0 0;
}
.mlLangSettingsGearItem label:hover {
    background-color: var(--main-bg-color);
    color: var(--hoverblue);
}
.mlLangSettingsGearIcon {
    font-size: 18px;
    line-height: 1;
}

.mlLangSettingsPopupBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(20, 63, 94, .35);
    z-index: 998;
}
.mlLangSettingsPopupBackdrop.open {
    display: block;
}

.mlLangSettingsPopup {
    display: none;
    /* position/top/left are set inline by JS on open (see
       positionPopupUnderGear() in listing-filters.js) now that this popup
       is moved to a direct child of <body> when opened, rather than being
       positioned relative to a parent in the language row. */
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    overflow-y: auto;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 16px 44px rgba(20, 63, 94, .28);
    z-index: 999;
}
.mlLangSettingsPopup.open {
    display: block;
}
.mlLangSettingsPopupHead {
    position: sticky;
    top: 0;
    /* Without this, the positioned preview tiles below (.mlTrackItem etc.)
       paint over the sticky header when the popup body scrolls. */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background-color: var(--white);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 15px;
    color: var(--blue);
}
.mlLangSettingsPopupClose {
    cursor: pointer;
    color: #8ba0b0;
    font-size: 16px;
}
.mlLangSettingsPopup .mlLangSettingsWrap {
    border: none;
}
.mlLangSettingsPopup .mlLangSettingsBody {
    padding: 18px 20px 22px;
}

@media screen and (max-width: 767px) {
    .mlLangSettingsPopup {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: 0;
        width: auto;
        max-width: none;
        max-height: 85vh;
        border-radius: 10px 10px 0 0;
    }
}

.filter_toggle span:not(.mlFilterEyebrow) {
    display: none;
}
.mlFilterEyebrow {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--hoverblue);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
}
.filter_toggle {
    padding: 0;
}
.mlFilters .filter_toggle {
    padding: 56px 30px 0;
}
/* The .filter_toggle { display:none } rule above (min-width:768px) was
   written when this element was purely a mobile-only tap target to reveal
   the filter panel — desktop never needed it since filters were always
   visible there. It's now repurposed to also carry the "What are you
   looking for?" eyebrow label on desktop, on the Courses page specifically
   — so it needs to override that hide rule here, scoped by the Courses
   page's own wrapper ID so the My Courses page (which reuses the same
   .mlFilters class name and still only wants this on mobile) is unaffected. */
#mlListingCoursesShortcode .filter_toggle {
    display: flex;
    align-items: center;
}

/* LOAD MORE */
.btnLoadmoreWrapper {
    display: flex;
}
.mlLoadMoreCoursesbtn {
    display: block;
    margin: 0 auto 30px;
    width: fit-content;
    padding: 15px 25px;
    background: var(--accent2)!important;
    color: var(--white)!important;;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.mlLoadMoreCoursesbtn:hover {
    background: var(--blue)!important;
    transform: translateY(-1px);
}



/* Tablet */

@media screen and (min-width: 768px) and (max-width: 1100px) {

    .mlListingWrapper{
        grid-template-columns: repeat(2, 1fr);
    }

    .mlLangTab {
        max-width: 280px;
        gap: 10px;
        padding: 10px 14px;
    }

    .mlTabLanFlag{
        width: 50px;
    }

}

/* Mobile */

@media screen and (max-width: 767px) {

    .mlListingWrapper{
        grid-template-columns: repeat(1, 1fr);
            padding: 10px;
        
    }

    /* .mlLangTab {
        flex-direction: column;
        gap: 10px;
        padding: 10px 14px;
        width: 140px;
        text-align: center;
    }

    .mlTabLanFlag{
        width: 50px;
    } */
    /* Lang Filters — horizontally scrollable pill chips */
    .mlLangFilterWrap {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding: 10px 12px 10px;
        background: #fff;
        border-bottom: 1px solid var(--border);
        scrollbar-width: none;
        /* fade hint on the right so users know there's more */
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
        mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    }
    .mlLangFilterWrap::-webkit-scrollbar {
        display: none;
    }
    .mlLangFilterItem {
        flex: 0 0 auto;
        min-width: 0;
    }
    .mlLangFilterItem label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        border: 1.5px solid #d0dde8;
        color: var(--blue);
        background: var(--white);
        cursor: pointer;
        white-space: nowrap;
        min-width: max-content;
        flex-shrink: 0;
        height: auto;
        line-height: 1.2;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .mlLangFilterItem label .heading,
    .mlLangFilter + label .heading {
        white-space: nowrap;
        font-size: 13px;
        font-weight: 600;
    }
    .mlLangFilterItem.mlLangActive label {
        background: var(--blue);
        color: var(--white);
        border-color: var(--blue);
    }
    .mlLangFlag {
        max-width: 22px;
        max-height: 15px;
    }

    /* Track row — same compact flat-pill treatment as the language row on
       mobile, one size smaller. */
    .mlTrackWrap {
        padding: 8px 12px 0;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mlTrackWrap::-webkit-scrollbar {
        display: none;
    }
    .mlTrackItem {
        border-radius: 18px;
        box-shadow: none;
    }
    .mlTrackItem label {
        padding: 7px 13px;
        gap: 6px;
    }
    .mlTrackIcon {
        width: 16px;
        height: 16px;
    }
    .mlTrackItem .mlTrackLabelText {
        font-size: 12px;
    }
    .mlTrackItem.active {
        border-color: var(--blue);
        background: var(--blue);
    }
    .mlTrackItem.active .mlTrackLabelText {
        color: var(--white);
    }

    /* Language tab, mobile — back to the compact flat pill from the original
       plugin (small text, thin border, tiny flag, solid-fill active state)
       instead of the heavier icon-card treatment used on desktop. Desktop
       is untouched; this is scoped to this breakpoint only. */
    .mlLangFilterWrap.mlTileStyle {
        padding: 10px 12px;
        gap: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    }
    .mlLangFilterWrap.mlTileStyle::-webkit-scrollbar {
        display: none;
    }
    .mlLangFilterWrap.mlTileStyle .mlLangFilterItem {
        width: auto;
        flex-shrink: 0;
        border-radius: 20px;
        border: 1.5px solid #d0dde8;
        box-shadow: none;
    }
    .mlLangFilterWrap.mlTileStyle .mlLangFilterItem label {
        padding: 8px 14px;
        gap: 7px;
        border-radius: 20px;
        background: transparent;
    }
    .mlLangFilterWrap.mlTileStyle .mlLangIcon {
        width: 20px;
        height: 20px;
    }
    .mlLangFilterWrap.mlTileStyle .mlLangFilterItem .heading {
        font-size: 13px;
        white-space: nowrap;
    }
    .mlLangFilterWrap.mlTileStyle .mlLangFilterItem.mlLangActive {
        border-color: var(--blue);
        box-shadow: none;
    }
    .mlLangFilterWrap.mlTileStyle .mlLangFilterItem.mlLangActive label {
        background: var(--blue);
    }
    .mlLangFilterWrap.mlTileStyle .mlLangFilterItem.mlLangActive .heading {
        color: var(--white);
    }

    .mlSquareTiles .mlLangIcon,
    .mlSquareTiles .mlTrackIcon {
        border-radius: 8px;
    }

    .mlComboFilter {
        flex-direction: column;
    }
    .mlComboFilter .mlLevelFilterWrap {
        border-right: none;
        border-bottom: 1.5px solid var(--border);
    }
    .mlComboFilter select.mlLevelFilter {
        width: 100%;
        border-radius: 14px 14px 0 0;
    }
    .mlComboFilter .mlSearchInput {
        border-radius: 0 0 14px 14px;
    }
    .mlFilters .filter_toggle {
        padding: 36px 16px 0;
    }
    .mlInnerSection.mlComboLayout {
        padding: 4px 16px 36px;
    }

    /* Titles */
    .ml_title, .heading {
        font-size: 20px;
    }
.mlLangFilter + label .heading {
    font-size: 15px;
}
    .mlAllCoursesWrapper .ml_title {
        padding: 0;
        margin-top: 20px!important;
    }
    .mlResultHead {
        padding: 0 16px;
    }

    /* other filters  */

    .mlInnerSection {

        flex-direction: column;
        padding: 10px;
    }
    .mlLevelFilterWrap {
        margin-bottom: 15px;
    }
    .mlAdditionalFilters.mlInnerSection {
        display: none;
    }
    .mlPopularSearches {
        flex-direction: column;
    }
    .mlPopularSearchesItems {
        flex-wrap: wrap;
    }
    .searchItem {
        flex: 0 0 auto;
    }
    .filter_toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 0px;
    }
    .filter_toggle .ml_title{
        margin: 0px;
    }
    .filter_toggle span {
        display: flex;
        align-items: center;
    }
    
    .filter_toggle_svg svg {
        max-width: 30px;
        height: 20px;
        margin-right: 8px;
    }
}




/* SLIDERS COURSES SHORTCODE */

.myActiveCoursesSlider {
    display: flex;
}

.myActiveCoursesSlider .mlCol {
    width: 100%;
}
.mlCol.left {
    display: flex;
    flex-direction: column;
    max-width: 65%;
    padding: 30px 60px 30px 30px;
}
.mlCol.right {

    max-width: 35%;

}

.courseNameSlider .mlCourseTitle {
    font-size: 36px;
}
.mlSlideWrap .mlCourseTitle {
    font-size: 20px;
}
.mlCol.left > .heading {
    font-weight: 400;
    font-size: 16px;
}
.topicsSlider .splide__slide {
    cursor: grab;
}

.splide {
    width: 100%;
}
.courseNameSlider  {
    /* margin-bottom: 30px; */
}

.navBtn {
    z-index: 4;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.navBtn.swiper-topic-next {
    right: -26px;
    display: flex;
}
.navBtn.swiper-topic-prev {
    left: -26px;
    display: flex;
    transform: translateY(-50%) rotate(180deg);
}
.topicsSliderWrap {
    position: relative;
}

.navBtn.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.topicsSlider .splide__slide .mlTopicTitle {
    font-size: 16px;
    margin: 0px;
    text-align: center;
}

.mlTopicSlide {
    width: 100%;
    padding: 10px 30px;
}

.mlTopicInfo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px;
    align-items: center;
    background-color: var(--slide);
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
}


.topicsSlider .splide__slide.is-active .mlTopicInfo {
    background-color: var(--blue);
    padding: 10px;
    margin-top: 0px;
}

.topicsSlider .splide__slide.is-active .mlTopicTitle {
    color: var(--white);
}

.mlTopicSlide .progress {
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}
.splide__slide.is-active .mlTopicSlide .progress {
    opacity: 1;
    visibility: visible;
}
.mlSlideWrap .thumbWrapper img {
    max-width: 70%;
    margin-left: auto;
}
@media screen and (max-width: 998px) {
    .mlCol.right {
        display: none;
    }
    .mlCol.left {
        max-width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .courseNameSlider .mlCourseTitle {
        font-size: 20px;
    }
    .mlCol.left {
        padding: 10px;
    }
    .mlCol.left > .heading {
        
        font-size: 16px;
    }
    .mlTopicSlide {

        padding: 10px;
    }
    .topicsSlider .splide__slide.is-active .mlTopicInfo {

        padding: 15px;
    }
    .topicsSlider .splide__slide .mlTopicTitle {
        font-size: 14px;
    }
    .courseNameSlider {
        margin-bottom: 6px;
    }
}


/* MY COURSES STYLES */
.mlMyCoursesShortcode {
    margin-bottom: 30px;
}
.mlMyCoursesShortcode .mlLatestCourseSliderWrap .mlRow {
    position: relative;
    width: 100%;
}
.mlLatestCourseSliderWrap .mlRow.mediumPadding {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 5px;
    box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 5%);
    -moz-box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 5%);
    -webkit-box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 5%);
    margin-top: 20px;
    margin-bottom: 20px;
}
.mlMyCoursesShortcode .mlLatestCourseSliderWrap .mlLangBox{
    background: #ffffffe8;
    display: flex;
    align-items: center;
    padding: 10px 6px;
    position: absolute;
    border-radius: 10px;
    z-index: 1;
    font-size: 14px;
    top: 5px;
    left: 5px;
}
.mlMyCoursesShortcode.mediumPadding{ 
    padding: 30px 60px;
    background-color: var(--main-bg-color);
}
/* Images */
.mlMyCoursesShortcode .mlLatestCourseSliderWrap .mlLangFlag {
    max-width: 60px;
    max-height: 35px;
}

.mlMyCoursesShortcode .mlLatestCourseSliderWrap .mlLangFlagThumb{
    display: inline-block;
    width: 24px;
    margin-right: 5px;
}
.mlMyCoursesShortcode .mlLatestCourseSliderWrap .thumbWrapper img {
    border-radius: 5px;
    width: 100%;
	height: 175px;
    object-fit: cover;
    object-position: top;
}

/* Progress */
.mlMyCoursesShortcode .mlLatestCourseSliderWrap .courseProgress .mlProgressBar {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.mlMyCoursesShortcode .mlLatestCourseSliderWrap .courseProgress .mlProgressBarFill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    min-width: 4px;
    transition: width 0.3s ease;
}
.mlMyCoursesShortcode .mlLatestCourseSliderWrap .courseProgress .mlPercentage {
    flex: 0 50px;
    font-weight: bold;
    color: var(--blue);
}
.mlMyCoursesShortcode .mlLatestCourseSliderWrap .courseProgress {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding: 0px 20px;
}

/* Topics Slider  */
.mlMyCoursesShortcode .mlActiveCourseTopicsWrap {
    position: relative;
    padding: 10px 0px;
    margin: 0px 26px 20px;
}

.mlMyCoursesShortcode .mlTopicInfo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    align-items: center;
    background-color: var(--slide);
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.mlMyCoursesShortcode .mlActiveCourseTopicsWrap .splide__slide .mlTopicTitle {
    font-size: 18px;
    margin: 0px;
    text-align: center;
}
.mlMyCoursesShortcode .mlActiveCourseTopicsWrap .splide__slide.is-active .mlTopicTitle a {
    color: var(--white);
}
.mlMyCoursesShortcode .mlActiveCourseTopicsWrap .mlTopicTitle:hover {
    color: inherit;
}
.mlMyCoursesShortcode .mlActiveCourseTopicsWrap  .splide__slide.is-active .mlTopicInfo {
    background-color: var(--blue);
    padding: 16px;
    margin-top: 0px;
}
.mlMyCoursesShortcode .mlRightArrow {
    background: var(--accent);
    border-radius: 50%;
    padding: 8px 7px;
    width: 40px;
    height: 40px;
    fill: var(--white);
    transition: 0.2s linear;
}
.mlMyCoursesShortcode .mlActiveCourseTopicsWrap .splide__slide {
    flex-direction: column;
    cursor: grab;
}
.mlMyCoursesShortcode .navBtn.swiper-topic-prev {
    left: -26px;
    display: flex;
    transform: translateY(-50%) rotate(180deg);
}
.mlMyCoursesShortcode .navBtn.swiper-topic-next {
    right: -26px;
    display: flex;
}
.mlMyCoursesShortcode .navBtn {
    z-index: 4;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.mlMyCoursesShortcode a.mlCourseButton.completed {
    background: var(--completed)!important;  
}
.mlMyCoursesShortcode a.ld-course-resume.ld-button:before {
    content: '';
    background: url(/wp-content/plugins/ml-mylinguistics/assets/img/play.svg);
    width: 22px;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
}


/* Navigation */
.mlMyCoursesShortcode .coursesNav {
    display: flex;
    row-gap: 10px;
    align-items: stretch;
    margin-bottom: 20px;
}
.mlMyCoursesShortcode .nav_block{
    width: fit-content;
    max-width: 40%;
}
.mlMyCoursesShortcode .prev_course.nav_block {
    margin-right: auto;
}
.mlMyCoursesShortcode .next_course.nav_block {
    margin-left: auto;
}
.nav_block img {
    height: 85px;
    object-fit: cover;
    margin: -5px 0;
}
.mlMyCoursesShortcode .nav_block a {
    background-color: var(--blue);
    padding: 5px 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 5px;
    text-decoration: none;
    height: 100%;
}
.mlMyCoursesShortcode .course_link .arrow {
    display: flex;
}
.mlMyCoursesShortcode .prev_course_btn.arrow {
    transform: rotate(180deg);
}
.mlMyCoursesShortcode .prev_course_title p,
.mlMyCoursesShortcode .prev_course_title h6 {
    color: var(--white);
    margin: 0px;
    text-align: right;
}
.mlMyCoursesShortcode .next_course_title p,
.mlMyCoursesShortcode .next_course_title h6 {
    color: var(--white);
    margin: 0px;
}
.mlMyCoursesShortcode .next_course_title p, 
.mlMyCoursesShortcode .prev_course_title p {
    font-size: 12px;
}
.mlMyCoursesShortcode .next_course_title h6,
.mlMyCoursesShortcode .prev_course_title h6 {
    font-size: 14px;
}
@media screen and (max-width: 998px) {
    .mlMyCoursesShortcode .mediumPadding {
        padding: 15px 20px;
    }
    .mlMyCoursesShortcode  .nav_block a {
        padding: 25px 10px;
    }
    .mlMyCoursesShortcode .nav_block img {
        display: none;
    }
}
@media screen and (max-width: 767px) {
    .mlMyCoursesShortcode .mlLatestCourseSliderWrap .thumbWrapper img {
        height: 125px;
    }
    .mlMyCoursesShortcode .coursesNav {
        flex-direction: column;
    }
    .mlMyCoursesShortcode .prev_course_title {
        margin-left: auto;
    }
    .mlMyCoursesShortcode .nav_block {
        width: 100%;
        max-width: 100%;
    }
}

.mlCoursesInProgressList, .mlFiltersForm .mlRow {
    background-color: var(--main-bg-color);
    padding-top: 30px;

}
.mlCoursesInProgressList{
    border-radius: 0px 0px 10px 10px;
}
.mlFiltersForm .mlRow {
    border-radius: 0px 10px 0px 0px;
}
.mlInProgressCourseItem {
    padding: 20px 30px;
}
.mlInProgressCourseItem {
    border-bottom: 1px solid var(--border);
}
.mlInProgressCourseItem:first-child {
    border-top: 1px solid var(--border);
}
.mlInProgressCourseItem:last-child {
    border-bottom: 0px;
}
.mlLevelFilterWrap {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.mlLevelFilterWrap label {
    cursor: pointer;
    font-size: 20px;
    padding: 10px 20px;
}

.mlLevelFilterWrap input[name="mlLevelFilter"] {
    position: absolute;
    left: -99999px;
    opacity: 0;
    visibility: hidden;
}

.mlLevelFilterWrap input[name="mlLevelFilter"] + label {
    border-bottom: 5px solid transparent;
    transition: 0.2s;
}
.mlLevelFilterWrap input[name="mlLevelFilter"]:checked + label {
    border-bottom: 5px solid var(--blue);
    font-weight: bold;
}

.mlLevelFilterWrap input[name="mlLevelFilter"]:not(:checked) + label:hover {
    opacity: 0.9;
    transform: scale(1.1);
}

.mlInProgressItemWrapper {
    display: flex;
    position: relative;
    align-items: center;
}
.mlInProgressItemWrapper > div {
    width: 50%;
}
.mlInProgressItemWrapper .mlCourseTitle {
    padding-right: 20px;
}
.mlInProgressItemWrapper .progress {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}

.mlInProgressItemWrapper .progress .learndash-wrapper {
    display: flex;
    align-items: center;
}

.mlInProgressItemWrapper .progress .learndash-wrapper  .ld-progress {
    width: 100%;
}

.mlInProgressItemWrapper .progress_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mlInProgressItemWrapper .progress_wrap .learndash-wrapper.learndash-widget {
    width: 100%;
}

.mlInProgressItemWrapper .progress_wrap .mlPercentage {
    flex: 1 0 53px;
    font-weight: bold;
    color: var(--blue);
}

.mlInProgressCourseItem .mlInProgressItemWrapper:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -30px;
    height: calc(100% + 41px);
    background-color: var(--blue);
    width: 3px;
    transform: translate(-50%, -50%);
    z-index: 2;
}


.mlInProgressCourseItem .mlInProgressItemWrapper:after {
    content: '';
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 30px;
    width: 30px;
    background-color: var(--main-bg-color);
    border-radius: 50%;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    border: 2px solid var(--blue);
    z-index: 5;
}
.mlInProgressItemWrapper[data-status="Completed"]:after {
    background-image: url(/wp-content/plugins/ml-mylinguistics/assets/img/check.svg);
    background-color: var(--blue);
}
.mlInProgressItemWrapper[data-status="In Progress"]:after {
    background-image: url(/wp-content/plugins/ml-mylinguistics/assets/img/loading.svg);
    background-color: var(--blue);
    background-size: 80%;
}
.mlMyLevelData {
    padding: 30px;
    margin: 0 30px 30px;
    background: var(--slide);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    gap: 60px;
    align-items: center;
}
.mlMyLevelData .mlMyLevelDataItem {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.mlMyLevelData .heading {
    margin: 0;
    font-size: 32px;
}
@media screen and (min-width: 768px) {
    .filter_toggle {
        display: none;
    }

}
@media screen and (max-width: 740px) {
    .mlInProgressItemWrapper {
        align-items: flex-start;
        flex-direction: column;
    }
    .mlInProgressItemWrapper > div {
        width: 100%;
    }
    .mlCourseTitleWrap {
        margin-bottom: 10px;
    }
    .mlCourseTitleWrap .mlCourseTitle {
        font-size: 16px;
        padding-right: 0;
    }
    .mlInProgressItemWrapper .progress_wrap .mlPercentage {
        flex: 1 0 30px;
        font-size: 12px;
    }
    .mlInProgressItemWrapper .progress {
        grid-gap: 14px;
    }
    .mlLevelFilterWrap {
        gap: 5px;
        flex-wrap: wrap;
    }
    .mlLevelItem {
        text-align: center;
        flex: 1 0 50%;
        max-width: calc(50% - 3px);
    }
    .mlLevelFilterWrap label {
    font-size: 14px;

    padding: 3px;
    }
    .mlLevelFilterWrap input[name="mlLevelFilter"]:checked + label {
        border-bottom: 2px solid var(--blue);
    }
    .mlMyLevelData {
        gap: 14px;
        flex-direction: column;
    }
    .mlMyLevelData .heading {
        font-size: 22px;
    }
}

/* MY COURSES — language tile row --------------------------------------------
   Same wrapping tile row + track row as the Courses page, spaced for the
   "Courses in Progress" panel underneath. */
.mlCoursesInProgress .mlLangFilterWrap.mlTileStyle {
    padding: 0 0 16px;
}
.mlCoursesInProgress .mlTrackWrap {
    padding: 0 0 16px;
}
.mlCoursesInProgress .mlFiltersForm .mlRow {
    border-radius: 10px 10px 0 0;
}
@media screen and (max-width: 767px) {
    .mlCoursesInProgress .mlLangFilterWrap.mlTileStyle {
        padding: 0 0 10px;
    }
    .mlCoursesInProgress .mlTrackWrap {
        padding: 0 0 10px;
    }
}