/* wgf-item-tooltip.css — first-party item hover card (wgf-item-tooltip.js).
   Loaded lazily by the JS on first hover so it stays off the critical render path. Quality name
   colours come from the global .q-* classes in wgf-item-card.css (single-homed — not redefined). */
/* In-game skin (owner call 2026-07-02): the card reads like the actual WoW tooltip —
   near-black navy plate, thin silver-blue border, white identity lines, gold item level —
   not the site's warm-stone panel. Shared by the hover card AND the item page's inline hero. */
.wgf-it {
  position: fixed; z-index: 1300; width: 260px; max-width: calc(100vw - 16px);
  pointer-events: auto;                 /* interactive: hover onto it, click the foot link */
  background: linear-gradient(180deg, rgba(12, 12, 30, 0.97), rgba(5, 5, 16, 0.97));
  border: 1px solid #7a7a96;
  border-radius: 5px; padding: 10px 12px; box-shadow: 0 12px 38px rgba(0, 0, 0, .65);
  font-size: 13px; line-height: 1.4; color: #ffffff;
}
.wgf-it[hidden] { display: none; }

.wgf-it__head { display: flex; gap: 9px; align-items: flex-start; }
.wgf-it__icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .45); background: var(--wgf-panel-3, #2c251d);
}
.wgf-it__icon--empty { display: inline-block; }
.wgf-it__id { min-width: 0; }
.wgf-it__name { display: block; font-weight: 700; font-size: 14px; word-break: break-word; }
.wgf-it__ilvl {
  display: block; margin-top: 1px; font-size: 11.5px; color: #ffd100;  /* in-game gold */
}

.wgf-it__body { margin-top: 6px; }
/* In-game line colours: identity/stat lines are plain white; effects green; flavor gold. */
.wgf-it__line { font-size: 12px; color: #ffffff; }
.wgf-it__slotrow { display: flex; justify-content: space-between; gap: 10px; }
.wgf-it__type { color: #ffffff; }
.wgf-it__bind { color: #ffffff; }
.wgf-it__effect { color: #1eff00; }   /* the in-game green "Use:/Equip:" line */
.wgf-it__stat { color: #ffffff; }
.wgf-it__socket { color: #9aa7b5; }
.wgf-it__gem { color: #7fb0e0; display: flex; align-items: center; gap: 5px; }
/* Gem / enchant deep-links inside the card (interactive card): keep the line's in-game
   colour, underline on hover only. */
.wgf-it__extlink { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.wgf-it__extlink:hover { text-decoration: underline; }
.wgf-it__gemicon {
  width: 16px; height: 16px; border-radius: 3px; flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .35); background: #000;
}
.wgf-it__flavor { color: #ffd100; font-style: italic; margin-top: 4px; }
.wgf-it__sell { color: #ffffff; }

.wgf-it__price {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.wgf-it__price-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--wgf-muted, #a89a84);
}
.wgf-it__price-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wgf-text, #ece3d4); }
.wgf-it__price--none {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12px; color: #b8b8c8;
}
.wgf-it__g { color: var(--wgf-gold-primary, #f0c040); }
.wgf-it__s { color: #c7d0d8; }
.wgf-it__c { color: #d08a5a; }

.wgf-it__meta {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 3px;
  font-size: 11px; color: var(--wgf-muted, #a89a84);
}
.wgf-it__foot {
  display: block; margin-top: 8px; font-size: 11.5px;
  color: var(--wgf-gold-accent, #d8b25a); text-decoration: none;
}
a.wgf-it__foot:hover { color: var(--wgf-gold-bright, #ffd978); text-decoration: underline; }

/* ── inline variant — the item page's SSR hero card (item_facts.render_tooltip_card).
   Same visual language as the hover card, but it sits IN the page: static positioning,
   page-scale type, interactive. The name line doubles as the page <h1>. ── */
.wgf-it--inline {
  position: static; z-index: auto; width: auto; max-width: 380px;
  pointer-events: auto; font-size: 14px; padding: 14px 16px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
.wgf-it--inline .wgf-it__icon { width: 44px; height: 44px; }
.wgf-it--inline .wgf-it__name { font-size: 20px; margin: 0; line-height: 1.15; }
.wgf-it--inline .wgf-it__ilvl { font-size: 12.5px; }
.wgf-it--inline .wgf-it__line { font-size: 13px; line-height: 1.5; }