/**
 * Styles pour l'offre Poster Gratuit
 * Bannières de progression, badges et éléments visuels
 */

/* ==========================================
   BANNIÈRE DE PROGRESSION DANS LE MINI-PANIER
   ========================================== */

.ame-poster-progress-banner {
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    text-align: center;
}

/* État : Proche du seuil */
.ame-poster-progress-banner.nearly-there {
    background: linear-gradient(135deg, #FFF4D9 0%, #FFE8B3 100%);
    border: 2px solid #FFD239;
}

/* État : Seuil atteint */
.ame-poster-progress-banner.qualified {
    background: linear-gradient(135deg, #D4EDDA 0%, #C3E6CB 100%);
    border: 2px solid #28A745;
}

.ame-poster-progress-banner p {
    margin: 0 0 8px 0;
    font-weight: 600;
    font-size: 14px;
    color: #000;
}

.ame-poster-progress-banner.qualified p {
    margin-bottom: 0;
}

/* Barre de progression */
.progress-bar {
    width: 100%;
    height: 8px;
    background-color: #E0E0E0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFD239 0%, #F5BC00 100%);
    transition: width 0.3s ease;
    border-radius: 4px;
}

/* ==========================================
   BADGE "OFFERT" DANS LE PANIER
   ========================================== */

.ame-free-poster-badge {
    display: inline-block;
    background-color: #28A745;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    margin-top: 5px;
    text-transform: uppercase;
}

/* ==========================================
   ICÔNE DE CADENAS (PRODUIT NON SUPPRIMABLE)
   ========================================== */

.poster-auto-managed {
    cursor: help;
    font-size: 18px;
    display: inline-block;
    transition: transform 0.2s ease;
}

.poster-auto-managed:hover {
    transform: scale(1.1);
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    .ame-poster-progress-banner {
        padding: 10px 12px;
    }

    .ame-poster-progress-banner p {
        font-size: 13px;
    }

    .progress-bar {
        height: 6px;
    }

    .ame-free-poster-badge {
        font-size: 11px;
        padding: 3px 8px;
    }
}