/* Contenedor principal en flujo normal */
.sbt-container {
  position: relative !important;
  display: inline-block !important;
}

/* Estilos para el botón "Share" (sin efectos hover modificados) */
.sbt-button {
  border: 1px solid #E84626 !important;
  background-color: transparent !important;
  color: #E84626 !important;
  font-size: 14px !important;
  padding: 8px !important;
  cursor: pointer !important;
}

/* Estilos para el icono */
.sbt-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sbt-icon svg {
  width: 20px !important;
  height: 18px !important;
  transition: fill 0.3s ease !important;
}
.sbt-icon svg line,
.sbt-icon svg circle {
  stroke: currentColor !important;
}

/* Panel de compartir en línea: se muestra a la derecha del botón y empuja el contenido */
.sbt-share-content {
  display: inline-block !important;
  vertical-align: top !important;
  width: 0 !important;            /* Inicialmente oculto */
  overflow: hidden !important;
  transition: width 0.3s ease !important;
  /* Opcional: puedes agregar un background o padding */
  /* background: #f9f9f9; */
}

/* Cuando el contenedor tiene la clase .active, el panel se expande a un ancho fijo */
.sbt-container.active .sbt-share-content {
  width: 100px !important;  /* Ajusta este valor según necesites */
}

/* ===== Variante móvil: botón a 100% y panel que entra DENTRO del botón ===== */
/* ===== Variant 100%: panel entra DENTRO con el ancho real del html_block ===== */
.sbt-container.sbt--full {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important; /* oculta el panel cuando está fuera */
}

/* Botón a 100% y texto siempre centrado */
.sbt-container.sbt--inset .sbt-button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding-right: 0 !important;                 /* se ajustará al abrir */
  transition: padding-right .3s ease !important;
}

/* Panel dentro del botón, ancho AUTO (= real del html_block) */
.sbt-container.sbt--inset .sbt-share-content {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;

  /* ancho real del contenido */
  width: auto !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  white-space: nowrap !important;

  /* sin fondo ni borde para que no haya separación visual */
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  /* oculto por defecto fuera del botón */
  transform: translateX(101%) !important;      /* 101% para que ni el borde asome */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform .3s ease, opacity .2s ease !important;

  z-index: 2 !important;
  pointer-events: auto !important;
}

/* Limpia márgenes del primer hijo por si el html_block trae padding/margin */
.sbt-container.sbt--inset .sbt-share-content > * {
  margin: 0 !important;
}

/* Al abrir: el panel entra y el botón reserva ese ancho a la derecha.
   Así el texto sigue centrado y NUNCA queda tapado. */
.sbt-container.sbt--inset.active .sbt-share-content {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.sbt-container.sbt--inset.active .sbt-button {
  padding-right: var(--sbt-panel-w, 0px) !important; /* reservado según ancho real */
}

/* Quitar hueco entre botón y panel en modo clásico (no inset) */
.sbt-container:not(.sbt--inset) {
  display: inline-flex !important;     /* elimina el whitespace entre hijos */
  align-items: stretch !important;
  gap: 0 !important;
  vertical-align: top !important;
}

.sbt-container:not(.sbt--inset) .sbt-button,
.sbt-container:not(.sbt--inset) .sbt-share-content {
  margin: 0 !important;                /* por si acaso */
}

/* El panel puede ser block dentro del flex sin problema */
.sbt-container:not(.sbt--inset) .sbt-share-content {
  display: block !important;
}