/* =========================================================
   موقع المهدي — البحث في القرآن الكريم
   ثيم موحّد: أخضر مصحفي غامق + ذهبي
   -------------------------------------------------------
   هذا الملف يحل محل quran-frame.css (يشمل الإطار + الهيدر
   + النافبار + الشريط الجانبي + مشغّل الصوت + الفوتر + الجوال).

   التركيب: احذف كتلة quran-frame.css السابقة من style.css
   ثم الصق هذا الملف في نهاية style.css.
   لم يُعدَّل أي اسم فئة أو معرّف، فلا تتأثر السكربتات.
   ========================================================= */

:root {
    --green-900: #0C2E21;   /* أغمق: الفوتر والنصوص */
    --green-800: #103C2C;   /* الهيدر والإطار */
    --green-700: #17563E;   /* النافبار والأزرار */
    --green-100: #E7EFEA;   /* خلفيات هادئة */
    --gold-600:  #B8901F;   /* ذهبي داكن للنصوص */
    --gold-500:  #C59B27;   /* الذهبي الأساسي */
    --gold-300:  #E1BA51;   /* ذهبي فاتح للزخرفة */
    --gold-100:  #EFE4C6;   /* حدود ذهبية رقيقة */
    --paper:     #FAF6EE;   /* ورق المصحف */
    --page-bg:   #F1EFE9;   /* خلفية الصفحة */
    --ink:       #23201A;
    --ink-soft:  #5E5949;
}

/* ===================== الأساس ===================== */

/* إضافة الخط العربي */
@font-face {
    font-family: 'Noto Kufi Arabic';
    src: url('fonts/static/NotoKufiArabic-Regular.ttf') format('truetype');
    }
@font-face {
    font-family: 'Amiri';
    src: url('fonts/Amiri-Regular.ttf') format('truetype');
    }
@font-face {
    font-family: 'hafs';
    src: url('fonts/hafs.ttf') format('truetype');
    unicode-range: U+0600-06FF; /* نطاق الأحرف العربية */
    }

body {
    font-family: 'Noto Kufi Arabic', 'hafs','Amiri', sans-serif; /* استخدام الخط العربي */
    background-color: var(--page-bg); /* لون الخلفية الخارجية */
    color: var(--ink);
    direction: rtl;
}

.wrapper {
    width: 65%;
    margin: 0 auto 28px;
    background-color: #fff;
    box-shadow: 0 10px 40px -24px rgba(12, 46, 33, .35);
}

a { color: var(--gold-600); }
a:hover { color: var(--green-700); }

/* ===================== الهيدر ===================== */
header {
    position: relative;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 20px 0 0;
    background-color: var(--green-800);
    background-image:  linear-gradient(180deg, #14452F 0%, var(--green-800) 60%, #0D3526 100%);
    border-top: 3px solid var(--gold-500);
    border-bottom: 3px solid var(--gold-500);
    color: #fff;
}

/* شريط ذهبي رقيق أعلى وأسفل الهيدر */
header::before,
header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(225, 186, 81, .55);
}

header::before { top: 5px; }
header::after  { bottom: 5px; }

header .container {
    max-width: none;
    margin: 0;
}

.header-content {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    text-align: center;
}

/* وسط الهيدر: عنوان مزخرف بفاصلين ذهبيين */
.header-content::before {
    content: '';
    order: 2;
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    background: url('images/quran_logo.png') center/contain no-repeat;
}

/* يسار الهيدر: الآية الكريمة */
.header-content::after {
    content: 'تَنزِيلٌ مِن رَبِّ العَالَمِين';
    order: 3;
    flex: 0 0 auto;
    font-family: 'hafs', 'Amiri', serif;
    font-size: 1.15em;
    line-height: 1.6;
    color: var(--gold-300);
    white-space: nowrap;
}
/* الميدالية الذهبية مكان الشعار */
 .ornament {
    position: static;
    order: 1;
    flex: 0 0 auto;
    width: 152px;
    height: 88px;
    background: url('images/almahdy_logo_green_subtle_gradient.png') center/contain no-repeat;
}

