@font-face {
    font-family: Majeed;
    /* good font */
    src: url(../../styles/majeed.ttf);
}

@font-face {
    font-family: UthmanicHafs;
    /* characters missing */
    src: url(../../styles/UthmanicHafs1-Ver18.ttf);
}

@font-face {
    font-family: almushaf;
    /* good font */
    src: url(../../styles/fonts/almushaf.ttf);
}

@font-face {
    font-family: saleem;
    /* good font */
    src: url(../../styles/fonts/saleem.ttf);
}

@font-face {
    font-family: IndoPak;
    /* good font */
    src: url(../../styles/fonts/IndoPak.ttf);
}

.glorious-quran--overlay {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 10% 80% 10%;
    align-items: center;
}

.index-page-starting {
    margin-top: 100px;
}



.glorious-quran-span {
    font-family: 'Noto Serif Hebrew', serif, 'Merriweather', sans-serif;
    font-weight: 400;
    font-size: 38px;
    color: var(--svg-banner-glorious-text-color) !important;
}

@media (max-width: 675px) {
    .glorious-quran-span {
        font-size: 30px;
    }

    .glorious-quran--overlay {

        top: 70px;

    }
}

.leaf-design-svg-path {
    fill: var(--svg-banner-leaf-design-fill-color) !important;
}

/* ===== Default Theme Variables ===== #FBE9CF; */
:root {
    --navbar-bg: #fff;
    --navbar-text: #000;
    --navbar-border: #dee2e6;

    --custom-text-color: #333;
    --custom-border-color: #d2b48c;
    --custom-bg-color: #fff;

    --chapter-number-color: #515151;
    --chapter-title-color: #515151;
    --chapter-subtitle-color: #515151c4;
    --chapter-arabic-color: #515151;

    --custom-general-button-color: #333;
    --custom-highlight-name-color: #f6f6f6;
    --custom-highlight-name-verse-color: #F0F0F0;


    /* search nav button */
    --navbar-search-button-bg-color: #F0F0F0;
    --navbar-search-button-icon-boarder-color: #515151;
    --navbar-search-button-bg-color-hover: #e6e6e6;
    --navbar-search-button-icon-boarder-color-hover: #515151;


    /* Sura SVG Banner */

    --sura-banner-svg-lines-color: #a42023;
    --sura-banner-svg-fill-color: #e9d7d8;
    --sura-banner-svg-text-color: #332424;

    /* svg leaf and glorious banner section */
    --svg-banner-leaf-design-fill-color: rgb(235, 235, 235);
    --svg-banner-glorious-design-stroke-color: #a42023;
    --svg-banner-glorious-text-color: #a42023;


    /* Proof section */
    --proof-tools-border-color: #e6e6e6;
    --proof-tools-bg-fill-color: #f0f0f0;
    --proof-tools-star-color: #a42023;
    --proof-tools-dots-color: #515151;

    --proof-box-bg-color: #F0F0F0;
    --proof-box-boarder-color: #e6e6e6;
    --proof-box-text-color: #515151;

    /* verse share tools */
    --verse-tools-dropdown-bg-color: #F0F0F0;
    --verse-tools-dropdown-bg-hover-color: #d4d3d3;
    --verse-tools-dropdown-text-color: #515151;
    --verse-tools-dropdown-border-color: #515151;


    /* verse section */
    --verse-text-english-color: #515151;
    --verse-text-arabic-color: #515151;
    --verse-bottom-line-color: #e6e6e6;
    --verse-text-arabic-highlight-color: #a42023;

    --verse-container-boarder-highlight-color: #935055;
    --verse-container-bg-highlight-color: #f6f6f6;

    --verse-container-special-text-highlight-color: #93505483;

    --verse-font-size-eng: 16px;
    --verse-font-size-ar: 25px;
    --verse-font-size-number-arabic: 28px;

    --verse-word-searched-highlight-color: #EAC11D;


    /* settings section */
    --settings-text-color: #818181;
    --settings-border-color: #818181;
    --settings-bg-color: #fff;

    --settings-selected-bg-color: #e6e6e6;
    --settings-selected-text-color: #818181;

    --settings-hover-bg-color: #e6e6e6;
    --settings-hover-text-color: #818181;

    --settings-sample-verse-bg-color: #fff;

    --settings-download-btn-bg-color: #f0f0f0;
    --settings-download-btn-text-color: #818181;

    --settings-download-btn-bg-hover-color: #e6e6e6;
    --settings-download-btn-text-hover-color: #818181;

     /* settings CTC area */
    --settings-ctc-bg-main-color: #f0f0f0;
    --settings-ctc-bg-small-color: #ffffff;
    --settings-ctc-text-color: #818181;
    --settings-ctc-startreading-bg-color: #629366;
    --settings-ctc-startreading-text-color: #141414;
    --settings-ctc-startreading-bg-hover-color: #000000;
    --settings-ctc-startreading-text-hover-color: #f0f0f0;



    --general-border-color: #BFAEAF;
    --general-bg-fill-color: #e9d7d8;
    --general-text-color: #7B7070;
    --general-active-color: #935055;
    --general-hover-color: #e9d7d8;
    --general-hover-alt-text-color: #7B7070;

    --list-group-item-bg-color: #fff;
    --list-group-item-text-color: #7B7070;
    --list-group-item-border-color: #BFAEAF;
    --list-group-item-hover-bg-color: #e9d7d8;
    --list-group-item-hover-text-color: #fff;

    --settings-sample-verse-bg-color: #fff;

    --buger-menu-line-color: #7B7070;


    /* toast */
    --toast-bg-color: #d4d3d3;
    --toast-text-color: #515151;

    /* Quran only toggle */
    --quranonly-toggle-active-bg-color: #515151c4;
    --quranonly-toggle-active-text-color: #fff;

    --quranonly-toggle-inactive-bg-color: #f6f6f600;
    --quranonly-toggle-inactive-text-color: #515151c4;

   


}

