.form-step{

display:none;

animation:fade .4s;

}

.form-step.active{

display:block;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:none;

}

}
/*=====================================
UPLOAD CENTER
=====================================*/

.upload-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    border:1px solid #E5E7EB;

    height:100%;

}

.drop-zone{

    border:2px dashed #0A66FF;

    border-radius:16px;

    min-height:220px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

    background:#F8FAFF;

}

.drop-zone:hover{

    background:#EDF5FF;

}

.drop-zone.dragover{

    background:#DCEEFF;

}

.upload-placeholder{

    text-align:center;

}

.upload-placeholder i{

    font-size:60px;

    color:#0A66FF;

}

.upload-placeholder p{

    font-weight:600;

    margin-top:15px;

}

.preview-area{

    margin-top:20px;

}

.preview-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));

    gap:15px;

    margin-top:25px;

}

.preview-card{

    border-radius:15px;

    overflow:hidden;

    border:1px solid #ddd;

    position:relative;

}

.preview-card img{

    width:100%;

    height:150px;

    object-fit:cover;

}

.preview-info{

    padding:12px;

    text-align:center;

    font-size:14px;

}

.remove-file{

    position:absolute;

    top:8px;

    right:8px;

    width:34px;

    height:34px;

    border-radius:50%;

    border:none;

    background:#DC3545;

    color:#fff;

}
@media(max-width:768px){

.drop-zone{

min-height:180px;

}

.preview-grid{

grid-template-columns:repeat(2,1fr);

}

}
/*=========================================
PREVIEW PAGE
=========================================*/

.preview-wrapper{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.preview-profile{

    background:#fff;

    padding:40px;

    border-radius:20px;

    box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.preview-photo{

    width:170px;

    height:170px;

    border-radius:50%;

    object-fit:cover;

    border:6px solid #0A66FF;

}

.preview-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.preview-card h4{

    margin-bottom:25px;

    color:#0A66FF;

}

.preview-card table th{

    width:240px;

    color:#64748B;

}

.doc-status{

    background:#F8FAFC;

    padding:18px;

    border-radius:12px;

    display:flex;

    justify-content:space-between;

    font-weight:600;

}

.doc-status span{

    font-size:20px;

}
@media(max-width:768px){

.preview-profile{

text-align:center;

padding:25px;

}

.preview-photo{

width:130px;

height:130px;

margin-bottom:20px;

}

.preview-card{

padding:20px;

}

.preview-card table th{

width:120px;

}

}
.drop-zone{

    cursor:pointer;

    transition:.3s;

}

.drop-zone.drag-over{

    border:2px dashed #0d6efd;

    background:#eef6ff;

}

.preview-area img{

    margin:5px;

}

.preview-grid img{

    margin:5px;

}