/* Popup Info Overlay */
.modal-overlay-info { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 10000; display: none; justify-content: center; align-items: center; }
.modal-header-fixed { padding: 20px 20px 10px 20px; border-bottom: 1px solid #eee; flex-shrink: 0; }
.modal-close-x { position: absolute; top: 10px; right: 15px; font-size: 20px; font-weight: bold; color: var(--danger); cursor: pointer; z-index: 10; }

/* MANUAL SCROLL FOR MODAL 1 */
.modal-scroll-body-info { 
    font-size: 12px;
    padding: 15px 20px 25px 20px; 
    overflow-y: auto; /* Membolehkan skrol manual */
    flex-grow: 1; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: thin; /* Untuk Firefox */
    scrollbar-color: var(--gold) transparent;
}

.info-tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 10px; }
.info-tab-btn { flex: 1; padding: 8px; font-size: 11px; border: none; background: none; cursor: pointer; color: #999; font-weight: bold; }
.info-tab-btn.active { color: var(--gold); border-bottom: 2px solid var(--gold); }

.panel-overlay-info { position: fixed; bottom: -100%; left: 0; width: 100%; background: #fff; color: #222; z-index: 8000; transition: bottom 0.4s ease; border-radius: 20px 20px 0 0; padding: 15px 15px calc(var(--nav-h) + 15px) 15px; }
.panel-overlay-info.show { bottom: 0; }

/* Hierarchy */
#infoModal { z-index: 2000; }
#ayahModal { z-index: 3000; }

/* Modal Box */
.modal-box-info {
    background: var(--bg-dark); width: 90%; max-width: 480px; margin: 8vh auto; border-radius: 15px; border: 1px solid #333; position: relative; box-shadow: 0 25px 50px rgba(0,0,0,0.7); overflow: hidden; 
    color: #fcfafa; border-radius: 20px; 
    width: 100%; max-width: 400px; position: relative; 
    overflow: hidden; display: flex; flex-direction: column; 
    max-height: 80vh; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.modal-box-info h3 { color: #de8f07; margin-bottom: 2px; }
.modal-box-info span { font-size: 13px; }
.modal-box-info b { color: #0a88f0; font-size: 13px;}
.modal-box-info a { text-decoration: none; font-size: 13px;}

.modal-header-fixed {
    padding: 20px; background: #252525; border-bottom: 1px solid #333;
}
.arabic-text { 
    font-family: var(--font-arabic); font-size: 15px; direction: rtl; 
    text-align: center; color: #fcfafa; margin-bottom: 20px; 
    font-weight: bold; line-height: 1.8;
}
.translation-text {
    font-size: 1em; color: #fcfafa; line-height: 1.5; border-left: 3px solid var(--gold); padding-left: 15px;
}

.ref-tag {
    display: block; margin-top: 15px; font-size: 0.85em; color: var(--gold); text-align: right; font-weight: bold;
}

hr { border: 0; border-top: 1px solid #333; margin: 15px 0; }