/* ===== Dark Theme Variables ===== */
html[data-bs-theme="dark"] {
    --navbar-bg: #343a40;
    --navbar-text: #fff;
    --navbar-border: #454d55;
    --custom-text-color: #eee;
    --custom-border-color: #555;
    --custom-bg-color: #222;

    --chapter-number-color: #eee;
    --chapter-title-color: #eee;
    --chapter-subtitle-color: #eee;
    --chapter-arabic-color: #eee;

    --custom-general-button-color: #dee2e6;
    --custom-highlight-name-verse-color: #dee2e639;
    --custom-highlight-name-color: #dee2e639;

    /* search nav button */
    --navbar-search-button-bg-color: #f0f0f000;
    --navbar-search-button-icon-boarder-color: #eee;
    --navbar-search-button-bg-color-hover: #818181;
    --navbar-search-button-icon-boarder-color-hover: #F0F0F0;

    /* Sura SVG Banner */
    --sura-banner-svg-lines-color: #dee2e6;
    --sura-banner-svg-fill-color: #222;
    --sura-banner-svg-text-color: #dee2e6;

    /* svg leaf and glorious banner section */
    --svg-banner-leaf-design-fill-color: rgba(235, 235, 235, 0.095);
    --svg-banner-glorious-design-stroke-color: #dee2e6;
    --svg-banner-glorious-text-color: #E05E5E;

    /* Proof section */
    --proof-tools-border-color: #e6e6e6;
    --proof-tools-bg-fill-color: #343a40;
    --proof-tools-star-color: #E05E5E;
    --proof-tools-dots-color: #eee;

    --proof-box-bg-color: #343a40;
    --proof-box-boarder-color: #e6e6e6;
    --proof-box-text-color: #eee;

    /* verse share tools */
    --verse-tools-dropdown-bg-color: #343a40;
    --verse-tools-dropdown-bg-hover-color: #818181;
    --verse-tools-dropdown-text-color: #eee;
    --verse-tools-dropdown-border-color: #e6e6e6;

    /* verse section */
    --verse-text-english-color: #eee;
    --verse-text-arabic-color: #eee;
    --verse-bottom-line-color: #eeeeee76;
    --verse-text-arabic-highlight-color: #E05E5E;

    --verse-word-searched-highlight-color: #eac11d98;
    --verse-container-bg-highlight-color: #e6e6e623;


    /* settings section */
    --settings-text-color: #eee;
    --settings-border-color: #eee;
    --settings-bg-color: #343a40;

    --settings-selected-bg-color: #818181;
    --settings-selected-text-color: #f0f0f0;

    --settings-hover-bg-color: #818181;
    --settings-hover-text-color: #f0f0f0;

    --settings-sample-verse-bg-color: #222;

    --settings-download-btn-bg-color: #f0f0f0;
    --settings-download-btn-text-color: #818181;

    --settings-download-btn-bg-hover-color: #e6e6e6;
    --settings-download-btn-text-hover-color: #818181;


    --general-border-color: #dee2e6;
    --general-bg-fill-color: #e9d7d8;
    --general-text-color: #dee2e6;
    --general-active-color: #935055;
    --general-hover-color: #e9d7d8;
    --general-hover-alt-text-color: #7B7070;

    --list-group-item-bg-color: #222;
    --list-group-item-text-color: #eee;
    --list-group-item-border-color: #555;
    --list-group-item-hover-bg-color: #eee;
    --list-group-item-hover-text-color: #222;

    --buger-menu-line-color: #eee;

    /* toast */
    --toast-bg-color: #818181;
    --toast-text-color: #f0f0f0;

    /* Quran only toggle */
    --quranonly-toggle-active-bg-color: #515151c4;
    --quranonly-toggle-active-text-color: #fff;

    --quranonly-toggle-inactive-bg-color: #f6f6f600;
    --quranonly-toggle-inactive-text-color: #aaaaaade;

}

/* ===== Sepia Theme Variables ===== */
html[data-bs-theme="sepia"] {
    --navbar-bg: #faf5e6;
    --navbar-text: #fff;
    --navbar-border: #8b5a2b;
    --custom-text-color: #5b4636;
    --custom-border-color: #a1887f;
    --custom-bg-color: #f4ecd8;

    --chapter-number-color: #5b4636;
    --chapter-title-color: #5b4636;
    --chapter-subtitle-color: #5b4636;
    --chapter-arabic-color: #5b4636;

    --custom-general-button-color: #8b5a2b;
    --custom-highlight-name-verse-color: #8b592b39;
    --custom-highlight-name-color: #8b592b39;

    /* search nav button */
    --navbar-search-button-bg-color: #faf5e6;
    --navbar-search-button-icon-boarder-color: #a1887f;

    --navbar-search-button-bg-color-hover: #cfcabe;
    --navbar-search-button-icon-boarder-color-hover: #5b4636;

    --sura-banner-svg-lines-color: #8b5a2b;
    --sura-banner-svg-fill-color: #f4ecd8;
    --sura-banner-svg-text-color: #5b4636;

    /* svg leaf and glorious banner section */
    --svg-banner-leaf-design-fill-color: #8b592b35;
    --svg-banner-glorious-design-stroke-color: #8b5a2b;
    --svg-banner-glorious-text-color: #8b5a2b;

    /* Proof section */
    --proof-tools-border-color: #a1887f;
    --proof-tools-bg-fill-color: #faf5e6;
    --proof-tools-star-color: #a42023;
    --proof-tools-dots-color: #8b5a2b;

    --proof-box-bg-color: #faf5e6;
    --proof-box-boarder-color: #a1887f;
    --proof-box-text-color: #5b4636;

    /* verse share tools */
    --verse-tools-dropdown-bg-color: #faf5e6;
    --verse-tools-dropdown-bg-hover-color: #cfcabe;
    --verse-tools-dropdown-text-color: #5b4636;
    --verse-tools-dropdown-border-color: #5b4636;

    /* verse section */
    --verse-text-english-color: #5b4636;
    --verse-text-arabic-color: #5b4636;
    --verse-bottom-line-color: #BFAEAF;

    --verse-text-arabic-highlight-color: #a42023;
    --verse-container-bg-highlight-color: #faf5e6ba;

    /* settings section */
    --settings-text-color: #5b4636;
    --settings-border-color: #5b4636;
    --settings-bg-color: #faf5e6;

    --settings-selected-bg-color: #cfcabe;
    --settings-selected-text-color: #5b4636;

    --settings-hover-bg-color: #cfcabe;
    --settings-hover-text-color: #5b4636;

    --settings-download-btn-bg-color: #faf5e6;
    --settings-download-btn-text-color: #5b4636;

    --settings-download-btn-bg-hover-color: #cfcabe;
    --settings-download-btn-text-hover-color: #5b4636;

    --settings-sample-verse-bg-color: #faf5e6;

    --buger-menu-line-color: #7B7070;

    /* toast */
    --toast-bg-color: #faf5e6;
    --toast-text-color: #5b4636;

    /* Quran only toggle */
    --quranonly-toggle-active-bg-color: #5b4636c8;
    --quranonly-toggle-active-text-color: #fff;

    --quranonly-toggle-inactive-bg-color: #f6f6f600;
    --quranonly-toggle-inactive-text-color: #5b463690;



}

