/* ===========================================================================
   watchlist-cards.css — the Watch button js/watchlist.js injects onto product
   cards, plus its confirmation toast.

   Deliberately SEPARATE from css/watchlist.css: that file styles the /watchlist
   page and is ~9KB, while this one rides along on the ~108 pages that already
   carry price-insights.js. Only what a button needs ships site-wide.

   THEMING — light-only, same reasoning as price-insights.css: nopturnia.com has
   no dark mode in css/, so a dark block here would be the one dark element on a
   light page. Colours derive from the site's --v2-* tokens with fallbacks, for
   legacy pages that only load style.css.

   Namespaced `wl-`. Every control is a <button>, never an <a>: `body.blog-v2 a`
   is a high-specificity selector that would capture and restyle an anchor.
   ========================================================================= */

.wl-watch {
  /* Full reset — this lands inside .v2-card-cta, legacy cards and the chat
     widget, three places with three different inherited button styles. */
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: 0;
  background: var(--v2-card, #fff);
  border: 1px solid var(--v2-hairline, #e2e8f0);
  color: var(--v2-ink-soft, #64748b);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.13s ease;
}

.wl-watch svg {
  width: 16px;
  height: 16px;
  display: block;
}

.wl-watch:hover {
  color: var(--v2-brand, #1d4ed8);
  border-color: var(--v2-brand-soft, #3b82f6);
}

.wl-watch:focus-visible {
  outline: 2px solid var(--v2-brand-soft, #3b82f6);
  outline-offset: 2px;
}

.wl-watch[disabled] {
  opacity: 0.55;
  cursor: default;
}

/* Watching: filled, so the state is legible without relying on colour alone —
   the icon is also the only filled control in the row. */
.wl-watch.wl-watching {
  background: var(--v2-brand, #1d4ed8);
  border-color: var(--v2-brand, #1d4ed8);
  color: #fff;
}

.wl-watch.wl-watching:hover {
  background: var(--v2-brand-soft, #3b82f6);
  border-color: var(--v2-brand-soft, #3b82f6);
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .wl-watch:active {
    transform: scale(0.92);
  }
}

/* --- V2 blog cards -------------------------------------------------------
   42x42 to match .v2-share-btn exactly. That class is an icon-square COMPONENT,
   not a generic hook: a labelled button dropped into this row inherits the
   square and gets its text clipped. Icon-only sidesteps it, and the accessible
   name lives in aria-label. */
.wl-watch-v2 {
  width: 42px;
  height: 42px;
  border-radius: var(--v2-r-lg, 10px);
}

/* --- Legacy blog cards --------------------------------------------------- */
.wl-watch-legacy {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  margin: 8px 0 4px;
}

/* --- Chat cards ----------------------------------------------------------
   The chat card is an <a>, so the button is a SIBLING in a flex wrapper, never
   a child — nesting a button in an anchor is invalid HTML and swallows the
   card's own navigation. */
.wl-chat-wrap {
  display: flex;
  flex-direction: column;
}

/* price-insights.js may have already wrapped the card in .pi-chat-wrap; the
   sweep reuses that wrapper rather than nesting a second one, so both wrapper
   classes have to lay the button out the same way. */
.wl-chat-wrap > .wl-watch-chat,
.pi-chat-wrap > .wl-watch-chat {
  align-self: flex-start;
  width: auto;
  height: 32px;
  padding: 0 10px;
  gap: 6px;
  margin-top: 6px;
  border-radius: 999px;
  line-height: 1;
}

.wl-chat-wrap > .wl-watch-chat::after,
.pi-chat-wrap > .wl-watch-chat::after {
  content: "Watch price";
  font-size: 12px;
  font-weight: 500;
}

.wl-chat-wrap > .wl-watch-chat.wl-watching::after,
.pi-chat-wrap > .wl-watch-chat.wl-watching::after {
  content: "Watching";
}

/* --- the toast -----------------------------------------------------------
   One shared element, bottom-centre, above the chat pill but never over the
   nav. role="status" + aria-live="polite" so it is announced without stealing
   focus from the card the reader just tapped. */
.wl-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  z-index: 9000;
  max-width: min(92vw, 460px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 12px;
  padding: 11px 16px;
  border-radius: 20px;
  background: var(--v2-ink, #0f172a);
  color: #fff;
  font-family: var(--v2-sans, system-ui, sans-serif);
  font-size: 13.5px;
  line-height: 1.35;
  box-shadow: 0 10px 34px rgba(15, 23, 42, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wl-toast.wl-toast-on {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* The message takes the room it needs and pushes the actions to the right. On a
   narrow screen it claims the whole first row so "Get alerts" and "View" drop
   onto their own line at full tap size, instead of all three squeezing into one
   row and shrinking below the 44px minimum. */
.wl-toast-msg {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
}

@media (max-width: 460px) {
  .wl-toast {
    flex-wrap: wrap;
  }
  .wl-toast-msg {
    flex: 1 1 100%;
  }
}

/* The "Get alerts" affordance in the alerts offer. A <button>, not a link: it
   triggers the permission prompt rather than navigating. */
.wl-toast-btn {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--v2-ink, #0f172a);
  cursor: pointer;
}

.wl-toast-btn:hover {
  background: #e8edf6;
}

.wl-toast-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.wl-toast-btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

.wl-toast a,
body.blog-v2 .wl-toast a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wl-toast {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }
}

/* The site's chat launcher pill sits bottom-right; on narrow screens lift the
   toast clear of it rather than letting the two overlap. */
@media (max-width: 560px) {
  .wl-toast {
    bottom: 84px;
  }
}