/* XpertLab Sticky Button — frontend */
.xlsb-sticky {
    position: fixed;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 30px;
    background: var(--xlsb-bg, #fff);
    color: var(--xlsb-text, #0b1d3a);
    border: 1px solid var(--xlsb-border, #cfd8e3);
    border-radius: var(--xlsb-radius, 999px);
    font-size: var(--xlsb-font-size, 15px);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    letter-spacing: .01em;
    transition: transform .25s ease, box-shadow .25s ease, background .2s ease;
    -webkit-font-smoothing: antialiased;
    animation: xlsb-pop-in .35s ease both;
}

.xlsb-sticky:hover,
.xlsb-sticky:focus {
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--xlsb-text, #0b1d3a);
}

.xlsb-sticky.xlsb-has-shadow {
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);
}
.xlsb-sticky.xlsb-has-shadow:hover {
    /* box-shadow: 0 14px 36px rgba(15, 23, 42, .18), 0 3px 8px rgba(15, 23, 42, .08); */
}

.xlsb-sticky .xlsb-text { white-space: nowrap; }

.xlsb-sticky .xlsb-text-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.xlsb-sticky .xlsb-sub-text {
    font-size: 14PX;
    font-weight: 700;
    color: var(--xlsb-sub-text, #B51B5A);
    white-space: nowrap;
    line-height: 1;
    letter-spacing: .02em;
    text-align: center;
}

/* ─── Glass / frosted look ─────────────────────────────────────────────── */
.xlsb-sticky.xlsb-glass {
    backdrop-filter: blur(var(--xlsb-blur, 14px)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--xlsb-blur, 14px)) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -1px 0 rgba(255, 255, 255, .12),
        0 10px 30px rgba(15, 23, 42, .12),
        0 2px 6px rgba(15, 23, 42, .06);
}
.xlsb-sticky.xlsb-glass { overflow: hidden; isolation: isolate; }
.xlsb-sticky.xlsb-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%);
    mix-blend-mode: overlay;
    opacity: .9;
    z-index: 0;
}
.xlsb-sticky.xlsb-glass .xlsb-text,
.xlsb-sticky.xlsb-glass .xlsb-text-group,
.xlsb-sticky.xlsb-glass .xlsb-arrow { position: relative; z-index: 1; }
.xlsb-sticky.xlsb-glass .xlsb-arrow {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

/* Safari / Firefox-no-backdrop fallback: nudge alpha up so it doesn't look broken */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .xlsb-sticky.xlsb-glass {
        background: rgba(255, 255, 255, .85) !important;
    }
}

/* Footer-overlap hide state */
.xlsb-sticky.xlsb-is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.xlsb-pos-middle-right.xlsb-is-hidden { transform: translate(20px, -50%); }
.xlsb-pos-middle-left.xlsb-is-hidden  { transform: translate(-20px, -50%); }
.xlsb-pos-top-right.xlsb-is-hidden,
.xlsb-pos-top-left.xlsb-is-hidden     { transform: translateY(-20px); }

.xlsb-sticky .xlsb-arrow {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: var(--xlsb-arrow-bg, #eaf2ff);
    color: var(--xlsb-arrow-color, #0b1d3a);
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform .25s ease;
}
.xlsb-sticky:hover .xlsb-arrow { transform: rotate(-15deg); }

.xlsb-sticky .xlsb-arrow svg,
.xlsb-sticky .xlsb-arrow img {
    width: 16px; height: 16px;
    display: block;
}
.xlsb-sticky .xlsb-arrow i { font-size: 16px; line-height: 1; }

/* ─── Positions ─────────────────────────────────────────────────────────── */
.xlsb-pos-bottom-right { right: var(--xlsb-offset-x, 24px); bottom: var(--xlsb-offset-y, 24px); }
.xlsb-pos-bottom-left  { left:  var(--xlsb-offset-x, 24px); bottom: var(--xlsb-offset-y, 24px); }
.xlsb-pos-top-right    { right: var(--xlsb-offset-x, 24px); top:    var(--xlsb-offset-y, 24px); }
.xlsb-pos-top-left     { left:  var(--xlsb-offset-x, 24px); top:    var(--xlsb-offset-y, 24px); }
.xlsb-pos-middle-right { right: var(--xlsb-offset-x, 24px); top: 50%; transform: translateY(-50%); }
.xlsb-pos-middle-left  { left:  var(--xlsb-offset-x, 24px); top: 50%; transform: translateY(-50%); }
.xlsb-pos-middle-right:hover,
.xlsb-pos-middle-left:hover { transform: translateY(calc(-50% - 2px)); }

/* ─── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .xlsb-sticky.xlsb-hide-mobile { display: none !important; }
    .xlsb-sticky {
        padding: 6px 6px 6px 25px;
        font-size: calc(var(--xlsb-font-size, 15px) - 1px);
    }
    .xlsb-sticky .xlsb-arrow { width: 30px; height: 30px; }
    .xlsb-pos-bottom-right,
    .xlsb-pos-bottom-left { bottom: max(env(safe-area-inset-bottom, 0px), var(--xlsb-offset-y, 16px)); }
}

/* ─── Entrance animation ───────────────────────────────────────────────── */
@keyframes xlsb-pop-in {
    0%   { opacity: 0; transform: translateY(8px) scale(.96); }
    100% { opacity: 1; transform: translateY(0)   scale(1); }
}
.xlsb-pos-middle-right { animation-name: xlsb-pop-in-right; }
.xlsb-pos-middle-left  { animation-name: xlsb-pop-in-left; }
@keyframes xlsb-pop-in-right {
    0%   { opacity: 0; transform: translate(8px, -50%); }
    100% { opacity: 1; transform: translate(0,    -50%); }
}
@keyframes xlsb-pop-in-left {
    0%   { opacity: 0; transform: translate(-8px, -50%); }
    100% { opacity: 1; transform: translate(0,    -50%); }
}

@media (prefers-reduced-motion: reduce) {
    .xlsb-sticky { animation: none; transition: none; }
    .xlsb-sticky:hover { transform: none; }
    .xlsb-sticky:hover .xlsb-arrow { transform: none; }
}