/* ===== Auto Theme Variables (Based on User Preference) ===== */
html[data-bs-theme="auto"] {
    --navbar-bg: #fff;
    --navbar-text: #000;
    --navbar-border: #dee2e6;

    --custom-text-color: #333;
    --custom-border-color: #d2b48c;
    --custom-bg-color: #fff;

    --chapter-number-color: #515151;
    --chapter-title-color: #515151;
    --chapter-subtitle-color: #515151c4;
    --chapter-arabic-color: #515151;

    --custom-general-button-color: #333;
    --custom-highlight-name-color: #f6f6f6;
    --custom-highlight-name-verse-color: #F0F0F0;


    /* search nav button */
    --navbar-search-button-bg-color: #F0F0F0;
    --navbar-search-button-icon-boarder-color: #515151;
    --navbar-search-button-bg-color-hover: #e6e6e6;
    --navbar-search-button-icon-boarder-color-hover: #515151;


    /* Sura SVG Banner */

    --sura-banner-svg-lines-color: #a42023;
    --sura-banner-svg-fill-color: #e9d7d8;
    --sura-banner-svg-text-color: #332424;

    /* svg leaf and glorious banner section */

    --svg-banner-leaf-design-fill-color: rgb(235, 235, 235);
    --svg-banner-glorious-design-stroke-color: #a42023;
    --svg-banner-glorious-text-color: #a42023;


    /* Proof section */
    --proof-tools-border-color: #e6e6e6;
    --proof-tools-bg-fill-color: #f0f0f0;
    --proof-tools-star-color: #a42023;
    --proof-tools-dots-color: #515151;

    --proof-box-bg-color: #F0F0F0;
    --proof-box-boarder-color: #e6e6e6;
    --proof-box-text-color: #515151;

    --verse-tools-dropdown-bg-color: #fff;
    --verse-tools-dropdown-bg-hover-color: #f0f0f0;
    --verse-tools-dropdown-text-color: #515151;
    --verse-tools-dropdown-border-color: #e6e6e6;

    /* verse share tools */
    --verse-tools-dropdown-bg-color: #fff;
    --verse-tools-dropdown-bg-hover-color: #f0f0f0;
    --verse-tools-dropdown-text-color: #515151;
    --verse-tools-dropdown-border-color: #e6e6e6;


    /* verse section */
    --verse-text-english-color: #515151;
    --verse-text-arabic-color: #515151;
    --verse-bottom-line-color: #e6e6e6;
    --verse-text-arabic-highlight-color: #a42023;

    --verse-container-boarder-highlight-color: #935055;
    --verse-container-bg-highlight-color: #f6f6f6;

    --verse-container-special-text-highlight-color: #93505483;

    --verse-font-size-eng: 16px;
    --verse-font-size-ar: 25px;
    --verse-font-size-number-arabic: 28px;

    --verse-word-searched-highlight-color: #EAC11D;


    /* settings section */
    --settings-text-color: #818181;
    --settings-border-color: #818181;
    --settings-bg-color: #fff;

    --settings-selected-bg-color: #e6e6e6;
    --settings-selected-text-color: #818181;

    --settings-hover-bg-color: #e6e6e6;
    --settings-hover-text-color: #818181;

    --settings-sample-verse-bg-color: #fff;

    --settings-download-btn-bg-color: #f0f0f0;
    --settings-download-btn-text-color: #818181;

    --settings-download-btn-bg-hover-color: #e6e6e6;
    --settings-download-btn-text-hover-color: #818181;


    --general-border-color: #BFAEAF;
    --general-bg-fill-color: #e9d7d8;
    --general-text-color: #7B7070;
    --general-active-color: #935055;
    --general-hover-color: #e9d7d8;
    --general-hover-alt-text-color: #7B7070;

    --list-group-item-bg-color: #fff;
    --list-group-item-text-color: #7B7070;
    --list-group-item-border-color: #BFAEAF;
    --list-group-item-hover-bg-color: #e9d7d8;
    --list-group-item-hover-text-color: #fff;

    --settings-sample-verse-bg-color: #fff;

    --buger-menu-line-color: #7B7070;

    /* toast */
    --toast-bg-color: #e6e6e6;
    --toast-text-color: #818181;
}

@media (prefers-color-scheme: dark) {
    html[data-bs-theme="auto"] {
        --navbar-bg: #343a40;
        --navbar-text: #fff;
        --navbar-border: #454d55;
        --custom-text-color: #eee;
        --custom-border-color: #555;
        --custom-bg-color: #222;

        --chapter-number-color: #eee;
        --chapter-title-color: #eee;
        --chapter-subtitle-color: #eee;
        --chapter-arabic-color: #eee;

        --custom-general-button-color: #dee2e6;
        --custom-highlight-name-verse-color: #dee2e66c;
        --custom-highlight-name-color: #dee2e66c;

        /* search nav button */
        --navbar-search-button-bg-color: #f0f0f000;
        --navbar-search-button-icon-boarder-color: #eee;
        --navbar-search-button-bg-color-hover: #818181;
        --navbar-search-button-icon-boarder-color-hover: #F0F0F0;

        /* search nav button */
        --navbar-search-button-bg-color: #f0f0f000;
        --navbar-search-button-icon-boarder-color: #eee;
        --navbar-search-button-bg-color-hover: #818181;
        --navbar-search-button-icon-boarder-color-hover: #F0F0F0;

        /* Sura SVG Banner */
        --sura-banner-svg-lines-color: #dee2e6;
        --sura-banner-svg-fill-color: #222;
        --sura-banner-svg-text-color: #dee2e6;

        /* svg leaf and glorious banner section */
        --svg-banner-leaf-design-fill-color: rgba(235, 235, 235, 0.095);
        --svg-banner-glorious-design-stroke-color: #dee2e6;
        --svg-banner-glorious-text-color: #E05E5E;


        /* Proof section */
        --proof-tools-border-color: #e6e6e6;
        --proof-tools-bg-fill-color: #343a40;
        --proof-tools-star-color: #E05E5E;
        --proof-tools-dots-color: #eee;

        --proof-box-bg-color: #343a40;
        --proof-box-boarder-color: #e6e6e6;
        --proof-box-text-color: #eee;

        /* verse share tools */
        --verse-tools-dropdown-bg-color: #343a40;
        --verse-tools-dropdown-bg-hover-color: #818181;
        --verse-tools-dropdown-text-color: #eee;
        --verse-tools-dropdown-border-color: #e6e6e6;


        /* verse section */
        --verse-text-english-color: #eee;
        --verse-text-arabic-color: #eee;
        --verse-bottom-line-color: #eeeeee76;
        --verse-text-arabic-highlight-color: #E05E5E;

        --verse-word-searched-highlight-color: #eac11d98;
        --verse-container-bg-highlight-color: #e6e6e623;

        /* settings section */
        --settings-text-color: #eee;
        --settings-border-color: #eee;
        --settings-bg-color: #343a40;

        --settings-selected-bg-color: #818181;
        --settings-selected-text-color: #f0f0f0;

        --settings-hover-bg-color: #818181;
        --settings-hover-text-color: #f0f0f0;

        --settings-sample-verse-bg-color: #222;

        --buger-menu-line-color: #eee;

        /* toast */
        --toast-bg-color: #818181;
        --toast-text-color: #f0f0f0;
    }
}


