/* ========================================================
   DigiVentorz Unified Navigation Header System
   Light theme only. Symmetrical layout across all pages.
   ======================================================== */

.header-wrap {
  position: sticky !important;
  top: 12px !important;
  z-index: 200 !important;
  padding: 0 16px !important;
  pointer-events: none !important;
  isolation: isolate !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: top .25s ease, padding .25s ease !important;
}

.header {
  position: relative !important;
  z-index: 201 !important;
  pointer-events: auto !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  min-height: 64px !important;
  padding: 8px 18px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 32px rgba(20, 20, 20, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

/* Brand Logo (Left Edge) */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1) !important;
  z-index: 2 !important;
}
.brand:hover {
  transform: scale(1.06) !important;
}
.brand img {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
  display: block !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}

/* Navigation Links (Dead Center) */
.nav {
  position: static !important;
  transform: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

.nav-pill {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.035) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  flex-wrap: nowrap !important;
}

.nav-pill > a,
.nav-pill > .contact-nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 11px !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: #55595f !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16, 1, .3, 1) !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.nav-pill > a .nav-icon,
.nav-pill > .contact-nav .nav-icon {
  width: 13.5px !important;
  height: 13.5px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  display: block !important;
  transition: transform .2s ease !important;
}

.nav-pill > a:hover,
.nav-pill > .contact-nav:hover {
  color: #ff4539 !important;
  background: rgba(255, 69, 57, 0.08) !important;
}
.nav-pill > a:hover .nav-icon,
.nav-pill > .contact-nav:hover .nav-icon {
  transform: translateY(-1px) !important;
}

/* Definitive Active Button: Solid Dark Pill, Pure White Text & Icon, No Transparency */
.nav-pill > a.active,
.viewing-page .nav-pill > a.active,
body.viewing-page .nav-pill > a.active,
.nav-pill > a[aria-current="page"] {
  background: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18) !important;
}
.nav-pill > a.active .nav-icon,
.viewing-page .nav-pill > a.active .nav-icon,
body.viewing-page .nav-pill > a.active .nav-icon,
.nav-pill > a[aria-current="page"] .nav-icon {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Inactive Buttons: Explicitly Gray & Transparent */
.nav-pill > a:not(.active),
.viewing-page .nav-pill > a:not(.active) {
  background: transparent !important;
  color: #55595f !important;
  box-shadow: none !important;
}
.nav-pill > a:not(.active) .nav-icon,
.viewing-page .nav-pill > a:not(.active) .nav-icon {
  stroke: #6b7280 !important;
  color: #6b7280 !important;
}

/* Action Buttons (Right Edge) */
.header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.header-actions .icon-btn,
.header-actions .search-nav-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 0 !important;
  color: #141414 !important;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .2s !important;
  flex-shrink: 0 !important;
}
.header-actions .icon-btn:hover,
.header-actions .search-nav-btn:hover {
  transform: translateY(-2px) !important;
  border-color: #ff4539 !important;
  box-shadow: 0 4px 12px rgba(255, 69, 57, 0.12) !important;
}

.header-actions .count {
  position: absolute !important;
  right: -3px !important;
  top: -3px !important;
  min-width: 17px !important;
  height: 17px !important;
  border-radius: 99px !important;
  background: #ff4539 !important;
  border: 2px solid #ffffff !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 3px !important;
  line-height: 1 !important;
}

/* Pickers: Language, Country, Currency */
.header-actions .language-picker,
.header-actions .country-picker,
.header-actions .currency-picker-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.header-actions .language-nav-btn,
.header-actions .country-nav-btn,
.header-actions .currency-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1.5px solid #e8e8e8 !important;
  background: #ffffff !important;
  color: #141414 !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  white-space: nowrap !important;
}

.header-actions .language-nav-btn:hover,
.header-actions .country-nav-btn:hover,
.header-actions .currency-nav-btn:hover {
  border-color: #ff4539 !important;
  color: #ff4539 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 69, 57, 0.12) !important;
}

.header-actions .language-picker.open .language-nav-btn,
.header-actions .country-picker.open .country-nav-btn,
.header-actions .currency-picker-dropdown.open .currency-nav-btn {
  border-color: #ff4539 !important;
  background: #fffafa !important;
}

.language-nav-flag,
.country-nav-flag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 19px !important;
  height: 13px !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
  flex-shrink: 0 !important;
}
.language-nav-flag svg,
.country-nav-flag svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.language-nav-name,
.country-nav-code,
.header-actions .currency-nav-btn strong {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: inherit !important;
}

.currency-nav-sym {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #ff4539 !important;
  line-height: 1 !important;
}

.header-actions .picker-chevron {
  width: 11px !important;
  height: 11px !important;
  stroke: #737373 !important;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.language-picker.open .picker-chevron,
.country-picker.open .picker-chevron,
.currency-picker-dropdown.open .picker-chevron {
  transform: rotate(180deg) !important;
  stroke: #ff4539 !important;
}

/* Dropdown Menus */
.language-nav-menu,
.country-nav-menu,
.currency-nav-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 10002 !important;
  background: #ffffff !important;
  border: 1.5px solid #ebebeb !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16), 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  padding: 6px !important;
  min-width: 220px !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) scale(0.97) !important;
  transform-origin: top right !important;
  transition: opacity 0.2s ease, visibility 0.2s, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.language-picker.open .language-nav-menu,
