/*==================================================
GANGA SWEETS
CART PAGE
assets/css/cart.css
==================================================*/

/*=========================================
ROOT VARIABLES
=========================================*/

:root{

    --primary1:#8B1E1E;
    --primary1-dark:#6F1515;

    --gold:#D4A017;
    --gold-dark:#B7860B;

    --cream:#FFF8F1;

    --light:#ffffff;

    --title:#2f2f2f;

    --text:#666666;

    --border:#ececec;

    --radius:18px;

    --shadow:0 12px 35px rgba(0,0,0,.08);

    --transition:.35s ease;

}

/*=========================================
RESET
=========================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



/*=========================================
PAGE HERO
=========================================*/

.cart-hero{

    padding:40px 0;

    background:
    linear-gradient(rgba(40,15,15,.65),rgba(40,15,15,.65)),
    url("../images/contactbg.jpg")
    center center/cover no-repeat;

    text-align:center;

}

.cart-hero h1{

    color:#fff;

    font-size:32px;

    font-weight:700;

    margin-bottom:15px;

}

.cart-hero p{

    color:rgba(255,255,255,.9);
    font-size: 13px;

}

.breadcrumb{

    margin-bottom:20px;

}

.breadcrumb-item a{

    color:#FFD978;

}

.breadcrumb-item.active{

    color:#fff;

}

.breadcrumb-item + .breadcrumb-item::before{

    color:#fff;

}

/*=========================================
CART SECTION
=========================================*/

.cart-section{

    padding:80px 0;

    background:#fafafa;

}

/*=========================================
CART CARD
=========================================*/

.cart-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    padding:25px;

}

/*=========================================
TABLE
=========================================*/

.cart-table{

    margin-bottom:0;

}

.cart-table thead{

    background:#faf7f5;

}

.cart-table thead th{

    color:var(--title);

    font-weight:600;

    border:none;

    padding:18px;

    white-space:nowrap;

}

.cart-table tbody td{

    padding:22px 18px;

    vertical-align:middle;

    border-color:#efefef;

}

/*=========================================
PRODUCT
=========================================*/

.cart-product{

    display:flex;

    align-items:center;

    gap:20px;

}

.cart-image{

    width:110px;

    height:110px;

    object-fit:cover;

    border-radius:16px;

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

}

.cart-info h5{

    margin-bottom:8px;

}

.cart-info h5 a{

    color:var(--title);

    font-size:18px;

    font-weight:500;

}

.cart-info h5 a:hover{

    color:var(--primary1);

}

.cart-info p{

    color:#888;

    margin-bottom:12px;

}

.weight-select{

    max-width:150px;

}

/*=========================================
PRICE
=========================================*/

.price{

    color:var(--primary1);

    font-weight:700;

    font-size:20px;
    margin-bottom: 0px;

}

.item-total{

    color:var(--primary1);

    font-size:20px;

}

/*=========================================
QUANTITY
=========================================*/

.qty-box{

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:12px;

    overflow:hidden;

    width:140px;

    height:46px;

}

.qty-box button{

    width:42px;

    height:46px;

    border:none;

    background:#fff;

    color:var(--title);

    transition:var(--transition);

}

.qty-box button:hover{

    background:var(--primary1);

    color:#fff;

}

.qty-box input{

    width:56px;

    height:46px;

    border:none;

    text-align:center;

    font-weight:600;

    outline:none;

}

/*=========================================
REMOVE
=========================================*/

.remove-item{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#fff2f2;

    color:#d22;

    transition:var(--transition);

}

.remove-item:hover{

    background:#d22;

    color:#fff;

}

/*=========================================
BUTTONS
=========================================*/

.btn-danger{

    background:var(--primary1);

    border-color:var(--primary1);

    border-radius:12px;
    font-size: 16px;

    font-weight:600;

}

.btn-danger:hover{

    background:var(--primary1-dark);

    border-color:var(--primary1-dark);

}

.btn-outline-danger{

    border-radius:12px;

    font-weight:600;

}

.btn-outline-dark{

    border-radius:12px;

    font-weight:600;

}

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

.empty-cart{

    text-align:center;

    padding:70px 20px;

}

.empty-cart i{

    font-size:80px;

    color:#ddd;

    margin-bottom:20px;

}

.empty-cart h3{

    color:var(--title);

    margin-bottom:10px;

}

.empty-cart p{

    color:#888;

}


/*==================================================
ORDER SUMMARY
==================================================*/

.cart-summary-card{

    background:#fff;

    border-radius:22px;

    padding:28px;

    box-shadow:var(--shadow);

    border:1px solid #f2f2f2;

}

.summary-title{

    font-size:24px;

    font-weight:700;

    color:var(--title);

    margin-bottom:20px;

}

.summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

    color:#666;

    font-size:16px;

}

.summary-row strong{

    color:var(--title);

    font-weight:600;

}

.summary-row.total{

    font-size:22px;

    font-weight:700;

    margin-top:15px;

}

.summary-row.total strong{

    color:var(--primary1);

    font-size:28px;

}

/*==================================================
COUPON
==================================================*/

#couponCode{

    height:52px;

    border-radius:12px 0 0 12px;

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

    box-shadow:none;

}

#couponCode:focus{

    border-color:var(--primary1);

}

#applyCoupon{

    border-radius:0 12px 12px 0;

    padding:0 24px;

}

