/* ==========================================================================
   Scroll To Top – Styles
   ========================================================================== */

/* ── Base ─────────────────────────────────────────────────────────────────
   Fixed-position button, hidden by default.  JS toggles .is-visible.     */

.wb-scroll-to-top {
    position: fixed;
    z-index: 9999;
    bottom: var(--spacing-8x);
    right: var(--spacing-8x);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4x);

    padding: 10px;
    border: none;
    border-radius: 100px;
    box-shadow: 0 5px 0 0 var(--_primitives---colors--neutral-dark) !important;
    background-color: var(--_primitives---colors--neutral);
    color: var(--_primitives---colors--neutral-lightest);
    cursor: pointer;

    /* Hidden state */
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* ── Hover: matches project-wide button press effect ────────────────────── */

.wb-scroll-to-top:hover {
    box-shadow: 0 2px 0 0 var(--_primitives---colors--neutral-dark) !important;
    transform: translate(0, 3px);
}

/* ── Visible state (toggled by JS) ──────────────────────────────────────── */

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

.wb-scroll-to-top.is-visible:hover {
    transform: translate(0, 3px);
}

/* ── Icon wrapper ───────────────────────────────────────────────────────── */

.wb-scroll-to-top__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Optional text label ────────────────────────────────────────────────── */

.wb-scroll-to-top__text {
    white-space: nowrap;
}

/* ── Mobile: tab attached to right edge ─────────────────────────────────
   Matches Figma mobile design: rectangular with left-side rounded corners,
   flush with the right viewport edge.                                     */

@media (max-width: 767px) {
    .wb-scroll-to-top {
        right: 0;
        bottom: 105px;
        transform: translateY(50%);
        padding: 12px 20px;
        border-radius: 100px 0 0 100px;
        flex-direction: column;
    }

    /* Adjust hidden / visible transforms for the side-tab layout */
    .wb-scroll-to-top:not(.is-visible) {
        opacity: 0;
        pointer-events: none;
        transform: translateX(100%);
    }

    .wb-scroll-to-top.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

    .wb-scroll-to-top.is-visible:hover {
        box-shadow: 0 2px 0 0 var(--_primitives---colors--neutral-dark);
        transform: translate(0, 3px);
    }
}