/* ==========================================
   PÁGINA: CARRITO DE COMPRA + CHECKOUT
   ========================================== */
   
/* ==========================================
   GLOBAL
   ========================================== */
.box-woocommerce, form.checkout.woocommerce-checkout {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.tabla-woocommerce, .box-col1 {
    flex: 1;
    max-width: 54%!important;
}

.cart-collaterals, .box-col2 {
    align-self: flex-start;
    box-shadow: 0px 0px 15px 0px rgba(116.00000000000001, 129, 137, 0.32);
    border-radius: 20px;
    padding: 20px;
    width: 40%!important;
}

.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
    width: 100%;
}

body.e-wc-message-notice .woocommerce-message, body.e-wc-message-notice .wc-block-components-notice-banner.is-success,
.e-woocommerce-notices-wrapper .woocommerce-error, .e-woocommerce-notices-wrapper .woocommerce-info, .e-woocommerce-notices-wrapper .woocommerce-message {
    margin: 0 0 20px!important;
}

.woocommerce form .form-row {
    padding: 3px 0;
}

/* Título */
table, input, select, textarea, select, span.select2-selection.select2-selection--single {
    color: var(--gris);
    font-family: var(--fuente-principal)!important;
}

h1, .box-woocommerce h2 {
    color: var(--primario)!important;
    font-size: var( --e-global-typography-1bc8e3d-font-size )!important;
    font-weight: 500!important;
    padding-bottom: 20px;
}

.woocommerce form .form-row.woocommerce-invalid label {
    color: var(--alerta);
}

/* Formulario */
label {
    font-size: var(--e-global-typography-996197c-font-size)!important;
    text-align: left;
}

:where(.woocommerce) .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
}

input, select, textarea, select, span.select2-selection.select2-selection--single {
    border: 1px solid var(--gris-claro)!important;
    border-radius: 10px!important; 
    color: var(--gris)!important;
    font-size: var( --e-global-typography-text-font-size )!important;
    text-align: left;
}

input, select, textarea, select, .select2-selection span {
    padding: 14px 16px!important;
}

input:focus, select:focus, textarea:focus, select:focus, .select2-selection span:focus {
    border-color: var(--gris-claro)!important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1)!important;
}

.woocommerce-checkout span.select2-selection__placeholder {
    padding: 0!important;
}

span.select2-dropdown.select2-dropdown--below {
    top: -5px!important;
}

.select2-dropdown, .select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--gris-claro)!important;
    color: var(--gris)!important;
}

.woocommerce form .form-row select {
    appearance: none!important;
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    background-image: url('/wp-content/themes/ceccato-child/assets/img/chevron.svg')!important;
    background-repeat: no-repeat!important;
    background-position: right 16px center!important;
    background-size: 16px!important;
    padding-right: 16px!important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    padding: 0!important;
    right: 16px;
    top: 10px!important;
    width: 16px!important;
}

#ceccato-new-shipping-state, #ceccato-new-shipping-city {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url('/wp-content/themes/ceccato-child/assets/img/chevron.svg')!important;
    background-repeat: no-repeat!important;
    background-position: right 16px center!important;
    background-size: 16px 16px!important;
    display: block!important;
    height: auto!important;
    left: auto!important;
    position: relative!important;
    top: auto!important;
    transform: none!important;
    width: 100%!important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none!important;
    background: url('/wp-content/themes/ceccato-child/assets/img/chevron.svg') no-repeat center!important;
    background-size: contain!important;
    width: 16px!important;
    height: 16px!important;
    display: block!important;
    position: absolute!important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%)!important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--celeste) !important;
}

p#billing_country_field, p#shipping_country_field {
    display: none;
}

label.checkbox, label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox, label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme {
    align-items: center;
    display: flex!important;
    gap: 5px;
}

.woocommerce-shipping-fields label.checkbox {
    margin: 10px 0 20px;
}

/* ==========================================
   TABLA
   ========================================== */
.woocommerce table.shop_table td, .woocommerce table.shop_table, tr th, tr td {
    border-width: 0!important;
}

.woocommerce-cart-form thead {
    display: none!important;
}

tr th, tr td, tr:hover>td, tr:hover>th {
    background-color: transparent!important;
}

.woocommerce table.shop_table td, .woocommerce table.shop_table th {
    border-bottom: 1px solid var(--gris-claro)!important;
}

.woocommerce tr.order-total th, .woocommerce tr.order-total td {
    font-size: var(--e-global-typography-ba4bbcd-font-size)!important;
    border-bottom-width: 0!important;
}

/* Miniatura*/
td.product-thumbnail {
    padding-right: 0!important;
    width: 120px!important;
}

table.cart img {
    border-radius: 10px!important;
    width: 100px!important;
}

/* Nombre */
td.product-name a {
    color: var(--gris)!important;
    font-size: var(--e-global-typography-text-font-size)!important;
    font-weight: 500!important;
    transition: all .4s;
    text-transform: none!important;
}

