.invibe-rewards-frontend-widget,
.invibe-rewards-product-message {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #d9dee8;
    border-radius: 6px;
    background: #fff
}

.invibe-rewards-product-badge,
.wlr-product-message,
.invibe-loyalty-badge {
    display: block;
    margin: 0 0 10px;
}

.invibe-loyalty-badge {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: var(--invibe-notice-product-padding-y-cards, 4px) var(--invibe-notice-product-padding-x-cards, 10px) !important;
    line-height: 1.4 !important;
    border-radius: var(--invibe-notice-product-radius-cards, 14px) !important;
    background: var(--invibe-notice-product-background-cards, #e9c4ff) !important;
    color: var(--invibe-notice-product-badge-text, #3d0f57) !important;
    border: var(--invibe-notice-product-border-width, 1px) solid var(--invibe-notice-product-badge-border, #9e52c7) !important;
    font-size: var(--invibe-notice-product-font-size, 0.85rem) !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.invibe-loyalty-badge.invibe-rewards-product-badge--cards {
    font-size: var(--invibe-notice-product-font-size-cards, 13px) !important;
}

.invibe-loyalty-badge.invibe-rewards-product-badge--single {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: var(--invibe-notice-product-padding-y-single, 8px) var(--invibe-notice-product-padding-x-single, 12px) !important;
    border-radius: var(--invibe-notice-product-radius-single, 14px) !important;
    border-width: var(--invibe-notice-product-border-width, 1px) !important;
    font-size: var(--invibe-notice-product-font-size-single, 16px) !important;
    background: var(--invibe-notice-product-background-single, #e9c4ff) !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

.invibe-rewards-product-badge .invibe-rewards-campaign-message {
    display: inline-block !important;
    width: auto;
    font-weight: 700;
}

.invibe-rewards-notice.product-notice {
    display: inline-block;
    width: fit-content;
    margin: 12px 0;
    padding: 10px 14px;
    border: 1px solid var(--invibe-notice-product-border, #b91c1c);
    border-radius: 6px;
    background-color: var(--invibe-notice-product-background, #dc2626);
    color: var(--invibe-notice-product-text, #fff);
    font-weight: 700;
    text-align: center;
}

.invibe-rewards-notice.product-notice strong {
    color: var(--invibe-notice-product-text, #fff);
}

.invibe-rewards-frontend-widget {
    display: grid;
    gap: 10px
}

.invibe-rewards-frontend-widget label {
    display: grid;
    gap: 5px
}

.invibe-rewards-frontend-widget input {
    max-width: 180px
}

.invibe-rewards-frontend-message {
    margin: 0
}

.invibe-rewards-shortcode {
    margin: 16px 0
}

.invibe-rewards-shortcode input {
    max-width: 100%;
    margin-right: 8px
}

.invibe-referral-link {
    display: flex;
    gap: 8px;
    align-items: center
}

.invibe-referral-link input {
    flex: 1
}

.invibe-rewards-history {
    overflow-x: auto
}

@media(max-width:600px) {
    .invibe-referral-link {
        display: grid
    }

    .invibe-referral-link input {
        margin: 0
    }

    .invibe-rewards-frontend-widget .button {
        width: max-content
    }
}