/* =========================================================
   GMSET ULTRA MODERN VIDEO PLAYER
   ========================================================= */


/* =========================================================
   PLAYER
   ========================================================= */

.gm-player {
    --gm-accent: #e50914;
    --gm-bg: #050609;
    --gm-control-bg: rgba(10, 13, 18, .94);
    --gm-border: rgba(255,255,255,.10);

    position: relative;

    width: 100%;
    max-width: 100%;

    background: #000;

    border: 1px solid var(--gm-border);
    border-radius: 9px;

    overflow: hidden;
    box-sizing: border-box;

    isolation: isolate;

    box-shadow:
        0 20px 55px rgba(0,0,0,.35);
}


/* =========================================================
   SCREEN
   ========================================================= */

.gm-player-screen {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #000;

    overflow: hidden;
}


/* =========================================================
   YOUTUBE VIDEO
   ========================================================= */

.gm-player-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    background: #000;
}

.gm-player-video iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   PLAYER TOP HEADER
   ========================================================= */

.gm-player-topbar {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: 53px;

    z-index: 40;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 0 14px;

    box-sizing: border-box;

    /* FULL BLACK */
    background: #000;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    pointer-events: none;
}


/* =========================================================
   PLAYER TITLE
   ========================================================= */

.gm-player-title {
    min-width: 0;

    max-width: 65%;

    overflow: hidden;

    color: #fff;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.2;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* =========================================================
   TOP RIGHT
   ========================================================= */

.gm-player-top-right {
    display: flex;

    align-items: center;

    gap: 14px;

    flex: 0 0 auto;
}


/* =========================================================
   IMDb
   ========================================================= */

.gm-player-imdb {
    display: flex;

    align-items: center;

    gap: 4px;

    white-space: nowrap;
}

.gm-player-imdb span {
    color: #ffc400;

    font-size: 15px;

    line-height: 1;
}

.gm-player-imdb strong {
    color: #fff;

    font-size: 14px;
    font-weight: 800;

    line-height: 1;
}


/* =========================================================
   4K BADGE
   ========================================================= */

.gm-player-4k {
    display: flex;

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

    height: 27px;

    min-width: 45px;

    padding: 0 8px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,35,45,.75);

    border-radius: 5px;

    background:
        rgba(229,9,20,.13);

    color: #ff3542;

    font-size: 15px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: 1px;

    text-shadow:
        0 0 10px rgba(229,9,20,.8);

    box-shadow:
        0 0 14px rgba(229,9,20,.20);

    animation:
        gm-4k-blink 2s ease-in-out infinite;
}


@keyframes gm-4k-blink {

    0%,
    100% {
        opacity: .65;

        box-shadow:
            0 0 10px rgba(229,9,20,.10);
    }

    50% {
        opacity: 1;

        box-shadow:
            0 0 24px rgba(229,9,20,.45);
    }

}


/* =========================================================
   CENTER PLAY
   ========================================================= */

.gm-player-center {
    position: absolute;

    inset: 0;

    z-index: 25;

    display: flex;

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

    pointer-events: none;
}


.gm-player-bigplay {
    width: 76px;
    height: 76px;

    display: flex;

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

    padding: 0;

    border:
        1px solid rgba(255,255,255,.24);

    border-radius: 50%;

    background:
        rgba(15,18,23,.84);

    color: #fff;

    font-size: 25px;

    line-height: 1;

    cursor: pointer;

    pointer-events: auto;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 12px 45px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.03);

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


.gm-player-bigplay:hover {
    transform: scale(1.08);

    background:
        var(--gm-accent);

    border-color:
        rgba(255,255,255,.50);

    box-shadow:
        0 15px 50px rgba(0,0,0,.60),
        0 0 30px rgba(229,9,20,.35);
}


.gm-player-bigplay:active {
    transform: scale(.94);
}


.gm-player.is-playing
.gm-player-bigplay {
    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   BOTTOM CONTROL BAR
   ALWAYS VISIBLE
   ========================================================= */

.gm-player-controls {
    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 12px;

    z-index: 35;

    min-height: 50px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 10px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(18,21,28,.95),
            rgba(8,10,14,.97)
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 10px 35px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.04);

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;
}


/* =========================================================
   CONTROL BUTTONS
   ========================================================= */

