/* =====================================================
   AUTHENTICATION VARIABLES
===================================================== */
:root{
    --auth-bg:#000;
    --auth-panel:#070707;
    --auth-card:#ffffff;
    --auth-dark:#111111;
    --auth-gold:#FFD700;
    --auth-gold-soft:rgba(255,215,0,.35);
    --auth-text:#ffffff;
    --auth-muted:#aaaaaa;
    --auth-danger:#ff4444;
    --auth-success:#00c46a;
    --auth-red:#8D0B11;
    --auth-face:#2CCCC4;
}
/* =====================================================
   COMMON AUTH MODAL
===================================================== */
.modal{
    position:absolute;
    inset:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:18px;
    overflow-y:auto;
    overflow-x:hidden;
    background-color:var(--auth-red);
    background-image:url("../images/1B1.png");
    background-repeat:no-repeat;
    background-position:33% center;
    background-size:cover;
    -webkit-overflow-scrolling:touch;
}
.modal[hidden]{
    display:none !important;
}
.modal-content{
    width:100%;
    padding:22px;
    border:.5px solid var(--auth-red);
    border-radius:22px;
    background:#fff;
    text-align:center;
}
.card{
    width:100%;
    margin-bottom:16px;
    padding:16px;
    border:0;
    border-radius:14px;
    background:#fff;
    color:#000;
    text-align:left;
}
/* =====================================================
   AUTH INPUTS
===================================================== */
.authInput,
#regPhone{
    width:100%;
    height:50px;
    margin-top:12px;
    padding:14px;
    border:1px solid var(--auth-red);
    border-radius:10px;
    background:#fff;
    color:#000;
    font-size:15px;
    font-weight:600;
}
.authInput:focus,
#regPhone:focus{
    outline:none;
    border-color:var(--auth-gold);
    box-shadow:
        0 0 10px
        var(--auth-gold-soft);
}
.authInput::placeholder,
#regPhone::placeholder{
    color:#777;
}
/* =====================================================
   AUTH BUTTONS
===================================================== */
.modal button{
    width:100%;
    height:48px;
    margin-top:12px;
    border:0;
    border-radius:10px;
    background:var(--auth-red);
    color:#fff;
    font-size:15px;
    font-weight:800;
    text-align:center;
    cursor:pointer;
}
.modal button:active{
    transform:scale(.98);
}
.modal .link-btn{
    width:auto;
    height:auto;
    margin:8px auto 0;
    padding:8px 10px;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--auth-red);
    font-size:16px;
    font-weight:800;
}
/* =====================================================
   INTERNATIONAL PHONE INPUT
===================================================== */
.iti{
    width:100% !important;
    margin-top:12px;
}
.iti input{
    width:100% !important;
    height:50px !important;
    padding:
        0
        14px
        0
        92px !important;
    border:
        1.5px solid
        var(--auth-gold);
    border-radius:10px;
    background:#fff;
    color:#000;
    font-size:15px;
    font-weight:600;
}
.iti input:focus{
    outline:none;
    box-shadow:
        0 0 10px
        var(--auth-gold-soft);
}
.iti__country-list{
    z-index:99999 !important;
    background:#111 !important;
    color:#fff !important;
}
.iti__country{
    color:#fff !important;
}
.iti__dial-code{
    color:var(--auth-gold) !important;
}
/* =====================================================
   REGISTRATION, OTP AND PIN
===================================================== */
#registrationModal .modal-content{
    max-width:360px;
}
#registrationModal h1,
#otpModal h1,
#pinModal h1,
#loginModal h1{
    margin:
        0
        0
        22px;
    color:var(--auth-gold);
    font-size:30px;
}
#otpTimer{
    margin-top:14px;
    color:var(--auth-red);
    font-size:14px;
    font-weight:700;
}
.pin-login-card p{
    margin:
        10px
        0
        18px;
    color:#ddd;
}
#pinAttemptText{
    margin-top:10px;
    color:var(--auth-red);
    font-size:14px;
}
/* =====================================================
   FACE ID ENROLMENT
===================================================== */
#faceModal{
    z-index:80;
    height:100%;
    padding:0;
    align-items:stretch;
    justify-content:stretch;
    background:#1a1a1a;
}
#faceModal .face-enrol-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    height:100%;
    max-width:none;
    padding:
        max(28px,env(safe-area-inset-top))
        18px
        max(28px,env(safe-area-inset-bottom));
    overflow-y:auto;
    border:0;
    border-radius:0;
    background:#1a1a1a;
    -webkit-overflow-scrolling:touch;
}
.face-onebuy-logo{
    display:block;
    flex:none;
    width:64px;
    height:58px;
    margin:0 auto;
    object-fit:contain;
}
.face-image-wrapper{
    position:relative;
    width:100%;
    max-width:340px;
    height:min(414px,60vh);
    margin:
        50px
        auto
        0;
    overflow:hidden;
    border:
        1px solid
        var(--auth-face);
    border-radius:10px;
    background:#1a1a1a;
    box-shadow:
        5px
        5px
        20px
        rgba(44,204,196,.55);
}
.face-biometric-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
.face-scan-overlay{
    position:absolute;
    inset:0;
    overflow:hidden;
    border-radius:inherit;
    opacity:0;
    pointer-events:none;
    transition:
        opacity
        .2s ease;
}
.face-scan-overlay.active{
    opacity:1;
}
.face-scan-line{
    position:absolute;
    top:-8px;
    left:4%;
    width:92%;
    height:4px;
    border-radius:10px;
    background:var(--auth-face);
    box-shadow:
        0 0 8px var(--auth-face),
        0 0 18px rgba(44,204,196,.9),
        0 0 34px rgba(44,204,196,.55);
    opacity:0;
}
.face-scan-overlay.active .face-scan-line{
    opacity:1;
    animation:
        faceEnrolScan
        2s
        linear
        forwards;
}
@keyframes faceEnrolScan{
    from{
        top:-8px;
    }
    to{
        top:calc(100% - 4px);
    }
}
.face-scan-overlay::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(44,204,196,.05) 45%,
            rgba(44,204,196,.16) 50%,
            rgba(44,204,196,.05) 55%,
            transparent 100%
        );
}
.face-enrol-status{
    width:100%;
    max-width:340px;
    min-height:24px;
    margin-top:24px;
    color:#ddd;
    font-size:15px;
    font-weight:500;
    line-height:1.4;
    text-align:center;
}
.face-enrol-status.scanning,
.face-enrol-status.success{
    color:var(--auth-face);
}
.face-enrol-status.success{
    font-weight:700;
}
.face-enrol-status.error{
    color:#ff6969;
}
.face-action-area{
    width:100%;
    max-width:340px;
    margin-top:auto;
    padding-top:32px;
}
#enableFaceBtn,
#skipFaceBtn{
    width:100%;
    height:46px;
    margin:0;
    border:
        1px solid
        var(--auth-face);
    border-radius:10px;
    background:#1a1a1a;
    color:#fff;
    font-size:15px;
    font-weight:500;
}
#enableFaceBtn:hover,
#skipFaceBtn:hover{
    border-color:#fff;
    background:var(--auth-red);
}
#enableFaceBtn:disabled,
#skipFaceBtn:disabled{
    opacity:.55;
    cursor:not-allowed;
}
#skipFaceBtn{
    margin-top:19px;
}
/* =====================================================
   LOGIN SCREEN
===================================================== */
#loginModal{
    z-index:75;
    height:100%;
    padding:0;
    align-items:stretch;
    justify-content:stretch;
    background-color:var(--auth-red);
    background-image:url("../images/1B1.png");
    background-repeat:no-repeat;
    background-position:33% center;
    background-size:cover;
}
.onebuy-login-content{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    min-width:0;
    margin:0;
    padding:
        max(30px,env(safe-area-inset-top))
        18px
        max(30px,env(safe-area-inset-bottom));
    overflow:hidden;
    border:0;
    border-radius:0;
    background:transparent;
}
.onebuy-login-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:342px;
    min-height:500px;
    margin:0 auto;
    padding:
        128px
        24px
        42px;
    overflow:hidden;
    border:
        1px solid
        rgba(255,255,255,.9);
    border-radius:18px;
    background:
        rgba(255,255,255,.97);
    box-shadow:
        0 18px 45px rgba(0,0,0,.28),
        0 3px 10px rgba(0,0,0,.14);
}
.login-main-logo{
    position:absolute;
    top:72px;
    left:50%;
    z-index:1;
    width:65px;
    height:65px;
    max-width:88%;
    object-fit:contain;
    transform:
        translate(-50%,-58%);
    pointer-events:none;
}
.login-face-area{
    position:relative;
    z-index:4;
    display:flex;
    flex:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    margin:
        -28px
        auto
        0;
}
.login-face-wrapper{
    position:relative;
    width:112px;
    height:112px;
    margin:0 auto;
    overflow:hidden;
    border:
        1px solid
        var(--auth-face);
    border-radius:10px;
    background:
        rgba(20,20,20,.45);
    box-shadow:
        0 0 12px rgba(44,204,196,.25),
        5px 5px 20px rgba(255,210,210,.16);
}
.login-face-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    transition:
        opacity .28s ease,
        transform .28s ease;
}
.login-face-image.login-success-hide{
    opacity:0;
    transform:scale(.86);
}
.login-scan-overlay{
    position:absolute;
    inset:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
}
.login-scan-overlay.active{
    opacity:1;
}
.login-scan-line{
    position:absolute;
    top:-6px;
    left:3%;
    width:94%;
    height:3px;
    border-radius:10px;
    background:var(--auth-face);
    box-shadow:
        0 0 7px var(--auth-face),
        0 0 15px rgba(44,204,196,.9),
        0 0 25px rgba(44,204,196,.55);
}
.login-scan-overlay.active .login-scan-line{
    animation:
        loginFaceScan
        1s
        linear
        forwards;
}
@keyframes loginFaceScan{
    from{
        top:-6px;
    }
    to{
        top:calc(100% - 3px);
    }
}
.login-pin-area{
    position:relative;
    z-index:5;
    flex:none;
    width:100%;
    min-width:0;
    margin:
        20px
        auto
        0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    text-align:center;
}
.login-pin-label{
    width:100%;
    margin:
        0
        auto
        12px;
    color:var(--auth-red);
    font-size:16px;
    font-weight:500;
    line-height:1.2;
    text-align:center;
}
.login-pin-boxes{
    display:flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    max-width:100%;
    gap:5px;
    margin:0 auto;
    padding:0;
    cursor:text;
}
.login-pin-box{
    position:relative;
    display:flex;
    flex:
        0
        0
        35px;
    align-items:center;
    justify-content:center;
    width:35px;
    height:35px;
    border:
        1px solid
        var(--auth-red);
    border-radius:4px;
    background:#fff;
    color:#111;
    font-size:35px;
    line-height:35px;
}
.login-pin-box.filled::after{
    content:"•";
    display:block;
    color:#111;
    font-size:32px;
    line-height:1;
    transform:
        translateY(-1px);
}
.login-pin-box.active{
    border-color:var(--auth-face);
    box-shadow:
        0 0 0 1px rgba(44,204,196,.45),
        0 0 8px rgba(44,204,196,.45);
}
.login-pin-hidden-input{
    position:fixed;
    left:-10000px;
    width:1px;
    height:1px;
    opacity:0;
}
.login-forgot-btn{
    position:relative;
    z-index:5;
    display:block;
    flex:none;
    width:max-content;
    height:auto;
    min-height:20px;
    margin:
        7px
        auto
        0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--auth-red);
    font-size:14px;
    font-weight:400;
    line-height:20px;
    text-align:center;
    text-decoration:underline;
}
.login-forgot-btn:hover{
    background:transparent;
    color:var(--auth-red);
}
#pinAttemptText{
    width:100%;
    min-height:0;
    margin:
        6px
        auto
        0;
    color:var(--auth-red);
    font-size:13px;
    text-align:center;
}
.login-status-text{
    position:relative;
    z-index:6;
    width:100%;
    min-height:18px;
    margin:
        7px
        auto
        0;
    color:var(--auth-face);
    font-size:14px;
    font-weight:600;
    line-height:18px;
    text-align:center;
}
/* =====================================================
   CONNECT MODAL
===================================================== */
#connectModal .card{
    background:#111;
    color:#fff;
    line-height:1.7;
}
#reader{
    width:100%;
    overflow:hidden;
    border-radius:16px;
}
#readerWrapper{
    position:relative;
}
/* =====================================================
   AUTH RESPONSIVE
===================================================== */
@media(max-width:575px){
    #faceModal .face-enrol-card{
        padding-right:0;
        padding-left:0;
    }
    .face-image-wrapper,
    .face-enrol-status,
    .face-action-area{
        width:calc(100% - 36px);
        max-width:340px;
    }
    .face-image-wrapper{
        border-right:
            1px solid
            var(--auth-face);
        border-left:
            1px solid
            var(--auth-face);
    }
    #loginModal{
        right:0;
        left:0;
        width:100%;
    }
    .onebuy-login-content{
        width:100%;
        padding-right:12px;
        padding-left:12px;
    }
    .login-face-area,
    .login-pin-area{
        right:auto;
        left:auto;
        transform:none;
    }
    .login-pin-boxes{
        margin-right:auto;
        margin-left:auto;
    }
    .onebuy-login-card{
        width:calc(100% - 28px);
        max-width:342px;
        min-height:495px;
        padding:
            128px
            18px
            38px;
        border-radius:16px;
    }
}
@media(max-height:700px){
    .face-image-wrapper{
        height:min(330px,42vh);
        margin-top:28px;
    }
    .face-action-area{
        padding-top:22px;
    }
    .onebuy-login-card{
        min-height:455px;
        padding-top:108px;
        padding-bottom:28px;
    }
    .login-main-logo{
        top:60px;
    }
}
@media(max-height:650px){
    .login-face-area{
        margin-top:-15px;
    }
}