/* =====================================
   FINEST CLASSIC
   TOP UP PAGE
===================================== */

.topup-page{

    width:100%;

    min-height:100vh;

    padding-top:150px;

    padding-bottom:100px;

    display:flex;

    justify-content:center;

    align-items:flex-start;

}


/* =====================================
   TOP UP CONTAINER
===================================== */

.topup-section{

    width:90vw;

    max-width:1400px;

    margin:40px auto;

    padding:40px;

    position:relative;

    border-radius:25px;

    background:
        rgba(5,10,18,.72);

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

    backdrop-filter:
        blur(20px);

    box-shadow:

        0 0 30px
        rgba(0,183,255,.08),

        0 0 80px
        rgba(0,183,255,.05);

}


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

.topup-header{

    text-align:center;

    margin-bottom:35px;

}


.topup-header h1{

    margin:0 0 10px;

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(42px,5vw,70px);

    font-weight:700;

    letter-spacing:4px;

    color:#7cecff;

    text-shadow:

        0 0 10px
        rgba(124,236,255,.65),

        0 0 25px
        rgba(0,183,255,.45);

    animation:
        topupTitleGlow
        4s ease-in-out infinite;

}


.topup-header p{

    margin:0;

    color:#b7eaff;

    font-size:16px;

    letter-spacing:2px;

}


/* =====================================
   TOP UP FRAME
===================================== */

.topup-frame{

    width:100%;

    height:800px;

    position:relative;

    overflow:hidden;

    border-radius:20px;

    background:#04060d;

    border:
        1px solid
        rgba(124,236,255,.18);

    box-shadow:

        0 0 20px
        rgba(124,236,255,.08),

        0 0 55px
        rgba(0,183,255,.08);

    isolation:isolate;

}


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

.topup-frame::before{

    content:'';

    position:absolute;

    inset:-1px;

    border-radius:21px;

    padding:1px;

    background:

        linear-gradient(

            90deg,

            transparent 0%,

            rgba(124,236,255,.15) 25%,

            rgba(0,183,255,.8) 50%,

            rgba(124,236,255,.15) 75%,

            transparent 100%

        );

    background-size:
        200% 100%;

    animation:
        topupBorderSweep
        5s linear infinite;

    -webkit-mask:

        linear-gradient(#fff 0 0)
        content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

    z-index:3;

}


@keyframes topupBorderSweep{

    0%{

        background-position:
            200% 0;

    }

    100%{

        background-position:
            -200% 0;

    }

}


/* =====================================
   IFRAME
===================================== */

.topup-frame iframe{

    display:block;

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    min-width:100%;

    min-height:100%;

    border:0;

    background:#04060d;
	
	overflow:hidden;

}


/* =====================================
   LOADER
===================================== */

.topup-loader{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:15px;

    background:

        radial-gradient(

            circle,

            rgba(0,183,255,.12),

            rgba(4,6,13,.98) 65%

        );

    color:#b7eaff;

    font-family:
        'Rajdhani',
        sans-serif;

    font-size:16px;

    letter-spacing:2px;

    z-index:5;

    opacity:1;

    visibility:visible;

    transition:

        opacity .5s ease,

        visibility .5s ease;

}


.topup-loader.hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}


/* =====================================
   LOADER SPINNER
===================================== */

.loader-spinner{

    width:42px;

    height:42px;

    border-radius:50%;

    border:
        3px solid
        rgba(124,236,255,.15);

    border-top-color:
        #7cecff;

    border-right-color:
        #00b7ff;

    box-shadow:

        0 0 15px
        rgba(0,183,255,.35);

    animation:
        topupSpin
        .8s linear infinite;

}


@keyframes topupSpin{

    to{

        transform:
            rotate(360deg);

    }

}


/* =====================================
   TITLE GLOW
===================================== */

@keyframes topupTitleGlow{

    0%,
    100%{

        text-shadow:

            0 0 10px
            rgba(124,236,255,.5),

            0 0 25px
            rgba(0,183,255,.3);

    }

    50%{

        text-shadow:

            0 0 18px
            rgba(124,236,255,.9),

            0 0 45px
            rgba(0,183,255,.5);

    }

}


/* =====================================
   NAV TOPUP ACTIVE
===================================== */

.nav-links a.active{

    color:#7cecff;

    text-shadow:

        0 0 8px
        rgba(124,236,255,.7);

}


/* =====================================
   RESPONSIVE
===================================== */

@media(max-width:900px){

    .topup-page{

        padding-top:125px;

    }

    .topup-section{

        width:94vw;

        padding:25px;

    }

    .topup-frame{

        height:700px;

    }

}


@media(max-width:600px){

    .topup-page{

        padding-top:110px;

    }

    .topup-section{

        width:96vw;

        padding:18px;

        margin:25px auto;

        border-radius:18px;

    }

    .topup-header{

        margin-bottom:25px;

    }

    .topup-header h1{

        font-size:36px;

    }

    .topup-header p{

        font-size:13px;

        letter-spacing:1px;

    }

    .topup-frame{

        height:650px;

        border-radius:15px;

    }

}