/* lists */

.wdt-timetable-container > .wdt-timetable-list {
    padding: 0;
    margin: -10px calc(-1 * clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem)); /* Min-20 & Max-30 */
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.wdt-timetable-container > .wdt-timetable-list > li {
    line-height: var(--wdtLineHeight_Ext);
    padding: 0;
    margin: 10px clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem); /* Min-20 & Max-30 */
}

.wdt-timetable-container > .wdt-timetable-list > li > a {
    font-weight: var(--wdtFontWeight_Base);
    font-size: clamp(1.375rem, 1.275rem + 0.5vw, 1.875rem); /* Min-22 & Max-30 */
    font-family: var(--wdtFontTypo_Ext);
    line-height: var(--wdtLineHeight_Ext);
    color: var(--wdtLinkColor);
    padding: 0 10px;
    position: relative;
}

.wdt-timetable-container > .wdt-timetable-list > li > a:before {
    content: "";
    position: absolute;
    bottom: 3px;
    right: 0;
    left: auto;
    width: 0;
    height: clamp(0.375rem, 0.3rem + 0.375vw, 0.75rem); /* Min-6 & Max-12 */
    pointer-events: none;
    z-index: -1;
    background-color: var(--wdtPrimaryColor);
    transition: var(--wdt-Ad-Transition);
    -webkit-transition: var(--wdt-Ad-Transition);
}

.wdt-timetable-container > .wdt-timetable-list > li.active > a:before,
.wdt-timetable-container > .wdt-timetable-list > li > a:hover:before {
    right: auto;
    left: 0;
    width: 100%;
}


/* -----------------
content wrapper
------------------- */

.wdt-timetable-container > .wdt-timetable-content-wrapper {
    margin-top: clamp(2.5rem, 2.25rem + 1.25vw, 3.75rem); /* Min-40 & Max-60 */
    border: 2px solid var(--wdtBorderColor);
    border-radius: var(--wdtRadius_3X);
    -webkit-border-radius: var(--wdtRadius_3X);
    overflow: hidden;
}

/* table */
.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table { 
    margin: 0; 
    table-layout: fixed;
}

/* table header */
.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table > thead {
    border-style: solid;
    border-color: var(--wdtBorderColor);
    border-width: 0 0 2px;
}

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table > thead th {
    font-weight: var(--wdtFontWeight_Ext);
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem); /* Min-14 & Max-20 */
    font-family: var(--wdtFontTypo_Ext);
    line-height: var(--wdtLineHeight_Ext);
    text-transform: capitalize;

    background: var(--wdtPrimaryColor);
    color: var(--wdtHeadAltColor);

    padding: clamp(1.875rem, 1.75rem + 0.625vw, 2.5rem) 10px; /* Min-30 & Max-40 */

    border-style: solid;
    border-color: var(--wdtBorderColor);
    border-width: 0 2px 0 0;
}

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table > thead th:last-child { border-width: 0; }


/* table body */
.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table > tbody > tr > td {
    background: var(--wdtTertiaryColor);
    color: var(--wdtHeadAltColor);
    font-size: var(--wdtFontSize_Ext);

    padding: 0;

    border-style: solid;
    border-color: var(--wdtBorderColor);
    border-width: 0 2px 2px 0;

    min-height: 100px;
    height: 100px;
    max-height: 100%;
}

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table > tbody > tr > td:first-child {
    padding: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem) 10px; /* Min-14 & Max-20 */
    vertical-align: middle;
}

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table > tbody > tr > td:last-child { border-width: 0 0 2px; }

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table > tbody > tr:last-child > td { border-bottom-width: 0; }

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table > tbody > tr > td > .wdt-timetable-wrapper:not(:last-child) {
    border-style: solid;
    border-color: var(--wdtBorderColor);
    border-width: 0 0 2px 0;
}

/* table contents */
.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content {
    display: grid;
    place-items: center;
    position: relative;
}

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--wdtTertiaryColor);
    z-index: 1;
    pointer-events: none;
    transition: var(--wdt-Ad-Transition);
    -webkit-transition: var(--wdt-Ad-Transition);
}

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper:hover .wdt-timetable-content:before {
    background-color: rgb(var(--wdtPrimaryColorRgb), 0.9);
}

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content > div {
    grid-area: 1/-1;
}

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content > div:not(.wdt-timetable-image) { z-index: 1; }

/* title & button */
.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content > .wdt-timetable-title,
.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content > .wdt-timetable-button a {
    font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem); /* Min-14 & Max-16 */
    font-weight: var(--wdtFontWeight_Base);
    font-family: var(--wdtFontTypo_Base);
    color: var(--wdtHeadAltColor);
    text-decoration: none;
}
.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content > .wdt-timetable-button a {
    background: linear-gradient(currentColor,currentColor) no-repeat bottom center / 100% 1px;
}
.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content > .wdt-timetable-button a:hover {
    background-size: 0% 1px;
}

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content > .wdt-timetable-button,
.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper:hover .wdt-timetable-content > .wdt-timetable-title {
    opacity: 0;
    transition: var(--wdtBaseTransition);
    -webkit-transition: var(--wdtBaseTransition);
}

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper:hover .wdt-timetable-content > .wdt-timetable-button,
.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content > .wdt-timetable-title {
    opacity: 1;
    transition: var(--wdtBaseTransition);
    -webkit-transition: var(--wdtBaseTransition);   
    transition-delay: 250ms;
} 


/* popup style */

