:root {
    --primary-color: #004d40;
    --secondary-color: #1b5e20; /* Darker Green for secondary actions */
    --accent-color: #b2dfdb;
    --text-light: #ffffff;
    --text-dark: #212121; /* Darker text */
    --bg-light: #f0f2f5;
    --bg-card: #f7f3e8; /* Creamy parchment/Islamic scholarly background color */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --hover-shadow-color: rgba(0, 0, 0, 0.2);
    --gold-accent: #d4af37;
    --red-button-start: #E51A1A; /* CRITICAL: Solid Vibrant Red */
    --red-button-end: #CC1515; /* Slightly darker red for hover */
    --yellow-button-start: #00796b; /* replaced yellow with green tones */
    --yellow-button-end: #004d40;
    --modal-bg: rgba(0, 0, 0, 0.7);
    --loader-accent: #e51a1a;

    /* Header & Search Positioning Variables */
    --header-height: 64px;
    --header-search-gap: 10px;
    --search-bar-height: 60px;
    --search-bar-max-width: 700px;
    --search-bar-border-radius: 40px;
    --search-bar-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    --search-bar-focus-shadow: 0 0 20px var(--cyber-blue), 0 0 40px rgba(0, 255, 249, 0.3);
    --search-bar-transition-duration: 0.3s;

    --body-padding-top-offset: 12px;
    --body-content-offset-top: calc(var(--header-height) + var(--body-padding-top-offset));

    /* Go To Top Button Variables */
    --scroll-rotate-angle: 0deg;
    --go-to-top-bg: rgba(255, 0, 0, 0.8);
    --go-to-top-fill-color: #FFD700;
    --go-to-top-arrow-fill-color: #FFFFFF;

    /* Islamic Graphical Colors (Replacing Neon/Cyber) */
    --neon-green: #d4af37; /* New gold reference */
    --cyber-blue: #0d47a1; /* Deep Sapphire */
    --neon-purple: #1b5e20; /* Dark Emerald */
    --cyber-yellow: #ffee00;
    --electric-pink: #d4af37;
    --bright-orange: #ff8c00;

    /* Background Pattern Adjustments */
    --dot-bg-blur: 0.1px; /* Less blur */
    --dot-bg-bright: 1.05;
    --dot-bg-saturate: 1.2;

    /* @tweakable Card hover transform translateY value in pixels */
    --card-hover-translate-y: -10px;
    /* @tweakable Card hover scale factor */
    --card-hover-scale: 1.03;
    /* @tweakable Duration of card hover transitions in seconds */
    --card-hover-transition-duration: 0.45s;
    /* @tweakable Timing function for card hover transitions (smoother) */
    --card-hover-transition-timing: cubic-bezier(.22,1,.36,1);

    --card-fade-in-base-duration: 600ms;
    --card-fade-in-stagger-delay: 50ms;
    --card-dark-islamic-bg: rgba(26, 72, 58, 0.95); /* Rich Dark Green/Teal Islamic Card BG */
    --card-initial-fade-transition: opacity var(--card-fade-in-base-duration) ease-out, transform var(--card-fade-in-base-duration) ease-out;
    --card-animation-transition: opacity var(--card-fade-in-base-duration) ease-out, transform var(--card-fade-in-base-duration) ease-out;
    --scroll-threshold: 200px;
    --go-to-top-max-rotation: 90deg;
    --saved-panel-height: 360px; /* height used to offset the search when saved panel is open */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-light);
    color: var(--text-dark);
    position: relative;
    overflow-x: hidden;
    /* Use the calculated offset top */
    padding-top: var(--body-content-offset-top);
}

.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    /* Deep Space/Starry Night Background: Dynamic Nebula Effect (Deep Blue/Purple/Magenta/Cyan) */
    background: radial-gradient(circle at 15% 85%, #0e0524 0%, transparent 20%),
                radial-gradient(circle at 85% 15%, #1a0d33 0%, transparent 20%),
                radial-gradient(circle at 50% 50%, #0d1226 0%, transparent 50%),
                linear-gradient(135deg, #0d1226 0%, #1a0d33 50%, #0d1226 100%); 
    background-size: 200% 200%; /* Important for slow drift animation */
    background-position: 0% 0%;
    filter: brightness(1.2) saturate(1.5); 
    opacity: 1 !important; 
    /* Combined slow drift + subtle color change */
    animation: backgroundNebulaDrift 120s linear infinite alternate, 
               backgroundSubtleFlicker 60s linear infinite alternate !important;
}

@keyframes backgroundSubtleFlicker {
    0% { filter: brightness(1.05) saturate(1.2); }
    50% { filter: brightness(1.07) saturate(1.22); }
    100% { filter: brightness(1.05) saturate(1.2); }
}

@keyframes backgroundNebulaDrift {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

#tsparticles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

/* New CSS class for Floating Names of Allah (Layer 2) */
.floating-name {
    position: fixed; /* Use fixed positioning relative to viewport */
    font-family: 'Noto Naskh Arabic', sans-serif;
    font-size: 20px; /* Base size, adjusted by JS */
    color: #fef8df; /* Light Cream */
    -webkit-text-stroke: 0.8px rgba(0,0,0,0.18); /* stronger subtle stroke for contrast */
    mix-blend-mode: normal; /* force normal blend so names are not visually lost behind light/dark layers */
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.9), /* Soft white core */
        0 0 10px rgba(212, 175, 55, 0.45);   /* Gentle gold glow */
    opacity: 0; /* Start invisible, JS handles fade in to low opacity */
    pointer-events: none; /* Do not block clicks */
    will-change: transform, opacity, filter;
    transition: opacity 6s ease-out; 
    user-select: none;
    z-index: 10001 !important; /* Force on top of all UI so names never get visually hidden behind elements */
}

/* Sparkle/Glint effect animation (Task 3) - Refining glint to be subtle and quick, mimicking star twinkling */
@keyframes glint {
    0%, 100% {
        /* Base soft glow */
        text-shadow: 0 0 3px rgba(255, 255, 255, 0.7), 0 0 8px rgba(255, 215, 0, 0.4);
        filter: brightness(1) contrast(1);
    }
    50% {
        /* Brief, localized flash appearance - Simulating a sharp corner sparkle via intense light */
        text-shadow: 
            0 0 5px #ffffee, /* Intense white core */
            0 0 15px #FFFFF0, 
            0 0 25px rgba(255, 215, 0, 0.8), /* Strong gold halo */
            -3px 3px 0px #ffffff, /* Simulating a localized bright point */
            3px -3px 0px transparent; /* Opposite side dim */
        filter: brightness(3.0) contrast(1.5);
    }
}

.sparkle-active {
    animation: glint 0.15s ease-out 1; /* Short burst animation */
}

body::before {
    content: none; /* Removed subtle geometric pattern to prioritize cosmic look */
}

body > svg[width][height] {
    /* Hiding remnant SVG background if it exists, as we are now using .background-animation and #tsparticles */
    display: none !important;
}

/* New: Decorative Corner Ornament Styles (Part 1) */
.header-ornament {
    display: none; /* hide corner ornaments (removed white dots on banner sides) */
    position: fixed;
    top: 8px;
    width: 84px;
    height: 84px;
    z-index: 1005;
    background-image: url('ornamental_corner_design.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.28)) saturate(1.05);
}

.header-ornament.left {
    left: 0;
    transform: scaleX(1);
}

.header-ornament.right {
    right: 0;
    transform: scaleX(-1);
}

.islamic-top-banner {
    position: fixed;
    top: 0; /* banner now sits flush with the very top of the viewport */
    left: 50%;
    transform: translateX(-50%);
    width: min(1180px, calc(100% - 36px));
    height: 56px; /* reduced height for a slimmer banner */
    min-width: 0;
    background-color: #063026;
    z-index: 9999;
    pointer-events: auto;
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(2,10,8,0.35);
    border: 1px solid rgba(212,175,55,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 6px 14px; /* tightened padding to match reduced height */
    /* Pattern + gradient for subtle ornamental texture */
    background-image:
        url('islamic_tileable_pattern_dark.png'),
        linear-gradient(180deg, rgba(4,79,63,0.96), rgba(2,44,36,0.96));
    background-size: 220px 220px, cover;
    background-repeat: repeat, no-repeat;
    background-blend-mode: overlay, normal;
}

/* Inner layout for banner content */
.islamic-top-banner-inner {
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px; /* tightened padding for smaller banner */
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* small ornament left using existing ornamental asset for subtle decorative flair */
/* Hidden to remove the white-dot-like ornament from the banner */
.banner-ornament {
    /* show the small ornament so banner reads similar to card accents */
    display: none;
    width: 46px;
    height: 46px;
    background-image: url('ornamental_corner_design.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.95;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)) saturate(1.05);
    margin-right: 10px;
}

/* Banner text */
.banner-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #f9f6ea;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}

.banner-title {
    font-family: 'Roboto Slab', serif;
    font-size: 1.25rem; /* increased for clearer prominence */
    font-weight: 800;
    color: #ffdd40;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.banner-sub {
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem; /* reduced subtitle size */
    color: rgba(255, 237, 150, 0.95);
    margin-top: 2px;
    opacity: 0.95;
}

/* Make sure search stays above banner and spacing remains accurate */
header {
    /* Part 1: Make header minimal and transparent, keep fixed position and height for content offset calculation */
    background-color: transparent;
    backdrop-filter: none;
    color: var(--text-light);
    padding: 0;
    text-align: center;
    box-shadow: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100; 
    border-bottom: none; 
    overflow: hidden;
    height: var(--header-height); /* Keep height 120px to push search bar down */
    box-sizing: border-box;
    margin-bottom: 0;
}

header > *:last-child {
    margin-bottom: 0;
}

header::after {
    content: none;
}

#floating-search-bar-wrapper {
  position: fixed;
  top: 62px; /* Positioned directly below the compact banner */
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  width: 100%;
  max-width: var(--search-bar-max-width);
  z-index: 10050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.18, .89, .32, 1.28), visibility 0.3s;
  pointer-events: none;
  padding: 0 15px;
  box-sizing: border-box;
}

#floating-search-bar-wrapper.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

#search-back-button {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,245,196,0.95), rgba(255,236,139,0.98));
    border: 1px solid rgba(6,42,36,0.08);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.18) inset;
    padding: 6px;
    display: none;
    cursor: pointer;
    z-index: 101;
    transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.22s ease;
    backdrop-filter: blur(4px);
}
#search-back-button svg { display:block; width:22px; height:22px; margin:0; }
#search-back-button:hover {
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 10px 26px rgba(0,0,0,0.24), 0 0 18px rgba(212,175,55,0.08);
    background: linear-gradient(180deg, #fff7e0, #fff1c0);
}

.search-container {
    max-width: var(--search-bar-max-width);
    margin: 0 auto;
    /* Islamic-inspired parchment + deep-teal inset */
    background: linear-gradient(180deg, rgba(255,250,240,0.98), rgba(249,245,238,0.98));
    border-radius: calc(var(--search-bar-border-radius) + 6px);
    box-shadow: 0 12px 30px rgba(2,22,18,0.28), inset 0 1px 0 rgba(255,255,255,0.6);
    overflow: hidden;
    height: var(--search-bar-height);
    display: flex;
    align-items: center;
    padding: 0 18px 0 18px;
    position: relative;
    border: 2px solid rgba(212,175,55,0.12);
    /* subtle patterned trim using existing tileable asset for an Islamic feel */
    background-image:
        linear-gradient(180deg, rgba(255,250,240,0.98), rgba(249,245,238,0.98)),
        url('islamic_tileable_pattern_dark.png');
    background-blend-mode: normal, multiply;
    background-size: 120px 120px;
    transition:
        box-shadow var(--search-bar-transition-duration) ease,
        transform 0.21s cubic-bezier(.84,.11,.66,1.08), border-color 0.28s ease;
    gap: 8px;
    justify-content: space-between;
}

.search-container::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 200%; height: 100%;
    /* Subtle green/teal shine instead of yellow/gold */
    background: linear-gradient(90deg, rgba(0,77,64,0.12) 0%, rgba(0,77,64,0.10) 24%, rgba(0,120,90,0.09) 100%);
    opacity: 0.85;
    pointer-events: none;
    transition: left 0.9s cubic-bezier(.2,.9,.2,1); /* smoother, slower, more natural easing */
    z-index: 0;
    will-change: left, opacity; /* hint for smoother animation */
}

.search-container:focus-within::before {
    left: 0;
    transition: left 0.9s cubic-bezier(.2,.9,.2,1); /* keep consistent */
}

.search-container:focus-within {
    transform: scale(1.02);
    border-color: var(--gold-accent);
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.15),
        0 0 0 4px rgba(212, 175, 55, 0.1);
}

.search-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 12px;
    color: var(--gold-accent);
    transition: transform 0.3s ease, color 0.3s ease;
}

