/**
 * PCS Wishlist - Estilos
 *
 * Regla general:
 *  - dynamic-css.php es la ÚNICA fuente de verdad para las ALTURAS de los
 *    botones del combo (qty-wrapper, qty-down, qty-up, qty-field, cart-button,
 *    out-of-stock, combustible-link). Sus reglas responsive (44 → 38 → 36 px)
 *    aplican también en la wishlist porque pcs_ctx() incluye
 *    `.pcs-wishlist-grid ul.products li.product`.
 *  - Este archivo NO define alturas para los elementos del combo. Solo:
 *      · estilos y sizing del corazón (botón propio del módulo),
 *      · layout horizontal del combo (gap, flex, min-width),
 *      · contador,
 *      · estado vacío,
 *      · refuerzo de fill/stroke del SVG para que Astra/WooCommerce no lo
 *        pinten en negro,
 *      · toast de error del toggle AJAX (v5.2.3),
 *      · pulso de confirmación del toggle (v5.2.4) aplicado al ICONO,
 *      · hovers reales gateados a @media (hover: hover) y feedback táctil
 *        vía :active en @media (hover: none) (v5.3.1-fix2),
 *      · aviso "inicia sesión" cuando el modo invitados está desactivado
 *        (v5.3.1-auth).
 *
 * @package YGB_Product_Card_Styler
 */

/* ---------- Botón corazón ---------- */
.pcs-wishlist-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.pcs-wishlist-button .pcs-wishlist-icon {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
    transition: fill 0.2s ease !important;
    pointer-events: none !important;
}

.pcs-wishlist-button.is-active .pcs-wishlist-icon {
    fill: currentColor !important;
}

.pcs-wishlist-button.is-loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* ---------- Hovers reales: solo dispositivos con puntero ----------
 * v5.3.1-fix2: en táctiles el :hover queda "pegado" tras el tap y aplica
 * el color de hover hasta que el usuario toca otro sitio. Si el color de
 * hover es blanco sobre fondo blanco, el corazón queda invisible. Aquí
 * solo se aplica el efecto cuando el dispositivo declara hover real
 * (ratón/trackpad). Para táctiles, el feedback transitorio va abajo.
 */
@media (hover: hover) {
    .pcs-wishlist-button:hover {
        transform: translateY(-2px) !important;
    }
}

/* ---------- Feedback táctil transitorio ----------
 * :active sí se libera al soltar el dedo. Se usa como sustituto del
 * :hover en dispositivos sin puntero real, para dar sensación de pulsado
 * sin quedar pegado.
 */
@media (hover: none) {
    .pcs-wishlist-button:active {
        transform: translateY(-2px) !important;
    }
}

/* ---------- Pulso de confirmación al confirmar el toggle (fase 3) ----------
 * Se aplica al ICONO, no al botón. Razón: en móvil el estado :hover queda
 * "pegado" tras el tap y su `transform` (!important de autor) sobreescribe
 * el del @keyframes. El icono no tiene ningún transform conflictivo, así
 * que la animación se ve siempre.
 *
 * Respeta prefers-reduced-motion.
 */
@keyframes pcs-wishlist-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.pcs-wishlist-button.pcs-wishlist-pop .pcs-wishlist-icon {
    animation: pcs-wishlist-pop 0.35s ease-out;
    transform-origin: center center;
}

.pcs-wishlist-button.pcs-wishlist-pop {
    /* Mantiene el botón por encima de tarjetas vecinas mientras el icono
       se agranda; no mueve ni rota el botón en sí. */
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .pcs-wishlist-button.pcs-wishlist-pop .pcs-wishlist-icon {
        animation: none;
    }
}

/* ---------- Layout del combo: qty + corazón + carrito ----------
   Solo layout (flex, gap, min-width). Las alturas las da dynamic-css.php. */
.woocommerce ul.products li.product .pcs-combo,
.woocommerce-page ul.products li.product .pcs-combo,
.pcs-products-grid .products li.product .pcs-combo,
.pcs-products-grid ul.products li.product .pcs-combo,
.pcs-combo {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
}

.woocommerce ul.products li.product .pcs-combo .pcs-qty-wrapper,
.pcs-combo .pcs-qty-wrapper {
    flex: 1 1 0 !important;
    min-width: 55px !important;
    max-width: none !important;
}

.woocommerce ul.products li.product .pcs-combo .pcs-cart-button,
.pcs-combo .pcs-cart-button {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
}

.pcs-combo .pcs-cart-button svg {
    width: 20px !important;
    height: 20px !important;
}

.pcs-combo a.button.pcs-out-of-stock,
.pcs-combo a.button.pcs-combustible-link {
    flex: 1 1 auto !important;
    font-size: 15px !important;
    padding: 0 12px !important;
}

/* ---------- Variante: producto no-simple (variable/agrupado/externo) ---------- */
.pcs-combo.pcs-combo-var {
    margin-top: 6px !important;
}
.pcs-combo.pcs-combo-var > .pcs-wishlist-button {
    flex: 0 0 44px !important;
}
.pcs-combo.pcs-combo-var > .button {
    flex: 1 1 auto !important;
}

/* ---------- Contador ---------- */
.pcs-wishlist-counter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    text-decoration: none !important;
    color: inherit !important;
    position: relative !important;
}
.pcs-wishlist-counter .pcs-wishlist-icon {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    pointer-events: none !important;
}
.pcs-wishlist-counter-value {
    display: inline-block !important;
    min-width: 18px !important;
    padding: 1px 5px !important;
    border-radius: 10px !important;
    background: #e74c3c !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 16px !important;
}

