/* ==========================================================================
   0. DESIGN TOKENS — Unified CSS Custom Properties
   Single source of truth for Web, Flutter App, Flutter Desktop.
   Maps to Flutter ThemeData / M3 ColorScheme / TextTheme.
   ========================================================================== */
:root {
    /* ── Color: Primary ── */
    --color-primary:              #1565c0;
    --color-primary-light:        #42a5f5;
    --color-primary-container:    #d3e3fd;
    --color-on-primary:           #fff;
    --color-on-primary-container: #041e49;

    /* ── Color: Secondary (Green — success, nature) ── */
    --color-secondary:              #2e7d32;
    --color-secondary-container:    #ccefd0;
    --color-on-secondary:           #fff;
    --color-on-secondary-container: #0a3d0a;

    /* ── Color: Tertiary (Islamic gold) ── */
    --color-tertiary:              #8b6914;
    --color-tertiary-container:    #fff0c7;
    --color-on-tertiary:           #fff;
    --color-on-tertiary-container: #3d2e00;

    /* ── Color: Error ── */
    --color-error:              #c62828;
    --color-error-container:    #ffdad6;
    --color-on-error:           #fff;
    --color-on-error-container: #410002;

    /* ── Color: Neutral surfaces ── */
    --color-background:       linear-gradient(81deg, #e4edfe 0%, #e6e9fd 100%);
    --color-surface:          #fff;
    --color-surface-variant:  #f8fafd;
    --color-surface-dim:      #f0f0f0;
    --color-surface-bright:   #fcfdff;
    --color-surface-container:     #f5f7fc;
    --color-surface-container-low: #faf8f4;

    /* ── Color: Text ── */
    --color-on-surface:         #444;
    --color-on-surface-variant: #5a5a5a;
    --color-on-background:      #444;

    /* ── Color: Outline / Border ── */
    --color-outline:         #e0e4f0;
    --color-outline-variant: #e8e0d0;

    /* ── Color: Special / Accent ── */
    --color-accent-purple: #8a2be2;
    --color-accent-orange: #ef6c00;
    --color-accent-teal:   #00695c;
    --color-accent-indigo: #5c6bc0;
    --color-shadow:        rgba(0,0,0,0.08);

    /* ── Typography: Font families ── */
    --font-bn:            'Tiro Bangla', sans-serif;
    --font-arabic:        'Scheherazade New', serif;
    --font-heading:       'Tiro Bangla', Georgia, serif;
    --font-body:          'Tiro Bangla', Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-menu:          'Prompt', sans-serif;
    --font-quran-display: 'Nooheri', 'Scheherazade New', serif;
    --font-ui:            'Hind Siliguri', 'Tiro Bangla', sans-serif;

    /* ── Typography: Font sizes (M3 type scale) ── */
    --text-3xs: 9.5px;  /* badge / overline-small */
    --text-2xs: 10px;   /* placeholder / overline */
    --text-root: 12px;  /* label-small-alt / html base */
    --text-xs:  11px;   /* label-small */
    --text-sm:  13px;   /* body-small */
    --text-14:  14px;   /* label-large / body-small-plus */
    --text-md:  15px;   /* body-medium */
    --text-base: 16px;  /* body-large */
    --text-lg:  17.5px; /* title-small */
    --text-18:  18px;   /* title-small-plus */
    --text-xl:  20px;   /* title-medium */
    --text-22:  22px;   /* title-medium-plus */
    --text-2xl: 23px;   /* title-large */
    --text-3xl: 24px;   /* headline-small */

    /* ── Typography: Line heights ── */
    --lh-body:    1.22857; /* default body */
    --lh-content: 1.6;     /* content text, paragraphs */
    --lh-arabic:  1.8;     /* Arabic text blocks */
    --lh-library: 1.95;    /* library content */
    --lh-mushaf:  2.6;     /* Mushaf display mode */
    --lh-mushaf-bn: 2.2;   /* Mushaf Bengali */
    --lh-tooltip: 1.7;     /* tooltip / popup text */
    --lh-heading: 1.5;     /* headings */

    /* ── Typography: Letter spacing ── */
    --ls-label: 0.4px;     /* labels, badges, section headers */

    /* ── Typography: Content-specific (user-adjustable via JS) ── */
    --quran-ar-font-sz:  16px;
    --quran-bn-font-sz:  23px;
    --hadith-ar-font-sz: 20px;
    --hadith-bn-font-sz: 16px;
    --library-font-sz:   17.5px;

    /* ── Shape: Border radius ── */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  24px;
    --radius-3xl:  28px;
    --radius-full: 50%;

    /* ── Elevation: Box shadows ── */
    --elevation-0: none;
    --elevation-1: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --elevation-2: 0 2px 8px rgba(0,0,0,0.06);
    --elevation-3: 0 4px 12px rgba(0,0,0,0.08);
    --elevation-4: 0 8px 24px rgba(0,0,0,0.12);
    --elevation-5: 0 12px 32px rgba(0,0,0,0.16);

    /* ── Spacing (4px base grid) ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Z-Index scale ── */
    --z-base:    1;
    --z-sticky:  100;
    --z-header:  200;
    --z-sidebar: 300;
    --z-footer:  350;
    --z-overlay: 400;
    --z-modal:   500;
    --z-toast:   600;
    --z-audio:   700;

    /* ── Motion / Animation ── */
    --duration-short:  150ms;
    --duration-medium: 300ms;
    --duration-long:   500ms;
    --easing-standard:    cubic-bezier(0.2, 0, 0, 1);
    --easing-decelerate:  cubic-bezier(0, 0, 0, 1);
    --easing-accelerate:  cubic-bezier(0.3, 0, 1, 1);
    --easing-emphasized:  cubic-bezier(0.2, 0, 0, 1);

    /* ── Breakpoint references (can't use in @media, for JS/doc) ── */
    /* --bp-sm: 600px; --bp-md: 768px; --bp-lg: 1094px; --bp-xl: 1220px; --bp-2xl: 1566px; */

    /* ── Legacy compatibility aliases ── */
    --logo-bg:           var(--color-primary);
    --surah-text:        var(--color-on-surface);
    --grey-light-border: var(--color-outline);
    --swipe-opacity:     0;

    /* ── M3 tokens (global — used by settings panel, chips, etc.) ── */
    --m3-primary:                var(--color-primary);
    --m3-on-primary:             var(--color-on-primary);
    --m3-outline:                #79747e;
    --m3-surface-variant:        #e7e0ec;
    --m3-on-surface:             #1d1b20;
    --m3-secondary-container:    var(--color-primary-container);
    --m3-on-secondary-container: var(--color-on-primary-container);
    --m3-on-surface-variant:     #49454f;

    /* ── Component: Badge / Pill ── */
    --badge-bg:            #f0f4ff;
    --badge-color:         var(--color-accent-indigo);
    --badge-border:        #d0d8f0;
    --badge-radius:        15px;
    --badge-font-size:     var(--text-sm);
    --badge-font-weight:   600;
    --badge-bg-green:      #e8f5e9;
    --badge-bg-blue:       #e3f2fd;
    --badge-bg-orange:     #fff3e0;
    --badge-bg-purple:     #f3e5f5;
    --badge-text-orange:   #e65100;
    --badge-text-purple:   #7b1fa2;

    /* ── Component: Icon Button ── */
    --icon-btn-color:      #888;
    --icon-btn-hover-bg:   rgba(0,0,0,0.07);

    /* ── Component: Bottom Sheet / Modal ── */
    --sheet-bg:            var(--color-surface);
    --sheet-radius:        24px 24px 0 0;
    --sheet-shadow:        0 -4px 20px rgba(0,0,0,0.15);
    --scrim-bg:            rgba(0,0,0,0.45);

    /* ── Component: Sticky Header ── */
    --sticky-bg:           #fafafa;
    --sticky-border:       1px solid #dee2e6;
    --sticky-shadow:       0 2px 4px rgba(0,0,0,0.08);

    /* ── Component: Card ── */
    --card-bg:             var(--color-surface);
    --card-border:         1px solid var(--color-outline);
    --card-shadow:         var(--elevation-2);

    /* ── Component: Input / Form ── */
    --input-border:        1px solid var(--color-outline);
    --input-radius:        var(--radius-xl);

    /* ── Component: FAB ── */
    --fab-shadow:          0 4px 8px rgba(0,0,0,0.3);
    --fab-size:            48px;

    /* ── Legacy aliases (used by inline PHP styles) ── */
    --primary:             var(--color-primary);
    --primary-light:       var(--color-primary-light);
    --primary-dark:        #0d47a1;
    --secondary:           var(--color-secondary);
    --surface:             var(--color-surface);
    --background:          var(--color-background, #fff);
    --text-primary:        var(--color-on-surface);
    --text-secondary:      var(--color-on-surface-variant);
    --border:              var(--color-outline);
}

/* ==========================================================================
   1. BASE STYLES & TYPOGRAPHY
   ========================================================================== */
html {
    height: 100%;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    font-size: var(--text-root);
    scroll-behavior: smooth;
}

*, :after, :before {
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(81deg, #e4edfe 0%, #e6e9fd 100%);
    min-height: 100%;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 1.22857;
    padding-top: 38px;
    margin: 0;
    color: var(--color-on-surface);
}

h1, h2, h3, h4, h5, h6 {
     font-weight: 500;
}

h2, h3, p { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }

a {
    color: inherit;
    text-decoration: none !important;
    background-color: transparent;
    outline: 0 !important;
    -webkit-tap-highlight-color: transparent;
}
a:hover, a:focus { text-decoration: none; outline: 0; }
a:active { color: #0d47a1; text-decoration: none; }

ul, ol {
    margin: 0 0 10px 0;
    padding-left: 0;
    list-style: none;
}
ul ul, ol>li>ol, ol>li>ul, ul>li>ol, ul>li>ul { margin-bottom: 0; }

audio, canvas, iframe, img, svg, video { vertical-align: middle; }
audio, canvas, video { max-width: 100%; height: auto; box-sizing: border-box; }
img, svg { max-width: 100%; height: 100%; }

svg:not(:root) { overflow: hidden; }

table { max-width: 100%; background-color: rgba(255, 255, 255, 0.84); }
table tbody { background-color: rgba(255, 255, 255, 0.42); }

label { display: inline-block; margin-bottom: 2px; font-weight: 700; }
hr { box-sizing: content-box; height: 0; margin: 6px 0 5px; border: 0; border-top: 1px solid #ddd; }

/* ==========================================================================
   2. SCROLLBARS
   ========================================================================== */
 
 ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

 ::-webkit-scrollbar-track {
    background-color: transparent;
}

 ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-xl);
}

 ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

 ::-webkit-scrollbar-button {
    display: none;
}

 ::-webkit-scrollbar-corner {
    background-color: transparent;
}

html {
    scrollbar-width: thin;
     
}

/* ==========================================================================
   3. CLEARFIX GROUPS
   ========================================================================== */
#header_main:after, #header_main:before, 
.uk-navbar:after, .uk-navbar:before, 
#sidebar_main .sidebar_main_header .sidebar_actions:after, 
#sidebar_main .sidebar_main_header .sidebar_actions:before,
.uk-tab:after, .uk-tab:before {
    content: " "; display: table;
}
#header_main:after, .uk-navbar:after, 
#sidebar_main .sidebar_main_header .sidebar_actions:after,
.uk-tab:after { clear: both; }

/* ==========================================================================
   4. HEADER & NAVBAR
   ========================================================================== */
#header_main {
    background: linear-gradient(28deg, #c5eff7, #95f3ff);
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
    border-bottom: 1px solid transparent;
    padding: 0 25px; height: 38px;
    position: fixed; left: 0; right: 0; top: 0;
    z-index: 1104;
}

.uk-navbar { background: transparent; color: var(--color-on-surface); border: 0; border-radius: var(--radius-xs); }
#header_main .uk-navbar .uk-navbar-nav { position: relative; }
#header_main .uk-navbar .uk-navbar-nav>li { position: static; }

#header_main .uk-navbar .uk-navbar-nav>li>a {
    color: #fff; text-shadow: none; border: 0;
    line-height: 44px; font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-sizing: border-box; height: 48px; cursor: pointer;
}
#header_main .uk-navbar .uk-navbar-nav>li>a:active, 
#header_main .uk-navbar .uk-navbar-nav>li>a:focus,
#header_main .uk-navbar .uk-navbar-nav>li.uk-active>a, 
#header_main .uk-navbar .uk-navbar-nav>li.uk-open>a, 
#header_main .uk-navbar .uk-navbar-nav>li:focus>a, 
#header_main .uk-navbar .uk-navbar-nav>li:hover>a { background: transparent; }

#header_main .uk-navbar .uk-navbar-nav>li>a:after {
    position: absolute; bottom: -2px; left: 50%;
    content: ""; display: block; height: 0; width: 0;
    border: 7px solid transparent; margin-left: -6px;
    z-index: -1; transition: all .1s ease-in 0s;
}
#header_main .uk-navbar .uk-navbar-nav>li.uk-open>a:after {
    border-bottom-color: var(--color-surface); z-index: 1104;
    transition: all 280ms cubic-bezier(.4,0,.2,1);
}
#header_main .uk-navbar .uk-navbar-nav>li>a.navbar_link { line-height: 48px; }
#header_main .uk-navbar .uk-navbar-nav>li.uk-open>a { position: relative; }

