@keyframes wpjs-dropdown-in {
from { opacity: 0; transform: translateY(-6px); }
to   { opacity: 1; transform: translateY(0); }
}
.menu-wrapper {
position: absolute;
display: none;
align-items: center;
z-index: 9999;
&.visible {
display: block;
animation: wpjs-dropdown-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
ul.dropdown-menu {
border: 1px solid #e2e8f0;
display: inline-block;
border-radius: 10px;
margin: 0;
padding: 6px;
background-color: #ffffff;
box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.12),
0 4px 8px rgba(15, 23, 42, 0.06);
z-index: 99999;
min-width: 160px;
list-style: none;
.menu-option {
white-space: nowrap;
text-align: left;
margin: 0;
padding: 8px 12px;
cursor: pointer;
font-size: 0.875rem;
color: #0f172a;
display: flex;
align-items: center;
gap: 8px;
border-radius: 6px;
transition: background-color 140ms ease, color 140ms ease;
&:hover {
background-color: #eff6ff;
color: #1d4ed8;
}
&:focus-visible {
outline: none;
background-color: #eff6ff;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3) inset;
}
svg {
flex-shrink: 0;
width: 16px;
height: 16px;
}
}
}
&.rtl ul.dropdown-menu .menu-option {
text-align: right;
direction: rtl;
}
}
@media (prefers-reduced-motion: reduce) {
.menu-wrapper.visible { animation: none; }
}