/* =========================================================
   Back to Top Button — front-end styles
   ========================================================= */

#fbr-back-to-top {
    /* Position */
    position: fixed;
    bottom: 1rem;
    right:  2rem;
    z-index: 9999;

    /* Layout */
    display:     flex;
    align-items: center;
    gap:         0.45rem;

    /* Appearance */
    background-color: #ff78de;          
    color:            #ffffff;
    border:           none;
    border-radius:    2rem;             
    padding:          0.55rem 1rem 0.55rem 0.75rem;
    cursor:           pointer;
    box-shadow:       0 4px 14px rgba(0, 0, 0, 0.18);

    /* Typography */
    font-family: inherit;
    font-size:   0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    /* Hidden by default – JS adds .btt-visible */
    opacity:    0;
    visibility: hidden;
    transform:  translateY(1rem);
    transition: opacity        0.3s ease,
                visibility     0.3s ease,
                transform      0.3s ease,
                background-color 0.2s ease,
                box-shadow     0.2s ease;
}

/* Visible state (toggled by JS) */
#fbr-back-to-top.btt-visible {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}

/* Hover / focus */
#fbr-back-to-top:hover,
#fbr-back-to-top:focus-visible {
    background-color: #a10388;
    box-shadow:       0 6px 20px rgba(0, 0, 0, 0.25);
    outline:          none;
}

/* Active (click feedback) */
#fbr-back-to-top:active {
    transform: scale(0.95);
}

/* Arrow icon */
#fbr-back-to-top svg {
    width:  1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

/* Text label */
#fbr-back-to-top .fbr-btt-label {
    display: inline-block;
}

/* ── Responsive: shrink to icon-only on small screens ─────────────────────── */
@media (max-width: 480px) {
    #fbr-back-to-top {
        bottom:        1.25rem;
        right:         1.25rem;
        padding:       0.65rem;
        border-radius: 50%;
    }

    #fbr-back-to-top .fbr-btt-label {
        display: none;
    }

    #fbr-back-to-top svg {
        width:  1.25rem;
        height: 1.25rem;
    }
}

/* ── Hide when mobile menu is open ───────────────────────────────────────── */
/*
 * Three selectors cover all states your theme uses:
 *   1. JS path  – body.no-scroll is added when menu opens
 *   2. No-JS fallback – the hidden checkbox is :checked
 * The button is a sibling/descendant of body so both work reliably
 * without fighting stacking contexts or z-index at all.
 */
body.no-scroll #fbr-back-to-top,
#fbr-back-to-top.btt-menu-open {
    opacity:        0 !important;
    visibility:     hidden !important;
    pointer-events: none !important;
    transition:     opacity 0.15s ease, visibility 0s linear 0.15s !important;
}

/* ── Respect reduced-motion preference ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #fbr-back-to-top {
        transition: opacity 0.1s ease, visibility 0.1s ease;
        transform:  none !important;
    }
}