/* Stylesheet für SF Socialmedia – Layout via CSS-Variablen steuerbar */

/* Wrapper: fixiert, sehr hoher z-index, Position links/oben mit px-Offsets */
.sf-sm-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  /* Startpunkt ist 0/0 – tatsächliche Verschiebung über translate und Variablen */
  transform:
    translate(var(--desktop-offset-x, 20px), var(--desktop-offset-y, 20px));
  display: flex;
  flex-direction: var(--desktop-direction, row);
  gap: var(--desktop-spacing, 8px);
  z-index: 2147; /* überlagert fixe Header etc. */
}

/* Nur Icons (keine Labels) */
.sf-sm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  width: calc(var(--desktop-icon-size, 24px) + 8px);
  height: calc(var(--desktop-icon-size, 24px) + 8px);
  /* kein Panel-Hintergrund – Icon selbst ist transparent */
  background: transparent;
  border-radius: 4px;
  outline: none;
}
.sf-sm-icon i {
  font-size: var(--desktop-icon-size, 24px);
}

/* Responsive: Mobil verwendet eigene Variablen */
@media (max-width: 781px) {
  .sf-sm-wrapper {
    transform:
      translate(var(--mobile-offset-x, 10px), var(--mobile-offset-y, 10px));
    flex-direction: var(--mobile-direction, row);
    gap: var(--mobile-spacing, 8px);
  }
  .sf-sm-icon {
    width: calc(var(--mobile-icon-size, 24px) + 8px);
    height: calc(var(--mobile-icon-size, 24px) + 8px);
  }
  .sf-sm-icon i {
    font-size: var(--mobile-icon-size, 24px);
  }
}

/* MODAL */
#sf-sm-modal {
  position: fixed;
  inset: 0;
  display: none;        /* per Klasse sichtbar */
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background: rgba(0,0,0,.5);
  z-index: 2147483000;  /* unter dem Content, aber über Seite */
}
#sf-sm-modal.sf-sm-modal-open {
  display: flex;
}
.sf-sm-modal-content {
  background: #fff;
  color: #111;
  border-radius: .5rem;
  padding: 1.25rem 1.5rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.sf-sm-modal-title {
  font-weight: 600;
  margin-bottom: .5rem;
}
.sf-sm-modal-message {
  margin: .5rem 0 1rem;
}
.sf-sm-modal-buttons {
  display: flex;
  justify-content: center;
  gap: .75rem;
}
.sf-sm-modal-buttons .button {
  cursor: pointer;
}