/* ===== Apply Navbar Colours ===== */

.navbar-toggler {
    border: 1px solid var(--buger-menu-line-color) !important;
    /* Custom border */
    border-radius: 5px;
    /* Optional: Rounded corners */
    background-color: transparent !important;
    /* No background */
    padding: 8px;
    /* Adjust padding */
    transition: all 0.2s ease-in-out;
    /* Smooth hover effect */
}

.navbar-toggler:hover {
    border-color: var(--buger-menu-line-color);
    /* Darker red on hover */
    background-color: var(--general-bg-fill-color) !important;
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--buger-menu-line-color) !important;
    /* Keep border color on click */
}



.navbar {
    position: fixed;
    /* Already has fixed-top class, typically */
    top: 0;
    width: 100%;
    transition: transform 0.3s ease;
    /* Smooth slide effect */
}

.navbar-hidden {
    transform: translateY(-100%);
    /* Slides navbar up out of view */
}

.navbar2-hidden {
    transform: translateY(-200%);
    /* Slides navbar up out of view */
}

#navbar2 {
    background-color: #ffffff !important;
    border-bottom: white !important;
}

.navbar {
    background-color: var(--navbar-bg) !important;
    color: var(--navbar-text) !important;
    border-bottom: 1px solid var(--navbar-border) !important;
}


.offcanvas {
    background-color: var(--settings-bg-color) !important;
    color: var(--navbar-text) !important;
    border-bottom: 1px solid var(--navbar-border) !important;
}

.settings-sample-verse {
    color: var(--navbar-text) !important;
    padding: 10px;
    border: 1px solid var(--navbar-border) !important;
    border-radius: 6px;
    margin-top: 10px;
    margin-bottom: 25px;
    background-color: var(--settings-sample-verse-bg-color) !important;
}

/* Search modal Input field styles */


.modal-content {
    background-color: var(--navbar-bg) !important;
    font-family: 'Merriweather', sans-serif;
}

.modal-content strong{
    font-weight: 700;
}

.searchbar-input-group .search-input {
    border-color: var(--navbar-search-button-icon-boarder-color) !important;
}

.searchbar-input-group .search-input:focus {
    background-color: #fff;
    color: #212529;
    box-shadow: 0 0 0 0.2rem var(--settings-download-btn-bg-hover-color);
    outline: none;
}

.search-close-btn{
    width: 4px  !important;
    height: 4px !important;
    margin-top: 5px !important;
    margin-right: 5px !important;
}

.small-close-btn {
    width: 4px;
    height: 4px;

    margin-top: 15px !important;
    margin-right: 15px !important;
    margin-bottom: 15px !important;
}

#clearButton {
    padding: 0 5px;
    font-size: 22px;
    width: 40px;
    border: none;
    background: transparent;
}

.spinner-border {
    color: var(--verse-text-english-color) !important;
    /* Customize spinner color */
}



@media (max-width: 576px) {
    .modal-dialog {
        width: 100vw;

    }

}

.search-results {
    margin-top: 20px;
    max-height: 80vh !important;
    overflow-y: auto;
    position: relative;

    flex: 1 1 auto;
    overflow-y: auto;
}

