/* ==========================================
   RESET
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

    background:#111827;

}

/* ==========================================
   APP
========================================== */

.crs-checkin-app{

    width:100%;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;

}

/* ==========================================
   SCREEN
========================================== */

.crs-screen{

    width:100%;
    max-width:420px;

}

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

.crs-card{

    background:#ffffff;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

}

/* ==========================================
   LOGO
========================================== */

.crs-logo{

    font-size:34px;

    font-weight:700;

    color:#2563eb;

    margin-bottom:25px;

}

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

.crs-card h2{

    font-size:28px;

    margin-bottom:10px;

    color:#111827;

}

.crs-card p{

    color:#6b7280;

    margin-bottom:30px;

}

/* ==========================================
   PIN
========================================== */

#crs-pin{

    width:100%;
    height:58px;

    border:2px solid #dbeafe;

    border-radius:14px;

    text-align:center;

    font-size:30px;

    letter-spacing:10px;

    outline:none;

    transition:.25s;

}

#crs-pin:focus{

    border-color:#2563eb;

}

/* ==========================================
   MESSAGE
========================================== */

.crs-message{

    height:24px;

    margin-top:12px;

    color:#dc2626;

    font-size:14px;

}

/* ==========================================
   BUTTON
========================================== */

#crs-start{

    width:100%;

    height:58px;

    margin-top:18px;

    border:none;

    border-radius:14px;

    background:#2563eb;

    color:#fff;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

#crs-start:hover{

    background:#1d4ed8;

}

/* ==========================================
   CAMERA
========================================== */

.crs-camera-card{

    position:relative;

    width:100%;

    border-radius:20px;

    overflow:hidden;

    background:#000;

}

#reader{

    width:100%;

    min-height:420px;

}

#reader video{

    width:100% !important;

    height:auto !important;

}

#reader img{

    display:none !important;

}

#reader__dashboard{

    display:none !important;

}

#reader__scan_region{

    background:#000;

}

/* ==========================================
   OVERLAY
========================================== */

.crs-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    pointer-events:none;

}

.crs-frame{

    width:250px;

    height:250px;

    position:relative;

}

.crs-frame span{

    position:absolute;

    width:42px;

    height:42px;

    border:5px solid #00e676;

}

.tl{

    top:0;
    left:0;

    border-right:none;
    border-bottom:none;

}

.tr{

    top:0;
    right:0;

    border-left:none;
    border-bottom:none;

}

.bl{

    left:0;
    bottom:0;

    border-right:none;
    border-top:none;

}

.br{

    right:0;
    bottom:0;

    border-left:none;
    border-top:none;

}

/* ==========================================
   STATUS
========================================== */

.crs-status{

    margin-top:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    color:#ffffff;

    font-size:18px;

}

.status-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#22c55e;

}

/* ==========================================
   POPUP
========================================== */

.scan-result{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.45);

    z-index:9999;

}

.scan-popup{

    width:90%;
    max-width:360px;

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

}

.scan-popup .icon{

    font-size:64px;

    margin-bottom:15px;

}

.scan-popup h2{

    margin-bottom:12px;

}

.scan-popup h3{

    margin-bottom:12px;

    color:#111827;

}

.scan-popup p{

    color:#6b7280;

}

.success h2{

    color:#16a34a;

}

.error h2{

    color:#dc2626;

}

.warning h2{

    color:#d97706;

}

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

@media(max-width:768px){

    .crs-checkin-app{

        padding:15px;

    }

    .crs-card{

        padding:30px 22px;

    }

    #reader{

        min-height:340px;

    }

    .crs-frame{

        width:220px;
        height:220px;

    }

}