/* Header dropdowns. The theme sets border-radius and item colours with
   !important, so these overrides have to match it. */
.navbar .dropdown-menu{
  border-radius:14px !important;
  padding:8px !important;
  border:1px solid #f0f2f5 !important;
  box-shadow:0 12px 32px rgba(45,52,62,0.12),0 3px 10px rgba(45,52,62,0.06) !important;
  min-width:14rem;
}

.navbar .dropdown-item{
  display:flex !important;
  align-items:center;
  gap:11px;
  border-radius:10px;
  padding:9px 12px !important;
  font-size:0.9rem;
  transition:background-color 0.2s ease,color 0.2s ease;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
  background-color:rgba(247,14,136,0.07) !important;
  color:#f70e88 !important;
}

.navbar .dropdown-item .dd-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(247,14,136,0.08);
  color:#f70e88;
  font-size:0.8rem;
  transition:background 0.2s ease,color 0.2s ease;
}
.navbar .dropdown-item:hover .dd-icon,
.navbar .dropdown-item:focus .dd-icon{
  background:linear-gradient(135deg,#f70e88 0%,#ff5fae 100%);
  color:#fff;
}

/* The theme centres dropdowns under their toggle, which pushes the rightmost
   one off screen. Anchor the login menu to the button's right edge instead. */
.navbar .login-menu{
  left:auto !important;
  right:0 !important;
  transform:translateY(-3px) scale(0.97) !important;
}
.navbar .login-menu.show{transform:translateY(-3px) scale(1) !important}
.navbar .login-menu .dropdown-item{white-space:nowrap}

/* "Other Links" lays its items out in a table */
.navbar .dropdown-menu-table{padding:8px !important}
.navbar .dropdown-table{border-spacing:2px;border-collapse:separate}
.navbar .dropdown-table td{padding:0 !important}
.navbar .dropdown-table td .dropdown-item{padding:9px 12px !important}

@media (max-width:991.98px){
  .navbar .dropdown-menu{
    border:0 !important;
    box-shadow:none !important;
    padding:4px 0 !important;
  }
  .navbar .dropdown-table{min-width:0;width:100%}
}