/*
 * VapeRisk Museum — logo contrast registry.
 *
 * Several verified source assets are intentionally white or near-white marks
 * supplied for use on dark brand surfaces. The base Museum card uses a light
 * logo tile, so those marks disappear without a brand-specific treatment.
 *
 * Keep this list explicit: a blanket invert/grayscale filter would damage
 * multi-colour marks such as Elf Bar, FirstUnion, BECO and Vaptio.
 */

/* Shared dark presentation for white / near-white consumer wordmarks. */
.vrm2 .vrm2-brand-card:is(
  [data-brand-id="voopoo"],
  [data-brand-id="smoant"],
  [data-brand-id="horizontech"],
  [data-brand-id="flum"],
  [data-brand-id="hyde"],
  [data-brand-id="podsalt"],
  [data-brand-id="drvapes"],
  [data-brand-id="bombo"],
  [data-brand-id="germanflavours"],
  [data-brand-id="owl"],
  [data-brand-id="movi"],
  [data-brand-id="airix"],
  [data-brand-id="iget"],
  [data-brand-id="alfakher"],
  [data-brand-id="waka"],
  [data-brand-id="reign-bar"],
  [data-brand-id="grabit"],
  [data-brand-id="megabar"],
  [data-brand-id="pixl"],
  [data-brand-id="felixlab"]
) .vrm2-logo-box {
  border-color: rgba(178, 211, 241, .31);
  background-color: #080d14;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .32),
    inset 0 0 0 1px rgba(255, 255, 255, .035);
}

.vrm2 .vrm2-brand-card:is(
  [data-brand-id="voopoo"],
  [data-brand-id="smoant"],
  [data-brand-id="horizontech"],
  [data-brand-id="flum"],
  [data-brand-id="hyde"],
  [data-brand-id="podsalt"],
  [data-brand-id="drvapes"],
  [data-brand-id="bombo"],
  [data-brand-id="germanflavours"],
  [data-brand-id="owl"],
  [data-brand-id="movi"],
  [data-brand-id="airix"],
  [data-brand-id="iget"],
  [data-brand-id="alfakher"],
  [data-brand-id="waka"],
  [data-brand-id="reign-bar"],
  [data-brand-id="grabit"],
  [data-brand-id="megabar"],
  [data-brand-id="pixl"],
  [data-brand-id="felixlab"]
) .vrm2-logo-box > img {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .34));
}

/* Reign Bar: white RB monogram; retain its cool blue-violet context. */
.vrm2 .vrm2-brand-card[data-brand-id="reign-bar"] .vrm2-logo-box {
  background:
    radial-gradient(circle at 84% 12%, rgba(104, 98, 255, .25), transparent 52%),
    #080a13;
}

/* GRABIT: white wordmark with its original orange accent left untouched. */
.vrm2 .vrm2-brand-card[data-brand-id="grabit"] .vrm2-logo-box {
  border-color: rgba(242, 87, 24, .38);
  background:
    linear-gradient(135deg, rgba(242, 87, 24, .10), transparent 52%),
    #101215;
}

/* MEGABAR: white lettering plus red M; use a neutral charcoal brand stage. */
.vrm2 .vrm2-brand-card[data-brand-id="megabar"] .vrm2-logo-box {
  border-color: rgba(239, 0, 49, .34);
  background:
    linear-gradient(135deg, rgba(239, 0, 49, .10), transparent 48%),
    #090b10;
}

/* PIXL: all-white source wordmark; a subtle violet-black stage adds separation. */
.vrm2 .vrm2-brand-card[data-brand-id="pixl"] .vrm2-logo-box {
  border-color: rgba(171, 145, 255, .34);
  background:
    radial-gradient(circle at 16% 18%, rgba(122, 89, 255, .20), transparent 58%),
    #10101a;
}

/* VOOPOO: the supplied wordmark is white despite its transparent file preview. */
.vrm2 .vrm2-brand-card[data-brand-id="voopoo"] .vrm2-logo-box {
  background:
    radial-gradient(circle at 82% 18%, rgba(52, 159, 255, .14), transparent 58%),
    #08111a;
}

/*
 * Asset-path safety net for the same verified white marks in future card,
 * drawer, or dossier contexts. :has() targets only a tile containing one of
 * these exact assets; coloured logos keep the base light tile.
 */
.vrm2 .vrm2-logo-box:has(> img:is(
  [src*="voopoo-wordmark"],
  [src*="smoant-wordmark"],
  [src*="horizontech-wordmark"],
  [src*="flum-wordmark-white"],
  [src*="hyde-wordmark"],
  [src*="podsalt-wordmark"],
  [src*="drvapes-wordmark"],
  [src*="bombo-wordmark"],
  [src*="germanflavours-wordmark"],
  [src*="owl-wordmark"],
  [src*="movi-wordmark"],
  [src*="airix-wordmark"],
  [src*="iget-wordmark"],
  [src*="alfakher-wordmark"],
  [src*="waka-wordmark"],
  [src*="reign-bar-mark"],
  [src*="grabit-wordmark"],
  [src*="megabar-wordmark"],
  [src*="pixl-wordmark"],
  [src*="felixlab-wordmark"]
)) {
  border-color: rgba(178, 211, 241, .31);
  background-color: #080d14;
}

