/* =========================================================
   Royal Server - Floating Offers Teaser
   Version: 2.0.6
   Desktop: left side / vertically centered
   Mobile: bottom floating card
   ========================================================= */


/* =========================
   MAIN FLOATING CARD
   ========================= */

.royal-floating-offer{
    position:fixed;

    /* Pozitie desktop */
    left:18px;
    top:90%;
    transform:translateY(-50%);

    z-index:9998;
    width:252px;

    border:1px solid rgba(79,168,255,.28);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(7,18,35,.97),
            rgba(12,23,47,.97) 58%,
            rgba(24,18,61,.97)
        );

    box-shadow:
        0 24px 70px rgba(0,0,0,.42),
        0 0 38px rgba(53,124,255,.12);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    overflow:hidden;
    color:#fff;

    font-family:Inter,Arial,sans-serif;

    transition:
        transform .25s ease,
        opacity .25s ease,
        box-shadow .25s ease;
}


/* =========================
   BACKGROUND GLOW
   ========================= */

.royal-floating-offer:before{
    content:"";
    position:absolute;

    inset:-40% -15% auto auto;

    width:170px;
    height:170px;

    background:
        radial-gradient(
            circle,
            rgba(104,83,255,.23),
            transparent 66%
        );

    pointer-events:none;
}


/* =========================
   LEFT NEON LINE
   ========================= */

.royal-floating-offer:after{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;

    background:
        linear-gradient(
            #36dcff,
            #765dff,
            #00e8af
        );

    box-shadow:
        0 0 18px rgba(54,220,255,.55);
}


/* =========================
   HIDDEN STATE
   ========================= */

.royal-floating-offer.is-hidden{
    opacity:0;
    pointer-events:none;

    transform:
        translate(-125%,-50%);
}


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

.royal-floating-offer-close{
    position:absolute;

    right:9px;
    top:8px;

    width:26px;
    height:26px;

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

    border-radius:8px;

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

    color:#8fa5c0;

    font-size:16px;
    line-height:1;

    cursor:pointer;

    z-index:3;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}


.royal-floating-offer-close:hover{
    color:#fff;

    border-color:
        rgba(91,210,255,.35);

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

    transform:scale(1.05);
}


/* =========================
   CARD LINK
   ========================= */

.royal-floating-offer-link{
    position:relative;

    z-index:2;

    display:block;

    padding:
        18px 18px 17px 20px;

    text-decoration:none!important;

    color:inherit!important;
}


/* =========================
   FLASH DEALS LABEL
   ========================= */

.royal-floating-offer-kicker{
    display:flex;

    align-items:center;

    gap:7px;

    margin-bottom:9px;

    color:#62dfff;

    font-size:9px;

    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;
}


/* ONLINE / LIVE DOT */

.royal-floating-offer-kicker i{
    width:7px;
    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:#00e9a8;

    box-shadow:
        0 0 6px rgba(0,233,168,.8),
        0 0 13px #00e9a8;
}


/* =========================
   TITLE
   ========================= */

.royal-floating-offer h4{
    margin:
        0 28px 5px 0;

    color:#fff;

    font-size:18px;

    line-height:1.15;

    font-weight:900;

    letter-spacing:-.025em;
}


/* =========================
   DESCRIPTION
   ========================= */

.royal-floating-offer p{
    margin:
        0 0 13px;

    color:#8ea3bd;

    font-size:11px;

    line-height:1.5;
}


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

.royal-floating-offer-cta{
    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:
        10px 11px;

    border:
        1px solid rgba(91,210,255,.20);

    border-radius:11px;

    background:
        linear-gradient(
            90deg,
            rgba(34,130,255,.10),
            rgba(118,77,255,.12)
        );

    color:#fff;

    font-size:10px;

    font-weight:900;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.royal-floating-offer-cta b{
    color:#5ce2ff;

    font-size:14px;

    transition:
        transform .2s ease;
}


/* CTA hover */

.royal-floating-offer-link:hover
.royal-floating-offer-cta{

    border-color:
        rgba(91,210,255,.38);

    background:
        linear-gradient(
            90deg,
            rgba(34,130,255,.17),
            rgba(118,77,255,.20)
        );

    box-shadow:
        inset 0 0 20px
        rgba(57,158,255,.05);
}


.royal-floating-offer-link:hover
.royal-floating-offer-cta b{

    transform:translateX(3px);
}


/* =========================
   CARD HOVER
   ========================= */

.royal-floating-offer:hover{

    transform:
        translateY(calc(-50% - 4px));

    box-shadow:
        0 29px 80px rgba(0,0,0,.50),
        0 0 45px rgba(65,123,255,.18);
}


/* =========================================================
   HEADER - OFFERS MENU ITEM
   ========================================================= */

.rs-menu .rs-offers-link{

    display:inline-flex!important;

    align-items:center!important;

    gap:5px!important;

    color:#fff!important;
}


.rs-menu .rs-offers-link span{

    display:inline-flex;

    padding:
        2px 5px;

    border-radius:5px;

    background:
        linear-gradient(
            135deg,
            #765dff,
            #2dcfff
        );

    color:#fff;

    font-size:7px;

    line-height:1;

    font-weight:900;

    letter-spacing:.04em;
}


.rs-menu .rs-offers-link:hover{
    color:#65e6ff!important;
}


/* =========================================================
   <= 1280px
   ========================================================= */

@media(max-width:1280px){

    .royal-floating-offer{

        width:220px;

        left:12px;

        /* Ramane in aceeasi zona verticala */

        top:44%;
    }


    .royal-floating-offer h4{
        font-size:16px;
    }

}


/* =========================================================
   TABLET
   <= 980px

   Pe tablet popup-ul se muta jos pentru
   a nu acoperi continutul paginii.
   ========================================================= */

@media(max-width:980px){

    .royal-floating-offer{

        left:10px;

        top:auto;

        bottom:16px;

        transform:none;

        width:218px;
    }


    .royal-floating-offer:hover{

        transform:
            translateY(-3px);
    }


    .royal-floating-offer.is-hidden{

        transform:
            translateX(-125%);
    }

}


/* =========================================================
   MOBILE
   <= 560px
   ========================================================= */

@media(max-width:560px){

    .royal-floating-offer{

        left:10px;

        right:10px;

        top:auto;

        bottom:10px;

        width:auto;

        transform:none;

        border-radius:15px;
    }


    .royal-floating-offer-link{

        padding:
            13px 50px 13px 16px;
    }


    .royal-floating-offer-kicker{

        margin-bottom:5px;
    }


    .royal-floating-offer h4{

        font-size:15px;

        margin-bottom:2px;
    }


    .royal-floating-offer p{

        display:none;
    }


    .royal-floating-offer-cta{

        display:inline-flex;

        gap:12px;

        padding:
            7px 10px;

        margin-top:5px;
    }


    .royal-floating-offer-close{

        right:12px;

        top:50%;

        transform:
            translateY(-50%);
    }


    .royal-floating-offer-close:hover{

        transform:
            translateY(-50%)
            scale(1.05);
    }


    .royal-floating-offer:hover{

        transform:
            translateY(-3px);
    }

}


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

@media(max-width:380px){

    .royal-floating-offer{

        left:7px;

        right:7px;

        bottom:7px;
    }


    .royal-floating-offer h4{

        font-size:14px;
    }


    .royal-floating-offer-cta{

        font-size:9px;
    }

}