/* ======
fonts
============ */

@font-face {
    font-family: 'surah-font';
    /* اسم الخط */
    src: url('/quran-font/Elgharib\ Surah\ Name\ Without.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f7f9fa;
    --text-primary: #333333;
    --border-color: #ebeef0; /* للوضع العادي */
    --box-shadow: rgba(10, 10, 10, 0.13);
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #c2c2c2;
    --scrollbar-thumb-hover: #555;
    --bg-primary-hover: #f1f1f1;
    --highlight: rgb(235, 235, 235);
}
  
.dark-mode {
    --bg-primary: #272b31;
    --bg-secondary: #202226;
    --text-primary: #e8eaeb;
    --border-color: #3a3a3a; /* للوضع الليلي */
    --box-shadow: rgba(10, 10, 10, 0.13);
    --scrollbar-track: #3f4145; /* لون الخلفية الداكن */
    --scrollbar-thumb: #464a52;  /* لون شريط التمرير */
    --scrollbar-thumb-hover: #585b61; /* لون شريط التمرير عند التمرير عليه */
    --bg-primary-hover: #33353a;
    --highlight: #3d424b;
}

body {
    background-color: var(--bg-secondary);
}

.container {
    position: relative;
}

/* =================
main header
================== */

.main-header {
    background-color: var(--bg-primary);
}

.main-header h1 {
    color: var(--text-primary);
    font-size: 18px;
    letter-spacing: unset;
}

.main-header .main-navigation ul li a {
    color: var(--text-primary);
}

.main-header .home-menu i, .main-header .home-menu a {
    color: var(--text-primary) !important; 
    font-size: 18px !important;
}


/* ==================
drop down
================ */

#dropDownNav {
    background-color: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    display: flex;
    transition: none;
}


#dropDownContent li a {
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    font-size: 14px;
}

.main-navigation ul li a {
    color: var(--text-primary);
}

.dropDownContentSmallScreen li a {
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
}


/* ==============
scrollbar
================ */

/* تغيير الشكل العام للشريط */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* لون الخلفية للشريط */
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 10px;
}

/* لون المقبض أو الزر الذي يتم سحبه */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 10px;
}

/* تأثير على المقبض عند تمرير المؤشر */
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* =================
fahras
=================== */

.parent-surah-box {
    margin: 50px auto;
}

.parent-surah-box .container {
    display: flex;
    justify-content: center;
    gap: 0.5em;
    flex-wrap: wrap;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.surah-box {
    font-family: 'surah-font';
    padding: 16px 0;
    font-size: 30px;
    border-radius: 9px;
    width: 290px;
    color: var(--text-primary);
    text-align: center;
    display: inline-block;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

@media (max-width: 637px) {
    .surah-box {
        display: block;
        width: 500px;
    }
}

.surah-box:hover {
    background-color: var(--bg-primary-hover);
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}

.dark-mode .surah-box:hover {
    background-color: var(--bg-primary-hover);
    border: 1px solid #202226;
    transition: all 0.3s ease;
}

/* تنسيق شريط البحث */
.search-container {
    text-align: center;
    display: flex;
    justify-content: center;
    max-width: 800px;
    margin: 40px auto;
    padding: 0 40px;

}

.speed75 {
    width: 100%;
    height: 47px;
    display: flex;
    flex-direction: row-reverse;
    background-color: var(--bg-primary);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    border-radius: 90px;
}

.dark-mode .speed75 {
    background-color: #d2d5db;
}

/* حقل الإدخال */
#searchInput {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    outline: none;
    border: none;
    background: none;
    color: var(--text-primary);
}

.dark-mode #searchInput {
    color: #202226
}

/* زر إغلاق */
#closeSearch {
    padding: 10px;
    margin-right: 7px;
    text-align: center;
    border-radius: 5px;
    color: #202226;
    border: none;
    font-size: 20px;
    cursor: pointer;

}

.dark-mode #closeSearch{
    color: #969696;
}

/* تمييز النص */
.highlight {
    background-color: var(--highlight);
    color: var(--text-primary);
}