/**
 * ==========================================
 * Handicrafts BD Toolkit
 * Floating Cart
 * Build-4
 * ==========================================
 */

:root{

    --hbd-cart-width:420px;
    --hbd-cart-bg:#ffffff;
    --hbd-cart-border:#ececec;
    --hbd-cart-shadow:-12px 0 40px rgba(0,0,0,.20);

    --hbd-primary:#007536;

    --hbd-floating-size:64px;

    --hbd-floating-right:24px;

    --hbd-floating-mobile-right:18px;

    --hbd-floating-mobile-bottom:220px;

}

/*======================================
Root
======================================*/

#hbd-floating-cart-root{

    position:relative;

    z-index:999999;

}

/*======================================
Floating Button
======================================*/

.hbd-floating-cart{

    position:fixed;

    right:var(--hbd-floating-right);

    top:50%;

    transform:translateY(-50%);

    z-index:999998;

}

.hbd-cart-toggle{

    width:var(--hbd-floating-size);

    height:var(--hbd-floating-size);

    border:none;

    border-radius:50%;

    background:var(--hbd-primary);

    color:#fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    box-shadow:0 10px 28px rgba(0,0,0,.22);

    transition:.25s;

}

.hbd-cart-toggle:hover{

    transform:scale(1.06);

}

.hbd-cart-icon{

    font-size:28px;

    line-height:1;

}

.hbd-cart-count{

    position:absolute;

    top:-5px;

    right:-5px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#ff4d2d;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:700;

}

/*======================================
Overlay
======================================*/

.hbd-cart-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999995;

}

.hbd-cart-overlay.hbd-open{

    opacity:1;

    visibility:visible;

}

/*======================================
Drawer
======================================*/

.hbd-cart-drawer{

    position:fixed;

    top:0;

    right:0;

    width:var(--hbd-cart-width);

    max-width:100%;

    height:100vh;

    background:var(--hbd-cart-bg);

    box-shadow:var(--hbd-cart-shadow);

    display:flex;

    flex-direction:column;

    overflow:hidden;

    transform:translateX(100%);

    transition:transform .35s ease;

    z-index:999996;

}

.hbd-cart-drawer.hbd-open{

    transform:translateX(0);

}

/*======================================
Header
======================================*/

.hbd-cart-header{

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

    border-bottom:1px solid var(--hbd-cart-border);

    flex-shrink:0;

}

.hbd-cart-title{

    font-size:20px;

    font-weight:700;

    color:#222;

}

.hbd-cart-close{

    width:42px;

    height:42px;

    border:none;

    background:none;

    cursor:pointer;

    font-size:34px;

    color:#666;

}

/*======================================
Body
======================================*/

.hbd-cart-body{

    flex:1;

    overflow-y:auto;

    padding:20px;

}

/*======================================
Footer
======================================*/

.hbd-cart-footer{

    padding:20px;

    border-top:1px solid var(--hbd-cart-border);

    background:#fff;

    flex-shrink:0;

}

/*======================================
Mobile
======================================*/

@media (max-width:768px){

    .hbd-floating-cart{

        right:var(--hbd-floating-mobile-right);

        top:auto;

        bottom:var(--hbd-floating-mobile-bottom);

        transform:none;

    }

    .hbd-cart-toggle{

        width:60px;

        height:60px;

    }

    .hbd-cart-icon{

        font-size:26px;

    }

    .hbd-cart-drawer{

        width:100%;

    }

}