.pdr-zks-showcase{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    margin:14px auto 20px;

}



.pdr-zks-item{

    width:100%;

}



.pdr-zks-toggle{

    position:relative;

    display:grid;

    grid-template-columns:24px 1fr 16px;

    align-items:center;

    width:min(330px,calc(100% - 16px));

    height:42px;

    margin:0 auto;

    padding:5px 12px;

    color:#fff;

    border:1px solid #d85a00;

    border-radius:10px;

    background:linear-gradient(180deg,#362019 0%,#1c100d 42%,#090708 100%);

    box-shadow:

        inset 0 2px 0 rgba(255,210,170,.16),

        inset 0 -2px 0 rgba(0,0,0,.72),

        0 3px 0 #4d1d00,

        0 6px 12px rgba(0,0,0,.35);

    cursor:pointer;

    transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;

}



.pdr-zks-toggle:before{

    content:"";

    position:absolute;

    left:7px;

    right:7px;

    top:2px;

    height:9px;

    border-radius:8px;

    background:linear-gradient(180deg,rgba(255,220,185,.13),transparent);

    pointer-events:none;

}



.pdr-zks-toggle:hover{

    transform:translateY(-1px);

    filter:brightness(1.1);

}



.pdr-zks-item.is-open>.pdr-zks-toggle{

    transform:translateY(2px);

}



.pdr-zks-note,.pdr-zks-title,.pdr-zks-arrow{

    position:relative;

    z-index:2;

}



.pdr-zks-note{

    font-size:16px;

    color:#8e72ff;

}



.pdr-zks-title{

    font-size:13px;

    line-height:1;

    font-weight:900;

    text-align:left;

    text-shadow:0 1px 2px #000;

}



.pdr-zks-arrow{

    font-size:8px;

    text-align:right;

    color:#ff841e;

    transition:transform .18s ease;

}



.pdr-zks-item.is-open>.pdr-zks-toggle .pdr-zks-arrow{

    transform:rotate(180deg);

}



.pdr-zks-panel{

    width:100%;

}



.pdr-zks-item:not(.is-open)>.pdr-zks-panel{

    display:none;

}



.pdr-zks-item.is-open>.pdr-zks-panel{

    display:block;

    margin-top:14px;

    animation:pdrZksOpen .18s ease-out;

}



@keyframes pdrZksOpen{

    from{opacity:0;transform:translateY(-5px)}

    to{opacity:1;transform:translateY(0)}

}



.pdr-zks-engine{

    width:100%;

}



.pdr-zks-engine[hidden]{

    display:none!important;

}





/* FLAME */



.pdr-zks-flame>.pdr-zks-toggle{

    border-color:#d85a00;

}





/* GLASS */



.pdr-zks-glass>.pdr-zks-toggle{

    border-color:#087faa;

    background:linear-gradient(180deg,#17272d,#0a1519 45%,#05090b);

    box-shadow:

        inset 0 2px 0 rgba(145,230,255,.12),

        0 3px 0 #06364a,

        0 6px 12px rgba(0,0,0,.35);

}



.pdr-zks-glass>.pdr-zks-toggle .pdr-zks-arrow{

    color:#39d8ff;

}





/* CARBON */



.pdr-zks-carbon>.pdr-zks-toggle{

    border-color:#557925;

    border-radius:7px;

    background:

        repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 3px,rgba(0,0,0,.035) 3px 6px),

        linear-gradient(180deg,#242920,#0a0d08);

    box-shadow:0 3px 0 #27380f,0 6px 12px rgba(0,0,0,.35);

}



.pdr-zks-carbon>.pdr-zks-toggle .pdr-zks-arrow{

    color:#9fd64a;

}





/* RETRO */



.pdr-zks-retro>.pdr-zks-toggle{

    border-color:#97611f;

    border-radius:13px;

    background:linear-gradient(180deg,#49331d,#24170a 44%,#0b0704);

    box-shadow:

        inset 0 2px 0 rgba(255,220,155,.13),

        0 3px 0 #432604,

        0 6px 12px rgba(0,0,0,.35);

}



.pdr-zks-retro>.pdr-zks-toggle .pdr-zks-arrow{

    color:#dda94d;

}





/* NEON */



.pdr-zks-neon>.pdr-zks-toggle{

    border-color:#9827b4;

    border-radius:999px;

    background:linear-gradient(110deg,#27102d,#110d18 60%,#071b20);

    box-shadow:

        0 3px 0 #28072f,

        0 6px 12px rgba(0,0,0,.35),

        0 0 8px rgba(190,36,211,.08);

}



.pdr-zks-neon>.pdr-zks-toggle .pdr-zks-arrow{

    color:#da44ef;

}





/* PLAYER SKINEK */



.pdr-zks-engine[data-theme="flame"] .zk-wrap{

    border-color:rgba(225,87,0,.26)!important;

}



.pdr-zks-engine[data-theme="glass"] .zk-wrap{

    border-color:rgba(37,185,227,.25)!important;

    background:

        radial-gradient(circle at 10% 0,rgba(37,185,227,.10),transparent 32%),

        #080a0d!important;

}



.pdr-zks-engine[data-theme="carbon"] .zk-wrap{

    border-color:rgba(100,154,40,.24)!important;

    background:

        repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 4px,rgba(0,0,0,.018) 4px 8px),

        #080a08!important;

}



.pdr-zks-engine[data-theme="retro"] .zk-wrap{

    border-color:rgba(184,126,40,.25)!important;

    background:

        radial-gradient(circle at center,rgba(130,82,22,.10),transparent 50%),

        #0b0804!important;

}



.pdr-zks-engine[data-theme="neon"] .zk-wrap{

    border-color:rgba(185,43,207,.24)!important;

    background:

        radial-gradient(circle at 12% 10%,rgba(195,37,218,.11),transparent 32%),

        radial-gradient(circle at 88% 85%,rgba(36,205,225,.08),transparent 35%),

        #070509!important;

}



@media(max-width:500px){

    .pdr-zks-toggle{

        width:min(300px,calc(100% - 12px));

        height:40px;

    }



    .pdr-zks-title{

        font-size:12px;

    }

}






/* ============================================================

   PDR ZKS FULL FEATURES 1.1

   ============================================================ */





/* ------------------------------------------------------------

   BORITO / VIZUALIZACIO

   ------------------------------------------------------------ */



.pdr-zks-engine .zk-cover,

.pdr-zks-engine .zk-coverbox{

    position:relative!important;

    overflow:hidden!important;

}



.pdr-zks-engine .zk-cover-img,

.pdr-zks-engine .zk-coverbox img,

.pdr-zks-engine .zk-cover img{

    position:relative;

    z-index:3;

    width:100%;

    height:100%;

    object-fit:cover;

}



.pdr-zks-cover-viz{

    position:absolute;

    z-index:2;

    inset:0;



    display:none;



    align-items:center;

    justify-content:center;



    overflow:hidden;



    background:

        radial-gradient(

            circle at 50% 38%,

            rgba(255,96,25,.21),

            transparent 37%

        ),

        radial-gradient(

            circle at 75% 80%,

            rgba(132,46,230,.20),

            transparent 43%

        ),

        linear-gradient(

            145deg,

            #100a09,

            #060509 65%,

            #10051b

        );

}



.pdr-zks-cover-viz.visible{

    display:flex;

}



.pdr-zks-viz-disc{

    position:absolute;



    width:72px;

    height:72px;



    top:22%;

    left:50%;



    transform:

        translateX(-50%);



    border-radius:50%;



    border:

        7px solid

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



    box-shadow:

        inset 0 0 0 12px rgba(0,0,0,.25),

        0 0 28px rgba(255,88,0,.15);



    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.09) 0 8%,

            #09090b 9% 25%,

            #17131a 26% 55%,

            #050506 56%

        );

}



.pdr-zks-cover-viz.playing

.pdr-zks-viz-disc{

    animation:

        pdrZksDisc

        2.4s linear infinite;

}



@keyframes pdrZksDisc{

    to{

        transform:

            translateX(-50%)

            rotate(360deg);

    }

}



.pdr-zks-viz-bars{

    position:absolute;



    left:9%;

    right:9%;

    bottom:12%;



    height:31%;



    display:flex;



    align-items:flex-end;

    justify-content:center;



    gap:2px;

}



.pdr-zks-viz-bars i{

    display:block;



    flex:1;



    min-width:2px;



    height:17%;



    border-radius:

        4px 4px 1px 1px;



    background:

        linear-gradient(

            to top,

            #ff3700 0 33%,

            #ff9b00 34% 67%,

            #20f981 68% 100%

        );



    box-shadow:

        0 0 7px

        rgba(255,99,0,.20);



    transform-origin:bottom;



    animation:

        pdrZksBars

        .62s ease-in-out

        infinite alternate;



    animation-play-state:

        paused;

}



.pdr-zks-cover-viz.playing

.pdr-zks-viz-bars i{

    animation-play-state:

        running;

}



.pdr-zks-viz-bars i:nth-child(2n){

    animation-duration:.43s;

}



.pdr-zks-viz-bars i:nth-child(3n){

    animation-duration:.74s;

}



.pdr-zks-viz-bars i:nth-child(4n){

    animation-duration:.51s;

}



.pdr-zks-viz-bars i:nth-child(5n){

    animation-duration:.83s;

}



@keyframes pdrZksBars{



    from{

        transform:scaleY(.22);

    }



    to{

        transform:scaleY(1);

    }

}





/* ------------------------------------------------------------

   AUDIO PANEL

   ------------------------------------------------------------ */



.pdr-zks-audio-panel{

    position:relative;



    margin-top:14px;



    padding:13px;



    border:

        1px solid

        rgba(255,255,255,.08);



    border-radius:16px;



    background:

        linear-gradient(

            145deg,

            rgba(0,0,0,.60),

            rgba(28,9,35,.48)

        );



    box-shadow:

        inset 0 1px 0

        rgba(255,255,255,.04),

        0 10px 25px

        rgba(0,0,0,.25);

}



.pdr-zks-audio-head{

    display:flex;



    justify-content:

        space-between;



    align-items:center;



    gap:10px;



    margin-bottom:10px;



    font-size:12px;

}



.pdr-zks-guard{

    padding:

        5px 9px;



    border:

        1px solid

        rgba(255,255,255,.07);



    border-radius:999px;



    color:#b7b7b7;



    background:

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



    font-size:10px;



    font-weight:800;

}



.pdr-zks-guard.active{

    color:#22f18a;



    border-color:

        rgba(34,241,138,.22);



    background:

        rgba(0,110,59,.12);



    box-shadow:

        0 0 10px

        rgba(34,241,138,.07);

}



.pdr-zks-audio-grid{

    display:grid;



    grid-template-columns:

        minmax(0,1fr)

        minmax(0,1.25fr);



    gap:10px;

}



.pdr-zks-control-card{

    min-width:0;



    padding:11px;



    border:

        1px solid

        rgba(255,255,255,.07);



    border-radius:13px;



    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.045),

            rgba(255,255,255,.018)

        );

}



