/* ==========================================================
   SIPM - Form Pengaduan
==========================================================*/

body{
    background:#f5f7fb;
}

.page-header{
    background:linear-gradient(135deg,#0F766E,#0D9488);
    color:#fff;
    padding:70px 0;
    margin-bottom:40px;
}

.page-header h1{
    font-size:38px;
    font-weight:700;
}

.page-header p{
    opacity:.9;
    margin-top:10px;
}

.wizard-card{

    background:#fff;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    overflow:hidden;

}

.wizard-header{

    background:white;

    padding:30px;

    border-bottom:1px solid #eee;

}

.step-wrapper{

display:flex;

justify-content:space-between;

position:relative;

}

.step-wrapper::before{

content:"";

position:absolute;

left:8%;

top:22px;

width:84%;

height:4px;

background:#ddd;

z-index:1;

}

.step{

position:relative;

z-index:2;

text-align:center;

width:25%;

}

.step-circle{

width:45px;

height:45px;

border-radius:50%;

background:#ddd;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

color:#666;

}

.step.active .step-circle{

background:#0F766E;

color:white;

}

.step.completed .step-circle{

background:#28a745;

color:white;

}

.step-title{

margin-top:10px;

font-size:14px;

font-weight:600;

}

.wizard-body{

padding:35px;

}

.form-label{

font-weight:600;

margin-bottom:8px;

}

.form-control{

height:48px;

border-radius:12px;

}

textarea.form-control{

height:150px;

}

.info-box{

background:#f8fafc;

padding:25px;

border-radius:15px;

border:1px solid #e5e7eb;

}

.info-box h5{

font-weight:700;

margin-bottom:20px;

}

.info-box ul{

padding-left:20px;

}

.info-box li{

margin-bottom:10px;

}

.btn-next{

background:#0F766E;

border:none;

padding:12px 30px;

border-radius:10px;

font-weight:600;

}

.btn-prev{

padding:12px 30px;

border-radius:10px;

font-weight:600;

}

.step-content{

display:none;

animation:fade .3s ease;

}

.step-content.active{

display:block;

}

@keyframes fade{

from{

opacity:0;

transform:translateX(20px);

}

to{

opacity:1;

transform:translateX(0);

}

}


.upload-box{

border:3px dashed #0F766E;

border-radius:20px;

padding:60px;

text-align:center;

background:#f8fafc;

cursor:pointer;

transition:.3s;

}

.upload-box:hover{

background:#ecfdf5;

}


.category-card{

    background:#fff;

    border:2px solid #dee2e6;

    border-radius:15px;

    padding:25px;

    cursor:pointer;

    transition:.3s;

    height:100%;

}

.category-card:hover{

    transform:translateY(-5px);

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

}

.category-card.selected{

    border:2px solid #198754;

    background:#ecfdf5;

}

.category-icon{

    font-size:42px;

    margin-bottom:15px;

}

.category-card h5{

    font-size:18px;

    font-weight:700;

}

.category-card p{

    font-size:14px;

    color:#6c757d;

}