/* ==========================================================
   Franklin Theme v2.0
   Mini Cart
   Dr. Franklin Herbal Remedies
========================================================== */

/* ==========================================================
   CART DROPDOWN WRAPPER
========================================================== */

.franklin-cart-wrapper {
    width: 420px;
    max-width: 100%;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
   
}

/* ==========================================================
   HEADER
========================================================== */

.franklin-cart-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 20px;

    background:#ffffff;

    border-bottom:1px solid #ececec;
}

.franklin-cart-header h5{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#222;
}

.franklin-cart-header small{
    display:block;
    margin-top:2px;
    font-size:13px;
    color:#777;
}

.franklin-cart-header i{
    color:#2E7D32;
    margin-right:8px;
}

.cart-total{
    font-size:18px;
    font-weight:700;
    color:#2E7D32;
}

/* ==========================================================
   PRODUCTS
========================================================== */

.franklin-cart-products{

    max-height:360px;

    overflow-y:auto;
}

.franklin-cart-item{

    display:flex;

    gap:15px;

    padding:18px 20px;

    border-bottom:1px solid #f2f2f2;

    transition:.25s;
}

.franklin-cart-item:hover{

    background:#fafafa;
}

/* ==========================================================
   IMAGE
========================================================== */

.cart-image{

    flex:0 0 72px;
}

.cart-image img{

    width:72px;

    height:72px;

    object-fit:cover;

    border-radius:10px;

    border:1px solid #eee;
}

/* ==========================================================
   DETAILS
========================================================== */

.cart-details{

    flex:1;
}

.product-name{

    display:block;

    color:#222;

    text-decoration:none;

    font-weight:600;

    margin-bottom:8px;
}

.product-name:hover{

    color:#198754;
}

.product-options{

    font-size:13px;

    color:#777;

    margin-bottom:6px;
}

.cart-price{

    color:#666;

    font-size:14px;
}

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

.cart-actions{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:flex-end;
}

.cart-actions strong{

    color:#198754;

    font-size:16px;
}

.btn-remove{

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:#ffe5e5;

    color:#dc3545;

    cursor:pointer;

    transition:.25s;
}

.btn-remove:hover{

    background:#dc3545;

    color:#fff;
}

.franklin-cart-wrapper .btn-remove-cart{

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:#ffe5e5;

    color:#dc3545;

    cursor:pointer;

    transition:.25s;
}

.franklin-cart-wrapper .btn-remove-cart:hover{

    background:#dc3545;

    color:#fff;
}

/* ==========================================================
   TOTALS
========================================================== */

.franklin-cart-totals{

    padding:18px 20px;

    background:#fafafa;

    border-top:1px solid #ececec;
}

.cart-total-row{

    display:flex;

    justify-content:space-between;

    padding:8px 0;

    font-size:15px;
}

.cart-total-row.grand-total{

    margin-top:10px;

    padding-top:12px;

    border-top:1px solid #ddd;

    font-size:18px;

    font-weight:700;

    color:#198754;
}

/* ==========================================================
   FOOTER
========================================================== */

.franklin-cart-footer{

    display:flex;

    gap:12px;

    padding:20px;
}

.franklin-cart-footer .btn{

    flex:1;

    border-radius:8px;
}

/* ==========================================================
   EMPTY CART
========================================================== */

.franklin-empty-cart{

    padding:50px 30px;

    text-align:center;
}

.franklin-empty-cart i{

    font-size:54px;

    color:#198754;

    margin-bottom:20px;
}

.franklin-empty-cart h5{

    margin-bottom:10px;

    font-weight:600;
}

.franklin-empty-cart p{

    color:#777;
}

/* ==========================================================
   SCROLLBAR
========================================================== */

.franklin-cart-products::-webkit-scrollbar{

    width:6px;
}

.franklin-cart-products::-webkit-scrollbar-thumb{

    background:#198754;

    border-radius:20px;
}

.franklin-cart-products::-webkit-scrollbar-track{

    background:#f4f4f4;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:576px){

    .franklin-cart-wrapper{

        width:100%;

        border-radius:0;
    }

    .franklin-cart-item{

        padding:15px;
    }

    .cart-image img{

        width:60px;

        height:60px;
    }

    .franklin-cart-footer{

        flex-direction:column;
    }
}

/*=========================================
    Franklin Toast
=========================================*/

.franklin-toast{

    position:fixed;

    top:30px;

    right:30px;

    width:360px;

    background:#ffffff;

    border-left:5px solid #198754;

    border-radius:12px;

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

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    z-index:999999;

    opacity:0;

    visibility:hidden;

    transform:translateX(120%);

    transition:.35s ease;
}

