/* Theme tokens (fallbacks allow reuse of existing :root if already defined elsewhere) */
:root{
  --color-primary:  var(--color-primary,  #e0c170);
  --color-secondary:var(--color-secondary,#c7ae6a);
  --color-tertiary: var(--color-tertiary, #b99a45);
  --text-primary:   var(--text-primary,   #e3d6b4);
  --text-secondary: var(--text-secondary, #a99a6d);
  --text-accent:    var(--text-accent,    #d5c28f);
  --color-dark:     var(--color-dark,     #1e1e1e);
  --color-medium:   var(--color-medium,   #313131);

  /* Nav-specific */
  --nav-height: 64px;
  --nav-z: 1030;
  --nav-bg: linear-gradient(145deg, rgba(13,13,13,0.3), rgba(20,20,35,0.3));
  --nav-border: rgba(255,255,255,0.06);
  --nav-icon: var(--text-secondary);
  --nav-label: var(--text-secondary);
  --nav-active: var(--color-primary);
  --nav-label-active: var(--text-accent);
  --nav-glow: 0 8px 30px rgba(224,193,112,0.15);
}

/* Mobile-only padding so content isn't covered (apply to provided containers) */
@media (max-width: 767.98px){
  .tab-content,
  .tab-content.active,
  .tab-viewport,
  .menu{
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 16px);
  }
}

/* Hide the bar on desktop */
@media (min-width: 768px){
  .tabbar{ display: none !important; }
}

/* Bar chrome */
.tabbar{
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch;
  background: var(--nav-bg);
  border-top: 1px solid #e0c170;
  backdrop-filter: saturate(160%) blur(12px);   /* frosted glass */
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 -4px 24px rgba(0,0,0,.22), var(--nav-glow);
  z-index: var(--nav-z);
  touch-action: manipulation;
  font-family: Poppins, Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
}

/* Buttons (tabs + action) */
.tabbar__btn{
  display: grid; place-items: center; gap: 0px;  /* No gap between icon and text */
  padding: 7px 8px 9px;  /* Asymmetrical: more space below for text breathing room */
  color: var(--nav-label);
  background: none; border: 0; margin: 0;
  text-decoration: none;
  position: relative; cursor: pointer;
  transition: color .2s ease;
}

/* Icons (Font Awesome) */
.tabbar__icon{
  display: block;
  font-size: 20px; line-height: 1;  /* Reduced to 20px */
  color: var(--nav-icon);
  filter: drop-shadow(0 0 8px rgba(224,193,112,0.4));  /* Single subtle glow */
  transition: transform .2s ease, opacity .2s ease, color .2s ease;
  margin: 0; padding: 0;  /* Reset any inherited spacing */
}

/* Labels */
.tabbar__label{
  font-size: 12px; line-height: 1; letter-spacing: .02em;
  color: currentColor;
  transform: translateY(0);  /* Removed translateY to bring text closer to icon */
  text-shadow: 0 0 8px rgba(224,193,112,0.05);
  transition: transform .2s ease, opacity .2s ease;
  margin: 0; padding: 0;  /* Reset any inherited spacing */
}

/* Active TAB (visual) — action button never gets this state */
.tabbar__btn[data-role="tab"][aria-selected="true"]{
  color: var(--nav-label-active);
}
.tabbar__btn[data-role="tab"][aria-selected="true"] .tabbar__icon{
  color: var(--nav-active);
  transform: translateY(-1px) scale(1.05);
  opacity: 1;
}

/* Focus ring (visible on dark) */
.tabbar__btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(224,193,112,.35) inset;
  border-radius: 12px;
}

/* Active indicator (gold gradient + subtle shimmer) — only tracks tabs */
.tabbar__indicator{
  position: absolute;
  bottom: calc(5px + env(safe-area-inset-bottom, 0px)); /* Moved down 2px from 7px */
  height: 3px; /* Increased back from 2px for better visibility */
  width: 20px; /* Further decreased from 24px for tighter animation */
  /* margin removed to fix centering with JavaScript positioning */
  background: linear-gradient(90deg, #a88a3d, #f0d080 25%, #fff8e1 50%, #f0d080 75%, #a88a3d) !important; /* More vibrant gradient */
  background-size: 250% 100%; /* Larger background for better shimmer effect */
  border-radius: 999px;
  box-shadow: 
    0 3px 16px rgba(224,193,112,.45), /* Enhanced outer glow */
    0 0 0 1px rgba(255,215,0,.4) inset, /* Brighter inner border */
    0 1px 3px rgba(224,193,112,.6); /* Additional definition shadow */
  animation: nav-shimmer 2.8s ease-in-out infinite; /* Faster, smoother timing */
  transition: left .25s cubic-bezier(.22,.9,.26,1), width .25s cubic-bezier(.22,.9,.26,1);
  pointer-events: none;
  opacity: 1 !important; /* Ensure it's visible */
  display: block !important; /* Ensure it's not hidden */
}
@keyframes nav-shimmer{ from{ background-position: 200% 0; } to{ background-position: 0 0; } }

/* Reduced motion: disable shimmer and transitions */
@media (prefers-reduced-motion: reduce){
  .tabbar__icon, .tabbar__label, .tabbar__indicator{ transition: none !important; animation: none !important; }
}

/* Larger hit areas on touch */
@media (pointer: coarse){
  .tabbar__btn{ padding-top: 9px; padding-bottom: 9px; }  /* Redistributed: 13px→9px, 11px→9px */
  .tabbar__icon{ font-size: 22px; }  /* Reduced to 22px */
}

/* --- Scroll guard so nothing hides behind the fixed nav (mobile only) --- */
@media (max-width: 767.98px){
  /* JS toggles this class on <body> when the bar is active */
  body.tabbar-present::after{
    content: "";
    display: block;
    height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  }
}

/* --- Enforce theme colors in the nav to defeat global overrides --- */
.tabbar,
.tabbar .tabbar__btn{
  color: #ffffff !important; /* White text for better contrast */
}

.tabbar .tabbar__icon{
  color: #c7ae6a !important; /* Updated to match auth button secondary color */
  opacity: 1 !important;     /* override any global low opacity */
}

.tabbar .tabbar__label{
  color: #ffffff !important; /* White labels */
}

/* Active tab: bright gold icon, accent label */
.tabbar .tabbar__btn[data-role="tab"][aria-selected="true"]{
  color: var(--text-accent, #d5c28f) !important;
}
.tabbar .tabbar__btn[data-role="tab"][aria-selected="true"] .tabbar__icon{
  color: #e0c170 !important; /* Updated to match auth button primary color for active state */
  transform: translateY(-1px) scale(1.05);
}

/* If any global rule targets <i>, normalize it within the nav scope */
.tabbar i{ color: inherit !important; }

/* Ensure proper stacking: indicator above bar bg but not blocking interaction */
.tabbar__indicator{ 
  z-index: 1;
  pointer-events: none; /* Already set above, but reinforcing */
}
/* Buttons don't need z-index - they naturally stack above the indicator */