/*=============================
CHECKOUT
=============================*/

.checkout{

    padding:120px 0;

    background:var(--background-color);

}

.checkout-header{

    text-align:center;

    margin-bottom:60px;

}

.checkout-header h1{

    font-size:3rem;

    color:var(--heading-color);

}

.checkout-header p{

    margin-top:10px;

    color:var(--text-light);

}

.checkout-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:50px;

}

.checkout-form{

    background:var(--card-bg);

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow-md);

}

.form-group{

    margin-bottom:25px;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

}

.form-group input,

.form-group textarea{

    width:100%;

    padding:15px;

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

    border-radius:12px;

    background:transparent;

    color:var(--text-color);

}

.checkout-btn{

    width:100%;

    margin-top:20px;

}

.order-summary{

    background:var(--card-bg);

    padding:35px;

    border-radius:20px;

    box-shadow:var(--shadow-md);

    height:fit-content;

    position:sticky;

    top:120px;

}

.summary-item{

    display:flex;

    justify-content:space-between;

    margin:18px 0;

}

.summary-total{

    display:flex;

    justify-content:space-between;

    margin-top:25px;

    font-size:1.2rem;

}

@media(max-width:900px){

.checkout-grid{

    grid-template-columns:1fr;

}

.order-summary{

    position:static;

}

.checkout-header h1{

    font-size:2.3rem;

}

}

/* ===========================
   CHECKOUT SUMMARY
=========================== */

.order-summary{

    background: var(--card-bg);

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

    border-radius:18px;

    padding:30px;

    position:sticky;

    top:120px;

}

.order-summary h2{

    margin-bottom:25px;

}

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding:14px 0;

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

}

.summary-item:last-of-type{

    border-bottom:none;

}

.summary-item span:first-child{

    color:var(--text-color);

}

.summary-item span:last-child{

    font-weight:700;

}

.summary-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:25px;

    padding-top:20px;

    border-top:2px solid var(--border-color);

}

.summary-total h3{

    margin:0;

    font-size:1.2rem;

}

/* ===========================
   BUY NOW BADGE
=========================== */

.buy-now-badge{

    display:inline-block;

    margin-bottom:20px;

    padding:8px 16px;

    background:#111;

    color:#fff;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

}

/* ===========================
   DELIVERY NOTICE
=========================== */

.delivery-notice{

    margin-top:30px;

    padding:20px;

    border-radius:14px;

    background:rgba(0,0,0,.04);

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

}

.delivery-notice h4{

    margin-bottom:10px;

    font-size:1rem;

}

.delivery-notice p{

    margin:8px 0;

    line-height:1.7;

    color:var(--text-light);

    font-size:.95rem;

}

/* Dark mode */

body.dark-mode .delivery-notice{

    background:rgba(255,255,255,.04);

}

body.dark-mode .buy-now-badge{

    background:#fff;

    color:#111;

}

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

@media(max-width:768px){

    .order-summary{

        position:static;

        margin-top:40px;

        padding:25px;

    }

    .summary-item{

        gap:10px;

        font-size:.95rem;

    }

    .summary-total h3{

        font-size:1.05rem;

    }

}

/* ===========================
   PAYMENT PAGE
=========================== */

.payment-card{

    max-width:650px;

    margin:80px auto;

    padding:40px;

    background:var(--card-bg);

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

    border-radius:20px;

    text-align:center;

}

.order-number{

    margin:20px 0;

    font-size:1rem;

}

.order-number strong{

    display:block;

    margin-top:8px;

    font-size:1.2rem;

}

.payment-total{

    margin:35px 0;

}

.payment-total span{

    display:block;

    color:var(--text-light);

    margin-bottom:10px;

}

.payment-total h2{

    font-size:2.4rem;

}

.payment-btn{

    width:100%;

    margin-top:30px;

}

.payment-security{

    margin-top:20px;

    font-size:.95rem;

    color:var(--text-light);

}


/* ==========================================
   CHECKOUT PRODUCT SUMMARY
========================================== */

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.summary-product{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.summary-product strong{

    color:#111827;

    font-size:15px;

}

.summary-product span{

    color:#6b7280;

    font-size:13px;

}

.summary-price{

    font-weight:700;

    color:#111827;

    white-space:nowrap;

}


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

@media(max-width:600px){

    .summary-item{

        align-items:flex-start;

    }

    .summary-price{

        font-size:14px;

    }

}