/* =========================================================
   METALIZAR – MOBILE SCROLL TO TOP
   Desktop is intentionally untouched.
   ========================================================= */

#metalizar-scroll-top {
    display: none;
}

@media (max-width: 768px) {
    #metalizar-scroll-top {
        position: fixed;
        right: 20px;
        bottom: 24px;

        width: 42px;
        height: 42px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;
        margin: 0;

        border: 2px solid rgba(255, 255, 255, 0.95);
        border-radius: 999px;

        background: rgba(10, 14, 22, 0.45);
        color: #fff;

        /* Keep the backdrop circular on mobile compositors. A backdrop blur
           can paint its rectangular layer outside the border-radius. */
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        overflow: hidden;
        background-image: none !important;

        box-shadow: none !important;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation;
        cursor: pointer;
        z-index: 9999;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(10px);

        transition:
            opacity 250ms ease,
            transform 250ms ease,
            visibility 250ms ease;
    }

    #metalizar-scroll-top.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    #metalizar-scroll-top:hover,
    #metalizar-scroll-top:focus,
    #metalizar-scroll-top:focus-visible {
        background: rgba(10, 14, 22, 0.62);
        color: #fff;
        border-color: #fff;
        outline: none;
    }

    /* Prevent theme/browser square tap and focus effects on the round button. */
    #metalizar-scroll-top:focus,
    #metalizar-scroll-top:active {
        box-shadow: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* Keep an accessible round focus indication for keyboard navigation. */
    #metalizar-scroll-top:focus-visible {
        outline: 2px solid #fff !important;
        outline-offset: 3px;
        border-radius: 50%;
    }

    /* Avoid a separate square compositing layer during the tap animation. */
    #metalizar-scroll-top:active {
        transform: translateY(0);
    }

    /* Ignore rectangular overlays injected by button styles in the theme. */
    #metalizar-scroll-top::before,
    #metalizar-scroll-top::after {
        content: none !important;
        display: none !important;
    }

    #metalizar-scroll-top svg {
        width: 21px;
        height: 21px;

        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;

        pointer-events: none;
    }
}

/* v1.0.1 - transparent inside of the circular scroll-to-top button */
.metalizar-scroll-top,
#mz-scroll-top,
.mz-scroll-top{
    background: transparent !important;
    background-color: transparent !important;
}