From 551a8ccf8c9a94d7e421349b5456319beb594031 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 2 Jan 2026 02:14:28 -0500
Subject: [PATCH] Bigger arrows and counter

---
 src/components/Map/markerManager.js | 11 ++++++++++-
 src/styles/mapMarkers.css           | 30 +++++++++++++++++++++++++----
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/components/Map/markerManager.js b/src/components/Map/markerManager.js
index c8c3efd..f19774c 100644
--- a/src/components/Map/markerManager.js
+++ b/src/components/Map/markerManager.js
@@ -249,7 +249,10 @@ function applyPostDetails(modalWrap, post) {
     const arrowHtml = heroHasGallery
       ? `<button class="sw-modal-hero-arrow left" type="button" aria-label="Previous image"><i class="fa-solid fa-chevron-left" /></button><button class="sw-modal-hero-arrow right" type="button" aria-label="Next image"><i class="fa-solid fa-chevron-right" /></button>`
       : "";
-    target.innerHTML = `${heroImageHtml}${arrowHtml}`;
+    const indicatorHtml = heroHasGallery
+      ? `<div class="sw-modal-gallery-indicator" aria-live="polite"><span class="sw-modal-gallery-current">1</span><span class="sw-modal-gallery-separator">/</span><span class="sw-modal-gallery-total">${heroGallery.length}</span></div>`
+      : "";
+    target.innerHTML = `${heroImageHtml}${arrowHtml}${indicatorHtml}`;
     bindHeroLightbox(modalWrap);
     if (heroHasGallery) {
       initModalGallery(modalWrap, heroGallery);
@@ -465,6 +468,12 @@ function initModalGallery(modalWrap, gallery) {
   if (!heroImg) return;
   const arrows = modalWrap.querySelectorAll(".sw-modal-hero-arrow");
   let activeIndex = 0;
+  const indicator = modalWrap.querySelector(".sw-modal-gallery-indicator");
+  const currentIndicator = indicator?.querySelector(".sw-modal-gallery-current");
+  const totalIndicator = indicator?.querySelector(".sw-modal-gallery-total");
+  if (totalIndicator) {
+    totalIndicator.textContent = String(gallery.length);
+  }
   const setActive = (idx) => {
     if (!Number.isFinite(idx)) return;
     const normalized = (idx + gallery.length) % gallery.length;
diff --git a/src/styles/mapMarkers.css b/src/styles/mapMarkers.css
index 64c2ee6..cec453e 100644
--- a/src/styles/mapMarkers.css
+++ b/src/styles/mapMarkers.css
@@ -898,8 +898,8 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
   position:absolute;
   top:50%;
   transform:translateY(-50%) scale(0.95);
-  width:44px;
-  height:44px;
+  width:52px;
+  height:52px;
   border-radius:50%;
   border:1px solid rgba(255,255,255,0.35);
   background: rgba(0,0,0,0.55);
@@ -921,6 +921,28 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
   right:10px;
   }
 
+.sw-modal-gallery-indicator{
+  position:absolute;
+  top:0.75rem;
+  right:14px;
+  padding:0.2rem 0.65rem;
+  border-radius:999px;
+  background:rgba(0,0,0,0.6);
+  color:#fff;
+  font-size:0.78rem;
+  font-weight:700;
+  letter-spacing:0.05em;
+  display:flex;
+  align-items:center;
+  gap:0.2rem;
+  pointer-events:none;
+  z-index:12;
+  box-shadow:0 8px 18px rgba(0,0,0,0.45);
+}
+.sw-modal-gallery-separator{
+  opacity:0.7;
+}
+
 .sw-modal-hero-arrow,
 .sw-cluster-hero-media .sw-modal-hero-arrow{
   box-shadow:0 2px 12px rgba(0,0,0,0.45);
@@ -928,8 +950,8 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
 
 @media (max-width: 768px) {
   .sw-modal-hero-arrow{
-    width:40px;
-    height:40px;
+    width:46px;
+    height:46px;
     border-width:0;
     background:rgba(15,23,42,0.7);
   }