/* =========================================================
   Mishkat UI - Final Clean CSS
   المصحف الإلكتروني الوقفي - جمعية مشكاة
   ---------------------------------------------------------
   IMPORTANT:
   - Replace old mishkat-ui.css with this file.
   - Dark mode keeps the SAME sizes/layout as light mode.
   - Dark mode changes COLORS ONLY.
   ========================================================= */

/* =========================
   01) Variables
========================= */
:root {
    --mishkat-blue: #0E6B82;
    --mishkat-blue-dark: #07566A;
    --mishkat-blue-soft: #EAF5F8;
    --mishkat-cyan: #6FD3E4;
    --mishkat-gold: #B89A55;
    --mishkat-gold-light: #D9B766;
    --mishkat-bg-gradient: linear-gradient(180deg, #EEF5F7 0%, #F8FAFB 100%);
    --mishkat-dark-bg-gradient: linear-gradient(180deg, #153744 0%, #102A33 100%);
    --mishkat-card: #FFFFFF;
    --mishkat-dark-card: #142833;
    --mishkat-text: #263238;
    --mishkat-muted: #6C7B86;
    --mishkat-dark-text: #E7ECEF;
    --mishkat-dark-muted: #C8D3DA;
    --mishkat-border: rgba(14, 107, 130, .12);
    --mishkat-gold-border: rgba(184, 154, 85, .24);
    --mishkat-radius-sm: 14px;
    --mishkat-radius-md: 18px;
    --mishkat-radius-lg: 22px;
    --mishkat-radius-xl: 30px;
    --mishkat-shadow-sm: 0 6px 18px rgba(14, 107, 130, .08);
    --mishkat-shadow-md: 0 12px 28px rgba(14, 107, 130, .10);
    --mishkat-shadow-dark: 0 14px 30px rgba(0, 0, 0, .24);
    --mishkat-bottom-safe: 130px;
}

/* =========================
   02) Base
========================= */
html,
body,
.app,
.section-content,
.mishkat-home-v2,
.mishkat-home-v2 .container,
.mishkat-home-bg {
    background: var(--mishkat-bg-gradient) !important;
}

body {
    color: var(--mishkat-text) !important;
    padding-bottom: var(--mishkat-bottom-safe) !important;
}

img { max-width: 100% !important; }

a, .text-primary { color: var(--mishkat-blue) !important; }

.section-content,
.mishkat-home-v2,
.mishkat-home-v2 .container,
.mishkat-home,
.mishkat-home .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.quran-page,
.surah-page,
.single-surah,
.section-content {
    padding-bottom: var(--mishkat-bottom-safe) !important;
}

/* =========================
   03) Header
========================= */
.main-header,
.mishkat-app-header {
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid rgba(184, 154, 85, .22) !important;
    box-shadow: 0 6px 18px rgba(14, 107, 130, .06) !important;
}

.mishkat-v2-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(184, 154, 85, .28) !important;
    box-shadow: 0 6px 18px rgba(14, 107, 130, .06) !important;
    padding: 8px 10px !important;
}

.mishkat-v2-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    direction: rtl !important;
}

.mishkat-v2-logo {
    flex: 0 0 52px !important;
}

.mishkat-v2-logo img {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .14) !important;
}

.mishkat-v2-title {
    flex: 1 !important;
    min-width: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(184, 154, 85, .35) !important;
    border-radius: var(--mishkat-radius-md) !important;
    padding: 5px 8px !important;
    text-align: center !important;
}

