/* ═══════════════════════════════════════════
   UI.CSS — DonatJS UI Engine Styles
   Versi: 2.0

   SCOPE: komponen yang dirender oleh ui.js
   TOKEN: diwarisi dari donat.css (:root)
          Tidak ada :root ulang di sini.

   Apa yang TIDAK ada di sini (sudah di donat.css):
     • Reset, body, ul, li
     • .show / .hide / .shadow / .artikel
     • .row / .col-*
     • button / .button / .gButton
     • .input / .gInput / .label / .form
     • .table
     • .progress-bar
     • .card / .card-container
     • .gPaging / .gPaging-inner / .gPaging-info / .gPaging-nav
     • .filter-multi / .filter-group / .filter-label
     • .search
     • .side-panel / .panel-*
     • .cert-* / .quiz-*
     • .video-* / .pdf-*
     • .loading / .error
   ═══════════════════════════════════════════ */


/* ─── SECTION CONTAINER ──────────────────── */
/*     Pembungkus tiap blok dari ui.render.engine() */
.section-container {
    margin-bottom: 20px;
}


/* ─── HEADER BLOCK ───────────────────────── */
/*     Dirender oleh ui.render.header()       */

/* Layer ikon dekoratif (parallax) */
.parallax-layer {
    position:   absolute;
    opacity:    0.08;
    z-index:    0;
    pointer-events: none;
}

.icon-wa { top: 10%; left:  5%; }
.icon-fb { top: 20%; right: 8%; }
.icon-tw { bottom: 15%; left: 50%; }

/* Konten header di atas layer */
.section-container > .row { position: relative; z-index: 1; }


/* ─── PROGRESS ITEM ──────────────────────── */
/*     Wrapper per-baris; progress-bar sendiri di donat.css */
.progress-item {
    margin-bottom: 14px;
}

.progress-item p {
    display:         flex;
    justify-content: space-between;
    margin:          0 0 4px;
    font-size:       14px;
    color:           var(--pTextColor, #000);
}


/* ─── SIDE SECTION ───────────────────────── */
/*     Dirender oleh ui.render.side()         */
.side-section {
    padding: 12px 0;
}


/* ─── CONTROLS (search + filter bar) ──────── */
/*     Pembungkus di atas table/stats block   */
/*     .form, .input sudah di donat.css       */
.form {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    margin-bottom: 12px;
    align-items: stretch;
}

.form .input    { flex: 1; min-width: 140px; }
.form select    { flex-shrink: 0; }


/* ─── QUIZ: soal ─────────────────────────── */
/*     .quiz-container, .quiz-* sudah di donat.css  */
/*     Tambahan khusus untuk block question   */
.question-block {
    background:  #f9fafb;
    transition:  background var(--transition, 0.3s ease);
    padding:     16px;
    border-radius: var(--radius-md, 8px);
    margin-bottom: 12px;
}

/* Radio custom untuk opsi kuis */
.quiz-option input[type="radio"] {
    width:        18px;
    height:       18px;
    margin-right: 10px;
    cursor:       pointer;
    accent-color: var(--pColor);
}

.quiz-option label {
    display:     flex;
    align-items: center;
    padding:     10px 14px;
    cursor:      pointer;
    border-radius: var(--radius-sm, 5px);
    transition:  background var(--transition, 0.3s ease);
}

.quiz-option label:hover { background: var(--pLightColor, #efebce); }


/* ─── CERT DISPLAY: override tambahan ───────
   .cert-display dan lainnya sudah di donat.css.
   Ini hanya menangani state verified/unverified. */
.cert-display[data-verified="true"]  .cert-badge { color: #16a34a; }
.cert-display[data-verified="false"] .cert-badge { color: #dc2626; }


/* ─── KURSUS PLACEHOLDER ─────────────────── */
/*     Saat data async belum datang           */
.loading {
    text-align:  center;
    padding:     40px;
    color:       #888;
    font-size:   .9rem;
}

/* ─── RESPONSIVE ─────────────────────────── */
@media (max-width: 700px) {
    .form { flex-direction: column; }
    .form .input,
    .form select { width: 100%; }
}

/* ─── TABLE WRAPPER ──────────────────────── */
/*     Cegah tabel melebar keluar container  */
.table-wrapper {
    width:      100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}