.gm-player-control {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: flex;

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

    padding: 0;

    border: 0;

    border-radius: 8px;

    background:
        rgba(255,255,255,.045);

    color: #fff;

    font-size: 14px;

    line-height: 1;

    cursor: pointer;

    transition:
        background .15s ease,
        transform .15s ease;
}


.gm-player-control:hover {
    background:
        rgba(255,255,255,.12);

    transform:
        translateY(-1px);
}


.gm-player-control:active {
    transform:
        scale(.92);
}


/* =========================================================
   TIME
   ========================================================= */

.gm-player-time {
    flex: 0 0 auto;

    min-width: 70px;

    color:
        rgba(255,255,255,.78);

    font-size: 11px;

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.gm-player-progress {
    position: relative;

    flex: 1;

    min-width: 80px;

    height: 20px;

    display: flex;

    align-items: center;
}


.gm-player-progress::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    height: 4px;

    border-radius: 99px;

    background:
        rgba(255,255,255,.18);
}


.gm-player-progress-played {
    position: absolute;

    left: 0;

    width: 0;

    height: 4px;

    border-radius: 99px;

    background:
        var(--gm-accent);

    box-shadow:
        0 0 10px rgba(229,9,20,.40);

    pointer-events: none;
}


.gm-player-progress input,
.gm-player-seek {
    position: relative;

    width: 100%;
    height: 20px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;

    cursor: pointer;
}


/* Chrome */

.gm-player-progress input::-webkit-slider-runnable-track,
.gm-player-seek::-webkit-slider-runnable-track {
    height: 4px;

    background: transparent;
}


.gm-player-progress input::-webkit-slider-thumb,
.gm-player-seek::-webkit-slider-thumb {
    width: 12px;
    height: 12px;

    margin-top: -4px;

    appearance: none;
    -webkit-appearance: none;

    border:
        2px solid #fff;

    border-radius: 50%;

    background:
        var(--gm-accent);

    box-shadow:
        0 0 7px rgba(229,9,20,.45);
}


/* Firefox */

.gm-player-progress input::-moz-range-track,
.gm-player-seek::-moz-range-track {
    height: 4px;

    background: transparent;
}


.gm-player-progress input::-moz-range-thumb,
.gm-player-seek::-moz-range-thumb {
    width: 10px;
    height: 10px;

    border:
        2px solid #fff;

    border-radius: 50%;

    background:
        var(--gm-accent);
}


/* =========================================================
   VOLUME
   ========================================================= */

.gm-player-volume {
    width: 72px;
    height: 18px;

    flex: 0 0 72px;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;

    cursor: pointer;
}


.gm-player-volume::-webkit-slider-runnable-track {
    height: 4px;

    border-radius: 99px;

    background:
        rgba(255,255,255,.22);
}


.gm-player-volume::-webkit-slider-thumb {
    width: 11px;
    height: 11px;

    margin-top: -3.5px;

    appearance: none;
    -webkit-appearance: none;

    border:
        2px solid #fff;

    border-radius: 50%;

    background:
        var(--gm-accent);
}


.gm-player-volume::-moz-range-track {
    height: 4px;

    border-radius: 99px;

    background:
        rgba(255,255,255,.22);
}


.gm-player-volume::-moz-range-progress {
    height: 4px;

    border-radius: 99px;

    background:
        var(--gm-accent);
}


.gm-player-volume::-moz-range-thumb {
    width: 10px;
    height: 10px;

    border:
        2px solid #fff;

    border-radius: 50%;

    background:
        var(--gm-accent);
}


/* =========================================================
   THEATER MODE
   ========================================================= */

.gm-player.gm-player-theater {
    position: relative;

    width: 100%;
    max-width: 100%;

    border-radius: 0;
}


.gm-player.gm-player-theater
.gm-player-screen {
    aspect-ratio: 21 / 9;
}


/* =========================================================
   FULLSCREEN
   ========================================================= */

.gm-player:fullscreen {
    width: 100vw;
    height: 100vh;

    border-radius: 0;

    background: #000;
}


.gm-player:fullscreen
.gm-player-screen {
    width: 100%;
    height: 100%;

    aspect-ratio: auto;
}


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

