/* ═══ Unified Floating Navigation Bar ═══ */
.nav-float{
  position:fixed;bottom:0.5rem;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:0.25rem;
  padding:0.3rem;border-radius:9999px;
  background:rgba(8,12,20,0.85);
  border:1px solid rgba(34,197,94,0.25);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 4px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04);
  max-width:calc(100vw - 1rem);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav-float::-webkit-scrollbar{display:none}

.nav-float a{
  display:flex;align-items:center;gap:0.25rem;
  padding:0.35rem 0.55rem;border-radius:9999px;
  font-size:0.65rem;font-weight:600;line-height:1;
  text-decoration:none;white-space:nowrap;
  color:rgba(209,250,229,0.85);
  background:transparent;
  border:1px solid transparent;
  transition:all 0.2s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
}
.nav-float a .nav-icon{font-size:0.8rem;line-height:1;flex-shrink:0}
.nav-float a .nav-label{font-size:0.6rem}

/* Hover / active states */
.nav-float a:hover{
  background:rgba(34,197,94,0.15);
  border-color:rgba(34,197,94,0.3);
  color:#86efac;
}
.nav-float a:active{
  transform:scale(0.93);
  background:rgba(34,197,94,0.25);
}

/* Active page highlight */
.nav-float a.nav-active{
  background:rgba(34,197,94,0.2);
  border-color:rgba(34,197,94,0.4);
  color:#86efac;
}

/* Quran special gold accent */
.nav-float a[data-accent="gold"]{color:rgba(252,211,77,0.9)}
.nav-float a[data-accent="gold"]:hover{
  background:rgba(255,215,0,0.12);
  border-color:rgba(255,215,0,0.3);
  color:#fcd34d;
}
.nav-float a[data-accent="gold"].nav-active{
  background:rgba(255,215,0,0.15);
  border-color:rgba(255,215,0,0.35);
  color:#fcd34d;
}

/* Blog blue accent */
.nav-float a[data-accent="blue"]{color:rgba(147,197,253,0.9)}
.nav-float a[data-accent="blue"]:hover{
  background:rgba(59,130,246,0.12);
  border-color:rgba(59,130,246,0.3);
  color:#93c5fd;
}

/* ═══ Responsive ═══ */

/* Small phones: icon-only, centered */
@media(max-width:400px){
  .nav-float{gap:0.15rem;padding:0.25rem}
  .nav-float a{padding:0.3rem 0.4rem}
  .nav-float a .nav-label{display:none}
  .nav-float a .nav-icon{font-size:0.9rem}
}

/* Medium phones: compact labels */
@media(min-width:401px) and (max-width:639px){
  .nav-float{gap:0.2rem;padding:0.25rem 0.35rem}
  .nav-float a{padding:0.3rem 0.45rem}
  .nav-float a .nav-label{font-size:0.55rem}
}

/* Tablets */
@media(min-width:640px) and (max-width:1023px){
  .nav-float{bottom:0.75rem;gap:0.3rem;padding:0.35rem 0.5rem}
  .nav-float a{padding:0.35rem 0.6rem}
  .nav-float a .nav-label{font-size:0.65rem}
}

/* Desktop: bottom-right, slightly larger */
@media(min-width:1024px){
  .nav-float{
    left:auto;right:1rem;bottom:1rem;
    transform:none;
    gap:0.3rem;padding:0.35rem 0.5rem;
  }
  .nav-float a{padding:0.4rem 0.65rem}
  .nav-float a .nav-label{font-size:0.68rem}
  .nav-float a .nav-icon{font-size:0.85rem}
}

/* RTL */
[dir="rtl"] .nav-float{flex-direction:row-reverse}
@media(min-width:1024px){
  [dir="rtl"] .nav-float{right:auto;left:1rem}
}