/* Кнопка «вгору» — скляна FAB (кабінет + головна мапа) */
.yatut-scroll-top {
    --yatut-scroll-top-size: 46px;
    /* Клік → рух одразу, далі сповільнення (ease-out) */
    --yatut-scroll-top-press-duration: 0.48s;
    --yatut-scroll-top-press-delay: 0.04s;
    --yatut-scroll-top-press-ease: cubic-bezier(0.16, 0.84, 0.24, 1);
    --yatut-scroll-top-release-ease: cubic-bezier(0.4, 0, 0.68, 0.08);
    --yatut-scroll-top-btn-press-duration: 0.1s;
    --yatut-scroll-top-btn-press-ease: cubic-bezier(0.2, 0.85, 0.3, 1);
    --yatut-scroll-top-arrow-y: 1px;
    --yatut-scroll-top-arrow-y-pressed: -5px;
    position: fixed;
    right: max(18px, env(safe-area-inset-right, 0px));
    bottom: max(22px, env(safe-area-inset-bottom, 0px));
    /* Нижче .modal (2000) і кабінетних оверлеїв — не перекривати діалоги */
    z-index: 1990;
    box-sizing: border-box;
    width: var(--yatut-scroll-top-size);
    height: var(--yatut-scroll-top-size);
    padding: 0;
    margin: 0;
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 50%;
    overflow: hidden;
    background-color: rgba(16, 14, 10, 0.58);
    color: rgba(245, 230, 168, 0.92);
    -webkit-backdrop-filter: blur(12px) saturate(1.25);
    backdrop-filter: blur(12px) saturate(1.25);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 0 0 rgba(212, 175, 55, 0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        opacity 0.42s ease-in-out,
        border-color 0.28s ease-in-out,
        background-color 0.28s ease-in-out,
        color 0.28s ease-in-out,
        box-shadow 0.28s ease-in-out,
        transform var(--yatut-scroll-top-btn-press-duration) var(--yatut-scroll-top-btn-press-ease);
}

/* Внутрішнє світіння — лише всередині кола */
.yatut-scroll-top::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.1), transparent 62%);
    pointer-events: none;
    opacity: 1;
    transition: background 0.28s ease-in-out, opacity 0.28s ease-in-out;
}

.yatut-scroll-top::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    border: 1px solid rgba(212, 175, 55, 0.45);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92);
}

.yatut-scroll-top i {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
    transform: translate3d(0, var(--yatut-scroll-top-arrow-y), 0);
    transition-property: color, transform;
    transition-duration: 0.28s, var(--yatut-scroll-top-press-duration);
    transition-timing-function: ease-in-out, var(--yatut-scroll-top-release-ease);
    transition-delay: 0s, 0s;
    will-change: transform;
}

/* Періодичний акцент — «подивись сюди», не постійне гойдання */
@keyframes yatut-scroll-top-attn-ring {
    0%,
    72%,
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
    78% {
        opacity: 0.55;
        transform: scale(1);
    }
    88% {
        opacity: 0;
        transform: scale(1.08);
    }
}

@keyframes yatut-scroll-top-attn-glow {
    0%,
    72%,
    100% {
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            inset 0 0 0 0 rgba(212, 175, 55, 0);
    }
    80%,
    86% {
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            inset 0 0 0 1px rgba(212, 175, 55, 0.22),
            inset 0 0 14px rgba(212, 175, 55, 0.1);
    }
}

/* Модалки / повноекранні оверлеї — кнопку не показувати поверх */
body:has(.modal.show) .yatut-scroll-top,
body:has(.cabinet-pay-modal-overlay) .yatut-scroll-top,
body.search-suggestions-open .yatut-scroll-top {
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
    visibility: hidden;
}

.yatut-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    animation: yatut-scroll-top-attn-glow 3.6s ease-in-out infinite;
}

.yatut-scroll-top.is-visible::after {
    animation: yatut-scroll-top-attn-ring 3.6s ease-in-out infinite;
}

/* Стрілка рухається лише при натисканні (клас is-pressed з JS) */
.yatut-scroll-top.is-visible.is-pressed,
.yatut-scroll-top.is-visible:active {
    transform: scale(0.97);
    animation-play-state: paused;
}

.yatut-scroll-top.is-visible.is-pressed::after,
.yatut-scroll-top.is-visible:active::after {
    animation: none;
    opacity: 0;
}

/* Під час smooth scroll — позиція стрілки лише з прогресу скролу (JS) */
.yatut-scroll-top.is-visible.is-scroll-lift i {
    transition: color 0.28s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
    .yatut-scroll-top.is-visible:hover {
        border-color: rgba(212, 175, 55, 0.42);
        background-color: rgba(19, 17, 11, 0.64);
        color: rgba(252, 244, 220, 0.98);
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.11),
            inset 0 0 0 1px rgba(212, 175, 55, 0.14),
            inset 0 0 12px rgba(212, 175, 55, 0.07);
    }

    .yatut-scroll-top.is-visible:hover::before {
        background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.16), transparent 58%);
    }

    .yatut-scroll-top.is-visible:hover::after,
    .yatut-scroll-top.is-visible:hover {
        animation-play-state: paused;
    }

    .yatut-scroll-top.is-visible:hover:active {
        background-color: rgba(15, 13, 9, 0.68);
        box-shadow:
            0 3px 12px rgba(0, 0, 0, 0.26),
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            inset 0 0 0 1px rgba(212, 175, 55, 0.12),
            inset 0 0 10px rgba(212, 175, 55, 0.06);
    }

    .yatut-scroll-top.is-visible:hover.is-pressed,
    .yatut-scroll-top.is-visible:hover:active {
        --yatut-scroll-top-arrow-y-pressed: -6px;
    }
}

.yatut-scroll-top:focus {
    outline: none;
}

.yatut-scroll-top:focus-visible {
    outline: none;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.24),
        inset 0 0 0 2px rgba(232, 201, 106, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .yatut-scroll-top.is-visible {
        background-color: rgba(24, 22, 16, 0.9);
    }

    @media (hover: hover) and (pointer: fine) {
        .yatut-scroll-top.is-visible:hover {
            background-color: rgba(28, 25, 17, 0.92);
        }
    }
}

@media (max-width: 480px) {
    .yatut-scroll-top {
        --yatut-scroll-top-size: 42px;
        right: max(14px, env(safe-area-inset-right, 0px));
        bottom: max(18px, env(safe-area-inset-bottom, 0px));
    }

    .yatut-scroll-top i {
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yatut-scroll-top {
        transition: opacity 0.2s ease-in-out, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

    .yatut-scroll-top.is-visible,
    .yatut-scroll-top.is-visible::after {
        animation: none;
    }

    .yatut-scroll-top.is-visible.is-pressed,
    .yatut-scroll-top.is-visible:active {
        --yatut-scroll-top-arrow-y-pressed: -3px;
    }

    .yatut-scroll-top.is-visible.is-pressed i,
    .yatut-scroll-top.is-visible:active i {
        transition-duration: 0.35s;
        transition-delay: 0s, 0.08s;
    }
}