@media (max-width: 768px) {

    .gm-player {
        border-radius: 7px;
    }


    .gm-player-topbar {
        height: 47px;

        padding: 0 9px;
    }


    .gm-player-title {
        max-width: 55%;

        font-size: 11px;
    }


    .gm-player-top-right {
        gap: 7px;
    }


    .gm-player-imdb span {
        font-size: 12px;
    }


    .gm-player-imdb strong {
        font-size: 11px;
    }


    .gm-player-4k {
        min-width: 38px;

        height: 23px;

        font-size: 12px;
    }


    .gm-player-bigplay {
        width: 60px;
        height: 60px;

        font-size: 20px;
    }


    .gm-player-controls {
        left: 6px;
        right: 6px;
        bottom: 6px;

        min-height: 43px;

        gap: 4px;

        padding: 5px 6px;

        border-radius: 8px;
    }


    .gm-player-control {
        width: 30px;
        height: 30px;

        flex-basis: 30px;

        font-size: 12px;
    }


    .gm-player-time {
        min-width: 58px;

        font-size: 9px;
    }


    .gm-player-volume {
        display: none;
    }


    .gm-player-progress {
        min-width: 50px;
    }

}


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

@media (max-width: 480px) {

    .gm-player-topbar {
        height: 45px;

        padding: 0 7px;
    }


    .gm-player-title {
        max-width: 52%;

        font-size: 10px;
    }


    .gm-player-imdb strong {
        font-size: 10px;
    }


    .gm-player-4k {
        min-width: 35px;

        height: 22px;

        padding: 0 6px;

        font-size: 11px;
    }


    .gm-player-controls {
        left: 4px;
        right: 4px;
        bottom: 4px;

        min-height: 39px;

        padding: 4px;

        gap: 3px;
    }


    .gm-player-control {
        width: 28px;
        height: 28px;

        flex-basis: 28px;
    }


    .gm-player-time {
        min-width: 48px;

        font-size: 8px;
    }


    .gm-player-bigplay {
        width: 52px;
        height: 52px;
    }

}

/* =========================================================
   PLAYER SETTINGS
   ========================================================= */

.gm-player-settings {
    position: relative;
    flex: 0 0 auto;
}

.gm-player-settings-menu {
    position: absolute;

    right: 0;
    bottom: calc(100% + 10px);

    width: 190px;

    padding: 10px;

    box-sizing: border-box;

    background: rgba(10,13,18,.98);

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.55);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    z-index: 100;

    display: none;
}

.gm-player-settings.is-open
.gm-player-settings-menu {
    display: block;
}


/* MENU TITLE */

.gm-settings-title {
    padding: 6px 8px;

    color: rgba(255,255,255,.45);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .6px;
}


/* MENU BUTTONS */

.gm-player-settings-menu button {
    display: flex;

    align-items: center;

    width: 100%;

    padding: 8px 9px;

    border: 0;
    border-radius: 6px;

    background: transparent;

    color: #fff;

    font-size: 11px;

    text-align: left;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

.gm-player-settings-menu button:hover {
    background: rgba(255,255,255,.08);
}

.gm-player-settings-menu button.active {
    background: rgba(229,9,20,.12);

    color: #ff3542;
}


/* SEPARATOR */

.gm-settings-subtitle {
    margin-top: 7px;

    padding-top: 10px;

    border-top:
        1px solid rgba(255,255,255,.07);
}


/* MOBILE */

@media (max-width: 600px) {

    .gm-player-settings-menu {
        right: -5px;

        width: 165px;

        bottom: calc(100% + 8px);

        padding: 8px;
    }

    .gm-player-settings-menu button {
        padding: 7px 8px;

        font-size: 10px;
    }

}
/* =========================================================
   MOBILE CUSTOM FULLSCREEN
   ========================================================= */

.gm-player.gm-mobile-fullscreen {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;

    margin: 0 !important;

    z-index: 999999 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #000 !important;
}


.gm-player.gm-mobile-fullscreen
.gm-player-screen {
    width: 100% !important;
    height: 100% !important;

    aspect-ratio: auto !important;
}


/* iPhone / mobile landscape */

@media (max-width: 768px) {

    .gm-player.gm-mobile-fullscreen
    .gm-player-screen {

        width: 100vw !important;
        height: 100vh !important;

    }

}