/* =========================================================
   PAREACLUB DJ PLAYER SKINS V1
   Skin controlled ONLY from Control Center
========================================================= */


/* =========================================================
   SKIN VARIABLES
========================================================= */

#djPlayerWindow[data-dj-skin="neon-glass"] {
    --dj-bg-1: #121a2b;
    --dj-bg-2: #080d18;
    --dj-panel: rgba(22,32,53,.93);

    --dj-border: #536dff;
    --dj-accent: #32d5ff;
    --dj-accent-2: #825cff;

    --dj-button-1: #253553;
    --dj-button-2: #10192b;

    --dj-text: #f5f7ff;
    --dj-muted: #9ba8c4;

    --dj-glow: rgba(70,100,255,.34);
}


#djPlayerWindow[data-dj-skin="gold-premium"] {
    --dj-bg-1: #201c14;
    --dj-bg-2: #090805;
    --dj-panel: rgba(29,25,17,.95);

    --dj-border: #d8a82c;
    --dj-accent: #ffc943;
    --dj-accent-2: #ff9d25;

    --dj-button-1: #40351d;
    --dj-button-2: #171208;

    --dj-text: #fff8e4;
    --dj-muted: #c3b38d;

    --dj-glow: rgba(255,190,45,.32);
}


#djPlayerWindow[data-dj-skin="cyber-purple"] {
    --dj-bg-1: #211437;
    --dj-bg-2: #090611;
    --dj-panel: rgba(30,18,53,.94);

    --dj-border: #a65bff;
    --dj-accent: #d35cff;
    --dj-accent-2: #5b7cff;

    --dj-button-1: #432569;
    --dj-button-2: #180e2a;

    --dj-text: #fbf4ff;
    --dj-muted: #b9a7d0;

    --dj-glow: rgba(177,74,255,.38);
}


#djPlayerWindow[data-dj-skin="ocean-deep"] {
    --dj-bg-1: #0c2937;
    --dj-bg-2: #041018;
    --dj-panel: rgba(8,32,44,.94);

    --dj-border: #26bad5;
    --dj-accent: #27d9e8;
    --dj-accent-2: #1988e8;

    --dj-button-1: #17465b;
    --dj-button-2: #08212d;

    --dj-text: #effcff;
    --dj-muted: #8fb7c4;

    --dj-glow: rgba(38,200,225,.32);
}


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

#djPlayerWindow[data-dj-skin] {

    background:
        radial-gradient(
            circle at 15% 0%,
            color-mix(
                in srgb,
                var(--dj-accent) 14%,
                transparent
            ),
            transparent 38%
        ),
        linear-gradient(
            150deg,
            var(--dj-bg-1),
            var(--dj-bg-2) 72%
        ) !important;

    color:
        var(--dj-text) !important;

    border:
        1px solid var(--dj-border) !important;

    border-radius:
        16px !important;

    overflow:
        hidden !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        inset 0 0 28px rgba(255,255,255,.015),
        0 16px 45px rgba(0,0,0,.62),
        0 0 20px var(--dj-glow) !important;

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


/* =========================================================
   HEADER
========================================================= */

#djPlayerWindow[data-dj-skin]
.dj-player-header {

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--dj-button-1) 90%,
                #ffffff 5%
            ),
            var(--dj-button-2)
        ) !important;

    color:
        var(--dj-text) !important;

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--dj-border) 55%,
            transparent
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 4px 12px rgba(0,0,0,.30) !important;

    font-weight:
        900 !important;

    letter-spacing:
        .3px;
}


#djPlayerWindow[data-dj-skin]
.dj-live-dot {

    background:
        var(--dj-accent) !important;

    box-shadow:
        0 0 5px var(--dj-accent),
        0 0 12px var(--dj-accent) !important;

    animation:
        pareaDjLedPulse
        1.5s
        ease-in-out
        infinite alternate;
}


/* =========================================================
   NOW PLAYING
========================================================= */

#djPlayerWindow[data-dj-skin]
.dj-now-playing {

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--dj-panel) 92%,
                var(--dj-accent) 8%
            ),
            var(--dj-panel)
        ) !important;

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--dj-border) 30%,
            transparent
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}


#djPlayerWindow[data-dj-skin]
.dj-cover {

    color:
        var(--dj-accent) !important;

    filter:
        drop-shadow(
            0 0 8px
            var(--dj-glow)
        );
}


#djPlayerWindow[data-dj-skin]
.dj-now-title {

    color:
        var(--dj-text) !important;
}


#djPlayerWindow[data-dj-skin]
.dj-small-label,

#djPlayerWindow[data-dj-skin]
.dj-now-source,

#djPlayerWindow[data-dj-skin]
.dj-section-title,

