/* =====================================================================
   Halaman pendaftaran diklat publik - frontend/diklat/register.php
   Primitif kartu/badge/tombol/form ada di diklat_ui.css (dimuat lebih dulu).
   ===================================================================== */

.reg-section {
    padding: 60px 0 70px;
}

/* ---------------------------------------------------------------------
   Indikator langkah
   --------------------------------------------------------------------- */
.step-indicator {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    background-color: var(--dku-gray-100);
    border: 1px solid var(--dku-gray-200);
    border-radius: var(--dku-radius);
    padding: 0.75rem;
    margin-bottom: 1.5rem;
}

.step-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 140px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--dku-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dku-gray-600);
    text-align: center;
    transition: background-color var(--dku-transition), color var(--dku-transition);
}

/* Nomor langkah dari atribut data-step - tidak perlu ditulis dua kali di HTML */
.step-item::before {
    content: attr(data-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--dku-gray-300);
    color: var(--dku-gray-600);
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
}

.step-item.active {
    background-color: #fff;
    color: var(--dku-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(24, 28, 50, 0.08);
}

.step-item.active::before {
    background-color: var(--dku-primary);
    color: #fff;
}

.step-item.done {
    color: var(--dku-success);
}

/* Langkah yang sudah dilewati ditandai centang, bukan angka lagi */
.step-item.done::before {
    content: "\f00c";
    font-family: FontAwesome;
    background-color: var(--dku-success);
    color: #fff;
}

/* ---------------------------------------------------------------------
   Kotak bantuan
   --------------------------------------------------------------------- */
/* Teks dipusatkan, jadi garis aksen di tepi kiri dilepas - aksen sepihak di
   kiri membuat blok yang isinya rata tengah terlihat berat sebelah. Sebagai
   gantinya dipakai garis tipis mengelilingi. */
.helper-box {
    background-color: var(--dku-primary-light);
    border: 1px solid rgba(13, 77, 158, 0.16);
    border-radius: var(--dku-radius);
    padding: 0.85rem 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--dku-primary-active);
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: center;
}

.helper-box:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Pemilih mode pendaftaran (Umum / Surveior)
   --------------------------------------------------------------------- */
.reg-mode-toggle {
    display: flex;
    gap: 0.35rem;
    background-color: var(--dku-gray-100);
    border: 1px solid var(--dku-gray-200);
    border-radius: var(--dku-radius);
    padding: 0.35rem;
    margin-bottom: 1.5rem;
}

.mode-pill {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0.6rem 1rem;
    border-radius: var(--dku-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dku-gray-600);
    cursor: pointer;
    transition: background-color var(--dku-transition), color var(--dku-transition);
}

.mode-pill:hover {
    color: var(--dku-dark);
}

.mode-pill.active {
    background-color: var(--dku-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0.25rem 0.65rem rgba(13, 77, 158, 0.25);
}

/* ---------------------------------------------------------------------
   Blok pencarian surveior - sengaja diberi panel sendiri karena ini
   kolom terpenting di langkah 1 dan sebelumnya nyaris tak terlihat.
   --------------------------------------------------------------------- */
.reg-surveyor-panel {
    background-color: var(--dku-gray-100);
    border: 1px solid var(--dku-gray-200);
    border-radius: var(--dku-radius);
    padding: 1.15rem;
    margin-bottom: 1rem;
}

.reg-surveyor-panel .form-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dku-dark);
}

.reg-surveyor-panel .form-text {
    margin-bottom: 0;
}

/* Tautan bolak-balik antara pencarian surveior dan pengisian manual */
.dk-ui .reg-switch-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--dku-primary);
    font-weight: 500;
}

.dk-ui .reg-switch-link:hover {
    color: var(--dku-primary-active);
    text-decoration: underline;
}

.surveyor-banner {
    background-color: var(--dku-success-light);
    border-color: rgba(30, 158, 98, 0.28);
    color: #1B5E20;
    margin-top: 0.85rem;
    margin-bottom: 0;
}

