:root {
    --brown: #524b2b;
    --light-brown: #B08968; /* color for ayah number */
    --brown-bg: rgba(83, 71, 13, 0.8); /* #53470D color for main bg */
    --white: #ffffff;
    --light-white: rgba(255, 255, 255, 0.75);
    --dark-white: rgba(243, 240, 226, 0.4); /* #f3f0e2 color for surah card in quran player */
    --silver: #C0C0C0; /* surah card border clor */
    --white-linear-1: #F1EDE8;
    --white-linear-0: #F7F5F0;
    --gold-1: #D7B549;
    --gold-0: #FFDE73;
    --light-gold: #FFF0BF;
    --blue: #333B42;
    --letter-color: #FEFFFF;
}


/***************************
            DEFAULT
****************************/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    color: var(--white);
    background-image: linear-gradient(var(--brown-bg), var(--brown-bg)),
    url("images/islamic-background.png");
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
h1{
    font-weight: 700;
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -0.02em;
}
h2{
    font-weight: 700;
    font-size: 32px;
    line-height: 48px;
}
h3{
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
}
h5{
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
}
h6{
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}
input, button{
    outline: none;
    background: none;
    border: none;
}
p{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
ul {
    list-style: none;
    padding: 0;
}





/***************************
            additional
             classes
****************************/
.opacity-15{
    opacity: 15%;
}
.pointer__hover:hover{
    cursor: pointer;
}
.top__minus-8{
    top: -8px;
}
.gold__linear-color{
    background: linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}
.gold__bg{ /* when surah is active */
    background: linear-gradient(180deg, #FFDE73 0%, #D7B549 100%);
}

.white__color{
    color: var(--white);
}
.light-brown__color{
    color: var(--light-brown);
}
.brown__btn{
    background-color: var(--brown);
    /*padding: 20px 48px;*/
    width: 100%;
    height: 64px;
    border-radius: 48px;
}
.number__container{
    width: 35px;
    font-weight: 600;
    font-size: 12px;
}
.surah__card .surah__card-content p{ /* <p> for cards in both page.blade and quran.blade */
    font-weight: 400;
    font-size: 13px;
    line-height: 12px;
}
.ayah__number{
    background-color: var(--white);
    padding: 12px;
    border-radius: 50%;
}
.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: transparent;
    border-radius: 10px;
}
.scroll::-webkit-scrollbar{
    width: 10px;
    background-color: transparent;
}
.scroll::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, var(--gold-0)), color-stop(0.72, var(--gold-1)));
}



/***************************
            navbar
****************************/
.navbar{
    font-size: 20px;
}
.navbar .navbar-toggler{
    border: 1px solid var(--light-white);
    color: var(--light-white);
}
.navbar a:not(.dropdown-item){
    /*color: var(--light-white)*/
    background: linear-gradient(180deg, var(--light-white) 100%, var(--light-white) 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}
.navbar a:hover, .navbar a:focus{
    background: linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}
.navbar .dropdown .nav-link{
    color: var(--light-white);
}
.navbar .dropdown .dropdown-menu{
    background-color: var(--white);
    border: none;
}
.navbar .dropdown .dropdown-menu a{
    color: var(--brown);
}



/***************************
          quran player
            section
****************************/

/* --------------- quran player card ----------------- */
#quran-player .surah__card{
    max-width: 360px;
    max-height: 90px;
    color: var(--blue);
    border-radius: 32px;
    border: 1px solid var(--silver);
    background-color: var(--dark-white);
}
#quran-player .surah__card-active{
    border: none;
    background: linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%);
    color: var(--brown);
}
#quran-player .surah__card .surah__card-shape{
    object-fit: contain;
    /* top-left | top-right | bottom-right | bottom-left */
    border-radius: 0 32px 32px 0;
    z-index: -1;
    max-height: 85px;
}
#quran-player .surah__card .surah__card-number{
    border-radius: 50%;
    border: 1px solid var(--silver);
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* -------------- quran pages ------------ */
#quran-player .surah-panel {
    position: relative;
    width: 100%;
}
#quran-player .surah-panel__frame {
    display: block;
    width: 100%;
    height: auto;
}
#quran-player .surah__content {
    /* Fill the frame: clear frame ornament at edges */
    top: 11%;
    left: 8.5%;
    right: 8.5%;
    bottom: 10%;
    height: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#quran-player .surah__content .surah__content-text.scroll {
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Keep scrolled text clear of frame زخرفة (top/bottom ornament) */
    padding: 1.75rem 0.85rem 1.85rem;
    scroll-padding-top: 1.5rem;
    scroll-padding-bottom: 1.5rem;
    box-sizing: border-box;
    scrollbar-gutter: stable;
}
#quran-player .surah__content .surah__content-number{
    background-color: var(--white);
    color: var(--brown);
}
#quran-player .surah__content .surah__content-text{
    font-weight: 500;
    line-height: 70px;
}

