/* Styles pour la page de fidélité (rewards/loyalty_page.php) */

.loyalty-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #3b4446; /* Similaire au fond des sections du dashboard */
    border-radius: 8px;
}

.loyalty-section h4 {
    color: #55efc4; /* Vert menthe */
    margin-top: 0;
    border-bottom: 1px solid #525d60;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.loyalty-timer {
    text-align: center;
    font-size: 0.9em;
    color: #b2bec3;
    margin-bottom: 20px;
    font-style: italic;
}

.loyalty-progress-bar-container {
    width: 100%;
    background-color: #2d3436; /* Fond de la barre (très foncé) */
    border-radius: 10px;
    height: 25px;
    margin-bottom: 5px;
    overflow: hidden; /* Pour les coins arrondis de la barre interne */
    border: 1px solid #525d60;
}

.loyalty-progress-bar {
    height: 100%;
    background-color: #2ecc71; /* Vert pour la progression */
    color: #212628; /* Texte foncé sur la barre */
    text-align: center;
    line-height: 25px;
    font-weight: bold;
    font-size: 0.9em;
    border-radius: 9px 0 0 9px; /* Coins arrondis à gauche */
    transition: width 0.5s ease-in-out;
    white-space: nowrap;
}
.loyalty-progress-bar[style*="width: 100%"] { /* Si la barre est pleine */
    border-radius: 9px;
}


.loyalty-points-info {
    text-align: center;
    font-size: 0.95em;
    color: #dfe6e9;
    margin-bottom: 25px;
}

.loyalty-tiers-display {
    display: flex;
    justify-content: space-around; /* Ou space-between */
    align-items: flex-start; /* Aligner en haut */
    flex-wrap: wrap; /* Passer à la ligne si pas assez de place */
    gap: 15px; /* Espace entre les paliers */
    margin-top: 20px;
    position: relative; /* Pour la ligne de connexion potentielle */
}

/* Ligne de connexion (optionnel, plus complexe) */
/* .loyalty-tiers-display::before {
    content: '';
    position: absolute;
    left: 10%; 
    right: 10%;
    top: 25px; // Ajuster pour aligner avec le centre des cercles
    height: 2px;
    background-color: #525d60;
    z-index: 0;
} */

.loyalty-tier-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100px; /* Largeur de chaque item de palier */
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    position: relative; /* Pour la ligne de connexion */
    z-index: 1; /* Au-dessus de la ligne de connexion */
    background-color: #414c4f; /* Fond légèrement différent */
}
.loyalty-tier-item:hover {
    background-color: #4a5457;
}

.tier-icon-container {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border: 2px solid #7f8c8d; /* Gris par défaut */
}

.tier-icon {
    font-size: 28px !important; /* Forcer la taille de l'icône */
    color: #7f8c8d; /* Gris par défaut */
}

.loyalty-tier-item.tier-status-unlocked .tier-icon-container {
    border-color: #f1c40f; /* Jaune/Or pour débloqué non réclamé */
    /* Animation possible ici */
    animation: pulse-yellow 1.5s infinite;
}
.loyalty-tier-item.tier-status-unlocked .tier-icon {
    color: #f1c40f;
}

.loyalty-tier-item.tier-status-claimed .tier-icon-container {
    border-color: #2ecc71; /* Vert pour réclamé */
}
.loyalty-tier-item.tier-status-claimed .tier-icon {
    color: #2ecc71;
}

.tier-level-label {
    font-weight: bold;
    font-size: 0.9em;
    color: #dfe6e9;
}
.tier-points-label {
    font-size: 0.8em;
    color: #b2bec3;
}

/* Animation de pulsation */
@keyframes pulse-yellow {
    0% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(241, 196, 15, 0); }
    100% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0); }
}


/* Styles pour le contenu de la modale des récompenses */
#confirmation-modal .modal-reward-list { /* Appliquer cette classe au ul dans le JS */
    list-style: none;
    padding-left: 0;
    text-align: left; /* Aligner le texte des items à gauche */
}
#confirmation-modal .modal-reward-list li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.95em;
}
#confirmation-modal .modal-reward-list .reward-icon {
    font-size: 20px; /* Taille de l'icône de l'item */
    margin-right: 10px;
    color: #55efc4; /* Couleur par défaut pour les icônes d'item */
    width: 24px; /* Pour l'alignement si certaines icônes sont plus larges */
    text-align: center;
}
/* Si vous utilisez des images pour les icônes d'items : */
#confirmation-modal .modal-reward-list .reward-item-icon-img {
    width: 24px; /* Ajustez la taille */
    height: 24px; /* Ajustez la taille */
    margin-right: 10px;
    object-fit: contain; /* Pour que l'image ne soit pas déformée */
}

.modal-reward-icon {
    /* max-width: 48px;  Ou une autre valeur max que tu juges appropriée */
    /* max-height: 48px; Maintient la hauteur max aussi */
    width: auto;      /* Laisse le navigateur calculer la largeur pour garder le ratio */
    height: auto;     /* Laisse le navigateur calculer la hauteur pour garder le ratio */
    vertical-align: middle;
    margin-right: 8px; /* Un peu plus d'espace */
    /* Optionnel: pour les images avec fond transparent sur fond sombre */
    /* background-color: rgba(255, 255, 255, 0.1); */
    /* border-radius: 3px; */
}

#modal-message ul.loyalty-modal-rewards-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 10px;
    margin-left: auto;  /* Pour centrer un bloc qui a une largeur définie */
    margin-right: auto; /* Pour centrer un bloc qui a une largeur définie */
    width: fit-content; /* Fait en sorte que l'UL ne prenne que la largeur de son contenu */
    max-width: 90%;     /* Empêche de devenir trop large sur de grands écrans de modale */
}

#modal-message ul.loyalty-modal-rewards-list li {
    display: flex;
    align-items: center;     /* Alignement vertical */
    justify-content: center; /* <<<< AJOUT POUR CENTRER HORIZONTALEMENT LE CONTENU DU LI */
    margin-bottom: 8px;
    line-height: 1.4;
    text-align: center; /* Peut aider si le contenu du flex item a besoin d'être centré */
}