/* ==========================================
   MARUWATA CART PAGE CSS
========================================== */


/* MAIN CONTAINER */

.cart-container{

    max-width:1200px;
    margin:60px auto;
    padding:0 20px;

}



/* TITLE */

.cart-title{

    text-align:center;

    font-size:38px;

    font-weight:700;

    color:#1e4f8a;

    margin-bottom:40px;

}






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


.empty-cart{

    max-width:1300px;

    margin:80px auto;

    padding:55px 40px;

    text-align:center;

    background:#c9cbce;

    border-radius:20px;

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

}



.empty-cart-icon{

    width:100px;

    height:100px;

    margin:0 auto 25px;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:50px;


    background:#1e4f8a;

    border-radius:50%;

}



.empty-cart h2{

    font-size:32px;

    color:#1e4f8a;

    margin-bottom:15px;

}



.empty-cart p{

    color:#666;

    font-size:17px;

    line-height:1.7;

    margin-bottom:35px;

}



.shop-btn{

    display:inline-block;

    padding:15px 45px;


    background:linear-gradient(135deg,#ff7a00,#ff3d00);


    color:white;

    text-decoration:none;

    border-radius:50px;


    font-size:17px;

    font-weight:600;


    transition:.3s;

}



.shop-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(255,90,0,.35);

}







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


.cart-table{

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}





.cart-header,
.cart-row{


    display:grid;

    grid-template-columns:

    100px 2fr 130px 130px 150px 120px;


    align-items:center;

    gap:15px;

    padding:20px;

}





.cart-header{


    background:#1e4f8a;

    font-weight:700;

    color:#ffffff;

    font-size:17px;

}





.cart-row{


    border-bottom:1px solid #eee;

    transition:.3s;

}





.cart-row:hover{

    background:#fafafa;

}





.cart-row img{


    width:75px;

    height:75px;

    object-fit:cover;

    border-radius:12px;

}





.product-name{

    font-size:17px;

    font-weight:600;

    color:#222;

}







/* QUANTITY */


.cart-row input{


    width:70px;

    height:40px;


    text-align:center;


    border:1px solid #ddd;


    border-radius:10px;


    font-size:16px;

}







/* REMOVE BUTTON */


.remove{


    color:#e53935;

    text-decoration:none;


    font-size:14px;

    font-weight:600;


}



.remove:hover{

    color:#b71c1c;

}







/* UPDATE BUTTON */


.update{


    margin-top:25px;


    padding:13px 35px;


    background:#222;


    color:white;


    border:none;


    border-radius:30px;


    cursor:pointer;


    font-size:16px;

    font-weight:600;


}



.update:hover{

    background:#000;

}








/* ==========================================
   CART BOTTOM
========================================== */


.cart-bottom{


    display:grid;

    grid-template-columns:1fr 400px;


    gap:35px;


    margin-top:40px;

}





/* COUPON */


.coupon{


    background:white;


    padding:30px;


    border-radius:20px;


    box-shadow:0 10px 30px rgba(0,0,0,.08);


}



.coupon h3{


    font-size:22px;

    margin-bottom:20px;


}



.coupon form{


    display:flex;

    gap:10px;


}



.coupon input{


    flex:1;


    height:45px;


    padding:0 15px;


    border:1px solid #ddd;


    border-radius:10px;


    font-size:15px;


}



.coupon button{


    padding:0 25px;


    border:none;


    background:#ff7a00;


    color:white;


    border-radius:10px;


    cursor:pointer;

    font-weight:600;


}



.coupon button:hover{

    background:#ff3d00;

}




.success-msg{

    color:green;

    margin-top:15px;

}



.error-msg{

    color:red;

    margin-top:15px;

}







/* ==========================================
   SUMMARY BOX
========================================== */


.summary{


    background:white;


    padding:30px;


    border-radius:20px;


    box-shadow:0 10px 30px rgba(0,0,0,.08);


}




.summary h2{


    font-size:25px;

    margin-bottom:25px;


}




.summary p{


    display:flex;


    justify-content:space-between;


    font-size:17px;


    color:#555;


    margin-bottom:18px;


}




.summary span{


    font-weight:600;

    color:#222;


}



.discount{

    color:#16a34a !important;

}





.grand{


    border-top:1px solid #ddd;


    padding-top:20px;


    font-size:22px !important;


    font-weight:700;


}



.grand span{


    color:#ff5a00;


}






/* BUTTONS */


.continue,
.checkout{


    display:block;


    text-align:center;


    padding:15px;


    border-radius:50px;


    text-decoration:none;


    margin-top:15px;


    font-weight:600;


}





.continue{


    background:#f2f2f2;

    color:#333;


}



