/**
 * Combined Modules Layout
 *
 * Styles for [lde_fachbereich_modulliste] and [lde_kombinierte_kurse] shortcodes.
 * Migrated from theme: hello-theme-child
 *
 * @package LDE Module Landingpages
 */

/**** globals ****/



/**** wrapper ****/
.lde-combined-courses {
    width: 100%;
}

/**** course-boxes ****/
.lde-combined-courses .cols {
    display: flex;
}

.lde-combined-courses-main, .lde-combined-courses-additional {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
}

.lde-combined-courses-main {
    margin-top: 8px;
}

.lde-combined-courses .left, .lde-combined-courses .right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
}

.lde-combined-courses .right {
    margin-left: 2rem;
}

.lde-combined-courses .middle {
    flex-grow: 1;
}

.lde-combined-courses-main, .lde-combined-courses-additional, #lde-combined-courses-cta {
    width: calc(100% - 46px);
    margin-left: 46px;
    position: relative;
}

/**** title and checkbox ****/
.checkbox-and-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.5rem;
}
/**** /title and checkbox ****/


/**** checkbox ****/
.lde-combined-courses .checkbox-button {
    cursor: pointer;
    position: relative;
}

.lde-combined-courses .checkbox-button svg .box {
    opacity: 0.8;
    transition: opacity 0.1s ease-out;
}

.lde-combined-courses .checkbox-button:hover svg .box {
    opacity: 1;
}

.lde-combined-courses .checkbox-button svg .checkmark {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.selected .checkbox-button svg .checkmark, .selected .checkbox-button svg .box, .checkbox-button.locked svg .checkmark {
    opacity: 1;
}
/**** /checkbox ****/


/**** title ****/
.lde-combined-courses .course-title {
    line-height: 1.2;
    margin-left: 0.7rem;
    user-select: none;
}
/**** /title ****/


/**** date ****/
.course-dates.cols {
    align-items: flex-start;
}

.lde-combined-courses .course-dates {
    margin-bottom: 0.6rem;
}

.lde-combined-courses .course-dates, .lde-combined-courses .course-text {
    font-size: 16px;
    font-weight: 300;
}

.lde-combined-courses .course-duration {
    margin-right: 2rem;
}

.lde-combined-courses .course-duration, .lde-combined-courses .course-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.lde-combined-courses .course-duration img, .lde-combined-courses .course-start img {
    width: 24px;
    margin-right: 0.3rem;
}

.reduced-course-duration.course-duration {
    padding-left: calc(24px + 0.3rem);
}

.reduced-course-info-text {
    padding-left: calc(24px + 0.3rem);
    font-size: 0.9em;
    margin-top: -0.6rem;
    margin-bottom: 0.6rem;
}
/**** /date ****/


/**** spacer between main-course and additional wrapper ****/
.lde-combined-courses-spacer {
    padding: 22px 0;
}
/**** /spacer between main-course and additional wrapper ****/


/**** special-courses ****/
.lde-combined-courses-additional {
    padding: 20px 0 0 0;
}

.lde-combined-courses .additional-course {
    padding: 0 30px 1rem 30px;
    border-bottom: 1px solid;
    margin-bottom: 1rem;
}

.lde-combined-courses .additional-course:last-of-type {
    border-bottom: 0;
}
/**** /special-courses ****/


/**** button ****/
#lde-combined-courses-cta {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    border-radius: 10px;
    margin-top: 40px;
    padding: 20px 0;
}

#lde-combined-courses-cta .elementor-button {
    width: 60%;
    transform: scale(0.9);
    transition-delay: 0.2s;
    cursor: pointer;
}

#combined-courses-cta-button {

}

#lde-combined-courses-cta .elementor-button.ready {
    background-color: #32B7B7;
    transform: scale(1);
}

#lde-combined-courses-cta .elementor-button-content-wrapper {
    position: relative;
    z-index: 2;
}

#lde-combined-courses-cta .elementor-button:hover:after {
    content: '';
    background-color: rgb(0 0 0 / 10%);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}


#combined-courses-cta-button .loading {
    display: none
}

#combined-courses-cta-button.is-loading .loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

