.hero-tags {
    display: inline-block;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0; /* Ajuste de padding */
    margin-top: 30px; /* Espaço acima da barra */
    transition: margin-top 0.3s ease; /* Adiciona transição suave */
}

.hero-tags.expanded {
    margin-top: 60px; /* Espaço maior quando expandido */
}

.hero-tags .action-button-container {
    position: relative;
    display: inline-block;
}

.hero-tags .action-button-container::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #ecebea;
    position: absolute;
    top: -10px; /* Espaço entre a barra e o texto */
    left: 0;
}

.hero-tags .action-button {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Use inherited text color */
    padding: 0; /* Remove padding */
    border: none; /* Remove border */
    background: none; /* Remove background */
    font-size: inherit; /* Inherit font size */
    margin-top: 3px; /* Espaço entre a barra e o texto */
    position: relative;
}

.hero-tags .action-button:hover {
    text-decoration: none; /* Ensure no underline on hover */
}

.separator-dot {
    margin: 0 0.2em; /* Adjust space between elements */
}

.editable {
    outline: none; /* Remove the box around editable items */
}

.editable[contenteditable="true"] {
    opacity: 0.8; /* Apply 80% opacity when editing */
}

.shake {
    animation: shake 0.3s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

/* Underline tags on hover */
.suffix-tag {
    text-decoration: none; /* Ensure no underline by default */
    font-family: var(--font-family-general);
    font-weight: var(--font-weight-general-regular);
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.4;
    font-size: var(--font-size-s);
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px;
    margin-left: .6em;
}

.suffix-tag:hover {
    text-decoration: underline; /* Underline on hover */
}