.country-picker.open .country-nav-menu,
.currency-picker-dropdown.open .currency-nav-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.picker-item {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #1e293b !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.picker-item:hover,
.picker-item:focus-visible {
  outline: 0 !important;
  background: #f1f5f9 !important;
  color: #ff4539 !important;
}

.picker-item.active {
  background: #fef2f2 !important;
  color: #ff4539 !important;
  font-weight: 750 !important;
}

.picker-item-flag {
  width: 20px !important;
  height: 14px !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
  flex-shrink: 0 !important;
}
.picker-item-flag svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.picker-item-sym {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 18px !important;
  font-weight: 800 !important;
  color: #ff4539 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.picker-item-code {
  font-weight: 800 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.03em !important;
  margin-right: 4px !important;
}

.picker-item-name {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.picker-item.active .picker-item-name {
  color: #ff4539 !important;
  font-weight: 600 !important;
}

.picker-item-check {
  margin-left: auto !important;
  color: #ff4539 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}

/* WhatsApp Header CTA */
.header-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #080909 !important;
  color: #ffffff !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), background .2s, box-shadow .2s !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  flex-shrink: 0 !important;
}
.header-cta:hover {
  background: #ff4539 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(255, 69, 57, 0.25) !important;
}
.header-cta .wa-icon {
  width: 13.5px !important;
  height: 13.5px !important;
  flex-shrink: 0 !important;
}

/* Hamburger Toggle (Hidden by default on Desktop) */
.nav-toggle {
  display: none !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 !important;
  transition: all .2s !important;
  flex-shrink: 0 !important;
}
.nav-toggle span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: #111 !important;
  border-radius: 2px !important;
  transition: all .3s !important;
}
.nav-toggle:hover {
  border-color: #ff4539 !important;
  transform: translateY(-2px) !important;
}

/* Medium Desktop Viewports (1081px - 1320px) */
@media (max-width: 1320px) and (min-width: 1081px) {
  .header {
    padding: 7px 14px !important;
  }
  .nav-pill > a,
  .nav-pill > .contact-nav {
    padding: 6px 8px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  .nav-pill > a .nav-icon,
  .nav-pill > .contact-nav .nav-icon {
    width: 12.5px !important;
    height: 12.5px !important;
  }
  .header-actions {
    gap: 4px !important;
  }
}

/* Strict Desktop: Hamburger must NEVER show on >= 1081px */
@media (min-width: 1081px) {
  .nav-toggle,
  .menu-btn,
  #navToggle {
    display: none !important;
  }
}

/* Tablet & Mobile Transition (<= 1080px) */
@media (max-width: 1080px) {
  .header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 100% !important;
  }
  .header .nav {
    display: none !important;
  }
  .header-cta {
    display: none !important;
  }
  .nav-toggle,
  #navToggle {
    display: inline-flex !important;
  }
}

@media (max-width: 640px) {
  .header-wrap {
    top: 8px !important;
    padding: 0 10px !important;
  }
  .header {
    min-height: 58px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    gap: 8px !important;
  }
  .brand img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 11px !important;
  }
  .header-actions {
    gap: 6px !important;
    margin-left: auto !important;
  }
  .header-actions .icon-btn,
  .header-actions .search-nav-btn,
  .nav-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  .header-actions .language-picker,
  .header-actions .country-picker,
  .header-actions .currency-picker-dropdown {
    display: none !important;
  }
}

/* Mobile Drawer (Aside) */
.nav-scrim {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(10, 10, 10, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 9998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .3s ease, visibility .3s ease !important;
}
.nav-scrim.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.nav-mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(340px, 86vw) !important;
  background: #ffffff !important;
  z-index: 9999 !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15) !important;
  transform: translateX(105%) !important;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}
.nav-mobile-menu.open {
  transform: translateX(0) !important;
}

.nav-mobile-head {
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.nav-mobile-brand {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}
.nav-mobile-brand img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
  object-fit: contain !important;
}
.nav-mobile-close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid #e5e7eb !important;
  background: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 24px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  color: #111 !important;
  transition: transform .2s, background .2s !important;
}
.nav-mobile-close:hover {
  transform: rotate(90deg) !important;
  background: #f1f5f9 !important;
}

.nav-mobile-links {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.nav-mobile-links a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: #111827 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: background .18s, color .18s !important;
  min-height: 44px !important;
}
.nav-mobile-link-inner {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.nav-mobile-link-inner .nav-icon {
  width: 17px !important;
  height: 17px !important;
  stroke: currentColor !important;
  color: #6b7280 !important;
}
.nav-mobile-links a:hover,
.nav-mobile-links a:active {
  background: #f8fafc !important;
  color: #ff4539 !important;
}
.nav-mobile-links a:hover .nav-icon,
.nav-mobile-links a:active .nav-icon {
  color: #ff4539 !important;
}

.nav-mobile-foot {
  margin-top: auto !important;
  padding: 18px 20px 24px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #fafafa !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.nav-mobile-selector-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 8px !important;
}
.nav-mobile-select-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.nav-mobile-select-group small {
  font-size: 10px !important;
  font-weight: 750 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.nav-mobile-select {
  width: 100% !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 0 6px !important;
  outline: none !important;
  cursor: pointer !important;
}
.nav-mobile-select:focus {
  border-color: #ff4539 !important;
}
.nav-mobile-wa {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: background .2s !important;
}
.nav-mobile-wa:hover {
  background: #ff4539 !important;
}