/*****
cart: 
    *checkout main
    *checkout details
    *checkout steps
    *checkout products
    *checkout payemnts
    *checkout totals
*****/  

 /* 
---------------------------------
-----     checkout Main     -----
---------------------------------
 */  


.checkout {

    height: 100%;
    background: var(--background-blue);
    padding: 4rem 0;
} 

.mod_shop_checkout_aside {

    width: 33.33%;
}

.mod_checkout_step_heading {
    display: flex;
    font-size: 1.1rem;
    font-weight: bold;
}

.mod_checkout_title{
    font-size: 1.1rem;
    font-weight: bold; 
}
.mod_checkout_fields {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
.mod_checkout_field_coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.mod_checkout_field_coupon_input {
    display: flex;
    flex-direction: column;
    width: unset;
}

input[type="checkbox"]:checked,input[type="radio"]:checked {
    background: #000;
}

.mod_checkout_step_heading_title {

    display: flex;
    align-items: center;
    
    width: fit-content;
    padding-left: 1rem;
    white-space: nowrap;
}

.mod_shop_checkout_main{

    width: 66.66%;
}

.mod_checkout_form {

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.5rem;

    width: 80%;
    padding: 1.5rem 0;
}

.mod_checkout_step_incative{
    
    opacity: 0.5;
}


.mod_shop_checkout_wrapper {

    display: flex;
    gap: 2.5rem;
}

@media only screen and (max-width: 768px) {

    .mod_shop_checkout_wrapper {

        flex-direction: column;
    }

   .mod_shop_checkout_aside{

        width: 100%;
   }

   .mod_shop_checkout_main{

        width: 100%;
    }

    .mod_checkout_form {
    
        width: 100%;
    }

    .mod_checkout_step_heading{

        font-size: .7rem;
    }
}



 /* 
---------------------------------
-----    checkout customer   -----
---------------------------------
 */  


.checkout_customer_step_edit{

    width: 1rem;
}

.checkout_customer_step_heading {

    display: flex;
    gap: 1rem;
}

.checkout_step_fill_content {

    display: flex;
    gap: .5rem;
    align-items: center;

    width: 100%;
    font-weight: normal;

    font-size: .9rem;
    color: rgba(0, 0, 0, 0.5);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.checkout_step_fill{

    display: flex;
    width: 100%;
    min-width: 0;

}

.checkout_step_fill a{

   cursor: pointer;
}

.mod_checkout_terms_link{

    cursor: pointer;
    font-size: .8rem;
}

.mod_shop_checkout{
    
    background: var(--background-blue);
    padding: 4rem 0;
    min-height: calc(100dvh - 17.5rem);
}

.com_checkout_terms_popup_wrapper{

    padding: 2rem !important;
    max-width: 30rem !important;
}

.com_checkout_terms_popup_content{

    max-height: 80vh;
    overflow: auto;
    margin: 1rem;
}


@media only screen and (max-width: 768px) {

    .checkout_step_fill_content{

        font-size: .7rem;
        max-width: 11rem;
        margin-left: 1rem;
        overflow: auto;
    }

    .checkout_step_fill_content::-webkit-scrollbar{
        display: none;
    }

    .mod_shop_checkout{

        height: auto;
        padding: 1rem 0;
    }

}



 /* 
---------------------------------
-----    checkout steps     -----
---------------------------------
 */  

.mod_checkout_step_content {

    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.mod_shop_checkout_step {

    height: auto;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    box-sizing: border-box;
    border-radius: var(--card-border-l);
    border: 1px solid var(--border-color);
    background: #fff;
    box-shadow: 0px 3px 6px #00000029;
}

.checkout_step_close {

    height: 4.5rem;
    overflow: hidden;
    min-height: unset;
}


.mod_checkout_checkbox {

    width: 100%;
    display: flex;
    gap: 0.25rem;
    margin-bottom: .5rem;
}

.mod_checkout_checkbox input[type="checkbox"], input[type="radio"] {

    width: .75rem;
    height: .75rem;
    padding: 0;
    
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    border: 1px solid #000;
    cursor: pointer;
    background: none;

    border-radius: 50%;
}

.mod_checkout_checkbox input[type="checkbox"]:checked,.mod_checkout_checkbox input[type="radio"]:checked {
    background: #000;
}
.mod_checkout_checkbox a{

    text-decoration: underline;
    color: #000;
}

.checkout_step_shipping .checkout_details_fields{
    
    margin-top: 1.5rem;
}


.mod_checkout_field {
    display: flex;
    flex-direction: column;
    width: calc( var( --field-width, 50%) - 1rem);
}

.mod_checkout_field textarea{

    box-sizing: border-box;
}

.mod_checkout_field_error{
    padding: .2rem 1rem;
    font-size: 0.8rem;
    color: red;
}



.mod_checkout_checkbox label {
    font-size: 0.8rem;
}


.mod_checkout_form_shipping_label{

    width: calc(100% - 2.75rem) !important;
}

.mod_checkout_form_shipping{

    flex-direction: row;
    align-items: center;
}

.mod_checkout_fields_shipping{

    margin-top: 1rem;
}


.mod_checkout_form_btn{
    margin-top: 1.5rem;
}

@media only screen and (max-width: 768px) {

    .mod_checkout_field{
        width: calc( var( --field-width, 100%) - 1rem);
    }

    .mod_checkout_form_shipping_label{

        width: 82%;
        font-size: .9rem;
    }
}


 /* 
---------------------------------
-----    checkout product   -----
---------------------------------
 */  

.mod_checkout_aside_products{

   
    position: relative;

    padding: 1rem 2rem;
    margin-bottom: 1rem;
    border-radius: var(--card-border-l);
    background: #fff;
    box-shadow: 0px 3px 6px #00000029;
}

.cart_main_side_checkout_product {

    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.mod_checkout_products_haed_edit{

    cursor: pointer;
}

.mod_checkout_product:not(:last-child){

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

.mod_checkout_product {

    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: .5rem;

    padding: 1rem 0;
}

.mod_checkout_products {
    
    max-height: 27.5rem;
    overflow: auto;
}

.mod_checkout_product_sku{

    width: fit-content;
}

.mod_checkout_product_content{

    width: 100%;
}

.mod_checkout_product_assambly {

    display: flex;
    gap: 0.25rem;
    
    width: 100%;
}

.mod_checkout_products_haed {
    
    display: flex;
    justify-content: space-between;

    padding: .5rem 0;

    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
}

.mod_checkout_product_edit {

    width: 1rem;
}

.mod_checkout_product_content {

    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
}

.mod_checkout_product_content p{

    font-size: 0.9rem;
    font-weight: normal;
}

.mod_checkout_product_content h3{

    font-size: 1rem;
}


.checkout_side_product_content {

    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    width: 100%;
}
.checkout_side_product_content_title{

    font-size: 0.9rem;
    font-weight: bold;
}
.checkout_side_product_content_desc{
    
    font-size: 0.8rem;
    max-width: 100%;
}

.checkout_side_product_content_amount{
    
    font-size: 0.8rem;
    max-width: 8rem;
}

.cart_main_side_checkout_products {

    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.cart_main_side_checkout_products_wrapper {
    max-height: 25rem;
    overflow: scroll;
}

.mod_checkout_product_linked{

    margin-right: 0;
    position: unset;
}
.mod_checkout_product_linked .mod_shop_cart_product_details_linked_items{

    bottom: -10rem;
    min-width: 17rem;
    max-width: 17rem;
    top: unset !important;
    right: 1.8rem;
}
.mod_checkout_product_linked .toggle_input:checked ~ .toggle_input_item{

    display: block;
    padding: 1.4rem;
    border: 1px solid var(--border-color);
    border-radius: var(--card-border-l);
    background: #fff;
    box-shadow: 0px 3px 6px #00000029;
    margin-left: 1rem;
}
.mod_checkout_product_linked .toggle_input_item{

    display: none;
}




 /* 
-----------------------------------------
-----    checkout shipping method   -----
-----------------------------------------
 */  

#shipping_method_delivery:checked ~ #shipping_address {
    display: flex !important;
}
#shipping_method_pickup:checked ~ #shipping_address {
    display: none !important;
}


 /* 
-----------------------------------------
-----    checkout payment method   -----
-----------------------------------------
 */  
.checkout_step_payment_heading {
    width: 100%;
    font-weight: bold;
    font-size: .9rem;
}

/*.mod_checkout_form_payment_methods{
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.mod_checkout_form_payment_method{
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}*/


/* 
---------------------------------
-----    checkout totals   -----
---------------------------------
*/  


 .mod_shop_checkout_summary_wrapper {

    padding: 1rem 2rem;
    margin-bottom: 1rem;
    border-radius: var(--card-border-l);
    background: #fff;
    box-shadow: 0px 3px 6px #00000029;
}

.mod_shop_checkout_summary_item{

    display: flex;
    justify-content: space-between;
}

.mod_shop_checkout_summary_item:not(:first-child){
    
    margin-top: 1rem;
}

.mod_shop_checkout_summary_total{

    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--second-color);
    font-weight: bold;
}


.mod_shop_cart_aside_summary_price{
    direction: ltr;
}


.mod_shop_checkout_summary_item p{

    font-size: .8rem;
}

.cart_main_totals_checkout {

    padding: 1.5rem;
}



/* 
---------------------------------
-----    checkout otp   -----
---------------------------------
*/  

.com_popup_otp_main {

    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
}

.com_popup_otp_button{

    font-size: .9rem;
    font-weight: normal;
}

.com_popup_otp_heading{

    text-align: center;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.com_popup_otp_input{

    width: 100%;
    box-sizing: border-box;
}

.com_popup_otp_main_resend{

    display: flex;
    width: 100%;
    justify-content: center;
    gap: .5rem;
}

.com_popup_otp_main_resend button{

    width: fit-content;

    padding: 0;

    background: none;
    border: none;
    
    text-decoration: underline;
    font-size: .9rem;
    font-weight: normal;
}

.com_popup_otp_main_resend span{

    font-size: .9rem;
}

@media only screen and (max-width: 768px) {

    .com_popup_otp_main {

        padding-bottom: unset;
    }
}


/* 
---------------------------------
-----    checkout coupon    -----
---------------------------------
*/  

.mod_shop_checkout_coupon{
    width: 100%;
}

.mod_shop_checkout_coupon_remove{
    background: transparent;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

/* 
---------------------------------
-----    checkout business  -----
---------------------------------
*/  

#checkout_business:checked ~ .mod_checkout_business_inputs{
    
    display: flex;
    width: 100%;
    gap: 1rem;

    margin-top: .5rem;
}

.mod_checkout_business_inputs{

    display: none;
}

.mod_checkout_checkbox_business {
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}