/* Mobile Bottom Navigation Styles */

/* Safe area padding for devices with notches (iOS) */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Ensure the navigation bar has proper backdrop */
nav.fixed.bottom-0 {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Smooth transitions for active states */
nav.fixed.bottom-0 a {
  position: relative;
}

/* Active indicator - subtle underline effect */
nav.fixed.bottom-0 a.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background-color: currentColor;
  border-radius: 0 0 3px 3px;
}

/* Tap highlight removal for better mobile experience */
nav.fixed.bottom-0 a {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Ensure icons are properly sized and centered */
nav.fixed.bottom-0 svg {
  flex-shrink: 0;
}

/* Profile photo ring adjustment for active state */
nav.fixed.bottom-0 img.ring-2,
nav.fixed.bottom-0 div.ring-2 {
  box-shadow: 0 0 0 2px currentColor;
}