/*
|--------------------------------------------------------------------------
| Hidden Gateway CSS
| Part 1
|--------------------------------------------------------------------------
| Base
| Variables
| Modal
| Shared Components
|--------------------------------------------------------------------------
*/

:root{

    --gateway-primary:#3b82f6;
    --gateway-primary-hover:#2563eb;

    --gateway-success:#22c55e;
    --gateway-info:#06b6d4;
    --gateway-warning:#f59e0b;
    --gateway-danger:#ef4444;

    --gateway-bg:rgba(15,23,42,.86);

    --gateway-border:rgba(255,255,255,.10);

    --gateway-text:#ffffff;

    --gateway-text-muted:rgba(255,255,255,.70);

    --gateway-radius:22px;

    --gateway-transition:.30s ease;

}

/*
|--------------------------------------------------------------------------
| Modal
|--------------------------------------------------------------------------
*/

.gateway-dialog{

    width:95vw;

    max-width:540px;

    margin:auto;

    transition:all .35s ease;

}

.gateway-sm{

    max-width:520px;

}

.gateway-md{

    max-width:680px;

}

.gateway-lg{

    max-width:900px;

}

.gateway-xl{

    max-width:1180px;

}

.gateway-control-dialog{

    width:96vw;

    max-width:1500px;

}

.gateway-glass{

    background:var(--gateway-bg);

    border:1px solid var(--gateway-border);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border-radius:26px;

    overflow:hidden;

    box-shadow:

        0 30px 80px rgba(0,0,0,.45);

}

/*
|--------------------------------------------------------------------------
| Backdrop
|--------------------------------------------------------------------------
*/

.modal-backdrop.show{

    opacity:.82;

    backdrop-filter:blur(4px);

}

/*
|--------------------------------------------------------------------------
| Page
|--------------------------------------------------------------------------
*/

.gateway-page{

    display:flex;

    flex-direction:column;

    min-height:100%;

    height:100%;

    overflow-y:auto;

    overflow-x:hidden;

    padding:30px;

}

@keyframes gatewayFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
*/

.gateway-container{

    width:100%;

    max-width:520px;

    margin:auto;

}

/*
|--------------------------------------------------------------------------
| Typography
|--------------------------------------------------------------------------
*/

.gateway-title{

    color:var(--gateway-text);

    font-size:30px;

    font-weight:700;

    letter-spacing:.3px;

}

.gateway-subtitle{

    color:var(--gateway-text-muted);

    font-size:15px;

    line-height:1.7;

}

/*
|--------------------------------------------------------------------------
| Circle Icon
|--------------------------------------------------------------------------
*/

.gateway-icon,

.gateway-security-circle{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            135deg,
            var(--gateway-primary),
            var(--gateway-primary-hover)
        );

    box-shadow:

        0 15px 40px rgba(37,99,235,.30);

}

/*
|--------------------------------------------------------------------------
| Input
|--------------------------------------------------------------------------
*/

.gateway-input{

    height:60px;

    border-radius:18px!important;

    background:rgba(255,255,255,.06)!important;

    border:1px solid rgba(255,255,255,.12)!important;

    color:#fff!important;

    font-size:26px!important;

    font-weight:700;

    text-align:center;

    letter-spacing:6px;

    transition:var(--gateway-transition);

}

.gateway-input::placeholder{

    color:rgba(255,255,255,.30);

}

.gateway-input:focus{

    border-color:var(--gateway-primary)!important;

    box-shadow:

        0 0 0 .20rem rgba(59,130,246,.18)!important;

}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.gateway-btn{

    height:56px;

    border:none;

    border-radius:18px;

    color:#fff;

    font-weight:600;

    background:

        linear-gradient(
            135deg,
            var(--gateway-primary),
            var(--gateway-primary-hover)
        );

    transition:var(--gateway-transition);

}

.gateway-btn:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:

        0 15px 35px rgba(37,99,235,.28);

}

.gateway-btn-light{

    height:56px;

    border-radius:18px;

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

    border:1px solid rgba(255,255,255,.10);

    color:#fff;

    transition:var(--gateway-transition);

}

.gateway-btn-light:hover{

    background:rgba(255,255,255,.15);

    color:#fff;

}

