/* ==========================================================================
   SCROLL BUTTONS
   ViaHomeopatica Theme
   ========================================================================== */

.scroll-btns {
    position: fixed !important;
    right: var(--scroll-btn-right) !important;
    bottom: var(--scroll-btn-bottom) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--scroll-btn-gap) !important;
    z-index: 9999 !important;
}

.scroll-btns button {
    position: relative !important;
    width: var(--scroll-btn-width) !important;
    height: var(--scroll-btn-height) !important;
    border: 1px solid var(--scroll-btn-border) !important;
    border-radius: var(--scroll-btn-radius) !important;
    background: var(--scroll-btn-surface) !important;
    color: var(--scroll-btn-text) !important;
    cursor: pointer !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-normal), background var(--transition-normal), border-color var(--transition-fast), opacity var(--transition-fast) !important;
    box-shadow: var(--scroll-btn-shadow) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    opacity: 0.82 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.scroll-btns svg {
    width: 20px !important;
    height: 30px !important;
    stroke: currentColor !important;
    stroke-width: 3 !important;
    fill: none !important;
    filter: drop-shadow(0 1px 1px rgba(49, 28, 52, 0.18)) !important;
    transition: transform var(--transition-fast), opacity var(--transition-fast) !important;
}

.scroll-btns button::before {
    content: '' !important;
    position: absolute !important;
    inset: 1px 1px 50% 1px !important;
    border-radius: calc(var(--scroll-btn-radius) - 1px) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 68%, rgba(255, 255, 255, 0) 100%) !important;
    pointer-events: none !important;
}

.scroll-btns button#btn-up,
.scroll-btns button#btn-down {
    background: var(--scroll-btn-surface) !important;
}

.scroll-btns button:hover {
    background: var(--scroll-btn-surface-hover) !important;
    border-color: var(--scroll-btn-border-strong) !important;
    box-shadow: var(--scroll-btn-shadow-hover) !important;
    transform: translateY(-3px) !important;
    opacity: 1 !important;
}

.scroll-btns button.active {
    background: var(--scroll-btn-surface-active) !important;
    border-color: var(--scroll-btn-border-strong) !important;
    box-shadow: var(--scroll-btn-shadow-hover) !important;
    transform: translateY(-2px) !important;
    opacity: 1 !important;
}

.scroll-btns button.active:hover {
    background: var(--scroll-btn-surface-hover) !important;
    transform: translateY(-3px) !important;
}

.scroll-btns button:active {
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: var(--scroll-btn-shadow-pressed) !important;
}

.scroll-btns button:focus-visible {
    outline: none !important;
    box-shadow: var(--scroll-btn-shadow-hover), 0 0 0 4px var(--scroll-btn-focus) !important;
    border-color: var(--scroll-btn-border-strong) !important;
    opacity: 1 !important;
}

.scroll-btns button:hover svg,
.scroll-btns button.active svg,
.scroll-btns button:focus-visible svg {
    opacity: 1 !important;
}

.scroll-btns button:not(.active) svg {
    opacity: 0.82 !important;
}

@media (max-width: 768px) {
    .scroll-btns {
        display: none !important;
    }
}