/* ============================================================
   ARBIND - FLOATING NAV CENTER FIX V1
   ============================================================ */

:root{
  --arb-nav-bg: linear-gradient(180deg, rgba(7,19,28,.96) 0%, rgba(5,14,22,.98) 100%);
  --arb-nav-border: rgba(212,167,44,.42);
  --arb-nav-shadow:
    0 18px 50px rgba(0,0,0,.45),
    0 0 0 1px rgba(212,167,44,.12) inset;
  --arb-nav-radius: 28px;
}

/* Contenedor principal de la barra flotante */
.arb-floating-nav,
.arbind-floating-nav,
.desktop-floating-nav,
.bottom-floating-nav,
.floating-bottom-nav,
nav.arb-bottom-nav,
nav.bottom-nav {
  position: fixed !important;
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;

  width: auto !important;
  min-width: unset !important;
  max-width: min(1280px, calc(100vw - 48px)) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;

  padding: 10px 14px !important;
  background: var(--arb-nav-bg) !important;
  border: 1px solid var(--arb-nav-border) !important;
  border-radius: var(--arb-nav-radius) !important;
  box-shadow: var(--arb-nav-shadow) !important;
  backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
  z-index: 9999 !important;
}

/* Si la barra usa UL o un wrapper interno */
.arb-floating-nav ul,
.arbind-floating-nav ul,
.desktop-floating-nav ul,
.bottom-floating-nav ul,
.floating-bottom-nav ul,
.arb-floating-nav .nav-items,
.arbind-floating-nav .nav-items,
.desktop-floating-nav .nav-items,
.bottom-floating-nav .nav-items,
.floating-bottom-nav .nav-items,
.arb-floating-nav .floating-nav-inner,
.arbind-floating-nav .floating-nav-inner,
.desktop-floating-nav .floating-nav-inner,
.bottom-floating-nav .floating-nav-inner,
.floating-bottom-nav .floating-nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Botones / enlaces de la barra */
.arb-floating-nav a,
.arbind-floating-nav a,
.desktop-floating-nav a,
.bottom-floating-nav a,
.floating-bottom-nav a,
.arb-floating-nav button,
.arbind-floating-nav button,
.desktop-floating-nav button,
.bottom-floating-nav button,
.floating-bottom-nav button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  min-width: 110px !important;
  height: 54px !important;
  padding: 0 18px !important;

  border-radius: 18px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;

  background: transparent !important;
  border: 1px solid transparent !important;
  color: #EAF2F8 !important;

  transition: all .22s ease !important;
}

/* Hover */
.arb-floating-nav a:hover,
.arbind-floating-nav a:hover,
.desktop-floating-nav a:hover,
.bottom-floating-nav a:hover,
.floating-bottom-nav a:hover,
.arb-floating-nav button:hover,
.arbind-floating-nav button:hover,
.desktop-floating-nav button:hover,
.bottom-floating-nav button:hover,
.floating-bottom-nav button:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(212,167,44,.28) !important;
  background: rgba(255,255,255,.035) !important;
}

/* Item activo */
.arb-floating-nav a.active,
.arbind-floating-nav a.active,
.desktop-floating-nav a.active,
.bottom-floating-nav a.active,
.floating-bottom-nav a.active,
.arb-floating-nav button.active,
.arbind-floating-nav button.active,
.desktop-floating-nav button.active,
.bottom-floating-nav button.active,
.floating-bottom-nav button.active {
  background: linear-gradient(180deg, #F3CF58 0%, #D8A625 100%) !important;
  color: #0B0E12 !important;
  font-weight: 700 !important;
  border-color: rgba(255,215,90,.65) !important;
  box-shadow:
    0 8px 20px rgba(216,166,37,.32),
    0 0 0 1px rgba(255,241,180,.18) inset !important;
}

/* Íconos */
.arb-floating-nav img,
.arbind-floating-nav img,
.desktop-floating-nav img,
.bottom-floating-nav img,
.floating-bottom-nav img,
.arb-floating-nav svg,
.arbind-floating-nav svg,
.desktop-floating-nav svg,
.bottom-floating-nav svg,
.floating-bottom-nav svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
}

/* Evitar el pedazo vacío del final */
.arb-floating-nav::after,
.arbind-floating-nav::after,
.desktop-floating-nav::after,
.bottom-floating-nav::after,
.floating-bottom-nav::after {
  content: none !important;
}

/* Responsive */
@media (max-width: 1200px) {
  .arb-floating-nav,
  .arbind-floating-nav,
  .desktop-floating-nav,
  .bottom-floating-nav,
  .floating-bottom-nav,
  nav.arb-bottom-nav,
  nav.bottom-nav {
    max-width: calc(100vw - 28px) !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .arb-floating-nav a,
  .arbind-floating-nav a,
  .desktop-floating-nav a,
  .bottom-floating-nav a,
  .floating-bottom-nav a,
  .arb-floating-nav button,
  .arbind-floating-nav button,
  .desktop-floating-nav button,
  .bottom-floating-nav button,
  .floating-bottom-nav button {
    min-width: 92px !important;
    height: 48px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }
}