.wdt-timetable-container .wdt-timetable-popup {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);

    display: none;
    pointer-events: none;
    transition: var(--wdt-Ad-Transition);
    -webkit-transition: var(--wdt-Ad-Transition);
}

.wdt-timetable-container .wdt-timetable-popup > .wdt-popup-overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.wdt-timetable-container .wdt-timetable-popup > .wdt-popup-content {
    max-width: 500px;
    width: calc(100% - 40px);
    height: fit-content;
    background: var(--wdtAccentTxtColor);
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    pointer-events: auto;
    padding: 40px;
    border-radius: var(--wdtRadius_3X);
}

/* close button */
.wdt-timetable-container .wdt-timetable-popup > .wdt-popup-content > span.wdt-popup-close {
    position: absolute;
    background: var(--wdtPrimaryColor);
    color: var(--wdtHeadAltColor);
    right: -20px;
    top: -20px;
    cursor: pointer;
    font-size: 0;
    height: 50px;
    width: 50px;
    line-height: 50px;
    border-radius: var(--wdtRadius_Full);
    -webkit-border-radius: var(--wdtRadius_Full);
    -webkit-transform: none;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    box-shadow: 0 0 0 1px var(--wdtPrimaryColor) inset, 0 0 0 3px var(--wdtHeadAltColor) inset;
    -webkit-box-shadow: 0 0 0 1px var(--wdtPrimaryColor) inset, 0 0 0 3px var(--wdtHeadAltColor) inset;
    -webkit-transition: var(--wdt-Ad-Transition);
    transition: var(--wdt-Ad-Transition);
}

.wdt-timetable-container .wdt-timetable-popup > .wdt-popup-content > span.wdt-popup-close::before,
.wdt-timetable-container .wdt-timetable-popup > .wdt-popup-content > span.wdt-popup-close::after {
    content: "" !important;
    width: 20px;
    height: 2px;
    background-color: currentColor;
    position: absolute;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 24px;
    left: 15px;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.wdt-timetable-container .wdt-timetable-popup > .wdt-popup-content > span.wdt-popup-close::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.wdt-timetable-container .wdt-timetable-popup > .wdt-popup-content > span.wdt-popup-close:hover {
    box-shadow: 0 0 0 1px var(--wdtPrimaryColor) inset, 0 0 0 3px var(--wdtPrimaryColor) inset;
    -webkit-box-shadow: 0 0 0 1px var(--wdtPrimaryColor) inset, 0 0 0 3px var(--wdtPrimaryColor) inset;
}

.wdt-timetable-container .wdt-timetable-popup > .wdt-popup-content > span.wdt-popup-close:hover::before {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.wdt-timetable-container .wdt-timetable-popup > .wdt-popup-content > span.wdt-popup-close:hover::after {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

/* form details */
.wdt-timetable-container .wdt-timetable-popup > .wdt-popup-content > .wdt-popup-class-title {
    margin: 0 0 6px;
    font-family: var(--wdtFontTypo_H4);
    font-weight: var(--wdtFontWeight_H4);
    line-height: var(--wdtLineHeight_H4);
    font-size: clamp(1.375rem, 1.275rem + 0.5vw, 1.875rem); /* Min-22 & Max-30 */
    text-transform: capitalize;
}

.wdt-timetable-container .wdt-timetable-popup > .wdt-popup-content form :is( input, select, textarea ) {
    margin-bottom: 10px;
}

.wdt-timetable-container .wdt-timetable-popup > .wdt-popup-content form button {
    margin-top: 20px;
}

/*  */

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper,
.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content,
.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content .wdt-timetable-image {
    height: 100%;
}

.wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table .wdt-timetable-wrapper .wdt-timetable-content img {
    height: 100%;
    object-fit: cover;
    transform: scale(0.982);
    -webkit-transform: scale(0.982);
    transform-origin: center center;
    -webkit-transform-origin: center center;

    max-height: 98px;
}


/* --------
Responisve
----------- */

@media (max-width: 1024px) {
    .wdt-timetable-container > .wdt-timetable-content-wrapper {
        overflow: auto;
        max-width: 100%;
        scroll-padding: 50px;
        scroll-snap-type: X mandatory;

        cursor: grab;
    }
    .wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table {
        width: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always; 
        overflow: auto
    }
    .wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table > thead th {
        width: clamp(6.25rem, 5.3977rem + 4.2614vw, 8.125rem); /* Min-100 & Max-130 */
    }

    /* sticky column */
    .wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table > tbody > tr > td:first-child {
        position: sticky;
        left: 0;
        z-index: 10;
        background-color: var(--wdtPrimaryColor);
    }

    .wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table > thead th {
        background-color: var(--wdtPrimaryColor);
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .wdt-timetable-container > .wdt-timetable-content-wrapper > .wdt-timetable-table > thead th:first-child {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 30;
    }


    /* ===== Scrollbar CSS ===== */

    /* Firefox */
    .wdt-timetable-container > .wdt-timetable-content-wrapper {
        scrollbar-width: thin; 
        scrollbar-color: var(--wdtBorderColor) transparent; 
    }

    /* Chrome, Edge, and Safari */
    .wdt-timetable-container > .wdt-timetable-content-wrapper::-webkit-scrollbar {
        width: 0; 
        display: none; 
    }

    .wdt-timetable-container > .wdt-timetable-content-wrapper::-webkit-scrollbar-track {
        background: transparent; 
    }

    .wdt-timetable-container > .wdt-timetable-content-wrapper::-webkit-scrollbar-thumb { 
        background-color: var(--wdtBorderColor); 
        border-radius: 0px;  
    }
}