/* Rainbow Refractive Buttons styling for Top Menubar */

/* Target both common Elementor headers and standard WP menu wrappers */
.menu-v-top-container ul,
.elementor-nav-menu,
#menu-v-top {
    gap: 12px !important;
    align-items: center;
}

/* Target the actual menu item anchors */
.menu-v-top-container ul li a,
#menu-v-top li a,
.elementor-nav-menu > li > a,
.elementor-nav-menu .elementor-item {
    position: relative;
    display: inline-block;
    padding: 10px 22px !important;
    margin: 5px;
    border-radius: 30px !important;
    color: #333 !important; /* Default readable color */
    text-decoration: none;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 13px !important;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    overflow: hidden;
    z-index: 1;
}

/* Dark theme/header fallback compatibility */
.elementor-nav-menu--main li a {
    color: inherit;
}

/* Hover/Mouseover state: Vibrant Refractive Rainbow */
.menu-v-top-container ul li a:hover,
#menu-v-top li a:hover,
.elementor-nav-menu > li > a:hover,
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-nav-menu .elementor-item--active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: linear-gradient(
        45deg,
        #ff0055,
        #ff5500,
        #ffcc00,
        #33ff00,
        #00ffcc,
        #0055ff,
        #aa00ff,
        #ff0055
    ) !important;
    background-size: 400% 400% !important;
    animation: rainbow_9733f11c 3s linear infinite !important;
    box-shadow: 0 5px 15px rgba(255, 0, 85, 0.4),
                0 10px 30px rgba(0, 255, 204, 0.3) !important;
    transform: translateY(-2px) scale(1.04);
}

/* Glass Refractive Shine sweep effect on mouseover */
.menu-v-top-container ul li a::before,
#menu-v-top li a::before,
.elementor-nav-menu > li > a::before,
.elementor-nav-menu .elementor-item::before {
    content: '' !important;
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: skewX(-25deg);
    transition: 0.6s !important;
    z-index: 2;
}

.menu-v-top-container ul li a:hover::before,
#menu-v-top li a:hover::before,
.elementor-nav-menu > li > a:hover::before,
.elementor-nav-menu .elementor-item:hover::before {
    left: 150%;
    transition: 0.6s !important;
}

/* Dynamic smooth flow animation */
@keyframes rainbow_9733f11c {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}