/* =========================================================
   ARCHIVO:
   /wp-content/themes/PLUXDOM-ULTRA/templates/realty/inc/css-pluxdom-favorites-cookie.css

   FIX REAL:
   El problema es que el SVG usa:
   stroke="currentColor"
   y el botón base mantiene color oscuro.
   Debemos forzar color + path activo.
========================================================= */


/* =========================================================
   ESTADO BASE
========================================================= */

.pluxdom-favorite-btn .pluxdom-favorite-heart {
    color: #111111 !important;
}


/* SVG base */
.pluxdom-favorite-btn .pluxdom-favorite-heart svg path {
    fill: transparent !important;
    stroke: currentColor !important;

    transition:
        fill .22s ease,
        stroke .22s ease,
        filter .22s ease;
}


/* =========================================================
   ACTIVO
========================================================= */

.pluxdom-favorite-btn.active {
    background: #ffffff !important;

    box-shadow:
        0 8px 20px rgba(255,43,43,.18),
        0 3px 8px rgba(255,43,43,.12),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}


/* CLAVE:
   Cambia currentColor a rojo */
.pluxdom-favorite-btn.active .pluxdom-favorite-heart {
    color: #ff2b2b !important;
}


/* Fuerza relleno */
.pluxdom-favorite-btn.active .pluxdom-favorite-heart svg,
.pluxdom-favorite-btn.active .pluxdom-favorite-heart svg path {
    fill: #ff2b2b !important;
    stroke: #ff2b2b !important;

    filter: drop-shadow(0 0 6px rgba(255,43,43,.32));
}


/* =========================================================
   HOVER INACTIVO
========================================================= */

.pluxdom-favorite-btn:not(.active):hover .pluxdom-favorite-heart {
    color: #111111 !important;
}


/* =========================================================
   CLICK
========================================================= */

.pluxdom-favorite-btn:active {
    transform: scale(.96);
}