/* USER ACTIONS */
#header_main .user_actions .user_action_icon { display: block; position: relative; text-align: center; padding-top: 4px; }
#header_main .user_actions .user_action_icon:focus, 
#header_main .user_actions .user_action_icon:hover { text-decoration: none; }
#header_main .user_actions .user_action_icon>.uk-badge {
    background: rgba(0,0,0,.5); color: #fff; font-size: var(--text-xs); font-weight: 400;
    position: absolute; left: 0; top: 8px; min-width: 20px; padding: 1px 4px; line-height: 14px; border-radius: 2px;
}
#header_main .user_actions a.user_action_image { position: relative; line-height: 38px!important; }

/* SWITCH TOGGLE */
#header_main .sSwitch {
    display: block; cursor: pointer; margin: 12px 0 0; padding: 6px 0;
    position: relative; height: 2px; width: 20px; user-select: none;
}
#header_main .sSwitch:before {
    content: ""; position: absolute; top: -2px; width: 2px; height: 18px;
    background: rgba(255,255,255,.6); display: block; opacity: 0;
    transition: opacity 280ms cubic-bezier(.4,0,.2,1);
}
#header_main .sSwitch .sSwitchIcon, 
#header_main .sSwitch .sSwitchIcon:after, 
#header_main .sSwitch .sSwitchIcon:before {
    background: #4f54dc; display: block; height: 2px; width: 20px;
    transition: all .6s cubic-bezier(.4,0,.2,1);
}
#header_main .sSwitch .sSwitchIcon { position: relative; will-change: transform; user-select: none; }
#header_main .sSwitch .sSwitchIcon:after, #header_main .sSwitch .sSwitchIcon:before { content: ""; position: absolute; z-index: -1; }
#header_main .sSwitch .sSwitchIcon:before { top: 6px; }
#header_main .sSwitch .sSwitchIcon:after { top: -6px; }

