/* ======================================================================
   MODULE — BACK TO TOP
   Prefix: .m-btt
   ====================================================================== */

.m-btt {
    position: fixed;
    bottom: calc(var(--sp-5, 20px) + env(safe-area-inset-bottom, 0px));
    inset-inline-end: var(--sp-5, 20px);
    width: 56px;
    height: 56px;
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.42), transparent 28%),
        linear-gradient(135deg, var(--primary, #e85d04), color-mix(in srgb, var(--primary, #e85d04) 82%, #111827));
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 20px;
    box-shadow: 0 18px 44px color-mix(in srgb, var(--primary, #e85d04) 34%, transparent), 0 8px 18px rgba(0,0,0,.18);
    cursor: pointer;
    z-index: var(--z-sticky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.m-btt.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.m-btt:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.045);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--primary, #e85d04) 48%, transparent), 0 10px 24px rgba(0,0,0,.22);
}
.m-btt:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.m-btt svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


@media (max-width: 480px) {
    .m-btt {
        width: 52px;
        height: 52px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        inset-inline-end: 16px;
        border-radius: 18px;
    }
}