/* Кнопка «Наверх». Цвета, размер и отступы приходят из настроек через переменные на самой кнопке. */
.mbn-totop {
    position: fixed;
    bottom: var(--mbn-totop-y, 16px);
    z-index: 99990;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--mbn-totop-size, 44px);
    height: var(--mbn-totop-size, 44px);
    padding: 0;
    border: 0;
    border-radius: var(--mbn-totop-radius, 999px);
    background: var(--mbn-totop-bg, #256c5a);
    color: var(--mbn-totop-color, #fff);
    font-size: calc(var(--mbn-totop-size, 44px) * 0.5);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, color 0.15s ease;
}

.mbn-totop[hidden] {
    display: none;
}

.mbn-totop--right {
    right: var(--mbn-totop-x, 16px);
}

.mbn-totop--left {
    left: var(--mbn-totop-x, 16px);
}

.mbn-totop.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mbn-totop:hover,
.mbn-totop:focus-visible {
    background: var(--mbn-totop-hover-bg, #1e5a4b);
    color: var(--mbn-totop-hover-color, #fff);
}

.mbn-totop:focus-visible {
    outline: 2px solid var(--mbn-totop-hover-bg, #1e5a4b);
    outline-offset: 3px;
}

.mbn-totop svg {
    width: 1em;
    height: 1em;
}

@media (prefers-reduced-motion: reduce) {
    .mbn-totop {
        transition: none;
        transform: none;
    }
}