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

PremiumZone

Version :
2.0.0

File :
assets/css/frame.css

Description :
PremiumZone Frame

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

/* ==========================================================
   FRAME
========================================================== */

.pz-frame{

    position:fixed;

    left:50%;

    top:50%;

    transform:

        translate(

            -50%,

            -50%

        );

    width:

        min(

            940px,

            calc(

                100vw - 36px

            )

        );

    height:

        min(

            760px,

            calc(

                100vh - 48px

            )

        );

    overflow:hidden;

    z-index:100;

    pointer-events:auto;

}

/* ==========================================================
   PANEL
========================================================== */

.pz-frame-panel{

    position:absolute;

    inset:1px;

    background:

        rgba(

            0,

            0,

            0,

            .65

        );

    backdrop-filter:

        blur(

            1px

        );

    opacity:1;

}

/* ==========================================================
   BORDER
========================================================== */

.pz-frame-line{

    position:absolute;

    background:

        rgba(

            255,

            255,

            255,

            .72

        );

}

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

.pz-frame-top{

    top:0;

    left:0;

    width:100%;

    height:1px;

}

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

.pz-frame-right{

    top:0;

    right:0;

    width:1px;

    height:100%;

}

/* ==========================================================
   BOTTOM
========================================================== */

.pz-frame-bottom{

    left:0;

    bottom:0;

    width:100%;

    height:1px;

}

/* ==========================================================
   LEFT
========================================================== */

.pz-frame-left{

    top:0;

    left:0;

    width:1px;

    height:100%;

}

/* ==========================================================
   SCANNER
========================================================== */

.pz-frame-scanner{

    display:none;

}

/* ==========================================================
   CONTENT
========================================================== */

.pz-frame-content{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:

        42px;

    z-index:5;

}

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

@media(

    max-width:768px

){

    .pz-frame{

        width:

            calc(

                100vw - 22px

            );

        height:

            calc(

                100vh - 28px

            );

    }

    .pz-frame-content{

        padding:

            24px;

    }

}

/* ==========================================================
   DESKTOP
========================================================== */

@media(

    min-width:1400px

){

    .pz-frame{

        width:

            980px;

        height:

            780px;

    }

}