#couponMessage{

    min-height:24px;

    font-size:14px;

    font-weight:500;

}

/*==================================================
PAYMENT ICONS
==================================================*/

.payment-icons{

    display:flex;

    gap:15px;

    margin:20px 0;

}

.payment-icons i{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#faf8f5;

    border-radius:14px;

    font-size:24px;

    color:var(--primary1);

    transition:var(--transition);

}

.payment-icons i:hover{

    background:var(--primary1);

    color:#fff;

    transform:translateY(-4px);

}

/*==================================================
TRUST ITEMS
==================================================*/

.trust-item{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:18px 0;

    border-bottom:1px solid #f2f2f2;

}

.trust-item:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.trust-item i{

    width:52px;

    height:52px;

    background:#fff4ef;

    color:var(--primary1);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:22px;

}

.trust-item h6{

    margin-bottom:5px;

    color:var(--title);

    font-weight:600;

}

.trust-item p{

    margin:0;

    color:#777;

    font-size:14px;

}




/*==================================================
MOBILE STICKY CHECKOUT
==================================================*/

.mobile-cart-bar{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    background:#fff;

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

    box-shadow:0 -8px 30px rgba(0,0,0,.12);

    padding:14px 18px;

    z-index:999;

}

.mobile-cart-bar h5{

    margin:0;

    color:var(--primary1);

    font-size:24px;

    font-weight:700;

}

.mobile-cart-bar .btn{

    border-radius:12px;

    padding:12px 22px;

    font-weight:600;

}

/*==================================================
BACK TO TOP
==================================================*/

.back-to-top{

    position:fixed;

    right:25px;

    bottom:95px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:var(--primary1);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:all .35s ease;

    z-index:998;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    background:var(--primary1-dark);

    transform:translateY(-3px);

}

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

button.loading{

    pointer-events:none;

    opacity:.7;

}

button.loading::after{

    content:"";

    display:inline-block;

    width:16px;

    height:16px;

    margin-left:10px;

    border:2px solid rgba(255,255,255,.4);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .7s linear infinite;

}

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

.empty-cart{

    text-align:center;

    padding:80px 20px;

}

.empty-cart img{

    width:220px;

    margin:0 auto 30px;

}

.empty-cart h3{

    color:var(--title);

    font-size:32px;

    font-weight:700;

    margin-bottom:15px;

}

.empty-cart p{

    color:#777;

    max-width:500px;

    margin:0 auto 30px;

}

/*==================================================
TABLE HOVER
==================================================*/

.cart-table tbody tr{

    transition:var(--transition);

}

.cart-table tbody tr:hover{

    background:#fffaf5;

}

/*==================================================
INPUTS
==================================================*/

.form-control:focus,

.form-select:focus{

    border-color:var(--primary1);

    box-shadow:0 0 0 .2rem rgba(139,30,30,.12);

}

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

::-webkit-scrollbar{

    width:8px;

    height:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary1);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#f5f5f5;

}

/*==================================================
ANIMATIONS
==================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes floatUp{

    from{

        transform:translateY(20px);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

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

@media (min-width:1400px){

    .cart-card{

        padding:35px;

    }

}

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

@media (max-width:991px){

    .cart-hero{

        padding:80px 0;

    }

    .cart-hero h1{

        font-size:40px;

    }

    .cart-product{

        align-items:flex-start;

    }

    .cart-summary-card{

        margin-top:30px;

    }

    .newsletter-section{

        text-align:center;

    }

    .newsletter-form{

        margin-top:25px;

    }

}

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

@media (max-width:767px){
    
    .qty-box input{
        width: 26px;
        height:35px;
    }

    .cart-info h5 a{
        font-size: 15px;
    }

    .weight-select select{
        max-width: 150px;
    }

    .cart-section{

        padding:50px 0;

    }

    .cart-card{

        padding:15px;

    }

    .cart-table thead{

        display:none;

    }

    .cart-table,

    .cart-table tbody,

    .cart-table tr,

    .cart-table td{

        display:block;

        width:100%;

    }

    .cart-table tr{

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

        border-radius:18px;

        margin-bottom:20px;

        padding:15px;

        background:#fff;

    }

    .cart-table td{

        border:none;

        padding:10px 0 !important;

    }

    .cart-product{

        flex-direction:column;

        align-items:flex-start;

        gap:5px;

    }

    .cart-image{

        width:80%;

        max-width:180px;

        height:auto;

    }

    .qty-box{

        width:60px;
        height:35px;

    }

    .summary-row.total{

        font-size:20px;

    }

    .summary-row.total strong{

        font-size:24px;

    }

    .newsletter-section h2{

        font-size:30px;

    }

    .newsletter-form .input-group{

        flex-direction:column;

        border-radius:16px;

    }

    .newsletter-form input{

        width:100%;

        border-radius:16px 16px 0 0;

    }

    .newsletter-form .btn{

        width:100%;

        border-radius:0 0 16px 16px;

    }

}

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

@media (max-width:576px){

    .cart-hero{

        padding:10px 0;
        padding-top: 30px

    }

    .cart-hero h1{

        font-size:25px;

    }

    .cart-summary-card{

        padding:22px;

    }

    .payment-icons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .back-to-top{

        right:15px;

        bottom:85px;

    }

    .mobile-cart-bar{

        padding:12px;

    }

    .mobile-cart-bar h5{

        font-size:20px;

    }

}