.ecm-shortcode--claim {
    width: 100%;

    .ecm-claim__btn {
        padding: 8px 14px;
    }

    &__btn-active {
        display: flex;
    }

    &__form-wrapper-active {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    &__form {
        width: 100%;
    }

    &__form-group {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .content-manager-textarea {
            width: auto;
        }

        .content-manager-input {
            width: auto;
        }

        .content-manager-required {
            padding: unset;
        }
    }

    &__response {
        margin-top: 16px;
        gap: 12px !important;
    }

    &__response-success {
        width: fit-content;
        background: #00AD6B !important;
        border-radius: 4px;
        border: none;
        padding: 16px;
    }

    &__response-error {
        width: fit-content;
        background: var(--ecm-warning) !important;
        border-radius: 4px;
        border: none;
        padding: 16px;
    }

    &__success-message,
    &__error-message,
    &__message,
    &__message-tooltip {
        margin: 0;
        color: #fff;
        font-size: 1rem;
        font-weight: 500;
    }

    &__badge,
    &__message {
        display: flex;
        align-items: center;
        width: fit-content;
        background: #00AD6B;
        border-radius: 4px;
        padding: 14px;
        gap: 12px;
    }

}

.ecm-shortcode--claim-badge {
    &__badge-text {
        margin: 0;
        color: #fff;
        font-size: 1rem;
        font-weight: 500;
    }
}

.ecm-shortcode--tooltip {
    width: 100%;
    display: flex;
    align-self: center;
    position: relative;
    cursor: pointer;

    &:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 10px);
        transform: translateX(-49%);
        background-color: #38d35e;
        color: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        white-space: nowrap;
        font-size: 14px;
        z-index: 10;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    &:hover::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 5px);
        border-width: 5px 5px 0 5px;
        border-style: solid;
        border-color: #38d35e transparent transparent transparent;
        z-index: 10;
    }
}