.franklin-toast.show{

    opacity:1;

    visibility:visible;

    transform:translateX(0);

}

.toast-icon{

    font-size:32px;

    color:#198754;

}

.toast-content{

    flex:1;

}

.toast-title{

    font-size:16px;

    font-weight:700;

    color:#222;

}

.toast-message{

    font-size:14px;

    color:#666;

    margin:3px 0;

}

.toast-close{

    border:none;

    background:none;

    cursor:pointer;

    color:#999;

}

.toast-close:hover{

    color:#dc3545;

}

/*=========================================
    Animated Cart Badge
=========================================*/

.cart-count{

    transition:all .3s ease;

}

.cart-count.bump{

    animation:cartBadgeBounce .45s ease;

}

@keyframes cartBadgeBounce{

    0%{
        transform:scale(1);
    }

    30%{
        transform:scale(1.35);
    }

    60%{
        transform:scale(.9);
    }

    100%{
        transform:scale(1);
    }

}

/*=========================================
    Franklin Cart Animation
=========================================*/

.cart-count{
    transition:all .3s ease;
}

.cart-count.bump{
    animation:cartBadgeBounce .45s ease;
}

@keyframes cartBadgeBounce{

    0%{
        transform:scale(1);
    }

    30%{
        transform:scale(1.35);
    }

    60%{
        transform:scale(.90);
    }

    100%{
        transform:scale(1);
    }

}

/* Cart Icon */

.header-cart i,
.cart-toggle i,
.nav-cart i{

    transition:.3s ease;

}

.header-cart.bump i,
.cart-toggle.bump i,
.nav-cart.bump i{

    animation:cartShake .55s ease;

}

@keyframes cartShake{

    0%{
        transform:rotate(0deg);
    }

    20%{
        transform:rotate(-15deg);
    }

    40%{
        transform:rotate(15deg);
    }

    60%{
        transform:rotate(-10deg);
    }

    80%{
        transform:rotate(10deg);
    }

    100%{
        transform:rotate(0deg);
    }

}

/*=========================================
 Franklin Premium Cart Animation
=========================================*/

.header-cart{

    transition:.3s ease;

}

.header-cart.cart-added{

    animation:franklinCartAdded .6s ease;

}

.header-cart.cart-added .cart-count{

    animation:badgeBounce .6s ease;

}

@keyframes franklinCartAdded{

0%{
transform:scale(1);
}

25%{
transform:scale(1.08);
}

50%{
transform:scale(.95);
}

100%{
transform:scale(1);
}

}

@keyframes badgeBounce{

0%{
transform:scale(1);
}

30%{
transform:scale(1.6);
}

60%{
transform:scale(.85);
}

100%{
transform:scale(1);
}

}

/*=========================================
 Franklin Shopping Cart
=========================================*/

.fr-cart-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(0,0,0,.06);

    padding:15px;

}

.fr-cart-header h1{

    font-size:3rem;

    font-weight:700;

    margin-bottom:10px;

}

.fr-cart-image{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:14px;

    border:1px solid #eee;

    transition:.3s;

}

.fr-cart-image:hover{

    transform:scale(1.05);

}

.fr-product-title{

    color:#222;

    text-decoration:none;

    font-weight:700;

}

.fr-product-title:hover{

    color:#2E7D32;

}

.fr-qty-group .form-control{

    max-width:90px;

    text-align:center;

}

.fr-qty-group .btn{

    min-width:48px;

}

#output-cart table{

    margin-bottom:0;

}

#output-cart th{

    background:#f8faf8;

    border:none;

    font-weight:700;

}

#output-cart td{

    vertical-align:middle;

    border-color:#eef1ef;

}

/* =====================================================
   Checkout Styles
===================================================== */

.franklin-checkout{
    
    padding:0 0 60px 0;
}

.franklin-checkout .card{
    border:0;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    overflow:hidden;
}

.franklin-checkout .card-header{
    background:#fff;
    border-bottom:1px solid #eee;
    padding:18px 24px;
}

.franklin-checkout .card-body{
    padding:24px;
}

.franklin-checkout h5{
    font-weight:600;
    color:#2E7D32;
}

.franklin-checkout .breadcrumb{
    background:transparent;
    margin-bottom:2rem;
}

.franklin-checkout .breadcrumb-item a{
    color:#2E7D32;
    text-decoration:none;
}

.franklin-checkout .position-sticky{
    top:100px;
}

@media (max-width:991px){

    .franklin-checkout .position-sticky{
        position:relative !important;
        top:0 !important;
    }

}

.wishlist-header {
    position: relative;
}

.wishlist-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dc3545;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.wishlist-count.d-none {
    display: none !important;
}