.search-results p {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.modal-dialog {
    max-width: 900px;
    margin: 0 auto;
    /* Center horizontally */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.modal-body {
    flex: 1 1 auto;
    overflow: hidden;
    /* Prevent scrolling */
    display: flex;
    flex-direction: column;
}


.searchResultCount {
    font-family: 'Merriweather', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: var(--chapter-subtitle-color) !important;
}

.quranonly {
    cursor: pointer;
    padding: 2px;

    margin-right: 10px;

    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;

    font-family: 'Merriweather', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: var(--quranonly-toggle-inactive-text-color);
}

.quranonly.active {
    background-color: var(--quranonly-toggle-active-bg-color);
    /* Set your active background color */
    color: var(--quranonly-toggle-active-text-color);
    /* Set your active text color */
}

.quranonly.inactive {
    background-color: var(--quranonly-toggle-inactive-bg-color);
    /* Set your inactive background color */
    color: var(--quranonly-toggle-inactive-text-color);
    /* Set your inactive text color */
}


@media (min-width: 992px) {
    .modal-dialog {
        max-width: 900px;
        margin: 0px auto;
        /* Center horizontally */
    }
}


.navbar-search-button {
    border-color: var(--navbar-search-button-icon-boarder-color) !important;
    color: var(--navbar-search-button-icon-boarder-color) !important;
    margin-right: 10px;
    font-family: 'Merriweather', sans-serif;
}

.navbar-search-button:hover {
    background-color: var(--navbar-search-button-bg-color-hover) !important;
    color: var(--navbar-search-button-icon-boarder-color-hover) !important;
}


.navbar-home-button svg {
    width: 24px;
    height: 24px;
    border-color: var(--navbar-search-button-icon-boarder-color) !important;
}

/* Default fill for the path */
.navbar-home-button svg path {
    fill: var(--navbar-search-button-icon-boarder-color) !important;
}

/* Hover state for the button, changing the path fill */
.navbar-home-button:hover svg path {
    fill: var(--navbar-search-button-icon-boarder-color-hover) !important;
}

/* Optional: Focus state (if you still want it) */
.navbar-home-button:focus svg path {
    fill: var(--navbar-search-button-icon-boarder-color-hover) !important;
    /* Remove background-color from svg if not needed */
}

.navbar .form-control,
.offcanvas .form-control {
    background-color: var(--navbar-bg) !important;
    color: var(--navbar-text) !important;
    border: 1px solid var(--navbar-border) !important;
}


/* ===== Sura name header bar ===== */
.svg-sura-name--wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    /* Ensures the SVG and overlay scale together */
    margin: 0 auto;
}

.footer-design--wrapper {
    padding-top: 50px !important;
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.footer--overlay {
    position: absolute;
    top: -25px;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 0% 100% 0%;
    align-items: center;
    font-family: var(--english-font, 'Merriweather'), sans-serif;
    font-weight: 400;
    font-size: 16px;
}

.footer_text_2 {
    font-weight: 500;
}

@media (max-width: 445px) {
    .footer--overlay {
        top: -35px;
    }
}



.svg-rotate-bottom {
    transform: rotate(180deg)  !important;
    padding-bottom: 100px;
}

.svg-sura-name--container {
    width: 100%;
    height: auto;
    display: block;
    padding-top: 10px;
}

.sura-banner-main-fill,
.sura-banner-number {
    fill: var(--sura-banner-svg-fill-color);
}

.sura-banner-outlines {
    fill: var(--sura-banner-svg-lines-color);
}


.sura-banner-number {
    stroke: var(--sura-banner-svg-lines-color);
    stroke-miterlimit: 10;
    stroke-width: 7px;
}

.svg-sura-name--overlay {
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 5% 5% 80% 4% 6%;
    align-items: center;
}

.svg-sura-name--overlay .sura_name {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.svg-sura-name--overlay .name_english {
    font-family: 'Merriweather', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--sura-banner-svg-text-color);
}

.svg-sura-name--overlay .name_arabic {
    font-family: Majeed, serif;
    font-weight: 700;
    font-size: 25px;
    color: var(--sura-banner-svg-text-color);
}

.svg-sura-name--overlay .chapter_no,
.svg-sura-name--overlay .no_of_verses {

    font-family: 'Merriweather', sans-serif;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sura-banner-svg-text-color);
}

@media (max-width: 750px) {
    .svg-sura-name--overlay .name_english {
        font-size: 17px;
    }

    .svg-sura-name--overlay .name_arabic {
        font-size: 20px;
    }

    .svg-sura-name--overlay .chapter_no,
    .svg-sura-name--overlay .no_of_verses {
        font-size: 16px;
    }
}

@media (max-width: 500px) {
    .svg-sura-name--overlay .name_english {
        font-size: 15px;
    }

    .svg-sura-name--overlay .name_arabic {
        font-size: 15px;
    }

    .svg-sura-name--overlay .chapter_no,
    .svg-sura-name--overlay .no_of_verses {
        font-size: 12px;
    }
}



/* ===== Apply Content Colours ===== */
body {
    background-color: var(--custom-bg-color);
    color: var(--custom-text-color);
}

.extra-topics {
    max-width: 700px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 0px;
    border-radius: 6px;
    position: relative;
    min-height: 50px;
    border: 1px solid transparent !important;
}

.extra-topics:hover {
    background-color: var(--custom-highlight-name-color);
    border: 1px solid var(--svg-banner-glorious-design-stroke-color) !important;
}

.extra-topics__title {
    font-family: 'Merriweather', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: var(--chapter-title-color) !important;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    text-align: left;
}


.highlight_extra-topics__title-text {
    color: var(--svg-banner-glorious-design-stroke-color) !important;
    transition: background-color 0.3s ease;
}


.highlight_extra-topics__title {
    background-color: var(--custom-highlight-name-color);
    border: 1px solid var(--svg-banner-glorious-design-stroke-color) !important;
    color: var(--svg-banner-glorious-design-stroke-color) !important;
    transition: background-color 0.3s ease;
}

.unhighlight_extra-topics__title {
    background-color: transparent;
    border: 1px solid transparent !important;
    color: var(--chapter-title-color) !important;
    transition: background-color 0.3s ease;
}


.extra-topics__grid {
    display: grid;
    grid-template-columns: 15% 85%;
    gap: 0px;
    width: 100%;
    margin: 0;
}

.extra-topics__bottom-line {
    position: absolute;
    bottom: 0;
    right: 0;
    /* Align to the right */
    border-bottom: 1px solid var(--verse-bottom-line-color);
    width: 89%;
}

/* Chapter Names Styling for Arabic/English */
.chapter-name__number {
    font-family: 'Merriweather', sans-serif;
}

.chapter-name__number--right {
    padding-right: 15px;
    padding-top: 17px;
    font-weight: 500;
    font-size: 18px;
    color: var(--chapter-number-color) !important;
}

.chapter-name__number--left {
    padding-left: 0px;
}

.chapter-name__title {
    font-family: 'Merriweather', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: var(--chapter-title-color) !important;
    padding-top: 17px;
    padding-bottom: 0px;
    padding-left: 5px;
    text-align: left;
}

.chapter-name__subtitle {
    font-family: 'Merriweather', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: var(--chapter-subtitle-color) !important;
    padding-top: 0%;
    padding-bottom: 0px;
    padding-left: 5px;
    text-align: left;
}

.chapter-name__arabic {
    font-family: Majeed, serif;
    font-weight: 300;
    font-size: 27px;
    color: var(--chapter-arabic-color) !important;
    padding-top: 0px;
    padding-bottom: 0px;
}

.chapter-name__bottom-line {
    border-bottom: 1px solid var(--verse-bottom-line-color);
    width: 89%;
    margin-left: auto;
}

.extra-line {
    max-width: 700px;
    padding: 0px;
    position: relative;
    min-height: 1px;
}


.chapter-name {
    max-width: 700px;
    padding-top: 0px;
    padding-bottom: 0px;

    margin-top: 0px;
    margin-bottom: 0px;

    border-radius: 6px;
    border: 1px solid transparent !important;

    position: relative;
    /* Add this to create a stacking context */
    overflow: hidden;

}

.chapter-name:hover {
    background-color: var(--custom-highlight-name-color);
    border: 1px solid var(--svg-banner-glorious-design-stroke-color) !important;
}

.chapter-name:hover .chapter-name__number--left svg {
    fill: var(--svg-banner-glorious-design-stroke-color);
    color: var(--svg-banner-glorious-design-stroke-color);
}

.chapter-name:hover .chapter-name__number--left text {
    fill: var(--svg-banner-glorious-design-stroke-color);
    color: var(--svg-banner-glorious-design-stroke-color);
}

.chapter-name:hover .chapter-name__main-grid-top .chapter-name__title {
    color: var(--svg-banner-glorious-design-stroke-color) !important;
}

.chapter-name:hover .chapter-name__number--right {
    color: var(--svg-banner-glorious-design-stroke-color) !important;
}


.chapter-name__main-grid {
    display: grid;
    grid-template-columns: 15% 85%;
    gap: 0px;
    width: 100%;
    margin: 0;
}

.chapter-name__main-grid-top {
    display: grid;
    grid-template-columns: 80% 20%;
    gap: 0px;
    width: 100%;
    margin: 0;
}

.chapter-name__main-grid-bottom {
    display: grid;
    grid-template-columns: 40% 40% 20%;
    gap: 0px;
    width: 100%;
    margin: 0;
}


/* new chapter Name Styles */


.chapter-name__main-col {
    padding: 0;
    width: auto;
    max-width: none;
}

/* SVG container styling */
.chapter-name__number--left {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    height: 100%;
    /* Fill the column height */
}


.chapter-name__number--left svg {
    width: 200px;
    height: auto;
    max-width: 100%;
    fill-rule: evenodd;
    clip-rule: evenodd;
    stroke-linejoin: round;
    stroke-miterlimit: 2;

    fill: var(--chapter-title-color);
    color: var(--chapter-title-color);

    fill-rule: nonzero;
}

/* Text styling for the number inside SVG */
.chapter-name__number--left text {
    font-size: 40px;
    /* Size of the number */
    text-anchor: middle;
    /* Center horizontally */
    font-weight: 500;
    fill: var(--chapter-title-color);
    color: var(--chapter-title-color);
}


/* new chapter Name Styles ends */

/* New grid styles for the two rows */
.chapter-name__grid-top {
    display: grid;
    grid-template-columns: 10% 74% 16%;
    /* Adjustable 3-column grid */
    gap: 0px;
    width: 100%;
    margin: 0;
}

.chapter-name__grid-bottom {
    display: grid;
    grid-template-columns: 10% 34% 40% 16%;
    /* Adjustable 2-column grid */
    gap: 0px;
    width: 100%;
    margin: 0;
}

.chapter-name__col {
    padding: 0;
    width: auto;
    max-width: none;
}


/* Apply background highlight */
/* Background highlight for the entire chapter name */
.highlight-chapter-name {
    background-color: var(--custom-highlight-name-color);
    border: 1px solid var(--svg-banner-glorious-design-stroke-color) !important;
    transition: background-color 0.3s ease;
}

/* Text color change for the chapter title */
.highlight-chapter-title {
    color: var(--svg-banner-glorious-design-stroke-color) !important;
    transition: color 0.3s ease;
}

/* Text color change for the right-side number */
.highlight-chapter-number-right {
    color: var(--svg-banner-glorious-design-stroke-color) !important;
    transition: color 0.3s ease;
}

/* Fill color change for the left-side SVG */
.highlight-chapter-svg {
    fill: var(--svg-banner-glorious-design-stroke-color) !important;
    transition: fill 0.3s ease;
}

/* Fill color change for the SVG <text> */
.highlight-chapter-svg-text {
    fill: var(--svg-banner-glorious-design-stroke-color) !important;
    transition: fill 0.3s ease;
}

/* Fade-out effect for the background */
.fade-out-highlight {
    background-color: transparent;
    transition: background-color 0.3s ease;
}



.bismi_arabic {
    font-family: Majeed, serif;
    color: var(--chapter-title-color);
    font-size: 25px;
    font-weight: 300;
}

.bismi_english {
    font-family: 'Merriweather', sans-serif;
    color: var(--chapter-title-color);
    font-weight: 400;
    font-size: 18px;
}


@media (max-width: 450px) {
    .chapter-name__grid-top {
        grid-template-columns: 10% 80% 10%;
        /* Adjusted for smaller screens */
    }

    .chapter-name__grid-bottom {
        grid-template-columns: 10% 35% 40% 15%;
        /* Adjustable 2-column grid */
    }
}


/* Responsive Adjustments */
@media (max-width: 600px) {
    .chapter-name__number {
        font-size: 15px;
    }

    .chapter-name__title {
        font-size: 15px;
    }

    .chapter-name__subtitle {
        font-size: 15px;
    }

    .chapter-name__arabic {
        font-size: 22px;
    }

    .bismi_english {
        font-size: 16px;
    }

    .search-input {
        width: 100px;
    }

    .offcanvas-start {
        width: 100% !important;
    }

    .extra-topics__title {
        font-size: 15px;
    }
}

/* Arabic/English Verse Styling */



.verse-container__number--arabic {
    font-family: UthmanicHafs, Helvetica, sans-serif;
    font-weight: 300;
    font-size: var(--verse-font-size-number-arabic);
    color: var(--verse-text-english-color) !important;
}


.verse-container__number--english {
    font-family: var(--english-font, 'Merriweather'), sans-serif;
    font-weight: 500;
    font-size: var(--verse-font-size-eng);
    color: var(--verse-text-english-color) !important;
    padding-top: 5px;
    padding-right: 5px;
}

.verse-container__verse--subheading {
    font-family: var(--english-font, 'Merriweather'), sans-serif;
    font-weight: 700;
    font-size: var(--verse-font-size-eng);
    color: var(--verse-text-english-color) !important;
    padding-top: 15px;
    padding-bottom: 0px;
    text-align: center;
    font-style: italic;
}

.verse-container__verse--english {
    font-family: var(--english-font, 'Merriweather'), sans-serif;
    font-weight: 300;
    font-size: var(--verse-font-size-eng);
    color: var(--verse-text-english-color) !important;
    padding-top: 0px;
    padding-bottom: 5px;
    padding-left: 5px;
    text-align: left;
}

.verse-container__verse--arabic {
    font-family: var(--arabic-font, 'Majeed'), serif;
    font-weight: 100;
    font-size: var(--verse-font-size-ar);
    color: var(--verse-text-arabic-color) !important;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}

.verse-container__proof--text {
    font-family: var(--english-font, 'Merriweather'), sans-serif;
    font-weight: 300;
    font-size: var(--verse-font-size-eng);
    color: var(--proof-box-text-color) !important;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
    border: 1px solid var(--proof-box-boarder-color) !important;
    background-color: var(--proof-box-bg-color) !important;
    border-radius: 6px;
}

.verse-container__proof--text p {
    margin-bottom: 0px !important;
}

.verse-container__proof--text strong {
    font-weight: 700;
}


.highlight_target_verse {
    border: 0px solid var(--verse-container-boarder-highlight-color) !important;
    background-color: var(--verse-container-bg-highlight-color);
    transition: background-color 0.5s ease;
}


.fade-out-highlight_target_verse {
    /* not used yet */
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.highlight_searched_verse_special_text {
    color: var(--verse-container-special-text-highlight-color) !important;
    transition: background-color 0.5s ease;
}

.chapter_proof_starting_text,
.chapter_proof_ending_text {
    font-family: var(--english-font, 'Merriweather'), sans-serif;
    font-weight: 300;
    font-size: var(--verse-font-size-eng);
    color: var(--verse-text-english-color) !important;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
    border: 1px solid var(--proof-box-boarder-color) !important;
    background-color: var(--proof-box-bg-color) !important;
    border-radius: 6px;
}

.chapter_proof_ending_text {
    margin-bottom: 20px;
}

.chapter_proof_starting_text p,
.chapter_proof_ending_text p {
    margin-bottom: 0px !important;
}

.chapter_proof_starting_text strong,
.chapter_proof_ending_text strong {
    font-weight: 700;
}

/* verse container Styling */

.verse-container {
    max-width: 1024px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    border-radius: 6px;

}

.verse-container__bottom-line {
    border-bottom: 1px solid var(--verse-bottom-line-color);
    width: 100%;
    margin-left: auto;
    position: relative;
    /* Add this to allow z-index control */
    z-index: 0;
}

.verse-container__grid--tools {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 0px;
    width: 100%;
    margin: 0;
    padding-bottom: 5px;
}

.verse-container__grid--top {
    display: grid;
    grid-template-columns: 0% 100%;
    gap: 0px;
    width: 100%;
    margin: 0;
}

.verse-container__grid--bottom {
    display: grid;
    grid-template-columns: 100% 0%;
    gap: 0px;
    width: 100%;
    margin: 0;
}

.verse-container__col {
    padding: 0;
    width: auto;
    max-width: none;
}

.verse-container__proof--star {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--proof-tools-border-color);
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    /* Rounded corners */

    outline: none;
    /* Remove default focus outline */
    user-select: none;
    /* Prevents accidental text selection */
    -webkit-tap-highlight-color: transparent;
    /* Removes touch highlight */
}


.verse-container__proof--star:focus {
    outline: none;

}

.verse-container__proof--star:active {
    background-color: var(--proof-tools-bg-fill-color);

}

.verse-container__proof--star:focus-visible {
    background: none !important;
    /* Remove unwanted focus styles */
    border-color: var(--proof-tools-star-color);
    /* Ensure border doesn't stay highlighted */
}

.verse-container__proof--star svg {
    width: 18px;
    height: 18px;
    fill: var(--proof-tools-star-color);
    /* Default star color */
    pointer-events: none;
    /* Prevents the SVG itself from triggering touch events */
}

.verse-container__proof--star:focus svg {
    fill: var(--proof-tools-star-color) !important;
    /* Ensures the star doesn't stay highlighted */
}


@media (max-width: 450px) {}

.center-spinner {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.container {
    max-width: 700px;
}

.dropdown-toggle::after {
    display: none !important;
}

.verse-container__proof--dots {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--proof-tools-border-color) !important;
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}


.verse-container__proof--dots:active {
    background-color: var(--proof-tools-bg-fill-color);
}

.verse-container__dropdown--3dots {
    font-size: 20px;
    font-weight: 700;
    color: var(--proof-tools-dots-color);
    font-family: sans-serif;
    display: flex;
    /* Make the span a flex container */
    align-items: center;
    /* Center it vertically */
    justify-content: center;
    /* Center it horizontally */
    height: 100%;
    /* Ensure it takes full height of the button */
    margin-bottom: 7px;
}

.verse-container .verse-container__dropdown--menu {
    background-color: var(--verse-tools-dropdown-bg-color) !important;
    border: 1px solid var(--verse-tools-dropdown-border-color) !important;
    color: var(--verse-tools-dropdown-text-color) !important;
    min-width: 130px !important;
    width: 130px !important;
    padding: 0px;

}

.verse-container .verse-container__dropdown--item {
    color: var(--verse-tools-dropdown-text-color) !important;
    border-color: var(--verse-tools-dropdown-border-color) !important;
    margin: 0px;
    max-width: 100%;
    border-radius: 6px;
    padding: 0px;
}

.verse-container .verse-container__dropdown--item:hover {
    color: var(--verse-tools-dropdown-text-color) !important;
    background-color: var(--verse-tools-dropdown-bg-hover-color) !important;


}

.verse-container .verse-container__dropdown--item {
    display: flex;
    align-items: center;
}

/* Position the SVG icon as a bullet */

.dropdown-bullet-icon {
    width: 36px;
    /* Adjust the size of the SVG */
    height: 36px;
    margin-right: 0px;
    /* Space between the icon and text */
}


.verse-container-dropdown-item-icon {
    fill: var(--verse-tools-dropdown-text-color) !important;
}

/* toast settings */


.custom-toast {
    width: 190px;
    max-width: 100%;
    position: relative;
    /* For positioning the close button */
    user-select: none;
    border-radius: 24px;
    background-color: var(--toast-bg-color) !important;
    color: var(--toast-text-color) !important;
    border: 1px solid var(--toast-text-color) !important;
}

.toast-body {
    text-align: center;
    padding: 10px 25px 10px 0px;
    /* Extra right padding for close button space */
    position: relative;
    /* Context for absolute positioning of close button */
    font-family: 'Merriweather', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(---toast-text-color) !important;   
}

.custom-toast .btn-close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 0.75rem;
    width: 1rem;
    height: 1rem;

}

