/*
 * Darealmop_ScrollTop — theme-agnostic back-to-top button.
 * Every value is a --dm-scrolltop-* custom property with a sensible fallback,
 * so any theme can restyle it (colour, size, offsets, shape) without touching JS.
 */
.dm-scrolltop {
    position: fixed;
    z-index: var(--dm-scrolltop-z, 45);
    bottom: var(--dm-scrolltop-bottom, 24px);
    width: var(--dm-scrolltop-size, 46px);
    height: var(--dm-scrolltop-size, 46px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--dm-scrolltop-radius, 50%);
    cursor: pointer;
    background: var(--dm-scrolltop-bg, #e5e7eb);
    color: var(--dm-scrolltop-color, #1f2937);
    box-shadow: var(--dm-scrolltop-shadow, 0 6px 18px rgba(0, 0, 0, .25));
    opacity: 0;
    transform: translateY(12px);
    /* The JS clears [hidden] on first reveal and never re-applies it — keeping the
       element laid out is what lets the fade-OUT animate at all. So the resting
       state must be neutralised here, or a button revealed once stays a 46px,
       opacity:0, still-clickable and still-tab-focusable target parked in the
       corner for the rest of the session. The 0s/.25s delay on `visibility` means
       "stay visible for the length of the fade, then leave the a11y tree". */
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease,
                visibility 0s linear .25s;
    -webkit-tap-highlight-color: transparent;
}
.dm-scrolltop--right { right: var(--dm-scrolltop-side, 24px); }
.dm-scrolltop--left  { left:  var(--dm-scrolltop-side, 24px); }
.dm-scrolltop svg { width: 22px; height: 22px; }
.dm-scrolltop[hidden] { display: none; }
/* transition-delay is reset here so showing is instant; only hiding is deferred. */
.dm-scrolltop.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
.dm-scrolltop:hover { box-shadow: var(--dm-scrolltop-shadow-hover, 0 8px 24px rgba(0, 0, 0, .35)); }
@media (prefers-reduced-motion: reduce) {
    .dm-scrolltop { transition: opacity .25s ease, visibility 0s linear .25s; transform: none; }
    .dm-scrolltop.is-visible { transform: none; }
}