/**
 * Tinh Yeu Chua - Mobile Bottom Navigation
 */

/* ==========================================
   MOBILE BOTTOM NAVIGATION
   ========================================== */
.tyc-mobile-nav {
   display: none;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   background: #fff;
   border-top: 1px solid #e5e7eb;
   z-index: 9998;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
   .tyc-mobile-nav {
      display: flex !important;
      flex-direction: row !important;
      justify-content: space-around !important;
      align-items: stretch !important;
      padding: 8px 0;
      padding-bottom: calc(8px + env(safe-area-inset-bottom));
   }

   body {
      padding-bottom: 70px !important;
   }
}

.tyc-nav-item {
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
   flex: 1 !important;
   gap: 4px;
   color: #6b7280;
   text-decoration: none !important;
   font-size: 10px !important;
   font-weight: 500;
   padding: 8px 4px !important;
   border-radius: 0;
   transition: all 0.2s;
   min-height: 50px;
   text-align: center;
}

.tyc-nav-item i {
   font-size: 20px !important;
   line-height: 1 !important;
   display: block !important;
}

.tyc-nav-item span {
   font-size: 10px !important;
   line-height: 1.2 !important;
   display: block !important;
}

.tyc-nav-item.active,
.tyc-nav-item:hover {
   color: #0084ff;
}

.tyc-nav-item.active {
   background: rgba(0, 132, 255, 0.1);
}

/* Dark Mode for Mobile Nav */
[data-theme='dark'] .tyc-mobile-nav {
   background: #1f2937;
   border-color: #374151;
}

[data-theme='dark'] .tyc-nav-item {
   color: #9ca3af;
}

[data-theme='dark'] .tyc-nav-item.active,
[data-theme='dark'] .tyc-nav-item:hover {
   color: #60a5fa;
}

[data-theme='dark'] .tyc-nav-item.active {
   background: rgba(96, 165, 250, 0.15);
}