.pdr-zks-control-title{

    display:flex;



    align-items:center;



    justify-content:

        space-between;



    gap:8px;



    margin-bottom:10px;



    color:#fff;



    font-size:11px;



    font-weight:900;

}



.pdr-zks-control-card

input[type="range"]{

    width:100%;



    accent-color:#ff6330;



    cursor:pointer;

}



.pdr-zks-eq-row{

    display:grid;



    grid-template-columns:

        repeat(3,1fr);



    gap:8px;

}



.pdr-zks-eq-row label{

    display:flex;



    flex-direction:column;



    align-items:center;



    gap:5px;



    min-width:0;



    color:#bbb;



    font-size:9px;



    text-align:center;

}



.pdr-zks-eq-row b{

    color:#fff;



    font-size:9px;

}



.pdr-zks-eq-note{

    margin-top:9px;



    padding:6px 8px;



    border-radius:8px;



    color:#ffb354;



    background:

        rgba(255,126,0,.07);



    text-align:center;



    font-size:9px;



    font-weight:800;

}



.pdr-zks-webtom{

    display:block;



    width:max-content;



    margin:

        9px 0 0 auto;



    color:#737a91!important;



    font-size:9px;



    font-weight:900;



    text-decoration:none!important;



    transition:.15s ease;

}



