/* Base styles for the search container */
  .search-container {
    justify-content: center;
    min-height: 40px; /* Prevent collapse when hidden */
  }

  /* Desktop: Show search bar centered */
  @media (min-width: 544px) {
    .search-container {
      display: flex;
    }
  }

  /* Mobile: Adjust layout */
  @media (max-width: 543px) {
    .search-container {
      display: flex;
      order: 2 !important; /* Position after icons */
    }
    .add-loginregister {
      order: 1 !important; /* Icons first */
    }
  }

  /* Reserve space to prevent layout shift */
  .navbar-nav {
    transition: all 0.3s ease; /* Smooth transitions if needed */
  }

@media (min-width: 992px) {
  .add-loginregister {
    display: flex !important; /* Show on desktop */
  }
  .offcanvas {
    display: none !important; /* Hide offcanvas on desktop */
  }
}
.autocomplete-results{
    box-shadow: 0 0.6125rem 2.5rem 0.6125rem rgba(140,152,164,.175);
}
#searchBox {
  position: relative; 
}

#searchBox::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #41bf12; /* Line color */
  transition: width 0.3s;
  z-index: 10;
}

#searchBox:focus::after {
  width: 100%;
}
.dropdown-item{    
  padding: 0.5rem 1rem;
}
#navbar{
  transition: 0.4s;
}
#logo-1{
  transition: 0.4s;
  height:35px;
} 
#logo-2{
  transition: 0.4s;
  height:35px;
}
.circle-initials{
  border-radius: 50%;
  border: 4px solid #015cb9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}


@media only screen and (max-width: 980px) { 
.retailer-nav-top {
display: none;
}
}
@media only screen and (min-width: 980px) { 
.small-retailer-nav {
display: none;
}
}

@media only screen and (max-width: 991px) { 
.offcanvas-profile {
display: none;
}
}
.dropdown-menu.dropdown-animation.show {
    -webkit-animation-duration: 0.3s !important;
    animation-duration: 0.3s !important;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: dropdownslideIn;
    animation-name: dropdownslideIn;
    position: absolute !important;
    top: 100% !important;
    -webkit-transition: none;
    transition: none;
}

.offcanvas-profile:hover{
  color: rgba(255, 255, 255, 0) !important
}
.divider{
  color:#d3d7dd;
}
.menu-name{
  text-decoration: none;
  font-weight: 700;
  color: black;
  transition: all 0.3s ease-in-out;
}
.menu-name:hover {
  color: #42be11;
}
.text-menu{
  vertical-align: middle;
}
.text-retailer{
  color:white;
}
.logout-menu{
  display: flex;
  align-items: center;
  color: rgb(0, 0, 0) !important;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
.text-logout{
  padding: 10px 18px;
  border-radius: 20rem;
  background-color: black;
}
.icon-button-padding{
padding-left:5px ;
padding-right: 5px;
}