/* ==========================================================================
   TubHotels Custom Nav — lazy city injection styles
   Minimal overrides; city links inherit all OceanWP .sub-menu li a styles.
   ========================================================================== */

/* Loading spinner shown on .cities-placeholder while cities are being injected */
.cities-placeholder.cities-loading {
    display: block !important;
    visibility: visible !important;
    min-height: 2.4rem;
    position: relative;
}

.cities-placeholder.cities-loading::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    margin: .7rem auto;
    border: 3px solid rgba(0, 0, 0, .12);
    border-top-color: var(--th-gold, #f1a502);
    border-radius: 50%;
    animation: th-nav-spin .6s linear infinite;
}

@keyframes th-nav-spin {
    to { transform: rotate(360deg); }
}

/* Fade-in for freshly injected city items */
.cities-placeholder > .menu-item {
    animation: th-nav-fadein .15s ease both;
}

@keyframes th-nav-fadein {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * OceanWP hides .sub-menu via visibility:hidden / opacity:0 by default and
 * reveals it when the parent gets .sfHover. A loading .cities-placeholder
 * must stay visible so the spinner shows. Scoped tightly to avoid side-effects.
 */
.sf-menu .state-item > .cities-placeholder.cities-loading,
.sf-menu .state-item.sfHover > .cities-placeholder {
    visibility: visible;
    opacity: 1;
}

/* Mobile: injected city links inherit OceanWP mobile sub-menu styles */
#mobile-dropdown .cities-placeholder > .menu-item > a {
    display: block;
}