/* --------------------------------------------------
   TRANSPARENT HEADER ONLY WHEN BODY HAS .header-transparent
-------------------------------------------------- */

/* Default header (normal pages) */
#header {
  background-color: white;
  transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out;
  font-weight: bold;
  padding: 15px 0;
  height: 120px;
}

/* Desktop nav default color (normal pages) */
#desktop-nav .nav-link {
  color: black;
  font-weight: bold;
  transition: color 0.3s ease;
}

/* --------------------------------------------------
   Transparent mode (ONLY on .header-transparent pages)
-------------------------------------------------- */
.header-transparent #header {
  background-color: transparent !important;
  padding: 15px 0;
}

.header-transparent #desktop-nav .nav-link {
  color: white !important;
}

/* Scroll behavior ONLY if .header-transparent exists */
.header-transparent #header.scrolled {
  background-color: white !important;
  padding: 10px 0;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.header-transparent #header.scrolled .nav-link,
.header-transparent #header.scrolled #globe-icon i,
.header-transparent #header.scrolled #search-icon i {
  color: black !important;
}

/* When scrolled, desktop links dark */
.header-transparent #header.scrolled #desktop-nav .nav-link {
  color: black !important;
}

/* ----------------------------------------------
   DESKTOP NAVIGATION (shared)
---------------------------------------------- */
#desktop-nav {
  flex: 1;
  justify-content: center;
}

.navbar-brand {
  order: 3;
}

/* ----------------------------------------------
   SEARCH BOX
---------------------------------------------- */
#search-icon-container {
  position: relative;
  display: inline-block;
}

.search-box {
  position: absolute;
  top: 100%;
  left: 0;
  width: 220px;
  display: none;
  background: white;
  padding: 0;
  border-radius: 0px !important;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  z-index: 1050;
}

.search-box input {
  width: 100%;
  border: 4px solid #e6e4e4;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 0px;
  outline: none;
}

.search-box input:focus {
  border-color: black;
  box-shadow: 0px 0px 8px rgba(12, 12, 12, 0.5);
}

/* ----------------------------------------------
   DROPDOWN MENU
---------------------------------------------- */
.dropdown-menu {
  width: 90px;
  min-width: auto;
}

.dropdown-menu .dropdown-item {
  font-weight: bold;
  font-size: 14px;
}

/* ----------------------------------------------
   MOBILE MENU BASE
---------------------------------------------- */
#mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 260px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  overflow-y: auto;
  transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 9999;
  padding-top: 80px;
  padding-left: 22px;
  padding-right: 22px;
}

#mobile-menu.active {
  left: 0;
}

/* Hide mobile menu on desktop */
@media (min-width: 992px) {
  #mobile-menu {
    display: none !important;
  }

  .navbar-toggler {
    display: none;
  }
}

/* ----------------------------------------------
   FINAL MOBILE HEADER FIX
---------------------------------------------- */
@media (max-width: 991.98px) {

  #header,
  #header.navbar {
    background-color: #ffffff !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 4px 10px !important;
    height: auto !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #header .navbar-brand img {
    width: 85px !important;
    height: auto !important;
  }

  #header .navbar-toggler {
    all: unset;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    width: 32px !important;
    padding: 0 !important;
    margin-left: auto !important;
    border-radius: 6px;
    cursor: pointer;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
  }

  #header .navbar-toggler-icon {
    transform: scale(0.75);
  }

  .navbar-brand {
    order: 0;
  }
}

/* ----------------------------------------------
   MOBILE MENU LINK COLORS
---------------------------------------------- */
@media (max-width: 991.98px) {

  #mobile-menu .nav-link,
  #mobile-menu .dropdown-item,
  #mobile-menu i {
    color: black !important;
  }

  #mobile-menu>.navbar-nav>.nav-item>.nav-link {
    font-size: 16px;
    font-weight: 600;
    padding: 10px 0;
    color: #111 !important;
    text-transform: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
}

/* ----------------------------------------------
   PRODUCT LIST FIX
---------------------------------------------- */
#mobile-menu .product-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left !important;
  width: 100%;
}

#mobile-menu .product-list li a {
  display: block;
  padding: 12px 0;
  color: #222 !important;
  font-size: 15px;
  border-bottom: 1px solid #e6e6e6;
  padding-left: 4px;
}

#mobile-menu .product-list li a:hover {
  color: #0d6efd !important;
}

/* ----------------------------------------------
   APPLE-STYLE OVERLAY
---------------------------------------------- */
#mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
  z-index: 9998;
}

#mobile-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ----------------------------------------------
   STAGGERED ITEM ANIMATION
---------------------------------------------- */
#mobile-menu .nav-link,
#mobile-menu .product-list li {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.35s ease;
}

#mobile-menu.active .nav-link:nth-child(1) {
  transition-delay: 0.05s;
  opacity: 1;
  transform: translateX(0);
}

#mobile-menu.active .nav-link:nth-child(2) {
  transition-delay: 0.10s;
  opacity: 1;
  transform: translateX(0);
}

#mobile-menu.active .nav-link:nth-child(3) {
  transition-delay: 0.15s;
  opacity: 1;
  transform: translateX(0);
}

#mobile-menu.active .nav-link:nth-child(4) {
  transition-delay: 0.20s;
  opacity: 1;
  transform: translateX(0);
}

#mobile-menu.active .nav-link:nth-child(5) {
  transition-delay: 0.25s;
  opacity: 1;
  transform: translateX(0);
}

#mobile-menu.active .nav-link:nth-child(6) {
  transition-delay: 0.30s;
  opacity: 1;
  transform: translateX(0);
}

#mobile-menu.active .product-list li:nth-child(1) {
  transition-delay: 0.35s;
  opacity: 1;
  transform: translateX(0);
}

#mobile-menu.active .product-list li:nth-child(2) {
  transition-delay: 0.40s;
  opacity: 1;
  transform: translateX(0);
}

#mobile-menu.active .product-list li:nth-child(3) {
  transition-delay: 0.45s;
  opacity: 1;
  transform: translateX(0);
}

#mobile-menu.active .product-list li:nth-child(4) {
  transition-delay: 0.50s;
  opacity: 1;
  transform: translateX(0);
}

#mobile-menu.active .product-list li:nth-child(5) {
  transition-delay: 0.55s;
  opacity: 1;
  transform: translateX(0);
}

#mobile-menu.active .product-list li:nth-child(6) {
  transition-delay: 0.60s;
  opacity: 1;
  transform: translateX(0);
}

/* ----------------------------------------------
   HOVER & ACTIVE STATES
---------------------------------------------- */
#desktop-nav .nav-link:hover {
  color: #0d6efd !important;
}

#desktop-nav .nav-link.active {
  color: #0d6efd !important;
  border-bottom: 2px solid #0d6efd;
}

/* MOBILE — Main links */
/* -------------------------------
   FORCE MOBILE ACTIVE + HOVER
-------------------------------- */
#mobile-menu .navbar-nav .nav-link,
#mobile-menu .product-list li a {
  transition: color 0.25s ease, font-weight 0.25s ease;
}



/* MOBILE — Hover (Main Links + Product List) */
#mobile-menu .navbar-nav .nav-link:hover,
#mobile-menu .product-list li a:hover {
  color: #0d6efd !important;
  font-weight: 600 !important;
}



/* MOBILE — Active (Main Links) */
#mobile-menu .navbar-nav .nav-link.active {
  color: #00137f !important;
  font-weight: 700 !important;
}



/* MOBILE — Active (Product List) */
#mobile-menu .product-list li a.active {
  color: #0d6efd !important;
  font-weight: 700 !important;
}