/* ═══════════════════════════════════════════════════
   FShop Wishlist Button Styles
   ═══════════════════════════════════════════════════ */

/* ── Wrapper ────────────────────────────────────── */
.f-fshop-wsl-wrap {
  display: inline-flex;
  align-items: center;
}

/* ── Action link ────────────────────────────────── */
.f-fshop-wsl-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.25s ease;
  user-select: none;
  position: relative;
  line-height: 1;
}

/* ── Icons: show/hide based on state ────────────── */
.f-fshop-wsl-icon {
  transition: transform 0.25s ease, opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Default state: show default, hide added */
.f-fshop-wsl-icon.is-added {
  display: none;
}

/* Favorited state: hide default, show added */
.f-fshop-wsl-wrap.is-favorited .f-fshop-wsl-icon.is-default {
  display: none;
}
.f-fshop-wsl-wrap.is-favorited .f-fshop-wsl-icon.is-added {
  display: inline-flex;
}

/* ── Default icon colors (overridable via Bricks) ─ */
.f-fshop-wsl-icon.is-default {
  color: #888;
}
.f-fshop-wsl-icon.is-added {
  color: #e74c3c;
}

/* ── Label ──────────────────────────────────────── */
.f-fshop-wsl-label {
  font-size: 14px;
  line-height: 1.2;
}

/* ── Hover effect ───────────────────────────────── */
.f-fshop-wsl-action:hover .f-fshop-wsl-icon {
  transform: scale(1.15);
}

/* ── Loading state ──────────────────────────────── */
.f-fshop-wsl-action.is-loading {
  pointer-events: none;
  opacity: 0.6;
}
.f-fshop-wsl-action.is-loading .f-fshop-wsl-icon {
  animation: f-fshop-spin 0.6s linear infinite;
}

@keyframes f-fshop-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Pulse animation on toggle ──────────────────── */
.f-fshop-wsl-action.pulse .f-fshop-wsl-icon {
  animation: f-fshop-pulse 0.4s ease;
}

@keyframes f-fshop-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}