.jp-floating-button {
    align-items: center;
    background: var(--jp-fb-bg, #25d366);
    border-radius: 50%;
    bottom: var(--jp-fb-bottom, 24px);
    box-shadow: 0 4px 18px rgb(0 0 0 / 22%);
    color: var(--jp-fb-icon, #fff);
    display: flex;
    height: 56px;
    justify-content: center;
    position: fixed;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
    width: 56px;
    z-index: 1040;
}

.jp-floating-button--right { right: var(--jp-fb-side, 24px); }
.jp-floating-button--left { left: var(--jp-fb-side, 24px); }
.jp-floating-button--right.jp-floating-button--yootheme-totop {
    right: max(0px, calc(var(--jp-fb-side, 24px) - 4px));
}
.jp-floating-button--s { height: 44px; width: 44px; }
.jp-floating-button--l { height: 68px; width: 68px; }
.jp-floating-button--rounded { border-radius: 14px; }
.jp-floating-button__icon { display: flex; flex: 0 0 auto; height: 32px; width: 32px; }
.jp-floating-button--s .jp-floating-button__icon { height: 25px; width: 25px; }
.jp-floating-button--l .jp-floating-button__icon { height: 39px; width: 39px; }
.jp-floating-button__icon svg { display: block; height: 100%; width: 100%; }
.jp-floating-button--with-text {
    border-radius: 999px;
    box-sizing: border-box;
    gap: 9px;
    max-width: calc(100vw - (2 * var(--jp-fb-side, 24px)));
    padding: 0 17px;
    width: auto;
}
.jp-floating-button--with-text.jp-floating-button--s { gap: 7px; padding-inline: 13px; }
.jp-floating-button--with-text.jp-floating-button--l { gap: 11px; padding-inline: 20px; }
.jp-floating-button__text {
    color: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jp-floating-button--s .jp-floating-button__text { font-size: 13px; }
.jp-floating-button--l .jp-floating-button__text { font-size: 17px; }
.jp-floating-button__tooltip {
    background: #fff;
    border-radius: 7px;
    box-sizing: border-box;
    box-shadow: 0 3px 14px rgb(0 0 0 / 18%);
    color: #222;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    max-width: min(280px, calc(100vw - 120px));
    opacity: 0;
    padding: 9px 12px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    transition: opacity .16s ease, transform .16s ease;
    visibility: hidden;
    white-space: normal;
    width: max-content;
    overflow-wrap: anywhere;
}
.jp-floating-button--right .jp-floating-button__tooltip { right: calc(100% + 12px); }
.jp-floating-button--left .jp-floating-button__tooltip {
    left: calc(100% + 12px);
    transform: translateY(-50%) translateX(-4px);
}

@media (hover: hover) and (pointer: fine) {
    .jp-floating-button:hover .jp-floating-button__tooltip,
    .jp-floating-button:focus-visible .jp-floating-button__tooltip {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
        visibility: visible;
    }
}

/* A fixed button has no document height. Collapse YOOtheme Pro's otherwise
   empty top/bottom section, but only when it contains no other module output. */
.tm-top:has(.jp-floating-button):not(:has(.uk-panel > :not(.jp-floating-button))),
.tm-bottom:has(.jp-floating-button):not(:has(.uk-panel > :not(.jp-floating-button))) {
    padding-block: 0;
}

.jp-floating-button:hover {
    box-shadow: 0 6px 22px rgb(0 0 0 / 28%);
    color: var(--jp-fb-icon, #fff);
    transform: translateY(-2px);
}

.jp-floating-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #111;
}

@media (max-width: 767.98px) {
    .jp-floating-button--hide-mobile { display: none; }
}

@media (min-width: 768px) {
    .jp-floating-button--hide-desktop { display: none; }
}

/* YOOtheme Pro moves its To Top control at the large breakpoint. These
   offsets align both controls and preserve a clear vertical gap. */
@media (min-width: 641px) {
    .jp-floating-button--right.jp-floating-button--yootheme-totop {
        bottom: calc(var(--jp-fb-bottom, 88px) + 14px);
        right: calc(var(--jp-fb-side, 24px) + 16px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jp-floating-button,
    .jp-floating-button__tooltip { transition: none; }
}

@media print {
    .jp-floating-button { display: none; }
}