/* Premium navbar: elegant, smooth animations, professional styling */
.navbar-modern {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 4px 24px rgba(11,35,60,0.06), 0 1px 3px rgba(11,35,60,0.02);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition: all .28s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-modern .container { 
  align-items: center;
  position: relative;
}

.navbar-modern .navbar-brand {
  font-weight: 800;
  color: #2563eb;
  display: flex;
  align-items: center;
  letter-spacing: .3px;
  transition: all .22s ease;
}
.navbar-modern .navbar-brand:hover {
  color: #1d4ed8;
  transform: translateX(2px);
}
.navbar-modern .navbar-brand i { 
  color: #3b82f6; 
  margin-right: .6rem; 
  font-size: 1.15rem;
  transition: transform .22s ease;
}
.navbar-modern .navbar-brand:hover i {
  transform: rotate(-5deg) scale(1.08);
}

.navbar-modern .nav-link {
  color: #1f2937;
  font-weight: 500;
  padding: .6rem .8rem;
  position: relative;
  transition: all .24s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
}

/* Elegant underline indicator */
.navbar-modern .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  bottom: 8px;
  height: 2.5px;
  width: 32px;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 4px;
  transition: all .28s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  opacity: 0;
}
.navbar-modern .nav-link:hover::after,
.navbar-modern .nav-link:focus::after,
.navbar-modern .nav-link.active::after { 
  transform: translateX(-50%) scaleX(1); 
  opacity: 1;
}

/* Smooth hover background with subtle glow */
.navbar-modern .nav-link:hover,
.navbar-modern .nav-link:focus { 
  background: linear-gradient(135deg, rgba(37,99,235,0.05), rgba(59,130,246,0.08));
  color: #1e40af;
  box-shadow: 0 2px 8px rgba(37,99,235,0.06);
}

/* Refined navbar buttons */
.navbar-modern .btn {
  border-radius: 10px;
  padding: .38rem .85rem;
  font-weight: 600;
  transition: all .24s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.3px;
}
.navbar-modern .btn:hover { 
  transform: translateY(-2px); 
}

.navbar-modern .btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #1e40af !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(37,99,235,0.18), 0 2px 6px rgba(37,99,235,0.12);
}
.navbar-modern .btn-primary:hover {
  box-shadow: 0 12px 28px rgba(37,99,235,0.24), 0 4px 10px rgba(37,99,235,0.16);
}

.navbar-modern .btn-outline-primary {
  color: #2563eb !important;
  border: 1.5px solid rgba(37,99,235,0.25) !important;
  background: linear-gradient(135deg, rgba(37,99,235,0.03), rgba(37,99,235,0.06)) !important;
}
.navbar-modern .btn-outline-primary:hover {
  border-color: rgba(37,99,235,0.4) !important;
  background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(37,99,235,0.12)) !important;
  box-shadow: 0 4px 12px rgba(37,99,235,0.08);
}

.navbar-modern .btn-outline-secondary {
  color: #4b5563 !important;
  border: 1.5px solid rgba(75,85,99,0.2) !important;
  background: rgba(75,85,99,0.03) !important;
}
.navbar-modern .btn-outline-secondary:hover {
  border-color: rgba(75,85,99,0.35) !important;
  background: rgba(75,85,99,0.08) !important;
  box-shadow: 0 4px 12px rgba(75,85,99,0.06);
}

/* Toggler style */
.navbar-modern .navbar-toggler {
  border: 1px solid rgba(16,24,40,0.06);
  border-radius: 10px;
}

/* Elegant dropdown menu */
.navbar-modern .dropdown-menu {
  border-radius: 12px;
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 16px 48px rgba(11,35,60,0.12), 0 4px 16px rgba(11,35,60,0.06);
  padding: .6rem 0;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  overflow: hidden;
}

.navbar-modern .dropdown-item {
  padding: .65rem 1.25rem;
  font-weight: 500;
  color: #374151;
  transition: all .22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.navbar-modern .dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #2563eb, #3b82f6);
  transform: scaleY(0);
  transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.navbar-modern .dropdown-item:hover {
  background: linear-gradient(90deg, rgba(37,99,235,0.08), rgba(37,99,235,0.04));
  color: #1e40af;
  padding-left: 1.4rem;
}

.navbar-modern .dropdown-item:hover::before {
  transform: scaleY(1);
}

/* Cart icon contrast */
.navbar-modern .nav-link .fa-shopping-cart { color: #1f2937; }

/* Small screens adjustments */
@media (max-width: 767.98px) {
  .navbar-modern { padding-top: .3rem; padding-bottom: .3rem; }
  .navbar-modern .nav-link { padding: .45rem .5rem; }
  .navbar-modern .nav-link::after { display: none; }
}

/* Accessibility: reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .navbar-modern .btn,
  .navbar-modern .nav-link::after { transition: none !important; transform: none !important; }
}

/* Smooth desktop dropdown with elegant reveal animation */
@media (hover: hover) and (min-width: 768px) {
  .navbar-modern .dropdown {
    position: relative;
  }

  .navbar-modern .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    /* reduce the translate gap so pointer moves won't briefly leave the trigger area */
    transform: translateY(-4px) scale(0.98);
    transition: all .18s cubic-bezier(0.34, 1.2, 0.64, 1);
    pointer-events: none;
    z-index: 1050;
    margin-top: 0.1rem;
    top: 100%;
  }

  /* Keep dropdown visible when hovering over trigger OR menu itself */
  .navbar-modern .dropdown:hover > .dropdown-menu,
  .navbar-modern .dropdown:focus-within > .dropdown-menu,
  .navbar-modern .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* Refined dropdown caret indicator */
  .navbar-modern .dropdown-toggle::after {
    content: '';
    display: inline-block;
    margin-left: .28rem;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4.5px solid currentColor;
    transition: all .24s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: .85;
  }

  .navbar-modern .dropdown:hover > .dropdown-toggle::after {
    opacity: 1;
    transform: translateY(1px);
  }
}