/*
 * File: assets/css/main_style.css
 * Dibuat untuk menampung semua CSS yang sebelumnya ada di views/fe/main.php (style inline & blok <style>)
 */

/* 1. STYLING UNTUK TOMBOL MASUK */
.Masuk-PC .Masuk-PC-btn {
    padding: 10px 50px; 
    font-size: 1.4rem;
    background: #E4C30C !important; /* Gunakan !important jika diperlukan, atau ganti class Bootstrap */
    border-color: #E4C30C;
    color: #333; /* Jika ingin warna teksnya lebih gelap */
}

.Masuk-SMP .Masuk-SMP-btn {
    background: #E4C30C !important;
    border-color: #E4C30C;
    color: #333;
}

/* 2. STYLING UNTUK HERO SECTION */
.Hero-Title {
    text-shadow: 4px 3px 4px rgba(0,0,0,0.29);
}

.Hero-Title-Sub {
    font-size: 1.5rem;
}

/* PC: Gradient Text */
.Hero-Title-PC {
    background: linear-gradient(to right, #12CE5D 0%, #FFD80C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4rem;
    text-shadow: 2px 3px 4px rgba(0,0,0,0.15);
}

/* SMP: Gradient Text */
.Hero-Title-SMP {
    background: linear-gradient(to right, #A7F3C1, #FFF, #FFD80C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3rem;
    text-shadow: 2px 3px 4px rgba(0,0,0,0.12);
}

.Hero-HR {
    width: 80px;
    margin: 0 auto;
    border-top: 6px solid #fff;
    opacity: 0.85;
}

/* 3. STYLING UNTUK FORM PENGADUAN */
.Form-Section {
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
    overflow-x: hidden;
}

.Form-Title {
    background: #0FA769 !important;
    width: 100%;
    padding: 20px;
    color: white !important;
    margin-top: 0;
}

.Tipe-Container {
    padding: 10px;
    cursor: pointer;
}

.Tipe-Pilihan {
    text-align: center;
    padding: 20px 10px;
}

.Tipe-Pilihan-Masyarakat {
    border: 1px solid #0FA769;
}

.Tipe-Pilihan-ASN {
    border: 1px solid #0FA769;
}


/* 4. STYLING UNTUK TOMBOL KIRIM */
.Kirim-Btn {
    padding: 20px 100px !important;
    font-size: 1.4rem !important;
}

/* 5. STYLING UNTUK STATUS REKAP (Di bawah Statistik) */
.Status-Rekap-Container {
    background: linear-gradient(90deg, #608F1A 0%, #03A588 100%) !important;
}

/* 6. STYLING UNTUK WIZARD/ALUR PROSES */
.bs-wizard .bs-wizard-step.Aktif .bs-wizard-dot,
.bs-wizard .bs-wizard-step.complete .bs-wizard-dot {
    background: #d0021b !important; /* Warna Dot Aktif/Complete */
    color: white !important;
}

.bs-wizard .Aktif {
    background: #d0021b !important;
    color: white !important;
}

.fa-edit:before, .fa-pencil-square-o:before {
    content: "\f044";
    color: white;
}
.fa-mail-forward:before, .fa-share:before {
    content: "\f064";
}
.fa-comment:before {
    content: "\f075";
}
.fa-check:before {
    content: "\f00c";
}
.col-xs-offset-1 {
    margin-left: 8.33333333%;
}
.row {
    margin-left: -15px;
    margin-right: -15px;
}
.bs-wizard {
    margin-top: 40px;
    padding-bottom: 40px;
    border-bottom:0;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 14px;
    line-height: 1.618;
    color: #333333;
    box-sizing: border-box;
    margin-left: -15px;
    margin-right: -15px;
}
.bs-wizard-step{
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 14px;
    line-height: 1.618;
    color: #333333;
    box-sizing: border-box;
    min-height: 1px;
    float: left;
    width: 20%;
    padding: 0;
    position: relative;
}
.bs-wizard > .bs-wizard-step:first-child > .progress {
    left: 50%;
    width: 50%;
}
.bs-wizard .bs-wizard-step.Aktif .progress,
.bs-wizard .bs-wizard-step.complete .progress {
    width: 100% !important;
    z-index: 2;
    left: 50%;
}
.bs-wizard > .bs-wizard-step > .progress {
    position: relative;
    border-radius: 0px;
    height: 1px;
    box-shadow: none;
    margin: 20px 0;
}
.progress {
    overflow: hidden;
    height: 22px;
    margin-bottom: 22px;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.bs-wizard-info {
    display: block !important;
}
.text-center {
    text-align: center;
}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {
    width: 60px;
    height: 60px;
    padding: 15px;
    margin-top: -10px;
    margin-left: -30px;
}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {
    position: absolute;
    width: 50px;
    height: 50px;
    display: block;
    padding: 13px;
    color: #333;
    text-align: center;
    background: #fff;
    top: 0;
    left: 50%;
    margin-top: -7px;
    margin-left: -25px;
    border-radius: 50%;
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.bs-wizard .bs-wizard-dot {
    z-index: 2;
    border: 2px solid #fafbfc;
}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
    font-size: 16px;
    padding: 18px 5px 0;
}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}
.bs-wizard > .bs-wizard-step .bs-wizard-info {
    color: #666;
    font-size: 14px;
}
@media (min-width: 767.98px) {
    .lkumpulan{
        display: inline-block;
    }
    .jkumpulan-block{
    }
    .mlogo{
        height: 40px !important;
    }
}
@media (max-width: 767.98px) { /* Adjust breakpoint as needed (e.g., Bootstrap's 'sm' breakpoint) */
    .flex-shrink-0{
        flex-shrink:unset;
    }
    .jkumpulan-block{
        text-align: center;
        width: 100%;
    }
    .hide-on-mobile{
        display: none;
    }
    .lkumpulan {
        flex-direction: column; /* Stack steps vertically */
        align-items: center;
        padding-bottom: 8px;
        font-size: 12px;
    }
    .col-xs-offset-1 {
        margin-left: 0;
    }
    .bs-wizard {
        flex-direction: column; /* Stack steps vertically */
        align-items: center; /* Center steps horizontally in the column */
    }
    .bs-wizard-step {
        width: 90%; /* Make steps take full width */
        margin-bottom: 20px; /* Add spacing between vertical steps */
        /* Adjust other vertical step styling */
    }
    /* You might need to adjust dot/line positioning for vertical layout */
    .bs-wizard > .bs-wizard-step > .bs-wizard-dot {
        /* Adjust dot position for vertical alignment */
    }
    .bkumpulan{
        display: block !important;
    }
    .cskumpulan {
        padding: 0 auto !important;
        text-align: center;
        width: 100%;
    }
    .mlogo{
        height: 28px !important;
    }
}