/* ============================================================
   rundum.dog · rd-Favoriten — "Merken / Gespeichert"-Button (Iris, 2026-06-27)
   Additiv, scoped auf .rd-fav* / .rd-account-cta--member. Nach rd-system.css
   enqueuen (braucht Bridge-/Live-Tokens: --rd-surface --rd-border --rd-ink
   --rd-muted --rd-faint --rd-good --rd-accent-strong --rd-accent-wash
   --rd-r-pill --rd-r-md --rd-shadow-sm --dur-fast --dur-base --ease-out --s-*).

   Design-DNA: ruhig, redaktionell, "Würde statt Punkte". Der Default ist eine
   sekundäre Ghost-Pill (Outline, ♡ gedämpft) — sie konkurriert NICHT mit dem
   gefüllten Accent-Konto-CTA (.rd-account-cta__btn). Der Gespeichert-Zustand ist
   ein ruhiger ♥ in --rd-good mit zartem Wash, KEIN Glow/Bounce/Konfetti.

   Hart-Regeln (wie rd-system.css):
   - Keine Element-Selektoren, keine Token-Redefinition, keine globalen Resets.
   - Keine rd-btn/rd-chip-Regeln (kollidieren mit rundum.css) — eigener rd-fav-Namespace.
   - Nur transform/opacity/color/background/border animiert; kein transition:all.
   - Touch-Target >=44px, :focus-visible-Ring, reduced-motion-Gate.
   ============================================================ */

/* ====== Wrapper ====== */
.rd-fav {
  margin-block: var(--s-5);
  display: flex;
  align-items: center;
}

/* In der Member-Karte trägt das Grid den Rhythmus → Wrapper-Margin raus. */
.rd-account-cta--member .rd-fav {
  margin: 0;
}

/* ====== Der Button (Default = ruhige Ghost-Pill) ====== */
.rd-fav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--rd-ink);
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-r-pill);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.rd-fav__icon {
  font-size: 1.15em;
  line-height: 1;
  color: var(--rd-faint);
  /* nur Farbe/Opacity animieren — kein scale (Würde statt Punkte). */
  transition: color var(--dur-fast) var(--ease-out);
}

.rd-fav__label {
  font-variant-numeric: tabular-nums;
}

/* ── Hover/Focus: klar lesbar, ruhig akzentuiert (Richtung --rd-good) ── */
.rd-fav__btn:hover {
  border-color: var(--rd-good);
  background: var(--rd-accent-wash);
  color: var(--rd-ink);
}
.rd-fav__btn:hover .rd-fav__icon {
  color: var(--rd-good);
}

/* a11y-Outline: sichtbar, nur bei Tastatur-Fokus, kein Glow. */
.rd-fav__btn:focus-visible {
  outline: 2px solid var(--rd-good);
  outline-offset: 2px;
  border-color: var(--rd-good);
}

/* ── Gespeichert: gefülltes ♥ in --rd-good, zarter Wash, ruhig ── */
.rd-fav__btn.is-saved {
  color: var(--rd-good);
  background: rgba(78, 122, 82, 0.10);   /* --rd-good @ ~10%, harmoniert mit rd-dogchip--good */
  border-color: rgba(78, 122, 82, 0.30);
}
.rd-fav__btn.is-saved .rd-fav__icon {
  color: var(--rd-good);
}
.rd-fav__btn.is-saved:hover {
  background: rgba(78, 122, 82, 0.16);
  border-color: var(--rd-good);
  color: var(--rd-good);
}
.rd-fav__btn.is-saved:focus-visible {
  outline-color: var(--rd-good);
}

/* Ein einziger, winziger State-Tick beim Speichern — gated, nicht default sichtbar.
   Greift nur, wenn das Markup das frisch gespeicherte Item mit .is-just-saved
   ausliefert (optionaler Hook, s. Markup-Hinweise). Kein Bounce/Glow. */
@media (prefers-reduced-motion: no-preference) {
  .rd-fav__btn.is-just-saved .rd-fav__icon {
    animation: rd-fav-tick var(--dur-base) var(--ease-out);
  }
}
@keyframes rd-fav-tick {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ====== Guest-Variante: text-link-artig, keine Pill-Box ====== */
.rd-fav--guest {
  margin-block: var(--s-5);
}
.rd-account-cta--member .rd-fav--guest {
  margin: 0;
}
.rd-fav__login {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-block: 6px;       /* Touch-Höhe ohne Pill-Optik */
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rd-accent-strong);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.rd-fav__login::before {
  content: "\2661";          /* ♡ — robuster als Inline-Glyph, falls Markup variiert */
  font-size: 1.15em;
  line-height: 1;
  color: var(--rd-faint);
  transition: color var(--dur-fast) var(--ease-out);
}
.rd-fav__login:hover {
  color: var(--rd-accent-strong);
  text-decoration: underline;
}
.rd-fav__login:hover::before {
  color: var(--rd-accent-strong);
}
.rd-fav__login:focus-visible {
  outline: 2px solid var(--rd-accent-strong);
  outline-offset: 3px;
  border-radius: var(--rd-r-sm);
}

/* ====== Member-Karte (Rasse-Single): Button rechts, Konto-CTA bleibt primär ====== */
/* .rd-account-cta erbt aus rd-hunderasse-single.css (grid 1fr auto, dashed border).
   Hier nur der --member-Modifier-Inhalt: Texte links, rd-fav rechts ausgerichtet. */
.rd-account-cta--member {
  /* erbt Grid/Padding/Border vom Basis-.rd-account-cta; keine Redefinition nötig. */
}
.rd-account-cta--member .rd-fav,
.rd-account-cta--member .rd-fav--guest {
  justify-self: end;
}

@media (max-width: 640px) {
  /* Karte wird einspaltig (Basis-Regel) → Button volle Breite, klar antippbar. */
  .rd-account-cta--member .rd-fav,
  .rd-account-cta--member .rd-fav--guest {
    justify-self: stretch;
    width: 100%;
  }
  .rd-account-cta--member .rd-fav__btn {
    width: 100%;
  }
}

/* ====== Motion-Gate ====== */
@media (prefers-reduced-motion: reduce) {
  .rd-fav__btn,
  .rd-fav__icon,
  .rd-fav__login,
  .rd-fav__login::before {
    transition: none !important;
  }
  .rd-fav__btn.is-just-saved .rd-fav__icon {
    animation: none !important;
  }
}