/* ==========================================================
   BLP FLOATING ORDER BUTTON
   ========================================================== */

.blp-order-btn{

    width:100%;

    margin:25px 0;

}

.blp-order-btn a{

    display:block;

    width:100%;

    padding:15px 20px;

    border-radius:14px;

    text-align:center;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(
        135deg,
        #16a34a,
        #15803d
    );

    box-shadow:
        0 10px 25px
        rgba(22,163,74,.30);

    transition:.25s;

}

.blp-order-btn a:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 32px
        rgba(22,163,74,.35);

}

/* ==========================================================
   FLOATING
   ========================================================== */

.blp-order-floating{

    position:fixed;

    left:50%;

    transform:translateX(-50%);

    bottom:85px;

    width:min(420px,calc(100% - 24px));

    z-index:99990;

    margin:0;

    animation:blpOrderShow .35s ease;

}

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

.blp-order-floating a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    padding:16px 18px;

    border-radius:16px;

    color:#fff;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    background:linear-gradient(
        135deg,
        #16a34a,
        #15803d
    );

    box-shadow:

        0 18px 40px rgba(0,0,0,.22),

        0 8px 20px rgba(22,163,74,.35);

    transition:.25s;

}

.blp-order-floating a:hover{

    transform:translateY(-2px);

    filter:brightness(1.05);

}

.blp-order-floating a:active{

    transform:scale(.98);

}

/* ==========================================================
   ICON
   ========================================================== */

.blp-order-floating a::before{

    content:"🛒";

    font-size:22px;

}

/* ==========================================================
   HIDE
   ========================================================== */

.blp-order-hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes blpOrderShow{

    from{

        opacity:0;

        transform:
            translateX(-50%)
            translateY(30px);

    }

    to{

        opacity:1;

        transform:
            translateX(-50%)
            translateY(0);

    }

}

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

@media(max-width:768px){

.blp-order-floating{

    width:calc(100% - 20px);

    bottom:82px;

}

.blp-order-floating a{

    padding:15px;

    font-size:16px;

}

}

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

@media(max-width:480px){

.blp-order-floating{

    left:10px;

    right:10px;

    width:auto;

    transform:none;

    bottom:78px;

}

@keyframes blpOrderShow{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.blp-order-floating a{

    border-radius:14px;

    font-size:15px;

    padding:14px;

}

.blp-order-floating a::before{

    font-size:20px;

}

}

/* ==========================================================
   DESKTOP BESAR
   ========================================================== */

@media(min-width:1200px){

.blp-order-floating{

    width:430px;

}

}

/* ==========================================================
   PRINT
   ========================================================== */

@media print{

.blp-order-floating{

    display:none !important;

}

}

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

.blp-order-close{

position:absolute;

top:-10px;

right:-10px;

width:30px;

height:30px;

border:none;

border-radius:50%;

background:#fff;

color:#64748b;

font-size:18px;

font-weight:bold;

cursor:pointer;

box-shadow:0 4px 15px rgba(0,0,0,.15);

transition:.2s;

}

.blp-order-close:hover{

transform:scale(1.1);

color:#ef4444;

}