/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/

.gateway-status{

    color:var(--gateway-text-muted);

    text-align:center;

    font-size:13px;

}

/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

.gateway-page::-webkit-scrollbar{

    width:6px;

}

.gateway-page::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.15);

    border-radius:20px;

}

.gateway-module-body{

    max-height:none;

    height:auto;

    overflow:visible;

}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/


@media(max-width:768px){

    .gateway-dialog{

        width:98vw;

    }

      .gateway-page{

        padding:15px;

        height:auto;

        min-height:100%;

        overflow-y:auto;

    }

    .gateway-title{

        font-size:25px;

    }

    .gateway-container{

        max-width:100%;

    }

}

@media(max-width:480px){

    .gateway-dialog{

        width:100vw;

        margin:0;

    }

    .gateway-glass{

        border-radius:0;

        min-height:100vh;

    }

    .gateway-page{

        padding:22px;

    }

}

@media(min-width:992px){

.gateway-module-body{

    max-height:60vh;

    overflow-y:auto;

}

}
/*
|--------------------------------------------------------------------------
| Hidden Gateway CSS
| Part 2
|--------------------------------------------------------------------------
| Loading Screen
|--------------------------------------------------------------------------
*/

.gateway-loading{

    width:100%;

    max-width:460px;

    margin:auto;

    text-align:center;

}

/*
|--------------------------------------------------------------------------
| Loading Icon
|--------------------------------------------------------------------------
*/

.gateway-loading-icon{

    position:relative;

    width:110px;

    height:110px;

    margin:0 auto 25px;

}

.gateway-icon-ring{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:2px solid rgba(59,130,246,.20);

    animation:gatewayRing 2.5s linear infinite;

}

.gateway-loading .gateway-icon{

    position:absolute;

    inset:12px;

}

/*
|--------------------------------------------------------------------------
| Progress
|--------------------------------------------------------------------------
*/

.gateway-progress-wrapper{

    width:100%;

    margin-top:25px;

}

.gateway-progress{

    width:100%;

    height:10px;

    overflow:hidden;

    border-radius:30px;

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

}

.gateway-progress-bar{

    width:0;

    height:100%;

    border-radius:30px;

    transition:width .45s ease;

    background:linear-gradient(
        90deg,
        #3b82f6,
        #60a5fa
    );

    box-shadow:

        0 0 18px rgba(59,130,246,.45);

}

/*
|--------------------------------------------------------------------------
| Percent
|--------------------------------------------------------------------------
*/

.gateway-loading-percent{

    display:inline-block;

    margin-top:18px;

    font-size:34px;

    font-weight:700;

    color:#60a5fa;

    letter-spacing:1px;

}

/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/

.gateway-status{

    margin-top:20px;

    color:rgba(255,255,255,.75);

    font-size:14px;

    line-height:1.8;

}

/*
|--------------------------------------------------------------------------
| Animated Dots
|--------------------------------------------------------------------------
*/

.gateway-dot{

    display:inline-block;

    animation:gatewayDots 1.4s infinite;

}

.gateway-dot:nth-child(2){

    animation-delay:.20s;

}

.gateway-dot:nth-child(3){

    animation-delay:.40s;

}

/*
|--------------------------------------------------------------------------
| Animation
|--------------------------------------------------------------------------
*/

@keyframes gatewayRing{

    0%{

        transform:scale(.90);

        opacity:.35;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

    100%{

        transform:scale(.90);

        opacity:.35;

    }

}

@keyframes gatewayDots{

    0%{

        opacity:.20;

        transform:translateY(0);

    }

    50%{

        opacity:1;

        transform:translateY(-2px);

    }

    100%{

        opacity:.20;

        transform:translateY(0);

    }

}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .gateway-loading{

        max-width:100%;

    }

    .gateway-loading-icon{

        width:95px;

        height:95px;

    }

    .gateway-loading .gateway-icon{

        inset:10px;

    }

    .gateway-loading-percent{

        font-size:28px;

    }

}

@media(max-width:480px){

    .gateway-loading-icon{

        width:82px;

        height:82px;

    }

    .gateway-loading .gateway-icon{

        inset:8px;

    }

    .gateway-progress{

        height:8px;

    }

    .gateway-loading-percent{

        font-size:24px;

    }

}

