/* =========================================
   Checkout Layout
========================================= */

.checkout-page{

    max-width:1400px;

    margin:70px auto;

    padding:20px;

}

.checkout-page h1{

    margin-bottom:40px;

}

.checkout-container{

    display:grid;

    grid-template-columns:1.8fr 1fr;

    gap:40px;

    align-items:start;

}

.customer-details{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:18px;

    padding:35px;

}

.order-summary{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:18px;

    padding:30px;

    position:sticky;

    top:30px;

}

/* =========================================
   Customer Details
========================================= */

.customer-details h2{

    font-size:28px;

    margin-bottom:30px;

}

.customer-details input,
.customer-details textarea{

    width:100%;

    padding:16px 18px;

    margin-bottom:18px;

    border:1px solid #dddddd;

    border-radius:12px;

    font-size:15px;

    font-family:'DM Sans',sans-serif;

    transition:.3s;

    background:#ffffff;

}

.customer-details textarea{

    resize:vertical;

    min-height:120px;

}

.customer-details input:focus,
.customer-details textarea:focus{

    outline:none;

    border-color:#20211d;

    box-shadow:0 0 0 4px rgba(32,33,29,.08);

}

/* =========================================
   Checkout Products
========================================= */

.checkout-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:18px 0;

}

.checkout-item img{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:12px;

    border:1px solid #ececec;

    flex-shrink:0;

}

.checkout-item h3{

    margin-bottom:8px;

    font-size:17px;

}

.checkout-item p{

    margin:4px 0;

    color:#666;

    font-size:14px;

}

#place-order{

    width:100%;

    margin-top:30px;

    padding:18px;

    background:#20211d;

    color:#ffffff;

    border:none;

    border-radius:12px;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}

#place-order:hover{

    background:#9b5c3d;

}

@media (max-width:992px){

    .checkout-container{

        grid-template-columns:1fr;

    }

    .order-summary{

        order:-1;

        position:static;

    }

}