#djPlayerWindow[data-dj-skin]
.dj-playlist-header {

    color:
        var(--dj-muted) !important;
}


/* =========================================================
   3D BUTTONS
========================================================= */

#djPlayerWindow[data-dj-skin]
button {

    position:
        relative;

    color:
        var(--dj-text) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--dj-border) 62%,
            #ffffff 7%
        ) !important;

    border-radius:
        8px !important;

    background:
        linear-gradient(
            180deg,
            var(--dj-button-1),
            var(--dj-button-2)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 -2px 0 rgba(0,0,0,.48),
        0 3px 0 rgba(0,0,0,.60),
        0 6px 10px rgba(0,0,0,.30) !important;

    transition:
        transform .10s ease,
        filter .13s ease,
        box-shadow .13s ease !important;
}


#djPlayerWindow[data-dj-skin]
button:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.14);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 4px 0 rgba(0,0,0,.55),
        0 7px 13px rgba(0,0,0,.34),
        0 0 12px var(--dj-glow) !important;
}


#djPlayerWindow[data-dj-skin]
button:active {

    transform:
        translateY(3px) !important;

    box-shadow:
        inset 0 3px 7px rgba(0,0,0,.55),
        0 1px 0 rgba(0,0,0,.65) !important;
}


/* MAIN PLAY */

#djPlayerWindow[data-dj-skin]
.dj-main-button {

    background:
        linear-gradient(
            180deg,
            var(--dj-accent),
            color-mix(
                in srgb,
                var(--dj-accent) 62%,
                #000
            )
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--dj-accent) 80%,
            #fff
        ) !important;

    color:
        #fff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 3px 0 rgba(0,0,0,.58),
        0 0 15px var(--dj-glow) !important;
}


/* CLOSE */

#djPlayerWindow[data-dj-skin]
.dj-close-btn {

    background:
        linear-gradient(
            180deg,
            #ed4a59,
            #a81f2c
        ) !important;

    border:
        1px solid #ff7580 !important;

    color:
        #fff !important;
}


/* =========================================================
   INPUTS
========================================================= */

#djPlayerWindow[data-dj-skin]
input[type="text"],

#djPlayerWindow[data-dj-skin]
input[type="file"] {

    background:
        rgba(2,7,15,.78) !important;

    color:
        var(--dj-text) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--dj-border) 48%,
            transparent
        ) !important;

    border-radius:
        8px !important;

    box-shadow:
        inset 0 2px 7px rgba(0,0,0,.55) !important;
}


#djPlayerWindow[data-dj-skin]
input[type="text"]:focus {

    outline:
        none !important;

    border-color:
        var(--dj-accent) !important;

    box-shadow:
        inset 0 2px 7px rgba(0,0,0,.50),
        0 0 10px var(--dj-glow) !important;
}


/* =========================================================
   RANGE / SLIDERS
========================================================= */

#djPlayerWindow[data-dj-skin]
input[type="range"] {

    accent-color:
        var(--dj-accent) !important;
}


#djPlayerWindow[data-dj-skin]
input[type="range"]::-webkit-slider-thumb {

    filter:
        drop-shadow(
            0 0 5px
            var(--dj-glow)
        );
}


/* =========================================================
   SECTIONS
========================================================= */

#djPlayerWindow[data-dj-skin]
.dj-add-section,

#djPlayerWindow[data-dj-skin]
.dj-playlist {

    border-color:
        color-mix(
            in srgb,
            var(--dj-border) 23%,
            transparent
        ) !important;
}


#djPlayerWindow[data-dj-skin]
.dj-playlist-header {

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--dj-border) 28%,
            transparent
        ) !important;

    background:
        rgba(0,0,0,.13) !important;
}


/* =========================================================
   CYBER PURPLE SPECIAL EFFECT
========================================================= */

#djPlayerWindow[data-dj-skin="cyber-purple"] {

    background:
        radial-gradient(
            circle at 80% 5%,
            rgba(128,66,255,.28),
            transparent 35%
        ),
        radial-gradient(
            circle at 5% 80%,
            rgba(219,54,255,.16),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #211139,
            #070510
        ) !important;
}


/* =========================================================
   GOLD PREMIUM SPECIAL EFFECT
========================================================= */

#djPlayerWindow[data-dj-skin="gold-premium"] {

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(255,194,54,.17),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #211d15,
            #070603
        ) !important;
}


/* =========================================================
   OCEAN SPECIAL EFFECT
========================================================= */

#djPlayerWindow[data-dj-skin="ocean-deep"] {

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(22,218,229,.16),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #0b2939,
            #031018
        ) !important;
}


/* =========================================================
   LED ANIMATION
========================================================= */

@keyframes pareaDjLedPulse {

    from {
        opacity: .65;
    }

    to {
        opacity: 1;
    }

}