/* ==========================================================================
   Glow - eigen aanpassingen (VANBYTE)
   Wordt na de Webflow-stylesheets geladen, zodat deze regels winnen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hover-pijl (witte cirkel met ↗) op de Instagram-tegels en behandelingskaarten.

   Webflow gaf dit element `position: absolute` zonder top/left/right/bottom.
   Daardoor viel het terug op zijn "static position" binnen een flex-container.
   Chrome centreert dat toevallig, maar Safari en Firefox plaatsen het dan
   linksboven - vandaar de pijl die niet gecentreerd stond.

   `inset: 0` + `margin: auto` centreert het expliciet en in alle browsers.
   Bewust géén `transform: translate(-50%, -50%)`: de hover-animatie van
   Webflow animeert zelf `transform` (scale) en zou dat overschrijven.
   -------------------------------------------------------------------------- */
/* `inset: 0` rekent t.o.v. de dichtstbijzijnde "positioned" voorouder. Bij de
   behandelingskaarten stond die op `static`, waardoor de pijl naar een
   grootouder sprong. Deze containers worden dus expliciet het referentiekader. */
.procedure-img,
.procedure-lightbox {
  position: relative;
}

.hover-arrow-wrapper {
  inset: 0;
  margin: auto;
  padding: .45em;
}

/* De pijl zelf midden in de witte cirkel. Op de Instagram-tegels ontbrak de
   `hover-arrow` klasse, waardoor de SVG als inline-element werd behandeld en
   er onderaan witruimte van de regelhoogte overbleef. */
.hover-arrow-wrapper > div {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.hover-arrow-wrapper svg {
  display: block;
}