/* =========================================================================
 * Super Live Music Lyrics — app shell (loads on EVERY front-end page).
 * The mobile bottom navigation lives here (not only in the modern-ui plugin
 * skin) so it always renders, on every template, whether or not the plugin
 * skin is loaded on that page. Uses --nmui-* tokens with safe fallbacks.
 * ========================================================================= */

.niyal-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147482000;
  display: none;                 /* shown on mobile widths below */
  justify-content: space-around;
  align-items: stretch;
  margin: 0;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--nmui-glass-light, rgba(255, 255, 255, .9));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid var(--nmui-border, #e2e2e6);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
}
html[data-theme="dark"] .niyal-bottom-nav {
  background: var(--nmui-glass-dark, rgba(20, 22, 28, .86));
  border-top-color: var(--nmui-border, #2c313b);
}
.niyal-bottom-nav .nbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--nmui-muted, #8a8f98);
  font-size: 10.5px;
  letter-spacing: .01em;
  border-radius: var(--nmui-r-sm, 14px);
  transition: color .2s, background .2s, transform .15s;
}
.niyal-bottom-nav .nbn-item i { font-size: 19px; line-height: 1; }
.niyal-bottom-nav .nbn-item span { font-size: 10.5px; }
.niyal-bottom-nav .nbn-item:hover,
.niyal-bottom-nav .nbn-item.is-current { color: var(--nmui-accent, #e4422e); }
.niyal-bottom-nav .nbn-item:active { transform: scale(.93); }

/* Show on phones / small tablets. Force it so no template can hide it. */
@media (max-width: 900px) {
  .niyal-bottom-nav { display: flex !important; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  /* keep the floating dark-mode toggle + player above the bar */
  .nmui-toggle.nmui-pos-bottom-right,
  .nmui-toggle.nmui-pos-bottom-left { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 400px) {
  .niyal-bottom-nav .nbn-item { padding: 6px 2px; }
  .niyal-bottom-nav .nbn-item span { font-size: 9.5px; }
  .niyal-bottom-nav .nbn-item i { font-size: 17px; }
}