/* SYSTEM MODAL MENU OVERLAY */
.almuhtadin-modal-overlay {
    position: fixed; /* Mengunci layar smartphone secara penuh */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.4); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999; /* Berada di atas seluruh elemen aplikasi */
    display: flex;
    align-items: flex-end; 
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.almuhtadin-modal-overlay.modal-active {
    opacity: 1;
    pointer-events: auto;
}

/* CONTAINER UTAMA JENDELA POP-UP */
.almuhtadin-modal-container {
    width: 100%;
    max-width: 415px; /* Batas presisi app-viewport smartphone */
    margin: 0 auto;
    background-color: #ffffff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 20px 20px 24px 20px;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Taktik Scroll Konten Dalam Modal Jika Screen Smartphone Pendek */
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.almuhtadin-modal-overlay.modal-active .almuhtadin-modal-container {
    transform: translateY(0);
}

/* HEADER MODAL */
.almuhtadin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 14px;
    flex-shrink: 0;
}

.modal-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-header-title h5 {
    font-size: 15px;
    color: #1e293b;
    font-weight: 700;
}

.modal-close-btn {
    background-color: #ffcccc;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #ff0000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

/* AREA BODY DENGAN SCROLL INTERNAL */
.almuhtadin-modal-body {
    overflow-y: auto;
    padding-top: 16px;
    flex-grow: 1;
    scrollbar-width: none; /* Sembunyikan scrollbar di Firefox */
}
.almuhtadin-modal-body::-webkit-scrollbar {
    display: none; /* Sembunyikan scrollbar di Chrome/Safari */
}

/* GRID LAYOUT MENU */
.modal-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 10px;
}

.modal-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    text-align: center;
    gap: 6px;
}

.modal-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    transition: transform 0.15s ease;
}

.modal-menu-item:active .modal-icon-wrapper {
    transform: scale(0.92);
}

.modal-menu-item span {
    font-size: 10px;
    color: #334155;
    font-weight: 600;
}

/* PENGUNCI SCROLL HALAMAN UTAMA */
body.modal-open-lock {
    overflow: hidden !important;
}

/* PALET WARNA */
.color-zakat        { background-color: #bcf6cd; color: #0d7a33; }
.color-fitra        { background-color: #d1fae5; color: #065f46; }
.color-dzikir       { background-color: #9cd6fc; color: #0679c6; }
.color-infak        { background-color: #baf8db; color: #10b981; }
.color-kas          { background-color: #c9d9e8; color: #475569; }
.color-quran        { background-color: #fff0b3; color: #b45309; }
.color-hadits       { background-color: #fab8b8; color: #ef4444; }
.color-imam         { background-color: #bcf6e8; color: #0d9488; }
.color-pengurus     { background-color: #b3d4ff; color: #2563eb; }
.color-info         { background-color: #d7d7db; color: #71717a; }
.color-kultum       { background-color: #cc99ff; color: #9333ea; }
.color-pedoman      { background-color: #ffddb3; color: #ea580c; }
.color-dokumentasi  { background-color: #f1a7d0; color: #db2777; }
.color-kampanye     { background-color: #ffb3b8; color: #e11d48; }

/* WARNA UNTUK MENU BARU (IQRO, DOA & QURBAN) */
.color-iqro         { background-color: #ff99a0; color: #ff0011; } 
.color-doa          { background-color: #a7e8f1; color: #00838f; } 
.color-qurban       { background-color: #a5f3bc; color: #166534; } /* Latar hijau daun lembut & ikon hijau tua premium */

/* TATA LETAK HEADER KATEGORI */
.category-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #f1f5f9; /* Garis aksen putus-putus tipis yang elegan */
}

.category-header-left {
    display: flex;
    align-items: center;
    gap: 8px; /* Jarak antara ikon mini dan tulisan judul */
}

/* Ukuran & Desain Ikon Judul */
.category-header-left i {
    font-size: 13px;
}

/* Modifikasi Judul Kategori Lebih Rapi */
.category-section-title {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #475569; /* Lebih pekat agar tegas dibaca */
    font-weight: 800; /* Tebal premium */
    margin: 0;
    padding: 0;
}

/* Badge Penghitung Fitur Halus di Sebelah Kanan */
.category-badge {
    font-size: 9.5px;
    font-weight: 700;
    color: #64748b;
    background-color: #f1f5f9;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.2px;
}

/* WARNA UNTUK IKON JUDUL KATEGORI */
.text-emerald { color: #0d7a33; }
.text-amber   { color: #d97706; }
.text-blue    { color: #2563eb; }

/* Tambahan margin antar seksi modal */
.modal-menu-category-section {
    margin-bottom: 24px;
}
.modal-menu-category-section:last-child {
    margin-bottom: 8px;
}