/* الميدالية الذهبية (احتياط إن لم يوجد شعار) */
.ornament-mark {
    position: static;
    flex: 0 0 auto;
    width: 152x;
    height: 88px;
    background: url('images/almahdy_logo_green_subtle_gradient.png') center/contain no-repeat;
}

/* ===================== النافبار ===================== */
nav {
    position: static;
    top: auto;
    display: block;
    margin: 0;
    padding: 0;
    background-color: var(--green-700);
    border-bottom: 1px solid rgba(197, 155, 39, .45);
}

.nav-section {
    position: static;
    height: auto;
    bottom: auto;
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 24px;
}

nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul li { float: none; }

nav ul li a {
    display: inline-block;
    padding: 13px 18px;
    color: #F3EEDF;
    font-size: 1.2em;
    line-height: 2.35em;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: background-color .2s ease, border-color .2s ease;
}

nav ul li a:hover {
    background-color: rgba(255, 255, 255, .07);
    border-bottom-color: var(--gold-300);
    color: #fff;
}

/* زر قائمة الجوال: يظهر في الجوال فقط */
.toggle-button {
    position: static;
    bottom: auto;
    display: none;
}

#leftSectionToggle {
    position: static;
    top: auto;
    margin: 0;
    color: #F3EEDF;
    background: transparent;
    border: 0;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 8px 10px;
}

/* ===================== تخطيط المحتوى ===================== */
.main-content {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 26px 24px 8px;
    max-width: 1140px;
    margin: 0 auto;
}

.left-section { width: 28%; gap: 18px; }
.right-section { width: 72%; padding: 0; }

.search-header {
    position: static;
    top: auto;
    z-index: auto;
}

/* ===================== الشريط الجانبي: بطاقات ===================== */
.left-section > div {
    background: #fff;
    border: 1px solid var(--gold-100);
    border-radius: 6px;
    padding: 16px 16px 18px;
    box-shadow: 0 6px 18px -14px rgba(12, 46, 33, .35);
}

.left-section h2 {
    margin: 0 0 14px;
    padding: 0 0 10px;
    font-size: 1em;
    font-weight: 600;
    color: var(--green-800);
    text-align: center;
    border-bottom: 1px solid var(--gold-100);
    position: relative;
}

.left-section h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    background: #fff;
    border-right: 1px solid var(--gold-100);
    border-bottom: 1px solid var(--gold-100);
}

/* الحقول والقوائم */
.search-section input,
.browse-row select,
.page-input-group input,
#readerSelect {
    width: 100%;
    box-sizing: border-box;
    max-width: none;
    padding: 10px 12px;
    font-size: .95em;
    color: var(--ink);
    background: #FCFBF7;
    border: 1px solid #DFD6BE;
    border-radius: 4px;
}

.search-section input:focus,
.browse-row select:focus,
.page-input-group input:focus,
#readerSelect:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(197, 155, 39, .18);
}

.search-section form { gap: 12px; }

.search-section button {
    width: 100%;
    padding: 11px 12px;
    font-size: .95em;
    font-weight: 600;
    color: #FFF8E6;
    background-color: var(--green-700);
    border: 1px solid var(--green-800);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .2s ease;
}

.search-section button:hover { background-color: var(--green-800); }

.browse-table { gap: 12px; margin-top: 12px; }

.browse-row { gap: 10px; }

.browse-row label {
    width: 52px;
    color: var(--ink-soft);
    font-size: .9em;
}

.page-input-group { max-width: none; gap: 6px; }

.page-input-group input { text-align: center; margin: 0; }

.page-input-group button {
    width: 32px;
    height: 34px;
    color: var(--green-800);
    background-color: #F6F2E6;
    border: 1px solid #DFD6BE;
    border-radius: 4px;
    cursor: pointer;
}

.page-input-group button:hover { background-color: var(--gold-100); }

/* ===================== مشغّل الصوت =====================
   مشغل المتصفح لا يقبل تلويناً من الخارج، فنُأطّره بلوحة عاجية */
.audio-section audio {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    padding: 8px;
    box-sizing: border-box;
    background: #F6F2E6;
    border: 1px solid var(--gold-100);
    border-radius: 6px;
}

