/* --- WRAPPER --- */
/*
   Wrapper jest fixed i siedzi wyżej niż normalnie (48px zamiast 20px).
   Dzięki temu prawdziwy element fixed NIE leży przy samym dole viewportu,
   więc Safari nie tnie jego warstwy.
*/
#scrollToTopWrapper {
    position: fixed;
    right: 20px;
    bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    z-index: 9999;

    /* ważne, cień ma prawo wyjść */
    overflow: visible;

    /* wrapper nie przechwytuje klików,
       tylko sam przycisk je dostaje */
    pointer-events: none;

    /* sztuczne powiększenie boxu w dół, żeby WebKit nie ciachał cienia.
       Tworzymy "strefę bezpieczeństwa" niżej niż sam przycisk. */
}

#scrollToTopWrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -60px;
    height: 60px;
    /* przezroczyste, tylko po to żeby rozszerzyć obszar compositingu */
    pointer-events: none;
    background: transparent;
}

/* --- BUTTON --- */
#scrollToTopButton {
    pointer-events: auto;

    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;

    /* drop-shadow zamiast box-shadow (Safari mniej agresywny) */
    filter: drop-shadow(0 10px 25px rgba(0,0,0,0.4));

    display: flex;
    align-items: center;
    justify-content: center;

    /* Stan domyślnie schowany */
    opacity: 0;
    visibility: hidden;

    /*
       Teraz ważne:
       Domyślnie BUTON jest dociągany niżej wizualnie translateY(28px),
       żeby wyglądał jakby siedział bliżej krawędzi ekranu.
       Czyli wrapper siedzi wyżej (bezpiecznie),
       ale przycisk schodzi optycznie w dół.
    */
    transform: translateY(28px) scale(1);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease,
        background 0.2s ease;
    background-clip: padding-box;

    z-index: 10000;
}

#scrollToTopButton:hover,
#scrollToTopButton:focus {
    background: rgba(0, 0, 0, 0.9);
    outline: none;
}

/* --- STATE VISIBLE --- */
/*
   Gdy przycisk ma klasę .is-visible:
   - pojawia się
   - lekko unosi się (28px -> 18px) dla miękkiego wjazdu
*/
#scrollToTopButton.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(18px) scale(1);
}

/* --- MOBILE TWEAKS --- */
@media (max-width: 480px) {

    #scrollToTopWrapper {
        right: 16px;
        bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    }

    #scrollToTopButton {
        width: 40px;
        height: 40px;
        font-size: 18px;

        /* delikatnie mniejszy cień na małych ekranach,
           dalej przez filter, nie box-shadow */
        filter: drop-shadow(0 8px 18px rgba(0,0,0,0.4));
    }
}