.search-container:focus-within .search-icon-wrapper {
    transform: rotate(15deg) scale(1.1);
    color: var(--primary-color);
}

#search-bar {
    width: 100%;
    border: none;
    outline: none;
    padding: 0;
    font-size: 1.1em;
    background: none;
    color: var(--text-dark);
    font-family: 'Roboto Slab', serif;
    font-weight: 400; /* thinner search text as requested */
    height: 100%;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

#search-bar:focus {
    color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0,120,90,0.25); /* green focus ring instead of gold */
    background: none;
    outline: none;
    transition: color 0.22s ease, box-shadow 0.28s ease; /* smoother focus transitions */
}

#search-bar::placeholder {
    color: #83a7b4;
    transition: color 0.33s cubic-bezier(.84,.11,.66,1.08);
}

#search-bar:focus::placeholder {
    color: var(--primary-color);
    opacity: 1;
}

.bukhari-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 40px;
    max-width: 1300px;
    margin: 0 auto;
    isolation: isolate;
    position: relative;
    min-height: 200px;
}

.bukhari-card {
    /* Part 2: Card background with Islamic Naksha pattern */
    background-color: rgba(0, 30, 24, 0.9); /* Darker base for pattern visibility */
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--shadow-color);
    padding: 25px;
    text-align: center;
    transition: transform var(--card-hover-transition-duration) var(--card-hover-transition-timing), box-shadow var(--card-hover-transition-duration) ease-in-out, opacity 0.5s cubic-bezier(.66,.05,.37,.88), border-color 220ms ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 360px;
    opacity: 1;
    transform-origin: center bottom;
    will-change: transform, box-shadow, opacity;
    border: 2px solid var(--gold-accent); /* Kept gold border */
    position: relative;
    overflow: hidden;
    /* Added backdrop-filter for glass effect when names pass behind */
    backdrop-filter: blur(1.5px) brightness(1.1); 
    
    /* Naksha Pattern Application */
    background-image: url('islamic_tileable_pattern_dark.png'), linear-gradient(180deg, rgba(0, 30, 24, 0.9), rgba(0, 15, 12, 0.95));
    background-size: 150px 150px, 100% 100%; /* Smaller tile size for cards */
    background-blend-mode: overlay, normal;
    background-repeat: repeat, no-repeat;
}

/* Pseudo-element for the graphical Islamic pattern (CRITICAL: REMOVE OLD ::before) */
.bukhari-card::before {
    content: none;
    position: relative;
    background-image: none;
}

/* Add a subtle gold ornamental vertical bar on left to evoke Kaba/gilded binding */
.bukhari-card::after {
    content: none; /* Remove the left/right gold vertical bars */
}

/* Hover highlight (instant while hovering) */
.bukhari-card:hover::before,
.bukhari-card.pattern-highlight::before {
    filter: none;
    transform: none;
    opacity: 1;
}

/* Locked state after 5s hold — persists briefly after mouse leave */
.bukhari-card.pattern-locked::before {
    filter: none;
    transform: none;
    transition-duration: 0.35s;
}

/* Ensure only hover enlarges the card image; remove permanent scaling from pattern classes */
.bukhari-card.pattern-highlight .card-image,
.bukhari-card.pattern-locked .card-image {
    transform: translateZ(0);
    transition: transform 0.45s cubic-bezier(.2,.9,.3,1);
}

/* Dim non-hovered cards to emphasize the active one (but keep visible) */
.bukhari-card.dimmed {
    /* Removed dimming so patterns remain always visible as requested */
    opacity: 1;
    transform: none;
    transition: none;
}

/* Ensure content is above the pseudo-element pattern */
.bukhari-card > * {
    position: relative;
    z-index: 1;
}

.bukhari-card.hidden-by-search {
    display: none;
}

.bukhari-card.animating, .bukhari-card.slide-in-top, .bukhari-card.slide-in-fade {
    z-index: 2;
}

.bukhari-card.slide-in-top {
    animation: slideInFromTop 0.42s cubic-bezier(.5,1.9,.55,1) both;
}

.bukhari-card.slide-in-fade {
    animation: fadeAppear 0.4s cubic-bezier(.19,1,.22,1) both;
}

@keyframes slideInFromTop {
    from { opacity: 0; transform: translateY(-35px) scale(0.95);}
    66% { opacity: 1; }
    to   { opacity: 1; transform: translateY(0) scale(1);}
}

@keyframes fadeAppear {
    from {opacity: 0;}
    to   {opacity: 1;}
}

.bukhari-card.hidden {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(.54,1.6,.7,1.03), transform 0.4s cubic-bezier(.54,1.6,.7,1.03);
}

.bukhari-card:hover {
    transform: translateY(var(--card-hover-translate-y)) scale(var(--card-hover-scale));
    box-shadow: 0 12px 25px var(--hover-shadow-color);
    border: 2px solid var(--gold-accent); /* changed from red to keep gold/yellow on hover */
    transition: transform 520ms cubic-bezier(0.22, 0.9, 0.28, 1), box-shadow 520ms cubic-bezier(0.22,0.9,0.28,1), border-color 520ms cubic-bezier(0.22,0.9,0.28,1);
}

