/* Zoomies Membership - Navigation Menu Account Icon */

/* Account menu item styling */
.menu-item-account .account-icon {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
}

/* Hide dropdown arrow */
.menu-item-account .sub-arrow,
.menu-item-account .elementor-sub-arrow,
.elementor-item-account .sub-arrow,
.elementor-item-account > .sub-arrow,
a.elementor-item-account .sub-arrow {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ensure SVG inherits link color */
.elementor-item-account svg {
    fill: currentColor;
}

/* Hover state for account icon */
.elementor-item-account:hover svg,
.elementor-item-account:focus svg {
    fill: currentColor;
}

/* Submenu styling for account dropdown */
.menu-item-account .sub-menu,
.nav-menu-account-icon .sub-menu {
    min-width: 180px !important;
    margin-top: 10px !important;
    right: 0 !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: absolute !important;
    z-index: 9999 !important;
    overflow: hidden !important;
}

/* Elementor specific overrides - align dropdown to the right */
.elementor-nav-menu--main .menu-item-account .sub-menu,
.elementor-nav-menu .menu-item-account > .sub-menu,
.nav-menu-des .menu-item-account .sub-menu {
    right: 0 !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 10px !important;
    transform: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    position: absolute !important;
    z-index: 9999 !important;
    display: block !important;
}

/* Force visibility on hover */
.elementor-nav-menu--main .menu-item-account:hover > .sub-menu,
.nav-menu-des .menu-item-account:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Remove any centering transforms - all states */
.elementor-nav-menu--main .menu-item-account:hover .sub-menu,
.elementor-nav-menu--main .menu-item-account:not(:hover) .sub-menu,
.elementor-nav-menu--main .menu-item-account:focus .sub-menu,
.elementor-nav-menu--main .menu-item-account:focus-within .sub-menu,
.elementor-nav-menu--main .menu-item-account.elementor-item-active .sub-menu,
.nav-menu-des .menu-item-account .sub-menu {
    right: 0 !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
}

.menu-item-account .sub-menu a {
    padding: 10px 20px;
    display: block;
}

.menu-item-account .sub-menu a:hover {
    color: #57725A !important;
}

/* Mobile/Tablet responsive - hide account icon on nav-menu-des */
@media (max-width: 1024px) {
    .nav-menu-des .menu-item-account {
        display: none !important;
    }
    
    .standalone-account-icon {
        margin-right: 0 !important;
    }
}

/* Adjust nav menu gap for medium screens */
@media (min-width: 981px) and (max-width: 1200px) {
    .elementor-nav-menu__align-center .elementor-nav-menu {
        gap: 10px;
    }
}

/* Additional Elementor-specific adjustments */
.elementor-nav-menu--dropdown .menu-item-account .sub-menu {
    position: static;
    visibility: visible;
    opacity: 1;
    width: 100%;
}

/* Ensure proper alignment */
.elementor-nav-menu--main .menu-item-account {
    display: flex;
    align-items: center;
}

.elementor-nav-menu--main .menu-item-account .elementor-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure all menu items are vertically centered */
.elementor-nav-menu--main > .elementor-nav-menu > li {
    display: flex;
    align-items: center;
}

.elementor-nav-menu--main .elementor-item {
    display: flex;
    align-items: center;
}

/* Standalone account icon (injected via JavaScript before CTA button) */
a.standalone-account-icon,
button.standalone-account-icon,
button.account-icon-toggle {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    position: relative;
    background: none !important;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #FFFBEA !important;
}

a.standalone-account-icon .account-icon,
button.standalone-account-icon .account-icon {
    width: 28px;
    height: 28px;
}

a.standalone-account-icon svg,
button.standalone-account-icon svg {
    fill: #FFFBEA !important;
}

a.standalone-account-icon:hover svg,
button.standalone-account-icon:hover svg {
    opacity: 0.8;
}

/* Dropdown for standalone icon */
.account-icon-with-dropdown {
    position: relative;
}

.account-icon-with-dropdown .sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    background: #ffffff;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.account-icon-with-dropdown:hover .sub-menu,
.account-icon-with-dropdown .account-icon-toggle:focus + .sub-menu {
    opacity: 1;
    visibility: visible;
}

.account-icon-with-dropdown .sub-menu .menu-item {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 0 !important;
}

.account-icon-with-dropdown .sub-menu a {
    display: block;
    padding: 10px 20px;
    color: inherit;
    text-decoration: none;
    border-radius: 0 !important;
}

.account-icon-with-dropdown .sub-menu a:hover {
    color: #57725A !important;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 0 !important;
}