/* ==========================================================
   SpinBoss Sticky CTA Bar
   Theme: Mercury
   Author: ChatGPT
   ========================================================== */

:root {

    --sb-bg: #15191f;
    --sb-bg-light: #1c2129;

    --sb-border: rgba(255, 206, 46, .14);

    --sb-text: #ffffff;
    --sb-text-soft: #d8dde5;

    --sb-yellow-1: #ffd94d;
    --sb-yellow-2: #ffc928;
    --sb-yellow-3: #f2b300;

    --sb-shadow:
        0 12px 45px rgba(0,0,0,.45);

    --sb-radius:16px;

    --sb-transition:.35s cubic-bezier(.22,.61,.36,1);

}

/* ==========================================================
   BAR
   ========================================================== */

.sb-sticky-bar{

    position:fixed;

    left:50%;

    bottom:22px;

    transform:
        translate(-50%,140%);

    opacity:0;

    visibility:hidden;

    width:min(1120px,calc(100% - 40px));

    z-index:99999;

    transition:

        transform .45s cubic-bezier(.22,.61,.36,1),

        opacity .35s ease,

        visibility .35s;

}

.sb-sticky-bar.show{

    transform:

        translate(-50%,0);

    opacity:1;

    visibility:visible;

}

/* ==========================================================
   CONTAINER
   ========================================================== */

.sb-sticky-bar__inner{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:28px;

    min-height:72px;

    padding:

        14px

        22px;

    border-radius:

        var(--sb-radius);

    background:

        linear-gradient(

            180deg,

            #1b2028 0%,

            #15191f 100%

        );

    border:

        1px solid

        var(--sb-border);

    box-shadow:

        var(--sb-shadow);

}

/* тонкая золотая линия */

.sb-sticky-bar__inner::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:2px;

    background:

        linear-gradient(

            90deg,

            transparent,

            #ffce2e,

            transparent

        );

    opacity:.85;

}

/* фон с легкой текстурой */

.sb-sticky-bar__inner::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        url("/wp-content/uploads/2026/07/help-centre-bg.webp")

        center

        center

        /

        cover

        no-repeat;

    opacity:.045;

    pointer-events:none;

}

/* ==========================================================
   LOGO
   ========================================================== */

.sb-sticky-bar__logo{

    position:relative;

    z-index:2;

    flex-shrink:0;

    display:flex;

    align-items:center;

}

.sb-sticky-bar__logo img{

    display:block;

    width:70px;

    height:auto;

}

/* ==========================================================
   CONTENT
   ========================================================== */

.sb-sticky-bar__content{

    position:relative;

    z-index:2;

    flex:1;

    min-width:0;

}

.sb-sticky-bar__badge{

    display:flex;

    align-items:center;

    gap:12px;

    color:

        var(--sb-text);

    font-family:

        "Sofia Sans",

        sans-serif;

    font-size:19px;

    font-weight:700;

    line-height:1.2;

}

.sb-sticky-bar__badge i{

    color:#ffd43b;

    font-size:20px;

    flex-shrink:0;

}

.sb-sticky-bar__badge span{

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* ==========================================================
   ACTIONS
   ========================================================== */

.sb-sticky-bar__actions{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    flex-shrink:0;

}

/* ==========================================================
   CTA BUTTON
   ========================================================== */

.sb-sticky-bar__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:220px;

    height:50px;

    padding:0 28px;

    border-radius:12px;

    text-decoration:none;

    font-family:"Sofia Sans",sans-serif;

    font-size:16px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.4px;

    color:#2b2105;

    background:
        linear-gradient(
            180deg,
            var(--sb-yellow-1) 0%,
            var(--sb-yellow-2) 55%,
            var(--sb-yellow-3) 100%
        );

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
        inset 0 1px rgba(255,255,255,.35),
        inset 0 -2px rgba(0,0,0,.12),
        0 8px 18px rgba(0,0,0,.22);

    transition:
        transform .22s ease,
        filter .22s ease,
        box-shadow .22s ease;

}

