/* fakeselect.css — pengganti <select> native di SELURUH aplikasi (admin, guest/auth,
   murid), dipakai lewat fselEnhance() di fakeselect.js. Port 1:1 dari tampilan
   .aq-fakeselect / #aqSelectModal SalesFunnel (includes/layout.php +
   assets/css/layout.css), warnanya dipetakan ke token tiap tema lewat variabel
   --fs-* supaya satu komponen ini otomatis cocok dgn tema Polaris (admin), netral
   (auth/guest), maupun Duolingo (murid) tanpa perlu file CSS terpisah per tema.
   --fs-* didefinisikan di tokens-admin.css / neutral.css / tokens-murid.css. */

.aq-fakeselect,
.fakeselect { position: relative; display: inline-block; width: 100%; }
.fakeselect-native {
    position: absolute !important; opacity: 0 !important; pointer-events: none !important;
    width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.fakeselect-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; text-align: left; font-family: inherit; cursor: pointer;
}
.fakeselect-btn::after {
    content: ''; flex-shrink: 0; width: 7px; height: 7px; margin-top: -3px;
    border-right: 2px solid var(--fs-muted, #6D7175); border-bottom: 2px solid var(--fs-muted, #6D7175);
    transform: rotate(45deg);
}
.fakeselect-btn:disabled { opacity: .55; cursor: not-allowed; }
.fakeselect-btn.fakeselect-placeholder { color: var(--fs-muted, #6D7175); }
/* Varian kompak dipakai utk dropdown kecil di luar form-group biasa (kalau ada) —
   style asalnya (font-size/border/padding/warna) disalin apa adanya ke tombol oleh
   JS, jadi di sini cukup pastikan lebar mengikuti isi, bukan 100% seperti form biasa. */
.fakeselect-btn.fakeselect-btn-compact { width: auto; display: inline-flex; }

/* ── Modal pilihan (dibuka oleh tombol di atas) — markup #fakeselect-modal ada
   di tiap layout (admin.php / guest.php / murid.php). ── */
.fakeselect-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    display: none;
    align-items: center; justify-content: center;
    z-index: 1000;
    padding: 12px;
}
.fakeselect-modal-backdrop.active { display: flex; }
.fakeselect-modal-box {
    background: var(--fs-surface, #fff);
    border-radius: var(--fs-radius, 8px);
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.fakeselect-modal-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--fs-border, #E1E3E5);
    display: flex; align-items: center; justify-content: space-between;
}
.fakeselect-modal-title { font-weight: 700; font-size: 15px; color: var(--fs-text, #202223); }
.fakeselect-modal-close {
    background: none; border: none; cursor: pointer;
    color: var(--fs-muted, #6D7175); line-height: 1;
}
.fakeselect-modal-list { max-height: 60vh; overflow-y: auto; }

.select-modal-group-label {
    padding: 10px 18px 4px; font-size: 11px; font-weight: 700;
    color: var(--fs-muted, #6D7175); text-transform: uppercase; letter-spacing: .04em;
}
.select-modal-item {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: 12px 18px; font-size: 14px; color: var(--fs-text, #202223); cursor: pointer;
    border-bottom: 1px solid var(--fs-border, #E1E3E5); font-family: inherit;
}
.select-modal-item:last-child { border-bottom: none; }
.select-modal-item:hover:not(:disabled) { background: var(--fs-hover, #F6F6F7); }
.select-modal-item.is-current { color: #9aa0a6; cursor: not-allowed; background: var(--fs-hover, #F6F6F7); }