/* ═══════════════════════════════════════════════════════════════════════════════
   GREENPOINT SEEDS — MOBILE NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════
   
   Premium mobile menu styling for Flatsome theme.
   Must load AFTER header.css
   
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE MENU DRAWER — Container
   ───────────────────────────────────────────────────────────────────────────── */

.mfp-content .sidebar-menu,
.off-canvas-left,
.off-canvas-right,
#main-menu .sidebar-menu,
.mobile-sidebar,
.sidebar-menu,
.off-canvas .sidebar-menu {
  background: linear-gradient(180deg, rgba(10, 15, 26, 0.99) 0%, rgba(2, 6, 23, 0.99) 100%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}

/* Add top padding to menu list to clear the X button */
.nav-sidebar,
.sidebar-menu .nav-sidebar,
ul.nav.nav-sidebar {
  padding-top: 70px !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   ALL MENU ITEMS — Universal Targeting
   ───────────────────────────────────────────────────────────────────────────── */

.nav-sidebar > li {
  border: none !important;
  border-bottom: none !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

.nav-sidebar > li > a,
.sidebar-menu .menu > li > a,
.sidebar-menu .menu-item > a,
.off-canvas .menu-item > a,
.mobile-sidebar .menu-item > a,
ul.nav.nav-sidebar > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 56px !important;
  padding: 16px 20px !important;
  margin: 0 0 6px 0 !important;
  background: rgba(15, 23, 42, 0.5) !important;
  border: 1px solid rgba(51, 65, 85, 0.4) !important;
  border-radius: 14px !important;
  color: #e2e8f0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover states */
.nav-sidebar > li > a:hover,
.nav-sidebar > li > a:active,
.sidebar-menu .menu > li > a:hover,
.sidebar-menu .menu-item > a:hover {
  background: rgba(30, 41, 59, 0.7) !important;
  border-color: rgba(51, 65, 85, 0.7) !important;
  color: #ffffff !important;
  transform: translateX(4px) !important;
}

/* Active/current page */
.nav-sidebar > li.current-menu-item > a,
.nav-sidebar > li.current_page_item > a,
.menu-item.current-menu-item > a {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   REMOVE DEFAULT BORDERS/SEPARATORS
   ───────────────────────────────────────────────────────────────────────────── */

.nav-sidebar > li,
.nav-sidebar li,
.sidebar-menu .menu > li,
.sidebar-menu .menu-item {
  border-bottom: none !important;
  border-top: none !important;
}

.nav-sidebar hr,
.sidebar-menu hr,
.nav-sidebar .divider,
.sidebar-menu .divider {
  display: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH FORM
   ───────────────────────────────────────────────────────────────────────────── */

.nav-sidebar > li.header-search-form,
.sidebar-menu .header-search-form,
li.header-search-form {
  position: relative !important;
  padding: 70px 0 20px 0 !important;
  margin: 0 0 12px 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.4) !important;
  background: transparent !important;
}

.nav-sidebar .search-field,
.sidebar-menu .search-field,
.header-search-form input[type="search"],
.header-search-form .search-field {
  width: 100% !important;
  height: 52px !important;
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(51, 65, 85, 0.5) !important;
  border-radius: 14px !important;
  padding: 0 50px 0 18px !important;
  color: #f1f5f9 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.nav-sidebar .search-field::placeholder,
.sidebar-menu .search-field::placeholder {
  color: #64748b !important;
}

.nav-sidebar .search-field:focus,
.sidebar-menu .search-field:focus {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: #22c55e !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   PRIMARY CTA — "All Cannabis Seeds" / "Shop Seeds"
   ───────────────────────────────────────────────────────────────────────────── */

/* CRITICAL FIX: Hide empty anchor tags that Flatsome generates */
.nav-sidebar > li > a:empty,
.nav-sidebar > li.gps-menu-primary > a:empty,
.menu-item > a:empty {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
}

.nav-sidebar > li.gps-menu-primary > a,
.menu-item.gps-menu-primary > a {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(34, 197, 94, 0.1) 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.5) !important;
  color: #4ade80 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.15) !important;
}

/* Only style non-empty anchors */
.nav-sidebar > li.gps-menu-primary > a:not(:empty),
.menu-item.gps-menu-primary > a:not(:empty) {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(34, 197, 94, 0.1) 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.5) !important;
  color: #4ade80 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.15) !important;
}

.nav-sidebar > li.gps-menu-primary > a:hover,
.menu-item.gps-menu-primary > a:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35) 0%, rgba(34, 197, 94, 0.15) 100%) !important;
  border-color: rgba(34, 197, 94, 0.7) !important;
}

/* Target first menu item as primary (if no class) - DISABLED due to empty anchor issue */
/* Use .gps-menu-primary class in WordPress menu instead */

/* Fix any standalone toggle buttons that appear as boxes */
.nav-sidebar > li > button.toggle {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(51, 65, 85, 0.3) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure menu items have relative positioning for toggle placement */
.nav-sidebar > li {
  position: relative !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   HIGHLIGHT ITEM — "Contact Us"
   ───────────────────────────────────────────────────────────────────────────── */

.nav-sidebar > li.gps-menu-highlight > a,
.menu-item.gps-menu-highlight > a {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   CHEVRON/ARROW TOGGLE
   ───────────────────────────────────────────────────────────────────────────── */

.nav-sidebar > li > a > .toggle,
.nav-sidebar > li button.toggle,
.menu-item .toggle,
.nav-sidebar .nav-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(51, 65, 85, 0.3) !important;
  border: none !important;
  border-radius: 8px !important;
  margin-left: auto !important;
  transition: all 200ms ease !important;
}

.nav-sidebar > li > a:hover > .toggle,
.nav-sidebar > li:hover button.toggle {
  background: rgba(34, 197, 94, 0.2) !important;
}

.nav-sidebar > li > a > .toggle i,
.nav-sidebar > li button.toggle i,
.menu-item .toggle i {
  color: #94a3b8 !important;
  font-size: 12px !important;
}

.nav-sidebar > li > a:hover > .toggle i,
.nav-sidebar > li:hover button.toggle i {
  color: #22c55e !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   SUBMENUS / DROPDOWNS
   ───────────────────────────────────────────────────────────────────────────── */

.nav-sidebar .sub-menu,
.nav-sidebar .children,
.nav-sidebar ul.sub-menu,
.menu-item .sub-menu {
  background: rgba(10, 15, 26, 0.6) !important;
  border: 1px solid rgba(51, 65, 85, 0.2) !important;
  border-radius: 12px !important;
  margin: 8px 0 0 0 !important;
  padding: 8px !important;
}

.nav-sidebar .sub-menu li,
.nav-sidebar .children li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.nav-sidebar .sub-menu li a,
.nav-sidebar .children li a {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  min-height: auto !important;
  margin: 0 !important;
}

.nav-sidebar .sub-menu li a:hover,
.nav-sidebar .children li a:hover {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #22c55e !important;
  transform: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   ACCOUNT ITEM
   ───────────────────────────────────────────────────────────────────────────── */

.nav-sidebar > li.account-item,
.menu-item.account-item {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border: none !important;
  border-top: 1px solid rgba(51, 65, 85, 0.3) !important;
}

.nav-sidebar > li.account-item > a {
  background: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(51, 65, 85, 0.4) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   CART ITEM / BUTTON
   ───────────────────────────────────────────────────────────────────────────── */

.nav-sidebar > li.cart-item,
.menu-item.cart-item {
  margin-top: 8px !important;
  padding: 0 !important;
  border: none !important;
}

.nav-sidebar > li.cart-item > a,
.nav-sidebar > li.cart-item .header-cart-link,
.menu-item.cart-item > a,
/* Also target by menu title containing "Cart" */
.nav-sidebar > li:last-child > a,
.nav-sidebar .header-cart-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 60px !important;
  padding: 18px 24px !important;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  color: #000000 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3) !important;
  /* Ensure text is visible */
  line-height: 1.2 !important;
  text-decoration: none !important;
  overflow: visible !important;
}

/* CRITICAL: Force all text inside cart button to be dark and visible */
.nav-sidebar > li.cart-item > a,
.nav-sidebar > li.cart-item > a *,
.nav-sidebar > li.cart-item .header-cart-link,
.nav-sidebar > li.cart-item .header-cart-link *,
.nav-sidebar > li:last-child > a,
.nav-sidebar > li:last-child > a *,
.nav-sidebar > li:last-child > a span,
.nav-sidebar > li:last-child > a .menu-title,
.nav-sidebar > li:last-child > a i,
.nav-sidebar .header-cart-link,
.nav-sidebar .header-cart-link * {
  color: #000000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

/* Make sure span and text elements show */
.nav-sidebar > li:last-child > a span,
.nav-sidebar > li:last-child > a .menu-title,
.nav-sidebar > li.cart-item > a span,
.nav-sidebar > li.cart-item > a .menu-title {
  display: inline !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Cart count badge */
.nav-sidebar > li.cart-item .cart-icon strong,
.nav-sidebar > li:last-child .cart-icon strong {
  background: #020617 !important;
  color: #22c55e !important;
}

.nav-sidebar > li.cart-item > a:hover,
.nav-sidebar > li.cart-item .header-cart-link:hover,
.nav-sidebar > li:last-child > a:hover {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4) !important;
}

/* Hide cart dropdown toggle */
.nav-sidebar > li.cart-item button.toggle,
.nav-sidebar > li:last-child button.toggle,
.nav-sidebar > li.cart-item > a .toggle,
.nav-sidebar > li:last-child > a .toggle {
  display: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   CLOSE BUTTON
   ───────────────────────────────────────────────────────────────────────────── */

.mfp-close,
.sidebar-menu .mfp-close,
.off-canvas-close,
button.mfp-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(51, 65, 85, 0.5) !important;
  border-radius: 12px !important;
  color: #94a3b8 !important;
  font-size: 24px !important;
  /* Center the X properly */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  text-align: center !important;
  opacity: 1 !important;
  transition: all 200ms ease !important;
  z-index: 100 !important;
}

.mfp-close:hover,
button.mfp-close:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   OVERLAY
   ───────────────────────────────────────────────────────────────────────────── */

.mfp-bg {
  background: rgba(2, 6, 23, 0.85) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────────────────────────────────────── */

.mfp-ready .nav-sidebar > li {
  animation: gpsMenuSlide 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  opacity: 0;
  transform: translateX(-20px);
}

.mfp-ready .nav-sidebar > li:nth-child(1) { animation-delay: 50ms !important; }
.mfp-ready .nav-sidebar > li:nth-child(2) { animation-delay: 80ms !important; }
.mfp-ready .nav-sidebar > li:nth-child(3) { animation-delay: 110ms !important; }
.mfp-ready .nav-sidebar > li:nth-child(4) { animation-delay: 140ms !important; }
.mfp-ready .nav-sidebar > li:nth-child(5) { animation-delay: 170ms !important; }
.mfp-ready .nav-sidebar > li:nth-child(6) { animation-delay: 200ms !important; }
.mfp-ready .nav-sidebar > li:nth-child(7) { animation-delay: 230ms !important; }
.mfp-ready .nav-sidebar > li:nth-child(8) { animation-delay: 260ms !important; }
.mfp-ready .nav-sidebar > li:nth-child(9) { animation-delay: 290ms !important; }
.mfp-ready .nav-sidebar > li:nth-child(10) { animation-delay: 320ms !important; }

@keyframes gpsMenuSlide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mfp-ready .nav-sidebar > li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE HEADER BAR
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 849px) {
  .header-main {
    background: rgba(10, 15, 26, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5) !important;
  }
  
  /* Hamburger button */
  .mobile-nav .nav-icon > a,
  .mobile-nav [data-open="#main-menu"],
  .off-canvas-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(51, 65, 85, 0.5) !important;
    border-radius: 12px !important;
    color: #e2e8f0 !important;
  }
  
  .mobile-nav .nav-icon > a:hover,
  .off-canvas-toggle:hover {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #22c55e !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   iPHONE SAFE AREAS
   ───────────────────────────────────────────────────────────────────────────── */

@supports (padding-top: env(safe-area-inset-top)) {
  .sidebar-menu,
  .off-canvas-left,
  .off-canvas-right {
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  
  .nav-sidebar > li.header-search-form,
  li.header-search-form {
    padding-top: calc(70px + env(safe-area-inset-top)) !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN BAR ADJUSTMENTS
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 849px) {
  #wpadminbar {
    display: none !important;
  }
  
  html {
    margin-top: 0 !important;
  }
}

@media (min-width: 850px) {
  .mfp-content,
  .stuck,
  button.mfp-close {
    top: 32px !important;
  }
  
  .is-full-height {
    height: calc(100vh - 32px) !important;
  }
}