.custom-toast .btn-close.toast-close-cross {
    color: var(--toast-text-color) !important;
}

/* Position the toast container at bottom center */
.toast-container {
    position: fixed;
    bottom: 20px;
    /* Distance from bottom */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Offset by half its width */
    z-index: 1050;
}



/* ===== Dropdowns & Search Bar ===== */
.search-input {
    background-color: var(--custom-bg-color) !important;
    color: var(--custom-text-color) !important;
    border: 1px solid var(--custom-border-color) !important;
}

.dropdown-menu {
    background-color: var(--custom-bg-color) !important;
    color: var(--custom-text-color) !important;
    border: 2px solid var(--custom-border-color) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--general-hover-color) !important;
    color: var(--general-hover-alt-text-color) !important;
}


.dropdown-item {
    color: var(--general-text-color) !important;
    border-color: var(--general-border-color) !important;
}

@media (min-width: 601px) {
    .offcanvas-start {
        min-width: 600px !important;
    }
}

@media (min-width: 992px) {
    .navbar-toggler.d-lg-none {
        display: block !important;
    }
}




.burger-menu-line {
    fill: var(--buger-menu-line-color);
    color: var(--buger-menu-line-color);
}

.burger-menu-label {
    font-weight: 300;
    font-size: 16px;

}