#quran-player .surah__content .surah__content-text .p__ar{
    direction: rtl;
    font-weight: 400;
    font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
}

#quran-player .surah__content .surah__content-text .p__ar.regular{
    font-size: 30px;
}

#quran-player .surah__content .surah__content-text .p__ar.medium{
    font-size: 34px;
}

#quran-player .surah__content .surah__content-text .p__ar.large{
    font-size: 38px;
}

#quran-player .surah__content .surah__content-text .p__ar.extra{
    font-size: 42px;
}

#quran-player .surah__content .surah__content-text .p__en.regular{
    font-size: 24px;
}

#quran-player .surah__content .surah__content-text .p__en.medium{
    font-size: 28px;
}

#quran-player .surah__content .surah__content-text .p__en.large{
    font-size: 32px;
}

#quran-player .surah__content .surah__content-text .p__en.extra{
    font-size: 36px;
}

/* A2L special markers (رموز) — تمييز brown background */
#quran-player .latin-special-mark {
    color: #FFE9A8 !important;
    -webkit-text-fill-color: #FFE9A8 !important;
    font-weight: 800 !important;
    background: rgba(82, 75, 43, 0.72) !important;
    border-radius: 4px;
    padding: 0 0.14em;
    box-shadow: 0 0 0 1px rgba(215, 181, 73, 0.55);
}

/* -------------- audio ------------ */
.white__bar{
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}
.gold__bar{
    height: 8px;
    width: 0%;
    background: linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%);
    border-radius: 4px;
}
.circle__bar{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%);
    top: -6px;
    /*left: calc(0% - 20px);*/
    cursor: pointer;
}

/*#quran-player .audio__volume{*/
/*    left: -40px;*/
/*    top: 30px;*/
/*}*/
/*#quran-player .audio__volume-slider{*/
/*    width: 180px;*/
/*    height: 5px;*/
/*}*/
/*#quran-player .audio__volume-slider .white__bar{*/
/*    width: 8px;*/
/*    height: 100px;*/
/*    background: rgba(255, 255, 255, 0.5);*/
/*    border-radius: 4px;*/
/*}*/
/*#quran-player .audio__volume-slider .gold__bar{*/
/*    width: 8px;*/
/*    height: 0%;*/
/*    background: linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%);*/
/*    border-radius: 4px;*/
/*}*/
/*#quran-player .audio__volume-slider .circle__bar{*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    border-radius: 50%;*/
/*    background: linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%);*/
/*    left: -6px;*/
/*    top: calc(100px - 20px);*/
/*    cursor: pointer;*/
/*}*/

/*#quran-player .play-circle{*/
/*    width: 30px;*/
/*    height: 30px;*/
/*    border-radius: 50%;*/
/*    background: linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%);*/
/*}*/


/***************************
        quran surah menu
            section
****************************/
#surah-menu .search__bar{
    max-width: 400px;
    border: 1px solid var(--white);
    border-radius: 48px;
    padding: 20px;
    gap: 20px;
}
#surah-menu .search__bar input::placeholder{
    color: var(--light-white);
    text-transform: capitalize;
}
#surah-menu .surah__card{
    color: var(--brown);
    border-radius: 32px;
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--white-linear-0) 0%, var(--white-linear-1) 100%) padding-box,
    linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%) border-box;
}




