/* Кнопка возврата наверх */

#tk-back-to-top {
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 9989;

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

    box-sizing: border-box;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;

    color: #203047;
    background: linear-gradient(
        135deg,
        #79e2dd 0%,
        #b7b5f5 100%
    );

    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;

    box-shadow:
        0 8px 24px rgba(110, 143, 185, 0.2),
        0 3px 8px rgba(46, 70, 105, 0.08);

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

/* Не показываем кнопку до прокрутки */

#tk-back-to-top[hidden] {
    display: none;
}

#tk-back-to-top:hover {
    color: #172a40;
    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(80, 169, 176, 0.22),
        0 6px 18px rgba(146, 117, 208, 0.14);
}

#tk-back-to-top:active {
    transform: translateY(-1px);
}

#tk-back-to-top:focus-visible {
    outline: 3px solid #6559b8;
    outline-offset: 4px;
}

#tk-back-to-top svg {
    display: block;
    flex-shrink: 0;
}

/*
 * На телефоне располагаем кнопку над двумя кнопками
 * мессенджеров из предыдущей инструкции.
 */

@media (max-width: 767px) {
    #tk-back-to-top {
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(140px + env(safe-area-inset-bottom));

        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    #tk-back-to-top svg {
        width: 23px;
        height: 23px;
    }
}

/* Учитываем настройку уменьшения движения */

@media (prefers-reduced-motion: reduce) {
    #tk-back-to-top {
        transition: none;
    }
}