td.product-name a:hover {
    color: var(--celeste)!important;
}

.producto-valor, td.coupon-compra div {
    color: var(--gris)!important;
    display: flex;
    flex-direction: column;
    font-size: var(--e-global-typography-996197c-font-size)!important;
}

table .woocommerce-Price-amount.amount, table span.woocommerce-Price-currencySymbol {
    color: var(--primario)!important;
    font-size: var(--e-global-typography-ba4bbcd-font-size) !important;
    font-weight: 600!important;
}

/* Cantidad */
.input-text.qty {
    text-align: center!important;
}

/* Cupón */
.coupon {
    border-top: 1px solid var(--gris-claro);
    margin-top: 20px;
    padding: 20px 0;
    width: 100%;
}

input#coupon_code {
    height: 53px;
}

.coupon input#coupon_code {
    width: 70%!important;
}

button.button {
    background-color: var(--primario)!important;
    border-width: 0!important;
    border-radius: 50px!important;
    color: var(--blanco)!important;
    padding: 20px 32px!important;
}

button.button:hover {
    color: var(--blanco)!important;
}

/* Seguir comprando */
button.btn-seguir-comprando {
    background-color: var(--blanco)!important;
    border-color: var(--primario)!important;
    border-radius: 50px!important;
    border-width: 1px!important;
    color: var(--primario)!important;
    margin-top: 20px;
    padding: 20px 32px!important;
}

button.btn-seguir-comprando.mobile {
    display: none;
}

button.btn-seguir-comprando:hover {
    border-color: var(--celeste)!important;
    color: var(--blanco)!important;
}

button.btn-seguir-comprando:hover path {
    transition: all .4s;
}

button.btn-seguir-comprando:hover path {
    fill: var(--blanco);
}

/* Botones */
a.checkout-button, a.button.wc-backward {
    background-color: var(--primario)!important;
    border-radius: 50px!important;
    color: var(--blanco)!important;
    font-size: var(--e-global-typography-accent-font-size)!important;
    margin-bottom: 0!important;
}

button.btn-seguir-comprando, a.button, button.button, a.button.wc-backward {
    display: inline-block;
    padding: 10px 20px;
    position: relative;
    overflow: hidden!important;
    transition: color 0.4s ease;
    z-index: 0;
}

button.btn-seguir-comprando:before, a.button:before, button.button:before {
    background-color: var(--celeste);
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    position: absolute;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    z-index: -1;
}

button.btn-seguir-comprando:hover:before, a.button:hover:before, button.button:hover:before {
    transform: translateX(0);
}

a.woocommerce-remove-coupon, button#ceccato-toggle-new-address {
    background-color: transparent!important;
    border-width: 0!important;
    color: var(--gris)!important;
    font-size: 12px!important;
    font-weight: 500!important;
    margin-bottom: 8px;
    text-decoration: underline!important;
    text-transform: none!important;
    transition: all .4s;
}

a.woocommerce-remove-coupon:hover, button#ceccato-toggle-new-address:hover {
    color: var(--celeste)!important;
}

button#ceccato-toggle-new-address {
    padding: 0!important;
}

.woocommerce a.remove {
    transition: all .4s;
}
.woocommerce a.remove:hover {
    background: transparent!important;
    opacity: 0.6;
}

/* Botón transparente */
a.shipping-calculator-button, a.showcoupon, a.woocommerce-privacy-policy-link, p a, .woocommerce-info a {
    color: var(--gris);
    font-weight: 500!important;
    font-size: var(--e-global-typography-text-font-size)!important;
    transition: all .4s;
    text-decoration: underline!important;
    text-transform: none!important;
}

a.shipping-calculator-button:hover, a.showcoupon:hover, a.woocommerce-privacy-policy-link:hover {
    color: var(--celeste)!important;
}

/* ==========================================
   RESUMEN DE COMPRA
   ========================================== */
.cart-collaterals table td {
    text-align: right;
}

td.coupon-compra {
    border-bottom: 1px solid var(--gris-claro)!important;
    border-top: 1px solid var(--gris-claro)!important;
    display: flex;
    justify-content: end;
}

td.coupon-compra div {
    display: flex;
    flex-direction: column;
}

td.coupon-compra span.woocommerce-Price-amount.amount:before {
    content: "-";
}

span.woocommerce-terms-and-conditions-checkbox-text {
    font-size: var(--e-global-typography-text-font-size);
}

label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox {
    margin-top: 10px;
}

input#terms {
    margin-right: 0;
}

/* Despacho */
.shipping-calculator-button::after {
    display: none;
}

section#shipping-calculator-form button.button {
    padding: 10px 15px 8px!important;
}

/* Pagar */
.wc-proceed-to-checkout {
    padding-bottom: 0!important;
}

/* Volver tienda */
p.return-to-shop {
    padding-top: 40px;
    text-align: center;
}

 a.button.wc-backward {
    padding: 20px 32px!important;
}

