/* =========================================================
   GRADIENTE MUSIC
   GLOBAL PERSISTENT PLAYER
   LARGE ICON RESPONSIVE VERSION
========================================================= */

* {
    box-sizing: border-box;
}


/* =========================================================
   BODY
========================================================= */

body.gm-player-visible {
    padding-bottom: 135px !important;
}


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

.gm-master-player {

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;

    z-index: 999999;

    opacity: 0;

    visibility: hidden;

    transform: translateY(110%);

    pointer-events: none;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(255,215,80,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 100%,
            rgba(255,180,0,.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #050505,
            #12110c,
            #050505
        );

    border-top:
        1px solid rgba(246,211,101,.25);

    box-shadow:
        0 -15px 50px rgba(0,0,0,.85),
        0 -2px 30px rgba(246,211,101,.08);

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        opacity .35s ease,
        visibility .35s ease;
}


.gm-master-player.gm-active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


/* =========================================================
   GOLD TOP LINE
========================================================= */

.gm-top-line {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d6a928,
            #fff0a0,
            #f6d365,
            transparent
        );

    background-size: 200% 100%;

    animation:
        gmGoldLine 3s linear infinite;

    box-shadow:
        0 0 12px rgba(246,211,101,.8);
}


@keyframes gmGoldLine {

    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


/* =========================================================
   INNER
========================================================= */

.gm-player-inner {

    position: relative;

    max-width: 1900px;

    min-height: 125px;

    margin: auto;

    padding:
        14px
        22px;

    display: grid;

    grid-template-columns:
        minmax(250px, 28%)
        minmax(360px, 1fr)
        minmax(280px, 30%);

    align-items: center;

    gap: 20px;
}


/* =========================================================
   SONG
========================================================= */

.gm-song-section {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 15px;

    position: relative;
}


.gm-cover-container {

    position: relative;

    width: 72px;
    height: 72px;

    flex: 0 0 72px;
}


.gm-cover-ring {

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border:
        2px solid rgba(246,211,101,.55);

    border-left-color: transparent;

    animation:
        gmRotate 5s linear infinite;

    animation-play-state: paused;
}


.gm-playing .gm-cover-ring {
    animation-play-state: running;
}


@keyframes gmRotate {

    to {
        transform: rotate(360deg);
    }
}


.gm-cover {

    width: 72px;
    height: 72px;

    overflow: hidden;

    border-radius: 15px;

    background: #111;

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

    box-shadow:
        0 8px 25px rgba(0,0,0,.55);
}


.gm-cover img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;
}


.gm-playing .gm-cover img {
    transform: scale(1.06);
}


/* =========================================================
   EQUALIZER
========================================================= */

.gm-equalizer {

    position: absolute;

    right: -5px;
    bottom: -3px;

    height: 22px;

    display: flex;

    align-items: flex-end;

    gap: 3px;
}


.gm-equalizer span {

    width: 4px;

    height: 5px;

    border-radius: 5px;

    background: #f6d365;

    box-shadow:
        0 0 8px rgba(246,211,101,.9);

    animation:
        gmEqualizer .7s infinite alternate;

    animation-play-state: paused;
}


.gm-equalizer span:nth-child(2) {
    animation-delay: -.2s;
}

.gm-equalizer span:nth-child(3) {
    animation-delay: -.45s;
}

.gm-equalizer span:nth-child(4) {
    animation-delay: -.15s;
}

.gm-equalizer span:nth-child(5) {
    animation-delay: -.35s;
}


.gm-playing .gm-equalizer span {
    animation-play-state: running;
}


@keyframes gmEqualizer {

    from {
        height: 5px;
    }

    to {
        height: 22px;
    }
}


/* =========================================================
   SONG TEXT
========================================================= */

.gm-song-details {

    min-width: 0;

    overflow: hidden;
}


.gm-player-title {

    color: #fff;

    font-size: 15px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.gm-player-artist {

    margin-top: 5px;

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

    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.gm-now-playing {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 7px;

    font-size: 8px;

    letter-spacing: 1.4px;

    color: #f6d365;
}


.gm-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #f6d365;

    box-shadow:
        0 0 10px #f6d365;

    animation:
        gmDot 1.2s infinite;
}


@keyframes gmDot {

    50% {
        transform: scale(1.4);
        opacity: .5;
    }
}


/* =========================================================
   CONTROLS
========================================================= */

.gm-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;
}


