/* Shared (editor + frontend) */
.wp-block-ng-scroll-top .ngst-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    background: var(--ngst-bg);
    color: var(--ngst-fg);
    line-height: 1;
    font-family: inherit;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.3s ease;
}

.wp-block-ng-scroll-top .ngst-btn:hover,
.wp-block-ng-scroll-top .ngst-btn:focus-visible {
    background: var(--ngst-hover-bg, var(--ngst-bg));
    color: var(--ngst-hover-fg, var(--ngst-fg));
}

.wp-block-ng-scroll-top .ngst-btn:active {
    transform: translateY(1px);
}

.wp-block-ng-scroll-top .ngst-btn .ngst-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.wp-block-ng-scroll-top .ngst-btn .ngst-label {
    line-height: 1.2;
}

/* Frontend fade in/out — only hide when JS is active, so the button
   still shows if the view script fails to load for any reason. */
html.ngst-js-ready .wp-block-ng-scroll-top .ngst-btn {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

html.ngst-js-ready .wp-block-ng-scroll-top .ngst-btn.ngst-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Generic opt-in hide-until-scroll for any element with the trigger class.
   Same JS-ready guard so the element stays visible if the script fails. */
html.ngst-js-ready .ngst-hide-until-scroll {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

html.ngst-js-ready .ngst-hide-until-scroll.ngst-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wp-block-ng-scroll-top .ngst-btn {
        transition: none;
    }
}