/*
==============================================================================
TIPA MART
CHECKOUT
==============================================================================
*/

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

.checkout{

    padding:40px 0 70px;

    background:#f7f8fa;

}

/*==================================================
LAYOUT
==================================================*/

.checkout__layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 360px;

    gap:30px;

    align-items:start;

}

.checkout__main{

    min-width:0;

}

/*==================================================
CARDS
==================================================*/

.checkout__card{

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:12px;

    padding:28px;

    margin-bottom:25px;

    box-shadow:0 6px 18px rgba(0,0,0,.04);

}

.checkout__card h2{

    margin:0 0 25px;

    font-size:24px;

    font-weight:700;

    color:#082C6C;

}

/*==================================================
GRID
==================================================*/

.checkout__grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

/*==================================================
FIELDS
==================================================*/

.checkout__field{

    display:flex;

    flex-direction:column;

    margin-bottom:20px;

}

.checkout__field:last-child{

    margin-bottom:0;

}

.checkout__field label{

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#333;

}

.checkout__field input,

.checkout__field textarea{

    width:100%;

    border:1px solid #dddddd;

    border-radius:8px;

    padding:14px 16px;

    font-size:15px;

    transition:.25s;

    outline:none;

    background:#fff;

}

.checkout__field textarea{

    resize:vertical;

    min-height:120px;

}

.checkout__field input:focus,

.checkout__field textarea:focus{

    border-color:#082C6C;

    box-shadow:0 0 0 3px rgba(8,44,108,.08);

}

/*==================================================
DELIVERY RESULT
==================================================*/

.checkout__delivery-result{

    margin-top:10px;

    padding:18px;

    border-radius:8px;

    display:none;

}

.checkout__delivery-result.success{

    display:block;

    background:#eaf8ef;

    border:1px solid #bfe5cb;

    color:#1b7d3c;

}

.checkout__delivery-result.error{

    display:block;

    background:#fff1f1;

    border:1px solid #f2c7c7;

    color:#c62828;

}

/*==================================================
SIDEBAR
==================================================*/

.checkout__sidebar{

    position:sticky;

    top:20px;

}

/*==================================================
PRODUCTS
==================================================*/

.checkout__products{

    margin-bottom:25px;

}

.checkout__product{

    display:flex;

    justify-content:space-between;

    gap:15px;

    padding:16px 0;

    border-bottom:1px solid #eeeeee;

}

.checkout__product:last-child{

    border-bottom:none;

}

.checkout__product h4{

    margin:0 0 6px;

    font-size:15px;

    font-weight:600;

    color:#222;

}

.checkout__product span{

    font-size:13px;

    color:#777;

}

/*==================================================
TOTALS
==================================================*/

.checkout__totals{

    margin-top:25px;

    border-top:2px solid #eeeeee;

    padding-top:20px;

}

.checkout__row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

}

.checkout__row span{

    color:#666;

}

.checkout__row strong{

    font-weight:700;

    color:#222;

}

.checkout__row--total{

    margin-top:10px;

    border-top:2px solid #eeeeee;

    padding-top:18px;

}

.checkout__row--total strong{

    font-size:24px;

    color:var(--primary);

}

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

.checkout__payment{

    margin-top:30px;

}

.checkout__payment h3{

    margin:0 0 15px;

    font-size:20px;

    color:#082C6C;

}

.checkout__payment-option{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

    cursor:pointer;

    font-weight:600;

}

.checkout__payment-text{

    margin:0;

    color:#666;

    line-height:1.7;

    font-size:14px;

}

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

.checkout__place-order{

    width:100%;

    margin-top:30px;

    height:56px;

    border:none;

    border-radius:8px;

    background:#082C6C;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.checkout__place-order:hover{

    background:#0D5CB6;

    transform:translateY(-2px);

}

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

@media (max-width:991px){

    .checkout__layout{

        grid-template-columns:1fr;

    }

    .checkout__sidebar{

        position:static;

    }

}

@media (max-width:768px){

    .checkout{

        padding:30px 0 50px;

    }

    .checkout__grid{

        grid-template-columns:1fr;

    }

    .checkout__card{

        padding:22px;

    }

}

@media (max-width:480px){

    .checkout__card{

        padding:18px;

    }

    .checkout__card h2{

        font-size:22px;

    }

    .checkout__place-order{

        height:52px;

    }

}