/* styles.css */

body {
    background: #f9f9f9;
    color: #333;
    font-family: "LPMQ Isep Misbah";
    font-size: 18px;
}

.header, #surahList div {
    cursor: pointer;
}
#surahList div:hover {
    background-color: #e9ecef;
}

#navigation {
    margin-bottom: 20px;
}

.ayah {
    margin-top: 20px;
    padding: 10px;
    background: #fff;
    border-left: 5px solid #007bff;
}

.arabic {
    text-align: right;
    font-family: "LPMQ Isep Misbah";
    font-size: 1.5em;
    line-height: 1.8em;
    direction: rtl;  /* Right-to-left direction for Arabic text */
}

.translation {
    text-align: left;
    margin-top: 10px;
}

        /* Animasi loading */
        .loading-spinner {
            border: 4px solid #f3f3f3; /* Warna dasar spinner */
            border-top: 4px solid #3498db; /* Warna spinner */
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite; /* Animasi putar */
            margin: 0 auto; /* Posisi di tengah */
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Style untuk modal loading */
        #loadingModal .modal-content {
            background: transparent;
            border: none;
            box-shadow: none;
        }

        #loadingModal .modal-body {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Efek hover pada ayat */
        .ayah:hover {
            background-color: #f0f8ff; /* Warna biru muda saat hover */
            cursor: pointer; /* Ubah kursor menjadi pointer */
            transition: background-color 0.3s ease; /* Animasi transisi */
        }

        /* Efek saat ayat diklik */
        .ayah:active {
            background-color: #add8e6; /* Warna biru lebih gelap saat diklik */
        }

        /* Efek hover pada kata dalam teks Arab */
        .arabic .word:hover {
            color: #ff6347; /* Warna merah saat hover */
            text-decoration: underline; /* Garis bawah saat hover */
            cursor: pointer; /* Ubah kursor menjadi pointer */
            transition: color 0.3s ease; /* Animasi transisi */
        }

        /* Efek saat kata dalam teks Arab diklik */
        .arabic .word:active {
            color: #ff4500; /* Warna oranye saat diklik */
        }

audio {
    width: 100%;
    margin-top: 10px;
}
.pauseAudio {
    background-color: #6c757d; /* Warna abu-abu */
    color: white;
    border: none;
}

.pauseAudio:hover {
    background-color: #5a6268; /* Warna abu-abu lebih gelap saat hover */
}

#qariSelector {
    margin-top: 20px;
}

/* Styling Combobox (Select Box) */
select.form-control {
    width: 100%; /* Lebarkan agar konten tidak terpotong */
    max-width: 350px; /* Batas lebar maksimal */
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #fff;
    appearance: none; /* Menghilangkan default arrow di beberapa browser */
    text-align: left;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Saat Hover */
select.form-control:hover {
    border-color: #007bff;
}

/* Saat Fokus */
select.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}

/* Saat Disabled */
select:disabled {
    color: #ccc; 
    background-color: #eee;
}

/* Centering Label & Select */
.container label, .container select {
    vertical-align: middle;
}
/* Gaya untuk text area dan tombol pencarian */
#userInput {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

#searchAyat {
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
}

#searchAyat:hover {
    background-color: #218838;
}
#scrollToTopBtn {
    display: none; /* Tombol disembunyikan secara default */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 20px;
}

#scrollToTopBtn:hover {
    background-color: #0056b3;
}