/* =====================================================================
   Select2
   ---------------------------------------------------------------------
   Tema Creote (assets/css/scss/elements/theme-css.css, ~baris 27857) sudah
   menata Select2 dengan !important di hampir semua properti:

       .select2-selection--single            { height:56px; padding:0 1.25rem }
       .select2-selection--single __rendered { height:56px; line-height:56px; padding:0 }

   Tinggi 56px itu KEBETULAN persis sama dengan .form-control di halaman ini
   (terukur 56px), dan line-height:56px sudah memusatkan teksnya secara vertikal.
   Jadi tinggi dan pemusatan dibiarkan milik tema - upaya sebelumnya menimpanya
   dengan flex + padding sendiri justru menumpuk di atas line-height 56px itu
   dan mendorong teksnya ke bawah.

   Yang diubah di sini hanya rupa: warna garis, radius, dan padding mendatar
   agar awal teksnya lurus dengan .form-control (16px). Semua pakai !important
   karena deklarasi tema pun !important.
   ===================================================================== */

.dk-ui .select2-container {
    width: 100% !important;
    display: block;
}

.dk-ui .select2-container--default .select2-selection--single {
    position: relative;
    /* Padding dipindah ke __rendered supaya ruang untuk panah bisa diatur
       terpisah dari ruang teks di kiri. */
    padding: 0 !important;
    background-color: #fff !important;
    border: 1px solid var(--dku-gray-300) !important;
    border-radius: var(--dku-radius) !important;
    transition: border-color var(--dku-transition), box-shadow var(--dku-transition);
}

.dk-ui .select2-container--default .select2-selection--single:hover {
    border-color: var(--dku-gray-400) !important;
}

/* height & line-height sengaja TIDAK disebut - biar 56px dari tema yang
   memusatkan teks. Hanya padding mendatar dan tipografi yang diselaraskan. */
.dk-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 2.5rem 0 1rem !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: var(--dku-dark);
}

.dk-ui .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--dku-gray-400);
    font-weight: 400;
}

/* Kotak panah direntang setinggi kolom. Tema menggambar chevron-nya lewat
   ::before dengan top:0;bottom:0;margin:auto, jadi ia ikut terpusat sendiri. */
.dk-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    right: 0.75rem;
    width: 20px;
}

/* Sedang dibuka: sama persis dengan .form-control:focus.
   border-color perlu !important karena tema memasang `border: ... !important`
   pada kolom ini - tanpa itu garis birunya tidak muncul saat dropdown terbuka. */
.dk-ui .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--dku-primary) !important;
    box-shadow: 0 0 0 3px rgba(13, 77, 158, 0.12);
}

/* Daftar hasil. Select2 menempelkan dropdown ke <body>, di luar .dk-ui,
   jadi bagian ini sengaja tidak discope - termasuk fontnya, yang karena itu
   tidak bisa mewarisi dari .dk-ui dan harus disebut ulang. */
.select2-dropdown,
.select2-dropdown .select2-results__option,
.select2-search--dropdown .select2-search__field {
    font-family: var(--dku-font);
}

.select2-dropdown {
    border: 1px solid var(--dku-gray-300);
    border-radius: var(--dku-radius);
    box-shadow: 0 0.5rem 1.75rem rgba(76, 87, 125, 0.15);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown {
    padding: 0.6rem;
    background-color: var(--dku-gray-100);
    border-bottom: 1px solid var(--dku-gray-200);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--dku-gray-300);
    border-radius: var(--dku-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    outline: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--dku-primary);
    box-shadow: 0 0 0 3px rgba(13, 77, 158, 0.12);
}

.select2-container--default .select2-results__option {
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dku-primary-light);
    color: var(--dku-primary-active);
}

.select2-container--default .select2-results__message {
    color: var(--dku-gray-500);
    font-size: 0.875rem;
}

/* Baris hasil: nama tebal di atas, instansi + NIK tersamar di bawah */
.select2-result-surveyor .s-name {
    display: block;
    font-weight: 600;
    color: var(--dku-dark);
    margin-bottom: 0.15rem;
}

.select2-result-surveyor .s-meta {
    display: block;
    font-size: 0.8rem;
    color: var(--dku-gray-500);
}