/* ===================== نتائج البحث ===================== */
.search-results { line-height: 2.6em; }

.result-container {
    background-color: #FCFAF3;
    border: 1px solid var(--gold-100);
    border-bottom: 1px solid var(--gold-100);
    border-radius: 5px;
    padding: 8px 12px;
    margin-bottom: 8px;
}

.result-container:hover { background-color: #F6F0DF; }

.result-number {
    color: var(--green-700);
    font-size: 1.05em;
    font-weight: 700;
}

.search-highlight {
    background-color: #F7E7B8;
    color: var(--green-800);
    font-weight: 700;
    border-radius: 3px;
    padding: 1px 4px;
}

/* ===================== الفوتر ===================== */
footer {
    margin-top: 26px;
    padding: 18px 24px;
    background-color: var(--green-900);
    border-top: 3px solid var(--gold-500);
    color: #E9E3D2;
    font-size: .85em;
    text-align: center;
}

footer a { color: var(--gold-300); }

/* سطر الفوتر: اسم الموقع + خط ذهبي رقيق فوقه */
.footer-title {
    display: inline-block;
    padding-top: 4px;
    font-family: 'hafs', 'Amiri', serif;
    font-size: 1.35em;
    color: #F5EDD8;
    letter-spacing: .01em;
    border-top: 1px solid rgba(225, 186, 81, .45);
}

/* =========================================================
   إطار الآيات (بالأخضر المصحفي)
   ========================================================= */

.page-container.decorated-border {
    position: relative;
    margin: 4px auto 0;
    padding: 26px 20px;
    box-sizing: border-box;
    z-index: 1;
    background-color: var(--paper);
    background-image: radial-gradient(120% 90% at 70% 0%, #FFFDF8 0%, #FAF4E7 100%);

    border: 18px solid var(--green-800);
    border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78' viewBox='0 0 78 78'%3E%3Cdefs%3E%3Cg id='st' fill='none' stroke='%23E1BA51' stroke-width='1.3'%3E%3Crect x='5.2' y='5.2' width='15.6' height='15.6'/%3E%3Cpolygon points='13,2 24,13 13,24 2,13'/%3E%3C/g%3E%3C/defs%3E%3Cpath d='M0 0h78v26H0zM0 52h78v26H0zM0 26h26v26H0zM52 26h26v26H52z' fill='%23103C2C'/%3E%3Cg%3E%3Cuse href='%23st' x='0' y='0'/%3E%3Cuse href='%23st' x='26' y='0'/%3E%3Cuse href='%23st' x='52' y='0'/%3E%3Cuse href='%23st' x='0' y='26'/%3E%3Cuse href='%23st' x='52' y='26'/%3E%3Cuse href='%23st' x='0' y='52'/%3E%3Cuse href='%23st' x='26' y='52'/%3E%3Cuse href='%23st' x='52' y='52'/%3E%3C/g%3E%3Cg fill='%23E1BA51'%3E%3Ccircle cx='13' cy='13' r='1.6'/%3E%3Ccircle cx='39' cy='13' r='1.6'/%3E%3Ccircle cx='65' cy='13' r='1.6'/%3E%3Ccircle cx='13' cy='39' r='1.6'/%3E%3Ccircle cx='65' cy='39' r='1.6'/%3E%3Ccircle cx='13' cy='65' r='1.6'/%3E%3Ccircle cx='39' cy='65' r='1.6'/%3E%3Ccircle cx='65' cy='65' r='1.6'/%3E%3C/g%3E%3Cg stroke='%23C59B27' stroke-width='2' fill='none'%3E%3Cpath d='M26 1h26M26 25h26'/%3E%3Cpath d='M26 53h26M26 77h26'/%3E%3Cpath d='M1 26v26M25 26v26'/%3E%3Cpath d='M53 26v26M77 26v26'/%3E%3Cpath d='M0 1h26M1 0v26'/%3E%3Cpath d='M52 1h26M77 0v26'/%3E%3Cpath d='M0 77h26M1 52v26'/%3E%3Cpath d='M52 77h26M77 52v26'/%3E%3C/g%3E%3C/svg%3E");
    border-image-slice: 26;
    border-image-repeat: round;

    box-shadow:
        0 0 0 2px var(--gold-500),
        0 12px 30px -16px rgba(12, 46, 33, .32);
}

.page-container.decorated-border::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid var(--gold-500);
    pointer-events: none;
    z-index: 2;
}

.page-container.decorated-border::after {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(16, 60, 44, .32);
    pointer-events: none;
    z-index: 2;
}

/* ===== اسم السورة: سطر واحد + فاصل مذهّب متلاشٍ ===== */
.surah-title-container {
    position: relative;
    text-align: center;
    background: none;
    border: 0;
    box-shadow: none;
    margin: 4px auto 22px;
    padding: 0 0 14px;
}

.surah-title-container::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(62%, 320px);
    height: 3px;
    background:
        linear-gradient(90deg, transparent, var(--gold-500) 35%, var(--gold-500) 65%, transparent) center top/100% 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(16, 60, 44, .45) 45%, rgba(16, 60, 44, .45) 55%, transparent) center bottom/100% 1px no-repeat;
}