.card-image-wrapper {
    position: relative;
    display: inline-block;
    width: max-content;
    margin: 0 auto 12px auto;
}
.image-caption {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    text-align: center;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.35));
    padding: 4px 8px;
    border-radius: 8px;
}
.caption-line {
    color: #fff;
    font-weight: 700;
    font-family: 'Roboto Slab', 'Noto Naskh Arabic', serif;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.02em;
}
.caption-line-top { font-size: 12px; opacity: 0.95; }
.caption-line-bottom { font-size: 11px; opacity: 0.95; }

.card-image {
    display: block; /* ensure image is a block so surrounding text flows beneath */
    margin: 0 auto 16px auto; /* center and add small gap under image so title doesn't overlap */
    transform: translateZ(0);
    max-width: 160px;
    max-height: 220px;
    object-position: center; /* ensure the visual center of the image is used */
    /* Smoothed transition: slightly longer, consistent easing and will-change to avoid sudden jumps */
    transition: transform 480ms cubic-bezier(.2, .9, .28, 1), filter 420ms ease, box-shadow 480ms ease;
    will-change: transform, filter, box-shadow;
    transform-origin: center center; /* ensure scaling centers on the image */
    cursor: pointer; /* indicate interactivity */
}

/* New: enlarge only the image on hover (independent of full card hover) */
.card-image:hover {
    /* no independent hover effect — image will scale together with card hover */
    transform: translateZ(0);
    filter: none;
}

.bukhari-card:hover .card-image {
    /* Smart, smooth subtle enlargement + tilt that feels natural and non-jumpy */
    transform: scale(1.06) rotate(-1.6deg) translateY(-3px);
    will-change: transform;
    transition: transform 480ms cubic-bezier(.2, .9, .28, 1);
}

.bukhari-card h2 {
    margin-top: 0.25rem;
    margin-bottom: 16px;
    color: var(--gold-accent); /* Changed text color to gold for readability against dark background */
    flex-grow: 1;
    font-weight: 700;
}

.view-button,
.download-button {
    display: inline-block;
    color: var(--text-dark);
    /* Restored larger button padding & pill shape to match original appearance */
    padding: 14px 30px;
    text-decoration: none;
    border: none;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: auto;
    font-size: 1.05em;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.view-group {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFD700;
    border-radius: 30px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    margin-top: auto;
}
.btn-divider {
    width: 2px;
    height: 24px;
    background-color: rgba(0,0,0,0.2);
}
.view-group .view-button {
    flex: 1;
    background-image: none;
    background-color: transparent;
    color: #000;
    padding: 14px 15px;
    border-radius: 0;
    margin-top: 0;
    white-space: nowrap;
    box-shadow: none;
}

.view-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    /* Increased mid-stop alpha so left-side white light is as visible as download button */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.44), transparent);
    transition: left 0.5s ease;
    z-index: -1;
    pointer-events: none;
}

.view-button:hover::before {
    left: 0;
}

.download-button {
    background-image: none;
    background-color: var(--red-button-start);
    box-shadow: 0 6px 14px rgba(0,0,0,0.16);
    margin-top: 8px;
    color: #000000;
    position: relative;
    overflow: hidden;
    padding: 14px 30px;
    border-radius: 30px;
    font-size: 1.05em;
    font-weight: 700;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.download-button::before {
    /* Copy of .view-button sheen but flipped to originate at the right and using identical opacity/transition for smooth in/out */
    content: '';
    position: absolute;
    top: 0;
    right: -100%; /* start off-screen at the right */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    /* match view-button's timing and include opacity for smooth fade */
    transition: right 0.5s ease, opacity 0.5s ease;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
}

.download-button:hover::before {
    /* Sweep the same soft sheen inward from right → left (aligns to the right edge) */
    right: 0;
    opacity: 1;
}

.download-button .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffd54f, #fbc02d);
    z-index: 1;
    transition: width 0.1s linear;
    pointer-events: none;
}

.download-button.is-downloading {
    pointer-events: none;
    background-color: #063026 !important;
    color: #fff !important;
    border: 1px solid var(--gold-accent);
}

.download-button .progress-text {
    position: relative;
    z-index: 3;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.all-books-banner {
    /* Match other collection header area sizing and spacing */
    margin-top: 40px;
    padding: 40px 20px 20px;
    grid-column: 1 / -1;
    text-align: center;
    border-radius: 20px;
    background-image: url('islamic_tileable_pattern_dark.png');
    background-size: 300px;
    background-blend-mode: overlay;
    background-color: rgba(6, 48, 38, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: 0 5px 20px rgba(0,0,0,0.18);
}

.all-dl-btn {
    font-size: 1.2em;
    padding: 16px 40px; /* slightly reduced to match other download buttons */
    background: linear-gradient(180deg, var(--red-button-start), var(--red-button-end));
    color: #fff;
    box-shadow: 0 8px 22px rgba(229,26,26,0.22);
    border: 1px solid rgba(0,0,0,0.06);
}

.download-button:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    animation: none;
    color: #000000;
    background-color: var(--red-button-start); /* ensure color stays identical */
}

/* Ensure view-button shine remains subtle and doesn't alter color */
.view-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transition: left 0.5s ease;
    z-index: -1;
    pointer-events: none;
}

.view-button:hover::before {
    left: 0;
}

.view-button:hover {
    /* Remove color/background swaps — only keep subtle movement and glow */
    transform: translateY(-3px) scale(1.03); /* match download-button hover motion */
    box-shadow: 0 8px 18px rgba(0,0,0,0.16); /* match stronger hover shadow for parity */
    animation: none;
    /* keep background-image unchanged so color doesn't shift on hover */
}

.view-button:active {
    transform: translateY(-2px) scale(1.02);
    animation: buttonFlashYellow 0.4s cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes buttonPulseRed {
    0% {
        box-shadow: 0 0 20px var(--gold-accent),
                    0 0 40px rgba(212, 175, 55, 0.35);
    }
    50% {
        /* Adjusted to use rich maroon variables, ensuring the color is solid */
        box-shadow: 0 0 25px var(--red-button-start),
                    0 0 50px rgba(136, 14, 79, 0.42),
                    0 0 75px rgba(136, 14, 79, 0.23);
    }
    100% {
        box-shadow: 0 0 20px var(--gold-accent),
                    0 0 40px rgba(212, 175, 55, 0.35);
    }
}

@keyframes buttonPulseYellow {
    0% {
        box-shadow: 0 0 20px var(--bright-orange),
                    0 0 40px rgba(255, 140, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 25px var(--cyber-yellow),
                    0 0 50px rgba(255, 238, 0, 0.5),
                    0 0 75px rgba(255, 238, 0, 0.3);
    }
    100% {
        box-shadow: 0 0 20px var(--bright-orange),
                    0 0 40px rgba(255, 140, 0, 0.4);
    }
}

@keyframes buttonFlashRed {
    0% {
        box-shadow: 0 0 50px white,
                    0 0 100px var(--red-button-end);
    }
    100% {
        box-shadow: 0 4px 10px rgba(136, 14, 79, 0.6); /* Maroon shadow */
    }
}

@keyframes buttonFlashYellow {
    0% {
        box-shadow: 0 0 50px white,
                    0 0 100px var(--yellow-button-end);
    }
    100% {
        box-shadow: 0 4px 8px rgba(255, 193, 7, 0.4);
    }
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-bg);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
    will-change: opacity;
}

.modal.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}

.modal-content {
    background-color: rgba(255,255,255,0.98); /* make file content area very clear/near-opaque */
    padding: 15px;
    border-radius: 18px; /* slightly rounder for petal feel */
    width: 95%;
    height: 90%;
    max-width: 1200px;
    box-shadow: 0 18px 50px rgba(4,10,20,0.5); /* stronger soft shadow for contrast */
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    will-change: transform;
    overflow: hidden;
    position: relative; /* needed for pseudo petal */
}

/* soft petal-like translucent shape behind the modal content to "open" on show */
.modal-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 8%;
    width: 160%;
    height: 120%;
    transform: translateX(-50%) translateY(-8%) rotate(-12deg);
    background: radial-gradient(closest-side, rgba(212,175,55,0.12), rgba(255,255,255,0.02) 60%, transparent 70%);
    filter: blur(28px);
    z-index: 0;
    transition: opacity 420ms ease, transform 420ms ease;
    opacity: 0;
    pointer-events: none;
}

/* reveal the petal when modal becomes visible */
.modal.visible .modal-content::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotate(-8deg) scale(1);
}

/* ensure actual iframe sits above the petal and is crisp */
#webview-iframe {
    flex-grow: 1;
    border: none;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: #ffffff; /* ensures embedded file area appears clear */
    z-index: 2;
    position: relative;
    box-shadow: 0 6px 18px rgba(6,12,20,0.12) inset;
}