#header_main .sSwitch.sSwitch_left { float: left; margin-right: 16px; }
#header_main .sSwitch.sSwitch_left:before { left: -8px; }
#header_main .sSwitch.sSwitch_right { float: right; margin-left: 30px; }
#header_main .sSwitch.sSwitch_right:before { right: -8px; }

#header_main .sSwitch.sSwitch_left .sSwitchIcon, 
#header_main .sSwitch.sSwitch_right .sSwitchIcon { transform: rotate(-180deg); }
#header_main .sSwitch.sSwitch_left .sSwitchIcon:after, #header_main .sSwitch.sSwitch_left .sSwitchIcon:before,
#header_main .sSwitch.sSwitch_right .sSwitchIcon:after, #header_main .sSwitch.sSwitch_right .sSwitchIcon:before { left: 0; right: 0; }

/* HEADER SEARCH */
#header_main .header_main_search_form {
    display: none; position: relative; padding: 2px 46px 0 40px; margin: 3px 0;
    background: rgba(208, 195, 72, 0.5);
}
#header_main .header_main_search_form form { display: block; position: static; }
#header_main .header_main_search_form .md-icon, 
#header_main .header_main_search_form .md-icon:focus, 
#header_main .header_main_search_form .md-icon:hover { color: #fff; }

#header_main .header_main_search_input {
    border: 0; width: 100%; box-sizing: border-box; border-radius: 0; vertical-align: top;
    padding: 6px 15px; font-size: var(--text-base); height: auto; background: rgba(208, 195, 72, 0.5); color: #fff;
}
#header_main .header_main_search_btn { position: absolute; top: 0; right: -2px; cursor: pointer; }
#header_main .header_main_search_close { position: absolute; top: 3px; left: 2px; }
#desktop-bookmark-toggle .mIconn { margin-top: 3px;}
.material-symbols-outlined:hover { color: #ff1e1e !important; background: #44444424; border-radius: var(--radius-full); cursor: pointer;}
.material-symbols-outlined { vertical-align: middle; transition: color 300ms, transform 300ms; }
/* ==========================================================================
   5. LAYOUT & PAGE CONTENT
   ========================================================================== */
.container { padding-left: 0; padding-right: 0; }
.main-content { background-color: transparent; padding: 1px 5px 40px; position: relative; }

/* Breadcrumb navigation — hidden visually, visible to crawlers/screen-readers */
.visible-breadcrumb { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

#page_content:before {
    content: ""; position: fixed; left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.3); display: block; opacity: var(--swipe-opacity, 0);
    transition: opacity .4s; z-index: -1;
}
/* During swipe-drag, show backdrop immediately without transition */
#page_content[data-swipe-progress]:before {
    transition: none; z-index: 1184;
}
/* During left sidebar drag-close, keep sidebar visible */
.sidebar_main_dragging #sidebar_main { transform: translate3d(0,0,0); }
#loadrequlist { height: 84vh; overflow-y: scroll; width: 100%; }
/*#content { margin-top: 8px; }*/
/* ==========================================================================
   6. SIDEBAR MAIN & SECONDARY
   ========================================================================== */
#sidebar_main {
    background: linear-gradient(90deg, #ebe6ff, #37fff9); background-size: 200% auto;
    width: 30em; position: fixed; height: 100%; top: 0; bottom: 0; left: 0;
    transform: translate3d(-30em,0,0); z-index: 1205;
    transition: transform 280ms cubic-bezier(.4,0,.2,1);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    content-visibility: hidden;
}

#sidebar_main .sidebar_main_header {
    width: 100%; height: 11.2em;
    background: linear-gradient(90deg, #ebe6ff, #37fff9) no-repeat -20px -124px;
    border-bottom: 1px solid rgba(0,0,0,.12); margin-bottom: 10px;
    box-shadow: 0 3px 12px rgba(0,0,0,.23), 0 3px 12px rgba(0,0,0,.16);
    top: 0; position: fixed; left: 0; z-index: 1500;
}
#sidebar_main .sidebar_main_header .sidebar_logo { height: 65px; line-height: 48px; overflow: hidden; }
#sidebar_main .sidebar_main_header .sidebar_logo a { display: inline; margin-left: 0; }
#sidebar_main .sidebar_main_header .sidebar_actions { margin: 0 20px; }

#sidebar_main .sidebar_main_header .sidebar_actions .selectize-control { float: left; height: 40px; }
#sidebar_main .sidebar_main_header .sidebar_actions .selectize-control .selectize-input:after { margin-top: -13px!important; right: 32px; }
#sidebar_main .sidebar_main_header .sidebar_actions .selectize-input { width: 48px; border: 0; padding: 6px 0; background: 0 0; }
#sidebar_main .sidebar_main_header .sidebar_actions .selectize-input input { user-select: none!important; }

#sidebar_main .sSidebar_show { display: none!important; }
#sidebar_main .menu_section { margin-top: 12.8em; height: calc(100vh - 150px); overflow: visible; }

