/* ====================================================================
   WPR CUSTOM NAVBAR CORE LAYOUT
   ==================================================================== */

:root {
  --wpr-nav-height: 97px;
  --wpr-nav-bg: transparent;
  --wpr-nav-color: #FFFFFF;
  --wpr-nav-hover: #E98244;
  --wpr-nav-font-size: 16px;
  --wpr-nav-font-weight: 500;
  --wpr-nav-font-family: 'Poppins', sans-serif;
  --wpr-logo-max-width: 155px;
  --wpr-logo-max-height: 64px;
  --wpr-logo-max-width-mobile: 155px;
  --wpr-logo-max-height-mobile: 63px;
  
  --wpr-btn-color: #E98244;
  --wpr-btn-bg: rgba(239, 239, 239, 0.07);
  --wpr-btn-radius: 40px;
  --wpr-btn-padding: 10px 55px;
  
  --wpr-scrolled-bg: rgba(30, 30, 30, 0.65);
  --wpr-scrolled-blur: 12px;
  --wpr-scrolled-radius: 16px;
  
  --wpr-drawer-bg: #FFFFFF;
  --wpr-drawer-color: #333333;
}

/* Base Body Gap Correction */
html, body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Outer Navbar Container */
.wpr-navbar-container {
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--wpr-nav-height) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  padding: 5px 24px 11px 24px !important;
  background: var(--wpr-nav-bg) !important;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

@media screen and (max-width: 768px) {
  .wpr-navbar-container {
    padding: 0px 16px 0px 16px !important;
  }
}

/* Sticky / Fixed Mode Styling */
.wpr-navbar-container.wpr-sticky-yes {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}


/* Sticky Spacer: Disabled to let the page content/hero section slide up behind the transparent navbar */
.wpr-sticky-spacer {
  display: none !important;
  width: 100%;
}
.wpr-sticky-spacer.is-visible {
  display: none !important;
}

/* Logo Styles */
.wpr-navbar-logo,
.wpr-navbar-logo a {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.wpr-navbar-logo img {
  display: block !important;
  height: auto !important;
  max-width: var(--wpr-logo-max-width) !important;
  max-height: var(--wpr-logo-max-height) !important;
  width: auto !important;
}

@media screen and (max-width: 768px) {
  .wpr-navbar-logo img {
    max-width: var(--wpr-logo-max-width-mobile) !important;
    max-height: var(--wpr-logo-max-height-mobile) !important;
  }
}

/* Desktop Navigation Wrapper */
.wpr-navbar-desktop-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 32px !important;
}

.wpr-navbar-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 24px !important;
}

.wpr-navbar-menu-item {
  position: relative !important;
  list-style: none !important;
}

.wpr-navbar-menu-item > a {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: var(--wpr-nav-color) !important;
  font-size: var(--wpr-nav-font-size) !important;
  font-weight: var(--wpr-nav-font-weight) !important;
  font-family: var(--wpr-nav-font-family) !important;
  transition: color 0.25s ease !important;
}

.wpr-navbar-menu-item > a:hover,
.wpr-navbar-menu-item.current-menu-item > a {
  color: var(--wpr-nav-hover) !important;
}

/* Animated bottom line on hover */
.wpr-navbar-menu-item > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: var(--wpr-nav-hover) !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.wpr-navbar-menu-item > a:hover::after,
.wpr-navbar-menu-item.current-menu-item > a::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

/* Login/Logout Button Styling */
.wpr-navbar-auth-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  gap: 8px !important;
  color: var(--wpr-btn-color) !important;
  background-color: var(--wpr-btn-bg) !important;
  border-radius: var(--wpr-btn-radius) !important;
  padding: var(--wpr-btn-padding) !important;
  font-size: var(--wpr-nav-font-size) !important;
  font-family: var(--wpr-nav-font-family) !important;
  font-weight: var(--wpr-nav-font-weight) !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.wpr-navbar-auth-btn:hover {
  background-color: var(--wpr-nav-hover) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(233, 130, 68, 0.35) !important;
  transform: translateY(-1px) !important;
}

.wpr-navbar-auth-btn svg {
  width: 1.15em !important;
  height: 1.15em !important;
}

/* Responsive Hide Rules */
@media screen and (min-width: 769px) {
  .wpr-navbar-mobile-toggle {
    display: none !important;
  }
  .wpr-navbar-desktop-wrapper {
    display: flex !important;
  }
}

@media screen and (max-width: 768px) {
  .wpr-navbar-mobile-toggle {
    display: flex !important;
  }
  .wpr-navbar-desktop-wrapper {
    display: none !important;
  }
}

/* ====================================================================
   MOBILE HAMBURGER TOGGLE & DRAWER
   ==================================================================== */
.wpr-navbar-mobile-toggle {
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  z-index: 10050;
  touch-action: manipulation;
  justify-content: center;
  align-items: center;
  background: transparent !important;
  border: none !important;
  padding: 0;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.wpr-navbar-mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease-in-out;
  transform-origin: center;
  background-color: var(--wpr-nav-hover) !important;
}

/* Horizontal lines alignments */
.wpr-navbar-mobile-toggle span:nth-child(1) { top: 22%; }
.wpr-navbar-mobile-toggle span:nth-child(2) { top: 50%; transform: translateX(-50%) translateY(-50%); }
.wpr-navbar-mobile-toggle span:nth-child(3) { bottom: 22%; }