/*
|--------------------------------------------------------------------------
| Hidden Gateway CSS
| Part 3
|--------------------------------------------------------------------------
| Security Verification
|--------------------------------------------------------------------------
*/

.gateway-security-circle{

    width:90px;

    height:90px;

    margin:auto;

}

/*
|--------------------------------------------------------------------------
| Method Card
|--------------------------------------------------------------------------
*/

.gateway-method-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    padding:22px;

    border-radius:20px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    transition:all .30s ease;

}

.gateway-method-card:hover{

    transform:translateY(-4px);

    border-color:rgba(59,130,246,.45);

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

    box-shadow:

        0 18px 40px rgba(0,0,0,.28);

}

/*
|--------------------------------------------------------------------------
| Left Side
|--------------------------------------------------------------------------
*/

.gateway-method-left{

    display:flex;

    align-items:center;

    gap:20px;

    flex:1;

}

/*
|--------------------------------------------------------------------------
| Icon
|--------------------------------------------------------------------------
*/

.gateway-method-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.30s;

}

.gateway-method-card:hover .gateway-method-icon{

    transform:scale(1.05);

}

/*
|--------------------------------------------------------------------------
| Information
|--------------------------------------------------------------------------
*/

.gateway-method-info{

    flex:1;

}

.gateway-method-info h5{

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    margin:0;

}

.gateway-method-info .text-muted{

    color:rgba(255,255,255,.68)!important;

    font-size:14px;

    line-height:1.6;

    margin-top:6px;

}

/*
|--------------------------------------------------------------------------
| Badge
|--------------------------------------------------------------------------
*/

.gateway-method-info .badge{

    font-size:11px;

    font-weight:600;

    border-radius:8px;

    padding:6px 10px;

}

/*
|--------------------------------------------------------------------------
| Action Button
|--------------------------------------------------------------------------
*/

.gateway-action-btn{

    min-width:150px;

    height:46px;

    border-radius:12px;

    font-weight:600;

    transition:.25s;

}

.gateway-action-btn:hover{

    transform:translateY(-2px);

}

/*
|--------------------------------------------------------------------------
| Focus State
|--------------------------------------------------------------------------
*/

.gateway-method-card:focus-within{

    border-color:#3b82f6;

    box-shadow:

        0 0 0 .2rem rgba(59,130,246,.18);

}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .gateway-method-card{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .gateway-method-left{

        width:100%;

    }

    .gateway-method-icon{

        width:64px;

        height:64px;

        min-width:64px;

    }

    .gateway-action-btn{

        width:100%;

    }

}

@media(max-width:480px){

    .gateway-method-card{

        padding:18px;

    }

    .gateway-method-info h5{

        font-size:16px;

    }

    .gateway-method-info .text-muted{

        font-size:13px;

    }

}

/*
|--------------------------------------------------------------------------
| Hidden Gateway CSS
| Part 4
|--------------------------------------------------------------------------
| OTP Verification
|--------------------------------------------------------------------------
*/

.gateway-otp-container{

    width:100%;

    max-width:520px;

    margin:auto;

}

/*
|--------------------------------------------------------------------------
| OTP Boxes
|--------------------------------------------------------------------------
*/

.gateway-otp-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

}

.gateway-otp-boxes{

    display:flex;

    justify-content:center;

    gap:12px;

    width:100%;

}

.gateway-otp-box{

    width:58px;

    height:66px;

    border:none;

    border-radius:16px;

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

    border:1px solid rgba(255,255,255,.10);

    color:#ffffff;

    text-align:center;

    font-size:28px;

    font-weight:700;

    transition:all .25s ease;

}

.gateway-otp-box::selection{

    background:transparent;

}

.gateway-otp-box::placeholder{

    color:transparent;

}

.gateway-otp-box:focus{

    outline:none;

    border-color:#3b82f6;

    background:rgba(59,130,246,.10);

    box-shadow:

        0 0 0 .20rem rgba(59,130,246,.18);

    transform:translateY(-2px);

}

.gateway-otp-box.filled{

    border-color:#3b82f6;

    background:rgba(59,130,246,.14);

}

