/*
 * Wishlist heart, badge and toast.
 *
 * Loaded by every retail template - the Default multi-page storefront through
 * includes/styles-common.php, and the custom single-page templates through
 * storefront/custom-storefront.php - so the control looks and behaves the same
 * everywhere. Template-specific placement (where the heart sits on a card) is
 * tuned in each template's own stylesheet; only the control itself lives here.
 *
 * Colours come from custom properties with literal fallbacks, so the button is
 * correct on the Default theme (which sets --theme-* tokens), on the custom
 * storefronts (which set --sf-* tokens and override --miideal-wishlist-accent),
 * and on any page that sets neither.
 */

:root {
  --miideal-wishlist-accent: #e0245e;
  --miideal-wishlist-idle: #55606e;
  /* Transparent: the heart reads as part of the image, not a chip stuck on it.
     Legibility over a busy photo comes from the glyph's own drop shadow below,
     so a template can still set a ground here without anything else changing. */
  --miideal-wishlist-surface: transparent;
  --miideal-wishlist-size: 34px;
}

.miideal-wishlist-btn {
  /* Sized in ems off the button's own font-size so one --miideal-wishlist-size
     override rescales the icon, the padding and the hit area together. */
  width: var(--miideal-wishlist-size);
  height: var(--miideal-wishlist-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--miideal-wishlist-surface);
  color: var(--miideal-wishlist-idle);
  /* Anchors the pending ring drawn with ::after. .on-card overrides this with
     position: absolute, which is still a containing block for the ring. */
  position: relative;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.miideal-wishlist-btn svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  /* Keeps an unfilled heart readable over a light or busy product photo now
     that there is no disc behind it. */
  filter: drop-shadow(0 1px 2px rgba(16, 24, 40, 0.38));
  transition: fill 0.18s ease, stroke 0.18s ease;
}

.miideal-wishlist-btn:hover {
  color: var(--miideal-wishlist-accent);
}

.miideal-wishlist-btn:focus-visible {
  outline: 2px solid var(--miideal-wishlist-accent);
  outline-offset: 2px;
}

.miideal-wishlist-btn:active {
  transform: scale(0.9);
}

.miideal-wishlist-btn.is-saved {
  color: var(--miideal-wishlist-accent);
}

.miideal-wishlist-btn.is-saved svg {
  fill: var(--miideal-wishlist-accent);
  stroke: var(--miideal-wishlist-accent);
}

/* ── In-flight and settled states ──────────────────────────────────────────
   The heart repaints optimistically, so without this the control would look
   finished the instant it is tapped and invite a second tap on top of a
   request that has not landed. `is-pending` says the server has not answered
   yet; the burst classes fire once it has, so the two are never confused.
   js/wishlist.js owns both, and ignores taps while a product is pending. */

.miideal-wishlist-btn.is-pending {
  cursor: progress;
}

.miideal-wishlist-btn.is-pending svg {
  /* Dimmed enough to read as "working", not so far that the heart disappears -
     there is no disc behind it to hold the shape any more. */
  opacity: .75;
  animation: miideal-wishlist-throb .85s ease-in-out infinite;
}

/* A ring tracing the button, drawn on the icon-only variants where there is
   space around the glyph for it. It hugs the outside of the round card heart
   and sits just inside the boxed one in a product card's action row. */
.miideal-wishlist-btn.on-card::after,
.miideal-wishlist-btn.in-actions::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid transparent;
  border-top-color: var(--miideal-wishlist-accent);
  /* Always round, whatever shape the button itself takes: a spinning arc only
     reads as a spinner on a circle. On a square it is just a moving line. */
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* Boxed variant: the ring is inset so it spins inside the border rather than
   straddling it. */
.miideal-wishlist-btn.in-actions::after {
  inset: 5px;
}

.miideal-wishlist-btn.on-card.is-pending::after,
.miideal-wishlist-btn.in-actions.is-pending::after {
  opacity: 1;
  animation: miideal-wishlist-spin .68s linear infinite;
}

/* The labelled variant has no room for a ring, so it dims and swaps its text
   (js/wishlist.js writes "Saving…" / "Removing…"). */
.miideal-wishlist-btn.with-label.is-pending {
  opacity: .68;
}

/* One beat of feedback once the server has confirmed, so a tap reads as
   "it took" without needing the toast. */
.miideal-wishlist-btn.is-burst svg {
  animation: miideal-wishlist-pop 0.34s ease;
}

.miideal-wishlist-btn.is-burst-off svg {
  animation: miideal-wishlist-drop 0.3s ease;
}

@keyframes miideal-wishlist-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes miideal-wishlist-drop {
  0% { transform: scale(1.12); }
  55% { transform: scale(0.82); }
  100% { transform: scale(1); }
}

@keyframes miideal-wishlist-throb {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.86); }
}

@keyframes miideal-wishlist-spin {
  to { transform: rotate(360deg); }
}

/* Icon-only heart that sits in a product card's action row, beside Add to cart. */
.miideal-wishlist-btn.in-actions {
  width: 41px;
  height: auto;
  min-height: 40px;
  border-radius: 8px;
}

.miideal-wishlist-btn.in-actions svg {
  width: 18px;
  height: 18px;
  filter: none;
}

/* The heart pinned to the corner of a product card. */
.miideal-wishlist-btn.on-card {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}

/* Inline variant with a text label, for product detail pages. */
.miideal-wishlist-btn.with-label {
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 10px 18px;
  line-height: 1.2;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  border: 1px solid rgba(16, 24, 40, 0.16);
  box-shadow: none;
}

.miideal-wishlist-btn.with-label svg {
  width: 18px;
  height: 18px;
  /* The glyph sits on the button's own ground here, not on a photo, so it does
     not need the drop shadow the card variant relies on. */
  filter: none;
}

.miideal-wishlist-btn.with-label:hover {
  border-color: var(--miideal-wishlist-accent);
  box-shadow: none;
}

.miideal-wishlist-btn.with-label.is-saved {
  border-color: var(--miideal-wishlist-accent);
  background: rgba(224, 36, 94, 0.08);
}

/* Header count badge. */
.miideal-wishlist-count {
  font-style: normal;
  font-weight: 700;
}

.miideal-wishlist-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px);
  z-index: 2147483000;
  max-width: min(88vw, 420px);
  padding: 11px 18px;
  border-radius: 999px;
  background: #16181d;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.miideal-wishlist-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Clear of the Default storefront's fixed bottom cart bar on small screens. */
@media (max-width: 767.98px) {
  :root {
    --miideal-wishlist-size: 32px;
  }

  .miideal-wishlist-btn.on-card {
    top: 6px;
    right: 6px;
  }

  .miideal-wishlist-toast {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .miideal-wishlist-btn,
  .miideal-wishlist-btn svg,
  .miideal-wishlist-btn.on-card::after,
  .miideal-wishlist-btn.in-actions::after,
  .miideal-wishlist-toast {
    transition: none;
    animation: none;
  }

  /* The pending state stays legible without motion: the glyph still dims and
     the ring is still drawn, it simply does not spin. */
  .miideal-wishlist-btn.on-card.is-pending::after,
  .miideal-wishlist-btn.in-actions.is-pending::after {
    border-color: var(--miideal-wishlist-accent);
    opacity: .5;
  }
}