// Promotional "Pro Features" upsell box.
.sp-real-pro-features-box {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #b7e4c7;
    border-radius: 8px;
    background: #f1fbf4;

    .sp-real-pro-features-box__title {
        margin: 0 0 8px;
        font-size: 16px;
        line-height: 1;
        font-weight: 500;
        color: #3D9E56;
    }

    .sp-real-pro-features-box__desc {
        margin: 0 0 12px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.5;
        color: #1e1e1e;
    }

    .sp-real-pro-features-box__list {
        margin: 0 0 16px;
        padding: 0;
        list-style: none;

        li {
            position: relative;
            margin: 0 0 6px;
            padding-left: 14px;
            font-size: 12px;
            line-height: 1.5;
            color: #4b5563;

            &::before {
                content: "–";
                position: absolute;
                left: 0;
                color: #4b5563;
            }
        }
    }

    .sp-real-pro-features-box__btn {
        width: 100%;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        color: #ffffff;
        background: #12a150;
        border-radius: 6px;
        transition: var(--sp-real-transition);

        &:hover,
        &:focus {
            color: #ffffff;
            background: #0e8442;
        }

        svg {
            width: 14px;
            height: 14px;
            color: #ffffff;
        }
    }
}

// Compact inline promo note.
.sp-real-pro-note-box {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #b7e4c7;
    border-radius: 8px;
    background: #f1fbf4;

    &__text {
        margin: 0;
        font-size: 13px;
        line-height: 1.6;
        color: #1e1e1e;

        strong {
            font-weight: 600;
        }
    }

    &__link {
        font-weight: 600;
        text-decoration: none;
        color: #3D9E56;

        &:hover,
        &:focus {
            color: #0e8442;
            text-decoration: underline;
        }
    }
}
.sp-real-pro-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    svg {
        display: block;
        flex-shrink: 0;
    }
}