/*--------------------------------------------------------------
# WooCommerce Override Styles
# Target: [WooCommerce]
# Description: Estilos personalizados para sobrescribir el plugin WooCommerce.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.woocommerce {
    .button {
        color: var(--bs-white);
        font-size: 1rem;
        font-weight: bold;
        background: var(--bs-primary);
        padding: .575rem 1.5rem;
        border-radius: 50rem;
        transition: all .3s ease-in-out;

        &:hover,
        &:focus {
            background-color: color-mix(
                in srgb,
                var(--bs-primary),
                black 10%
            );
            border-color: color-mix(
                in srgb,
                var(--bs-primary),
                black 10%
            );
            box-shadow: 0 0.25rem 0.25rem 0.125rem rgba(var(--bs-primary-rgb), 0.1), 0 0.375rem 0.75rem -0.125rem rgba(var(--bs-primary-rgb), 0.4);
        }
    }

    /* Specific button styles for WooCommerce messages */
    .woocommerce-message .button {
        background: var(--bs-success);
        color: var(--bs-white);

        &:hover,
        &:focus {
            box-shadow: 0 0.25rem 0.25rem 0.125rem rgba(var(--bs-success-rgb), 0.1), 0 0.375rem 0.75rem -0.125rem rgba(var(--bs-success-rgb), 0.4);
        }
    }
    .woocommerce-error .button {
        background: var(--bs-danger);
        color: var(--bs-white);

        &:hover,
        &:focus {
            box-shadow: 0 0.25rem 0.25rem 0.125rem rgba(var(--bs-danger-rgb), 0.1), 0 0.375rem 0.75rem -0.125rem rgba(var(--bs-danger-rgb), 0.4);
        }
    }
    .woocommerce-info .button {
        background: var(--bs-info);
        color: var(--bs-white);

        &:hover,
        &:focus {
            box-shadow: 0 0.25rem 0.25rem 0.125rem rgba(var(--bs-info-rgb), 0.1), 0 0.375rem 0.75rem -0.125rem rgba(var(--bs-info-rgb), 0.4);
        }
    }
}

/*--------------------------------------------------------------
# Notices
--------------------------------------------------------------*/
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    font-size: 1rem;
    padding: 1rem;
    border-width: 1px;
    border-style: solid;
    border-radius: .5rem;
}

.woocommerce-message {
    color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), .1);
    border-color: rgba(var(--bs-success-rgb), .4);
}
.woocommerce-message a:not(.button) {
    color: color-mix(in srgb, var(--bs-success),black 20%);
}

.woocommerce-error {
    color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), .1);
    border-color: rgba(var(--bs-danger-rgb), .4);
}
.woocommerce-error a:not(.button) {
    color: color-mix(in srgb, var(--bs-danger),black 20%);
}

.woocommerce-info {
    color: var(--bs-info);
    background-color: rgba(var(--bs-info-rgb), .1);
    border-color: rgba(var(--bs-info-rgb), .4);
}
.woocommerce-info a:not(.button) {
    color: color-mix(in srgb, var(--bs-info),black 20%);
}

/*--------------------------------------------------------------
# Form Fields
--------------------------------------------------------------*/
.woocommerce :where(.input, input:not([type="submit"]), select, textarea, .select2-selection) {
  font-size: 1rem;
  line-height: 1.5;
  padding: .575rem 1.125rem;
  border-radius: .5rem;
  border-color: var(--bs-form-field-border-color);
}

form.cart .quantity, form.woocommerce-cart-form .quantity {
    border-radius: 50rem;
}
form.cart .quantity input, form.woocommerce-cart-form .quantity input {
    border-radius: 0;
}
form.cart .quantity .minus, form.woocommerce-cart-form .quantity .minus {
    border-right: none;
    border-radius: 50rem 0 0 50rem;
}
form.cart .quantity .plus, form.woocommerce-cart-form .quantity .plus {
    border-left: none;
    border-radius: 0 50rem 50rem 0;
}
:where(form.cart, form.woocommerce-cart-form) .quantity :where(.minus, .plus):hover {
    background: var(--bs-gray-300);
}

/*--------------------------------------------------------------
# Checkout
--------------------------------------------------------------*/
.woocommerce-checkout #customer_details > :where(.col-1, .col-2) {
    width: 100%!important;
}
.woocommerce-checkout .woocommerce-additional-fields h3 {
    font-size: var(--fs-5);
}
.woocommerce-checkout :where(.select2-selection) {
    height: unset!important;
    min-height: unset!important;
    padding: .575rem 1.125rem!important;
}
.woocommerce-checkout :where(.select2-selection__rendered) {
    font-size: 1rem!important;
    line-height: 1.5!important;
}

.woocommerce-checkout .woocommerce-checkout-review-order .button {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.825rem 1.75rem;
    border-radius: 50rem;
    transition: all .3s ease-in-out;
}
.woocommerce-checkout .woocommerce-checkout-review-order .button[type="submit"] {
    margin-top: var(--space-4);
}