/* ---------- Página / shortcode [pcs_wishlist] ---------- */
.pcs-wishlist-empty {
    padding: 20px !important;
    text-align: center !important;
    color: #777 !important;
    font-style: italic !important;
}

/* ---------- Aviso "inicia sesión" ----------
 * Se muestra en lugar del shortcode [pcs_wishlist] cuando el admin
 * desactiva "Permitir invitados sin cuenta" y el visitante no está
 * autenticado. Estilo consistente con el resto de bloques del plugin.
 */
.pcs-wishlist-login-required {
    padding: 30px 20px;
    text-align: center;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin: 20px 0;
}
.pcs-wishlist-login-required p:first-child {
    margin: 0 0 15px 0;
    font-size: 15px;
    color: #555;
}
.pcs-wishlist-login-required p:last-child {
    margin: 0;
}
.pcs-wishlist-login-required .button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
}

/* =========================================================
 *  v5.1.1 — REFUERZO ESPECÍFICO PARA LA PÁGINA DE WISHLIST
 *  v5.2.0 — añadido fill:currentColor al SVG del carrito y al del
 *           corazón, y stroke:none para evitar que Astra/WooCommerce
 *           pinten el path en negro por defecto.
 *  v5.2.1 — eliminadas todas las alturas de los elementos del combo
 *           dentro de .pcs-wishlist-grid. dynamic-css.php ya las controla
 *           porque pcs_ctx() incluye `.pcs-wishlist-grid ul.products
 *           li.product`. Solo el corazón conserva altura propia.
 * ========================================================= */

.pcs-wishlist-grid .pcs-combo,
.pcs-wishlist-grid ul.products li.product .pcs-combo {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pcs-wishlist-grid .pcs-combo .pcs-qty-wrapper,
.pcs-wishlist-grid ul.products li.product .pcs-combo .pcs-qty-wrapper {
    flex: 1 1 0 !important;
    min-width: 55px !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.pcs-wishlist-grid .pcs-combo .pcs-qty-field {
    min-width: 22px !important;
    max-width: 60px !important;
    text-align: center !important;
}

.pcs-wishlist-grid .pcs-combo .pcs-cart-button,
.pcs-wishlist-grid ul.products li.product a.button.pcs-cart-button,
.pcs-wishlist-grid ul.products li.product .pcs-cart-button,
.pcs-wishlist-grid ul.products li.product .button.pcs-cart-button {
    box-sizing: border-box !important;
    float: none !important;
}

.pcs-wishlist-grid .pcs-wishlist-button,
.pcs-wishlist-grid ul.products li.product .pcs-wishlist-button {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
}

.pcs-wishlist-grid .pcs-cart-button svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    margin: 0 auto !important;
    fill: currentColor !important;
    stroke: none !important;
}

.pcs-wishlist-grid .pcs-wishlist-button .pcs-wishlist-icon {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
}
.pcs-wishlist-grid .pcs-wishlist-button.is-active .pcs-wishlist-icon {
    fill: currentColor !important;
}

.pcs-wishlist-grid .pcs-combo a.button.pcs-out-of-stock,
.pcs-wishlist-grid .pcs-combo a.button.pcs-combustible-link {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* =========================================================
 *  Responsive.
 *
 *  El corazón se ajusta aquí (dynamic-css.php no lo controla).
 *  Los botones del combo (qty, cart, etc.) los maneja dynamic-css.php
 *  por igual en tienda y wishlist: 44px → 38px (768) → 36px (480).
 * ========================================================= */
@media (max-width: 768px) {
    .pcs-wishlist-button {
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
    }
    .pcs-wishlist-button .pcs-wishlist-icon {
        width: 18px !important;
        height: 18px !important;
    }
    .pcs-wishlist-grid .pcs-wishlist-button,
    .pcs-wishlist-grid ul.products li.product .pcs-wishlist-button {
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
    }
    .pcs-combo .pcs-qty-wrapper {
        min-width: 48px !important;
    }
    .pcs-wishlist-grid .pcs-combo .pcs-qty-wrapper {
        min-width: 48px !important;
    }
    .pcs-combo a.button.pcs-out-of-stock,
    .pcs-combo a.button.pcs-combustible-link {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .pcs-combo {
        gap: 3px !important;
    }
    .pcs-wishlist-button {
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
    }
    .pcs-wishlist-button .pcs-wishlist-icon {
        width: 16px !important;
        height: 16px !important;
    }
    .pcs-wishlist-grid .pcs-wishlist-button,
    .pcs-wishlist-grid ul.products li.product .pcs-wishlist-button {
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
    }
    .pcs-combo .pcs-qty-wrapper {
        min-width: 40px !important;
    }
    .pcs-wishlist-grid .pcs-combo .pcs-qty-wrapper {
        min-width: 40px !important;
    }
    .pcs-combo a.button.pcs-out-of-stock,
    .pcs-combo a.button.pcs-combustible-link {
        font-size: 12px !important;
        padding: 0 8px !important;
    }
}

/* =========================================================
 *  Aviso flotante (toast) para errores del toggle AJAX.
 *  Se muestra cuando el servidor devuelve 429, 403 o un error
 *  sin éxito explícito. Evita que el corazón quede bloqueado
 *  en is-loading sin feedback para el usuario.
 * ========================================================= */
.pcs-wishlist-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90vw;
    padding: 10px 16px;
    background: #2c3e50;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999999;
    animation: pcs-wishlist-toast-in 0.25s ease;
}

@keyframes pcs-wishlist-toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pcs-wishlist-toast { animation: none; }
}