/* -------------------------------------------------- Shopping Cart / Checkout Styles -------------------------------------------------- */

/* -----> Content: Styling for cart and payment checkout elements */



/* ---------------------------------------- Cart ---------------------------------------- */

/* ----- Navbar Cart Icon ----- */
.cartIconBin{
    display: flex;
    text-decoration: none;

    justify-content: center;
    align-items: center;
    
    margin: 0;
    margin-right: 20px;
    /* border: 1px solid green; */
}
.cartIconBin .itemCount{
    font-size: 12px;
    text-align: center;
    line-height: 20px;

    height: 20px;
    width: 20px;

    /* background-color: var(--secondary); */

    padding: 2px;

    /* ----- SECONDARY ----- */
    color: white;
    background-color: var(--tertiary);

    border: 1px solid var(--tertiary);
    border-radius: 50px;

    /* ----- BLACK ----- */
    /* color: white;
    background-color: black;

    border: 1px solid black;
    border-radius: 50px; */
}


/* -------------------- Cart Summary Page -------------------- */


/* --------------- Content Bins --------------- */

.cartAccountSectionBin{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    width: calc(45% - 40px); min-width: calc(45% - 40px); max-width: calc(45% - 40px);
    height: fit-content;

    margin: 0 20px;
    /* border: 1px solid red; */
}

/* ----- Title Bin ----- */
#cartSummaryTitleBin{

    justify-content: center;
    height: fit-content;

    padding: 50px 0;
    margin: 10px 0;

    /* background-color: var(--bg1); */
    /* border-top: 1px solid black; */
    /* border-bottom: 1px solid black; */

}


/* --------------- Cart Items List --------------- */

/* ---------- Unorder List Bin ---------- */
#cart_list{
    display: flex;
    flex-direction: column;

    width: 900px;
    height: fit-content;


    padding: 0;
    margin: 20px;


    /* border: 1px solid lightgray; */
}

#cart_list .cartListItem_Labels{
    display: flex;
    list-style: none;

    width: 900px;

    padding: 0;
    margin-bottom: 10px;

    /* border: 1px solid red; */
}
#cart_list .productLabel{
    display: inline-block;
    text-align: center;

    width: 300px;
}
#cart_list .renewalLabel{
    display: inline-block;
    text-align: center;

    width: 300px;
}
#cart_list .priceLabel{
    display: inline-block;
    text-align: center;

    width: 250px;
}

/* ---------- List Items ----- */
.cartListItem{
    display: flex;


    width: 100%;
    height: calc(100px - 10px);

    padding: 10px 0;
    margin-bottom: 30px;

    border: 1px solid lightgray;
    /* border: 1px solid var(--primary); */
    border-left: none; border-right: none;
}
.cartListItem:hover{
    background-color: #fcfcfc;
}

/* ----- Image Bin ----- */
.cartListItem .imgBin{
    display: flex;

    justify-content: center;
    align-items: center;

    
    max-width: 140px; min-width: 140px;
    height: calc(100% - 10px);
    padding: 5px;
    /* border: 1px solid green; */
}
.cartListItem .imgBin .cartSummaryImg{
    object-fit: contain;
    max-width: 140px;
    max-height: 150px;

    /* border: 1px solid red; */
}

.cartListItem .productBin{
    display: flex;

    justify-content: center;
    align-items: center;

    width: 300px;

    /* margin-left: 10px; */

    /* border-top: 1px solid red; */
}
.cartListItem .renewalBin{
    display: flex;

    justify-content: center;
    align-items: center;

    width: 300px;

    /* margin-left: 10px; */

    /* border-top: 1px solid red; */
}
.cartListItem .priceBin{
    display: flex;
    /* flex-direction: column; */

    justify-content: space-evenly;
    align-items: center;

    width: 250px;
}

.cartListItem .cartOptionsBin{
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    justify-content: space-evenly;


    min-width: 50px; max-width: 50px;
    height: 100%;

    /* border: 1px solid red; */
}

.selectQuantityWidget{
    display: flex;
    align-items: center;
}
.selectQuantityWidget .quantityLabel{
    font-size: 16px;

    height: fit-content;

    margin: 0 10px;
}
.updateCartMessage{
    /* display: inline-block; */

    width: 100px;
}


/* ---------- Special Widgets ---------- */

/* ----- Buttons ----- */
.cartQuantityBtn{

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    text-align: center;
    font-weight: 100px;
    line-height: 0;

    width: 30px; min-width: 30px;
    height: 30px; min-height: 30px;

    padding: 5px;
    margin: 0;

    background-color: white;
    border: 2px solid var(--primary);
    border-radius: 5px;

}
.cartQuantityBtn:hover{
    cursor: pointer;
    background-color: var(--primary_whisp);
}


.deleteCartItemBtn{

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    text-align: center;
    font-weight: 100px;
    line-height: 0;

    width: 30px; min-width: 30px;
    height: 30px; min-height: 30px;

    padding: 5px;
    margin: 0;

    /* background-color: white; */
    background-color: lightcoral;
    border: 2px solid red;
    border-radius: 5px;

    transition: 0.2s ease-in-out;

}
.deleteCartItemBtn:hover{
    cursor: pointer;
    background-color: red;
}




/* ---------------------------------------- Payment Checkout ---------------------------------------- */


/* ---------- Main Content Bins ---------- */



.paymentCheckoutContentBin{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    
    width: calc(70% - 40px); min-width: calc(70% - 40px); max-width: calc(70% - 40px);
    height: fit-content;

    margin: 0;
    margin-bottom: 20px;

    padding: 20px 0 40px;
    /* border: 1px solid red; */

    border-bottom: 1px solid gray;
}

#paymentForm{

    background-color: var(--tertiary_whisp);
    border: 1px solid lightgray;
}



