/* /shared/banner-mobile.css */

/* =========================
   Mobile-only banner + spotlight
========================= */

:root{
  --bottom-icon: 28px;
  --spot: 52px;

  --tray-pad-y: 0px;
  --tray-pad-x: 0px;

  --tray-inset: 12px;
  --tray-bottom: 6px;
}

/* hide top navbar on mobile */
.navbar{
  display: none !important;
}

/* =========================
   Bottom tray
========================= */
.navbar-bottom{
  display: block !important;

  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: calc(100% - var(--tray-inset)) !important;
  bottom: calc(var(--tray-bottom) + env(safe-area-inset-bottom, 0px)) !important;

  padding: var(--tray-pad-y) var(--tray-pad-x) !important;

  height: calc(var(--spot) + (var(--tray-pad-y) * 2)) !important;
  border-radius: calc((var(--spot) + (var(--tray-pad-y) * 2)) / 2) !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;

  z-index: 9999 !important;
}

/* blurrier tray glass */
.navbar-bottom.liquid-glass{
  --glass-blur: 26px;
  --glass-bright: 1.05;
}

.navbar-bottom.liquid-glass::before{
  background: rgba(235, 235, 240, 0.58) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;

  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;

  box-shadow:
    0 20px 52px rgba(0,0,0,0.22),
    0 3px 14px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.26) !important;
}

/* =========================
   6 button layout
========================= */
.navbar-bottom nav{
  width: 100% !important;
  height: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  align-items: center !important;

  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;

  /* you said this is perfect */
  padding: 0 0px !important;
  column-gap: 10px !important;
}

.navbar-bottom nav > a,
.navbar-bottom nav > span.auth-area{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;

  text-decoration: none !important;
  border-bottom: 0 !important;
}

.navbar-bottom .auth-area{
  margin-left: 0 !important;
}

#mobileAuthBtn,
#mobileAuthBtn button{
  text-decoration: none !important;
  border-bottom: 0 !important;
}

#mobileAuthBtn button{
  appearance: none !important;
  -webkit-appearance: none !important;

  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

#mobileAuthBtn button::after,
#mobileAuthBtn::after,
.navbar-bottom nav > a::after,
.navbar-bottom a::after{
  content: none !important;
  display: none !important;
}

.navbar-bottom nav img.nav-icon,
.navbar-bottom nav a img,
.navbar-bottom nav span img{
  width: var(--bottom-icon) !important;
  height: var(--bottom-icon) !important;
  display: block !important;
  object-fit: contain !important;
}

/* absolutely no underline anywhere on mobile banner */
.navbar-bottom a,
.navbar-bottom a:hover,
.navbar-bottom a:focus,
.navbar-bottom a:active,
.navbar-bottom a.active,
.navbar-bottom .auth-area,
#mobileAuthBtn,
#mobileAuthBtn button{
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.navbar-bottom a::before,
.navbar-bottom a::after,
.navbar-bottom a.active::before,
.navbar-bottom a.active::after,
.navbar-bottom a:hover::before,
.navbar-bottom a:hover::after,
#mobileAuthBtn::before,
#mobileAuthBtn::after,
#mobileAuthBtn button::before,
#mobileAuthBtn button::after,
#mobileAuthBtn button.active::before,
#mobileAuthBtn button.active::after,
#mobileAuthBtn.active::before,
#mobileAuthBtn.active::after{
  content: none !important;
  display: none !important;
}

/* =========================
   Spotlight bubble
========================= */
.navbar-bottom .nav-spotlight{
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;

  width: var(--spot) !important;
  height: var(--spot) !important;
  border-radius: 999px !important;

  transform: translate3d(0, -50%, 0);
  will-change: transform !important;
  pointer-events: none !important;
  z-index: 1 !important;

  background: rgba(212, 175, 55, 0.34) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;

  backdrop-filter: blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -10px 18px rgba(212,175,55,0.12) !important;

  animation: none !important;
  transition: none !important;
}

@keyframes homeTrayIn{
  to{
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

body.modal-open .navbar-bottom,
body.modal-open .navbar{
  pointer-events: none;
}

.navbar-bottom.liquid-glass{


  backdrop-filter: blur(5px);

}