.checkout-card{

    background:#fff;

    border-radius:24px;

    padding:40px;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

}

.checkout-header{

    margin-bottom:35px;

}

.checkout-subtitle{

    display:block;

    color:#8AA08B;

    letter-spacing:3px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:10px;

}

.checkout-header h2{

    font-size:34px;

    font-weight:700;

    margin-bottom:10px;

}

.checkout-header p{

    color:#777;

    margin:0;

}

.checkout-card label{

    font-weight:600;

    margin-bottom:8px;

    color:#333;

}

.modern-input{

    height:55px;

    border-radius:14px;

    border:1px solid #e5e5e5;

    box-shadow:none;

    transition:.3s;

    padding:0 18px;

}

textarea.modern-input{

    height:auto;

    padding:15px;

}

.modern-input:focus{

    border-color:#8AA08B;

    box-shadow:0 0 0 4px rgba(138,160,139,.15);

}

.delivery-status{

    margin-top:15px;

    padding:15px;

    border-radius:12px;

    display:none;

}


/*==========================
ORDER SUMMARY
==========================*/

.checkout-summary{

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.summary-header{

    margin-bottom:30px;

}

.checkout-products{

    max-height:420px;

    overflow-y:auto;

    padding-right:5px;

}

.checkout-product{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

}

.checkout-product-image{

    width:80px;

    height:80px;

    object-fit:cover;

    border-radius:14px;

    border:1px solid #eee;

}

.checkout-product-info{

    flex:1;

}

.checkout-product-info h5{

    font-size:18px;

    font-weight:700;

    margin-bottom:8px;

}

.checkout-product-info small{

    color:#777;

}

.checkout-variation{

    margin-bottom:6px;

}

.checkout-variation span{

    display:inline-block;

    background:#f6f6f6;

    padding:4px 10px;

    border-radius:20px;

    font-size:12px;

    margin-right:6px;

    margin-bottom:6px;

}

.checkout-product-price{

    font-size:18px;

    font-weight:700;

    color:#8AA08B;

}

/*==========================
PRICE
==========================*/

.summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #f1f1f1;

}

.summary-row:last-of-type{

    border:none;

}

.summary-row span{

    color:#666;

}

.summary-row strong{

    font-size:18px;

}

.grand-total{

    font-size:22px;

    font-weight:700;

    margin-top:10px;

}

/*==========================
SECURITY
==========================*/

.checkout-security{

    margin:30px 0;

}

.checkout-security div{

    margin-bottom:12px;

    color:#666;

}

.checkout-security i{

    color:#8AA08B;

    width:24px;

}

/*==========================
BUTTONS
==========================*/

.place-order-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    background:#8AA08B;

    color:#fff;

    font-size:18px;

    font-weight:700;

    transition:.3s;

}

.place-order-btn:hover{

    background:#708875;

}

.back-shopping-btn{

    display:block;

    text-align:center;

    margin-top:15px;

    padding:14px;

    border:1px solid #ddd;

    border-radius:14px;

    color:#555;

    text-decoration:none;

    font-weight:600;

}

.back-shopping-btn:hover{

    background:#f8f8f8;

    text-decoration:none;

}



.coupon-wrapper{

    display:flex;

    gap:10px;

}

.apply-coupon-btn{

    min-width:110px;

    border:none;

    border-radius:14px;

    background:#8AA08B;

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.apply-coupon-btn:hover{

    background:#708875;

}

.coupon-message{

    display:block;

    margin-top:10px;

    font-size:14px;

    font-weight:600;

}