.tabBody.uk-active {
    height: calc(100vh - 150px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}

#sidebar_main .menu_section ul, .search_list { padding: 0; margin: 0; list-style: none; }
#sidebar_main .menu_section>ul>li, .search_list>li { padding: 0; margin: 0; list-style: none; }

#sidebar_main .menu_section .menu_heading {
    font-weight: 400; font-size: var(--text-root); line-height: 16px; font-family: Roboto,sans-serif; margin: 0 0 12px;
    padding: 6px 6px 12px; border-bottom: 1px solid rgba(0,0,0,.12); text-transform: uppercase; color: #212121;
}

#sidebar_main .menu_section>ul>li>a {
    font-weight: 400; font-size: var(--text-14); line-height: 25px; font-family: var(--font-menu); padding: 6px 5px;
    display: block; overflow: hidden; color: var(--color-on-surface); position: relative;
}
#sidebar_main .menu_section>ul>li>a:hover { text-decoration: none; background: linear-gradient(135deg, #97ffd9, #59e6ff) !important; border-radius: 40px; }
#sidebar_main .menu_section>ul>li>a>.menu_icon { width: 48px; text-align: left; display: inline-block; color: #727272; }
#sidebar_main .menu_section>ul>li>a>.menu_icon .material-icons { font-size: var(--text-3xl); vertical-align: top; }
#sidebar_main .menu_section>ul>li>a .menu_title { display: inline-block; }
#sidebar_main .menu_section>ul>li>a .uk-badge { padding: 1px 4px; text-transform: uppercase; font-size: var(--text-2xs); position: absolute; left: 34px; top: 0; }

#sidebar_main .menu_section>ul>li.current_section>a .menu_title,
#sidebar_main .menu_section>ul>li.current_section>a>.menu_icon .material-icons { color: #7cb342; }
#sidebar_main .menu_section>ul>li.act_section.submenu_trigger>a { position: relative; background-color: rgba(85, 177, 239, 0.58); }
#sidebar_main .menu_section>ul>li.submenu_trigger>a, .sidebar_mini #sidebar_main .menu_section>ul>li { position: relative; }

#sidebar_main .menu_section>ul>li.submenu_trigger li.submenu_trigger>a:before, 
#sidebar_main .menu_section>ul>li.submenu_trigger>a:before {
    position: absolute; right: 8px; top: 9px; content: "\e913"; font-family: 'Material Icons';
    font-size: var(--text-18); display: block; color: #727272; transition: transform 280ms;
}
#sidebar_main .menu_section>ul>li.submenu_trigger li.submenu_trigger>a { position: relative; padding-right: 6px; }
#sidebar_main .menu_section>ul>li.submenu_trigger li.submenu_trigger>a:before { top: 7px; content: "\e5c5"; }
#sidebar_main .menu_section>ul>li.submenu_trigger li ul { margin-left: 3; }

#sidebar_main .menu_section>ul>li ul a {
    padding: 7px 6px; display: block; font-weight: 400; font-size: var(--text-14); line-height: 19px; font-family: var(--font-bn); color: #000;
    border-bottom: 1px solid rgba(138, 147, 255, 0.43); background-color: transparent; border-radius: 18px;
}
#sidebar_main .menu_section>ul>li ul a:hover, #sidebar_main .menu_section>ul>li ul li.act_item a {
    text-decoration: none; background: linear-gradient(135deg, #97ffd9, #59e6ff) !important; border-radius: 40px;
}
#sidebar_main .menu_section>ul>li ul li.act_item a { font-weight: 500; color: #040404; }
#sidebar_main .menu_section>ul>li ul li.menu_subtitle { font-weight: 500; font-size: var(--text-sm); color: #aaa; padding: 16px 0 4px 72px; }

#sidebar_main .menu_section>ul>li.act_section.submenu_trigger>a:before, 
#sidebar_main .menu_section>ul>li.submenu_trigger li.submenu_trigger.act_section>a:before { transform: rotate(-180deg); }

/* SIDEBAR SECONDARY */
#sidebar_secondary {
    position: fixed; right: 0; bottom: 0; top: 38px; transform: translate3d(288px,0,0);
    border-left: 1px solid #c4c7c5; width: 280px; background: var(--color-surface-variant);
    overflow-x: hidden; overflow-y: auto; z-index: 1205; box-shadow: var(--elevation-2);
    transition: transform 280ms cubic-bezier(.4,0,.2,1);
    content-visibility: hidden;
}
#sidebar_secondary .sidebar_secondary_wrapper { margin: 8px 16px; }
#sidebar_secondary.tabbed_sidebar { padding-top: 44px; }

/* ==========================================================================
   7. SIDEBAR ACTIVE & OPEN STATES
   ========================================================================== */
.sidebar_main_active #sidebar_main { transform: translate3d(0,0,0); content-visibility: visible; will-change: transform; }
.sidebar_main_active #header_main .sSwitch.sSwitch_left:before { opacity: 1; }
.sidebar_main_active #header_main .sSwitch.sSwitch_left .sSwitchIcon { transform: rotate(0); }
.sidebar_main_active #header_main .sSwitch.sSwitch_left .sSwitchIcon:after, 
.sidebar_main_active #header_main .sSwitch.sSwitch_left .sSwitchIcon:before { width: 12px; }
.sidebar_main_active #header_main .sSwitch.sSwitch_left .sSwitchIcon:before { top: 4px; transform: rotate(35deg); transform-origin: left top; }
.sidebar_main_active #header_main .sSwitch.sSwitch_left .sSwitchIcon:after { top: -4px; transform: rotate(-35deg); transform-origin: left bottom; }

.sidebar_secondary_active #sidebar_secondary { transform: translate3d(0,0,0); content-visibility: visible; will-change: transform; }
.sidebar_secondary_active:not(.steps) .sSwitch_right .sSwitchIcon:after, 
.sidebar_secondary_active:not(.steps) .sSwitch_right .sSwitchIcon:before { top: 0!important; }
.sidebar_secondary_active #header_main .sSwitch.sSwitch_right:before { opacity: 1; }
.sidebar_secondary_active #header_main .sSwitch.sSwitch_right .sSwitchIcon { transform: rotate(0); }
.sidebar_secondary_active #header_main .sSwitch.sSwitch_right .sSwitchIcon:after, 
.sidebar_secondary_active #header_main .sSwitch.sSwitch_right .sSwitchIcon:before { width: 12px; }
.sidebar_secondary_active #header_main .sSwitch.sSwitch_right .sSwitchIcon:before { top: 4px; transform: rotate(-35deg); transform-origin: right bottom; }
.sidebar_secondary_active #header_main .sSwitch.sSwitch_right .sSwitchIcon:after { top: -4px; transform: rotate(35deg); transform-origin: right top; }