/* ======== pages sections ======== */

.page_container p {
    margin-bottom: 0px !important;
}

.page_container strong {
    font-weight: 700;
}

.page_container {
    font-family: var(--english-font, 'Merriweather'), sans-serif;
    font-size: var(--verse-font-size-eng);
    font-weight: 300;
    padding-top: 20px;
    padding-left: 5px; /* 10% of viewport width */
    padding-right: 5px;

}

/* ===== Settings Section ===== */

.settings-font-size-row__grid {
    display: grid;
    grid-template-columns: 70% 10% 10% 10%;
    gap: 0px;
    width: 100%;
    margin: 0;
    padding-left: 10px;
}

.settings-font-size-display-size-box {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    color: var(--settings-text-color);
    padding: 0.375rem 0.75rem;
    font-size: 18px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: 'Merriweather', sans-serif;
}

.settings-font-size-label {
    display: inline-block;
    font-weight: 400;
    text-align: left !important;
    color: var(--settings-text-color);
    font-size: 16px;
    justify-content: flex-start !important;
    font-family: 'Merriweather', sans-serif;
}

.settings-minus-plus-button {
    color: var(--settings-text-color);
    font-family: 'Merriweather', sans-serif;
    font-size: 25px;
    font-weight: 300;
}

.settings-selection-set-btn {
    display: inline-block;
    font-weight: 300;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    font-size: 16px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--settings-border-color);
    border-radius: 6px;
    height: 40px;
    color: var(--settings-text-color);
    border-color: var(--settings-border-color);
    background-color: transparent !important;

    transition: all 0.2s ease;
    font-family: 'Merriweather', sans-serif;

}

