

body.confirm-open {
    overflow: hidden;
}


.confirm-overlay {

    position: fixed;

    inset: 0;

    z-index: 5000;


    display: flex;

    align-items: center;

    justify-content: center;


    background:
        rgba(12, 12, 12, 0.55);


    

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);


    opacity: 0;

    visibility: hidden;

    pointer-events: none;


    transition:

        opacity 220ms ease,

        visibility 220ms ease;
}


.confirm-overlay.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}





.confirm-window {

    position: relative;


    width: 771.92px;

    height: 415px;


    display: flex;

    flex-direction: row;


    overflow: visible;


  

    border-radius: 16px;


    background: #000000;


    transform:
        scale(0.97);


    transition:

        transform
        260ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.confirm-overlay.is-open
.confirm-window {

    transform:
        scale(1);
}





.confirm-image {

    position: relative;


    flex:
        0
        0
        359px;


    width: 359px;

    height: 413px;


    overflow: hidden;


    border-radius:

        16px
        0
        0
        16px;


    box-shadow:

        0
        12px
        30px
        rgba(
            0,
            0,
            0,
            0.25
        );
}


.confirm-image img {

    width: 100%;

    height: 100%;


    display: block;


    object-fit: cover;

    object-position: center;
}





.confirm-panel {

    flex:
        0
        0
        412px;


    width: 412px;

    height: 413px;


    display: flex;

    flex-direction: column;

    justify-content: space-between;


    padding: 30px;


    background:
        #000000;


    border-radius:

        0
        16px
        16px
        0;
}





.confirm-title {

    width: 158px;

    height: 12px;


    margin: 0;


    overflow: visible;


    color:
        rgba(
            255,
            255,
            255,
            0.41
        );


    font-family:
        "Antenna Purina",
        Arial,
        sans-serif;


    font-size: 16px;

    font-weight: 400;


    line-height: 12px;


    letter-spacing: 0;


    white-space: nowrap;
}





.confirm-number {

    width: 170px;

    height: 68px;


    margin: 0;


    color:
        #ffffff;


    font-family:
        "Antenna Purina",
        Arial,
        sans-serif;


    font-size:
        91.69px;


    font-weight:
        100;


    line-height:
        68px;


    letter-spacing:
        -0.07em;


    white-space:
        nowrap;
}





.confirm-bottom {

    width: 352px;

    height: 170px;


    display: flex;

    flex-direction: column;


    gap: 27px;
}





.confirm-warning {

    width: 352px;

    height: 26px;


    margin: 0;


    color:
        #ffffff;


    font-family:
        "Antenna Purina",
        Arial,
        sans-serif;


    font-size:
        14px;


    font-weight:
        400;


    line-height:
        13px;


    letter-spacing:
        0;


    overflow: hidden;
}





.confirm-actions {

    width: 352px;

    height: 117px;


    display: flex;

    flex-direction: column;


    gap: 13px;
}




.confirm-back {

    width: 352px;

    height: 53px;


    padding:

        0
        22px;


    display: flex;

    align-items: center;

    justify-content: center;


    gap: 10px;


    border:

        1px
        solid
        rgba(
            255,
            255,
            255,
            0.18
        );


    border-radius:
        9px;


    background:
        #1f1f1f;


    color:
        #ffffff;


    cursor:
        pointer;


    font-family:
        "Antenna Purina",
        Arial,
        sans-serif;


    font-size:
        14px;


    font-weight:
        500;
}


.confirm-back img {

    width: 20px;

    height: 19px;


    object-fit: contain;
}





.confirm-vote {

    width: 352px;

    height: 51px;


    padding:

        0
        22px;


    display: flex;

    align-items: center;

    justify-content: center;


    gap: 10px;


    border:

        1px
        solid
        rgba(
            255,
            255,
            255,
            0.22
        );


    border-radius:
        9px;


    background:

        linear-gradient(
            110deg,

            #a38752
            0%,

            #deb972
            50%,

            #a38752
            100%
        );


    color:
        #0c0c0c;


    cursor:
        pointer;


    font-family:
        "Antenna Purina",
        Arial,
        sans-serif;


    font-size:
        14px;


    font-weight:
        500;
}


.confirm-vote img {

    width: 20px;

    height: 20px;


    object-fit:
        contain;
}




.confirm-medal {

    position: absolute;


   

    left: -82px;

    top: -47px;


    z-index: 20;


    width: 161.71px;

    height: 246.7px;


    object-fit: contain;


    transform:
        rotate(-5.9deg);


    filter:

        drop-shadow(
            0
            4px
            13.7px
            rgba(
                0,
                0,
                0,
                0.51
            )
        );


    pointer-events:
        none;
}




.confirm-back:hover,
.confirm-vote:hover {

    filter:
        brightness(1.07);
}


.confirm-back:active,
.confirm-vote:active {

    transform:
        scale(0.99);
}





@media
(max-width: 900px) {

    .confirm-window {

        transform:
            scale(0.85);

    }


    .confirm-overlay.is-open
    .confirm-window {

        transform:
            scale(0.85);

    }

}


@media
(max-width: 700px) {

    .confirm-window {

        transform:
            scale(0.65);

    }


    .confirm-overlay.is-open
    .confirm-window {

        transform:
            scale(0.65);

    }

}