.lightbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;

  h6 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--action-primary-default);
    margin: 0;
  }

  .header-actions {
    .closeicon {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: #777;
      transition: color 0.3s;

      &:hover {
        color: red;
      }
    }
  }
}

.step-content {
  padding: 20px;
  min-height: 260px;
  max-height: 260px;
  overflow: auto;

  h6 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
  }

  p {
    font-size: 1rem;
    margin-bottom: 10px;
  }

  ul {
    padding-left: 20px;
    margin-bottom: 20px;
    margin-top: 20px;

    li {
      font-size: 1rem;
      line-height: 1.5;
    }
  }
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid #ddd;

  .navigation-buttons-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;

    .step-indicator {
      font-size: 1rem;
      font-weight: 600;
      margin-right: 10px;
    }

    .prev-btn,
    .next-btn {
      padding: 8px 15px;
      font-size: 1rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      transition: background 0.3s;
    }

    .prev-btn {
      background: #ccc;
      color: #333;

      &:hover {
        background: #bbb;
      }
    }

    .next-btn {
      background: var(--action-primary-default);
      color: #fff;

      &:hover {
        background: var(--action-primary-default);
      }
    }
  }

  .navigation-buttons-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }
}

.speaker-icon {
  font-size: 21px;
  display: inline-block;
  position: relative;
  padding-top: 6px;
}

.speaker-icon.animated::after {
  content: '🔊'; /* Default Speaker Emoji */
  display: inline-block;
  animation: speaker-wave 1s infinite alternate;
}

@keyframes speaker-wave {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

.custom-button {
  display: flex;
  align-items: center;
  gap: 8px; /* Adjust spacing between icon and text */
}