.select2-result-surveyor .s-nik {
    display: inline-block;
    background-color: var(--dku-gray-200);
    color: var(--dku-gray-600);
    border-radius: var(--dku-radius-sm);
    padding: 0.1rem 0.4rem;
    font-size: 0.72rem;
    margin-left: 0.4rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] .s-name,
.select2-container--default .select2-results__option--highlighted[aria-selected] .s-meta {
    color: inherit;
}

/* =====================================================================
   Ringkasan langkah 3
   ===================================================================== */
.dk-ui .reg-summary-list {
    margin: 0;
    padding: 0.25rem 1.15rem 0.5rem;
}

/* Panel ringkasan - mengikuti pola partial email Acc
   (application/views/emails/_diklat_detail.php): judul jadi kepala berlatar
   abu, isinya baris label-nilai dua kolom yang rata kiri. */
.reg-summary {
    border: 1px solid var(--dku-gray-300);
    border-radius: var(--dku-radius);
    /* overflow:hidden supaya latar kepala ikut membulat di sudut atas */
    overflow: hidden;
    background-color: #fff;
}

.reg-summary-head {
    padding: 0.9rem 1.15rem;
    background-color: var(--dku-gray-100);
    border-bottom: 1px solid var(--dku-gray-300);
    font-size: 0.975rem;
    font-weight: 600;
    color: var(--dku-dark);
    line-height: 1.4;
}

.dk-ui .reg-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.7rem 0;
    font-size: 0.9rem;
}

.dk-ui .reg-summary-row+.reg-summary-row {
    border-top: 1px solid var(--dku-gray-200);
}

.dk-ui .reg-summary-row dt {
    /* Lebar tetap 140px seperti kolom label di partial email, supaya semua
       nilai mulai di garis vertikal yang sama. */
    flex: 0 0 140px;
    font-weight: 400;
    color: var(--dku-gray-600);
}

.dk-ui .reg-summary-row dd {
    flex: 1 1 200px;
    min-width: 0;
    margin: 0;
    color: var(--dku-dark);
}

.reg-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dku-danger);
}

.reg-consent {
    font-size: 0.875rem;
    color: var(--dku-gray-600);
    line-height: 1.7;
    margin: 1.25rem auto 0;
    /* Lebar dibatasi supaya baris yang rata tengah tidak terlalu panjang -
       teks rata tengah jadi sulit dibaca kalau barisnya melebar penuh. */
    max-width: 34rem;
    text-align: center;
}

/* Judul "Ringkasan Pendaftaran" dipusatkan.
   Discope ke #step3 supaya .dku-section-title di halaman detail
   (mis. "Deskripsi Pelatihan") tetap rata kiri. */
.dk-ui #step3 .dku-section-title {
    text-align: center;
}

/* =====================================================================
   Baris aksi tiap langkah
   ---------------------------------------------------------------------
   Pola wizard/checkout yang lazim: aksi utama sendirian di tengah supaya
   tak tersaingi, aksi mundur ditumpuk di bawahnya. Dua tombol berwarna
   yang bersebelahan membuat pengguna harus membaca dulu mana yang maju.

   Tombol kembali sengaja tetap berbentuk tombol abu utuh - bukan tautan
   teks samar - mengikuti konvensi .lk-btn-back di assets/css/admin5.css.
   ===================================================================== */
.reg-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dku-gray-200);
}

/* Ukuran dikunci di sini karena tema Creote memaksa tombolnya jadi jauh
   lebih besar dan huruf kapital semua. */
.dk-ui .reg-actions .btn {
    min-width: 260px;
    padding: 0.8rem 1.75rem;
    font-size: 0.975rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}

.dk-ui .reg-actions .btn-success {
    box-shadow: 0 0.35rem 0.9rem rgba(30, 158, 98, 0.28);
}

.dk-ui .reg-actions .btn-success:hover {
    box-shadow: 0 0.5rem 1.25rem rgba(30, 158, 98, 0.35);
}

.dk-ui .reg-actions .btn-primary {
    box-shadow: 0 0.35rem 0.9rem rgba(13, 77, 158, 0.25);
}