/*
|--------------------------------------------------------------------------
| Countdown
|--------------------------------------------------------------------------
*/

#otpCountdownBadge{

    border-radius:12px;

    font-weight:600;

    transition:.25s;

}

#otpCountdown{

    min-width:58px;

    display:inline-block;

    font-weight:700;

    color:#16a34a;

}

/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/

#otpStatus{

    min-height:22px;

    font-size:14px;

    transition:.25s;

}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

#verifyOtpBtn{

    height:52px;

    border-radius:14px;

    font-weight:600;

}

#resendOtpBtn{

    height:50px;

    border-radius:14px;

}

/*
|--------------------------------------------------------------------------
| Success
|--------------------------------------------------------------------------
*/

.gateway-otp-box.success{

    border-color:#22c55e;

    background:rgba(34,197,94,.12);

}

/*
|--------------------------------------------------------------------------
| Error
|--------------------------------------------------------------------------
*/

.gateway-otp-box.error{

    border-color:#ef4444;

    background:rgba(239,68,68,.10);

    animation:gatewayShake .35s;

}

/*
|--------------------------------------------------------------------------
| Shake Animation
|--------------------------------------------------------------------------
*/

@keyframes gatewayShake{

    0%{

        transform:translateX(0);

    }

    25%{

        transform:translateX(-5px);

    }

    50%{

        transform:translateX(5px);

    }

    75%{

        transform:translateX(-5px);

    }

    100%{

        transform:translateX(0);

    }

}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
.gateway-control-dialog{

    max-width:1500px;

    width:96vw;

}

.gateway-hero{



    background:linear-gradient(
        135deg,
        #0d6efd,
        #0b5ed7,
        #084298
    );

}

@media(max-width:768px){

.gateway-hero{

    border-radius:18px;

}

.gateway-hero h1{

    font-size:22px;

    text-align:center;

}

.gateway-hero .badge{

    width:100%;

}

}

@media(max-width:991px){

.gateway-sidebar{

    margin-bottom:20px;

}

}

/* ==========================================
   MODULE GRID
========================================== */

#gatewayMenuGrid{

    min-height:250px;

}

/* ==========================================
   MODULE CARD
========================================== */

.gateway-module{

    background:#ffffff;

    border-radius:10px;

    transition:all .25s ease;

    border:1px solid #eef1f5;

    height:100%;

    box-shadow:0 8px 24px rgba(0,0,0,.06);

}


.gateway-module:hover{
    transform:translateY(-6px);
    box-shadow:0 .75rem 2rem rgba(0,0,0,.08);
}

.gateway-module .btn{
    transition:.2s;
}

.gateway-module .card-body{

    padding:2rem;

}

.gateway-module-title{

    min-height:40px;

    font-weight:700;

    line-height:1.35;

}

.gateway-module-desc{

    min-height:35px;

}

.gateway-control-dialog{
    max-width:1500px;
    width:96vw;
    height:95vh;
}

.gateway-control-dialog .modal-content{
    height:95vh;
    overflow:hidden;
}

.gateway-control-dialog .modal-body{
    overflow-y:auto;
    overflow-x:hidden;
    padding:0;
}



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

@media (max-width:1199px){

    .gateway-hero .row{

        text-align:center;

    }

}

@media (max-width:991px){

    .gateway-hero .symbol{

        margin:auto;

    }

}

@media (max-width:767px){

    .gateway-hero h1{

        font-size:1.5rem;

    }

    .gateway-hero .badge{

        width:100%;

    }

    .card-body{

        padding:1.25rem;

    }

}


#gatewayFooter{

    opacity:0;

    transform:translateY(20px);

    transition:.35s ease;

}

#gatewayFooter.show{

    opacity:1;

    transform:translateY(0);

}

.modal-fullscreen{
    width:100vw !important;
    max-width:100vw !important;
    height:100vh !important;
    margin:0 !important;
}

.modal-fullscreen .modal-content{
    width:100vw !important;
    height:100vh !important;
    border-radius:0 !important;
}

.modal-fullscreen .modal-body{
    padding:0;
    overflow:hidden;
}

.modal-fullscreen iframe{
    width:100%;
    height:100%;
}