From 5344ea0b8258b721d3a0aeefc9769d37f60326ff Mon Sep 17 00:00:00 2001
From: Hamid Reza Mohammadi <mohammadi.hr@gmail.com>
Date: Tue, 15 Sep 2026 20:45:57 +0330
Subject: [PATCH] fixing audio player

---
 GanjooRazor/wwwroot/css/p8.css | 80 ++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/GanjooRazor/wwwroot/css/p8.css b/GanjooRazor/wwwroot/css/p8.css
index d623b169..613bb3dc 100644
--- a/GanjooRazor/wwwroot/css/p8.css
+++ b/GanjooRazor/wwwroot/css/p8.css
@@ -3034,3 +3034,83 @@ mark {
 #after-bio {
     scroll-margin-top: 50px;
 }
+
+/* ---------- sticky mini audio-player (recitation seek controls stay
+   reachable while scrolling the poem text) ---------- */
+
+.up-sticky-player {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px;
+    background: var(--card-inner);
+    border-top: 1px solid var(--border-gold);
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
+}
+
+.up-sticky-player__narrator {
+    font-weight: 600;
+    white-space: nowrap;
+    color: var(--lapis);
+    flex-shrink: 0;
+}
+
+.up-sticky-player__audio-slot {
+    flex: 1;
+    min-width: 0;
+}
+
+    .up-sticky-player__audio-slot audio {
+        width: 100%;
+        display: block;
+    }
+
+.up-sticky-player__lock {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--lapis);
+    padding: 4px 6px;
+    flex-shrink: 0;
+}
+
+    .up-sticky-player__lock:hover {
+        color: var(--brand);
+    }
+
+.up-sticky-player__jump {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--lapis);
+    padding: 4px 6px;
+    flex-shrink: 0;
+}
+
+    .up-sticky-player__jump:hover {
+        color: var(--brand);
+    }
+
+.up-sticky-player__close {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--lapis);
+    padding: 4px 6px;
+    flex-shrink: 0;
+}
+
+    .up-sticky-player__close:hover {
+        color: var(--brand);
+    }
+
+@media (max-width: 600px) {
+    .up-sticky-player__narrator {
+        display: none;
+    }
+}