.gm-control-button {

    width: 46px;
    height: 46px;

    border: 0;

    border-radius: 50%;

    background: transparent;

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

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    position: relative;

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


.gm-control-button i {

    font-size: 17px;
}


.gm-control-button:hover {

    color: #f6d365;

    background:
        rgba(246,211,101,.09);

    transform:
        scale(1.12);

    box-shadow:
        0 0 18px rgba(246,211,101,.12);
}


.gm-control-button:active {
    transform: scale(.88);
}


/* =========================================================
   BIG PLAY
========================================================= */

.gm-play-button {

    width: 58px;
    height: 58px;

    color: #050505;

    background:
        linear-gradient(
            135deg,
            #fff3aa,
            #f6d365,
            #c79520
        );

    box-shadow:
        0 0 25px rgba(246,211,101,.35);
}


.gm-play-button i {
    font-size: 20px;
}


.gm-play-button:hover {

    color: #000;

    transform:
        scale(1.10);

    box-shadow:
        0 0 35px rgba(246,211,101,.65);
}


.gm-playing .gm-play-button {

    animation:
        gmPlayGlow 1.6s infinite;
}


@keyframes gmPlayGlow {

    50% {

        box-shadow:
            0 0 38px rgba(246,211,101,.7);
    }
}


/* =========================================================
   SEEK 10
========================================================= */

.gm-seek-button {

    flex-direction: column;

    line-height: 1;

    gap: 2px;
}


.gm-seek-button i {
    font-size: 14px;
}


.gm-seek-button b {
    font-size: 8px;
}


/* =========================================================
   ACTIVE
========================================================= */

.gm-control-button.gm-active {

    color: #f6d365;

    background:
        rgba(246,211,101,.11);

    box-shadow:
        0 0 15px rgba(246,211,101,.10);
}


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

.gm-progress-row {

    display: grid;

    grid-template-columns:
        40px
        minmax(0,1fr)
        40px;

    align-items: center;

    gap: 10px;

    margin-top: 8px;
}


.gm-progress-row span {

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

    font-size: 10px;

    text-align: center;
}


#gmProgress {

    width: 100%;

    height: 5px;

    appearance: none;

    -webkit-appearance: none;

    border-radius: 10px;

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

    cursor: pointer;
}


#gmProgress::-webkit-slider-thumb {

    appearance: none;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #f6d365;

    box-shadow:
        0 0 12px rgba(246,211,101,.9);
}


#gmProgress::-moz-range-thumb {

    width: 13px;
    height: 13px;

    border: 0;

    border-radius: 50%;

    background: #f6d365;
}


/* =========================================================
   ACTIONS
========================================================= */

.gm-actions {

    min-width: 0;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 9px;
}


.gm-volume-box {

    height: 44px;

    min-width: 125px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        5px 9px;

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

    border-radius: 13px;

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


.gm-volume-box button {

    width: 35px;
    height: 35px;

    border: 0;

    border-radius: 50%;

    background: transparent;

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

    cursor: pointer;

    font-size: 16px;
}


.gm-volume-box button:hover {

    color: #f6d365;

    background:
        rgba(246,211,101,.08);
}


#gmVolume {

    width: 75px;

    height: 5px;

    appearance: none;

    -webkit-appearance: none;

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

    border-radius: 10px;
}


#gmVolume::-webkit-slider-thumb {

    appearance: none;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #f6d365;
}


#gmVolume::-moz-range-thumb {

    width: 12px;
    height: 12px;

    border: 0;

    border-radius: 50%;

    background: #f6d365;
}


/* =========================================================
   PLAYLIST / SHARE
========================================================= */

.gm-action-button {

    min-width: 48px;

    height: 44px;

    padding:
        0 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border:
        1px solid rgba(246,211,101,.17);

    border-radius: 13px;

    background:
        rgba(246,211,101,.05);

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

    cursor: pointer;

    transition:
        all .25s ease;
}


.gm-action-button i {

    font-size: 17px;
}


.gm-action-button span {

    font-size: 11px;

    font-weight: 600;
}


.gm-action-button:hover {

    color: #f6d365;

    background:
        rgba(246,211,101,.10);

    transform:
        translateY(-2px);

    box-shadow:
        0 0 18px rgba(246,211,101,.12);
}


/* =========================================================
   CLOSE
========================================================= */

.gm-action-icon {

    width: 44px;
    height: 44px;

    border: 0;

    border-radius: 50%;

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

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

    cursor: pointer;

    font-size: 18px;
}


.gm-action-icon:hover {

    color: #fff;

    background:
        rgba(255,70,70,.12);

    transform: rotate(90deg);
}


.gm-mobile-close {
    display: none;
}


/* =========================================================
   PARTICLES
========================================================= */

.gm-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;
}


.gm-particles span {

    position: absolute;

    bottom: -5px;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #f6d365;

    box-shadow:
        0 0 10px #f6d365;

    animation:
        gmParticle 7s linear infinite;
}


.gm-particles span:nth-child(1) {
    left: 15%;
}

.gm-particles span:nth-child(2) {
    left: 35%;
    animation-delay: -2s;
}

.gm-particles span:nth-child(3) {
    left: 55%;
    animation-delay: -4s;
}

.gm-particles span:nth-child(4) {
    left: 75%;
    animation-delay: -1s;
}

.gm-particles span:nth-child(5) {
    left: 90%;
    animation-delay: -5s;
}