/* Toggle to 'X' shape animation */
.wpr-navbar-mobile-toggle[aria-expanded="true"] span:nth-child(1),
.wpr-navbar-active .wpr-navbar-mobile-toggle span:nth-child(1) {
  top: 50% !important;
  transform: translateX(-50%) translateY(-50%) rotate(45deg) !important;
}

.wpr-navbar-mobile-toggle[aria-expanded="true"] span:nth-child(2),
.wpr-navbar-active .wpr-navbar-mobile-toggle span:nth-child(2) {
  opacity: 0 !important;
  transform: translateX(-50%) scaleX(0) !important;
}

.wpr-navbar-mobile-toggle[aria-expanded="true"] span:nth-child(3),
.wpr-navbar-active .wpr-navbar-mobile-toggle span:nth-child(3) {
  top: 50% !important;
  bottom: auto !important;
  transform: translateX(-50%) translateY(-50%) rotate(-45deg) !important;
}

/* Mobile Slide Drawer Container */
.wpr-navbar-mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 80% !important;
  max-width: 320px !important;
  height: 100vh !important;
  height: 100dvh !important;
  background-color: var(--wpr-drawer-bg) !important;
  background: var(--wpr-drawer-bg) !important;
  z-index: 100000 !important;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
  padding: 80px 24px 24px 24px !important;
  transform: translateX(100%) !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 32px !important;
  overscroll-behavior: contain !important;
}

.wpr-navbar-mobile-drawer.is-active {
  transform: translateX(0) !important;
}

/* Mobile Menu Lists */
.wpr-navbar-nav-mobile {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.wpr-navbar-nav-mobile .wpr-navbar-menu-item > a {
  font-size: 18px !important;
  font-family: var(--wpr-nav-font-family) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  color: var(--wpr-drawer-color) !important;
  display: block !important;
}

.wpr-navbar-nav-mobile .wpr-navbar-menu-item > a:hover {
  color: var(--wpr-nav-hover) !important;
}

.wpr-navbar-mobile-cta {
  margin-top: auto !important;
}

.wpr-navbar-mobile-cta .wpr-navbar-auth-btn {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Background Overlay when mobile menu is active */
.wpr-navbar-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease !important;
}

.wpr-navbar-overlay.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ====================================================================
   SCROLLED STYLING (GLASSMORPHISM WITH BACKDROP FILTER BLUR)
   ==================================================================== */
.wpr-navbar-container.is-scrolled {
  background-color: var(--wpr-scrolled-bg) !important;
  backdrop-filter: blur(var(--wpr-scrolled-blur)) !important;
  -webkit-backdrop-filter: blur(var(--wpr-scrolled-blur)) !important;
  border-bottom-left-radius: var(--wpr-scrolled-radius) !important;
  border-bottom-right-radius: var(--wpr-scrolled-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: none !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37) !important;
}

/* Close Button in Mobile Drawer */
.wpr-navbar-drawer-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  color: var(--wpr-drawer-color) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100100 !important;
  opacity: 0.8 !important;
  transition: opacity 0.2s ease !important;
}

.wpr-navbar-drawer-close:hover {
  opacity: 1 !important;
}

.wpr-navbar-drawer-close svg {
  width: 28px !important;
  height: 28px !important;
}

/* Enable internal scroll inside mobile drawer if screen height is small */
.wpr-navbar-mobile-drawer {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Body Scroll Lock when Mobile Drawer is Open */
body.wpr-navbar-active,
html.wpr-navbar-active {
  overflow: hidden !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  height: 100% !important;
}

/* General Layout safeguards to prevent overflow */
html {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Force Elementor Theme Builder Header template containers (specifically ID 818) to collapse to 0 height,
   preventing default padding/margins from pushing down the page content (e.g. hero section) */
.elementor-818,
.elementor-818 .elementor-element-5e11ef5,
.elementor-818 .e-con-inner,
.elementor-818 .elementor-widget-shortcode,
.elementor-818 .elementor-shortcode {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Custom Cart Button in Navbar */
.wpr-navbar-cart-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  color: var(--wpr-nav-color, #ffffff) !important; /* Matches main links text color */
  background: transparent !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  margin-right: 12px !important; /* Space between cart and logout button */
  border: none !important;
  outline: none !important;
}

.wpr-navbar-cart-btn:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--wpr-nav-hover, #e98244) !important;
  transform: translateY(-1px) !important;
}

/* Scrolled state: update hover color background */
.wpr-navbar-container.is-scrolled .wpr-navbar-cart-btn {
  color: #ffffff !important;
}

.wpr-navbar-container.is-scrolled .wpr-navbar-cart-btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--wpr-nav-hover, #e98244) !important;
}

/* Cart Icon SVG styling */
.wpr-navbar-cart-icon {
  width: 22px !important;
  height: 22px !important;
}

/* Badge count styling */
.wpr-navbar-cart-count {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  background-color: #e98244 !important; /* Theme highlight orange count */
  border-radius: 9px !important;
  border: 1.5px solid #ffffff !important;
}

/* Color overrides for cart icon on Cart, Checkout, and Order Received pages */
.woocommerce-cart .wpr-navbar-cart-btn,
.woocommerce-checkout .wpr-navbar-cart-btn {
  color: #1a1a1a !important;
}

.woocommerce-cart .wpr-navbar-container.is-scrolled .wpr-navbar-cart-btn,
.woocommerce-checkout .wpr-navbar-container.is-scrolled .wpr-navbar-cart-btn {
  color: #ffffff !important;
}

/* Mobile cart button overrides */
.wpr-navbar-mobile-cta .wpr-navbar-cart-btn {
  margin-right: 16px !important;
  margin-bottom: 0 !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}