/* ====== Multi-level dropdown (Bootstrap 5) ====== */

.dropdown-submenu {
  position: relative;
}

/* VISUAL */

.dropdown-menu {
  border-radius: .75rem;
  padding: .4rem;
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.dropdown-item{
  padding: .55rem 1.1rem;
  border-radius: .5rem;
  transition: background-color .18s ease, color .18s ease;
  color: inherit;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background-color: var(--brand);
  color: #ffffff;
}

.dropdown-item:active{
  background-color:var(--brand);
  color:#fff;
}

/* seta submenu */

.dropdown-submenu > .dropdown-item::after {
  content: "›";
  float: right;
  opacity: .6;
}

/* ===== DESKTOP ===== */

@media (min-width: 992px) {

  .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
  }

  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }

  .navbar .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .2s ease;
    border: 1px solid rgba(0,0,0,0.15);
  }

  .navbar .dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

}

/* ===== MOBILE ===== */

@media (max-width: 991.98px) {

  .dropdown-submenu > .dropdown-menu {
    position: static;
    margin: .25rem 0 0 .75rem;
    border-left: 2px solid rgba(0,0,0,.08);
    padding-left: .5rem;
    display: none; /* controlado por JS */
  }

  .dropdown-submenu.show > .dropdown-menu {
    display: block;
  }

}