.surah-title {
    font-family: 'hafs', 'Amiri', serif;
    color: var(--green-800);
    font-size: 1.3em;
    line-height: 1.5;
    white-space: nowrap;
    padding: 0;
    margin: 0;
}

/* ===== شريط فاصل بين سورتين في نفس الصفحة ===== */
.page-container.decorated-border .surah-title-container:not(:first-child) {
    margin: 34px 0 26px;
    padding: 11px 0;
    background-color: var(--green-800);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23E1BA51' stroke-width='1.3'%3E%3Crect x='5.2' y='5.2' width='15.6' height='15.6'/%3E%3Cpolygon points='13,2 24,13 13,24 2,13'/%3E%3C/g%3E%3Ccircle cx='13' cy='13' r='1.6' fill='%23E1BA51'/%3E%3C/svg%3E");
    background-repeat: round no-repeat;
    background-position: center;
    background-size: 26px 26px;
    border-top: 2px solid var(--gold-500);
    border-bottom: 2px solid var(--gold-500);
}

.page-container.decorated-border .surah-title-container:not(:first-child)::after {
    display: none;
}

.page-container.decorated-border .surah-title-container:not(:first-child) .surah-title {
    display: inline-block;
    padding: 5px 26px;
    background: linear-gradient(#FFFCF3, #F4EAD3);
    border: 1px solid var(--gold-500);
    box-shadow: 0 0 0 4px var(--green-800);
    color: var(--green-800);
    font-size: 1.2em;
}

/* ===== البسملة ===== */
.basmalah {
    font-family: 'hafs', 'Amiri', serif;
    display: block;
    text-align: center !important;
    font-size: 1.35em;
    color: var(--green-800);
    margin: 15px 0;
}

/* ===== الآيات ===== */
.ayah-container {
    position: relative;
    z-index: 3;
    padding: 6px 2px;
    line-height: 2.35;
    text-align: justify;
    text-align-last: center;
}

.ayah,
.ayah-container {
    font-family: 'hafs', 'Amiri', serif;
}

.ayah {
    font-size: 1.55em;
    font-weight: 600;
}

.ayah .ayah-number {
    display: inline-block;
    margin: 0 4px;
    color: var(--gold-600) !important;
    font-size: 1em;
    padding: 3px 5px;
    font-variant-numeric: eastern-arabic !important;
}

/* ===== تمييز الآية المحددة (مع رقمها) ===== */
.highlight,
.highlighted-ayah {
    background-color: #E7EFEA;
    box-shadow: 0 0 0 1px #C6D8CD;
    border-radius: 4px;
    padding: 3px 5px;
    color: #1C2A22;
}

.ayah:has(.highlight) .highlight,
.ayah:has(.highlighted-ayah) .highlighted-ayah {
    box-shadow: none;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    padding-inline-end: 2px;
    margin-inline-start: 3px;
}

.ayah:has(.highlight) .ayah-number,
.ayah:has(.highlighted-ayah) .ayah-number,
.highlight .ayah-number,
.highlighted-ayah .ayah-number,
.ayah.highlight .ayah-number,
.ayah.highlighted-ayah .ayah-number {
    background-color: #E7EFEA;
    color: var(--green-700) !important;
    display: inline;
    line-height: inherit;
    vertical-align: baseline;
    padding: 3px 5px;
    margin-inline-start: 0;
    margin-inline-end: 8px;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
}

/* ===== ترويسة الصفحة: الجزء / التنقل / اسم السورة ===== */
.surah-header {
    position: static;
    top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 2px 6px 0;
    color: var(--green-800);
}

.surah-header .juz-number,
.surah-header .surah-name-header {
    white-space: nowrap;
    font-size: 1em;
}

.surah-header .surah-name-header::before { content: 'سورة '; }

.page-navigation {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
}

.page-navigation .current-page {
    min-width: 26px;
    text-align: center;
    color: var(--green-800);
    font-weight: 700;
}

.page-navigation a {
    color: var(--gold-500);
    direction: ltr;
    unicode-bidi: isolate;
    font-size: 1.15em;
    padding: 0 6px;
    line-height: 1;
    text-decoration: none;
}

.page-navigation a:hover { color: var(--green-700); }

.page-navigation a.prev-page::before { content: '▶'; }
.page-navigation a.next-page::before { content: '◀'; }

/* مؤشر أسفل البرواز — قريب منه */
.surah-footer { margin: 0; padding: 0; }

.bottom-navigation {
    position: static;
    text-align: center;
    background: transparent;
    margin: 0;
    padding: 6px 0 0;
}

/* ===================== شاشات كبيرة ===================== */
@media (min-width: 1400px) {
    .page-container.decorated-border {
        border-width: 22px;
        padding: 32px 26px;
    }
}

/* ===================== شاشات متوسطة ===================== */
@media (max-width: 1100px) {
    .main-content { gap: 22px; padding: 20px 16px 6px; }
    .left-section { width: 32%; }
    .right-section { width: 68%; }

    .page-container.decorated-border {
        border-width: 16px;
        padding: 22px 16px;
    }
}

/* ===================== الجوال ===================== */
@media (max-width: 768px) {
    .wrapper { width: 100%; box-shadow: none; }

    header { padding: 14px 0 0; }

    .header-content {
        gap: 10px;
        padding: 0 12px 12px;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .ornament { width: 96px; height: 56px; }

    .header-content::before {
        order: 2;
        width: 58px;
        height: 58px;
    }

    .header-content::after {
        order: 3;
        font-size: .82em;
        white-space: normal;
        max-width: 96px;
        line-height: 1.55;
    }

    /* زر القائمة في نفس سطر الروابط */
    nav {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0;
    }

    .nav-section { position: static; bottom: auto; padding: 0 8px; font-size: 12px;}

    nav ul {
        justify-content: space-around;
        flex-wrap: wrap;
    }

    nav ul li a { padding: 11px 10px; font-size: .88em; }

    .toggle-button { display: block; }

    .main-content {
        flex-direction: column;
        gap: 16px;
        padding: 14px 10px 4px;
                max-width: 1140px;
                margin: 0 auto;
    }

    .left-section,
    .right-section { width: 100%; }

    .page-container.decorated-border {
        margin: 3px auto 0;
        border-width: 13px;
        padding: 18px 12px;
        box-shadow: 0 0 0 2px var(--gold-500);
    }

    .page-container.decorated-border::before { inset: 5px; }
    .page-container.decorated-border::after  { inset: 8px; }

    .ayah-container { line-height: 2.4; }
    .ayah { font-size: 1.2em; }

    .surah-title-container { padding-bottom: 11px; margin-bottom: 16px; }

    .surah-header {
        padding: 2px 4px 0;
        font-size: .8em;
        gap: 6px;
    }

    .page-navigation { font-size: 1em; }
    .page-navigation a { padding: 0 9px; }

    .bottom-navigation { padding: 5px 0 0; }

    .footer-title { font-size: 1.15em; }

    footer { margin-top: 18px; padding: 14px; }
}