/* Purple background for the header/navbar area */
.udm-dropdown {
  background-color: #8c73b4;
  border-radius: 0;
}

/* Gray overlay for the rest of the page when dropdown is hovered */
.udm-dropdown:hover ~ *,
.udm-dropdown:hover ~ * * {
  filter: grayscale(100%) brightness(0.7);
  transition: filter 0.2s ease;
}

/* Ensure the dropdown itself and its contents are not affected */
.udm-dropdown,
.udm-dropdown * {
  filter: none !important;
}

.udm-dropdown-menu {
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.udm-dropdown:hover .udm-dropdown-menu,
.udm-dropdown:focus-within .udm-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  display: block;
  pointer-events: auto;
}

.udm-dropdown-toggle svg {
  transition: transform 0.2s ease;
}

.udm-dropdown:hover .udm-dropdown-toggle svg:last-child {
  transform: rotate(180deg);
}

/* Ensure white text on purple background */
.udm-dropdown-toggle {
  color: white;
}

.udm-dropdown-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown menu styling to match the image */
.udm-dropdown-menu {
  background: white;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.udm-dropdown-menu a {
  color: #374151;
  font-weight: 400;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
}

.udm-dropdown-menu a:hover {
  background-color: #f9fafb;
  color: #111827;
}

.udm-dropdown-menu a:last-child {
  border-bottom: none;
}

/* Add CSS class for click-based showing (mobile support) and animated gray overlay */
.udm-dropdown-menu.show-dropdown {
  opacity: 1 !important;
  transform: translateY(0) !important;
  display: block !important;
  pointer-events: auto !important;
}

body.dropdown-overlay-active::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 40;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  animation: overlayFadeIn 0.2s ease-out forwards;
}

@keyframes overlayFadeIn {
  0% {
    opacity: 0;
    background: rgba(0, 0, 0, 0);
    transform: scale(0.95);
  }
  50% {
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    background: rgba(0, 0, 0, 0.35);
    transform: scale(1);
  }
}

@keyframes overlayFadeOut {
  0% {
    opacity: 1;
    background: rgba(0, 0, 0, 0.35);
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    background: rgba(0, 0, 0, 0);
    transform: scale(0.95);
  }
}

body:not(.dropdown-overlay-active)::before {
  animation: overlayFadeOut 0.4s ease-out forwards;
}

body.dropdown-overlay-active .udm-dropdown {
  position: relative;
  z-index: 51;
  transform: translateY(-2px);
  transition: transform 0.3s ease-out;
}

body:not(.dropdown-overlay-active) .udm-dropdown {
  transform: translateY(0);
  transition: transform 0.3s ease-out;
}