#go-to-top {
    position: fixed;
    /* stacked: keep right edge consistent with telegram button */
    right: 14px;
    bottom: 16px; /* lower button in the stack */
    width: 48px;
    height: 48px;
    background: #ff0000;
    color: #ffffff;
    border: 2px solid #ffd700;
    border-radius: 50%; /* perfect circle */
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32), inset 0 0 8px rgba(255,255,255,0.12);
    opacity: 0;
    transform: translateY(16px) scale(0.9) rotate(var(--scroll-rotate-angle, 0deg));
    transition:
        opacity 0.4s ease,
        transform 0.36s cubic-bezier(0.2,1,0.3,1),
        border-color 0.2s ease;
    z-index: 10095;
    will-change: opacity, transform;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    backdrop-filter: blur(6px);
}

/* New: Floating fill effect using a pseudo-element to avoid "yellow streaks" on the button edges */
#go-to-top::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--scroll-p, 0%);
    background: linear-gradient(180deg, #ffeb3b, #fbc02d);
    opacity: 0.95;
    z-index: 1; /* Elevated to ensure it renders above the base red background */
    transition: height 0.1s linear;
}

#go-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(var(--scroll-rotate-angle, 0deg));
    visibility: visible;
    /* New: Floating/Dancing animation while visible */
    animation: topButtonDance 4s ease-in-out infinite;
}

@keyframes topButtonDance {
    0%   { transform: translateY(0) scale(1) rotate(var(--scroll-rotate-angle, 0deg)); }
    25%  { transform: translateY(-8px) scale(1.05) rotate(calc(var(--scroll-rotate-angle, 0deg) + 5deg)); }
    50%  { transform: translateY(-2px) scale(1) rotate(var(--scroll-rotate-angle, 0deg)); }
    75%  { transform: translateY(-10px) scale(1.05) rotate(calc(var(--scroll-rotate-angle, 0deg) - 5deg)); }
    100% { transform: translateY(0) scale(1) rotate(var(--scroll-rotate-angle, 0deg)); }
}

#go-to-top:hover {
    background-color: var(--secondary-color);
    transform: translateY(0) scale(1.08) rotate(var(--scroll-rotate-angle));
    /* Deep Teal/Gold glow */
    box-shadow: 0 0 20px var(--primary-color),
                0 0 40px rgba(0, 77, 64, 0.3);
    animation: buttonHoverGlow 2s infinite ease-in-out;
}

#go-to-top:active {
     transform: translateY(0) scale(1.02) rotate(var(--scroll-rotate-angle));
     animation: buttonFlash 0.4s cubic-bezier(0.11, 0, 0.5, 0);
}

.arrow-up {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
    position: relative;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4));
}

#go-to-top:hover .arrow-up {
    transform: translateY(-2px);
}

#telegram-button {
    position: fixed;
    /* stacked: sit above the go-to-top button with exact right alignment */
    right: 14px;
    bottom: 80px; /* spacing between buttons = 16px (80 - 16 = 64: button height 48 + 16 gap) */
    width: 48px;
    height: 48px;
    background-color: #29b6f6;
    border-radius: 50%; /* perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    z-index: 999;
    transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
    animation: floatAnimation 3s ease-in-out infinite;
}

#telegram-button svg {
    width: 30px; 
    height: 30px;
    display: block; 
}

#telegram-button:hover {
    transform: translateY(-5px) scale(1.05); 
    box-shadow: 0 8px 20px rgba(41, 182, 246, 0.4);
    background-color: #03a9f4; 
    animation-play-state: paused; 
}

#telegram-button:active {
    transform: translateY(-2px) scale(1.02); 
    box-shadow: 0 4px 10px rgba(41, 182, 246, 0.3);
}

@keyframes floatAnimation {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); } 
    100% { transform: translateY(0px); } 
}

footer {
    text-align: center;
    padding: 25px 0 15px 0;
    background-color: rgba(0, 47, 40, 0.9);
    color: var(--accent-color);
    font-size: 0.9em;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    margin-bottom: 80px; 
    position: relative;
}

#contact-email {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Roboto Slab', 'Roboto', serif;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.contact-email-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--gold-accent);
    font-size: 1.1em;
    transition: color 0.22s;
    border-radius: 3px;
    padding: 2px 7px 2px 2px;
}
.contact-email-link:hover {
    color: #ffeb3b;
    background: rgba(255, 193, 7, 0.07);
    text-decoration: underline;
}

.email-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
    /* Subtle Gold Glow */
    filter: drop-shadow(0 2px 7px #ffd70041) drop-shadow(0 0px 3px #ffecb3ad);
    transition: transform 0.23s cubic-bezier(0.58,1.85,0.57,1.24);
}
.contact-email-link:hover .email-icon {
    transform: scale(1.14) rotate(-7deg);
    filter: drop-shadow(0 2px 12px #fffde4bb);
}

.contact-email-text {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.97em;
    color: inherit;
    word-break: break-all;
    letter-spacing: 0.01em;
    opacity: 0.95;
}

@media (max-width: 700px) {
    #contact-email {
        font-size: 0.93em;
        gap: 7px;
    }
    .contact-email-link {
        font-size: 0.92em;
    }
    .email-icon { width: 20px; height: 20px;}
}

@media (max-width: 510px) {
    #contact-email {
        flex-direction: column;
        gap: 4px;
        font-size: 0.92em;
    }
    .contact-email-link { padding: 2px 3px; }
}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #1a1f2c;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.8s ease-out;
    pointer-events: none;
}

#loading-overlay.loaded {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-out 0.5s, visibility 0s linear 1.3s;
}

#loading-overlay.loaded .loading-spinner,
#loading-overlay.loaded #welcome-message {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

#loading-overlay #welcome-message {
    color: var(--loader-accent);
    font-family: 'Roboto Slab', 'Roboto', serif;
    font-size: 2.3em;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2.5px solid var(--loader-accent);
    box-sizing: border-box;
    background: linear-gradient(90deg, #ff6363 16%, #ff6d00 43%, #fff 95%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    filter: drop-shadow(0 2px 14px #e51a1a55);
    text-shadow: 1px 2px 8px #2a010112, 0 0 2px #e51a1a77, 0 0 22px #ff595989;
    transform: translateX(80px); 
    transition:
      opacity 0.8s cubic-bezier(.43,1.8,.65,1.17),
      transform 0.9s cubic-bezier(.43,1.8,.65,1.17);
    margin-top: 18px;
    text-align: center;
    will-change: opacity, transform;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5em;
}

#loading-overlay.show-welcome #welcome-message {
    opacity: 1;
    transform: translateX(0);
}
#loading-overlay #welcome-message.typed {
    border-right: none;
    transition: border-right 0.3s;
}

#loading-overlay #welcome-message.typing,
#loading-overlay #welcome-message.typed {
    animation: blink-caret 0.85s steps(1) infinite;
}

#loading-overlay #assalamu,
#loading-overlay #alaikum {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

#loading-overlay #assalamu {
    font-family: 'Roboto Slab', 'Roboto', serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: linear-gradient(90deg, #ff6363 12%, #ff9a36 70%, #eee 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

#loading-overlay #alaikum {
    font-family: 'Roboto Slab', 'Roboto', serif;
    font-weight: 700;
    letter-spacing: 0.035em;
    background: linear-gradient(90deg, #fff5d7 0%, #ed7246 63%, #e51a1a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

.welcome-letter {
    opacity: 0;
    display: inline-block;
    will-change: transform, opacity;
    font-size: 1em;
    transition:
        opacity 0.35s ease-out,
        transform 0.36s cubic-bezier(.62,1.77,.24,1.08);
}

.welcome-letter.shown {
    opacity: 1;
    transform: translateX(0) scale(1.14);
    transition:
        opacity 0.38s cubic-bezier(.22,1.12,.61,0.91),
        transform 0.49s cubic-bezier(.22,1.12,.61,0.91);
    text-shadow: 0 2px 18px #fff6, 0 0 18px #ff594912, 0 0 1px #d60b0b88;
    filter: brightness(1.09);
    animation: letter-pop-retract 0.5s cubic-bezier(.54,1.58,.39,1.07) 1;
}

@keyframes letter-pop-retract {
    0% { transform: scale(0.68) translateY(10px); }
    78% { transform: scale(1.17) translateY(-2px); }
    100% { transform: scale(1.0) translateY(0); }
}

#loading-overlay #assalamu {
    margin-right: 24px;
}
#loading-overlay #alaikum {
    margin-left: 24px;
}

.loading-spinner {
    border: 6px solid rgba(255, 255, 255, 0.2);
    border-top: 6px solid var(--loader-accent);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1.5s linear infinite;
    margin-bottom: 30px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.no-results {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    width: 100%;
    margin: 60px 0 70px 0;
    gap: 0.5em;
    grid-column: 1 / -1;
    text-align: center;
    z-index: 10;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    animation: appearNotFound 0.55s cubic-bezier(.24,1.7,.42,1.07);
}

@keyframes appearNotFound {
    from { opacity: 0; transform: scale(0.90) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0);}
}