.sb-sticky-bar__button i{

    font-size:15px;

    transition:transform .22s ease;

}

.sb-sticky-bar__button:hover{

    transform:translateY(-2px);

    filter:brightness(1.03);

    box-shadow:
        inset 0 1px rgba(255,255,255,.35),
        inset 0 -2px rgba(0,0,0,.12),
        0 12px 22px rgba(0,0,0,.30);

}

.sb-sticky-bar__button:hover i{

    transform:translateX(3px);

}

.sb-sticky-bar__button:active{

    transform:translateY(0);

}

.sb-sticky-bar__button:focus-visible{

    outline:2px solid #ffe38c;

    outline-offset:3px;

}

/* ==========================================================
   CLOSE BUTTON
   ========================================================== */

.sb-sticky-bar__close{

    position:absolute;

    top:10px;

    right:10px;

    width:28px;

    height:28px;

    border:none;

    background:transparent;

    color:#9da7b5;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:
        color .2s ease,
        transform .2s ease;

}

.sb-sticky-bar__close:hover{

    color:#ffffff;

    transform:rotate(90deg);

}

.sb-sticky-bar__close i{

    font-size:15px;

}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1024px){

.sb-sticky-bar{

    width:calc(100% - 28px);

}

.sb-sticky-bar__inner{

    gap:18px;

    padding:14px 18px;

}

.sb-sticky-bar__logo img{

    width:60px;

}

.sb-sticky-bar__badge{

    font-size:17px;

}

.sb-sticky-bar__button{

    min-width:185px;

    font-size:15px;

}

}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:768px){

.sb-sticky-bar{

    left:12px;
    right:12px;
    bottom:12px;

    width:auto;

    transform:translateY(120%);

}

.sb-sticky-bar.show{

    transform:translateY(0);

}

.sb-sticky-bar__inner{

    min-height:64px;

    padding:10px 14px;

    gap:14px;

    border-radius:14px;

    display:grid;

    grid-template-columns:auto 1fr auto;

    align-items:center;

}

/* ======================================= */

.sb-sticky-bar__logo{

    width:46px;

}

.sb-sticky-bar__logo img{

    width:46px;

}

/* ======================================= */

.sb-sticky-bar__content{

    min-width:0;

}

.sb-sticky-bar__badge{

    gap:8px;

    font-size:14px;

    font-weight:700;

    line-height:1.2;

}

.sb-sticky-bar__badge i{

    font-size:15px;

}

/* длинный текст бонуса сокращаем */

.sb-sticky-bar__badge span{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/* ======================================= */

.sb-sticky-bar__button{

    min-width:0;

    height:42px;

    padding:0 18px;

    font-size:14px;

    border-radius:10px;

    white-space:nowrap;

}

.sb-sticky-bar__button i{

    display:none;

}

/* ======================================= */

.sb-sticky-bar__close{

    position:absolute;

    top:6px;

    right:6px;

    width:22px;

    height:22px;

}

.sb-sticky-bar__close i{

    font-size:12px;

}

}

/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width:480px){

.sb-sticky-bar{

    left:8px;

    right:8px;

    bottom:8px;

}

.sb-sticky-bar__inner{

    padding:9px 12px;

    gap:10px;

}

.sb-sticky-bar__logo{

    width:40px;

}

.sb-sticky-bar__logo img{

    width:40px;

}

.sb-sticky-bar__badge{

    font-size:13px;

}

.sb-sticky-bar__button{

    height:38px;

    padding:0 14px;

    font-size:13px;

}

}

/* ==========================================================
   SAFE AREA
   ========================================================== */

@supports(padding:max(0px)){

.sb-sticky-bar{

    bottom:max(10px,env(safe-area-inset-bottom));

}

}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

.sb-sticky-bar,
.sb-sticky-bar *{

    animation:none !important;

    transition:none !important;

}

}