/* Mobile Navigation Menu */
.nav-mob {
  position: fixed !important;
  top: 64px !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - 64px) !important;
  background: #fff !important;
  z-index: 50 !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s ease !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.dark .nav-mob {
  background: #0f0f0f !important;
}

.nav-mob.is-open {
  transform: translateX(0) !important;
}

.nav-mob-overlay {
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: calc(100vh - 64px) !important;
  background: transparent !important;
  display: none !important;
  z-index: 40 !important;
}

.nav-mob.is-open .nav-mob-overlay {
  display: block !important;
}

.nav-mob-wrap {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  background: transparent !important;
  position: relative !important;
  z-index: 51 !important;
}

.nav-mob-primary {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  background-color: transparent !important;
}

.nav-mob-primary > ul {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  list-style: none !important;
}

.nav-mob-primary > ul > li {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

.dark .nav-mob-primary > ul > li {
  border-bottom-color: #2a2a2a !important;
}

.nav-mob-primary-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  color: #000 !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  min-height: 50px !important;
  font-family: inherit !important;
  text-align: left !important;
  line-height: 1.5 !important;
}

@media (min-width: 480px) {
  .nav-mob-primary-link {
    padding: 16px 20px !important;
    font-size: 1rem !important;
    min-height: 52px !important;
  }
}

.nav-mob-primary-link:hover,
.nav-mob-primary-link:focus {
  background-color: #f5f5f5 !important;
  outline: none !important;
}

.dark .nav-mob-primary-link {
  color: #fff !important;
}

.dark .nav-mob-primary-link:hover,
.dark .nav-mob-primary-link:focus {
  background-color: #1a1a1a !important;
}

.nav-mob-primary-link > span {
  flex: 1 !important;
  text-align: left !important;
}

.nav-mob-arrow {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
  color: #666 !important;
  transition: transform 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  stroke-width: 2 !important;
}

.dark .nav-mob-arrow {
  color: #999 !important;
}

.nav-mob-primary > ul > li > button.nav-mob-primary-link {
  position: relative !important;
}

.nav-mob-primary > ul > li > button.nav-mob-primary-link .nav-mob-arrow {
  transition: transform 0.3s ease !important;
}

.nav-mob-primary > ul > li.is-submenu-open > button.nav-mob-primary-link .nav-mob-arrow {
  transform: rotate(45deg) !important;
}

.nav-mob-submenu {
  display: none !important;
  flex-direction: column !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  background-color: #fafafa !important;
  border-top: 1px solid #e5e5e5 !important;
}

.dark .nav-mob-submenu {
  background-color: #1a1a1a !important;
  border-top-color: #2a2a2a !important;
}

.nav-mob-submenu.is-open {
  display: flex !important;
  animation: slideDown 0.3s ease !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.nav-mob-submenu > li {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  border-bottom: 1px solid #efefef !important;
}

.dark .nav-mob-submenu > li {
  border-bottom-color: #252525 !important;
}

.nav-mob-submenu > li > a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 12px 16px 12px 32px !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  color: #555 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  font-family: inherit !important;
}

@media (min-width: 480px) {
  .nav-mob-submenu > li > a {
    padding: 13px 20px 13px 40px !important;
    font-size: 0.95rem !important;
    min-height: 50px !important;
  }
}

.nav-mob-submenu > li > a:hover,
.nav-mob-submenu > li > a:focus {
  background-color: #eee !important;
  outline: none !important;
}

.dark .nav-mob-submenu > li > a {
  color: #aaa !important;
}

.dark .nav-mob-submenu > li > a:hover,
.dark .nav-mob-submenu > li > a:focus {
  background-color: #252525 !important;
}

.nav-mob-divider {
  height: 1px !important;
  background: #e5e5e5 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.dark .nav-mob-divider {
  background: #2a2a2a !important;
}

.nav-mob-auth {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px !important;
  flex-shrink: 0 !important;
  background-color: transparent !important;
  align-items: stretch !important;
}

@media (min-width: 480px) {
  .nav-mob-auth {
    gap: 12px !important;
    padding: 16px 20px !important;
  }
}

.nav-mob-btn {
  display: block !important;
  width: 100% !important;
  padding: 12px 16px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: 5px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  text-align: center !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  min-height: auto !important;
  letter-spacing: normal !important;
  color: white !important;
  font-family: inherit !important;
}

.nav-mob-btn-primary {
  background-color: #000 !important;
  color: #fff !important;
}

.nav-mob-btn-primary:hover,
.nav-mob-btn-primary:focus {
  background-color: #222 !important;
  outline: none !important;
}

.dark .nav-mob-btn-primary {
  background-color: #fff !important;
  color: #000 !important;
}

.dark .nav-mob-btn-primary:hover,
.dark .nav-mob-btn-primary:focus {
  background-color: #ddd !important;
}

.nav-mob-btn-secondary {
  background-color: transparent !important;
  color: #000 !important;
  border: 1px solid #000 !important;
}

.nav-mob-btn-secondary:hover,
.nav-mob-btn-secondary:focus {
  background-color: #f5f5f5 !important;
  outline: none !important;
}

.dark .nav-mob-btn-secondary {
  color: #fff !important;
  border-color: #fff !important;
}

.dark .nav-mob-btn-secondary:hover,
.dark .nav-mob-btn-secondary:focus {
  background-color: #1a1a1a !important;
}

.nav-mob-social {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px !important;
  flex-shrink: 0 !important;
  background-color: transparent !important;
}

@media (min-width: 480px) {
  .nav-mob-social {
    padding: 16px 20px !important;
  }
}

/* Hide on desktop */
@media (min-width: 1024px) {
  .nav-mob {
    display: none !important;
  }
  
  .nav-mob-overlay {
    display: none !important;
  }
}