/** Quantity **/

.product .quantity {
    margin: 0;

}

.input-quantity-group {
    clear: both;
    position: relative;
    margin-top: 5px !important;
    min-width: 200px;
}

.input-quantity-group input[type="button"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-color: #188803;
    -webkit-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    color: #fff;
    border: 0 none;
}

.input-quantity-group .button-minus, .input-quantity-group .button-plus {
    position: relative;
    font-weight: bold;
    padding: 0;
    height: 30px;
    height: 1.875rem;
    width: 35px;
    width: 2.1875rem;
}

.input-quantity-group .quantity-field {
    position: relative;
    font-family: "UniSansRegular", sans-serif;
    text-align: center;
    resize: vertical;
    height: 30px;
    height: 1.875rem;
    max-width: 30px;
    max-width: 1.875rem;
    padding: 6px 0;
    padding: 0.375rem 0;
}

/** end Quantity **/


/** user menu **/
.menu-mis-productos-comprados::before, .woocommerce-MyAccount-navigation-link--mis-productos-comprados a::before {
    content: "\e012";
    font-family: 'ETmodules';
    float: left;
    font-size: 24px;
    margin-right: 10px;
}

.menu-pedidos-en-curso::before, .woocommerce-MyAccount-navigation-link--orders a::before {
    content: "\e013" !important;
    font-family: 'ETmodules';
    float: left;
    font-size: 24px;
    margin-right: 10px;
}

.menu-cuenta::before {
    content: "\e107" !important;
    font-family: 'ETmodules';
    float: left;
    font-size: 24px;
    margin-right: 10px;
}

.menu-carrito::before, .woocommerce-MyAccount-navigation-link--carrito a::before {
    content: "\e015" !important;
    font-family: 'ETmodules';
    float: left;
    font-size: 24px;
    margin-right: 10px;
}


/** end user menu **/


/** Checkout **/
table.woocommerce-checkout-review-order-table img {
    width: 49px;
    height: 46px;
    padding: 2px;
    border: 1px solid #e0e0e0;
    background: #f3f3f3;
    border-radius: 4px;
}

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

.woocommerce-checkout .woocommerce-billing-fields label, .woocommerce-checkout .woocommerce-additional-fields label {
    color: #188803;
}

.woocommerce-info.sad {
    background: #ffffcc !important;
    color: #000000 !important;
    text-align: left;
}

.woocommerce-info.happy {
    text-align: left;
}

.precio-verde {
    color: #188803;
}

.oferta-tabla ul li {
    font-size: 16px;
    font-weight: bold;
    color: #188803;
}

.linea-articulo-regalo .woocommerce-Price-amount{
    color: red;
}

/* ------------------------------------------- */
/* ESTILOS BÁSICOS DEL POPUP (Desktop) */
/* ------------------------------------------- */
#mi-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10100;
}

#mi-popup {
    width: 60%;
    max-width: 800px; /* Limita el tamaño en pantallas muy grandes */
    z-index: 10200;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: #fff;
    border: 1px solid #ccc;
"
}

#mi-popup .contenedor-oferta-checkout .ixoprice {
    color: red;
}

#mi-popup H2 {
    text-align: center;
    font-weight: bold;
}

.popup-close-btn {
    /* Posicionamiento y capa */
    position: absolute;
    top: -15px; /* Sale de la caja */
    right: -15px; /* Sale de la caja */
    z-index: 10011;

    /* Visibilidad y Estilo */
    background: #e00; /* Fondo rojo fuerte */
    color: white; /* Texto blanco */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s; /* Transición para el hover */

    /* Diseño del Círculo */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px; /* Centrado vertical */
    text-align: center;
    border: 2px solid #fff; /* Borde blanco grueso */
    line-height: 18px;
}

.popup-close-btn:hover {
    background: #c00; /* Se oscurece al pasar el ratón */
    transform: scale(1.1); /* Ligeramente más grande al pasar el ratón */
}

@media (max-width: 767px) {
    #mi-popup {
        width: 90% !important;
        top: 50% !important;
        padding: 15px !important;
    }
    #mi-popup .texto-presentacion{
        font-size: 13px;
        line-height: 18px;
    }

    #mi-popup .ixo-custom-loop-product {

    }

    /* El contenedor UL/swiper-wrapper */
    .contenedor-oferta-checkout.swiper-wrapper {
        display: flex; /* Asegura el layout flex de swiper */
    }


    #mi-popup .ixo-custom-loop-product img {
        height: auto;
        max-width: 60%;
    }

}


