/* ==========================================================================
   TriKdanG — content-level "Save to Hangar" buttons.

   Two variants, both built from trikdang_render_save_to_hangar_button()
   in functions.php:
     .trik-save-btn--overlay  a small circular button pinned to a card
                               thumbnail, hidden until hover/focus/touch
     .trik-save-btn--inline   a full pill button with a text label, for
                               single template/video/game/guide pages
   Reuses the same color tokens as the rest of the app header (signature
   red for the active/saved state) rather than introducing new ones.
   ========================================================================== */

.trik-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(22, 22, 26, 0.65);
  color: #F3EFE4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.trik-save-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.trik-save-btn:hover,
.trik-save-btn:focus-visible {
  border-color: var(--wp--preset--color--signature-red, #E4002B);
}
.trik-save-btn.is-saved {
  background: var(--wp--preset--color--signature-red, #E4002B);
  border-color: var(--wp--preset--color--signature-red, #E4002B);
  color: #fff;
}
.trik-save-btn.is-saved svg {
  fill: currentColor;
}

/* ---- Overlay variant: pinned to a thumbnail card ---- */
/* Expects a positioned ancestor — e.g. add `position: relative` to the
   card/thumbnail wrapper this button sits inside. */
.trik-save-btn--overlay {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  opacity: 0;
  transform: translateY(-4px);
  z-index: 5;
}
/* Hover/slide-in on devices that support real hover (desktop). */
@media (hover: hover) and (pointer: fine) {
  .trik-save-btn--overlay {
    opacity: 0;
  }
  *:hover > .trik-save-btn--overlay,
  .trik-save-btn--overlay:focus-visible {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Touch-device fallback: no hover state to rely on, so the button stays
   visible (semi-transparent) at all times and simply loses the extra
   slide-in flourish, matching common mobile card-UI patterns. */
@media (hover: none), (pointer: coarse) {
  .trik-save-btn--overlay {
    opacity: 0.92;
    transform: none;
  }
}
/* Once an item is saved, keep its button visible regardless of hover
   state/device — a saved marker shouldn't disappear on mouse-out. */
.trik-save-btn--overlay.is-saved {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- Inline variant: single detail page ---- */
.trik-save-btn--inline {
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-family: var(--wp--preset--font-family--body, inherit);
  font-size: 0.88rem;
  font-weight: 600;
}
.trik-save-btn__label {
  white-space: nowrap;
}

:root[data-theme='light'] .trik-save-btn {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(20, 21, 26, 0.16);
  color: #16161a;
}
:root[data-theme='light'] .trik-save-btn.is-saved {
  background: var(--wp--preset--color--signature-red, #E4002B);
  border-color: var(--wp--preset--color--signature-red, #E4002B);
  color: #fff;
}