/* Yoummy Review Rewards — frontend v0.7.3
 * Alcance:
 * - Presentación y protección visual del producto regalo.
 * - Jerarquía visual del cupón en checkout.
 * Todo queda limitado a componentes WooCommerce/Elementor concretos.
 */

/* =========================================================
 * MINI-CARRITO LATERAL DE ELEMENTOR — PRODUCTO REGALO
 * ========================================================= */

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name .yoummy-rr-gift-label {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(101, 31, 140, 0.09);
    color: #651f8c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    vertical-align: middle;
}

/* En el side-cart ya existe "Regalo por tu reseña"; evitamos repetir
 * Recompensa / Producto gratis, que Elementor divide en columnas.
 */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name .yoummy-rr-gift-label ~ dl.variation {
    display: none !important;
}

.elementor-widget-woocommerce-menu-cart .yoummy-rr-free-price {
    display: inline-block;
    color: #651f8c;
    font-weight: 700;
    line-height: 1.25;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name {
    overflow-wrap: anywhere;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price {
    align-self: start;
}

/* El regalo no puede eliminarse de forma independiente en el mini-cart.
 * El cupón o el producto normal siguen conservando sus controles nativos.
 */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product.yoummy-rr-gift-row .elementor-menu-cart__product-remove,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product:has(.yoummy-rr-gift-label) .elementor-menu-cart__product-remove,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product.yoummy-rr-gift-row a.elementor_remove_from_cart_button,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product.yoummy-rr-gift-row a.remove_from_cart_button {
    display: none !important;
}

/* =========================================================
 * CARRITO DE BLOQUES DE WOOCOMMERCE — PRODUCTO REGALO
 * ========================================================= */

/* El JS marca únicamente la fila que contiene la metadata Recompensa. */
.wc-block-cart-items__row.yoummy-rr-gift-row .wc-block-cart-item__remove-link,
.wc-block-cart-items__row.yoummy-rr-gift-row .wc-block-cart-item__quantity {
    display: none !important;
}

/* La metadata del regalo se presenta como una pequeña insignia, sin tocar
 * la metadata de los productos normales.
 */
.wc-block-cart-items__row.yoummy-rr-gift-row .wc-block-components-product-details__recompensa,
.wc-block-cart-items__row.yoummy-rr-gift-row .wc-block-components-product-details__reward {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(101, 31, 140, 0.09);
    color: #651f8c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}


/* =========================================================
 * CARRITO DE BLOQUES — ACCESO A CUPONES MÁS VISIBLE
 * ========================================================= */

/*
 * v0.7.3: el selector ya no depende únicamente de body.woocommerce-cart.
 * WooCommerce Blocks puede renderizar el Cart Block en contextos donde esa
 * clase no gana la cascada del theme. El JS añade además una clase propia
 * después de cada render del bloque. Solo se modifica el botón/toggle; el
 * formulario desplegado y la lógica nativa de WooCommerce quedan intactos.
 */
.wp-block-woocommerce-cart .wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button,
.wc-block-cart .wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button,
.wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button.yoummy-rr-cart-coupon-toggle {
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    border: 1px solid #651f8c !important;
    border-radius: 10px !important;
    background: #651f8c !important;
    box-shadow: 0 4px 12px rgba(58, 20, 78, 0.12) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button:hover,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button:focus-visible,
.wc-block-cart .wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button:hover,
.wc-block-cart .wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button:focus-visible,
.wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button.yoummy-rr-cart-coupon-toggle:hover,
.wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button.yoummy-rr-cart-coupon-toggle:focus-visible {
    border-color: #531773 !important;
    background: #531773 !important;
    box-shadow: 0 6px 16px rgba(58, 20, 78, 0.18) !important;
    color: #ffffff !important;
    outline: none !important;
}

.wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button.yoummy-rr-cart-coupon-toggle:active {
    transform: translateY(1px) !important;
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button svg,
.wc-block-cart .wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button svg,
.wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button.yoummy-rr-cart-coupon-toggle svg {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    fill: currentColor !important;
    color: #ffffff !important;
}

/* =========================================================
 * CHECKOUT — BLOQUE DE CUPÓN COMPACTO Y VISIBLE
 * ========================================================= */

/*
 * El checkout clásico puede heredar reglas del theme con alta especificidad.
 * Por eso v0.7.3 usa la clase propia aplicada por JS y !important únicamente
 * en este bloque. No se fuerza display: el toggle nativo sigue controlando la
 * apertura/cierre del formulario.
 */
.woocommerce-form-coupon-toggle {
    margin: 0 0 12px !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info.yoummy-rr-checkout-coupon-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 10px 14px 10px 49px !important;
    border: 1px solid rgba(101, 31, 140, 0.24) !important;
    border-left: 4px solid #651f8c !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #fbf8fd 0%, #f5ecfa 100%) !important;
    box-shadow: 0 5px 14px rgba(58, 20, 78, 0.06) !important;
    color: #171717 !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info.yoummy-rr-checkout-coupon-toggle::before,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
    content: "%" !important;
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    display: inline-flex !important;
    width: 26px !important;
    height: 26px !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: #651f8c !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.woocommerce-form-coupon-toggle .showcoupon.yoummy-rr-checkout-coupon-action,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
    display: inline-flex !important;
    min-height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 6px 12px !important;
    border: 1px solid #651f8c !important;
    border-radius: 999px !important;
    background: #651f8c !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease !important;
}

.woocommerce-form-coupon-toggle .showcoupon.yoummy-rr-checkout-coupon-action:hover,
.woocommerce-form-coupon-toggle .showcoupon.yoummy-rr-checkout-coupon-action:focus-visible,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:hover,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:focus-visible {
    border-color: #531773 !important;
    background: #531773 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
}

.woocommerce-form-coupon-toggle .showcoupon.yoummy-rr-checkout-coupon-action:active,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:active {
    transform: translateY(1px) !important;
}

/* Caja desplegable: compacta, sin alterar visibilidad ni funcionamiento. */
form.checkout_coupon.woocommerce-form-coupon.yoummy-rr-checkout-coupon-form,
#woocommerce-checkout-form-coupon.yoummy-rr-checkout-coupon-form,
body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon {
    box-sizing: border-box !important;
    margin: -1px 0 18px !important;
    padding: 13px 14px !important;
    border: 1px solid rgba(101, 31, 140, 0.20) !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 14px rgba(58, 20, 78, 0.05) !important;
}

form.checkout_coupon.woocommerce-form-coupon.yoummy-rr-checkout-coupon-form .form-row,
body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon .form-row {
    margin-bottom: 0 !important;
}

form.checkout_coupon.woocommerce-form-coupon.yoummy-rr-checkout-coupon-form .form-row-first,
body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon .form-row-first {
    width: calc(100% - 184px) !important;
}

form.checkout_coupon.woocommerce-form-coupon.yoummy-rr-checkout-coupon-form .form-row-last,
body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon .form-row-last {
    width: 168px !important;
}

form.checkout_coupon.woocommerce-form-coupon.yoummy-rr-checkout-coupon-form input.input-text,
body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon input.input-text {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 9px 13px !important;
    border: 1px solid rgba(101, 31, 140, 0.38) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

form.checkout_coupon.woocommerce-form-coupon.yoummy-rr-checkout-coupon-form input.input-text:focus,
body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon input.input-text:focus {
    border-color: #651f8c !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(101, 31, 140, 0.10) !important;
}

form.checkout_coupon.woocommerce-form-coupon.yoummy-rr-checkout-coupon-form button.button,
body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon button.button {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 9px 15px !important;
    border: 1px solid #651f8c !important;
    border-radius: 999px !important;
    background: #651f8c !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

form.checkout_coupon.woocommerce-form-coupon.yoummy-rr-checkout-coupon-form button.button:hover,
form.checkout_coupon.woocommerce-form-coupon.yoummy-rr-checkout-coupon-form button.button:focus-visible,
body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon button.button:hover,
body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon button.button:focus-visible {
    border-color: #531773 !important;
    background: #531773 !important;
    color: #ffffff !important;
    outline: none !important;
}

@media (max-width: 640px) {
    .woocommerce-form-coupon-toggle .woocommerce-info.yoummy-rr-checkout-coupon-toggle,
    body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
        align-items: flex-start !important;
        padding: 11px 11px 11px 48px !important;
    }

    .woocommerce-form-coupon-toggle .showcoupon.yoummy-rr-checkout-coupon-action,
    body.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
        width: 100% !important;
        margin-top: 1px !important;
    }

    form.checkout_coupon.woocommerce-form-coupon.yoummy-rr-checkout-coupon-form .form-row-first,
    form.checkout_coupon.woocommerce-form-coupon.yoummy-rr-checkout-coupon-form .form-row-last,
    body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon .form-row-first,
    body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon .form-row-last {
        float: none !important;
        width: 100% !important;
    }

    form.checkout_coupon.woocommerce-form-coupon.yoummy-rr-checkout-coupon-form .form-row-last,
    body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon .form-row-last {
        margin-top: 9px !important;
    }
}


/* =========================================================
 * VALORACIONES — DIFERENCIAR ESTRELLAS LLENAS Y VACÍAS
 * ========================================================= */

/*
 * WooCommerce ya guarda el valor exacto (1–5) en el ancho del <span>.
 * Este ajuste solo mejora la lectura visual para que una reseña de 4/5
 * no parezca de 5/5 cuando el tema colorea también las estrellas vacías.
 */
body.single-product #reviews .star-rating::before {
    color: #d8d8d8 !important;
    opacity: 1 !important;
}

body.single-product #reviews .star-rating span::before {
    color: #f2b400 !important;
    opacity: 1 !important;
}


/* =========================================================
 * v0.7.2 — ESTRELLAS DE RESEÑA: RENDER EXACTO 1–5
 * ========================================================= */

/*
 * El JS lee el rating real guardado por WooCommerce y crea cinco estrellas
 * individuales. Esto evita el recorte porcentual de una cadena de cinco glifos,
 * que podía producir falsos 5/5 o una media estrella visual en algunos themes.
 * El selector se limita al listado de comentarios: no toca el selector de
 * estrellas del formulario ni el rating promedio del producto.
 */
body.single-product #reviews .commentlist .star-rating.yoummy-rr-rating-rendered,
body.single-product #reviews .comment_container .star-rating.yoummy-rr-rating-rendered {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    align-items: center;
    font-size: 0 !important;
    line-height: 1 !important;
}

body.single-product #reviews .star-rating.yoummy-rr-rating-rendered::before,
body.single-product #reviews .star-rating.yoummy-rr-rating-rendered::after,
body.single-product #reviews .star-rating.yoummy-rr-rating-rendered span::before,
body.single-product #reviews .star-rating.yoummy-rr-rating-rendered span::after,
body.single-product div.product #reviews .comment-text .star-rating.yoummy-rr-rating-rendered::before,
body.single-product div.product #reviews .comment-text .star-rating.yoummy-rr-rating-rendered::after,
body.single-product div.product #reviews .comment-text .star-rating.yoummy-rr-rating-rendered span::before,
body.single-product div.product #reviews .comment-text .star-rating.yoummy-rr-rating-rendered span::after {
    display: none !important;
    content: none !important;
}

body.single-product #reviews .star-rating.yoummy-rr-rating-rendered .yoummy-rr-stars-visual {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    color: inherit !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

body.single-product #reviews .star-rating.yoummy-rr-rating-rendered .yoummy-rr-star {
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    visibility: visible !important;
}

body.single-product #reviews .star-rating.yoummy-rr-rating-rendered .yoummy-rr-star.is-filled {
    color: #EECD12 !important;
}

body.single-product #reviews .star-rating.yoummy-rr-rating-rendered .yoummy-rr-star.is-empty {
    color: #d8d8d8 !important;
}