:root { --xxb-nav-h: 72px; } /* total height incl. extra bottom space */

/* Spacer to keep content/footer visible above the fixed bar */
.xxb-bottom-nav-spacer {
  height: calc(var(--xxb-nav-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width:1024px) {
  .xxb-bottom-nav-spacer { display:none; }
}

/* Mobile Bottom Navigation - ViralXXXPorn theme */
.xxb-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8009;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(135deg, #1a001f, #26001f, #2c0000, #3a0000); /* site deep red */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.6rem 0.25rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.45);
  border-top-left-radius: 42px;   /* curve left */
  border-top-right-radius: 42px;  /* curve right */
}


.xxb-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem; /* increased from 0.28rem */
  text-decoration: none;
  font-size: 0.8rem;
  line-height: 1;
  color: #fff;
  opacity: 0.85;
  padding: 0.3rem 0;
  transition: opacity 0.2s, color 0.2s, transform 0.1s;
}


.xxb-bottom-nav a.active,
.xxb-bottom-nav a:hover { color: #ff6a00; opacity: 1; }

.xxb-bottom-nav svg,
.xxb-bottom-nav .svg-icon {
  width: 22px; height: 22px;
  fill: currentColor;
  background: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}

.xxb-bottom-nav a.active,
.xxb-bottom-nav a[aria-current="page"],
.xxb-bottom-nav a.is-active {
  color: #ff6a00 !important;
  opacity: 1 !important;
}
.xxb-bottom-nav a.active svg,
.xxb-bottom-nav a[aria-current="page"] svg,
.xxb-bottom-nav a.is-active svg {
  fill: currentColor !important;
}

.xxb-bottom-nav a:active { transform: translateY(1px); }

@media (min-width:1024px) { .xxb-bottom-nav { display: none; } }