#combined-courses-cta-button.is-loading .elementor-button-content-wrapper {
    visibility: hidden;
}
/**** /button ****/


/**** progress meter ****/
.number-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.number-square {
    display: flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-weight: 800;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
}

.number-row .number-text {
    font-weight: 700;
    margin: 0;
}

.number-row .group-heading-and-text {
    padding-left: 15px;
}

#lde-combined-courses-cta .number-square {
    position: absolute;
    left: -48px;
}

.number-line {
    background-color: #b7b6b6;
    position: absolute;
    left: -29px;
    width: 6px;
    border-radius: 3px;
}

.main-course .number-line {
    top: -4px;
    height: calc(100% + 22px);
    background-color: #202020;
}

#lde-combined-courses-second {
    position: relative;
}

#lde-combined-courses-second .number-line {
    top: -18px;
    height: calc(100% + 7px);
    overflow: hidden;
}
/**** /progress meter ****/


/**** optional intro-text in number-line ****/
#lde-combined-courses-second .number-row {
    position: relative;
    z-index: 2;
}

.number-row.with-intro {
    align-items: flex-start;
}

.number-row.with-intro .number-text {
    margin-top: 10px;
    margin-bottom: 10px;
}
/**** /optional intro-text in number-line ****/



/**** animated line ****/
.lde-list-line-wrap {
    background-color: #b7b6b6;
    position: absolute;
    left: 17px;
    width: 6px;
    border-radius: 3px;
    z-index: 1;
    overflow: hidden;
}

#lde-combined-list-line {
    top: -18px;
    height: calc(100% + 67px);
}

.lde-combined-courses #additional-line-marker {
    width: 100%;
    background-color: #202020;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
}

/* if list is rendered in wishlist, enforce full height since the animation is disable there */
.lde-combined-courses .is_wishlist #additional-line-marker {
    height: 100%;
}
/**** /animated line ****/


/**** overlay ****/
body.overlay-active {
    overflow: hidden;
}

#lde-combined-courses-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    background-color: #212020c2;
    display: none;
    align-items: center;
    justify-content: center;
}

#lde-combined-courses-overlay.active {
    display: flex;
}

#lde-combined-courses-overlay .inner {
    max-height: 80vh;
    background-color: transparent;
    margin-top: 10vh;
    max-width: 60rem;
    /*padding: 1.5rem 1rem 0 1rem;*/
    padding: 0;
}

#lde-combined-courses-overlay.with-content .inner {
    overflow-y: scroll;
    background-color: #f2f2f2;
}

#lde-combined-overlay-close {
    position: absolute;
    right: 3em;
    top: 3em;
    font-weight: 600;
    fill: #FFFFFF;
    color: #000;
    background-color: #f2f2f2;
    border-radius: 10px;
    padding: 7px 12px;
    transition: background-color 0.3s ease-in-out;
    cursor: pointer;
}

#lde-combined-overlay-close:hover {
    background-color: #d9d8d8;
}

/* disable info-page elements */
#lde-combined-courses-overlay .lde-overlay-hidden {
    display: none;
}

/* hero in overlay */
#lde-combined-courses-overlay .lde-section-hero {
    padding-left: 3rem;
    padding-right: 3rem;
}


/* spinner */
#lde-combined-courses-overlay .loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lde-ring,
.lde-ring div {
    box-sizing: border-box;
}
.lde-ring {
    --lde-ring-width: 80px;
    display: inline-block;
    position: relative;
    width: var(--lde-ring-width);
    height: var(--lde-ring-width);
}

.lde-ring.small {
    --lde-ring-width: 40px;
}

.lde-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: calc(var(--lde-ring-width) - (var(--lde-ring-width) * 0.2));
    height: calc(var(--lde-ring-width) - (var(--lde-ring-width) * 0.2));
    margin: calc(var(--lde-ring-width) * 0.1);
    border: calc(var(--lde-ring-width) * 0.1) solid currentColor;
    border-radius: 50%;
    animation: lde-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: currentColor transparent transparent transparent;
}
.lde-ring div:nth-child(1) {
    animation-delay: -0.45s;
}
.lde-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.lde-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lde-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/**** overlay ****/


