/* ================================================================
# DACOG Search Engine – System Architecture
# File: enrollment-wizard.css
# Path: /static/css/enrollment-wizard.css
# Version: 3.0.0
# Description: Mathematical-Unit Biometric Wizard (Light/Hero Theme)
# ================================================================*/

/* 1. Base Wrappers & Wizard Steps */
.enrollment-wrapper {
    max-width: 50rem; /* 800px */
    margin: 0 auto;
    padding-bottom: 3.125rem; /* 50px */
}

.wizard-step { 
    display: none; 
}

.wizard-step.active { 
    display: block; 
    -webkit-animation: fadeIn 0.4s; 
    -moz-animation: fadeIn 0.4s; 
    -o-animation: fadeIn 0.4s; 
    animation: fadeIn 0.4s; 
}

@-webkit-keyframes fadeIn { from { opacity: 0; -webkit-transform: translateY(0.625rem); } to { opacity: 1; -webkit-transform: translateY(0); } }
@-moz-keyframes fadeIn { from { opacity: 0; -moz-transform: translateY(0.625rem); } to { opacity: 1; -moz-transform: translateY(0); } }
@-o-keyframes fadeIn { from { opacity: 0; -o-transform: translateY(0.625rem); } to { opacity: 1; -o-transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: translateY(0); } }

/* 2. Theme-Aware Main Card */
.enrollment-card {
    background-color: var(--dacog-bg-nav);
    border: 0.0625rem solid var(--dacog-border-color);
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: var(--dacog-shadow-dropdown);
    -moz-box-shadow: var(--dacog-shadow-dropdown);
    box-shadow: var(--dacog-shadow-dropdown);
    overflow: hidden;
}

.enrollment-header {
    background: linear-gradient(135deg, var(--dacog-bg-topbar), #000000);
    color: #ffffff;
    padding: 1.5rem;
    text-align: center;
}

/* Step 1: Info Box */
.info-box {
    background-color: var(--dacog-bg-base);
    border: 0.0625rem solid var(--dacog-border-color);
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
    padding: 1.5rem;
    color: var(--dacog-text-muted);
}

/* 3. Camera Viewfinder UI */
.camera-container {
    position: relative;
    width: 100%;
    max-width: 25rem; /* 400px */
    margin: 0 auto;
    -webkit-border-radius: 1.25rem;
    -moz-border-radius: 1.25rem;
    border-radius: 1.25rem;
    overflow: hidden;
    background-color: #000000;
    -webkit-box-shadow: var(--dacog-shadow-dropdown);
    -moz-box-shadow: var(--dacog-shadow-dropdown);
    box-shadow: var(--dacog-shadow-dropdown);
}

#cameraStream, #capturedPhoto { 
    width: 100%; 
    display: block; 
    -webkit-transform: scaleX(-1); /* Mirror effect */
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1); 
}

/* The Liveness Oval Overlay */
.face-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 60%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.face-guide {
    width: 12.5rem; /* 200px */
    height: 17.5rem; /* 280px */
    border: 0.125rem dashed rgba(255,255,255,0.7);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

/* ==========================================================================
   4. MEDIA QUERIES (AFRICAN TARGET OPTIMIZATION)
   ========================================================================== */

@media screen and (max-width: 30em) { /* 480px */
    .enrollment-wrapper {
        padding-top: 1.5rem;
    }
    
    .enrollment-card .card-body {
        padding: 1.5rem !important;
    }
    
    .camera-container {
        max-width: 100%;
    }
    
    .face-guide {
        width: 10.625rem; /* 170px */
        height: 15rem; /* 240px */
    }
}