/* Deep-dossier identity and related tiles: white assets receive a dark stage. */
:is(.vrbs-logo-box, .vrbs-related-logo):has(> img:is(
  [src*="voopoo-wordmark"],
  [src*="smoant-wordmark"],
  [src*="horizontech-wordmark"],
  [src*="flum-wordmark-white"],
  [src*="hyde-wordmark"],
  [src*="podsalt-wordmark"],
  [src*="drvapes-wordmark"],
  [src*="bombo-wordmark"],
  [src*="germanflavours-wordmark"],
  [src*="owl-wordmark"],
  [src*="movi-wordmark"],
  [src*="airix-wordmark"],
  [src*="iget-wordmark"],
  [src*="alfakher-wordmark"],
  [src*="waka-wordmark"],
  [src*="reign-bar-mark"],
  [src*="grabit-wordmark"],
  [src*="megabar-wordmark"],
  [src*="pixl-wordmark"],
  [src*="felixlab-wordmark"]
)) {
  border-color: rgba(178, 211, 241, .24);
  background:
    radial-gradient(circle at 18% 12%, rgba(63, 146, 226, .14), transparent 58%),
    #080d14;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

/* Legacy drawer safety: the image itself becomes the bounded dark stage. */
.vrm2 .vrm2-drawer-logo:is(
  [src*="voopoo-wordmark"],
  [src*="smoant-wordmark"],
  [src*="horizontech-wordmark"],
  [src*="flum-wordmark-white"],
  [src*="hyde-wordmark"],
  [src*="podsalt-wordmark"],
  [src*="drvapes-wordmark"],
  [src*="bombo-wordmark"],
  [src*="germanflavours-wordmark"],
  [src*="owl-wordmark"],
  [src*="movi-wordmark"],
  [src*="airix-wordmark"],
  [src*="iget-wordmark"],
  [src*="alfakher-wordmark"],
  [src*="waka-wordmark"],
  [src*="reign-bar-mark"],
  [src*="grabit-wordmark"],
  [src*="megabar-wordmark"],
  [src*="pixl-wordmark"],
  [src*="felixlab-wordmark"]
) {
  width: min(190px, 100%);
  height: 78px;
  padding: 15px;
  border: 1px solid rgba(178, 211, 241, .24);
  border-radius: 10px;
  background: #080d14;
  object-fit: contain;
}

/*
 * Exact light-stage registry. These marks are dark or multi-colour and should
 * stay on a quiet high-contrast plate. This also overrides any older generic
 * dark-stage rule without altering the image pixels.
 */
.vrm2 .vrm2-brand-card:is(
  [data-brand-id="relx"],
  [data-brand-id="wotofo"],
  [data-brand-id="dovpo"],
  [data-brand-id="liquideo"],
  [data-brand-id="latabaccheria"],
  [data-brand-id="deaflavor"],
  [data-brand-id="stlth"],
  [data-brand-id="flavourbeast"],
  [data-brand-id="ivps"],
  [data-brand-id="yihi"],
  [data-brand-id="orcalab"]
) .vrm2-logo-box,
.vrm2 .vrm2-logo-box:has(> img:is(
  [src*="relx-wordmark"],
  [src*="wotofo-wordmark"],
  [src*="dovpo-wordmark"],
  [src*="liquideo-wordmark"],
  [src*="latabaccheria-wordmark"],
  [src*="deaflavor-wordmark"],
  [src*="stlth-wordmark"],
  [src*="flavourbeast-mark"],
  [src*="ivps-smok-wordmark"],
  [src*="yihi-wordmark"],
  [src*="orcalab-wordmark"]
)),
.vrbs-logo-box:has(> img:is(
  [src*="relx-wordmark"],
  [src*="wotofo-wordmark"],
  [src*="dovpo-wordmark"],
  [src*="liquideo-wordmark"],
  [src*="latabaccheria-wordmark"],
  [src*="deaflavor-wordmark"],
  [src*="stlth-wordmark"],
  [src*="flavourbeast-mark"],
  [src*="ivps-smok-wordmark"],
  [src*="yihi-wordmark"],
  [src*="orcalab-wordmark"]
)),
.vrbs-related-logo:has(> img:is(
  [src*="relx-wordmark"],
  [src*="wotofo-wordmark"],
  [src*="dovpo-wordmark"],
  [src*="liquideo-wordmark"],
  [src*="latabaccheria-wordmark"],
  [src*="deaflavor-wordmark"],
  [src*="stlth-wordmark"],
  [src*="flavourbeast-mark"],
  [src*="ivps-smok-wordmark"],
  [src*="yihi-wordmark"],
  [src*="orcalab-wordmark"]
)) {
  border-color: rgba(151, 193, 228, .28);
  background: #f4f7fb;
}

.vrm2 .vrm2-drawer-logo:is(
  [src*="relx-wordmark"],
  [src*="wotofo-wordmark"],
  [src*="dovpo-wordmark"],
  [src*="liquideo-wordmark"],
  [src*="latabaccheria-wordmark"],
  [src*="deaflavor-wordmark"],
  [src*="stlth-wordmark"],
  [src*="flavourbeast-mark"],
  [src*="ivps-smok-wordmark"],
  [src*="yihi-wordmark"],
  [src*="orcalab-wordmark"]
) {
  background: #f4f7fb;
}

/*
 * Some exact official assets carry their own white canvas. Keep the outer
 * presentation light and neutral so that canvas reads as intentional.
 */
.vrm2 .vrm2-brand-card:is(
  [data-brand-id="njoy"],
  [data-brand-id="logic"],
  [data-brand-id="kangertech"],
  [data-brand-id="suorin"],
  [data-brand-id="alfaliquid"],
  [data-brand-id="lefrenchliquide"],
  [data-brand-id="smoore"]
) .vrm2-logo-box,
.vrm2 .vrm2-logo-box:has(> img:is(
  [src*="njoy-wordmark"],
  [src*="logic-wordmark"],
  [src*="kangertech-wordmark"],
  [src*="suorin-wordmark"],
  [src*="alfaliquid-wordmark"],
  [src*="lefrenchliquide-wordmark"],
  [src*="smoore-wordmark-dark"]
)),
.vrbs-logo-box:has(> img:is(
  [src*="njoy-wordmark"],
  [src*="logic-wordmark"],
  [src*="kangertech-wordmark"],
  [src*="suorin-wordmark"],
  [src*="alfaliquid-wordmark"],
  [src*="lefrenchliquide-wordmark"],
  [src*="smoore-wordmark-dark"]
)),
.vrbs-related-logo:has(> img:is(
  [src*="njoy-wordmark"],
  [src*="logic-wordmark"],
  [src*="kangertech-wordmark"],
  [src*="suorin-wordmark"],
  [src*="alfaliquid-wordmark"],
  [src*="lefrenchliquide-wordmark"],
  [src*="smoore-wordmark-dark"]
)) {
  border-color: rgba(151, 193, 228, .22);
  background: #fff;
}

.vrm2 .vrm2-drawer-logo:is(
  [src*="njoy-wordmark"],
  [src*="logic-wordmark"],
  [src*="kangertech-wordmark"],
  [src*="suorin-wordmark"],
  [src*="alfaliquid-wordmark"],
  [src*="lefrenchliquide-wordmark"],
  [src*="smoore-wordmark-dark"]
) {
  background: #fff;
}

/* Mobile cards keep the same contrast without enlarging the compact logo tile. */
@media (max-width: 640px) {
  .vrm2 .vrm2-brand-card:is(
    [data-brand-id="voopoo"],
    [data-brand-id="smoant"],
    [data-brand-id="horizontech"],
    [data-brand-id="flum"],
    [data-brand-id="hyde"],
    [data-brand-id="podsalt"],
    [data-brand-id="drvapes"],
    [data-brand-id="bombo"],
    [data-brand-id="germanflavours"],
    [data-brand-id="owl"],
    [data-brand-id="movi"],
    [data-brand-id="airix"],
    [data-brand-id="iget"],
    [data-brand-id="alfakher"],
    [data-brand-id="waka"],
    [data-brand-id="reign-bar"],
    [data-brand-id="grabit"],
    [data-brand-id="megabar"],
    [data-brand-id="pixl"],
    [data-brand-id="felixlab"]
  ) .vrm2-logo-box {
    background-size: 100% 100%;
  }
}

/*
 * SMOORE's supplied transparent asset is mislabeled "dark": the wordmark is
 * actually white. Give it the same dark presentation used by other verified
 * white marks, and undo the legacy pixel-crop rule in museum-map-v2.css.
 */
.vrm2 .vrm2-brand-card[data-brand-id="smoore"] .vrm2-logo-box,
.vrm2 .vrm2-logo-box:has(> img[src*="smoore-wordmark-dark"]),
.vrbs-logo-box:has(> img[src*="smoore-wordmark-dark"]),
.vrbs-related-logo:has(> img[src*="smoore-wordmark-dark"]) {
  border-color: rgba(50, 190, 123, .34);
  background:
    radial-gradient(circle at 16% 18%, rgba(50, 190, 123, .16), transparent 58%),
    #07120f;
}

.vrm2 .vrm2-brand-card[data-brand-id="smoore"] .vrm2-logo-box > img,
.vrm2 .vrm2-logo-box > img[src*="smoore-wordmark-dark"] {
  width: 100%;
  height: 100%;
  max-height: 42px;
  object-fit: contain;
  object-position: center;
}

.vrm2 .vrm2-drawer-logo[src*="smoore-wordmark-dark"] {
  background: #07120f;
  object-fit: contain;
}