/* Button styles */
.buttons-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.glue-button {
  position: absolute;
  top: 13px; /* Changed from -4px to 16px (moved down 20px) */
  right: 12px;
  width: 50px; /* Increased by 10% from 56.5px */
  height: 20px; /* Increased by 10% from 22.6px */
  background: #39b54a;
  border: none;
  border-radius: 8px;
  color: white;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1; /* Make button appear above text */
}

.result-box:hover .glue-button {
  opacity: 1;
  visibility: visible;
}

.glue-button:hover {
  opacity: 0.8;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 19px; /* 24px horizontal margin between buttons */
  margin: 0 auto 26px; /* Changed from 66px to 33px (reduced by 33px) */
  position: relative; /* Add positioning context */
  width: fit-content; /* Add this to contain the buttons */
}

.subglubler-button,
.share-button,
.import-button,
.export-button {
  width: 104px; /* Increased by 10% from 118px */
  height: 19px; /* Increased by 10% from 21.8px */
  font-size: 11px; /* Increased by 10% from 12.7px */
  line-height: 19px; /* Match the height */
  color: white;
  font-weight: bold;
  text-align: center;
  border: none;
  border-radius: 10px; /* Rounded corners to the max */
  cursor: pointer;
}

.subglubler-button {
  background-color: #c7a3b3;
}

.share-button {
  background-color: #bec9ac;
}

.import-button {
  background-color: #667eea;
}

.export-button {
  background-color: #764ba2;
}