/* =========================================================
   YT AUDIO PLAYLIST
   ========================================================= */

.ytap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 0 90px 0 !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
}


/* =========================================================
   Playlist Grid
   ========================================================= */

.ytap .ytap-items {
    display: grid !important;

    grid-template-columns:
        repeat(
            var(--ytap-columns, 1),
            minmax(0, 1fr)
        ) !important;

    gap: var(--ytap-gap, 8px) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   Playlist Item
   ========================================================= */

.ytap .ytap-item {
    display: flex !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    align-items: center !important;

    gap: 12px !important;

    margin: 0 !important;

    padding:
            var(--ytap-padding, 14px)
            16px !important;

    border:
            var(--ytap-border, none) !important;

    border-radius:
            var(--ytap-radius, 8px) !important;

    background:
            var(--ytap-item-bg, #f5f5f5) !important;

    color:
            var(--ytap-title, #222222) !important;

    box-shadow:
            var(--ytap-shadow, none) !important;

    cursor: pointer !important;

    text-align: left !important;

    line-height: 1 !important;

    font-family: inherit !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    overflow: hidden !important;

    transition:
            background-color .2s ease,
            color .2s ease,
            border-color .2s ease,
            box-shadow .2s ease,
            transform .15s ease !important;
}


/* =========================================================
   Prevent Theme / Elementor Button Styles
   ========================================================= */

.ytap .ytap-item::before,
.ytap .ytap-item::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   Hover
   ========================================================= */

.ytap .ytap-item:hover,
.ytap .ytap-item:focus,
.ytap .ytap-item:focus-visible {

    background:
            var(--ytap-hover-bg, #111111) !important;

    color:
            var(--ytap-hover-title, #ffffff) !important;

    border-color:
            var(--ytap-border-color, #dddddd) !important;

    outline: none !important;
}


/* =========================================================
   Hover Title
   ========================================================= */

.ytap .ytap-item:hover .ytap-title,
.ytap .ytap-item:focus .ytap-title,
.ytap .ytap-item:focus-visible .ytap-title {

    color:
            var(--ytap-hover-title, #ffffff) !important;
}


/* =========================================================
   Hover Icon
   ========================================================= */

.ytap .ytap-item:hover .ytap-play,
.ytap .ytap-item:focus .ytap-play,
.ytap .ytap-item:focus-visible .ytap-play {

    color:
            var(--ytap-hover-title, #ffffff) !important;
}


/* =========================================================
   Active Item
   ========================================================= */

.ytap .ytap-item.active {

    background:
            var(--ytap-active-bg, #e9e9e9) !important;

    color:
            var(--ytap-title, #222222) !important;
}


.ytap .ytap-item.active .ytap-title {

    color:
            var(--ytap-title, #222222) !important;
}


.ytap .ytap-item.active .ytap-play {

    color:
            var(--ytap-primary, #111111) !important;
}


/* =========================================================
   Play / Pause Icon
   ========================================================= */

.ytap .ytap-play {

    width: 22px !important;
    height: 22px !important;

    min-width: 22px !important;
    max-width: 22px !important;

    flex: 0 0 22px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    color:
            var(--ytap-primary, #111111) !important;

    line-height: 0 !important;

    vertical-align: middle !important;

    transition:
            color .2s ease !important;
}


/* SVG */

.ytap .ytap-play svg {

    display: block !important;

    width: 17px !important;
    height: 17px !important;

    min-width: 17px !important;
    min-height: 17px !important;

    margin: 0 !important;
    padding: 0 !important;

    fill: currentColor !important;

    stroke: none !important;
}


/* =========================================================
   Title
   ========================================================= */

.ytap .ytap-title {

    flex: 1 1 auto !important;

    width: auto !important;

    min-width: 0 !important;
    max-width: 100% !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    color:
            var(--ytap-title, #222222) !important;

    font-size:
            var(--ytap-title-size, 15px) !important;

    font-weight:
            var(--ytap-title-weight, 400) !important;

    line-height:
            var(--ytap-line-height, 1.5) !important;

    text-align: left !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: anywhere !important;

    hyphens: auto !important;

    overflow: hidden !important;
}


/* =========================================================
   Fixed Player
   ========================================================= */

.ytap .ytap-controls {

    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 999999 !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    padding:
            10px 16px !important;

    box-sizing: border-box !important;

    background:
            var(--ytap-player-bg, #ffffff) !important;

    border-top:
            var(--ytap-player-border, none) !important;

    box-shadow:
            var(
                    --ytap-player-shadow,
                    0 -4px 18px rgba(0, 0, 0, .12)
            ) !important;
}


/* =========================================================
   Main Play Button
   ========================================================= */

.ytap .ytap-main-play {

    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    max-width: 40px !important;

    flex: 0 0 40px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border: 0 !important;

    border-radius: 50% !important;

    background:
            var(--ytap-primary, #111111) !important;

    color: #ffffff !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    line-height: 1 !important;

    transition:
            opacity .15s ease,
            transform .15s ease !important;
}


.ytap .ytap-main-play:hover,
.ytap .ytap-main-play:focus {

    background:
            var(--ytap-primary, #111111) !important;

    color: #ffffff !important;

    opacity: .85 !important;

    outline: none !important;
}


.ytap .ytap-main-play:active {

    transform: scale(.94) !important;
}


/* Main SVG */

.ytap .ytap-main-play svg {

    display: block !important;

    width: 19px !important;
    height: 19px !important;

    margin: 0 !important;
    padding: 0 !important;

    fill: currentColor !important;
}


/* =========================================================
   Time
   ========================================================= */

.ytap .ytap-current-time,
.ytap .ytap-time-separator,
.ytap .ytap-duration {

    flex: 0 0 auto !important;

    color:
            var(--ytap-title, #222222) !important;

    font-size: 13px !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   Progress Bar
   ========================================================= */

.ytap .ytap-progress {

    flex: 1 1 auto !important;

    width: auto !important;

    min-width: 40px !important;
    max-width: none !important;

    height:
            var(--ytap-progress-height, 5px) !important;

    margin: 0 !important;
    padding: 0 !important;

    accent-color:
            var(--ytap-progress-color, #111111) !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}


/* =========================================================
   Volume Button
   ========================================================= */

.ytap .ytap-volume-button {

    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    max-width: 34px !important;

    flex: 0 0 34px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border: 0 !important;

    background: transparent !important;

    color:
            var(--ytap-title, #222222) !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    line-height: 1 !important;
}


.ytap .ytap-volume-button:hover,
.ytap .ytap-volume-button:focus {

    background: transparent !important;

    color:
            var(--ytap-primary, #111111) !important;

    outline: none !important;
}


.ytap .ytap-volume-button svg {

    display: block !important;

    width: 20px !important;
    height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    fill: currentColor !important;
}


/* =========================================================
   Volume Slider
   ========================================================= */

.ytap .ytap-volume {

    width: 80px !important;

    min-width: 55px !important;
    max-width: 80px !important;

    flex: 0 1 80px !important;

    margin: 0 !important;
    padding: 0 !important;

    accent-color:
            var(--ytap-primary, #111111) !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}


/* =========================================================
   Hidden YouTube Player
   ========================================================= */

.ytap .ytap-player-wrap {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* =========================================================
   Loading
   ========================================================= */

.ytap .ytap-loading {

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    padding: 15px !important;

    text-align: center !important;
}


/* =========================================================
   Error
   ========================================================= */

.ytap-error {

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    padding: 15px !important;

    background: #ffecec !important;

    color: #b00000 !important;

    border-radius: 6px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .ytap {

        width: 100% !important;
        max-width: 100% !important;

        padding-bottom: 72px !important;

        overflow-x: hidden !important;
    }


    .ytap .ytap-items {

        width: 100% !important;
        max-width: 100% !important;

        grid-template-columns: minmax(0, 1fr) !important;

        gap:
                var(--ytap-gap, 8px) !important;
    }


    .ytap .ytap-item {

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding:
                var(--ytap-padding, 14px)
                12px !important;

        gap: 10px !important;
    }


    .ytap .ytap-play {

        width: 20px !important;
        height: 20px !important;

        min-width: 20px !important;
        max-width: 20px !important;

        flex-basis: 20px !important;
    }


    .ytap .ytap-play svg {

        width: 16px !important;
        height: 16px !important;
    }


    .ytap .ytap-title {

        min-width: 0 !important;
        max-width: 100% !important;

        font-size:
                var(--ytap-title-size, 15px) !important;

        line-height:
                var(--ytap-line-height, 1.5) !important;
    }


    /* Fixed Player */

    .ytap .ytap-controls {

        gap: 5px !important;

        padding:
                8px 8px !important;

        overflow: hidden !important;
    }


    .ytap .ytap-main-play {

        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        max-width: 36px !important;

        flex-basis: 36px !important;
    }


    .ytap .ytap-main-play svg {

        width: 17px !important;
        height: 17px !important;
    }


    .ytap .ytap-current-time,
    .ytap .ytap-time-separator,
    .ytap .ytap-duration {

        font-size: 10px !important;
    }


    .ytap .ytap-progress {

        min-width: 30px !important;
    }


    .ytap .ytap-volume-button {

        width: 30px !important;
        height: 30px !important;

        min-width: 30px !important;
        max-width: 30px !important;

        flex-basis: 30px !important;
    }


    .ytap .ytap-volume-button svg {

        width: 18px !important;
        height: 18px !important;
    }


    .ytap .ytap-volume {

        width: 50px !important;

        min-width: 40px !important;
        max-width: 50px !important;

        flex: 0 1 50px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .ytap .ytap-controls {

        gap: 4px !important;

        padding:
                7px 6px !important;
    }


    .ytap .ytap-main-play {

        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        max-width: 34px !important;

        flex-basis: 34px !important;
    }


    .ytap .ytap-current-time,
    .ytap .ytap-time-separator,
    .ytap .ytap-duration {

        font-size: 9px !important;
    }


    .ytap .ytap-volume-button {

        width: 28px !important;
        height: 28px !important;

        min-width: 28px !important;
        max-width: 28px !important;

        flex-basis: 28px !important;
    }


    .ytap .ytap-volume {

        width: 42px !important;

        min-width: 35px !important;
        max-width: 42px !important;

        flex-basis: 42px !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 601px) and (max-width: 900px) {

    .ytap .ytap-items {

        grid-template-columns:
            repeat(
                min(
                        var(--ytap-columns, 1),
                        2
                ),
                minmax(0, 1fr)
            ) !important;
    }

}


/* =========================================================
   SAFETY: Prevent Horizontal Overflow
   ========================================================= */

html,
body {

    max-width: 100%;

    overflow-x: hidden;
}