.sidebar_main_active #chatbox_wrapper, .sidebar_main_open #chatbox_wrapper { left: 30em; }
.boxed_layout.sidebar_main_active #page_content, .boxed_layout.sidebar_main_open #page_content { padding-left: 30em; }

@media only screen and (max-width:1219px) {
    .sidebar_main_active #sidebar_main { box-shadow: 0 0 4px rgba(0,0,0,.14),2px 4px 8px rgba(0,0,0,.28); }
    .sidebar_main_active #page_content:before { opacity: 1; z-index: 1184; }
    .sidebar_main_hiding #page_content:before { opacity: 0; z-index: 1109; }
}
@media only screen and (min-width:1220px) {
    .sidebar_main_active #header_main, .sidebar_main_active #page_content, .sidebar_main_active #top_bar,
    .sidebar_main_open #header_main, .sidebar_main_open #page_content, .sidebar_main_open #top_bar { margin-left: 240px; }
    .sidebar_main_open #sidebar_main { transform: translate3d(0,0,0); content-visibility: visible; }
    .sidebar_main_open:not(.steps) .sSwitch_left .sSwitchIcon:after, .sidebar_main_open:not(.steps) .sSwitch_left .sSwitchIcon:before { top: 0!important; }
    .sidebar_main_open #header_main .sSwitch.sSwitch_left:before { opacity: 1; }
    .sidebar_main_open #header_main .sSwitch.sSwitch_left .sSwitchIcon { transform: rotate(0); }
    .sidebar_main_open #header_main .sSwitch.sSwitch_left .sSwitchIcon:after, .sidebar_main_open #header_main .sSwitch.sSwitch_left .sSwitchIcon:before { width: 12px; }
    .sidebar_main_open #header_main .sSwitch.sSwitch_left .sSwitchIcon:before { top: 4px; transform: rotate(35deg); transform-origin: left top; }
    .sidebar_main_open #header_main .sSwitch.sSwitch_left .sSwitchIcon:after { top: -4px; transform: rotate(-35deg); transform-origin: left bottom; }
}
@media only screen and (min-width:1094px) {
    .sidebar_main_active #header_main, .sidebar_main_active #page_content, .sidebar_main_active #top_bar,
    .sidebar_main_open #header_main, .sidebar_main_open #page_content, .sidebar_main_open #top_bar { margin-left: 30em; }
}

/* ==========================================================================
   8. CRITICAL FOUC GUARDS
   ========================================================================== */
.uk-modal, .uk-dropdown, .uk-dropdown-blank, .overlay, .bottom-sheet-container { display: none; }

/* Hide uk-dropdown when bottom sheet is open (mobile) */
@media (max-width: 768px) {
  body.bottom-sheet-active .uk-dropdown { display: none !important; }
  #sidebar_secondary { top: 0px; }
}

/* ==========================================================================
   9. TABS & SWITCHERS
   ========================================================================== */
.tabContainerBar {
    background-color: #f6f6f6; height: 5.3em; padding: .2em; border-bottom: .1em solid #e6e6e6; min-width: 30em!important;
}

.uk-tab { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(0,0,0,.12); }
.uk-tab>li { float: left; position: relative; margin: 0; z-index: 1; }
.uk-tab>li:nth-child(n+2)>a { margin-left: 5px; }

.uk-tab>li>a {
    color: #212121; font-weight: 500; float: left; display: block; height: 4.1em; cursor: pointer;
    border-radius: .9em .9em 0 0; font-size: var(--text-sm); text-transform: uppercase; border: 1px solid #dcdcdc;
    border-bottom: 2px solid transparent; min-width: 77px; max-width: 100%; text-align: center;
    transition: all 220ms cubic-bezier(.4,0,.2,1); padding: 3px!important; margin: 0!important;
    box-sizing: border-box; top: 1px; text-shadow: none; background-color: transparent; position: relative;
}