.checkout{


    background:linear-gradient(135deg,#ff7a00,#ff3d00);


    color:white;


}



.checkout:hover{


    box-shadow:0 8px 20px rgba(255,100,0,.35);


}







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


@media(max-width:900px){


.cart-header{

    display:none;

}


.cart-row{


    grid-template-columns:1fr;

    text-align:center;


}


.cart-row img{

    margin:auto;

}



.cart-bottom{


    grid-template-columns:1fr;


}



.coupon form{


    flex-direction:column;

}



.coupon button{


    height:45px;

}


.cart-title{

    font-size:30px;

}


}

/* ==========================
   CART BOTTOM PROFESSIONAL
========================== */

.cart-bottom{

    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:30px;
    margin-top:40px;

}



/* COUPON BOX */

.coupon,
.shipping-box{

    background:#ffffff;

    padding:25px;

    border-radius:15px;

    box-shadow:0 8px 25px rgba(0,0,0,0.08);

    border:1px solid #eee;

}



.coupon h3,
.shipping-box h3{

    font-size:20px;

    margin-bottom:20px;

    color:#111827;

}




.coupon form{

    display:flex;

    gap:10px;

}



.coupon input{

    flex:1;

    padding:14px;

    border-radius:8px;

    border:1px solid #ddd;

    font-size:15px;

}



.coupon button{

    background:#f97316;

    color:white;

    border:none;

    padding:0 25px;

    border-radius:8px;

    cursor:pointer;

    font-weight:600;

}



.coupon button:hover{

    background:#ea580c;

}





/* SHIPPING AREA */


.shipping-box label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#374151;

}



.shipping-box select{


    width:100%;

    padding:14px;

    margin-bottom:18px;

    border-radius:10px;

    border:1px solid #ddd;

    background:white;

    font-size:15px;

    cursor:pointer;


}



.shipping-box select:focus{

    border-color:#f97316;

    outline:none;

}




/* MOBILE */

@media(max-width:768px){


.cart-bottom{

    grid-template-columns:1fr;

}


.coupon form{

    flex-direction:column;

}


.coupon button{

    height:45px;

}


}









/* =====================================
   MODERN CART BOTTOM DESIGN
===================================== */


.cart-bottom{

    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:25px;
    margin-top:40px;

}


/* COMMON CARD */

.coupon,
.shipping-box,
.summary{

    background:#ffffff;

    border-radius:20px;

    padding:28px;

    border:1px solid #eeeeee;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.06);

    transition:0.3s;

}



.coupon:hover,
.shipping-box:hover,
.summary:hover{

    transform:translateY(-5px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.12);

}



/* TITLE */

.coupon h3,
.shipping-box h3,
.summary h2{


    font-size:22px;

    font-weight:700;

    margin-bottom:22px;

    color:#222;


}




/* COUPON */

.coupon form{

    display:flex;

    gap:10px;

}



.coupon input{


    flex:1;

    padding:14px 16px;

    border-radius:12px;

    border:1px solid #ddd;

    font-size:15px;

    outline:none;


}



.coupon input:focus{

    border-color:#ff7a00;

}




.coupon button{


    background:
    linear-gradient(135deg,#ff7a00,#ff4500);

    color:white;

    border:none;

    padding:0 25px;

    border-radius:12px;

    font-weight:600;

    cursor:pointer;


}



.coupon button:hover{


    opacity:.9;


}




/* SHIPPING AREA */


.shipping-box{

    position:relative;

}



.shipping-box h3{

    display:flex;

    align-items:center;

    gap:10px;

}



.shipping-box label{


    font-size:14px;

    color:#777;

    margin-bottom:8px;

    display:block;


}



.shipping-box select{


    width:100%;

    padding:14px;

    border-radius:12px;

    border:1px solid #ddd;

    background:#fafafa;

    font-size:15px;

    margin-bottom:15px;

    cursor:pointer;


}



.shipping-box select:focus{


    border-color:#ff7a00;

}




/* SUMMARY */


.summary{


    background:

    linear-gradient(
    145deg,
    #ffffff,
    #fff8f2
    );


}



.summary p{


    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px dashed #ddd;

    font-size:16px;


}



.summary p span{


    font-weight:600;


}



.summary .discount{


    color:#e63946;


}



#shipping_amount{


    color:#16a34a;


}



.summary .grand{


    margin-top:10px;

    font-size:23px;

    font-weight:800;

    border:none;


}



.summary .grand span{


    color:#ff6b00;

}




/* BUTTONS */


.continue,
.checkout{


    display:block;

    width:100%;

    text-align:center;

    padding:15px;

    border-radius:14px;

    margin-top:15px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;


}



.continue{


    background:#f3f4f6;

    color:#333;


}



.continue:hover{


    background:#e5e7eb;


}



.checkout{


    background:

    linear-gradient(
    135deg,
    #ff7a00,
    #ff4500
    );


    color:white;


}



.checkout:hover{


    transform:scale(1.03);


}





/* UPDATE CART BUTTON */


.update{


    margin-top:25px;

    background:#111827;

    color:white;

    padding:14px 35px;

    border:none;

    border-radius:12px;

    font-weight:600;

    cursor:pointer;


}



.update:hover{


    background:#000;


}





/* MOBILE */


@media(max-width:1000px){


.cart-bottom{

    grid-template-columns:1fr;

}


.coupon form{

    flex-direction:column;

}


.coupon button{

    height:45px;

}


}