/* ==========================================================
   SpinBoss Sticky CTA Bar
   Version: 1.0
   ========================================================== */

:root {

    --sticky-bg-1: #393435;
    --sticky-bg-2: #272324;

    --sticky-border: rgba(228, 193, 140, .18);

    --sticky-text: #F5EFE6;
    --sticky-text-light: #D5C9B6;

    --sticky-gold-1: #F6D8A5;
    --sticky-gold-2: #D8A96D;
    --sticky-gold-3: #B7834E;

    --sticky-shadow:
        0 18px 45px rgba(0,0,0,.45);

    --sticky-radius: 22px;

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

}

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

.sticky-bar{

    position:fixed;

    left:24px;
    right:24px;
    bottom:24px;

    z-index:99999;

    opacity:0;

    visibility:hidden;

    transform:translateY(150%);

    transition:
        transform .55s cubic-bezier(.22,.61,.36,1),
        opacity .35s ease,
        visibility .35s;

}

.sticky-bar.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

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

.sticky-bar__container{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:32px;

    padding:22px 26px;

    overflow:hidden;

    border-radius:var(--sticky-radius);

    border:1px solid var(--sticky-border);

    background:
        linear-gradient(
            180deg,
            var(--sticky-bg-1),
            var(--sticky-bg-2)
        );

    box-shadow:var(--sticky-shadow);

}

/* ===================================== */
/* texture                               */
/* ===================================== */

.sticky-bar__container::before{

    content:"";

    position:absolute;

    inset:0;

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

    background-position:center;

    background-repeat:no-repeat;

    background-size:cover;

    opacity:.08;

    pointer-events:none;

}

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

.sticky-bar__container::after{

    content:"";

    position:absolute;

    left:-220px;

    top:-160px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,214,154,.12),

            transparent 72%

        );

}

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

.sticky-bar__left{

    display:flex;

    align-items:center;

    gap:20px;

    position:relative;

    z-index:2;

}

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

.sticky-bar__logo{

    flex:0 0 74px;

    width:74px;

}

.sticky-bar__logo img{

    display:block;

    width:100%;

    height:auto;

}

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

.sticky-bar__content{

    display:flex;

    flex-direction:column;

    gap:6px;

}

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

.sticky-bar__title{

    margin:0;

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

    font-size:28px;

    font-weight:800;

    color:var(--sticky-text);

    line-height:1;

}

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

.sticky-bar__rating{

    display:flex;

    align-items:center;

    gap:10px;

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

    font-size:15px;

    color:var(--sticky-text-light);

}

.sticky-bar__stars{

    display:flex;

    gap:2px;

}

.sticky-bar__stars i{

    color:#FDBA39;

    font-size:13px;

}

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

.sticky-bar__bonus{

    display:flex;

    align-items:center;

    gap:8px;

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

    font-size:17px;

    font-weight:700;

    color:var(--sticky-text);

}

.sticky-bar__bonus i{

    color:#FDBA39;

}

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

.sticky-bar__right{

    display:flex;

    align-items:center;

    gap:16px;

    position:relative;

    z-index:2;

}

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

.sticky-bar__button{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:240px;

    height:58px;

    padding:0 34px;

    overflow:hidden;

    border-radius:14px;

    border:1px solid #e8d0aa;

    text-decoration:none;

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

    font-size:18px;

    font-weight:800;

    letter-spacing:.4px;

    text-transform:uppercase;

    color:#40260d;

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

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

    transition:
        transform var(--sticky-transition),
        box-shadow var(--sticky-transition),
        filter var(--sticky-transition);

}

.sticky-bar__button span{

    position:relative;

    z-index:2;

}

.sticky-bar__button i{

    position:relative;

    z-index:2;

    transition:transform .25s ease;

}

/* =============================== */
/* Shine                           */
/* =============================== */

.sticky-bar__button::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:55%;

    height:100%;

    transform:skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );

}

.sticky-bar__button.shine::before{

    animation:stickyButtonShine .9s ease;

}

@keyframes stickyButtonShine{

    from{

        left:-130%;

    }

    to{

        left:170%;

    }

}

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

.sticky-bar__button:hover{

    transform:translateY(-2px);

    filter:brightness(1.04);

    box-shadow:
        inset 0 1px rgba(255,255,255,.55),
        inset 0 -2px rgba(0,0,0,.18),
        0 18px 36px rgba(0,0,0,.42);

}

.sticky-bar__button:hover i{

    transform:translateX(4px);

}

.sticky-bar__button:active{

    transform:translateY(0);

}

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

.sticky-bar__close{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:transparent;

    color:#d7c7b2;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}

.sticky-bar__close:hover{

    background:rgba(255,255,255,.08);

    color:#fff;

    transform:rotate(90deg);

}

.sticky-bar__close i{

    font-size:18px;

}

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

@media (max-width:1100px){

.sticky-bar{

    left:18px;
    right:18px;
    bottom:18px;

}

.sticky-bar__container{

    padding:18px 20px;

    gap:20px;

}

.sticky-bar__logo{

    width:60px;

    flex:0 0 60px;

}

.sticky-bar__title{

    font-size:24px;

}

.sticky-bar__bonus{

    font-size:16px;

}

.sticky-bar__button{

    min-width:200px;

    height:54px;

}

}

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

@media (max-width:768px){

.sticky-bar{

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

}

.sticky-bar__container{

    flex-direction:column;

    align-items:stretch;

    gap:18px;

    padding:18px;

    border-radius:18px;

}

.sticky-bar__left{

    width:100%;

    align-items:center;

}

.sticky-bar__logo{

    width:54px;

    flex:0 0 54px;

}

.sticky-bar__title{

    font-size:21px;

}

.sticky-bar__rating{

    font-size:13px;

}

.sticky-bar__stars i{

    font-size:11px;

}

.sticky-bar__bonus{

    font-size:15px;

    line-height:1.4;

}

.sticky-bar__right{

    width:100%;

    display:grid;

    grid-template-columns:1fr 44px;

    gap:12px;

}

.sticky-bar__button{

    width:100%;

    min-width:0;

    height:54px;

    font-size:16px;

}

.sticky-bar__close{

    width:44px;

    height:44px;

}

}

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

@media (max-width:480px){

.sticky-bar{

    left:10px;

    right:10px;

    bottom:10px;

}

.sticky-bar__container{

    padding:16px;

}

.sticky-bar__left{

    align-items:flex-start;

}

.sticky-bar__logo{

    width:48px;

    flex:0 0 48px;

}

.sticky-bar__title{

    font-size:19px;

}

.sticky-bar__rating{

    flex-wrap:wrap;

    gap:6px;

}

.sticky-bar__bonus{

    font-size:14px;

}

.sticky-bar__button{

    height:52px;

    font-size:15px;

}

}

/* ===================================== */
/* LARGE DESKTOP                         */
/* ===================================== */

@media (min-width:1600px){

.sticky-bar{

    max-width:1480px;

    left:50%;

    right:auto;

    width:calc(100% - 60px);

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

}

.sticky-bar.show{

    transform:translate(-50%,0);

}

}

/* ===================================== */
/* iPhone Safe Area                      */
/* ===================================== */

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

.sticky-bar{

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

}

}

/* ===================================== */
/* Reduced Motion                        */
/* ===================================== */

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

.sticky-bar,
.sticky-bar *,
.sticky-bar::before,
.sticky-bar::after{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}

/* ===================================== */
/* Focus                                 */
/* ===================================== */

.sticky-bar__button:focus-visible,
.sticky-bar__close:focus-visible{

    outline:2px solid #F6D8A5;

    outline-offset:3px;

}