.uk-tab>li.uk-open>a, .uk-tab>li>a:focus, .uk-tab>li>a:hover {
    border-color: rgba(0,0,0,.06); color: #059; outline: 0; border-bottom-color: #b2dbfb;
}
.uk-tab>li.uk-open:not(.uk-active)>a, .uk-tab>li:not(.uk-active)>a:focus, .uk-tab>li:not(.uk-active)>a:hover {
    margin-bottom: 1px; padding-bottom: 7px;
}
.uk-tab>li.uk-disabled>a { color: #999; cursor: text; }
.uk-tab>li.uk-disabled.uk-active>a, .uk-tab>li.uk-disabled>a:focus, .uk-tab>li.uk-disabled>a:hover {
    background: transparent; border-color: transparent;
}
.uk-tab>li.uk-tab-responsive>a { margin-left: 0; margin-right: 0; }
.uk-tab>li.uk-active>a { color: var(--color-on-surface); border-width: 1px; border-style: solid; border-color: #db49ff #fb00ff #d2d2d2 #f009ff; }

.uk-tab-grid { border-bottom: none; position: relative; z-index: 0; margin-left: 1px; }
.uk-tab-grid:before { display: block; position: absolute; left: 5px; right: 0; bottom: -1px; border-top: 1px solid #ddd; z-index: -1; }
.uk-tab-grid>li:first-child>a { margin-left: 5px; }
.uk-tab-grid>li>a { text-align: center; }
.uk-tab-icons>li>a>.material-icons { font-size: var(--text-3xl); }

#sidebar_secondary .uk-tab { position: absolute; top: 0; left: 0; right: 0; z-index: 10; background: var(--color-surface); }
#sidebar_secondary .uk-switcher>li { padding: 16px 16px 0; }

.uk-switcher { margin: 0; padding: 0; list-style: none; touch-action: cross-slide-y pinch-zoom double-tap-zoom; overflow: hidden; }
.uk-switcher>:not(.uk-active) { display: none; }

/* ==========================================================================
   10. NAVBAR HELPERS
   ========================================================================== */
.overlay { position: fixed; width: 100%; left: 0; top: 0; height: 100%; background: rgba(0,0,0,.5); z-index: 1304; }
.bne-navbar-title { display: block; font-size: var(--text-sm); }

.material-icons {
    color: rgba(0,0,0,.54); font-family: 'Material Icons'; font-weight: 400; font-style: normal;
    display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga"; vertical-align: -7px; font-size: var(--text-base);
}
.uk-button-dropdown { display: inline-block; vertical-align: middle; position: absolute; cursor: pointer; }

/* ==========================================================================
   11. PROGRESS BARS, LOADERS & UTILITIES
   ========================================================================== */
.progresst { position: relative; height: 4px; overflow: hidden; background-clip: padding-box; background-color: #e3f2fd; margin: .5rem 0 1rem; }
.progresst .indeterminate { display: block; height: 100%; background-color: #008cfb; }
.progresst .indeterminate:after, .progresst .indeterminate:before {
    content: ""; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0;
    will-change: left,right; animation: indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite;
}
.progresst .indeterminate:after { animation: indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite; animation-delay: 1.15s; }

.custom-loader, #wait2 { width: 32px; height: 32px; border-radius: var(--radius-full); position: absolute; top: auto; left: 90%; padding: 2px; display: inline; z-index: 2000; margin-top: -40px; }
.custom-loader {
    width: 25px; height: 25px; background: conic-gradient(#0000 10%,#766df4);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0);
    mask: radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0);
    animation: s3 1s infinite linear;
}
#wait2 { border: 0 solid #000; }
#loader { display: block; margin: auto; }

.custom-loader2 { width: 240px; height: 44px; border-radius: 80px; color: #e4e4ed; border: 4px solid; position: relative; overflow: hidden; }
.custom-loader2::before {
    content: ""; position: absolute; margin: 4px; width: 28px; top: 0; bottom: 0; left: -40px;
    border-radius: inherit; background: #766df4; box-shadow: -20px 0 24px 6px #766df4;
    clip-path: polygon(0 5%,100% 0,100% 100%,0 95%,-60px 50%); animation: ct4 1s infinite linear;
}
.custom-loader3 {
    height: 6px; background: linear-gradient(#766df4 0 0),linear-gradient(#766df4 0 0),#e4e4ed;
    background-size: 60% 100%; background-repeat: no-repeat; animation: p6 3s infinite;
    background-color: #acece6; top: 0; position: fixed; width: 100%; z-index: 1300;
}

.hiddenContent, .hSettingPanel, .lSettingPanel, .hideRange { display: none; }
.uk-margin { margin-bottom: 15px; }
.uk-margin-remove { margin: 0!important; }
.uk-hidden { display: none!important; visibility: hidden!important; }
.uk-width-1-4 { width: 25%; }
.uldeign { border-bottom: 1px solid rgba(0,0,0,.25); }
.text-right { text-align: right; font-family: abel,sans-serif; }

.act_items { color: #000000; background-color: rgba(255,255,255,.73); }
.act_items a:active { color: #00f; }
.panel-body { padding: 5px; }
.slidecontainer { width: 100%; }
.BottomPadding { padding-bottom: 85px; }
@media screen and (min-width: 1220px) { .BottomPadding { padding-bottom: 20px; } }

/* SHARED: grassCard (used by quran + hadith + SWQ) */
.grassCard { background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.7); border-left-color: rgba(255,255,255,.3); border-top-color: rgba(255,255,255,.3); content-visibility: auto; contain-intrinsic-size: auto 350px; }
/* SHARED: arabicText base — font-size uses CSS var, slider-compatible */
.arabicText { margin-bottom: 8px; direction: rtl; font-size: var(--quran-ar-font-sz, 17px); font-family: var(--font-arabic); line-height: 1.8; text-align: right; }

#menuTopNav .material-symbols-outlined { font-size: 30px; }
#searchForm .material-symbols-outlined { font-size: var(--text-root); }

.mIconn { opacity: 0.55; height: 30px; width: 30px; }
.mIconn path { stroke-width: 1; }
.uk-tab > li.uk-active .mIconn { opacity: 1; }
.uk-tab > li.uk-active .mIconn use { color: var(--logo-bg, #1a73e8); }
.mIconnTopBar { filter: invert(22%) sepia(13%) saturate(1159%) hue-rotate(141deg) brightness(94%) contrast(90%); height: 35px; width: 35px; }

/* ── Unified Navbar Icon System ── */
.nav-icon-btn { color: var(--color-on-surface); }
.nav-top-svg { width: 26px; height: 26px; fill: currentColor; filter: none; transition: color .2s ease, transform .15s ease; }
.nav-icon-btn:hover .nav-top-svg,
.nav-icon-btn:hover { color: var(--color-secondary); }
.nav-icon-btn:active .nav-top-svg { transform: scale(0.9); }
[data-theme="dark"] .nav-icon-btn { color: var(--dm-text-secondary); }
[data-theme="dark"] .nav-icon-btn:hover,
[data-theme="dark"] .nav-icon-btn:hover .nav-top-svg { color: var(--dm-accent-green); }

/* Top bar icon click feedback */
#header_main .user_action_icon,
#sidebar_secondary_toggle { position: relative; border-radius: var(--radius-full); transition: background 0.15s; }
#header_main .user_action_icon:active,
#sidebar_secondary_toggle:active { background: rgba(0,0,0,0.1); box-shadow: 0 0 0 8px var(--color-shadow); }
.arrow { border: solid #7cb342; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(45deg); margin-left: 5px; }
.down { transform: rotate(45deg); }
/* Fix: prevent quran CSS flex-column from breaking highlighted search terms into separate lines */
[data-bubble-ctx="search"] ~ * .trans-verse.translationText { display: block !important; }
[data-bubble-ctx="search"] ~ * .transLationTitle { display: block !important; }

.uk-nav li>a { display: block; text-decoration: none; }
.uk-nav>li>a { padding: 2px 10px; }
.mLogo { height: 66px; width: 329px; }
.ayah-bulletss { margin-left: 12px; flex-shrink: 0; }

/* ========================================================
   DROPDOWN 3-DOT ICON — core: applies on ALL pages
   ======================================================== */
i.showDropDown, buttons.showDropDown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    font-size: 0; /* prevent material-icons font fallback text */
}
i.showDropDown::after, buttons.showDropDown::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5.5' r='2' fill='%23555'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23555'/%3E%3Ccircle cx='12' cy='18.5' r='2' fill='%23555'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#respon .ayah { width: 100%; }

.hiLiAnyItemOnHover { transition: color .3s ease, background-color .3s ease, transform .2s ease; cursor: pointer; }
.hiLiAnyItemOnHover:hover { background-color: rgba(0,0,0,.06); color: var(--color-primary); transform: translateY(-1px); }
.rl { transform: translateY(-3px); }
.ald { padding: 5px 2px 5px 9px!important; display: block; font-size: var(--text-sm)!important; color: #000; border-bottom: 1px solid #b4adad!important; background-color: rgba(255, 255, 255, 0.75); }

.ir { display: block; overflow: visible; padding: 0 0 100%; position: relative; height: 0; width: 100%; }
.ir > * { position: absolute; height: 100%; width: 100%; top: 0; left: 0; }
.soc { display: block; font-size: 0; list-style: none; margin: 0 auto 10px; padding: 0; text-align: center; width: 100%; max-width: 100%; }
.soc li { display: inline-block; margin: 1rem; }
.soc a, .soc svg { display: block; }
.soc a { height: 4.6rem; width: 4.6rem; }

[class^="icon-"]:hover { border-radius: 100%; fill: #0e1a25; transform: scale(1.25); transition: background-color 0.5s, transform 0.5s ease-out; }
.icon-10 { fill: #26d926; } .icon-10:hover { background: #26d926; }
.icon-15 { fill: #26d9d9; } .icon-15:hover { background: #26d9d9; }
.icon-26 { fill: #d926b5; } .icon-26:hover { background: #d926b5; }
.icon-28 { fill: #d9266e; } .icon-28:hover { background: #d9266e; }

/* ==========================================================================
   12. MOBILE FOOTER (Bottom Tab)  — Emil-style: frosted glass, no gradient
   ========================================================================== */
nav .mobile-footer {
    box-shadow: 0 -1px 3px rgba(0,0,0,.06);
    border-radius: 0; margin-bottom: 0;
}
.mobile-footer {
    position: fixed; width: 100%; height: 5rem; color: #FFF; font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 0; background: #1a1a1a;
    overflow: hidden;
}
.mobile-footer a {
    position: relative; overflow: hidden; width: 20%; height: 100%; display: inline-flex; float: left;
    padding: 0; color: currentColor; font-size: 1rem; letter-spacing: 0.01em; text-align: center;
    text-decoration: none; text-indent: 0; text-overflow: ellipsis; white-space: nowrap;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
/* hover only for pointer devices */
@media (hover: hover) and (pointer: fine) {
    .mobile-footer a:hover { background-color: rgba(128,128,128,0.12); }
    .mobile-footer a:hover svg { transform: scale(1.08); opacity: 0.75; }
}
.mobile-footer a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.mobile-footer a:active { transform: scale(0.92); }
.mobile-footer a svg {
    position: relative; fill: currentColor; top: auto; left: auto; width: 29px; height: 29px;
    flex-shrink: 0; opacity: 1; pointer-events: none;
}
.mobile-footer a.active {
    color: var(--color-primary); font-weight: 600; background-color: transparent; border-radius: 0; transition-delay: 0s;
}
.mobile-footer a.active svg { transform-origin: center bottom; opacity: 1; transform: scale(1); fill: var(--color-primary); }
.mobile-footer a.traversing svg { transition-delay: 0s; animation: 0.15s traversing ease-out both; }
.mobile-footer .line {
    position: absolute; left: 0; top: 0; width: auto; height: 3px; text-indent: -9999rem;
    transform: translateX(-50%); border-radius: 1.5px; background: var(--color-primary);
    transition: left 0.4s cubic-bezier(0.23,1,0.32,1); z-index: 10;
}
.mobile-footer.light {   
    color: var(--color-on-surface);
    background: var(--color-surface);
    z-index: 1206; box-shadow: 0px -1px 3px 2px var(--color-shadow);
    bottom: 0; left: 0; right: 0; border-radius: 0;border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.mobile-footer.light svg { fill: var(--color-on-surface); }
.mobile-footer.light a { color: var(--color-on-surface); }
.mobile-footer.light a.active { color: var(--color-primary); }
.mobile-footer.light a.active svg { fill: var(--color-primary); }
.mobile-footer.primary { background: var(--color-primary); color: #FFF; }
.mobile-footer.primary svg { fill: #FFF; }

/* HOME tab — clean solid style */
.mobile-footer .tab-home-btn .icon {
    background: var(--color-primary);
    border-radius: var(--radius-full);
    fill: #fff !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.3);
    padding: 5px; width: 30px; height: 30px;
}
.mobile-footer.light .tab-home-btn .icon { fill: #fff !important; }
.mobile-footer .tab-home-btn.active { background-color: transparent; }





/* ================================================
   MOBILE BUBBLE QUICK MENU (above mobile footer)
   ================================================ */
#mobile-bubble-menu {
    position: fixed;
    bottom: calc(4.2rem + 14px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1204;
    display: none;
    pointer-events: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
#mobile-bubble-menu.bbl-scroll-hidden,
#mobile-bubble-menu.bbl-menu-hidden {
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    pointer-events: none;
}
.bubble-pill {
display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50px;
    padding: 0px 10px;
    gap: 4px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.07);
    white-space: nowrap;
}
.bubble-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
    padding: 0;
}
.bubble-item.bbl-hidden { display: none !important; }
.bubble-item:hover, .bubble-item:focus { background: rgba(0,0,0,0.07); outline: none; }
.bubble-item .icon {
    width: 22px !important;
    height: 22px !important;
    fill: #333;
    position: static !important;
    left: auto !important;
    top: auto !important;
}
.bubble-sep {
    display: block;
    width: 1px;
    height: 26px;
    background: rgba(0,0,0,0.12);
    flex-shrink: 0;
    margin: 0 2px;
}

/* ── Font Size Quick Sheet (bubble menu) ── */
#bbl-font-sheet-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,.35); z-index: 1300;
    transition: opacity .25s ease;
}
#bbl-font-sheet-overlay.active { display: block; }
#bbl-font-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--color-surface); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    box-shadow: var(--elevation-4);
    transform: translateY(100%); transition: transform .3s var(--easing-standard);
    max-width: 500px; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom, 0);
}
#bbl-font-sheet-overlay.active #bbl-font-sheet { transform: translateY(0); }
.bfs-handle {
    width: 36px; height: 4px; border-radius: 2px; background: #ccc;
    margin: 10px auto 4px;
}
.bfs-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 16px 8px; border-bottom: 1px solid #eee;
}
.bfs-header span {
    font-size: var(--text-md); font-weight: 600; color: var(--color-on-surface); font-family: var(--font-bn);
}
.bfs-header button {
    background: none; border: none; font-size: var(--text-3xl); color: var(--icon-btn-color); cursor: pointer;
    width: 36px; height: 36px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
}
.bfs-header button:hover { background: rgba(0,0,0,.06); }
.bfs-body { padding: 12px 18px 20px; }
.bfs-slider-group { margin-bottom: 14px; }
.bfs-slider-group:last-child { margin-bottom: 0; }
.bfs-label {
    font-size: var(--text-sm); font-weight: 600; color: var(--color-on-surface-variant); font-family: var(--font-bn);
    margin-bottom: 4px; display: block;
}
.bfs-slider-row { display: flex; align-items: center; gap: 10px; }
.bfs-val {
    min-width: 40px; text-align: center; font-size: var(--text-root); color: #666;
    font-family: var(--font-bn); font-weight: 600;
}
.bfs-range {
    flex: 1; -webkit-appearance: none; appearance: none; height: 6px;
    border-radius: 3px; background: #e0e0e0; outline: none;
}
.bfs-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: var(--radius-full);
    background: var(--color-secondary); cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.bfs-range::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: var(--radius-full);
    background: var(--color-secondary); cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.bfs-slider-group.bfs-hidden { display: none; }

.searchResultTopBar {
    position: sticky; top: 0; z-index: 100; height: 36px; width: 97%; background-color: #e7cfff;
    text-align: center; font-size: var(--text-18); padding: 10px; border-radius: 21px; margin: 5px auto;
}
.load2TabHeaderTop {
    position: sticky; top: 0; z-index: 100; background: var(--sticky-bg);
    border-bottom: var(--sticky-border); box-shadow: var(--sticky-shadow);
}
.loading-spinner { font-size: var(--text-14); color: #666; padding: 10px; }

/* CONTENT AREA FIX + MISC */
#content { max-height: calc(100vh - 0px) !important; overflow-y: auto; }

/* ── Inline bookmark & action buttons (critical — pre-component load) ── */
.bmk-action-bookmark {
  border: none; background: none; cursor: pointer; padding: 4px;
  color: var(--icon-btn-color); border-radius: var(--radius-full); transition: color .2s, background .2s;
  display: inline-flex; align-items: center; justify-content: center;
}
.bmk-action-bookmark:hover { color: #ff9800; background: rgba(255,152,0,.08); }
.bmk-action-bookmark svg { pointer-events: none; }
.action-more-btn {
  border: none; background: none; cursor: pointer; padding: 4px 6px;
  color: var(--icon-btn-color); border-radius: var(--radius-full); transition: color .2s, background .2s;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-22); line-height: 1;
}
.action-more-btn:hover { color: #333; background: rgba(0,0,0,.06); }
@media (max-width: 767px) {
  .actionIconPart .itemx { display: none !important; }
  .library-breadcrumb-actions .bmk-action-bookmark { display: none; }
  .library-breadcrumb-actions .lib-copy-btn,
  .library-breadcrumb-actions .lib-share-btn { display: none; }
}
@media (min-width: 768px) {
  .action-more-btn { position: relative; }
}
[data-theme="dark"] .bmk-action-bookmark { color: var(--icon-btn-color); }
[data-theme="dark"] .bmk-action-bookmark:hover { color: var(--dm-accent-gold); }



/* ==========================================================================
   13. ANIMATIONS & KEYFRAMES
   ========================================================================== */
/* Desktop only: entrance animations disabled on mobile for performance */
@media (min-width: 1220px) {
    .animated, .animated2, .animated3 { animation-fill-mode: both; animation-timing-function: ease-in-out; }
    .animated { animation-duration: 1s; }
    .animated2, .animated3 { animation-duration: 2s; }
    .fadeInLeft { animation-name: fadeInLeft; }
    .fadeInUp { animation-name: fadeInUp; }
}

.ripple {
    position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden;
    transform: translateZ(0); border-radius: inherit; pointer-events: none;
    animation: ripple-shadow .4s forwards;
}

.contentPage { transition: transform 1s cubic-bezier(.23,1,.32,1) .5s,opacity .7s cubic-bezier(.23,1,.32,1) .2s; opacity: 1; transform: translate3d(0,0,0); transition-delay: .2s,.4s; }
.fadeInUp-animation { animation: .5s fadeInUp; opacity: 1; transition: .5s opacity ease-in,.8s transform ease; transform: translateY(0); }
[class^=uk-animation-] { animation-timing-function: cubic-bezier(.4,0,.2,1); animation-duration: 280ms; }

@keyframes indeterminate { 0% { left: -35%; right: 100%; } 60%,to { left: 100%; right: -90%; } }
@keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60%,to { left: 107%; right: -8%; } }
@keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ripple-shadow { 0%,to { box-shadow: 0 0 0 transparent; } 20% { box-shadow: 0 4px 16px rgba(0,0,0,.3); } }
@keyframes s3 { to { transform: rotate(1turn); } }
@keyframes ct4 { to { left: calc(100% + 40px); } }
@keyframes p6 { 0% { background-position: -150% 0,-150% 0; } 66% { background-position: 250% 0,-150% 0; } to { background-position: 250% 0,250% 0; } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes traversing { 0% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   14. MEDIA QUERIES (Combined & Organized)
   ========================================================================== */
@media screen and (min-width: 769px) {
    #filterInput { top: 0px; }
    .tab+label { padding: 8px; font-size: 1vw; }
    #sidebar_main .sidebar_main_header { height: 11.5em; }
}
/* Hide mobile nav elements only when sidebar becomes permanent */
@media screen and (min-width: 1220px) {
    .mobile-footer.light { display: none; }
    #mobile-bubble-menu { display: none !important; }
}

@media screen and (max-width: 768px) {
    #mobile-bubble-menu { display: block; }
    /* Hide standalone floating FABs — actions moved into bubble pill */
    #swq-floating-back-btn,
    #had-floating-back-btn,
    #lib-floating-search-btn { display: none !important; }
    /* Layout Overrides */
    #sidebar_main { width: 25em; }
    #sidebar_main .sidebar_main_header { height: 5.5em; }
    #sidebar_main .menu_section { margin-top: 6.8em; }
    #sidebar_main .menu_section ul .menuBottomMargin .quranMenu { margin-bottom: 65px; }
    #header_main { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }

    .tabContainerBar, .uk-dropdown-active { display: none !important; }
    .uk-tab>li>a { min-width: 67px; }
    .new-column { width: 100%; display: block; }
    .text-light { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
    #filterInput { top: 0px; }
    .ayat-sidebar { top: 110px !important; }
   

    html:not(.bne-accessible) a:focus { outline: 0; }
    a, a:active, a:focus, a:hover, a:visited { text-decoration: none; }

    #sidebar_secondary .sidebar_secondary_wrapper { margin-bottom: 80px importn !important; }
}

@media print {
    *, :after, :before { background: transparent!important; color: #000!important; box-shadow: none!important; text-shadow: none!important; }
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " ("attr(href)")"; }
    a[href^="#"]:after { content: ""; }
    
    #header_main, #sidebar_main, #sidebar_secondary, #style_switcher, .sidebar_main_active #header_main { 
        display: none!important; width: 0!important; height: 0!important; overflow: hidden!important; margin: 0!important; left: 0!important; 
    }
    #sidebar_main { left: -240px!important; }
    #page_content, body { overflow-y: visible!important; }
    #page_content { margin: 0!important; transition: none!important; }
    #page_content:before { display: none!important; }
    #page_content { height: auto!important; }
}

/* ==========================================================================
   DARK MODE TOGGLE BUTTON — base styles (always loaded, no lazy dependency)
   ========================================================================== */
#dark-mode-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 32px;
    height: 32px;
    transition: background 0.25s, color 0.25s;
    position: fixed;
    top: 3px;
    right: 230px;
    z-index: 1200;
    color: var(--color-on-surface);
}
#dark-mode-toggle:hover {
    background: rgba(127,127,127,0.15);
    color: var(--color-secondary);
}
#dark-mode-toggle .dm-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
    display: block;
    transition: transform .3s ease;
}
#dark-mode-toggle:active .dm-icon {
    transform: rotate(30deg);
}