/** Switch modo escaparate **/
.ixoswitch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.ixoswitch input {
    display: none;
}

.ixoslider {
    position: relative;
    width: 50px;
    height: 24px;
    background-color: #ccc;
    border-radius: 24px;
    transition: 0.4s;
    margin-right: 10px;
}

.ixoslider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

input:checked + .ixoslider {
    background-color: #188803;;
}

input:checked + .ixoslider::before {
    transform: translateX(26px);
}


/* Ocultar botón de comprar */
body.modo-escaparate form.cart {
    display: none !important;
}

/* Ocultar enlace "Ver carrito" en notificaciones */
body.modo-escaparate .dnwoo_mminicart_wrapper {
    display: none !important;
}

body.modo-escaparate .menu-carrito {
    display: none !important;
}

body.modo-escaparate .oferta-tabla, body.modo-escaparate .oferta-producto .tooltiptext {
    display: none !important;
}

/* Quitar el tachado de precio */
body.modo-escaparate .price span {
    text-decoration: none !important;
}

body.modo-escaparate .price span {
    font-weight: bold;
    color: #188803 !important; /* opcional: asegura color fuerte */
}














/* ------------------------------------------- */
/* ESTILOS PARA LAS FLECHAS DE NAVEGACIÓN (SWIPER) */
/* ------------------------------------------- */
.contenedor-oferta-swiper .swiper-button-prev,
.contenedor-oferta-swiper .swiper-button-next {
    /* Fondo circular */
    background-color: #188803; /* Color rojo similar al botón 'X' */
    color: white; /* Color de la flecha */
    border-radius: 50%;
    width: 35px; /* Un poco más grandes que el 'X' si es necesario */
    height: 35px;

    /* Centrado de la flecha */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Posicionamiento */
    position: absolute; /* Asegura que se posicionen correctamente */
    top: 50%; /* Centrado vertical */
    transform: translateY(-50%);

    /* Importante: Asegurar que sean cliqueables y estén encima de todo */
    z-index: 9999; /* Un z-index alto, igual o superior al popup */
    cursor: pointer;

    /* Eliminar el fondo SVG por defecto de Swiper */
    background-image: none !important;

    /* Transición para el efecto hover */
    transition: background-color 0.3s, transform 0.3s;
    display: none;
}

@media (max-width: 767px) {
    .contenedor-oferta-swiper .swiper-button-prev,
    .contenedor-oferta-swiper .swiper-button-next {
        display: flex;
        align-items: center; /* Centrado vertical */
        justify-content: center;
    }
}

/* Estilos específicos para la flecha de la izquierda */
.contenedor-oferta-swiper .swiper-button-prev {
    left: 10px; /* Separación del borde izquierdo */
}

/* Estilos específicos para la flecha de la derecha */
.contenedor-oferta-swiper .swiper-button-next {
    right: 10px; /* Separación del borde derecho */
}

/* Estilos al pasar el ratón (hover) */
.contenedor-oferta-swiper .swiper-button-prev:hover,
.contenedor-oferta-swiper .swiper-button-next:hover {
    background-color: #188803; /* Color más oscuro al pasar el ratón */
    transform: translateY(-50%) scale(1.1); /* Ligeramente más grande */
}

/* ------------------------------------------- */
/* Flechas internas (SVG/CSS) */
/* ------------------------------------------- */
/* Swiper usa pseudo-elementos para las flechas.
   Aquí las estilizamos para que se vean como una punta de flecha. */
.contenedor-oferta-swiper .swiper-button-prev::after,
.contenedor-oferta-swiper .swiper-button-next::after {
    font-family: swiper-icons; /* Fuente de iconos de Swiper */
    font-size: 16px; /* Tamaño del icono */
    color: white; /* Color del icono */
    line-height: 1; /* Asegura el centrado */
}

.contenedor-oferta-swiper .swiper-button-prev::after {
    content: 'prev'; /* Texto del icono (ajusta si quieres un > o <) */
}

.contenedor-oferta-swiper .swiper-button-next::after {
    content: 'next'; /* Texto del icono (ajusta si quieres un > o <) */
}