/* ---------------------------------------------------------------
   Focal-Point-Override
   Stapelt Bild, Lupen-Link und Hinweistext sauber untereinander
   und zentriert sie unter dem Bild.
   --------------------------------------------------------------- */

/* Lupen-Link, der im Hinweistext integriert ist (klickbares SVG). */
.focal-point-preview-link.focal-point-preview-link--minimal {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--gin-color-primary, #e5007d);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  vertical-align: middle;
}

.focal-point-preview-link.focal-point-preview-link--minimal:hover {
  color: var(--gin-color-primary-hover, #c5006e);
}

.focal-point-preview-link.focal-point-preview-link--minimal:hover svg {
  fill: var(--gin-color-primary-hover, #c5006e);
}

.focal-point-preview-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  vertical-align: middle;
}

/* Originaler Lupen-Link wird ausgeblendet, da die Lupe nun im
   Hinweistext integriert ist. */
.focal-point-preview-link.focal-point-preview-link--hidden {
  display: none !important;
}

/* Hinweistext als Blockelement unter dem Bild.
   Enthält Text + klickbare SVG-Lupe. */
.focal-point-help-text {
  display: block;
  width: 100%;
  color: var(--gin-color-text, #555);
  margin-top: 10px;
}

.focal-point-preview-link:before{
  content: none !important;
}