/* SendCoffee — плавающая кнопка. Место, ширина и слой задаются инлайном из настроек. */

#sendcoffee {
    position: fixed;
    box-sizing: border-box;
    margin: 0;
    line-height: 0;
    pointer-events: none;   /* ловит клики только сама кнопка */
    /* Проявляется, когда скрипт поставил её под шапку, — без прыжка.
       Не загрузился скрипт — всё равно покажется через 3 секунды. */
    opacity: 0;
    transition: opacity .3s ease;
    animation: sendcoffee-show 0s linear 3s forwards;
}
#sendcoffee.is-ready { opacity: 1; }
@keyframes sendcoffee-show { to { opacity: 1; } }

#sendcoffee .sendcoffee__btn {
    display: block;
    box-sizing: border-box;
    width: 100%;
    /* Поля в процентах от ширины: при 150px кнопка выходит 150×70, при другой ширине пропорции те же */
    padding: 7.4% 12%;
    background: var(--sc-bg, #734a39);
    border-radius: var(--sc-radius, 6px);
    box-shadow: 0 6px 18px rgba(40, 22, 14, .28);
    pointer-events: auto;
    text-decoration: none;
    transition: box-shadow .25s ease, filter .25s ease;
    -webkit-tap-highlight-color: transparent;
}
#sendcoffee .sendcoffee__btn:hover,
#sendcoffee .sendcoffee__btn:focus-visible {
    box-shadow: 0 8px 24px rgba(40, 22, 14, .38);
    filter: brightness(1.06);
}
#sendcoffee .sendcoffee__btn:focus-visible {
    outline: 2px solid #f7a912;
    outline-offset: 3px;
}
#sendcoffee .sendcoffee__btn svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Песок рисуется поверх кнопки и вокруг неё, клики проходят насквозь */
#sendcoffee .sendcoffee__sand {
    position: absolute;
    pointer-events: none;
}

@media print {
    #sendcoffee { display: none; }
}