/* ==========================================
   CHECKOUT
   ========================================== */
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
}

.form-row {
    width: 100%;
}

.woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last {
    width: 48%!important;
}

/* Ordenar */
p#billing_first_name_field, p#billing_last_name_field, p#billing_rut_field, p#ceccato_boleta_field,
p#shipping_first_name_field, p#shipping_last_name_field {
    order: 1;
}

p#billing_state_field, p#billing_city_field,
p#shipping_state_field {
    order: 2;
}

p#shipping_city_field, p#billing_address_1_field, p#billing_address_2_field {
    order: 3;
}

p#shipping_address_1_field , p#shipping_address_2_field {
    order: 4;
}

p#billing_phone_field, p#billing_email_field {
    order: 5;
}

form#woocommerce-checkout-form-coupon .form-row-first {
    width: 54%;
}

form#woocommerce-checkout-form-coupon p.form-row.form-row-last {
    width: 40%;
}

form#woocommerce-checkout-form-coupon {
    margin-top: 0;
}

.checkout_coupon button {
    float: right;
    width: 100%;
}

.ceccato-checkout-address-selector, form#woocommerce-checkout-form-coupon, form.woocommerce-form.woocommerce-form-login.login {
    border: 1px solid var(--gris-claro);
    border-radius: 10px;
    color: var(--gris)!important;
    padding: 20px;
}

.ceccato-checkout-address-selector {
    background: var(--blanco-celeste);
    margin-top: 20px;
    max-width: 54%;
}

#ceccato-new-address-collapse p {
    margin-bottom: 10px;
}

input#createaccount {
    margin-right: 0;
}

.woocommerce-billing-fields h3 {
    display: none!important;
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
    background: var(--blanco-celeste);
    border-radius: 10px;
}

#add_payment_method #payment ul.payment_methods, .woocommerce-cart #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--gris-claro);
    padding: 20px;
}

ul.wc_payment_methods.payment_methods.methods img {
    max-width: 100px;
}

button#place_order {
    margin-top: 20px;
    width: 100%;
}

#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
    background-color: var(--blanco-gris);
    color: var(--gris);
}

#add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before {
    border-color: var(--blanco-gris);
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
    
}

.woocommerce-checkout-review-order-table th.product-total, .woocommerce-checkout-review-order-table td:last-child {
    text-align: right;
}

form.woocommerce-form.woocommerce-form-login.login {
    margin-top: 0;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
/* Desk */
@media (min-width: 1024px) {
    /* Global */
    .cart-collaterals, .box-col2 {
        height: fit-content;
        position: sticky;
        top: 140px;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    /* Global */
    .box-woocommerce, form.checkout.woocommerce-checkout {
        flex-direction: column;
        gap: 30px;
    }

    .tabla-woocommerce, .cart-collaterals, .box-col1, .box-col2 {
        max-width: 100%!important;
        width: 100%!important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    /* Carrito */
    .woocommerce table.shop_table_responsive tr, .woocommerce-page table.shop_table_responsive tr {
        display: flex;
    }
    
    form.woocommerce-cart-form tr td, form.woocommerce-cart-form tr td {
        align-items: flex-start;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        min-height: 100px;
        text-align: left!important;
    }
    
    .woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before {
        content: "";
    }
    
    td.product-thumbnail {
        display: block!important;
        width: 18%!important;
    }
    
    table.cart img {
        width: 100%!important;
    }
    
    td.product-name {
        width: 30%!important;
    }

    td.product-quantity {
        width: 18%!important;
    }
    
    td.product-subtotal {
        align-items: end!important;
        width: 23%!important;
    }
    
    td.product-remove {
        align-items: end!important;
        width: 12%;
    }
    
    .quantity .qty {
        height: 40px!important;
        min-height: 40px!important;
        min-width: 40px!important;
        width: 40px!important;
    }
    
    .coupon input#coupon_code {
        width: 50%!important;
    }
    
    button.btn-seguir-comprando.desk {
        display: none;
    }
    
    button.btn-seguir-comprando.mobile {
        display: flex;
        margin: 0 auto 0;
        padding: 14px 24px!important;
    }
    
    /* Total */
    .cart_totals tr {
        display: flex!important;
    }
    
    .cart_totals table.shop_table_responsive tbody th, .cart_totals table.shop_table_responsive tbody th {
        display: flex;
        width: 30%!important;
    }
    
    .cart_totals table.shop_table_responsive tbody td, .cart_totals table.shop_table_responsive tbody td {
        width: 70%!important;
    }
    
    td.actions {
        width: 100%!important;
    }
    
    /* Checkout */
    .woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last {
        width: 100%!important;
    }

    .login p.form-row {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    
    .ceccato-checkout-address-selector {
        max-width: 100%;
    }
    
    div#order_review table.shop_table td, div#order_review table.shop_table th {
        padding: 8px;
        width: 50%;
    }
}