.settings-btn-group .active {
    background-color: var(--settings-selected-bg-color) !important;
    color: var(--settings-selected-text-color) !important;
    border: 1px solid var(--settings-border-color);
}

.settings-selection-set-btn:hover {
    background-color: var(--settings-hover-bg-color) !important;
    color: var(--settings-hover-text-color) !important;
    border: 1px solid var(--settings-border-color);
}


.settings-h6-label {
    display: inline-block;
    font-weight: 600;
    text-align: left !important;
    color: var(--settings-text-color) !important;
    font-size: 1rem;
    justify-content: flex-start !important;
    font-family: 'Merriweather', sans-serif;
}



.settings-general-btns {
    background-color: transparent !important;
    border: 1px solid var(--settings-border-color);
    color: var(--settings-text-color);
    width: 80%;
    font-weight: 300;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Merriweather', sans-serif;
}

.settings-general-btns:hover {
    background-color: var(--settings-selected-bg-color) !important;
    color: var(--settings-selected-text-color) !important;
    border: 1px solid var(--settings-border-color);
}

.settings-general-btns svg {
    width: 25px;
    height: 25px;
}

.amazon-btn-svg-path {
    color: var(--settings-download-btn-text-color) !important;
    fill: var(--settings-selected-text-color) !important;
    stroke: none;
    stroke-width: 0;
}


.settings-general-btns:hover .amazon-btn-svg {
    color: var(--settings-download-btn-text-color) !important;
    color: var(--settings-download-btn-text-color) !important;
}

.settings-hr {
    border-color: var(--settings-download-btn-text-color);
}

.nav-language-dropdown {
    background-color: var(--settings-download-btn-bg-color);
    border: 1px solid var(--settings-download-btn-text-color);
    color: var(--settings-download-btn-text-color);
    font-family: 'Merriweather', sans-serif;
}


.general_centered {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Just for demo */
}


.list-group-item {
    background-color: var(--navbar-bg) !important;
    color: var(--list-group-item-text-color) !important;
    border-color: var(--list-group-item-border-color) !important;
}

.list-group-item:hover {
    background-color: var(--list-group-item-hover-bg-color) !important;
    color: var(--list-group-item-hover-text-color) !important;
}

/*--- Search highlight ---*/
.highlight_search {

    font-style: normal !important;

    direction: inherit;
    /* Maintains text direction */
    unicode-bidi: embed;
    /* Ensures proper character rendering */
    background-color: var(--verse-word-searched-highlight-color);
    border-radius: 4px;

}

.unhighlight_search {

    font-style: normal !important;

    direction: inherit;
    /* Maintains text direction */
    unicode-bidi: embed;
    /* Ensures proper character rendering */
    background-color: transparent;
    border-radius: 0px;

}

.highlight_arabic {
    font-style: normal !important;
    color: var(--verse-text-arabic-highlight-color) !important;
    direction: inherit;
    /* Maintains text direction */
    unicode-bidi: embed;
    /* Ensures proper character rendering */
}

.h1lg0darb1c { /* Highlight English Allah */
    font-weight: 700;
    font-style: normal !important;
}

.card-body .btn-close {
    margin-bottom: 1rem;
    /* Adds space below the last sentence, pushing the button down */
}

/*--- settings ctc  ---*/

.setting-ctc-collapsible-style {
    max-width: 400px;
    border-radius: 6px;
    padding: 15px;
    background-color:var(--settings-ctc-bg-main-color);

}

.settings-ctc-change-position-label {
    font-family: 'Merriweather', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: var(--settings-ctc-text-color);
    padding-left: 0px;

    text-align: left;
    display: flex;
    align-items: center;
    height: 100%; /* Ensure it takes the full height of the parent */
}

.settings-ctc-change-position-grid {
    display: grid;
    grid-template-columns: 65% 15% 5% 15%;
    gap: 0px;
    width: 100%;
    margin: 0;
}

.form-select-chapter-no-verse-no-arrow {
    background-image: none; /* Removes the dropdown arrow */
    padding-right: 10px; /* Reduces right padding to match left, saving space */
    padding-left: 6px;
    border-radius: 0px;
    background-color: var(--settings-ctc-bg-main-color);
    text-align: center; /* Centers the selected number */
    color: var(--settings-ctc-text-color);
    padding-top: 2px; /* Reduced vertical padding (top) */
    padding-bottom: 2px; /* Reduced vertical padding (bottom) */
    line-height: 1.2; /* Reduced line height for tighter fit */
    height: 24px; /* Explicitly set height (optional override) */


}
.form-select-chapter-no-verse-no-arrow option {
    text-align: center; /* Centers the numbers in the dropdown list */
}

.settings-ctc-colon-mark{
    text-align: center !important;
    font-family: 'Merriweather', sans-serif;
    padding-left: 17px !important;
    padding-right: 0px !important;

}


.settings-ctc-position-box{
    background-color: var(--settings-ctc-bg-small-color);
    border: 1px solid transparent !important;
    border-radius: 6px;
    color: var(--settings-ctc-text-color);
    width: 100%;
    font-weight: 300;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 25px;
    display: flex;
    align-items: center;
    gap: 0px;
    font-family: 'Merriweather', sans-serif;
}

.settings-ctc-reading-btn{
    background-color: var(--settings-ctc-startreading-bg-color) !important;
    border: 1px solid transparent !important;
    color: var(--settings-ctc-startreading-text-color);
    width: 100%;
    font-weight: 300;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Merriweather', sans-serif;
}

.settings-ctc-reading-btn :hover{
    background-color: var(--settings-ctc-startreading-bg-hover-color) !important;
    color: var(--settings-ctc-startreading-text-hover-color);
}




/*--- 

    --settings-ctc-bg-main-color: #f0f0f0;
    --settings-ctc-bg-small-color: #f0f0f0;
    --settings-ctc-text-color: #818181;
    --settings-ctc-startreading-bg-color: #e6e6e6;
    --settings-ctc-startreading-text-color: #818181;
    --settings-ctc-startreading-bg-hover-color: #818181;
    --settings-ctc-startreading-text-hover-color: #f0f0f0;

---*/