/*------------------------------------
	Header navbar
------------------------------------*/

/* make header fixed at the top of the page */
header {
  position: fixed;  /* الزامی */
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6; /* الزامی */
  z-index: 999;  /* always be displayed above other html elements  */
}

/* belows are the same as bootstrap 5.3 fix-top class  */
.navbar {
  position: fixed;
  right: 0;
  left: 0;
  border-bottom: 1px solid #e6e6e6;
  z-index: 1030;
}

/* .nav-vertical-seperator-lines { color: #e6e6e6; }  حذف */

/* by default links in main menu were sticked to each other was bad */
#both-nav-right-ul li {margin-left:20px;}

/* in mobile, default height of ul containing menu links was little bad */
/* anotther solutions: #both-nav-right-ul li {margin-bottom:10px or padding-bottom:10px }  */
@media (max-width: 768px) {
  #both-nav-right-ul {line-height: 2 !important;}
}

@media (max-width: 992px) {
  /*
 nav .nav-header .brand { margin: 0 auto 0.625rem; float: none; }
 nav .brand { top: 7px; }
  */
}

/* ************* nav left ul left links  ********************* */

/* make mobile nav items stick to right end */
/* to make auth link & heart icon be placed vertically middle in navbar ( heart icon commes abit lower to be placed vae */
#lg-nav-left-ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: normal;
}

#lg-nav-left-ul > li { display: inline-block; } /* الزامی */


/* first li is li contains heart-icon */
#lg-nav-left-ul > li:first-child {
  margin-left: 1.125rem;
  vertical-align: middle;
}

#nav-left-auth-link {
  color: #fff !important;
  font-size: .813rem;
  padding: .313rem .938rem !important;
  border-radius: 3.125rem;
}

#lg-nav-left-ul .bi-heart {
font-size: 1.375rem;
top: 0.313rem /* make heart & its badge to bottom so that vertically middle */
}

#lg-nav-left-ul .nav-fav-counters {
font-size: .75rem;
font-style: normal;  /* make italic number to normal */
}


/* ********* cart icon in navbar ************ */

#nav-cart-icon {
 width: 1.5rem;
 height: auto;
 /* color: #484c51; */
}

#nav-cart-count-badge { top: 5px; }

/* ********* mobile menu  ************ */

/* decrease offcanvas mobile menu width from default bootstrap's default offcanvas 400px width */
@media (max-width: 768px) {
  #offcanvasNavbar {width: 13.5rem;} /* 175px */
}

/*
default is block so in mobile menu, the colored background of "search-start"
and auth is full-width which is ugly
*/
@media (max-width: 768px) {
  .nav-link {display: inline-block;}
}

.nav-link:hover { color:#0093ee; }

.nav-link {color: #404040 !important;}

/* after each page load, make the color of nav-link for that page to red */
.active-nav-link {
  color: #0093ee !important;
}


/* decrease default bad large width and height of the btn */
button.navbar-toggler {
  padding: .25rem .375rem;
}

.navbar-toggler-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* increase small heart icon size in mobile */

@media (max-width: 768px) {
  #mobile-nav-ul .bi-heart {
    font-size: 1.125rem;
  }
}

/* in mobile, move the badge a bit to right so that heart be appeared, and a bit to bottom */
@media (max-width: 768px) {
  #mobile-nav-ul .badge {
    transform: translate(-10%,-40%) !important;
    font-size: .75rem /* decrease font-size so that bad big red circle gets smaller */
  }
}

.bi-heart .badge {font-style: normal !important;}

#mobile-nav-ul {
  display: flex;
  justify-content: space-around; /* or 'space-between' */
  align-items: center;
  list-style: none !important;
  padding-left: 0 !important;  /* default bootstrap _reboot.css caused navbar items come to right in mobile */
}

#mobile-nav-ul li {padding:0 .625rem;}

/* ************************************************************************** */
/* #nav-fav-added-msg is in fact tooltip-toast-nav-heart */
/* #lg-nav-left-ul .nav-fav-added-msg-box { */
.nav-fav-added-msg-box {
  transition: opacity 0.4s ease;
  background-color: #ec406a;
  color:#fff;
  padding:4px 15px;
  border-radius: 5px;
  white-space: nowrap;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  font-size: 0.875rem;
  font-style: normal;
  /* to place the msg box to be exactly in the middle and below the <i> tag (i tag), */
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  /*
  left: 50%; centers the span horizontally relative to its containing block (the <i> tag).

transform: translateX(-50%); further ensures that the span is perfectly centered by moving it back by half of its own width.

bottom: 100%; positions the span just above the middle of the <i> tag (bi-heart icon). Adjust the percentage as needed based on your design preferences.
  */
}

/* #lg-nav-left-ul .nav-fav-added-msg-box::before { */
.nav-fav-added-msg-box::before {
  content: '';
  position: absolute;
  top: -15px; /* move the arrow vertically */
  left: 50%;
  margin-left: -10px; /* move the arrow horizontally */
  border-width: 8px;
  border-style: solid; /* or outset */

  border-color: transparent transparent #ec406a transparent;
  z-index: 1; /* Set a higher z-index to place the arrow on top */
}


.mobile-nav-auth-link {
  /*
  pages topbar: login/signup link
  blog posts topbar: login/signup link
  */
  border-radius: 3.125rem;
  color: #fff !important;
  font-size: .813rem;
  padding: .313rem .938rem !important;
}

/* ************************************************************************** */

#div-add-to-cart-toast-in-header {
  top: 40px;  /* go down from cart icon */
  height: 30px;
  width: 170px; /* width was too small and cause show stsmt as a column */
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  border-radius:3px;
  font-size:.875rem;
  opacity: 0;
  transition: opacity 0.8s ease-out;
  /* means every time the opacity of this eement is changed via codes,
    this change be applied gradually so that transition be displayed */
  }

  /* to make added to cart text be placed vertically midle inside parent div  */
  #div-add-to-cart-toast-in-header span { line-height: 30px }
  #div-add-to-cart-toast-in-header a { color:#fff !important; }