/* ==========================================
   General styling
========================================== */

body {
    min-height: 100vh;
}

.card {
    border-radius: 1rem;
}


/* ==========================================
   Verification icon
========================================== */

.verification-icon {
    width: 48px;
    height: 48px;

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

    background: rgba(13, 110, 253, 0.1);
    border-radius: 50%;

    font-size: 1.5rem;
}


/* ==========================================
   Camera area
========================================== */

.camera-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3;

    position: relative;

    background: #000;
}


/*
    The actual camera feed
*/

#camera {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/*
    Canvas sits above video
    Used later by MediaPipe
    to draw face landmarks
*/

#overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


/* ==========================================
   Face guide
========================================== */

/*
    This is the oval/rectangle that tells
    the user where to place their face.
*/

.face-guide {

    position: absolute;

    width: 55%;
    height: 70%;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border: 3px solid rgba(255,255,255,0.8);

    border-radius: 50%;

    pointer-events: none;

    transition: 
        border-color .3s ease,
        box-shadow .3s ease;
}


/*
    Later JS will add this class
    when face conditions are good
*/

.face-guide.success {

    border-color: #198754;

    box-shadow:
        0 0 20px rgba(25,135,84,.8);
}


/*
    Warning state
*/

.face-guide.warning {

    border-color: #ffc107;

    box-shadow:
        0 0 20px rgba(255,193,7,.7);
}


/* ==========================================
   Countdown overlay
========================================== */

.countdown-overlay {

    position: absolute;

    inset: 0;

    display: flex;

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

    color: white;

    font-size: 6rem;

    font-weight: 700;

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

    z-index: 10;

}


/*
    Small animation when numbers change
*/

.countdown-overlay.animate {

    animation: countdownPop .8s ease;
}


@keyframes countdownPop {

    0% {
        transform: scale(.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }

}


/* ==========================================
   Status area
========================================== */

#statusAlert {

    transition: all .3s ease;

}


/*
    Status variants that JS can apply later
*/

#statusAlert.success {

    background-color: #d1e7dd;

    color: #0f5132;

    border-color: #badbcc;

}


#statusAlert.warning {

    background-color: #fff3cd;

    color: #664d03;

    border-color: #ffecb5;

}


#statusAlert.error {

    background-color: #f8d7da;

    color: #842029;

    border-color: #f5c2c7;

}


/* ==========================================
   Preview image
========================================== */

#previewImage {

    max-height: 500px;

    object-fit: cover;

}


/* ==========================================
   Mobile adjustments
========================================== */

@media (max-width: 576px) {

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }


    .card-body {
        padding: 1.25rem !important;
    }


    .face-guide {

        width: 65%;
        height: 65%;

    }


    .countdown-overlay {

        font-size: 4rem;

    }

}