/* Badge-only CSS for believe tenant
   Lightweight stylesheet loaded globally for product card badges.
   Full theme CSS is loaded separately on tenant-specific (MVC) pages. */

/* CSS variables scoped to badge elements only */
.believe.tenant-tag,
.believe.tenant-tag-product {
    --tenant-badge-color: #E61F2C;
    --tenant-secondary-color: #E61F2C;
    --tenant-text-color: #ffffff;
}

/* Base badge positioning (generic, applies to all tenants) */
.tenant-tag {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 6px 20px;
    background: var(--tenant-badge-color, var(--tenant-secondary-color));
    color: var(--tenant-text-color);
    font-size: 14px;
}

.tenant-tag-product {
    padding: 8px 16px;
    background: var(--tenant-badge-color, var(--tenant-secondary-color));
    color: var(--tenant-text-color);
    font-size: 14px;
}

/* Subdomain-scoped badge colors */
.believe.tenant-tag {
    background-color: var(--tenant-badge-color, var(--tenant-secondary-color));
    font: normal normal bold 12px/17px Red Hat Display;
    color: var(--tenant-text-color);
}

@media screen and (min-width: 768px) {
    .believe.tenant-tag {
        font-size: 20px;
    }
}

.believe.tenant-tag-product {
    background-color: var(--tenant-badge-color, var(--tenant-secondary-color));
    color: var(--tenant-text-color);
}

@media screen and (min-width: 768px) {
    .believe.tenant-tag-product {
        font-size: 20px;
    }
}

/* Responsive badge visibility */
.tenant-tag-product.mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    .tenant-tag-product.mobile {
        display: block;
        position: absolute;
        bottom: 42px;
        right: -40px;
        z-index: 1;
    }
    .tenant-tag-product.desktop {
        display: none;
    }
}

.mobile.believe.tenant-tag {
    display: none;
    position: initial;
    top: initial;
    right: initial;
    background-color: var(--tenant-badge-color, var(--tenant-secondary-color));
    color: var(--tenant-text-color);
    padding: 8px 16px;
    font: normal normal bold 12px/17px Red Hat Display;
}

@media screen and (min-width: 768px) {
    .mobile.believe.tenant-tag {
        display: none;
    }
}

.desktop.believe.tenant-tag {
    display: block;
    background-color: var(--tenant-badge-color, var(--tenant-secondary-color));
    color: var(--tenant-text-color);
    padding: 8px 16px;
    font: normal normal bold 12px/17px Red Hat Display;
}

@media screen and (min-width: 768px) {
    .desktop.believe.tenant-tag {
        display: block;
        font-size: 20px;
    }
}