.sidebar-menu {
  width: 200px;
  font-size: 12px;
  position: relative;
 /* background-color: white;*/
}

/* Reset lists */
.sidebar-menu ul,
.sidebar-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-menu li {
  position: relative;
}

/* Link styling */
.sidebar-menu a {
  display: block;
  padding: 6px 10px;
  color: black;
  text-decoration: none;
  line-height: 26px;
 /* background-color: white;*/
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative; /* 👈 Required for the submenu arrow positioning */
}

/* Hover state for all links */
.sidebar-menu li:hover > a,
.sidebar-menu li.hover > a {
  background-color: FloralWhite;
  color: MediumBlue;
}

/* ✅ All submenus fly out to the right */
.sidebar-menu li > ul {
  position: absolute;
  top: 0;
  left: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
  background-color: FloralWhite; /* same as rollover color */
  border: 1px solid LightGray;   /* optional: subtle separation */
  border-radius: 6px;
  /*min-width: 260px; /* or 280px, depending on your content */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ✅ Show submenus when .hover is applied */
.sidebar-menu li.hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.sidebar-menu li > ul a {
  background-color: FloralWhite;
  color: black;
  white-space: nowrap;
  border-bottom: 1px solid #ddd;
  padding: 15px;
}

/* Round the top of the first submenu link */
.sidebar-menu li > ul a:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* Round the bottom of the last submenu link */
.sidebar-menu li > ul a:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Optional: style for inner submenu links */
.sidebar-menu li > ul a:hover {
  background-color: #5580b0;
  color: Snow;
}

/* Special styling for Newest Products section */
.sidebar-menu .new-product {
  background-color: yellowgreen;
  font-weight: bold;
  color: white;
}

/* Special styling for Newest Products link itself */
.sidebar-menu .new-product > a {
  background-color: yellowgreen;
  font-weight: bold;
  color: white;
}

.sidebar-menu .new-product a:hover {
  background-color: FloralWhite;
  color: MediumBlue;
}


/* Only the .new-product submenu flyout */
.sidebar-menu .new-product > ul.new-product {
  background-color: FloralWhite;
}

/* Optional: improve contrast for links inside .new-product submenu */
.sidebar-menu .new-product > ul.new-product a {
  background-color: FloralWhite;
  color: MediumBlue;
  line-height: 16px; 
  padding: 20px;
}

.sidebar-menu .new-product > ul.new-product a:hover {
  background-color: White;
  color: MediumBlue;
 box-shadow: 0 0 8px rgba(100, 149, 237, 0.4); /* LightSkyBlue-ish glow */
  border-radius: 4px; /* optional: soften corners */
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}




/* Optional logo spacing */
.sidebar-logos {
  margin-top: 20px;
}

.sidebar-logos a {
  display: block;
  margin-bottom: 10px;
}

.sidebar-menu .submenu-arrow {
  float: right;
  font-size: 10px;
  color: lightsteelblue;
  transition: transform 0.3s ease;
}

/* Animate the arrow on hover or open state */
.sidebar-menu li.hover > a .submenu-arrow {
  /*transform: rotate(90deg); /* ? turns into ? style */
  color: lightgreen;
}


/* Responsive: hide sidebar on small screens */
@media screen and (max-width: 768px) {
  .sidebar-menu {
    display: none;
  }
}