.not-found-anim-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 106px;
    margin-bottom: 15px;
    user-select: none;
    pointer-events: none;
}

.notfound-svg-anim {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 78px;
    filter: drop-shadow(0 4px 40px #0d47a14c); /* Changed glow color to deep blue */
}

.notfound-lens {
    filter: drop-shadow(2px 5px 8px #a1b0fb44);
}

.notfound-face > ellipse,
.notfound-face > path {
    pointer-events: none;
}

.not-found-text {
    font-size: 1.42em;
    font-family: 'Roboto', 'Noto Naskh Arabic', sans-serif;
    color: #de254c;
    font-weight: bold;
    background: linear-gradient(91deg, #e6f7ef 0%, #bfead6 100%);
    padding: 11px 32px 11px 32px;
    border-radius: 12px;
    display: inline-block;
    margin: auto;
    box-shadow: 0 8px 28px #c8f0e618, 0 2px 12px #bfead61c;
    border: 2px solid rgba(0,77,64,0.12);
    letter-spacing: 0.01em;
    animation: notFoundPulse 1.8s infinite alternate;

    /* Make the Not Found text behave like a focused interactive button (only this element) */
    cursor: pointer;                       /* show pointer on hover */
    transition: transform 220ms ease, box-shadow 220ms ease, filter 160ms ease, opacity 180ms ease;
    will-change: transform, box-shadow, opacity;
    outline: none;                         /* controlled focus styling below */
    user-select: none;
}

/* Hover/focus/active styles limited to this element only */
.not-found-text:hover,
.not-found-text:focus {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 22px 48px rgba(0,0,0,0.32), 0 6px 18px rgba(0,77,64,0.08);
    filter: saturate(1.03) brightness(1.02);
    opacity: 1;
}

/* keyboard focus ring for accessibility (visible only when element receives keyboard focus) */
.not-found-text:focus-visible {
    box-shadow: 0 22px 48px rgba(0,0,0,0.32), 0 0 0 6px rgba(212,175,55,0.12);
    border-color: rgba(212,175,55,0.28);
    transform: translateY(-6px) scale(1.02);
}

/* Active/tap state */
.not-found-text:active {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 12px 30px rgba(0,0,0,0.24);
}

@keyframes notFoundPulse {
  from { box-shadow: 0 0 25px #d4af371f, 0 2px 12px #ffadad1c;} /* Goldish glow */
  to   { box-shadow: 0 0 35px #00796b2f, 0 2px 27px #004d4026;} /* Tealish glow */
}

@media (max-width: 600px) {
    :root {
        --header-search-gap: 18px;
    }
    header {
        padding-bottom: 4px;
    }
    #loading-overlay #welcome-message {
        font-size: 1.3em;
     }
}

/* --- New: Collection Title Styling for Grid Headers --- */

/* Wrapper for the collection title and download buttons (Part 3) */
.collection-header-area {
    grid-column: 1 / -1; /* Ensure spanning the entire grid width */
    text-align: center;
    padding: 25px 20px 20px 20px;
    margin-top: 10px;
    margin-bottom: 20px; /* Added spacing after wrapper */
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    z-index: 1; /* To contain background */
    
    background-color: rgba(0, 77, 64, 0.85); /* Dark teal base color */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    
    /* Naksha Pattern Application */
    background-image: url('islamic_tileable_pattern_dark.png'), linear-gradient(180deg, rgba(0, 77, 64, 0.95), rgba(0, 30, 24, 0.9));
    background-size: 300px 300px, 100% 100%;
    background-blend-mode: overlay, normal;
    background-repeat: repeat, no-repeat;
    border: 2px solid var(--gold-accent);
}

.collection-header-area .download-all-wrapper {
    /* Reset any potential grid spanning for the inner div */
    grid-column: auto;
}

/* Ensure child elements are visible above the pattern/background */
.collection-header-area > * {
    position: relative;
    z-index: 2;
}

.collection-title {
    /* Adjustments for title inside the new wrapper */
    grid-column: auto;
    display: block; 
    opacity: 1;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-size: 2.3em;
    font-weight: 800;
    margin-top: 0; 
    margin-bottom: 20px;
    color: var(--gold-accent); /* Fallback */
    position: relative;
    
    /* Style refinement for visibility over dark patterned background */
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--gold-accent); 
    text-fill-color: var(--gold-accent); 
    filter: none; 
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(212, 175, 55, 1.0);
    transition: all 0.3s ease-out;
}

.collection-title:hover {
    filter: brightness(1.1) saturate(1.1);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 25px var(--gold-accent);
}

.collection-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 5px;
    background: linear-gradient(90deg, transparent 10%, var(--primary-color) 50%, transparent 90%);
    margin: 15px auto 0;
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(0, 77, 64, 0.6), 0 0 20px rgba(0, 77, 64, 0.3);
    transition: width 0.3s ease;
}

.collection-title:hover::after {
    width: 150px; /* Expand on hover */
}

/* Quran-style green decorative banner (CRITICAL: REMOVE ALL STYLES) */
.quran-banner, .quran-banner-inner, .quran-ornament, .quran-text, .quran-arabic, .quran-sub {
    /* Critical cleanup: Ensure all banner related fixed positioning and display are disabled */
    display: none !important;
    position: static !important;
    top: auto !important;
    z-index: 1 !important;
}

/* Ensure body padding calculation uses the correct fixed offset and no longer accounts for the removed banner */
@media (min-width: 0) {
  body {
    padding-top: var(--body-content-offset-top); 
  }
}

.bukhari-card[data-title="Sahih Al-Bukhari Part-2"] .image-caption {
    display: none !important;
}

.bukhari-card:hover::after {
    /* Removed vertical yellow bar — disable pseudo-element */
    content: none;
    display: none;
}
.bukhari-card::after {
    /* Disabled decorative vertical bar */
    content: none;
    display: none;
    transition: none;
}
.bukhari-card:hover::after {
    /* KEEP YELLOW/GOLD on hover — do NOT switch to red */
    background: linear-gradient(180deg, var(--yellow-button-start) 0%, #ffd54f 60%, rgba(212,175,55,0.95) 100%);
    box-shadow: 0 0 12px rgba(212,175,55,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
    width: 10px;
    transition: background 420ms cubic-bezier(.22,1,.36,1), box-shadow 420ms cubic-bezier(.22,1,.36,1), width 420ms cubic-bezier(.22,1,.36,1);
}
.bukhari-card::after {
    background: linear-gradient(180deg, var(--yellow-button-start) 0%, #ffd54f 60%, rgba(212,175,55,0.95) 100%);
    transition: background 420ms cubic-bezier(.22,1,.36,1), box-shadow 420ms cubic-bezier(.22,1,.36,1), width 420ms cubic-bezier(.22,1,.36,1);
}
.bukhari-card:hover::after {
    background: linear-gradient(180deg, var(--yellow-button-start) 0%, #ffd54f 60%, rgba(212,175,55,0.95) 100%);
    box-shadow: 0 0 12px rgba(212,175,55,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
    width: 10px;
    transition: background 420ms cubic-bezier(.22,1,.36,1), box-shadow 420ms cubic-bezier(.22,1,.36,1), width 420ms cubic-bezier(.22,1,.36,1);
}

#search-toggle-button {
    position: fixed;
    top: 7px;
    left: 14px;
    min-width: 38px;
    height: 38px;
    padding: 6px 8px;
    border-radius: 12px;
    border: 1px solid rgba(212,175,55,0.10);
    background: linear-gradient(90deg, rgba(6,48,38,0.96), rgba(255,215,102,0.12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10080;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(2,20,16,0.22), 0 1px 0 rgba(255,255,255,0.02) inset;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, background 180ms ease;
    color: var(--gold-accent);
}

#search-toggle-button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 32px rgba(2,20,16,0.34), 0 2px 4px rgba(212,175,55,0.05) inset;
    background: linear-gradient(90deg, rgba(6,48,38,0.98), rgba(255,234,179,0.16));
}

.top-actions-right {
    position: fixed;
    top: 7px;
    right: 14px;
    display: flex;
    gap: 8px;
    z-index: 10080;
}

#saved-files-button, #settings-toggle-button {
    min-width: 38px;
    height: 38px;
    padding: 6px 8px;
    border-radius: 12px;
    border: 1px solid rgba(212,175,55,0.10);
    background: linear-gradient(90deg, rgba(255,215,102,0.12), rgba(6,48,38,0.96));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(2,20,16,0.22), 0 1px 0 rgba(255,255,255,0.02) inset;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, background 180ms ease;
    color: var(--gold-accent);
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    line-height: 1;
    font-size: 0.94rem;
    -webkit-tap-highlight-color: transparent;
}
#saved-files-button svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.22)); width:18px; height:18px; }
#saved-files-button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 32px rgba(2,20,16,0.34), 0 2px 4px rgba(212,175,55,0.05) inset;
    background: linear-gradient(90deg, rgba(255,234,179,0.16), rgba(6,48,38,0.98));
}
#saved-files-button:focus { outline: 3px solid rgba(212,175,55,0.12); outline-offset: 2px; }

 /* Lift / bounce animation utility for "charge"/saved and modal back actions */
 .ui-lifted {
     animation: liftUpThenSettle 820ms cubic-bezier(.22,.9,.36,1) forwards;
     will-change: transform, box-shadow;
 }
 @keyframes liftUpThenSettle {
     0%   { transform: translateY(0) scale(1); box-shadow: 0 8px 18px rgba(2,20,16,0.22); }
     20%  { transform: translateY(-22px) scale(1.02); box-shadow: 0 22px 44px rgba(2,20,16,0.32); }
     55%  { transform: translateY(-8px) scale(1.01); box-shadow: 0 12px 30px rgba(2,20,16,0.28); }
     100% { transform: translateY(0) scale(1); box-shadow: 0 8px 18px rgba(2,20,16,0.22); }
 }

 /* Colorful modal close / back button styling to match site */
 #modal-close-button {
     background: linear-gradient(180deg, #ffd54f, #ffcc00);
     color: #04251f;
     border: none;
     padding: 10px 14px;
     border-radius: 12px;
     font-weight: 700;
     cursor: pointer;
     box-shadow: 0 10px 28px rgba(212,175,55,0.18), 0 2px 6px rgba(0,0,0,0.16);
     transition: transform 180ms ease, box-shadow 240ms ease, background 220ms ease;
     position: relative;
     z-index: 10025;
 }
 #modal-close-button:hover {
     transform: translateY(-4px);
     box-shadow: 0 18px 40px rgba(212,175,55,0.26), 0 4px 10px rgba(0,0,0,0.18);
 }
 #modal-close-button:active { transform: translateY(-2px) scale(0.995); }

.saved-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 12px;
    background: var(--red-button-start);
    color: #000;
    font-weight: 700;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

.dropdown-panel {
    position: fixed;
    /* Default placement near the top-right on larger screens */
    top: calc(var(--header-height) + 8px);
    right: 14px;
    /* Allow the panel to scale responsively: prefer a comfortable fixed size but never exceed viewport */
    width: min(420px, 92vw);
    max-width: 95vw;
    max-height: calc(100vh - (var(--header-height) + 48px));
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(3,50,43,0.98), rgba(1,33,30,0.94));
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(2,12,10,0.6);
    padding: 0 12px 12px 12px;
    z-index: 20000; /* ensure it sits above other content */
    display: none;
    flex-direction: column;
    border: 1px solid rgba(212,175,55,0.12);
    -webkit-overflow-scrolling: touch;
    will-change: transform, opacity;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease;
    box-sizing: border-box; /* make padding included in width calculations */
    /* ensure the panel never causes horizontal scrolling and stays centered on narrow screens */
    left: auto;
    transform: none;
}

/* Center the panel on small viewports to avoid overflow and keep controls accessible */
@media (max-width: 740px) {
    .dropdown-panel {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 95vw;
        max-width: 95vw;
        padding: 10px;
        border-radius: 12px;
        top: calc(var(--header-height) + 10px);
    }
}

/* Mobile-friendly settings adjustments */
@media (max-width: 700px) {
    .dropdown-panel {
        left: 8px;
        right: 8px;
        width: calc(100% - 16px);
        max-width: none;
        top: calc(var(--header-height) + 6px);
        padding: 10px;
        border-radius: 12px;
        max-height: calc(100vh - (var(--header-height) + 28px));
    }
    /* Make setting items compact */
    .setting-item {
        padding: 8px;
        gap: 8px;
    }
    /* Make switch/toggles smaller and more compact */
    .switch-label .slider {
        width: 44px;
        height: 24px;
        padding: 2px;
    }
    .switch-label .slider::after {
        width: 18px;
        height: 18px;
        transform: translateX(0);
    }
    .switch-label input[type="checkbox"]:checked + .slider::after {
        transform: translateX(20px);
    }
    .switch-label span {
        font-size: 0.88rem;
    }
    /* Smaller buttons inside settings */
    .setting-btn {
        min-width: 96px;
        padding: 8px 10px;
        font-size: 0.88rem;
    }
    .url-input-wrap input {
        padding: 8px 10px;
        font-size: 0.92rem;
    }
    /* Ensure labels don't overflow and remain visible */
    .dropdown-header strong {
        font-size: 0.95rem;
    }
    .close-dropdown {
        width: 36px;
        height: 36px;
    }
    /* Ensure checkboxes/controls aren't half off-screen */
    .dropdown-content {
        padding: 10px;
    }
}

/* Force visible contrast / sizing for toggles on very small devices */
@media (max-width: 420px) {
    .switch-label .slider {
        width: 40px;
        height: 22px;
    }
    .switch-label .slider::after { width: 16px; height: 16px; }
    .setting-btn { min-width: 84px; padding: 8px 8px; font-size: 0.86rem; }
    .url-input-wrap input { padding: 7px 8px; font-size: 0.9rem; }
}

@keyframes dropdownPop {
    from { opacity: 0; transform: translateY(-10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#saved-files-dropdown {
    position: fixed;
    top: 64px;
    right: 16px;
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    /* Unified deep-teal themed background to match site (keeps pattern but removes yellow/black clash) */
    background: linear-gradient(180deg, rgba(3,50,43,0.98), rgba(1,33,30,0.94)), url('islamic_tileable_pattern_dark.png');
    background-blend-mode: overlay, multiply;
    background-size: 260px 260px;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(2,12,10,0.6);
    padding: 10px;
    z-index: 10120;
    display: none;
    font-family: 'Roboto', sans-serif;
    border: 1px solid rgba(212,175,55,0.08);
    color: #f7f3e8; /* ensure text inside remains readable on dark background */
}

/* visible state */
#saved-files-dropdown.visible {
    display: block;
    animation: popIn 180ms ease-out;
}

/* header area: white with gold accent */
#saved-files-dropdown .saved-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid rgba(6,40,50,0.06);
    background: transparent; /* keep header transparent so glass background shows through */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    color: #042f48; /* dark teal to remain highly readable over translucent light-blue */
}

/* title + count */
#saved-files-dropdown .saved-header-left {
    display:flex;
    align-items:center;
    gap:10px;
}
#saved-files-dropdown .saved-header-left strong { color: #f7f3e8; font-size: 1rem; }
#saved-files-dropdown .saved-count-inline {
    background: var(--gold-accent);
    color: #072b26;
    padding: 4px 8px;
    border-radius: 10px;
    font-weight: 800;
    box-shadow: 0 6px 14px rgba(212,175,55,0.12);
    font-size: 0.82rem;
}

/* top actions (download all / clear) */
#saved-files-dropdown .saved-header-actions {
    display:flex;
    gap:8px;
    align-items:center;
}
.saved-all-dl-btn {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    border: none;
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 8px 26px rgba(0,77,64,0.12);
}
/* Clear All styled for strong contrast on light-blue glass */
.saved-clear-btn {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(4,79,63,0.08);
    color: #042f48; /* dark teal text for legibility */
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(2,40,48,0.06);
}

