/**
 * neura-facets.css — storefront-styling die de facet-RUNTIME zelf nodig heeft.
 *
 * Bevat ALLEEN de "Uitleg"-modal + click-to-load-video, want die elementen maakt
 * neura-facets.js dynamisch aan (los van het bundle-template). De stijl van het
 * filterpaneel zelf (stijl-varianten, swatches, iconen, tooltip) staat bewust NIET
 * hier — die hoort bij de category.html-bundle zodat elke storefront z'n eigen
 * design houdt. Erft brand-tokens met veilige fallbacks.
 */

.nf-umodal {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 16px; overflow: auto;
  background: rgba(10, 9, 8, .6); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease;
}
.nf-umodal.is-open { opacity: 1; }
.nf-ubox {
  position: relative; width: 100%; max-width: 640px;
  background: var(--color-surface, #fff); color: var(--color-text, #1a1713);
  border-radius: 16px; padding: 28px 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  font-family: var(--font-body, inherit);
}
.nf-ux {
  position: absolute; top: 14px; right: 16px;
  border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer;
  color: var(--color-text-muted, #8a8178);
}
.nf-utitle { margin: 0 0 14px; font-size: 22px; font-family: var(--font-heading, inherit); }
.nf-ucontent { line-height: 1.6; font-size: 15px; }
.nf-ucontent h3 { font-size: 17px; margin: 16px 0 6px; }
.nf-ucontent p { margin: 8px 0; }
.nf-ucontent ul { margin: 8px 0; padding-left: 20px; }
.nf-ucontent a { color: var(--color-primary, #e1622d); }

/* click-to-load video (GDPR-veilig: geen iframe/cookies tot de bezoeker klikt) */
.nf-video {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; margin: 14px 0;
  overflow: hidden; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(135deg, #1a1f2b, #0d1b2a);
}
.nf-vplay {
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: #f00; color: #fff; font-size: 22px; display: grid; place-items: center;
}
.nf-vlabel { position: absolute; bottom: 10px; color: #fff; font-size: 12px; opacity: .85; }
.nf-viframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; margin: 14px 0; display: block; }

@media (max-width: 520px) { .nf-ubox { padding: 22px 18px; } .nf-utitle { font-size: 19px; } }

/* Facetwaarde-iconen: de runtime vult een (template-geauteurde) [data-facet-icon]-
   slot met een <img> (R2-upload) of <svg> (Lucide). Alleen de runtime-elementen
   stylen we hier; de positie/spacing van de slot zelf blijft template-side. `em`
   zodat het icoon meeschaalt met de optie-tekst. */
[data-facet-icon] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.nf-ic-img, .nf-ic-svg { width: 1.05em; height: 1.05em; display: block; }
.nf-ic-img { object-fit: contain; }
.nf-ic-svg { color: inherit; }
/* De swatch-VORM (cirkel/rand/actief-ring) hoort bij de bundle-template; de runtime
   zet enkel de achtergrond uit iconColor. Zie README §icon-swatch voor voorbeeld-CSS. */