/* ============================================
   Bottom Navigation - Floating Style
   مشوار تاورغاء 2026
   ============================================ */

.bottom-nav-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  pointer-events: none;
  padding: 0 1rem 0.75rem;
}

.bottom-nav-wrapper {
  pointer-events: none;
  max-width: 640px;
  margin: 0 auto;
}

.bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(254, 250, 224, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--radius-3xl);
  padding: 0.5rem 0.75rem;
  box-shadow: 
    0 10px 40px rgba(40, 54, 24, 0.15),
    0 4px 16px rgba(96, 108, 56, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border: 2px solid var(--olive-500);
  pointer-events: auto;
  transition: transform var(--transition-base);
}

/* Dark Mode Support - REMOVED */

/* Nav Item */
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--olive-600);
  transition: all var(--transition-base);
  position: relative;
  padding: 0.5rem;
  border-radius: var(--radius-xl);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  min-width: 4rem;
}

.nav-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  width: 100%;
}

/* Icon Wrapper */
.nav-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
}

.nav-icon {
  transition: all var(--transition-base);
  stroke-width: 2;
  width: 1.5rem;
  height: 1.5rem;
}

/* Indicator Line */
.nav-indicator {
  position: absolute;
  bottom: -0.25rem;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 1.5rem;
  height: 0.1875rem;
  background: var(--olive-500);
  border-radius: 0.125rem;
  transition: transform var(--transition-base);
}

/* Label */
.nav-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-base);
  white-space: nowrap;
  color: inherit;
}

/* ===== Active State ===== */
.nav-item.active {
  color: var(--olive-700);
  font-weight: 700;
}

.nav-item.active .nav-icon-wrapper {
  background: var(--olive-500);
}

.nav-item.active .nav-indicator {
  transform: translateX(-50%) scaleX(1);
}

.nav-item.active .nav-icon {
  stroke: var(--cream-50);
  transform: scale(1.1);
  stroke-width: 2.5;
}

/* ===== Highlight Item (للخريطة في الوسط) ===== */
.nav-item-highlight .nav-icon-wrapper.highlight {
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, var(--olive-500), var(--copper-500));
  box-shadow: 
    0 8px 24px rgba(96, 108, 56, 0.5),
    0 4px 12px rgba(96, 108, 56, 0.3);
  margin-top: -1rem;
}

.nav-item-highlight .nav-icon {
  stroke: var(--cream-50);
  stroke-width: 2.5;
  width: 1.75rem;
  height: 1.75rem;
}

.nav-item-highlight.active .nav-icon-wrapper.highlight {
  transform: scale(1.05);
  box-shadow: 
    0 12px 32px rgba(96, 108, 56, 0.6),
    0 6px 16px rgba(96, 108, 56, 0.4);
}

/* ===== Touch Effects ===== */
@media (hover: none) and (pointer: coarse) {
  .nav-item:active {
    transform: scale(0.95);
  }
  
  .nav-item:active .nav-icon-wrapper {
    transform: scale(0.9);
  }
  
  .nav-item-highlight:active .nav-icon-wrapper.highlight {
    transform: scale(0.95);
  }
}

/* ===== Hover للديسكتوب ===== */
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover:not(.active) {
    color: #235347;
  }
  
  .nav-item:hover:not(.active) .nav-icon-wrapper {
    background: rgba(142, 182, 155, 0.3);
  }
  
  .nav-item-highlight:hover .nav-icon-wrapper.highlight {
    transform: translateY(-0.125rem);
    box-shadow: 
      0 12px 32px rgba(142, 182, 155, 0.6),
      0 6px 16px rgba(142, 182, 155, 0.4);
  }
}

/* ===== Safe Area للأجهزة مع Notch ===== */
.safe-area-bottom {
  height: env(safe-area-inset-bottom);
  background: transparent;
}

/* ===== إخفاء في الشاشات الكبيرة ===== */
@media (min-width: 768px) {
  .bottom-nav-container {
    display: none;
  }
}

/* ===== Animation عند الدخول ===== */
@keyframes slideUpNav {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.bottom-nav {
  animation: slideUpNav 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

/* ===== Ripple Effect (Optional Enhancement) ===== */
.nav-item::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: var(--radius-xl);
  background: radial-gradient(circle, #8EB69B 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
  pointer-events: none;
}

.nav-item:active::after {
  transform: scale(0);
  opacity: 0.3;
  transition: 0s;
}