/* content list */
#saved-files-dropdown .saved-list {
    padding: 10px;
    display: grid;
    gap: 10px;
}

/* individual saved item card */
#saved-files-dropdown .saved-card {
    display: flex;
    gap: 12px;
    padding: 10px;
    align-items: center;
    border-radius: 10px;
    /* Dark themed inner card to match container */
    background: linear-gradient(180deg, rgba(3,50,43,0.95), rgba(1,33,30,0.88));
    border: 1px solid rgba(212,175,55,0.06);
    box-shadow: 0 8px 26px rgba(0,0,0,0.42);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
#saved-files-dropdown .saved-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(0,0,0,0.48);
}

/* thumbnail */
#saved-files-dropdown .saved-thumb {
    width: 62px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
    filter: saturate(0.95) contrast(0.9);
}

/* meta area */
#saved-files-dropdown .saved-meta {
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
}
/* Use light/gold text for contrast against the dark card background */
#saved-files-dropdown .saved-title {
    font-size: 0.95rem;
    color: #fff; /* light text */
    font-weight:700;
    line-height:1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#saved-files-dropdown .saved-time { font-size:0.78rem; color: rgba(255,255,255,0.75); }

/* action buttons group */
#saved-files-dropdown .saved-card-actions {
    display:flex;
    gap:8px;
    align-items:center;
}
#saved-files-dropdown .saved-open-btn {
    background: var(--gold-accent);
    color: #072b26;
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight:700;
    cursor:pointer;
    box-shadow: 0 8px 20px rgba(212,175,55,0.12);
}
#saved-files-dropdown .saved-download-btn {
    background: linear-gradient(90deg,#21a17a,#00796b);
    color:#fff;
    border:none;
    padding:8px 10px;
    border-radius:8px;
    font-weight:700;
    cursor:pointer;
}
#saved-files-dropdown .saved-remove-btn {
    background: transparent;
    border: none;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    color: #e51a1a;
}

