/*
 * Bandeau de promotion sur la page produit (App\Entity\Promotion / PromotionProduct /
 * FlashDealTimer, résolus par ProductController::resolveActivePromotion()). Affiche le type
 * de promo + le compte à rebours en tête de la fiche produit, le badge de réduction à côté
 * du prix, et réutilise .product-stock-meter (app.css) pour la barre de stock vendu.
 */

.promo-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1.2rem;
    padding: .9rem 1.2rem;
    border-radius: .4rem;
    color: #fff;
    margin-bottom: 1.2rem;
}

.promo-banner--flash {
    background: linear-gradient(90deg, #c8102e, #9c0d24);
}

.promo-banner--deal,
.promo-banner--promotionnel {
    background: linear-gradient(90deg, #f78116, #df6c07);
}

.promo-banner__label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 1.3rem;
    line-height: 1.3;
}

.promo-banner__countdown {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.2rem;
    white-space: nowrap;
}

.promo-banner__countdown label {
    margin: 0;
    font-weight: 400;
    opacity: .9;
}

.promo-banner__countdown .product-countdown {
    display: flex;
    gap: .3rem;
    font-weight: 700;
    background: rgba(0, 0, 0, .2);
    padding: .25rem .6rem;
    border-radius: .3rem;
}

.promo-discount-badge {
    display: inline-block;
    margin-left: .7rem;
    padding: .2rem .6rem;
    border-radius: .3rem;
    background: #fdece9;
    color: #c8102e;
    font-weight: 700;
    font-size: 1.3rem;
    vertical-align: middle;
}

.promo-stock-meter {
    margin-top: .6rem;
    max-width: 22rem;
}

@media (max-width: 575px) {
    .promo-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .promo-banner__countdown {
        font-size: 1.05rem;
    }

    .promo-discount-badge {
        margin-left: .4rem;
        font-size: 1.1rem;
    }
}