.face-verification-container {
    width: 400px;
    max-width: 100%;
}

.face-subtitle {
    white-space: nowrap;
}


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

.face-camera {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: #EEF0F8;
}

    .face-camera video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /*
     * Mirror the preview so that camera movement
     * feels natural to the user.
     *
     * The captured image itself is NOT mirrored.
     */
        transform: scaleX(-1);
    }


/* =========================================================
   FACE GUIDE
   ========================================================= */

.face-guide {
    position: absolute;
    inset: 0;
    pointer-events: none;
}


/* =========================================================
   FACE OVAL
   ========================================================= */

.face-oval {
    position: absolute;
    width: 42%;
    height: 68%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #3699FF;
    border-radius: 50%;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}


/* =========================================================
   SCAN CORNERS
   ========================================================= */

.face-guide-corner {
    position: absolute;
    width: 32px;
    height: 32px;
    transition: border-color 0.25s ease, opacity 0.25s ease;
}


    .face-guide-corner.top-left {
        left: 20px;
        top: 20px;
        border-left: 3px solid #3699FF;
        border-top: 3px solid #3699FF;
        border-radius: 4px 0 0 0;
    }


    .face-guide-corner.top-right {
        right: 20px;
        top: 20px;
        border-right: 3px solid #3699FF;
        border-top: 3px solid #3699FF;
        border-radius: 0 4px 0 0;
    }


    .face-guide-corner.bottom-left {
        left: 20px;
        bottom: 20px;
        border-left: 3px solid #3699FF;
        border-bottom: 3px solid #3699FF;
        border-radius: 0 0 0 4px;
    }


    .face-guide-corner.bottom-right {
        right: 20px;
        bottom: 20px;
        border-right: 3px solid #3699FF;
        border-bottom: 3px solid #3699FF;
        border-radius: 0 0 4px 0;
    }


/* =========================================================
   SEARCHING
   Blue
   ========================================================= */

.face-guide-searching .face-guide-corner {
    border-color: #3699FF;
}

.face-guide-searching .face-oval {
    border-color: #3699FF;
}


/* =========================================================
   FACE DETECTED
   Amber
   ========================================================= */

.face-guide-detected .face-guide-corner {
    border-color: #FFA800;
}

.face-guide-detected .face-oval {
    border-color: #FFA800;
    box-shadow: 0 0 0 3px rgba(255, 168, 0, 0.10), 0 0 16px rgba(255, 168, 0, 0.20);
}


/* =========================================================
   VERIFYING
   Green
   ========================================================= */

.face-guide-verifying .face-guide-corner {
    border-color: #1BC5BD;
}

.face-guide-verifying .face-oval {
    border-color: #1BC5BD;
    box-shadow: 0 0 0 3px rgba(27, 197, 189, 0.12), 0 0 18px rgba(27, 197, 189, 0.25);
}


/* =========================================================
   FAILED
   Red
   ========================================================= */

.face-guide-failed .face-guide-corner {
    border-color: #F64E60;
}

.face-guide-failed .face-oval {
    border-color: #F64E60;
    box-shadow: 0 0 0 3px rgba(246, 78, 96, 0.10), 0 0 18px rgba(246, 78, 96, 0.18);
}


/* =========================================================
   SUCCESS
   Green
   ========================================================= */

.face-guide-success .face-guide-corner {
    border-color: #1BC5BD;
}

.face-guide-success .face-oval {
    border-color: #1BC5BD;
    box-shadow: 0 0 0 3px rgba(27, 197, 189, 0.15), 0 0 22px rgba(27, 197, 189, 0.30);
}


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

.face-message {
    min-height: 20px;
    transition: color 0.25s ease;
}

    .face-message.detected {
        color: #FFA800 !important;
    }

    .face-message.verifying {
        color: #1BC5BD !important;
    }

    .face-message.failed {
        color: #F64E60 !important;
    }

    .face-message.success {
        color: #1BC5BD !important;
    }


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

@media (max-width: 575.98px) {

    .face-verification-container {
        width: 100%;
    }

    .face-subtitle {
        white-space: normal;
    }
}