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

#checkoutView{

    max-width:520px;
    margin:0 auto;
    padding:12px;
    padding-bottom:20px;
    background:#f5f6fa;
    min-height:100vh;

}

/* Header */

.checkoutHeader{

    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;

}

.checkoutBackBtn{

    width:34px;
    height:34px;

    border:none;

    border-radius:8px;
color:#111;
    background:#fff;

    font-size:15px;

    cursor:pointer;

    box-shadow:0 1px 4px rgba(0,0,0,.08);

}

.checkoutHeader h2{

    font-size:19px;

    margin:0;

    font-weight:700;

}

/* Product */

.checkoutProducts{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.checkoutItem{

    display:flex;

    align-items:center;

    gap:10px;

    background:#fff;

    border-radius:10px;

    padding:8px;

    box-shadow:0 1px 4px rgba(0,0,0,.05);

}

.checkoutItemImage{

    width:58px;

    height:58px;

    object-fit:cover;

    border-radius:8px;

}

.checkoutItemInfo{

    flex:1;

}

.checkoutItemTitle{

    font-size:13px;

    font-weight:600;

    line-height:1.35;

}

.checkoutItemPrice{

    font-size:12px;

    color:#00894d;

    margin-top:3px;

}

.checkoutItemQty{

    font-size:11px;

    color:#777;

    margin-top:2px;

}

/* Form */

.checkoutForm{

    margin-top:16px;

    background:#fff;

    border-radius:12px;

    padding:12px;

    box-shadow:0 1px 5px rgba(0,0,0,.05);

}

.checkoutForm h3{

    font-size:15px;

    margin:0 0 10px;

}

.checkoutForm input,

.checkoutForm textarea{

    width:100%;

    box-sizing:border-box;

    margin-top:8px;

    border:1px solid #ddd;

    border-radius:8px;

    padding:9px 10px;

    font-size:13px;

    outline:none;

}

.checkoutForm textarea{

    height:75px;

    resize:none;

}

/* Summary */

.checkoutSummaryCard{

    margin-top:14px;

    background:#fff;

    border-radius:12px;

    padding:12px;

    box-shadow:0 1px 5px rgba(0,0,0,.05);

}

.checkoutSummaryCard h3{

    margin:0 0 10px;

    font-size:15px;

}

.checkoutSummaryRow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:7px 0;

    font-size:13px;

}

.checkoutFinalTotal{

    font-size:15px;

    font-weight:700;

}

/* Reward */

#cartRewardBox{

    margin-top:14px;

}

/* Sticky Bottom */

.checkoutStickyBar{

    position:relative;

    left:auto;
    right:auto;
    bottom:auto;

    margin-top:18px;

    border-radius:12px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.checkoutPayInfo{

    display:flex;

    flex-direction:column;

}

.checkoutPayInfo div{

    font-size:11px;

    color:#666;

}

.checkoutPayInfo strong{

    font-size:17px;

    color:#111;

}

.checkoutPlaceBtn{

    min-width:145px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#00994d;

    color:#fff;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

}

/* Shipping */

.useShippingWrap{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:8px;

    font-size:12px;

}






/*==============================
Checkout Sections
==============================*/

.checkoutSection{

background:#fff;

border-radius:12px;

margin-top:12px;

overflow:hidden;

box-shadow:0 1px 4px rgba(0,0,0,.05);

}

.checkoutSectionHeader{

display:flex;

justify-content:space-between;

align-items:center;

padding:10px 12px;

font-size:13px;

font-weight:600;

background:#fafafa;

border-bottom:1px solid #eee;

}

.checkoutSectionHeader div:last-child{

font-size:11px;

font-weight:500;

color:#777;

}

.checkoutSection .checkoutProducts{

padding:8px;

}

.checkoutSection .checkoutForm{

margin:0;

box-shadow:none;

border-radius:0;

}

.checkoutSection .checkoutSummaryCard{

margin:0;

box-shadow:none;

border-radius:0;

}



/* Delivery */

.deliveryCard{

padding:12px;

}

.deliveryRow{

display:flex;

gap:10px;

align-items:center;

margin-bottom:12px;

}

.deliveryRow i{

width:34px;

height:34px;

border-radius:8px;

background:#f4f4f4;

display:flex;

align-items:center;

justify-content:center;

font-size:14px;

}

.deliveryRow strong{

display:block;

font-size:13px;

}

.deliveryRow span{

font-size:11px;

color:#666;

}

/* Notes */

.checkoutNotes{

padding:12px;

}

.checkoutNotes textarea{

width:100%;

height:70px;

resize:none;

padding:10px;

font-size:13px;

border-radius:8px;

border:1px solid #ddd;

box-sizing:border-box;

}

/* Protection */

.protectionBox{

padding:12px;

display:grid;

gap:8px;

font-size:13px;

}



/*==============================
Premium Reward Card
==============================*/

.checkoutRewardCard{

padding:14px;

}

.rewardTopArea{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:12px;

}

.rewardTitle{

font-size:15px;

font-weight:700;

}

.rewardSub{

font-size:11px;

color:#777;

margin-top:3px;

}

.rewardCoin{

width:42px;

height:42px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

background:#fff6d6;

}

#checkoutRewardBox{

background:linear-gradient(
135deg,
#fff8dc,
#ffffff
);

border:1px solid #f3d56b;

border-radius:12px;

padding:10px;

}

#checkoutRewardBox
.rewardVoucherLeft{

font-size:12px;

margin-bottom:10px;

}

#checkoutRewardBox
.rewardVoucherRight{

width:100%;

padding:10px;

border-radius:8px;

font-size:13px;

font-weight:600;

text-align:center;

cursor:pointer;

}




/*==============================
CHECKOUT SHIPPING CARD
==============================*/

.checkoutShippingCard{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:16px;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
}

.checkoutShipTop{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
    padding-bottom:12px;
    border-bottom:1px solid #ececec;
}

.checkoutShipTitle{
    font-size:18px;
    font-weight:700;
    color:#111827;
}

.checkoutShipSubtitle{
    font-size:13px;
    color:#6b7280;
    margin-top:3px;
}

.checkoutEditShipBtn{
    background:#16a34a;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:8px 18px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.checkoutEditShipBtn:hover{
    background:#15803d;
}

.checkoutShipBody{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.checkoutShipBody div{
    background:#f9fafb;
    border:1px solid #ececec;
    border-radius:10px;
    padding:10px 12px;
    font-size:14px;
    color:#374151;
    line-height:1.5;
    word-break:break-word;
}

.checkoutShipBody b{
    color:#111827;
    font-size:15px;
}

.checkoutUseRow{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid #ececec;
}

.checkoutUseRow label{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:600;
    color:#111827;
    cursor:pointer;
}

.checkoutUseRow input[type="checkbox"]{
    width:20px;
    height:20px;
    accent-color:#16a34a;
}

.checkoutAddressLoading{
    text-align:center;
    padding:30px;
    color:#6b7280;
    font-size:15px;
}

.noAddress{
    text-align:center;
    padding:25px;
}

.checkoutAddAddressBtn{
    margin-top:15px;
    background:#2563eb;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:12px 20px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}

.checkoutAddAddressBtn:hover{
    background:#1d4ed8;
}



.checkoutAddressMini{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:12px;
}

.shipUser{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}

.shipUser b{
    font-size:15px;
}

.shipUser span{
    font-size:13px;
    color:#666;
}

.shipLocation{
    font-size:13px;
    color:#555;
    line-height:1.5;
}