/* empty state */
#saved-files-dropdown .saved-empty {
    padding: 20px;
    text-align:center;
    color:#6b6b6b;
}

/* small entrance animation */
@keyframes popIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.saved-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.16s ease;
}
.saved-item:hover { background: #f5f5f5; }
.saved-item .title { flex: 1; font-size: 0.95em; color: #212121; }
.saved-item .actions { display: flex; gap: 8px; align-items: center; }

.card-save-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    transition: transform 0.14s ease, background 0.14s ease, color 0.18s ease;
    color: #fff; /* default icon color (white) */
}
.card-save-button svg { width:18px; height:18px; display:block; }
.card-save-button:hover { transform: scale(1.06); background: rgba(255,255,255,0.10); }

/* Saved state: make icon/text color dark on bright yellow background */
.card-save-button.saved {
    /* Visible golden/yellow saved state for clear feedback */
    background: linear-gradient(180deg, #ffd54f 0%, #ffcc00 60%);
    box-shadow: 0 10px 26px rgba(212,175,55,0.18), 0 2px 6px rgba(0,0,0,0.12);
    color: #04251f; /* dark text for contrast on yellow */
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(212,175,55,0.12);
    transform: none;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Keep saved cards visually on top and prevent unexpected scaling/position shifts */
.bukhari-card.saved-selected,
.bukhari-card.pattern-locked,
.bukhari-card.saved {
    z-index: 10030 !important; /* place above header/search and panels */
    transform: none !important; /* prevent any scale/translate applied when saved */
    transition: none !important; /* avoid transition jumps that move behind other UI */
}

/* Settings Dropdown Specifics - Enhanced Attractive Styling */
.dropdown-header {
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, rgba(212,175,55,0.12), rgba(4,79,63,0.06));
    backdrop-filter: blur(6px) saturate(1.04);
    border-bottom: 1px solid rgba(212,175,55,0.12);
    box-shadow: 0 8px 28px rgba(1,32,28,0.28);
}
.dropdown-header strong { color: #fff7e6; letter-spacing: 0.02em; font-size: 1rem; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.dropdown-content {
    padding: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius: 0 0 14px 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Close button refined for visual polish */
.close-dropdown {
    background: linear-gradient(180deg,#ffd54f,#ffcc00);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    color: #04251f;
    box-shadow: 0 8px 20px rgba(212,175,55,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.close-dropdown:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(212,175,55,0.18); }

.setting-item {
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    border: 1px solid rgba(255,255,255,0.02);
    box-shadow: 0 6px 18px rgba(1,32,28,0.06);
}

/* Ensure Mobile Beauty Mode setting is always visible and responsive in the settings panel */
#mobile-beauty-setting {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    padding: 8px;
    /* Visible priority in the settings panel */
    order: 0;
    min-height: 48px;
}

/* Compact variants and improved touch targets for small screens */
@media (max-width: 700px) {
    #mobile-beauty-setting {
        flex-direction: row !important;
        align-items: center;
        gap: 8px;
        padding: 6px;
        justify-content: space-between;
        background: rgba(255,255,255,0.02);
        border-radius: 10px;
    }
    #mobile-beauty-setting .setting-note {
        display: none; /* hide explanatory text to keep the control compact */
    }
    #mobile-beauty-setting label.switch-label {
        gap: 8px;
        font-size: 0.92rem;
    }
    #mobile-beauty-level {
        width: 110px;
        min-width: 90px;
        margin-left: 6px;
        height: 34px;
        -webkit-appearance: none;
        appearance: none;
    }
    #mobile-beauty-level-label {
        min-width: 56px;
        font-size: 0.82rem;
        text-align: center;
    }
}

/* Extra small screens: tighten sizes further */
@media (max-width: 420px) {
    #mobile-beauty-setting {
        gap: 6px;
        padding: 6px 4px;
    }
    #mobile-beauty-level { width: 88px; min-width: 72px; height: 30px; }
    #mobile-beauty-level-label { font-size: 0.78rem; min-width: 48px; }
    #mobile-beauty-setting .switch-label span { font-size: 0.86rem; }
}

/* Make Mobile Beauty controls compact and readable on narrow screens */
@media (max-width: 700px) {
    #mobile-beauty-setting {
        padding: 8px 6px !important;
        gap: 8px !important;
    }
    #mobile-beauty-setting .setting-note {
        font-size: 0.78rem;
    }
    #mobile-beauty-level {
        min-width: 100px;
    }
}

/* Labels refined */
.setting-item label {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    flex: 1;
}

