/* ===== bottom-nav.css ===== */
:root{
  /* fundal mai transparent ca headerul */
  --mm-bg: rgba(0,0,0,0.40);
  --mm-border: rgba(255,255,255,.08);
  --mm-text: rgba(255,255,255,.80);
  --mm-active: #1ed760; /* verde Spotify; schimbă dacă vrei */
  --mm-nav-h: 0px;      /* umplut din JS */
}

/* BARA JOS */
.mm-bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9998;                   /* sub mini-player */
  display: none;                   /* doar pe mobil */
  background: var(--mm-bg);        /* semi-transparent */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-top: 1px solid var(--mm-border);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}
@media (max-width: 768px){ .mm-bottom-nav{ display:flex; } }

/* TAB-URI */
.mm-bottom-nav .mm-tab{
  flex: 1 1 0;
  min-width: 0;
  color: var(--mm-text);
  text-decoration: none;
  font: 600 11px/1.2 Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border-radius: 14px;
  transition: color .2s ease, background-color .2s ease, transform .1s;
}
.mm-bottom-nav .mm-tab:active{ transform: translateY(1px); }
.mm-bottom-nav .mm-tab svg{ display:block; }

.mm-bottom-nav .mm-tab.is-active,
.mm-bottom-nav .mm-tab[aria-current="page"]{ color: var(--mm-active); }

.mm-bottom-nav .mm-tab--primary{ font-weight: 700; }
.mm-bottom-nav .mm-tab--primary.is-active,
.mm-bottom-nav .mm-tab--primary[aria-current="page"]{
  color: var(--mm-active);
  background: color-mix(in srgb, var(--mm-active) 10%, transparent);
}

/* MINI-PLAYER PESTE BARĂ */
#mini-player.mini-player{
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--mm-nav-h, 0px) + env(safe-area-inset-bottom) + 0.1px);
  z-index: 9999; /* peste .mm-bottom-nav */
}

/* SPAȚIU JOS PENTRU CONȚINUT */
body{
  padding-bottom: calc(var(--mm-nav-h, 0px) + 110px); /* ~ înălțime mini-player */
}
@supports (padding-bottom: calc(1px)){
  body{
    padding-bottom: calc(var(--mm-nav-h, 0px) + 110px + env(safe-area-inset-bottom));
  }
}

/* CÂND E DESCHIS PLAYERUL FULL — ascunde mini + bara jos */
body.player-open #mini-player{ display:none !important; }
body.player-open .mm-bottom-nav{ display:none !important; }

/* OPȚIONAL: doar iconițe fără text */
/*
.mm-bottom-nav .mm-tab span{ display:none; }
.mm-bottom-nav .mm-tab{ padding:10px 4px; }
*/