@keyframes gmParticle {

    from {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    to {
        transform: translateY(-130px);
        opacity: 0;
    }
}


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

@media (max-width: 1150px) {

    .gm-player-inner {

        grid-template-columns:
            250px
            minmax(300px,1fr)
            auto;

        gap: 12px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .gm-action-button span {
        display: none;
    }


    .gm-action-button {

        width: 46px;

        padding: 0;
    }
}


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

@media (max-width: 700px) {

    body.gm-player-visible {

        padding-bottom: 230px !important;
    }


    .gm-master-player {

        border-top-left-radius: 18px;

        border-top-right-radius: 18px;
    }


    .gm-player-inner {

        min-height: 0;

        width: 100%;

        padding:
            10px
            9px
            12px;

        display: grid;

        grid-template-columns: 1fr;

        gap: 8px;
    }


    /* ==============================================
       SONG
    ============================================== */

    .gm-song-section {

        width: 100%;

        padding-right: 40px;
    }


    .gm-cover-container,
    .gm-cover {

        width: 58px;
        height: 58px;
    }


    .gm-cover-container {

        flex-basis: 58px;
    }


    .gm-cover {

        border-radius: 12px;
    }


    .gm-song-section {

        gap: 12px;
    }


    .gm-player-title {

        font-size: 13px;
    }


    .gm-player-artist {

        font-size: 10px;
    }


    .gm-now-playing {

        margin-top: 5px;

        font-size: 7px;
    }


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

    .gm-mobile-close {

        display: flex;

        position: absolute;

        right: 0;
        top: 50%;

        transform: translateY(-50%);

        width: 40px;
        height: 40px;

        align-items: center;

        justify-content: center;

        border: 0;

        border-radius: 50%;

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

        color: #fff;

        font-size: 17px;
    }


    .gm-mobile-close:active {

        transform:
            translateY(-50%)
            scale(.85);
    }


    .gm-desktop-close {
        display: none;
    }


    /* ==============================================
       BIG MOBILE CONTROLS
    ============================================== */

    .gm-controls {

        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(7,minmax(0,1fr));

        gap: 3px;
    }


    .gm-control-button {

        width: 100%;
        height: 52px;

        min-width: 0;

        border-radius: 12px;
    }


    .gm-control-button i {

        font-size: 19px;
    }


    .gm-seek-button i {

        font-size: 15px;
    }


    .gm-seek-button b {

        font-size: 8px;
    }


    /* BIG PLAY MOBILE */

    .gm-play-button {

        width: 54px;
        height: 54px;

        justify-self: center;

        border-radius: 50%;
    }


    .gm-play-button i {

        font-size: 21px;
    }


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

    .gm-progress-row {

        grid-template-columns:
            38px
            minmax(0,1fr)
            38px;

        gap: 7px;

        margin-top: 0;
    }


    .gm-progress-row span {

        font-size: 9px;
    }


    #gmProgress {

        height: 6px;
    }


    #gmProgress::-webkit-slider-thumb {

        width: 14px;
        height: 14px;
    }


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

    .gm-actions {

        width: 100%;

        display: grid;

        grid-template-columns:
            minmax(0,1fr)
            52px
            52px;

        gap: 6px;
    }


    .gm-volume-box {

        min-width: 0;

        width: 100%;

        height: 48px;

        padding:
            5px 8px;

        border-radius: 13px;
    }


    .gm-volume-box button {

        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        font-size: 18px;
    }


    #gmVolume {

        width: 100%;

        height: 6px;
    }


    .gm-action-button {

        width: 52px;
        height: 48px;

        padding: 0;

        border-radius: 13px;
    }


    .gm-action-button i {

        font-size: 19px;
    }


    .gm-action-button span {

        display: none;
    }
}


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

@media (max-width: 380px) {

    body.gm-player-visible {

        padding-bottom: 220px !important;
    }


    .gm-player-inner {

        padding:
            8px
            6px
            10px;

        gap: 6px;
    }


    .gm-cover-container,
    .gm-cover {

        width: 52px;
        height: 52px;
    }


    .gm-cover-container {

        flex-basis: 52px;
    }


    .gm-player-title {

        font-size: 12px;
    }


    .gm-player-artist {

        font-size: 9px;
    }


    .gm-controls {

        gap: 1px;
    }


    .gm-control-button {

        height: 47px;

        border-radius: 9px;
    }


    .gm-control-button i {

        font-size: 16px;
    }


    .gm-seek-button i {

        font-size: 12px;
    }


    .gm-seek-button b {

        font-size: 7px;
    }


    .gm-play-button {

        width: 49px;
        height: 49px;
    }


    .gm-play-button i {

        font-size: 18px;
    }


    .gm-actions {

        grid-template-columns:
            minmax(0,1fr)
            48px
            48px;
    }


    .gm-action-button {

        width: 48px;
        height: 45px;
    }
}