/* Attractive custom toggle (matches HTML: input + .slider) */
.switch-label {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    color: #fff;
    font-weight: 700;
}
.switch-label input[type="checkbox"] {
    display: none;
    pointer-events: none;
}
/* base slider */
.switch-label .slider {
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(180deg,#2e7d63,#004d40);
    position: relative;
    padding: 3px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.35);
    transition: background 180ms ease, box-shadow 180ms ease;
    flex-shrink: 0;
    display: inline-block;
}
/* knob inside slider (using pseudo-element for clarity) */
.switch-label .slider::after {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    transform: translateX(0);
    transition: transform 200ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms;
    box-shadow: 0 6px 16px rgba(1,32,28,0.28);
}
/* checked state - use sibling selector for the input that is inside label */
.switch-label input[type="checkbox"]:checked + .slider {
    background: linear-gradient(90deg,#ffd54f,#ffcc00);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.12);
}
.switch-label input[type="checkbox"]:checked + .slider::after {
    transform: translateX(22px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.28);
}
/* Ensure the visible label text remains readable */
.switch-label span {
    font-size: 0.95rem;
    color: #f7f3e8;
    margin-left: 6px;
    white-space: nowrap;
}

/* Small descriptive note styling */
.setting-note {
    font-size: 0.78rem;
    color: #e6e6d8;
    margin-top: 6px;
    opacity: 0.95;
}

/* Buttons - elevated and thematic (base) */
.setting-btn {
    min-width: 120px;
    padding: 10px 12px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 30px rgba(1,32,28,0.22);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms, filter 160ms;
    transform-style: preserve-3d;
    perspective: 800px;
}
.setting-btn:hover { transform: translateY(-4px) translateZ(6px); box-shadow: 0 20px 46px rgba(1,32,28,0.34); }
.setting-btn:active { transform: translateY(-1px) translateZ(2px); box-shadow: 0 8px 22px rgba(1,32,28,0.26); }

/* Danger and mini variants */
.setting-btn.danger { background: linear-gradient(180deg,#ff6b6b,#e53935); color: #fff; }
.setting-btn.mini { padding: 8px 10px; border-radius: 10px; }

/* Specific 3D playful style for upload/apply/reset buttons inside the background upload block */
.bg-upload-block .setting-btn,
.bg-upload-row .setting-btn.mini.apply,
.bg-upload-block .reset-full {
    background: linear-gradient(180deg, #ffd54f 0%, #ffcc00 60%); /* warm gold to read clearly on glass */
    color: #04251f;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18), 0 18px 36px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
    transform-origin: center;
    transition: transform 240ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms cubic-bezier(.2,.9,.2,1), filter 180ms;
    will-change: transform, box-shadow, filter;
}

/* Add a playful micro-bounce when they first render or are clicked */
@keyframes playfulPop {
    0% { transform: translateY(6px) scale(0.98) translateZ(0); }
    40% { transform: translateY(-8px) scale(1.06) translateZ(6px); }
    70% { transform: translateY(2px) scale(1.02) translateZ(3px); }
    100% { transform: translateY(0) scale(1) translateZ(0); }
}
.bg-upload-block .setting-btn.playful-pop {
    animation: playfulPop 560ms cubic-bezier(.22,.9,.36,1) both;
}

/* Hover/press micro-interactions for clarity */
.bg-upload-block .setting-btn:hover,
.bg-upload-row .setting-btn.mini.apply:hover,
.bg-upload-block .reset-full:hover {
    transform: translateY(-6px) translateZ(8px) scale(1.02);
    box-shadow: 0 24px 56px rgba(0,0,0,0.28);
    filter: saturate(1.06);
}
.bg-upload-block .setting-btn:active,
.bg-upload-row .setting-btn.mini.apply:active,
.bg-upload-block .reset-full:active {
    transform: translateY(-2px) translateZ(3px) scale(0.998);
    box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}

/* Small visual badge to make Upload look like a primary control */
.bg-upload-block .setting-btn::after {
    content: 'Upload';
    display: none; /* not shown by default; left available for future AR/UX toggles */
    font-size: 0.72rem;
    padding-left: 8px;
    opacity: 0.9;
}

/* URL input wrap and input styling */
.url-input-wrap {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.url-input-wrap input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.06);
    color: #fff;
    font-size: 0.9rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

/* Small control buttons inside settings */
.setting-btn.mini.apply {
    background: linear-gradient(90deg,#ffd54f,#ffcc00);
    color: #04251f;
    font-weight: 800;
}

/* Saved/download buttons inside settings kept prominent */
.saved-download-btn {
    background: linear-gradient(90deg,#21a17a,#00796b);
    color: #fff;
    border: none;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.saved-download-btn:hover { transform: translateY(-3px); }

/* Small icon/button styles adjusted */
.saved-remove-btn {
    background: rgba(255,255,255,0.06);
    border: none;
    color: #ffd6d6;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 160ms ease, transform 160ms;
}
.saved-remove-btn:hover { background: linear-gradient(180deg,#ff6b6b,#e53935); transform: translateY(-2px); color: #fff; }

/* Make dropdown itself stand out with glass and golden rim */
.dropdown-panel {
    background: linear-gradient(180deg, rgba(3,50,43,0.95), rgba(1,33,30,0.92));
    border: 1px solid rgba(212,175,55,0.12);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(2,12,10,0.6);
    padding: 0;
    z-index: 10090;
    overflow: hidden;
}

#saved-files-panel {
    /* position adjusted to sit directly below the floating search bar/header */
    top: calc(var(--header-height) + var(--header-search-gap) + var(--search-bar-height) + 12px);
    right: 18px;
    width: 360px;
    max-height: calc(100vh - 120px);
    overflow: auto;
    background: rgba(255,255,255,0.98);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(2,12,20,0.35);
    padding: 12px;
    z-index: 10070; /* increase so panel sits above search and other UI */
    transform-origin: top right;
    transform: scaleY(0);
    transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 240ms ease;
    opacity: 0;
    display: grid;
    gap: 10px;
    grid-auto-rows: min-content;
    will-change: transform, opacity;
}
#saved-files-panel.visible {
    transform: scaleY(1);
    opacity: 1;
}
.saved-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.saved-mini-card {
    background: linear-gradient(180deg, #fff, #fcfcfc);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    border: 1px solid rgba(6,12,20,0.06);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, opacity 180ms ease;
}
.saved-mini-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 30px rgba(0,0,0,0.10); }
.saved-mini-thumb {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.04);
}
.saved-mini-title {
    font-size: 0.88em;
    color: #072b26;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.saved-mini-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
    justify-content: center;
}
.saved-mini-actions button {
    padding: 6px 8px;
    border-radius: 8px;
    border: none;
    font-size: 0.82em;
    cursor: pointer;
}
.saved-mini-open { background: #00796b; color: #fff; }
.saved-mini-remove { background: #e51a1a; color: #fff; }
/* small header inside panel */
.saved-panel-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding: 6px 4px 12px 4px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    margin-bottom: 6px;
}
.saved-mini-card.selected {
    outline: 3px solid rgba(212,175,55,0.85);
    box-shadow: 0 18px 40px rgba(212,175,55,0.12), 0 8px 20px rgba(0,0,0,0.06);
    transform: translateY(-4px) scale(1.01);
}

/* When saved panel is open, add a body-level class to push the floating search down */
body.saved-panel-active #floating-search-bar-wrapper {
    top: calc(var(--header-height) + var(--header-search-gap) + var(--search-bar-height) + var(--saved-panel-height) + 18px);
    transition: top 280ms cubic-bezier(.2,.9,.2,1);
    z-index: 10070; /* ensure the shifted search remains above normal content but below the panel if needed */
}

/* ensure the saved-files-dropdown also sits above the search when opened */
#saved-files-dropdown {
    z-index: 10080;
}

/* Slight responsive tweak */
@media (max-width: 640px) {
    .islamic-top-banner { 
        height: 48px; 
        border-bottom-left-radius: 12px; 
        border-bottom-right-radius: 12px; 
        border-top-left-radius: 0; 
        border-top-right-radius: 0; 
        padding: 4px 12px;
        width: 100%;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    }
    .banner-ornament { display: none !important; }
    .banner-title { font-size: 1.05rem; } /* increased for better readability on small screens */
    .banner-sub { font-size: 0.62rem; margin-top: -1px; }
    /* ensure extra right padding so header icons don't overlap text */
    .islamic-top-banner-inner { gap: 4px; padding: 0 90px 0 8px; box-sizing: border-box; }

    /* Ensure top action buttons have extra spacing on narrow screens to avoid overlap */
    .top-actions-right {
        gap: 12px !important;
    }

    /* Reduce saved button size and ensure it is inset so it won't collide with title */
    #saved-files-button {
        top: 6px;
        right: 10px !important;
        height: 36px;
        min-width: 36px;
        width: 36px;
        padding: 6px;
        border-radius: 10px;
    }
    #saved-files-button svg { width: 16px; height: 16px; }

    /* Compact and scaled Settings button to prevent covering text and to avoid touching Save button */
    #settings-toggle-button {
        position: fixed !important;
        top: 8px !important;
        right: 56px !important; /* positioned left of saved-files with a clear gap */
        left: auto !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 5px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.28) !important;
        z-index: 11050 !important; /* ensure it's above banners, search and panels */
        background: linear-gradient(90deg, rgba(255,215,102,0.08), rgba(6,48,38,0.94)) !important;
        cursor: pointer !important;
        will-change: top, left, transform;
        -webkit-tap-highlight-color: transparent;
    }
    /* scale down svg inside settings button for crispness */
    #settings-toggle-button svg { width: 16px; height: 16px; }

    /* Slightly smaller and further inset on very narrow screens */
    @media (max-width: 420px) {
        #settings-toggle-button { width: 34px !important; height: 34px !important; border-radius: 10px !important; padding: 4px !important; right: 60px !important; }
        #saved-files-button { right: 8px !important; width: 34px; height: 34px; }
        .top-actions-right { gap: 8px !important; }
        .islamic-top-banner-inner { padding: 0 76px 0 8px; } /* slightly reduce padding when very narrow */
    }

    /* Telegram floating button scaled down on mobile to reduce bulk */
    #telegram-button {
        width: 44px !important;
        height: 44px !important;
        bottom: 84px !important;
        right: 14px !important;
        border-radius: 10px !important;
        padding: 6px !important;
    }
    #telegram-button svg { width: 22px !important; height: 22px !important; }
}

/* Hide other UI during loading by toggling body.loading class in JS (except saved-files and settings buttons kept visible) */
body.loading header,
body.loading #floating-search-bar-wrapper,
body.loading #go-to-top,
body.loading #telegram-button,
body.loading footer,
body.loading #saved-files-dropdown,
body.loading #saved-files-panel,
body.loading .bukhari-grid {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}
/* keep saved-files-button and settings button visible (user wanted quick access) even when other UI is hidden */
body.loading #saved-files-button,
body.loading #settings-toggle-button {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    z-index: 12000 !important; /* ensure these controls sit above the loading overlay */
}

.islamic-top-banner::before {
    /* Ensure any banner pseudo-element (white dots/overlays) is removed */
    content: none !important;
    display: none !important;
}

/* Offline Cache Styles */
#offline-cache-container {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.footer-small-link {
    background: none;
    border: none;
    color: rgba(212, 175, 55, 0.65);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 4px 8px;
    text-decoration: underline;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-small-link:hover {
    color: var(--gold-accent);
    transform: scale(1.05);
}

#cache-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 140px;
}

.cache-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

#cache-progress-fill {
    width: 0%;
    height: 100%;
    background: var(--gold-accent);
    transition: width 0.1s linear;
}

#cache-percent-text {
    font-size: 0.7rem;
    color: var(--gold-accent);
    min-width: 30px;
    text-align: right;
}

/* Ensure Sahih Muslim single "View" buttons keep the yellow style (override accidental white) */
.bukhari-card[data-title^="Sahih Muslim"] .view-button {
    background-color: #FFD700 !important;
    color: #000 !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16) !important;
    border: none !important;
}

/* If there are any specific view-button variants inside Muslim cards, enforce consistent pill shape */
.bukhari-card[data-title^="Sahih Muslim"] .view-button {
    padding: 14px 30px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* MOBILE OVERRIDES: make bottom-right floating buttons compact, perfectly circular, and scale icons */
@media (max-width: 480px) {
    /* Ensure both floating buttons remain uniform and stacked on small screens */
    #telegram-button,
    #go-to-top {
        width: 44px !important;
        height: 44px !important;
        right: 12px !important;
        border-radius: 50% !important; /* perfect circles */
        padding: 0 !important;
        box-shadow: 0 6px 14px rgba(0,0,0,0.18) !important;
    }

    /* maintain vertical stack spacing */
    #telegram-button {
        bottom: 72px !important; /* 44px button + 12px gap + 16px bottom space = 72 */
    }
    #go-to-top {
        bottom: 16px !important;
    }

    #telegram-button svg {
        width: 20px !important;
        height: 20px !important;
        display: block;
    }

    #go-to-top .arrow-up {
        width: 18px !important;
        height: 18px !important;
        stroke-width: 3 !important;
    }
}