/**** DEPARTMENT-LIST TEMPLATE ****/
#lde-department-list {
    position: relative;
}

#lde-department-list-line {
    top: 66px;
    height: calc(100% - 143px);
}

#lde-combined-courses-cta .number-square {

}

#lde-department-list-line-marker {

}

#lde-department-list .number-row {
    position: relative;
    z-index: 2;
}

.lde-combined-courses .number-square img {
    display: block;
    width: 70%;
    height: 70%;
    object-fit: contain;
    object-position: center;
}
/**** DEPARTMENT-LIST TEMPLATE ****/


/**** WISHLIST BUTTON ****/
.lde-combined-courses .right:not(.is-wishlist) {
    align-items: center;
    justify-content: space-between;
}

.lde-add-to-wishlist-button {
    padding: 0;
    margin-left: 1rem;
    position: relative;
    transition: transform 0.2s ease-out;
    transform-origin: center;
    cursor: pointer;
    user-select: none;
    font-size: 1rem;
    font-weight: 300;
}

.lde-add-to-wishlist-button:hover {
    /*transform: scale(1.1);*/
}

.lde-wishlist-heart-wrap {
    margin-right: 0.4rem;
    position: relative;
}

.lde-wishlist-heart-wrap .heart-image {
    display: block;
    width: 28px;
}

.lde-wishlist-heart-wrap .heart-filled {
    position: absolute;
    left: 0;
    top: -2px;
    width: 28px;
    height: 28px;
    transition: color 0.2s ease-out;
    display: block;
    color: transparent;
}

.lde-wishlist-heart-wrap .heart-filled.animated-heart {
    color: #32B7B7;
}

.lde-add-to-wishlist-button.clicked .heart-filled {
    color: #32B7B7;
}

.lde-add-to-wishlist-button.clicked .heart-image {
    visibility: hidden;
}

.lde-add-to-wishlist-button .heart-copy {
    position: absolute;
    pointer-events: none;
    opacity: 1;
}

.lde-add-to-wishlist-button .heart-copy.to-animate {
    transition: all 1s ease-out;
}
/**** /WISHLIST BUTTON ****/


/**** SPECIAL CASE: GROUPED MODULES IN 1 COURSE ****/
.course-content:not(.reduction-active) .reduced-course-info-text {
    display: none;
}

.course-content:not(.reduction-active) .reduced-course-duration {
    display: none;
}

.course-content.reduction-active .regular-duration-text {
    text-decoration: line-through;
}
/**** /SPECIAL CASE: GROUPED MODULES IN 1 COURSE ****/



@media screen AND (max-width: 550px) {
    .lde-combined-courses .cols {
        flex-wrap: wrap;
    }

    .lde-combined-courses-main, .lde-combined-courses-additional {
        padding: 20px;
    }

    .checkbox-button {
        flex-shrink: 0;
        width: 2rem;
    }

    .checkbox-button svg {
        width: 100%;
        height: auto;
        display: block;
    }

    .lde-combined-courses .course-dates, .lde-combined-courses .course-text {
        font-size: 1.1rem;
    }

    .lde-combined-courses .lde-combined-courses-additional {
        padding: 20px 0;
    }

    .lde-combined-courses .additional-course {
        position: relative;
        padding: 0 20px 1rem 20px;
    }

    .lde-combined-courses .course-dates {
        margin-bottom: 0.3rem;
    }

    .lde-combined-courses .course-duration, .lde-combined-courses .course-start {
        margin: 0 0 0.5em 0;
        line-height: 1.2;
    }

    .lde-combined-courses .course-duration img, .lde-combined-courses .course-start img {
        margin-right: 0.5rem;
        flex-shrink: 0;
    }

    .course-text {
        line-height: 1.3;
    }

    .lde-combined-courses .right {
        margin: 1rem 0 0 0;
        width: 100%;
    }

    #lde-combined-overlay-close {
        right: 10px;
        top: 14px;
        font-size: 1rem;
    }

    #lde-combined-courses-overlay .inner {
        max-height: 85vh;
    }
}