.mishkat-v2-title h1 {
    margin: 0 !important;
    color: var(--mishkat-blue) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

.mishkat-v2-title span {
    display: block !important;
    margin-top: 2px !important;
    color: #8D7A4A !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

.mishkat-v2-mode {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #177D97, #0F6C84) !important;
    color: #E0C16A !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
    padding: 0 !important;
}

/* =========================
   04) Home
========================= */
.mishkat-home-v2 { padding-top: 12px !important; }

.home-subtitle {
    display: block !important;
    max-width: 100% !important;
    margin: 16px auto 28px !important;
    color: #8D7A4A !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

.mishkat-home-intro {
    text-align: center !important;
    padding: 10px 20px 8px !important;
    margin-bottom: -8px !important;
}

.mishkat-home-intro h2 {
    color: var(--mishkat-blue) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    margin: 0 0 8px !important;
    line-height: 1.45 !important;
    white-space: nowrap !important;
}

.mishkat-home-intro p {
    width: 260px !important;
    margin: 0 auto !important;
    color: #8D7A4A !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

/* Home Stats */
.mishkat-stats-card {
    position: relative !important;
    z-index: 1 !important;
    margin: 22px 0 28px !important;
    padding: 18px !important;
    border-radius: 28px !important;
    background: radial-gradient(circle at top left, rgba(184,154,85,.16), transparent 34%), linear-gradient(180deg, #ffffff 0%, #F7FBFC 100%) !important;
    border: 1px solid rgba(14,107,130,.10) !important;
    box-shadow: 0 14px 34px rgba(14,107,130,.10) !important;
}

.mishkat-stats-card .stats-title {
    text-align: center !important;
    margin-bottom: 16px !important;
}

.mishkat-stats-card .stats-title span {
    display: inline-flex !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    color: var(--mishkat-gold) !important;
    background: rgba(184,154,85,.08) !important;
    border: 1px solid rgba(184,154,85,.22) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    margin-bottom: 8px !important;
}

.mishkat-stats-card .stats-title strong {
    display: block !important;
    color: var(--mishkat-blue) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.mishkat-stats-card .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

.mishkat-stats-card .stats-item {
    min-height: 86px !important;
    padding: 10px 6px !important;
    border-radius: 22px !important;
    background: rgba(14,107,130,.06) !important;
    border: 1px solid rgba(14,107,130,.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.mishkat-stats-card .stats-item strong {
    display: block !important;
    color: var(--mishkat-blue) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.mishkat-stats-card .stats-item span {
    display: block !important;
    margin-top: 7px !important;
    color: var(--mishkat-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

/* =========================
   05) Surah list
========================= */
.inout-icon .form-control,
.reader-search-box,
.surah-search-box,
.search-box,
input[type="search"] {
    border-radius: 16px !important;
    border: 1px solid rgba(14,107,130,.10) !important;
    background: #FFFFFF !important;
    color: var(--mishkat-text) !important;
}

.surah-premium-card {
    min-height: 86px !important;
    padding: 12px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
    gap: 12px !important;
    display: flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(14,107,130,.10) !important;
    box-shadow: var(--mishkat-shadow-sm) !important;
}

.surah-premium-card .widget__item-icon {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 15px !important;
    background: var(--mishkat-blue) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.surah-premium-card .widget__item-icon img { width: 25px !important; }

.surah-premium-card .widget__item-title {
    color: var(--mishkat-text) !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    margin: 0 !important;
}

.surah-premium-card .surah-info {
    color: var(--mishkat-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    margin-top: 4px !important;
}

.surah-premium-card .surah-number {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 50% !important;
    background: rgba(184,154,85,.14) !important;
    color: var(--mishkat-gold) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.continue-reading-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 0 0 18px !important;
    padding: 18px !important;
    border-radius: 24px !important;
    background: radial-gradient(circle at top left, rgba(14,126,153,.12), transparent 36%), linear-gradient(145deg, #ffffff, #F7FBFC) !important;
    border: 1px solid rgba(184,154,85,.18) !important;
    box-shadow: 0 18px 38px rgba(14,107,130,.10) !important;
}

.continue-reading-card span { color: var(--mishkat-gold) !important; font-weight: 800 !important; font-size: 13px !important; }
.continue-reading-card strong { display: block !important; color: var(--mishkat-blue) !important; font-size: 22px !important; font-weight: 900 !important; margin-top: 4px !important; }
.continue-reading-card p { color: var(--mishkat-muted) !important; margin: 4px 0 0 !important; font-weight: 700 !important; }
.continue-reading-card a { background: var(--mishkat-blue) !important; color: #FFFFFF !important; padding: 12px 18px !important; border-radius: 16px !important; font-weight: 900 !important; }

/* =========================
   06) Reader
========================= */
.mishkat-reader-v2 {
    min-height: calc(100vh - 74px) !important;
    padding: 0 8px 100px !important;
    background: var(--mishkat-bg-gradient) !important;
}

.reader-v2-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    height: 52px !important;
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 6px !important;
    background: rgba(238,245,247,.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.reader-v2-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    background: rgba(14,107,130,.08) !important;
    color: var(--mishkat-gold) !important;
    border: 1px solid rgba(184,154,85,.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

.reader-v2-title { text-align: center !important; line-height: 1.35 !important; }
.reader-v2-title strong { display: block !important; color: var(--mishkat-blue) !important; font-size: 34px !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: -1px !important; }
.reader-v2-title span,
.reader-v2-status { display: none !important; }
.reader-v2-viewport { width: 100% !important; max-width: 100% !important; margin: 8px auto 0 !important; }
.reader-v2-page-img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; }

.reader-next-surah-card {
    display: none !important;
    margin: 18px 14px 110px !important;
    padding: 18px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(184,154,85,.25) !important;
    box-shadow: 0 16px 35px rgba(0,0,0,.08) !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}
.reader-next-surah-card.is-visible { display: flex !important; }
.reader-next-surah-card span { display: block !important; color: var(--mishkat-gold) !important; font-size: 12px !important; font-weight: 800 !important; margin-bottom: 4px !important; }
.reader-next-surah-card strong { display: block !important; color: var(--mishkat-blue) !important; font-size: 22px !important; font-weight: 900 !important; line-height: 1.3 !important; white-space: nowrap !important; }
.reader-next-surah-card .reader-next-btn { min-width: 124px !important; height: 46px !important; border: 0 !important; border-radius: 18px !important; background: linear-gradient(180deg, var(--mishkat-blue), var(--mishkat-blue-dark)) !important; color: #FFFFFF !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-size: 13px !important; font-weight: 900 !important; }

.reader-progress-card {
    margin: 0 0 22px !important;
    padding: 22px !important;
    border-radius: 30px !important;
    background: radial-gradient(circle at top left, rgba(14,126,153,.18), transparent 36%), linear-gradient(145deg, #ffffff, #F7FBFC) !important;
    border: 1px solid rgba(184,154,85,.18) !important;
    box-shadow: 0 18px 38px rgba(14,107,130,.10) !important;
}
.reader-progress-card .progress-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 16px !important; }
.reader-progress-card .progress-head span { color: var(--mishkat-gold) !important; font-size: 15px !important; font-weight: 900 !important; }
.reader-progress-card .progress-head strong { color: var(--mishkat-blue) !important; font-size: 22px !important; font-weight: 900 !important; }
.reader-progress-card .progress-bar-wrap { height: 13px !important; border-radius: 999px !important; background: rgba(14,107,130,.10) !important; overflow: hidden !important; margin: 14px 0 18px !important; }
.reader-progress-card .progress-bar-fill { height: 100% !important; border-radius: 999px !important; background: linear-gradient(90deg, var(--mishkat-blue), var(--mishkat-gold)) !important; transition: width .7s ease !important; }
.reader-progress-card .progress-details { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
.reader-progress-card .progress-details div { text-align: center !important; padding: 14px 6px !important; border-radius: 18px !important; background: rgba(14,107,130,.07) !important; }
.reader-progress-card .progress-details strong { display: block !important; color: var(--mishkat-blue) !important; font-size: 18px !important; font-weight: 900 !important; line-height: 1.2 !important; }
.reader-progress-card .progress-details span { display: block !important; margin-top: 6px !important; color: var(--mishkat-muted) !important; font-size: 10px !important; font-weight: 800 !important; white-space: nowrap !important; }

/* =========================
   07) Waqf page
========================= */
.waqf-page { padding: 22px 0 145px !important; }
.waqf-page .container { padding-bottom: 145px !important; }
.waqf-page .waqf-hero,
.waqf-page .waqf-dua-card,
.waqf-page .waqf-card,
.waqf-page .waqf-quote {
    margin: 0 0 18px !important;
    padding: 24px 20px !important;
    border-radius: 30px !important;
    text-align: center !important;
    background: radial-gradient(circle at top left, rgba(14,126,153,.10), transparent 38%), linear-gradient(145deg, #ffffff, #F7FBFC) !important;
    border: 1px solid rgba(184,154,85,.20) !important;
    box-shadow: 0 16px 34px rgba(14,107,130,.10) !important;
    overflow: hidden !important;
}
.waqf-page .waqf-logo img { width: 132px !important; max-width: 132px !important; height: auto !important; margin: 0 auto 18px !important; }
.waqf-page .waqf-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 7px 20px !important; border-radius: 999px !important; color: var(--mishkat-gold) !important; background: rgba(184,154,85,.08) !important; border: 1px solid rgba(184,154,85,.28) !important; font-size: 13px !important; font-weight: 900 !important; line-height: 1.3 !important; margin-bottom: 18px !important; }
.waqf-page .waqf-hero h1 { margin: 0 0 16px !important; color: var(--mishkat-blue) !important; font-size: 23px !important; line-height: 1.35 !important; font-weight: 900 !important; text-align: center !important; white-space: nowrap !important; }
.waqf-page .waqf-dua-card span,
.waqf-page .waqf-card span,
.waqf-page .waqf-quote strong { display: block !important; margin: 0 0 16px !important; color: var(--mishkat-gold) !important; font-size: 21px !important; line-height: 1.45 !important; font-weight: 900 !important; text-align: center !important; }
.waqf-page .waqf-hero p,
.waqf-page .waqf-dua-card p,
.waqf-page .waqf-quote p { margin: 0 auto !important; max-width: 92% !important; color: #263740 !important; font-size: 15px !important; line-height: 2.05 !important; font-weight: 700 !important; text-align: center !important; letter-spacing: 0 !important; word-spacing: 0 !important; }
.waqf-page .waqf-dua-card strong { display: inline !important; color: var(--mishkat-blue) !important; font-size: inherit !important; line-height: inherit !important; font-weight: 900 !important; }
.waqf-page .waqf-card ul { list-style: none !important; padding: 0 !important; margin: 0 auto !important; max-width: 92% !important; }
.waqf-page .waqf-card li { margin: 0 !important; padding: 11px 0 !important; color: #263740 !important; font-size: 15px !important; line-height: 1.85 !important; font-weight: 700 !important; text-align: center !important; border-bottom: 1px solid rgba(184,154,85,.14) !important; }
.waqf-page .waqf-card li:last-child { border-bottom: none !important; }
.waqf-page .waqf-features { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 4px !important; }
.waqf-page .waqf-features div { min-height: 54px !important; padding: 12px 8px !important; border-radius: 18px !important; color: var(--mishkat-blue) !important; background: rgba(14,107,130,.06) !important; border: 1px solid rgba(184,154,85,.14) !important; font-size: 13px !important; line-height: 1.55 !important; font-weight: 900 !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.waqf-page .waqf-btn.primary { min-height: 58px !important; border-radius: 18px !important; background: var(--mishkat-blue) !important; color: #FFFFFF !important; font-size: 18px !important; font-weight: 900 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.waqf-page .waqf-support-note { margin: 14px 0 0 !important; padding: 14px 16px !important; border-radius: 20px !important; color: #55707A !important; background: rgba(14,107,130,.06) !important; border: 1px solid rgba(184,154,85,.16) !important; font-size: 13px !important; line-height: 1.85 !important; font-weight: 800 !important; text-align: center !important; }

/* =========================
   08) Association page
========================= */
.mishkat-association-page { min-height: calc(100vh - 90px) !important; padding: 22px 0 140px !important; }
.mishkat-association-page .container { padding-bottom: 130px !important; }
.association-hero,
.association-info-card,
.association-quote {
    margin-bottom: 18px !important;
    padding: 22px 18px !important;
    border-radius: 28px !important;
    background: radial-gradient(circle at top left, rgba(14,126,153,.10), transparent 36%), linear-gradient(145deg,#ffffff,#F7FBFC) !important;
    border: 1px solid rgba(184,154,85,.16) !important;
    box-shadow: 0 18px 38px rgba(14,107,130,.10) !important;
    text-align: center !important;
}
.association-logo img { width: 96px !important; height: 96px !important; object-fit: contain !important; margin-bottom: 14px !important; }
.association-badge { display: inline-flex !important; padding: 8px 18px !important; border-radius: 999px !important; color: var(--mishkat-gold) !important; border: 1px solid rgba(184,154,85,.28) !important; background: rgba(184,154,85,.08) !important; font-weight: 900 !important; margin-bottom: 14px !important; }
.association-hero h1 { color: var(--mishkat-blue) !important; font-size: 25px !important; font-weight: 900 !important; line-height: 1.5 !important; margin-bottom: 12px !important; }
.association-hero p,
.association-info-card p,
.association-quote p { color: #24333B !important; font-size: 16px !important; font-weight: 700 !important; line-height: 2 !important; margin: 0 !important; text-align: center !important; }
.association-stats,
.association-values { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; margin-bottom: 18px !important; }
.association-stats div,
.association-values div { padding: 16px 10px !important; border-radius: 20px !important; text-align: center !important; background: rgba(14,107,130,.06) !important; border: 1px solid rgba(184,154,85,.12) !important; }
.association-stats strong { display: block !important; color: var(--mishkat-blue) !important; font-size: 24px !important; font-weight: 900 !important; }
.association-stats span { display: block !important; color: var(--mishkat-muted) !important; font-size: 13px !important; font-weight: 800 !important; margin-top: 4px !important; }
.association-info-card span,
.association-quote strong { display: block !important; color: var(--mishkat-gold) !important; font-size: 19px !important; font-weight: 900 !important; margin-bottom: 10px !important; }
.association-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 18px !important; }
.association-btn { min-height: 58px !important; border-radius: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; font-weight: 900 !important; }
.association-btn.primary { background: var(--mishkat-blue) !important; color: #FFFFFF !important; }
.association-btn.light { background: #AEECCF !important; color: var(--mishkat-blue) !important; }

/* =========================
   09) Bottom navigation
========================= */
.main-nav {
    height: 74px !important;
    width: calc(100% - 28px) !important;
    right: 14px !important;
    bottom: 14px !important;
    padding: 0 10px !important;
    border-radius: var(--mishkat-radius-xl) !important;
    background: #FCFCFA !important;
    border: 1px solid rgba(14,107,130,.08) !important;
    box-shadow: 0 8px 30px rgba(14,107,130,.12) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}
.menu { width: 100% !important; justify-content: space-evenly !important; }
.menu li { flex: 1 !important; text-align: center !important; }
.menu li a { min-width: 54px !important; min-height: 52px !important; padding: 4px 6px !important; border-radius: var(--mishkat-radius-md) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; }
.menu li a .icon svg { width: 22px !important; height: 22px !important; }
.menu li a .icon svg path { fill: var(--mishkat-muted) !important; }
.menu li a .text { color: #666666 !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; margin-top: 3px !important; }
.menu li a.active { background: linear-gradient(180deg, var(--mishkat-blue), var(--mishkat-blue-dark)) !important; width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; padding: 4px !important; border-radius: var(--mishkat-radius-md) !important; box-shadow: 0 8px 18px rgba(14,107,130,.25) !important; }
.menu li a.active .text,
.menu li a:hover .text { color: #FFFFFF !important; }
.menu li a.active .icon svg path,
.menu li a:hover .icon svg path { fill: #FFFFFF !important; }

/* =========================
   10) Dark mode - COLORS ONLY
========================= */
body.dark-mode,
body.dark-mode .app,
body.dark-mode .section-content,
body.dark-mode .mishkat-home-v2,
body.dark-mode .mishkat-home-v2 .container,
body.dark-mode .mishkat-home-bg,
body.home-page.dark-mode,
body.home-page.dark-mode .app,
body.home-page.dark-mode .section-content,
body.home-page.dark-mode .mishkat-home-v2,
body.home-page.dark-mode .mishkat-home-v2 .container {
    background: var(--mishkat-dark-bg-gradient) !important;
    color: var(--mishkat-dark-text) !important;
}

body.dark-mode .mishkat-v2-header,
body.dark-mode .main-header,
body.dark-mode .mishkat-app-header {
    background: #111C25 !important;
    border-color: rgba(244,198,106,.18) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.28) !important;
}
body.dark-mode .mishkat-v2-title { background: #182530 !important; border-color: rgba(244,198,106,.30) !important; }
body.dark-mode .mishkat-v2-title h1 { color: #EAF7FA !important; }
body.dark-mode .mishkat-v2-title span { color: var(--mishkat-gold-light) !important; }
body.dark-mode .mishkat-v2-mode { background: linear-gradient(145deg,#1D3442,#13212B) !important; color: #E0C16A !important; }

/* Home dark colors only */
body.dark-mode .mishkat-stats-card { background: radial-gradient(circle at top left, rgba(217,183,102,.14), transparent 34%), linear-gradient(180deg, #182530 0%, #111C25 100%) !important; border-color: rgba(217,183,102,.16) !important; box-shadow: 0 14px 34px rgba(0,0,0,.24) !important; }
body.dark-mode .mishkat-stats-card .stats-title strong { color: #EAF7FA !important; }
body.dark-mode .mishkat-stats-card .stats-item { background: rgba(255,255,255,.045) !important; border-color: rgba(255,255,255,.07) !important; }
body.dark-mode .mishkat-stats-card .stats-item strong { color: #6FD3E4 !important; }
body.dark-mode .mishkat-stats-card .stats-item span { color: #C8D3DA !important; }

body.dark-mode .mishkat-home-v2 .widget__item-1,
body.home-page.dark-mode .widget__item-1,
body.dark-mode .mishkat-home-v2 .widget__item-2,
body.home-page.dark-mode .widget__item-2,
body.dark-mode .mishkat-home-v2 .widget__item-3,
body.home-page.dark-mode .widget__item-3 { background: #142833 !important; border: 1px solid rgba(184,154,85,.18) !important; box-shadow: 0 10px 24px rgba(0,0,0,.16) !important; }
body.dark-mode .mishkat-home-v2 .widget__item-1 .widget__item-title,
body.home-page.dark-mode .widget__item-1 .widget__item-title,
body.dark-mode .mishkat-home-v2 .widget__item-2 .widget__item-title,
body.home-page.dark-mode .widget__item-2 .widget__item-title,
body.dark-mode .mishkat-home-v2 .widget__item-3 .widget__item-title,
body.home-page.dark-mode .widget__item-3 .widget__item-title { color: #6FD3E4 !important; }
body.dark-mode .mishkat-home-v2 .widget__item-1 .widget__item-content span,
body.home-page.dark-mode .widget__item-1 .widget__item-content span,
body.dark-mode .mishkat-home-v2 .widget__item-2 .widget__item-content span,
body.home-page.dark-mode .widget__item-2 .widget__item-content span,
body.dark-mode .mishkat-home-v2 .widget__item-3 .widget__item-content span,
body.home-page.dark-mode .widget__item-3 .widget__item-content span { color: #D9B766 !important; }
body.dark-mode .mishkat-home-v2 .widget__item-1 .widget__item-content p,
body.home-page.dark-mode .widget__item-1 .widget__item-content p,
body.dark-mode .mishkat-home-v2 .widget__item-2 .widget__item-content p,
body.home-page.dark-mode .widget__item-2 .widget__item-content p,
body.dark-mode .mishkat-home-v2 .widget__item-3 .widget__item-content p,
body.home-page.dark-mode .widget__item-3 .widget__item-content p { color: #DDECEF !important; }
body.dark-mode .mishkat-home-v2 .service-arrow,
body.home-page.dark-mode .service-arrow { background: #264753 !important; border-color: rgba(255,255,255,.08) !important; color: #D8B96A !important; }
body.dark-mode .mishkat-home-v2 .widget__item-1 img,
body.home-page.dark-mode .widget__item-1 img,
body.dark-mode .mishkat-home-v2 .widget__item-2 img,
body.home-page.dark-mode .widget__item-2 img,
body.dark-mode .mishkat-home-v2 .widget__item-3 img,
body.home-page.dark-mode .widget__item-3 img { filter: brightness(.72) saturate(.9) contrast(.95) !important; }

/* Surah dark */
body.dark-mode .inout-icon .form-control,
body.dark-mode .reader-search-box,
body.dark-mode .surah-search-box,
body.dark-mode .search-box,
body.dark-mode input[type="search"] { background: #16252E !important; border-color: rgba(184,154,85,.22) !important; color: #FFFFFF !important; }
body.dark-mode input[type="search"]::placeholder { color: #9FAFBB !important; }
body.dark-mode .surah-premium-card { background: linear-gradient(145deg,#162B36,#12232C) !important; border-color: rgba(184,154,85,.18) !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; }
body.dark-mode .surah-premium-card .widget__item-title { color: #F7F8FA !important; }
body.dark-mode .surah-premium-card .surah-info { color: #AFC0C9 !important; }
body.dark-mode .surah-premium-card .surah-number { background: rgba(217,183,102,.14) !important; color: #D9B766 !important; }

body.dark-mode .continue-reading-card { background: radial-gradient(circle at top left, rgba(14,126,153,.22), transparent 38%), linear-gradient(145deg, #162B36, #10212B) !important; border-color: rgba(184,154,85,.24) !important; box-shadow: 0 18px 38px rgba(0,0,0,.26) !important; }
body.dark-mode .continue-reading-card strong { color: #F7F8FA !important; }
body.dark-mode .continue-reading-card p { color: #AFC0C9 !important; }

/* Reader dark */
body.dark-mode .mishkat-reader-v2 { background: var(--mishkat-dark-bg-gradient) !important; }
body.dark-mode .reader-v2-header { background: rgba(21,55,68,.92) !important; }
body.dark-mode .reader-v2-icon { background: rgba(17,28,37,.50) !important; color: #D9B766 !important; border-color: rgba(217,183,102,.24) !important; }
body.dark-mode .reader-v2-title strong { color: #EAF7FA !important; }
body.dark-mode .reader-v2-page-img { filter: brightness(.88) contrast(.96) !important; }
body.dark-mode .reader-next-surah-card { background: rgba(17,28,37,.92) !important; border-color: rgba(217,183,102,.20) !important; }
body.dark-mode .reader-next-surah-card strong { color: #EAF7FA !important; }
body.dark-mode .reader-next-surah-card .reader-next-btn { background: linear-gradient(180deg, #D9B766, #B89A55) !important; color: #102A33 !important; }
body.dark-mode .reader-progress-card { background: radial-gradient(circle at top left, rgba(14,126,153,.22), transparent 38%), linear-gradient(145deg, #162B36, #10212B) !important; border-color: rgba(184,154,85,.24) !important; box-shadow: 0 18px 38px rgba(0,0,0,.26) !important; }
body.dark-mode .reader-progress-card .progress-head strong,
body.dark-mode .reader-progress-card .progress-details strong { color: #6FD3E4 !important; }
body.dark-mode .reader-progress-card .progress-bar-wrap { background: rgba(255,255,255,.07) !important; }
body.dark-mode .reader-progress-card .progress-details div { background: rgba(255,255,255,.045) !important; }
body.dark-mode .reader-progress-card .progress-details span { color: #AFC0C9 !important; }

/* Waqf dark */
body.dark-mode .waqf-page .waqf-hero,
body.dark-mode .waqf-page .waqf-dua-card,
body.dark-mode .waqf-page .waqf-card,
body.dark-mode .waqf-page .waqf-quote { background: radial-gradient(circle at top left, rgba(14,126,153,.14), transparent 34%), linear-gradient(145deg,#142934,#10212B) !important; border-color: rgba(184,154,85,.22) !important; box-shadow: 0 14px 30px rgba(0,0,0,.24) !important; }
body.dark-mode .waqf-page .waqf-hero h1 { color: #F4FAFC !important; }
body.dark-mode .waqf-page .waqf-hero p,
body.dark-mode .waqf-page .waqf-dua-card p,
body.dark-mode .waqf-page .waqf-card li,
body.dark-mode .waqf-page .waqf-quote p { color: #DDECEF !important; }
body.dark-mode .waqf-page .waqf-dua-card strong { color: #6FD3E4 !important; }
body.dark-mode .waqf-page .waqf-features div { color: #6FD3E4 !important; background: rgba(255,255,255,.045) !important; border-color: rgba(184,154,85,.16) !important; }
body.dark-mode .waqf-page .waqf-support-note { color: #DDECEF !important; background: radial-gradient(circle at top left, rgba(217,183,102,.12), transparent 36%), rgba(255,255,255,.045) !important; border-color: rgba(184,154,85,.20) !important; box-shadow: 0 10px 22px rgba(0,0,0,.18) !important; }

/* Association dark */
body.dark-mode .association-hero,
body.dark-mode .association-info-card,
body.dark-mode .association-quote { background: radial-gradient(circle at top left, rgba(14,126,153,.18), transparent 36%), linear-gradient(145deg,#162B36,#10212B) !important; border-color: rgba(184,154,85,.22) !important; box-shadow: 0 18px 38px rgba(0,0,0,.25) !important; }
body.dark-mode .association-hero h1,
body.dark-mode .association-hero p,
body.dark-mode .association-info-card p,
body.dark-mode .association-quote p { color: #EAF7FA !important; }
body.dark-mode .association-stats div,
body.dark-mode .association-values div { background: rgba(255,255,255,.045) !important; border-color: rgba(184,154,85,.16) !important; }
body.dark-mode .association-stats strong,
body.dark-mode .association-values div { color: #6FD3E4 !important; }
body.dark-mode .association-stats span { color: #AFC0C9 !important; }

/* Bottom nav dark */
body.dark-mode .main-nav { background: rgba(17,28,37,.96) !important; border-top: 1px solid rgba(255,255,255,.06) !important; box-shadow: 0 -10px 25px rgba(0,0,0,.28) !important; }
body.dark-mode .menu li a:not(.active) { opacity: .75 !important; }
body.dark-mode .menu li a .text { color: var(--mishkat-dark-muted) !important; }
body.dark-mode .menu li a .icon svg path { fill: var(--mishkat-dark-muted) !important; }
body.dark-mode .menu li a.active { background: linear-gradient(180deg, var(--mishkat-blue), var(--mishkat-blue-dark)) !important; }
body.dark-mode .menu li a.active .text,
body.dark-mode .menu li a.active .icon svg path { color: #FFFFFF !important; fill: #FFFFFF !important; }

/* =========================
   11) Responsive
========================= */
@media (max-width: 390px) {
    .mishkat-v2-title h1 { font-size: 15px !important; }
    .mishkat-v2-title span { font-size: 9px !important; }
    .mishkat-home-intro h2 { font-size: 18px !important; }
    .home-subtitle { font-size: 16px !important; }
    .mishkat-home-v2 .widget__item-1 .widget__item-title,
    body.home-page .widget__item-1 .widget__item-title,
    .mishkat-home-v2 .widget__item-2 .widget__item-title,
    body.home-page .widget__item-2 .widget__item-title,
    .mishkat-home-v2 .widget__item-3 .widget__item-title,
    body.home-page .widget__item-3 .widget__item-title { font-size: 22px !important; }
    .mishkat-home-v2 .widget__item-1 .widget__item-content p,
    body.home-page .widget__item-1 .widget__item-content p,
    .mishkat-home-v2 .widget__item-2 .widget__item-content p,
    body.home-page .widget__item-2 .widget__item-content p,
    .mishkat-home-v2 .widget__item-3 .widget__item-content p,
    body.home-page .widget__item-3 .widget__item-content p { font-size: 14px !important; }
}

@media (max-width: 380px) {
    .mishkat-stats-card .stats-grid { gap: 7px !important; }
    .mishkat-stats-card .stats-item strong { font-size: 14px !important; }
    .mishkat-stats-card .stats-item span { font-size: 9px !important; }
}
/* HOME CARDS - FINAL COLOR RESTORE ONLY */

.mishkat-home-v2 .home-service-card .widget__item-content {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,.94),
        rgba(255,255,255,.72)
    ) !important;
}

.mishkat-home-v2 .home-service-card .widget__item-title,
.mishkat-home-v2 .home-service-card .widget__item-title.text-white {
    color: var(--mishkat-blue) !important;
}

.mishkat-home-v2 .home-service-card .widget__item-categ,
.mishkat-home-v2 .home-service-card .widget__item-categ.text-primary {
    color: var(--mishkat-gold) !important;
}

.mishkat-home-v2 .home-service-card p {
    color: var(--mishkat-muted) !important;
}

/* HOME SERVICES CARDS - REAL CURRENT CLASSES */

.mishkat-services {
    display: grid !important;
    gap: 3px !important;
    margin: 18px 0 22px !important;
}

.mishkat-service-card {
    height: 126px !important;
    min-height: 126px !important;
    display: grid !important;
    grid-template-columns: 36% 1fr 48px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(14,107,130,.08) !important;
    box-shadow: 0 12px 28px rgba(14,107,130,.10) !important;
}

.mishkat-service-card .service-img {
    width: 100% !important;
    height: 100% !important;
}

.mishkat-service-card .service-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.mishkat-service-card .service-info {
    padding: 8px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: right !important;
}

.mishkat-service-card .service-info h3 {
    color: var(--mishkat-blue) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    margin: 0 0 4px !important;
}

.mishkat-service-card .service-info span {
    color: var(--mishkat-gold) !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    margin: 0 0 4px !important;
}

.mishkat-service-card .service-info p {
    color: var(--mishkat-muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.mishkat-service-card .service-arrow {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    align-self: center !important;
    justify-self: center !important;
    background: #FFFFFF !important;
    color: var(--mishkat-gold) !important;
    border: 1px solid rgba(184,154,85,.24) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    font-weight: 900 !important;
}

/* الوضع الليلي - نفس المقاسات فقط ألوان */

body.dark-mode .mishkat-service-card {
    background: #142833 !important;
    border-color: rgba(184,154,85,.18) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}

body.dark-mode .mishkat-service-card .service-info h3 {
    color: #6FD3E4 !important;
}

body.dark-mode .mishkat-service-card .service-info span {
    color: #D9B766 !important;
}

body.dark-mode .mishkat-service-card .service-info p {
    color: #DDECEF !important;
}

body.dark-mode .mishkat-service-card .service-arrow {
    background: #234551 !important;
    color: #D9B766 !important;
    border-color: rgba(217,183,102,.18) !important;
}

body.dark-mode .mishkat-service-card .service-img img {
    filter: brightness(.72) saturate(.9) contrast(.95) !important;
}
/* ===========================
   Home Waqf Hero - Premium
=========================== */

.mishkat-waqf-card {
    position: relative !important;
    overflow: hidden !important;
    margin: 20px 0 26px !important;
    padding: 28px 22px !important;
    border-radius: 32px !important;
    text-align: center !important;
    background:
        radial-gradient(circle at top right, rgba(184,154,85,.16), transparent 34%),
        radial-gradient(circle at bottom left, rgba(14,107,130,.12), transparent 36%),
        linear-gradient(145deg, #FFFFFF, #F7FBFC) !important;
    border: 1px solid rgba(184,154,85,.22) !important;
    box-shadow: 0 20px 44px rgba(14,107,130,.14) !important;
}

.mishkat-waqf-card::before {
    content: "" !important;
    position: absolute !important;
    top: -70px !important;
    right: -70px !important;
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(184,154,85,.18) !important;
    background: rgba(184,154,85,.04) !important;
}

.mishkat-waqf-card::after {
    content: "۞" !important;
    position: absolute !important;
    left: 22px !important;
    top: 18px !important;
    color: rgba(184,154,85,.12) !important;
    font-size: 70px !important;
    line-height: 1 !important;
}

.mishkat-waqf-card .waqf-badge {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 7px 22px !important;
    border-radius: 999px !important;
    background: rgba(184,154,85,.08) !important;
    border: 1px solid rgba(184,154,85,.28) !important;
    color: var(--mishkat-gold) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    margin-bottom: 16px !important;
}

.mishkat-waqf-card h1 {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 0 8px !important;
    color: var(--mishkat-blue) !important;
    font-size: 36px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -1px !important;
}

.mishkat-waqf-card > p {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 0 18px !important;
    color: var(--mishkat-gold) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 900 !important;
}

.mishkat-waqf-card .waqf-dua-box {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 auto 18px !important;
    padding: 18px 16px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(14,107,130,.10) !important;
    color: #25363E !important;
    font-size: 15px !important;
    line-height: 2 !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.mishkat-waqf-card .waqf-buttons {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin: 0 !important;
}

.mishkat-waqf-card .waqf-btn {
    min-height: 54px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.mishkat-waqf-card .waqf-btn.primary {
    background: linear-gradient(180deg, var(--mishkat-blue), var(--mishkat-blue-dark)) !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 22px rgba(14,107,130,.22) !important;
}

.mishkat-waqf-card .waqf-btn.light {
    background: rgba(255,255,255,.78) !important;
    color: var(--mishkat-blue) !important;
    border: 1px solid rgba(14,107,130,.16) !important;
}

/* Dark Mode */
body.dark-mode .mishkat-waqf-card {
    background:
        radial-gradient(circle at top right, rgba(217,183,102,.13), transparent 34%),
        radial-gradient(circle at bottom left, rgba(111,211,228,.10), transparent 36%),
        linear-gradient(145deg, #162B36, #10212B) !important;
    border-color: rgba(184,154,85,.22) !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.28) !important;
}

body.dark-mode .mishkat-waqf-card h1 {
    color: #6FD3E4 !important;
}

body.dark-mode .mishkat-waqf-card > p {
    color: #D9B766 !important;
}

body.dark-mode .mishkat-waqf-card .waqf-dua-box {
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(184,154,85,.16) !important;
    color: #EAF7FA !important;
}

body.dark-mode .mishkat-waqf-card .waqf-btn.light {
    background: rgba(255,255,255,.045) !important;
    color: #EAF7FA !important;
    border-color: rgba(184,154,85,.18) !important;
}
/* تعديل الشريحة الأولى فقط */

.mishkat-waqf-card h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    letter-spacing: -1px !important;
}

.mishkat-waqf-card::before,
.mishkat-waqf-card::after {
    display: none !important;
}

@media (max-width: 390px) {
    .mishkat-waqf-card h1 {
        font-size: 28px !important;
    }
}

@media (max-width: 360px) {
    .mishkat-waqf-card h1 {
        font-size: 25px !important;
    }
}
/* Footer note card - premium */

.waqf-footer-note {
    position: relative !important;
    overflow: hidden !important;
    margin: 22px 0 150px !important;
    padding: 22px 20px !important;
    border-radius: 24px !important;
    text-align: center !important;
    color: var(--mishkat-blue) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.8 !important;
    background:
        radial-gradient(circle at top right, rgba(184,154,85,.16), transparent 34%),
        linear-gradient(145deg, #FFFFFF, #F7FBFC) !important;
    border: 1px solid rgba(184,154,85,.18) !important;
    box-shadow: 0 14px 32px rgba(14,107,130,.10) !important;
}

.waqf-footer-note::before {
    content: "✦" !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 auto 10px !important;
    border-radius: 50% !important;
    background: rgba(184,154,85,.10) !important;
    color: var(--mishkat-gold) !important;
    font-size: 20px !important;
    line-height: 34px !important;
}

body.dark-mode .waqf-footer-note {
    color: #EAF7FA !important;
    background:
        radial-gradient(circle at top right, rgba(217,183,102,.14), transparent 34%),
        linear-gradient(145deg, #162B36, #10212B) !important;
    border-color: rgba(184,154,85,.22) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.24) !important;
}

body.dark-mode .waqf-footer-note::before {
    background: rgba(217,183,102,.12) !important;
    color: #D9B766 !important;
}
.rosary-title{
    font-size:32px;
    font-weight:700;
    color:var(--mishkat-text);
    text-align:center;
    margin-bottom:35px;
    letter-spacing:.5px;
}
.rosary-count{
    font-size:72px;
    font-weight:700;
    line-height:1;
    color:var(--mishkat-primary);
    margin-top:35px;
    margin-bottom:30px;
}
.rosary-button{
    width:170px;
    height:170px;
    border-radius:50%;
    background:linear-gradient(135deg,#0f8fb2,#136d84);
    border:4px solid rgba(255,255,255,.2);
    box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        inset 0 2px 8px rgba(255,255,255,.15);
    transition:.15s;
}
.rosary-button:active{
    transform:scale(.96);
}
.rosary-button span{
    font-size:70px;
    font-weight:300;
    color:#fff;
}
.rosary-counter-card{
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    padding:28px;
    margin:35px 25px;
}
/* Rosary Page - Compact Professional Layout */

.mishkat-rosary-page .container {
    padding-bottom: 120px !important;
}

.rosary-card {
    min-height: calc(100vh - 200px) !important;
    padding: 18px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.rosary-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    color: var(--mishkat-gold) !important;
    border: 1px solid rgba(184,154,85,.28) !important;
    background: rgba(184,154,85,.08) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    margin-bottom: 10px !important;
}

.rosary-title {
    color: var(--mishkat-blue) !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    margin: 0 0 12px !important;
}

.rosary-count-wrap {
    margin-bottom: 4px !important;
}

.rosary-count {
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--mishkat-blue) !important;
    font-size: 58px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    outline: none !important;
}

.rosary-main-btn {
    width: 140px !important;
    height: 140px !important;
    border-radius: 50% !important;
    border: 5px solid rgba(255,255,255,.65) !important;
    background: linear-gradient(180deg, var(--mishkat-blue), var(--mishkat-blue-dark)) !important;
    box-shadow: 0 16px 32px rgba(14,107,130,.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: -40px !important;
    margin-bottom: 16px !important;
}

.rosary-main-btn span {
    color: #fff !important;
    font-size: 56px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
}

.rosary-main-btn:active {
    transform: scale(.96) !important;
}

.rosary-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.rosary-reset-btn {
    min-width: 150px !important;
    min-height: 44px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(184,154,85,.22) !important;
    background: rgba(255,255,255,.72) !important;
    color: var(--mishkat-blue) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

/* Dark Mode */
body.dark-mode .rosary-title,
body.dark-mode .rosary-count {
    color: #6FD3E4 !important;
}

body.dark-mode .rosary-reset-btn {
    background: rgba(255,255,255,.05) !important;
    color: #EAF7FA !important;
    border-color: rgba(184,154,85,.22) !important;
}
.impact-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:30px;
}

.impact-card{
    border-radius:22px;
    text-align:center;
    padding:22px 10px;
    background:#fff;
    border:1px solid rgba(14,107,130,.08);
    box-shadow:0 12px 28px rgba(14,107,130,.08);
}

.impact-number{
    font-size:34px;
    font-weight:900;
    color:var(--mishkat-blue);
    line-height:1;
}

.impact-title{
    margin-top:12px;
    font-size:15px;
    font-weight:700;
    color:#5d6870;
    line-height:1.5;
}

@media (max-width:768px){

    .impact-stats{
        grid-template-columns:repeat(3,1fr);
        gap:12px;
    }

    .impact-card{
        padding:18px 6px;
        border-radius:18px;
    }

    .impact-number{
        font-size:28px;
    }

    .impact-title{
        font-size:13px;
    }

}
/* ============================= */
/* تحسين قسم أثر المصحف */
/* ============================= */

.impact-section {
    margin-top:40px;
}


.impact-main-card {
    background:#ffffff;
    border-radius:30px;
    padding:30px 20px;
    text-align:center;
    border:1px solid rgba(0,0,0,.05);
}


.impact-title {
    font-size:22px;
    font-weight:700;
    color:#34424b;
    margin-bottom:10px;
}


.impact-icon {
    font-size:26px;
    margin:10px 0;
}


.impact-number {
    font-size:42px;
    font-weight:900;
    color:#087286;
    line-height:1.2;
}


.impact-label {
    margin-top:8px;
    font-size:20px;
    color:#26343b;
}


.impact-grid {

    display:grid;
    grid-template-columns:1fr;
    gap:15px;
    margin-top:20px;

}


.impact-card {

    background:#ffffff;
    border-radius:25px;
    padding:25px 15px;
    text-align:center;
    border:1px solid rgba(0,0,0,.05);

}



/* ============================= */
/* الوضع الليلي */
/* ============================= */


body.dark-mode .impact-main-card,
body.dark-mode .impact-card,
body.dark-mode .association-info-card {


    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.15);

}



.impact-title{
    margin-bottom:25px;
    font-size:22px;
    font-weight:700;
}



body.dark-mode .impact-label {

    color:#dbe6eb !important;

}



body.dark-mode .association-info-card p {

    color:#f1f5f7 !important;

}



body.dark-mode .association-values div {

    color:#e8eef2 !important;

}


/* تحسين أرقام الوضع الليلي */

body.dark-mode .impact-number {

    color:#1fa4b8 !important;

}
/* ==================================================
   قائمة مشكاة السريعة
================================================== */

.mishkat-quick-menu {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mishkat-menu-trigger {
    cursor: pointer !important;
}

.mishkat-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9997 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: rgba(5, 18, 25, .58) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    transition:
        opacity .25s ease,
        visibility .25s ease !important;
}

.mishkat-menu-overlay.is-open {
    visibility: visible !important;
    opacity: 1 !important;
}

.mishkat-menu-panel {
    position: fixed !important;
    right: 16px !important;
    left: 16px !important;
    bottom: 20px !important;
    z-index: 9998 !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 12px 18px 22px !important;
    border-radius: 30px !important;

    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(35px) scale(.98) !important;

    background:
        radial-gradient(
            circle at top right,
            rgba(184,154,85,.12),
            transparent 38%
        ),
        #ffffff !important;

    border: 1px solid rgba(184,154,85,.18) !important;
    box-shadow: 0 24px 65px rgba(0,0,0,.22) !important;

    transition:
        opacity .28s ease,
        transform .28s ease,
        visibility .28s ease !important;
}

.mishkat-menu-panel.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

.mishkat-menu-handle {
    width: 44px !important;
    height: 5px !important;
    margin: 0 auto 17px !important;
    border-radius: 99px !important;
    background: rgba(72, 91, 100, .20) !important;
}

.mishkat-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    margin-bottom: 22px !important;
    text-align: right !important;
}

.mishkat-menu-header > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mishkat-menu-header strong {
    color: var(--mishkat-blue) !important;
    font-size: 21px !important;
    line-height: 1.4 !important;
    font-weight: 900 !important;
}

.mishkat-menu-header span {
    color: #77858c !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.mishkat-menu-close {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(14,107,130,.07) !important;
    color: var(--mishkat-blue) !important;
    font-size: 28px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.mishkat-menu-section-title {
    margin-bottom: 12px !important;
    color: var(--mishkat-gold) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-align: right !important;
}

.mishkat-theme-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.mishkat-theme-option {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 90px !important;
    padding: 15px 14px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(14,107,130,.10) !important;
    background: #f7fafb !important;
    text-align: right !important;
    cursor: pointer !important;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease !important;
}

.mishkat-theme-option:active {
    transform: scale(.97) !important;
}

.mishkat-theme-option.is-active {
    border-color: rgba(14,107,130,.50) !important;
    background: rgba(14,107,130,.08) !important;
    box-shadow: 0 10px 24px rgba(14,107,130,.09) !important;
}

.mishkat-theme-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 16px !important;
    color: var(--mishkat-blue) !important;
    background: #ffffff !important;
    box-shadow: 0 7px 18px rgba(14,107,130,.08) !important;
}

.mishkat-theme-text {
    display: flex !important;
    flex: 1 !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mishkat-theme-text strong {
    color: #26343b !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 900 !important;
}

.mishkat-theme-text small {
    color: #7b898f !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
}

.mishkat-theme-check {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: transparent !important;
}

.mishkat-theme-option.is-active .mishkat-theme-check {
    background: var(--mishkat-blue) !important;
    box-shadow: 0 0 0 4px rgba(14,107,130,.12) !important;
}


/* الوضع الليلي للقائمة */

body.dark-mode .mishkat-menu-panel {
    background:
        radial-gradient(
            circle at top right,
            rgba(217,183,102,.11),
            transparent 38%
        ),
        #102630 !important;

    border-color: rgba(184,154,85,.22) !important;
    box-shadow: 0 24px 65px rgba(0,0,0,.42) !important;
}

body.dark-mode .mishkat-menu-handle {
    background: rgba(255,255,255,.20) !important;
}

body.dark-mode .mishkat-menu-header strong {
    color: #6fd3e4 !important;
}

body.dark-mode .mishkat-menu-header span {
    color: #b7c7cd !important;
}

body.dark-mode .mishkat-menu-close {
    background: rgba(255,255,255,.06) !important;
    color: #6fd3e4 !important;
}

body.dark-mode .mishkat-theme-option {
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(255,255,255,.09) !important;
}

body.dark-mode .mishkat-theme-option.is-active {
    background: rgba(111,211,228,.10) !important;
    border-color: rgba(111,211,228,.42) !important;
}

body.dark-mode .mishkat-theme-icon {
    color: #6fd3e4 !important;
    background: rgba(255,255,255,.06) !important;
}

body.dark-mode .mishkat-theme-text strong {
    color: #edf7f9 !important;
}

body.dark-mode .mishkat-theme-text small {
    color: #aebfc5 !important;
}

body.dark-mode .mishkat-theme-option.is-active .mishkat-theme-check {
    background: #6fd3e4 !important;
    box-shadow: 0 0 0 4px rgba(111,211,228,.13) !important;
}


/* الشاشات الصغيرة */

@media (max-width: 390px) {
    .mishkat-theme-options {
        grid-template-columns: 1fr !important;
    }

    .mishkat-menu-panel {
        right: 12px !important;
        left: 12px !important;
        bottom: 14px !important;
    }
}
/* =========================================
   القائمة المنسدلة العلوية
========================================= */

.mishkat-settings-toggle {
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #177D97, #0F6C84) !important;
    color: #E0C16A !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
    cursor: pointer !important;
}

.mishkat-settings-dropdown {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 10px !important;
    z-index: 1200 !important;
    width: min(330px, calc(100vw - 28px)) !important;
    padding: 12px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at top left, rgba(184,154,85,.10), transparent 36%),
        #FFFFFF !important;
    border: 1px solid rgba(184,154,85,.20) !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.18) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-8px) scale(.98) !important;
    transform-origin: top left !important;
    pointer-events: none !important;
    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease !important;
}

.mishkat-settings-dropdown.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.settings-menu-head {
    padding: 8px 10px 13px !important;
    margin-bottom: 7px !important;
    border-bottom: 1px solid rgba(14,107,130,.08) !important;
    text-align: right !important;
}

.settings-menu-head strong {
    display: block !important;
    color: var(--mishkat-blue) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.settings-menu-head span {
    display: block !important;
    margin-top: 3px !important;
    color: var(--mishkat-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.settings-menu-item {
    position: relative !important;
    width: 100% !important;
    min-height: 62px !important;
    padding: 10px 11px !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    color: inherit !important;
    text-decoration: none !important;
    text-align: right !important;
    cursor: pointer !important;
    transition: background .18s ease, transform .18s ease !important;
}

.settings-menu-item:hover,
.settings-menu-item:focus {
    background: rgba(14,107,130,.06) !important;
}

.settings-menu-item:active {
    transform: scale(.98) !important;
}

.settings-menu-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 13px !important;
    background: rgba(14,107,130,.07) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}

.settings-menu-text {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.settings-menu-text strong {
    color: #24343C !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 900 !important;
}

.settings-menu-text small {
    color: #7B8A91 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
}

.settings-theme-check {
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
    border-radius: 50% !important;
    background: transparent !important;
}

.settings-theme-option.is-active .settings-theme-check {
    background: var(--mishkat-blue) !important;
    box-shadow: 0 0 0 4px rgba(14,107,130,.12) !important;
}

/* الوضع الليلي */

body.dark-mode .mishkat-settings-dropdown {
    background:
        radial-gradient(circle at top left, rgba(217,183,102,.09), transparent 36%),
        #102630 !important;
    border-color: rgba(184,154,85,.22) !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.40) !important;
}

body.dark-mode .settings-menu-head {
    border-bottom-color: rgba(255,255,255,.07) !important;
}

body.dark-mode .settings-menu-head strong {
    color: #6FD3E4 !important;
}

body.dark-mode .settings-menu-head span {
    color: #AFC0C9 !important;
}

body.dark-mode .settings-menu-item:hover,
body.dark-mode .settings-menu-item:focus {
    background: rgba(255,255,255,.05) !important;
}

body.dark-mode .settings-menu-icon {
    background: rgba(255,255,255,.06) !important;
}

body.dark-mode .settings-menu-text strong {
    color: #EAF7FA !important;
}

body.dark-mode .settings-menu-text small {
    color: #AFC0C9 !important;
}

body.dark-mode .settings-theme-option.is-active .settings-theme-check {
    background: #6FD3E4 !important;
    box-shadow: 0 0 0 4px rgba(111,211,228,.13) !important;
}

@media (max-width: 390px) {
    .mishkat-settings-dropdown {
        left: 7px !important;
        width: calc(100vw - 22px) !important;
    }
}
/* القائمة الفرعية للمظهر */

.settings-appearance-toggle {
    justify-content: flex-start !important;
}

.settings-submenu-arrow {
    margin-right: auto !important;
    color: var(--mishkat-blue) !important;
    font-size: 22px !important;
    line-height: 1 !important;
    transition: transform .22s ease !important;
}

.settings-appearance-toggle.is-open .settings-submenu-arrow {
    transform: rotate(180deg) !important;
}

.settings-appearance-panel {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 18px !important;
    background: rgba(14,107,130,.035) !important;
    transition:
        max-height .28s ease,
        opacity .22s ease,
        margin .22s ease,
        padding .22s ease !important;
}

.settings-appearance-panel.is-open {
    max-height: 190px !important;
    opacity: 1 !important;
    margin: 4px 0 8px !important;
    padding: 7px 8px !important;
}

.settings-appearance-panel .settings-menu-item {
    min-height: 57px !important;
    padding: 8px 10px !important;
}

.settings-appearance-panel .settings-menu-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    font-size: 18px !important;
}

body.dark-mode .settings-submenu-arrow {
    color: #6FD3E4 !important;
}

body.dark-mode .settings-appearance-panel {
    background: rgba(255,255,255,.035) !important;
}

/* وضع القراءة */
body.reading-mode {
    background:#f5f0e6 !important;
}

body.reading-mode .card,
body.reading-mode .section,
body.reading-mode .content-box {
    background:#fffaf0 !important;
}

body.reading-mode {
    color:#333;
}
/* =========================================
   وضع القراءة المريح
========================================= */

html.reading-mode,
body.reading-mode {
    background: #F3EBDD !important;
    color-scheme: light !important;
}

body.reading-mode .section-content,
body.reading-mode .mishkat-home-v2,
body.reading-mode .mishkat-association-page,
body.reading-mode .azkar-page,
body.reading-mode .mishkat-rosary-page {
    background:
        linear-gradient(
            180deg,
            #F5EFE4 0%,
            #EFE5D5 100%
        ) !important;
}

/* البطاقات العامة */

body.reading-mode .association-hero,
body.reading-mode .association-info-card,
body.reading-mode .association-quote,
body.reading-mode .impact-main-card,
body.reading-mode .impact-card,
body.reading-mode .azkar-card,
body.reading-mode .zikr-show-card,
body.reading-mode .rosary-card,
body.reading-mode .widget__item-3,
body.reading-mode .home-service-card {
    background:
        linear-gradient(
            145deg,
            #FFFDF8,
            #F8F0E3
        ) !important;

    border-color: rgba(151, 117, 62, .20) !important;
    box-shadow: 0 15px 34px rgba(105, 77, 39, .10) !important;
}

/* النصوص */

body.reading-mode h1,
body.reading-mode h2,
body.reading-mode h3,
body.reading-mode h4,
body.reading-mode h5,
body.reading-mode h6,
body.reading-mode p,
body.reading-mode span,
body.reading-mode .widget__item-name,
body.reading-mode .zikr-content {
    color: #3E352B !important;
}

/* العناوين الزرقاء تبقى بهوية المصحف */

body.reading-mode .association-hero h1,
body.reading-mode .impact-number,
body.reading-mode .azkar-card-content h3,
body.reading-mode .rosary-title {
    color: #0E6B82 !important;
}
/* وصف آخر قراءة داخل القائمة السريعة */

#continueReadingDesc {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0px !important;
    line-height: 1.45 !important;
}

.continue-reading-note {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #8A979D !important;
}

body.dark-mode .continue-reading-note {
    color: #AFC0C9 !important;
}
/* =====================================
   تثبيت شاشة قراءة المصحف
   ===================================== */

/* منع التمرير العمودي داخل صفحة القارئ فقط */

html.reader-page-active,
body.reader-page-active {
    height: 100% !important;
    overflow: hidden !important;
}

.mishkat-reader-v2 {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.reader-v2-viewport {
    flex: 1;
    overflow: hidden;
    height: calc(100vh - 120px);
}

.reader-v2-swiper,
.reader-v2-swiper .swiper-wrapper {
    height: 100%;
}

.reader-v2-page-img {
    max-height: calc(100vh - 150px);
    object-fit: contain;
}
/* =====================================
   تحسين هيدر القارئ والشريط السفلي
   ===================================== */

.reader-v2-header {
    position: relative;
    z-index: 20;
    min-height: 94px;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 8px;
    background: rgba(245, 252, 253, .93);
    border-bottom: 1px solid rgba(180, 147, 69, .18);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.reader-v2-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.reader-v2-title strong {
    max-width: 100%;
    overflow: hidden;
    color: #08758d;
    font-size: 25px !important;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-title-divider {
    width: 44px;
    height: 2px;
    display: block;
    margin: 5px auto 4px !important;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        #b49345,
        transparent
    );
}

.reader-v2-title #currentPageNumber {
    margin: 0;
    color: #64757b;
    font-size: 12px;
    font-weight: 800;
}

/* حركة اسم السورة */

.reader-v2-title.is-changing strong {
    animation: readerTitleChange .38s ease;
}

@keyframes readerTitleChange {
    0% {
        opacity: 0;
        transform: translateY(-9px) scale(.97);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* المساحة السفلية */

.reader-bottom-bar {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    padding: 9px 18px 12px;
    background: rgba(245, 252, 253, .96);
    border-top: 1px solid rgba(180, 147, 69, .16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.reader-bottom-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.reader-bottom-surah,
.reader-bottom-page {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.reader-bottom-surah {
    min-width: 0;
    text-align: right;
}

.reader-bottom-page {
    flex: 0 0 auto;
    text-align: left;
}

.reader-bottom-info span {
    color: #829097;
    font-size: 10px;
    font-weight: 800;
}

.reader-bottom-info strong {
    color: #27383f;
    font-size: 13px;
    font-weight: 900;
}

.reader-bottom-surah strong {
    overflow: hidden;
    color: #08758d;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-progress-track {
    height: 4px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(14, 117, 139, .12);
}

.reader-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #08758d,
        #2fb2c8,
        #b49345
    );
    transition: width .35s ease;
}

/* تعديل مساحة الصفحة بعد إضافة الشريط السفلي */

.reader-v2-viewport {
    min-height: 0;
}

.reader-v2-page-img {
    max-height: calc(100vh - 172px) !important;
}

/* الوضع الليلي */

html.dark-mode .reader-v2-header,
body.dark-mode .reader-v2-header,
html.dark-mode .reader-bottom-bar,
body.dark-mode .reader-bottom-bar {
    background: rgba(8, 39, 49, .95);
    border-color: rgba(217, 183, 102, .17);
}

html.dark-mode .reader-v2-title strong,
body.dark-mode .reader-v2-title strong,
html.dark-mode .reader-bottom-surah strong,
body.dark-mode .reader-bottom-surah strong {
    color: #f2f6f7;
}

html.dark-mode .reader-v2-title #currentPageNumber,
body.dark-mode .reader-v2-title #currentPageNumber,
html.dark-mode .reader-bottom-info span,
body.dark-mode .reader-bottom-info span {
    color: #9eb0b7;
}

html.dark-mode .reader-bottom-info strong,
body.dark-mode .reader-bottom-info strong {
    color: #f2f6f7;
}

html.dark-mode .reader-progress-track,
body.dark-mode .reader-progress-track {
    background: rgba(255, 255, 255, .09);
}

@media (max-width: 480px) {
    .reader-v2-header {
        min-height: 82px;
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        padding: 8px 12px 6px;
    }

    .reader-v2-title strong {
        font-size: 22px !important;
    }

    .reader-bottom-bar {
        padding: 7px 14px 10px;
    }

    .reader-v2-page-img {
        max-height: calc(100vh - 150px) !important;
    }
}
/* =====================================
   صفحة اختيار القرّاء
   ===================================== */

.reciters-page {
    padding: 20px 0 130px !important;
}

.reciters-page .container {
    max-width: 760px;
}

.reciters-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid rgba(14, 117, 139, .13);
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(239,249,251,.96)
        );
    box-shadow: 0 18px 45px rgba(8, 76, 91, .09);
}

.reciters-page-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 13px;
    margin-bottom: 9px;
    border-radius: 999px;
    background: rgba(180, 147, 69, .12);
    color: #a18137;
    font-size: 12px;
    font-weight: 900;
}

.reciters-page-head h1 {
    margin: 0;
    color: #08758d;
    font-size: 25px;
    font-weight: 900;
}

.reciters-page-head p {
    margin: 5px 0 0;
    color: #74848b;
    font-size: 13px;
    font-weight: 700;
}

.reciters-page-count {
    width: 65px;
    height: 65px;
    flex: 0 0 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 21px;
    background: #08758d;
    color: #fff;
    box-shadow: 0 12px 28px rgba(8, 117, 141, .24);
}

.reciters-page-count strong {
    font-size: 21px;
    font-weight: 900;
    line-height: 1;
}

.reciters-page-count span {
    margin-top: 5px;
    font-size: 10px;
    font-weight: 800;
    opacity: .82;
}

/* البحث */

.reciters-search-wrap {
    margin-bottom: 17px;
}

.reciters-search-box {
    position: relative;
}

.reciters-search-box input {
    width: 100%;
    height: 56px;
    padding: 0 52px 0 18px;
    border: 1px solid rgba(14, 117, 139, .15);
    border-radius: 19px;
    outline: none;
    background: rgba(255, 255, 255, .97);
    color: #27383f;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 10px 28px rgba(8, 76, 91, .07);
    transition: .22s ease;
}

.reciters-search-box input:focus {
    border-color: rgba(8, 117, 141, .55);
    box-shadow:
        0 0 0 4px rgba(8, 117, 141, .09),
        0 12px 30px rgba(8, 76, 91, .09);
}

.reciters-search-box input::placeholder {
    color: #98a5aa;
}

.reciters-search-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 18px;
    display: flex;
    color: #08758d;
    transform: translateY(-50%);
    pointer-events: none;
}

/* شبكة البطاقات */

.reciters-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.reciter-card {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(14, 117, 139, .12);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(241,249,251,.97)
        );
    box-shadow: 0 13px 35px rgba(8, 76, 91, .08);
    color: inherit;
    text-decoration: none !important;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.reciter-card::before {
    position: absolute;
    top: -45px;
    left: -45px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(180, 147, 69, .07);
    content: "";
}

.reciter-card:active {
    transform: scale(.975);
}

@media (hover: hover) {
    .reciter-card:hover {
        border-color: rgba(8, 117, 141, .35);
        box-shadow: 0 17px 42px rgba(8, 76, 91, .14);
        transform: translateY(-3px);
    }
}

.reciter-card-icon {
    position: relative;
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
}

.reciter-card-icon img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 22px;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(8, 117, 141, .18);
}

.reciter-play-icon {
    position: absolute;
    bottom: -5px;
    left: -5px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #b49345;
    color: #fff;
    box-shadow: 0 7px 18px rgba(80, 59, 14, .25);
}

.reciter-card-content {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.reciter-card-content h3 {
    margin: 0;
    overflow: hidden;
    color: #24373e;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reciter-card-content p {
    margin: 4px 0 10px;
    overflow: hidden;
    color: #839197;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reciter-card-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #08758d;
    font-size: 11px;
    font-weight: 900;
}

.reciter-card-action svg {
    transition: transform .2s ease;
}

.reciter-card:hover .reciter-card-action svg {
    transform: translateX(-3px);
}

/* لا توجد نتائج */

.reciters-empty-state {
    min-height: 230px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    text-align: center;
}

.reciters-empty-icon {
    font-size: 42px;
}

.reciters-empty-state strong {
    color: #27383f;
    font-size: 18px;
    font-weight: 900;
}

.reciters-empty-state span {
    color: #87969c;
    font-size: 13px;
    font-weight: 700;
}

/* الوضع الليلي */

html.dark-mode .reciters-page-head,
body.dark-mode .reciters-page-head,
html.dark-mode .reciter-card,
body.dark-mode .reciter-card,
html.dark-mode .reciters-search-box input,
body.dark-mode .reciters-search-box input {
    background:
        linear-gradient(
            145deg,
            rgba(17, 53, 64, .98),
            rgba(11, 42, 52, .98)
        );
    border-color: rgba(217, 183, 102, .13);
}

html.dark-mode .reciters-page-head h1,
body.dark-mode .reciters-page-head h1,
html.dark-mode .reciter-card-content h3,
body.dark-mode .reciter-card-content h3,
html.dark-mode .reciters-search-box input,
body.dark-mode .reciters-search-box input,
html.dark-mode .reciters-empty-state strong,
body.dark-mode .reciters-empty-state strong {
    color: #f3f6f7;
}

html.dark-mode .reciters-page-head p,
body.dark-mode .reciters-page-head p,
html.dark-mode .reciter-card-content p,
body.dark-mode .reciter-card-content p,
html.dark-mode .reciters-empty-state span,
body.dark-mode .reciters-empty-state span {
    color: #aab9bf;
}

html.dark-mode .reciter-card-action,
body.dark-mode .reciter-card-action,
html.dark-mode .reciters-search-icon,
body.dark-mode .reciters-search-icon {
    color: #68d2e3;
}

html.dark-mode .reciter-play-icon,
body.dark-mode .reciter-play-icon {
    border-color: #123540;
}

@media (max-width: 600px) {
    .reciters-page {
        padding-top: 13px !important;
    }

    .reciters-page-head {
        padding: 17px;
        border-radius: 23px;
    }

    .reciters-page-head h1 {
        font-size: 22px;
    }

    .reciters-page-count {
        width: 57px;
        height: 57px;
        flex-basis: 57px;
        border-radius: 18px;
    }

    .reciters-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .reciter-card {
        padding: 13px;
        border-radius: 21px;
    }

    .reciter-card-icon {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    .reciter-card-icon img {
        border-radius: 19px;
    }
}
/* =====================================
   صفحة القرّاء
   ===================================== */

.reciters-page {
    padding-bottom: 135px !important;
}

.reciters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.reciter-card {
    position: relative;
    min-height: 170px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(14, 107, 130, .12);
    border-radius: 28px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 14px 34px rgba(27, 72, 87, .09);
    color: inherit;
    text-decoration: none !important;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.reciter-card::before {
    content: "";
    position: absolute;
    top: -52px;
    left: -52px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: rgba(180, 147, 69, .08);
    pointer-events: none;
}

.reciter-card:active {
    transform: scale(.985);
}

.reciter-card-media {
    position: relative;
    flex: 0 0 128px;
}

.reciter-card-icon {
    width: 128px;
    height: 128px;
    overflow: hidden;
    border-radius: 28px;
    background: #0ea1aa;
    box-shadow: 0 12px 28px rgba(14, 117, 139, .18);
}

.reciter-card-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.reciter-play-icon {
    position: absolute;
    left: -8px;
    bottom: -8px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #b49345;
    color: #fff;
    box-shadow: 0 10px 24px rgba(117, 90, 33, .25);
}

.reciter-card-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.reciter-card-heading h3 {
    margin: 0 0 6px;
    color: #26383f;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.25;
}

.reciter-card-heading p {
    margin: 0;
    color: #859197;
    font-size: 15px;
    font-weight: 700;
}

.reciter-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.reciter-card-listen {
    color: #b49345;
    font-size: 12px;
    font-weight: 900;
}

.reciter-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #08758d;
    font-size: 15px;
    font-weight: 900;
}

.reciters-search-box {
    box-shadow: 0 12px 30px rgba(24, 70, 84, .08);
}

.reciters-search-icon {
    color: #08758d;
}

html.dark-mode .reciter-card,
body.dark-mode .reciter-card {
    background: rgba(12, 50, 61, .92);
    border-color: rgba(217, 183, 102, .14);
    box-shadow: none;
}

html.dark-mode .reciter-card::before,
body.dark-mode .reciter-card::before {
    background: rgba(217, 183, 102, .06);
}

html.dark-mode .reciter-card-heading h3,
body.dark-mode .reciter-card-heading h3 {
    color: #f2f6f7;
}

html.dark-mode .reciter-card-heading p,
body.dark-mode .reciter-card-heading p {
    color: #a8b7bd;
}

html.dark-mode .reciter-play-icon,
body.dark-mode .reciter-play-icon {
    border-color: #0d3440;
}

html.dark-mode .reciter-card-action,
body.dark-mode .reciter-card-action {
    color: #68d5e5;
}

html.dark-mode .reciter-card-listen,
body.dark-mode .reciter-card-listen {
    color: #d9b766;
}

@media (min-width: 768px) {
    .reciters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {

    .reciter-card {
        min-height: 112px !important;
        padding: 14px !important;
        border-radius: 22px !important;
        gap: 13px !important;
    }

    .reciter-card-media {
        flex: 0 0 76px !important;
    }

    .reciter-card-icon {
        width: 76px !important;
        height: 76px !important;
        border-radius: 19px !important;
    }

    .reciter-play-icon {
        width: 34px !important;
        height: 34px !important;
        left: -4px !important;
        bottom: -4px !important;
        border-width: 3px !important;
    }

    .reciter-play-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .reciter-card-content {
        gap: 8px !important;
    }

    .reciter-card-heading h3 {
        margin: 0 0 3px !important;
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    .reciter-card-heading p {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .reciter-card-footer {
        margin-top: 2px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    .reciter-card-listen {
        display: none !important;
    }

    .reciter-card-action {
        font-size: 13px !important;
        gap: 4px !important;
    }

}
.reciter-card {
    min-height: 128px !important;
    padding: 16px !important;
    gap: 15px !important;
}

.reciter-card-media {
    flex: 0 0 92px !important;
}

.reciter-card-icon {
    width: 92px !important;
    height: 92px !important;
    border-radius: 22px !important;
}

.reciter-play-icon {
    width: 40px !important;
    height: 40px !important;
    left: -5px !important;
    bottom: -5px !important;
    border-width: 3px !important;
}

.reciter-card-heading h3 {
    font-size: 20px !important;
    margin-bottom: 4px !important;
}

.reciter-card-heading p {
    font-size: 13px !important;
}

.reciter-card-listen {
    display: none !important;
}

.reciter-card-action {
    font-size: 14px !important;
}
/* =====================================
   بطاقات سور القارئ
   ===================================== */

.reciter-surahs-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 130px;
}

.reciter-surah-card {
    position: relative;
    min-height: 92px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    overflow: hidden;
    border: 1px solid rgba(14, 107, 130, .12);
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 24px rgba(20, 67, 81, .06);
    color: inherit;
    text-decoration: none !important;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.reciter-surah-card::before {
    content: "";
    position: absolute;
    top: -34px;
    left: -34px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(180, 147, 69, .07);
    pointer-events: none;
}

.reciter-surah-card:active {
    transform: scale(.985);
}

.reciter-surah-number {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(14, 117, 139, .10);
    color: #08758d;
    font-size: 15px;
    font-weight: 900;
}

.reciter-surah-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reciter-surah-name {
    overflow: hidden;
    color: #27383f;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reciter-surah-meta {
    color: #87959b;
    font-size: 12px;
    font-weight: 700;
}

.reciter-surah-play {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #08758d;
    color: #fff;
    box-shadow: 0 8px 20px rgba(8, 117, 141, .22);
}

.reciter-surahs-empty {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 30px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .72);
    text-align: center;
}

.reciter-surahs-empty-icon {
    margin-bottom: 4px;
    font-size: 34px;
}

.reciter-surahs-empty strong {
    color: #27383f;
    font-size: 18px;
    font-weight: 900;
}

.reciter-surahs-empty span {
    color: #87959b;
    font-size: 13px;
    font-weight: 700;
}

/* الوضع الليلي */

html.dark-mode .reciter-surah-card,
body.dark-mode .reciter-surah-card {
    background: rgba(12, 49, 60, .93);
    border-color: rgba(217, 183, 102, .14);
    box-shadow: none;
}

html.dark-mode .reciter-surah-card::before,
body.dark-mode .reciter-surah-card::before {
    background: rgba(217, 183, 102, .06);
}

html.dark-mode .reciter-surah-number,
body.dark-mode .reciter-surah-number {
    background: rgba(104, 213, 229, .10);
    color: #68d5e5;
}

html.dark-mode .reciter-surah-name,
body.dark-mode .reciter-surah-name {
    color: #f2f6f7;
}

html.dark-mode .reciter-surah-meta,
body.dark-mode .reciter-surah-meta {
    color: #a9b7bd;
}

html.dark-mode .reciter-surah-play,
body.dark-mode .reciter-surah-play {
    background: #b49345;
    color: #fff;
    box-shadow: none;
}

html.dark-mode .reciter-surahs-empty,
body.dark-mode .reciter-surahs-empty {
    background: rgba(12, 49, 60, .78);
}

html.dark-mode .reciter-surahs-empty strong,
body.dark-mode .reciter-surahs-empty strong {
    color: #f2f6f7;
}

html.dark-mode .reciter-surahs-empty span,
body.dark-mode .reciter-surahs-empty span {
    color: #a9b7bd;
}

@media (min-width: 768px) {
    .reciter-surahs-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* =====================================
   صفحة تشغيل التلاوة
   ===================================== */

.single-audio-page {
    padding-bottom: 135px !important;
}

.single-audio-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.single-audio-reciter {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(14, 107, 130, .12);
    border-radius: 28px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 15px 38px rgba(18, 67, 82, .08);
}

.single-audio-image {
    width: 118px;
    height: 118px;
    flex: 0 0 118px;
    overflow: hidden;
    border-radius: 28px;
    background: #0ea1aa;
    box-shadow: 0 12px 28px rgba(14, 117, 139, .18);
}

.single-audio-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.single-audio-reciter-info {
    min-width: 0;
    flex: 1;
}

.single-audio-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 14px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(180, 147, 69, .12);
    color: #b49345;
    font-size: 12px;
    font-weight: 900;
}

.single-audio-reciter-info h1 {
    margin: 0 0 6px;
    color: #24363d;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.3;
}

.single-audio-reciter-info p {
    margin: 0;
    color: #87949a;
    font-size: 14px;
    font-weight: 700;
}

.single-audio-surah {
    padding: 20px 22px;
    border: 1px solid rgba(180, 147, 69, .14);
    border-radius: 25px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, .96),
        rgba(242, 249, 250, .94)
    );
    text-align: center;
}

.single-audio-surah-label {
    display: block;
    margin-bottom: 7px;
    color: #b49345;
    font-size: 12px;
    font-weight: 900;
}

.single-audio-surah h2 {
    margin: 0 0 5px;
    color: #08758d;
    font-size: 30px;
    font-weight: 900;
}

.single-audio-surah p {
    margin: 0;
    color: #89969b;
    font-size: 13px;
    font-weight: 700;
}

.single-audio-player-card {
    padding: 20px;
    border: 1px solid rgba(14, 107, 130, .13);
    border-radius: 26px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 16px 36px rgba(18, 67, 82, .08);
}

.single-audio-player-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.single-audio-player-head > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.single-audio-player-head span {
    color: #89969b;
    font-size: 11px;
    font-weight: 800;
}

.single-audio-player-head strong {
    color: #24363d;
    font-size: 18px;
    font-weight: 900;
}

.single-audio-wave {
    height: 28px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.single-audio-wave span {
    width: 4px;
    display: block;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        #2bb2c6,
        #08758d
    );
    animation: singleAudioWave 1s ease-in-out infinite;
}

.single-audio-wave span:nth-child(1) {
    height: 12px;
}

.single-audio-wave span:nth-child(2) {
    height: 22px;
    animation-delay: .1s;
}

.single-audio-wave span:nth-child(3) {
    height: 28px;
    animation-delay: .2s;
}

.single-audio-wave span:nth-child(4) {
    height: 19px;
    animation-delay: .3s;
}

.single-audio-wave span:nth-child(5) {
    height: 10px;
    animation-delay: .4s;
}

@keyframes singleAudioWave {
    0%,
    100% {
        transform: scaleY(.65);
        opacity: .65;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.single-audio-player-card audio {
    width: 100%;
}

/* الوضع الليلي */

html.dark-mode .single-audio-reciter,
body.dark-mode .single-audio-reciter,
html.dark-mode .single-audio-player-card,
body.dark-mode .single-audio-player-card {
    background: rgba(12, 49, 60, .94);
    border-color: rgba(217, 183, 102, .15);
    box-shadow: none;
}

html.dark-mode .single-audio-surah,
body.dark-mode .single-audio-surah {
    background: linear-gradient(
        135deg,
        rgba(13, 52, 63, .96),
        rgba(10, 44, 54, .96)
    );
    border-color: rgba(217, 183, 102, .17);
}

html.dark-mode .single-audio-reciter-info h1,
body.dark-mode .single-audio-reciter-info h1,
html.dark-mode .single-audio-player-head strong,
body.dark-mode .single-audio-player-head strong {
    color: #f2f6f7;
}

html.dark-mode .single-audio-reciter-info p,
body.dark-mode .single-audio-reciter-info p,
html.dark-mode .single-audio-surah p,
body.dark-mode .single-audio-surah p,
html.dark-mode .single-audio-player-head span,
body.dark-mode .single-audio-player-head span {
    color: #aab8bd;
}

html.dark-mode .single-audio-surah h2,
body.dark-mode .single-audio-surah h2 {
    color: #69d4e5;
}

@media (max-width:480px){

.single-audio-reciter{
    padding:14px;
    border-radius:22px;
}


.single-audio-image{
    width:88px;
    height:88px;
    flex-basis:88px;
    border-radius:20px;
}


.single-audio-reciter-info h1{
    font-size:22px;
}


.single-audio-surah{
    padding:18px;
}


.single-audio-surah h2{
    font-size:28px;
}


.single-audio-surah p{
    display:none;
}


.single-audio-player-card{
    padding:15px;
}


.single-audio-player-head{
    margin-bottom:10px;
}


.single-audio-player-head strong{
    font-size:20px;
}

}
/* =====================================
   رأس صفحة سور القارئ والبحث
   ===================================== */

.reciter-surahs-page {
    padding-top: 18px;
    padding-bottom: 130px;
}

.reciter-surahs-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid rgba(14, 107, 130, .12);
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .96),
            rgba(239, 248, 250, .94)
        );
    box-shadow: 0 14px 36px rgba(18, 67, 82, .08);
}

.reciter-surahs-intro-copy {
    min-width: 0;
    flex: 1;
}

.reciter-surahs-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 16px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(180, 147, 69, .12);
    color: #aa8837;
    font-size: 13px;
    font-weight: 900;
}

.reciter-surahs-intro h1 {
    margin: 0 0 7px;
    color: #08758d;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.25;
}

.reciter-surahs-intro p {
    max-width: 430px;
    margin: 0;
    color: #849198;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.8;
}

.reciter-surahs-count {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    background: #087f96;
    color: #fff;
    box-shadow: 0 12px 26px rgba(8, 117, 141, .18);
}

.reciter-surahs-count strong {
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
}

.reciter-surahs-count span {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 800;
}

.reciter-surahs-search {
    margin-bottom: 20px;
}

.reciter-surahs-search-box {
    position: relative;
    min-height: 62px;
    overflow: hidden;
    border: 1px solid rgba(14, 107, 130, .10);
    border-radius: 23px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 28px rgba(18, 67, 82, .07);
}

.reciter-surahs-search-box input {
    width: 100%;
    height: 62px;
    padding: 0 24px 0 64px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #293b42;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
}

.reciter-surahs-search-box input::placeholder {
    color: #929da2;
    opacity: 1;
}

.reciter-surahs-search-icon {
    position: absolute;
    top: 50%;
    left: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #08758d;
    transform: translateY(-50%);
    pointer-events: none;
}

/* الوضع الليلي */

html.dark-mode .reciter-surahs-intro,
body.dark-mode .reciter-surahs-intro {
    background:
        linear-gradient(
            135deg,
            rgba(12, 49, 60, .96),
            rgba(10, 43, 53, .96)
        );
    border-color: rgba(217, 183, 102, .15);
    box-shadow: none;
}

html.dark-mode .reciter-surahs-intro h1,
body.dark-mode .reciter-surahs-intro h1 {
    color: #f2f6f7;
}

html.dark-mode .reciter-surahs-intro p,
body.dark-mode .reciter-surahs-intro p {
    color: #aab7bc;
}

html.dark-mode .reciter-surahs-count,
body.dark-mode .reciter-surahs-count {
    background: #0b839a;
}

html.dark-mode .reciter-surahs-search-box,
body.dark-mode .reciter-surahs-search-box {
    background: #142d36;
    border-color: rgba(217, 183, 102, .16);
    box-shadow: none;
}

html.dark-mode .reciter-surahs-search-box input,
body.dark-mode .reciter-surahs-search-box input {
    color: #f3f6f7;
}

html.dark-mode .reciter-surahs-search-box input::placeholder,
body.dark-mode .reciter-surahs-search-box input::placeholder {
    color: #9eabb0;
}

html.dark-mode .reciter-surahs-search-icon,
body.dark-mode .reciter-surahs-search-icon {
    color: #69d4e5;
}

@media (max-width: 480px) {
    .reciter-surahs-intro {
        padding: 20px;
        gap: 14px;
        border-radius: 25px;
    }

    .reciter-surahs-intro h1 {
        font-size: 26px;
    }

    .reciter-surahs-intro p {
        font-size: 13px;
        line-height: 1.7;
    }

    .reciter-surahs-count {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
        border-radius: 21px;
    }

    .reciter-surahs-count strong {
        font-size: 23px;
    }

    .reciter-surahs-search-box,
    .reciter-surahs-search-box input {
        min-height: 58px;
        height: 58px;
    }
}