.dk-ui .reg-actions .btn-primary:hover {
    box-shadow: 0 0.5rem 1.25rem rgba(13, 77, 158, 0.32);
}

/* Tombol kembali: seukuran tombol utama tapi hanya bergaris, bukan terisi.
   Hierarkinya datang dari isian warna, bukan dari ukuran - sepasang tombol
   yang lebarnya sama terbaca sebagai satu kelompok yang disengaja, sedangkan
   tombol kecil di bawah tombol besar terlihat seperti sisa yang tercecer. */
.dk-ui .reg-actions .reg-btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 260px;
    border: 1px solid var(--dku-gray-300);
    border-radius: var(--dku-radius);
    background-color: #fff;
    color: var(--dku-gray-700);
    padding: 0.8rem 1.75rem;
    font-size: 0.975rem;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color var(--dku-transition), border-color var(--dku-transition),
                color var(--dku-transition);
}

.dk-ui .reg-actions .reg-btn-back:hover {
    background-color: var(--dku-gray-100);
    border-color: var(--dku-gray-400);
    color: var(--dku-dark);
    transform: none;
    box-shadow: none;
}

/* Panahnya bergerak ke kiri saat disorot - menegaskan arah "mundur",
   sama seperti .lk-btn-back di admin. */
.dk-ui .reg-actions .reg-btn-back i {
    transition: transform var(--dku-transition);
}

.dk-ui .reg-actions .reg-btn-back:hover i {
    transform: translateX(-3px);
}

.dk-ui .reg-actions .reg-btn-back:focus-visible {
    outline: 2px solid var(--dku-primary);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .dk-ui .reg-actions .btn,
    .dk-ui .reg-actions .reg-btn-back {
        min-width: 100%;
    }
}

/* =====================================================================
   Responsif
   ===================================================================== */
@media (max-width: 575.98px) {
    .reg-section {
        padding: 32px 0 40px;
    }

    .dk-ui .dku-card-header,
    .dk-ui .dku-card-body {
        padding: 1.15rem;
    }

    .step-item {
        min-width: 100%;
        justify-content: flex-start;
    }

    /* Di layar sempit, 140px untuk label menyisakan ruang nilai terlalu tipis -
       label naik jadi satu baris sendiri di atas nilainya. */
    .dk-ui .reg-summary-row {
        gap: 0.15rem;
    }

    .dk-ui .reg-summary-row dt {
        flex: 0 0 100%;
    }

    .dk-ui .reg-summary-list {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .reg-summary-head {
        padding: 0.8rem 1rem;
    }
}

/* =====================================================================
   Dialog pengganti alert() bawaan browser (lihat dkAlert() di register.php)
   ===================================================================== */
.dk-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(24, 28, 50, 0.45);
}

.dk-alert-box {
    width: 100%;
    max-width: 400px;
    background-color: #fff;
    border-radius: var(--dku-radius);
    box-shadow: 0 1rem 3rem rgba(24, 28, 50, 0.25);
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
    font-family: var(--dku-font);
}

.dk-alert-icon {
    font-size: 2.25rem;
    color: var(--dku-danger);
    margin-bottom: 0.75rem;
}

.dk-alert-message {
    color: var(--dku-dark);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.dk-alert-box .dk-alert-ok {
    min-width: 140px;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: none;
}

/* =========================================================================
   FOOTER DISEMBUNYIKAN DI HALAMAN PENDAFTARAN
   =========================================================================
   Form pendaftaran dibuat fokus: pendaftar tidak diberi jalan keluar ke
   halaman lain di tengah pengisian.

   Disembunyikan lewat CSS di file ini - yang hanya dimuat oleh
   frontend/diklat/register.php - supaya application/views/footer.php yang
   dipakai SELURUH halaman publik tidak perlu ikut diubah.

   Hanya blok tampilan footer (#footer_contents) yang disembunyikan; seluruh
   <script> di footer.php termasuk jQuery tetap termuat, karena Select2
   pencarian surveior dan navigasi step form bergantung padanya. */
#footer_contents {
    display: none !important;
}