/***************************
          modals
****************************/
.modal-content{
    border-radius: 24px;
    border: 1px solid transparent;
    background: linear-gradient(var(--brown), var(--brown)) padding-box,
    linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%) border-box;
}
.modal-header, .modal-footer{
    border: none;
}
.modal-header h5{
    font-weight: 700 !important;
    line-height: 28px !important;
}
.modal-header h6 {
    font-weight: 500 !important;
    line-height: 24px !important;
}
.modal-btn{
    background-color: transparent;
    border: 1px solid var(--white);
    border-radius: 48px;
    padding: 16px 20px;
    transition: 0.3s;
}


/*------------ letters modal -------------------*/
#letters .modal-body{
    margin-top: 100px;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
}
#letters .ar__letters{
    border-radius: 20px;
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--white) 0%, var(--light-gold) 100%) padding-box,
    linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%) border-box;
    color: var(--brown);
    padding: 15px 30px;

}
#letters .en__letters{
    color: var(--letter-color);
    padding: 15px 30px;
}
#letters .underlined__letter:after {
    content: '';
    height: 2px;
    background: var(--letter-color);
    display:block;
    margin-top: 2px;
}
#letters .pointed__letter:after{
    content: '.';
    position: relative;
    top: 4px;
    left: -3px;
}
#letters .close__btn{
    width: 150px;
    background: linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%);
    color: var(--brown);
    padding: 16px 20px;
    border-radius: 48px;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    transition: 0.3s;
}


/*------------ surah download modal -------------------*/
#surah-download .modal-dialog{
    width: 420px;
}


/*------------ font size modal -------------------*/
#font-size .modal-dialog, #bg-color .modal-dialog{
    width: 370px;
}
#font-size .form-check-input, .form-check-input:checked {
    background-color: transparent;
    border: 1px solid var(--white);
}
#font-size .regular__font{
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
}
#font-size .medium__font{
    font-weight: 400;
    font-size: 20px;
    line-height: 36px;
}
#font-size .large__font{
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
}
#font-size .extra-large__font{
    font-weight: 400;
    font-size: 24px;
    line-height: 40px;
}


/*------------ bg color modal -------------------*/
#bg-color .color-btn{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}



/*------------ verse modal -------------------*/
#verse-modal .verse__modal-text{
    font-weight: 600;
    font-size: 28px;
    line-height: 50px;
}
#verse-modal .verse__modal-btn{
    background-color: transparent;
    border: 1px solid var(--white);
    border-radius: 12px;
    padding: 14px 18px;
    transition: 0.3s;
}
#verse-modal .modal-body.scroll {
    max-height: 250px;
    overflow-y : auto;
}

/*------------ verse modal -------------------*/
#word-modal .verse__modal-text{
    font-weight: 600;
    font-size: 28px;
    line-height: 50px;
}
#word-modal .verse__modal-btn{
    background-color: transparent;
    border: 1px solid var(--white);
    border-radius: 12px;
    padding: 14px 18px;
    transition: 0.3s;
}
#word-modal .modal-body.scroll {
    max-height: 250px;
    overflow-y : auto;
}



/*------------ context menu -------------------*/
#contextMenu{
    position: absolute;
    width: 300px;
    border-radius: 32px;
    border: 1px solid transparent;
    background: linear-gradient(var(--brown), var(--brown)) padding-box,
    linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%) border-box;
}
@media (max-width: 991px) {
    #contextMenu.context__menu--mobile-center {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        width: min(92vw, 320px);
        max-height: min(78vh, 520px);
        overflow-y: auto;
        z-index: 1055 !important;
    }
}
#contextMenu .menu > li {
    border-bottom: 1px solid var(--light-white);
    font-size: 14px;
    z-index: 1;
}
#contextMenu .menu > li:last-child {
    border: none;
}
#contextMenu .menu > li > a:hover {
    background: linear-gradient(180deg, var(--gold-0) 100%, var(--gold-1) 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}
#contextMenu .menu > li > a svg{
    width: 30px;
}