/* ==========================================================================
   wishlist.css — Módulo de favoritos · Camisetas Frikis (Arcade Neón)
   Tokens: usa las variables :root definidas en style.css
========================================================================== */

/* --------------------------------------------------------------------------
   BOTÓN ♥ — aparece sobre la tarjeta de producto y en la ficha de producto
-------------------------------------------------------------------------- */
.cf-wish-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            36px;
  height:           36px;
  padding:          0;
  border:           1px solid var(--line-3);
  border-radius:    var(--pill);
  background:       var(--surface);
  color:            var(--muted);
  font-size:        16px;
  line-height:      1;
  cursor:           pointer;
  transition:
    color           .18s ease,
    background      .18s ease,
    border-color    .18s ease,
    box-shadow      .22s ease,
    transform       .15s ease;
  /* no heredar el transform del padre al hacer hover en la tarjeta */
  position:         relative;
  z-index:          3;
  flex-shrink:      0;
}

/* Estado hover (no activo) */
.cf-wish-btn:hover:not( .is-active ) {
  border-color: var(--neon-2);
  color:        var(--magenta);
  transform:    translateY( -2px );
  box-shadow:   0 4px 16px #ff4d8d26;
}

/* Estado activo — producto ya guardado en favoritos */
.cf-wish-btn.is-active {
  border-color: var(--magenta);
  background:   #ff4d8d18;
  color:        var(--magenta);
  box-shadow:   0 0 14px #ff4d8d44;
  animation:    cf-wish-pop .25s ease forwards;
}

.cf-wish-btn.is-active:hover {
  transform:  translateY( -2px );
  box-shadow: 0 4px 20px #ff4d8d55;
}

/* Evitar que el foco quede oculto por el glow */
.cf-wish-btn:focus-visible {
  outline:        2px solid var(--magenta);
  outline-offset: 3px;
}

/* Animación suave al toggling (.is-active entra/sale) */
@keyframes cf-wish-pop {
  0%   { transform: scale( .7 ); }
  60%  { transform: scale( 1.2 ); }
  100% { transform: scale( 1 ); }
}

/* Desactivado temporalmente durante la petición AJAX */
.cf-wish-btn:disabled {
  opacity:    .5;
  cursor:     wait;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   VARIANTE COMPACTA — para colocar encima de la imagen de la tarjeta
   Uso: posicionar con position:absolute desde .cf-prod-flags o similar
-------------------------------------------------------------------------- */
.cf-prod-flags .cf-wish-btn {
  width:       32px;
  height:      32px;
  font-size:   14px;
  background:  #0c0e14cc;   /* semi-opaco sobre la imagen */
  border-color: var(--line-2);
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
}

/* --------------------------------------------------------------------------
   CONTADOR de favoritos en el header / nav
   Uso: <span class="cf-wish-count">0</span>
-------------------------------------------------------------------------- */
.cf-wish-count {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       18px;
  height:          18px;
  padding:         0 5px;
  border-radius:   var(--pill);
  background:      var(--magenta);
  color:           #fff;
  font-family:     var(--f-head);
  font-size:       11px;
  font-weight:     700;
  line-height:     1;
}

/* --------------------------------------------------------------------------
   PÁGINA "FAVORITOS" — wrapper principal
-------------------------------------------------------------------------- */
.cf-wish {
  padding: 8px 0 48px;
}

/* Título de sección (opcional; se puede añadir desde la plantilla de Mi Cuenta) */
.cf-wish > h2,
.cf-wish > .woocommerce-column__title {
  font-family: var(--f-head);
  font-size:   clamp( 22px, 4vw, 28px );
  color:       var(--text);
  margin:      0 0 28px;
}

/* --------------------------------------------------------------------------
   ESTADO VACÍO
-------------------------------------------------------------------------- */
.cf-wish-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         64px 24px;
  gap:             16px;
}

.cf-wish-empty__icon {
  display:       block;
  font-size:     56px;
  color:         var(--line-4);
  line-height:   1;
  margin-bottom: 8px;
  /* desaturado para transmitir "vacío" */
  filter:        grayscale( .6 ) opacity( .45 );
}

.cf-wish-empty__msg {
  font-family:  var(--f-head);
  font-size:    20px;
  font-weight:  600;
  color:        var(--text);
  margin:       0;
}

.cf-wish-empty__sub {
  font-size:  14px;
  color:      var(--muted);
  max-width:  360px;
  margin:     0 0 12px;
  line-height: 1.55;
}

/* El enlace a tienda usa la clase .cf-btn definida en style.css */

/* --------------------------------------------------------------------------
   REJILLA de productos en la página de favoritos
   Hereda ul.products de style.css (4 col → 2 → 1)
   Solo añadimos la separación superior cuando hay productos
-------------------------------------------------------------------------- */
.cf-wish ul.products {
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------------------------- */
@media ( max-width: 820px ) {
  .cf-wish-empty {
    padding: 48px 16px;
  }

  .cf-wish-empty__icon {
    font-size: 44px;
  }

  .cf-wish-empty__msg {
    font-size: 18px;
  }
}

@media ( max-width: 560px ) {
  .cf-wish {
    padding-bottom: 32px;
  }

  .cf-wish-btn {
    width:     34px;
    height:    34px;
    font-size: 15px;
  }
}