.pdr-zks-webtom:hover{

    color:#ff793f!important;

}





/* ------------------------------------------------------------

   SKIN SZERINTI VIZUAL

   ------------------------------------------------------------ */



.pdr-zks-engine[data-theme="glass"]

.pdr-zks-viz-bars i{

    background:

        linear-gradient(

            to top,

            #066dff,

            #16d4ff 56%,

            #d3fbff

        );

}



.pdr-zks-engine[data-theme="carbon"]

.pdr-zks-viz-bars i{

    background:

        linear-gradient(

            to top,

            #3e8a12,

            #9ceb35 60%,

            #ddff78

        );

}



.pdr-zks-engine[data-theme="retro"]

.pdr-zks-viz-bars i{

    background:

        linear-gradient(

            to top,

            #8b490b,

            #e7a83b 60%,

            #ffe2a1

        );

}



.pdr-zks-engine[data-theme="neon"]

.pdr-zks-viz-bars i{

    background:

        linear-gradient(

            to top,

            #7b20ff,

            #ef34e7 55%,

            #1ee9ff

        );



    box-shadow:

        0 0 8px

        rgba(226,47,255,.32);

}





/* ------------------------------------------------------------

   MOBIL

   ------------------------------------------------------------ */



@media(max-width:700px){



    .pdr-zks-audio-grid{

        grid-template-columns:1fr;

    }



    .pdr-zks-audio-head{

        align-items:flex-start;

        flex-direction:column;

    }



    .pdr-zks-eq-row{

        gap:5px;

    }

}