/* papelpass.css */

/* ============================================= */
/* Conteneur Général de la Page Papel Pass      */
/* ============================================= */
.papel-pass-page-container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #ccc;
}

/* ============================================= */
/* En-tête de Saison                            */
/* ============================================= */
.papel-pass-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #444;
    padding-bottom: 20px;
}
.papel-pass-banner {
    max-width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}
.papel-pass-header-info h1 {
    font-size: 2.5em;
    color: #4CAF50;
    margin-bottom: 5px;
}
.papel-pass-timer, .papel-pass-description {
    font-size: 1.1em;
    color: #aaa;
    margin-bottom: 10px;
}

/* ============================================= */
/* Section Progression Joueur                   */
/* ============================================= */
.papel-pass-player-progress-section {
    background-color: #2e2e2e;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    text-align: center;
}
.player-level { font-size: 1.4em; font-weight: bold; margin-bottom: 10px; }
.player-xp-bar-container { width: 80%; max-width: 500px; height: 25px; background-color: #555; border-radius: 12px; margin: 0 auto 5px auto; overflow: hidden;}
.player-xp-bar { height: 100%; background-color: #4CAF50; border-radius: 12px; text-align: center; line-height: 25px; color: white; font-weight: bold; transition: width 0.5s ease-in-out; }
.player-xp-text { font-size: 0.9em; color: #bbb; margin-bottom: 15px; }
.papel-pass-button { background-color: #555; color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 1em; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; margin: 5px; }
.papel-pass-button:hover { background-color: #666; }
.papel-pass-button.primary { background-color: #4CAF50; }
.papel-pass-button.primary:hover { background-color: #45a049; }
.papel-pass-button.attention { background-color: #f44336; animation: pulseAttention 2s infinite; }
.papel-pass-button.attention:hover { background-color: #e53935; }
@keyframes pulseAttention { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.premium-pass-status { 
margin-top: 20px; 
padding-top: 15px; 
border-top: 1px solid #444;
    /* Ajout pour gérer l'alignement du bouton et du <small> */
    display: flex;
    flex-direction: column; /* Met les enfants en colonne */
    align-items: center;   /* Centre les enfants horizontalement */
}

.premium-pass-status p { 
margin-bottom: 10px; }

.premium-pass-status button#btn-purchase-premium {
    margin-bottom: 5px; /* Espace entre le bouton et le <small> */
}

.premium-pass-status small {
    display: block; /* S'assurer qu'il prend sa propre ligne */
    font-size: 0.85em;
    color: #aaa;
}

.premium-active { color: #4CAF50; font-weight: bold; }
.premium-active .material-symbols-outlined { vertical-align: middle; margin-right: 5px; }

/* ============================================= */
/* Piste des Récompenses Défilante              */
/* ============================================= */
.papel-pass-rewards-track-container { position: relative; margin-bottom: 30px; }
.papel-pass-rewards-track { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 20px 10px; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.papel-pass-rewards-track::-webkit-scrollbar { display: none; }
.papel-pass-rewards-track { -ms-overflow-style: none; scrollbar-width: none; }


/* Style des Flèches Amélioré */
.scroll-arrow {
    position: absolute;
    top: 50%; /* Centre verticalement par rapport au conteneur */
    transform: translateY(-50%);
    background-color: #3a3a3a; /* Couleur de fond assortie aux cartes */
    color: #ccc; /* Couleur de l'icône/texte de la flèche */
    border: 1px solid #555; /* Bordure subtile */
    font-family: 'Material Symbols Outlined', sans-serif; /* Pour utiliser des icônes Material */
    font-size: 26px; /* Taille de l'icône */
    font-weight: bold;
    width: 25px; /* Largeur */
    height: 75px; /* Hauteur */
    line-height: normal; /* Centrer l'icône verticalement */
    text-align: center;
    cursor: pointer;
    z-index: 10; /* Au-dessus de la piste */
    border-radius: 8px; /* Coins arrondis */
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Ombre légère */
	display: flex;         /* Ajout */
    align-items: center;   /* Ajout: Centre verticalement */
    justify-content: center; /* Ajout: Centre horizontalement */
}


.scroll-arrow:hover {
    background-color: #4CAF50; /* Vert au survol */
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Si vous utilisez Material Symbols DANS le bouton */
.scroll-arrow .material-symbols-outlined {
    display: block; 
    line-height: inherit; /* Hérite du line-height du bouton pour centrage */
    font-size: 36px; /* Taille de l'ICÔNE flèche elle-même, ajustez */
}
.scroll-arrow.left-arrow {
    left: 5px; /* Positionne la flèche à 5px du bord GAUCHE du conteneur principal */
    content: "chevron_left"; /* Icône Material pour flèche gauche */
}

.scroll-arrow.right-arrow {
    right: 5px; /* Positionne la flèche à 5px du bord DROIT du conteneur principal */
    content: "chevron_right"; /* Icône Material pour flèche droite */
}

/* ============================================= */
/* Bloc de Palier Global (Conteneur LVL X)      */
/* ============================================= */
.papel-pass-tier-item {
    min-width: 220px; /* Largeur pour un LVL X, un peu plus large */
    max-width: 220px;
    /* background-color: #3a3a3a; Pas de fond ici, les cartes internes l'auront */
    border: none; /* Pas de bordure globale ici */
    border-radius: 8px; /* Coins arrondis pour le conteneur global du LVL X */
    margin-right: 15px;
    display: flex;
    flex-direction: column; /* Header LVL, puis carte Free, puis carte Premium */
    scroll-snap-align: center;
    /* Pas de survol global ici, le survol sera sur les tier-path-card */
}
.papel-pass-tier-item:last-child { margin-right: 0; }

/* En-tête du Niveau (LVL X) */
.tier-header {
    font-size: 1.3em; /* Plus grand */
    font-weight: bold;
    color: #fff;
    padding-top: 0;    /* Padding en haut */
    padding-left: 15px;   /* Padding à gauche */
    padding-right: 15px;  /* Padding à droite */
    padding-bottom: 0;    /* PAS DE PADDING EN BAS */
    width: 100%;
    text-align: center;
    border-radius: 6px 6px 6px 6px; /* Coins arrondis en haut */
    background-color: #2c2c2c; /* Fond pour l'en-tête LVL */
    background-size: contain; /* Ou cover, ajustez */
    background-repeat: no-repeat;
	background-position: center bottom;
    position: relative; /* Pour l'étoile major-reward */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 35px; /* Hauteur pour l'image de fond */
	box-sizing: border-box; /* Pour que le padding soit inclus dans la width/height */
	border: solid 1px rgba(0,0,0,0.2);
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	
}
.tier-header span:not(.major-reward-icon) { /* Pour que le texte LVL X soit au-dessus du fond */
    position: relative;
    z-index: 1;
    background-color: rgba(0,0,0,0.0); /* Léger fond pour lisibilité sur l'image */
    padding: 2px 8px;
    border-radius: 3px;
	
    /* Si vous voulez que le texte soit un peu décalé du bas pour ne pas coller aux lauriers (s'ils sont en bas) */
    /* vous pouvez ajouter un margin-bottom au span ou ajuster le line-height du .tier-header */
    /* ou s'assurer que min-height du .tier-header est suffisant */	
}
.major-reward-icon {
    color: gold;
    font-size: 1.3em;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}
.papel-pass-tier-item.major-reward .tier-header {
    /* Style spécifique pour header majeur si besoin, ex: bordure dorée */
    /* L'image de laurier est déjà gérée par background-image */
}

/* Carte individuelle pour chaque voie (Gratuit / Premium) */
.tier-path-card {
    background-color: #333; /* Fond pour chaque carte de voie */
     /* border: 1px solid #484848; Bordure generique */
    /* border-top: none; Pas de bordure haute si collée au header ou à une autre carte */
    width: 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 180px; /* Hauteur minimale pour chaque carte de voie, ajustez */
    position: relative; /* Pour les décorations de slot */
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    box-sizing: border-box; /* Important pour le padding */
	box-shadow: 0 4px 8px rgba(0, 0, 0,0.3);
	/* box-shadow: 0 4px 8px rgba(76, 175, 80,0.3); Vert*/
}
.tier-path-card:hover {
    background-color: #3d3d3d;
    transform: scale(1.02); /* Effet de survol sur la carte de voie */
    z-index: 5; /* Pour que l'ombre/transformation soit au-dessus des autres */
}

.free-path-card {
    border-radius: 6px 6px 6px 6px; /* Si c'est la seule ou la dernière carte */
    margin-bottom: 5px; /* Espace si deux cartes superposées */
	border: solid 2px rgba(76, 175, 80,0.4);
}
.papel-pass-tier-item .free-path-card + .premium-path-card { /* Si premium est APRES free */
    /* border-top: 1px solid #484848; Ligne de séparation si les deux sont présents */
    margin-bottom: 0;

}
.premium-path-card {
    border-radius: 6px 6px 6px 6px; /* Arrondir en bas */
    margin-top: 10px; /* Espace si deux cartes superposées */
	border: solid 2px rgba(255, 215, 0,0.3);
}
.premium-path-card.path-premium-locked-by-pass .path-items-preview .reward-item-preview {
    opacity: 0.5; /* Griser les items si pass requis mais joueur opt-in */
}


.path-card-header {
    font-size: 1em;
    font-weight: bold;
    color: rgba(76, 175, 80,1);
    margin-bottom: 12px;
    text-transform: uppercase;
}
.premium-path-card .path-card-header { /* Pour le "PREMIUM" en doré */
    color: gold;
    display: flex;
    align-items: center;
}
.premium-path-card .path-card-header .material-symbols-outlined {
    font-size: 1.2em;
    margin-right: 5px;
}

.path-card-items-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60px; /* Espace pour 1 item + indicateur '...' */
    width: 100%;
    margin-bottom: 10px;
}
.reward-item-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95em; /* Un peu plus grand */
    margin-bottom: 4px;
    width: 100%;
}
.reward-item-preview img,
.reward-item-preview .material-symbols-outlined {
    width: auto; /* Icônes un peu plus grandes */
    /*height: 64px; */
    margin-right: 0px;
    object-fit: contain;
    flex-shrink: 0;
}
.reward-item-preview .item-quantity { color: #ccc; font-size: 1.3em; margin-left: 0;  }
.reward-item-preview.special-next-pass { margin-top: 5px; }
.reward-item-preview.special-next-pass .material-symbols-outlined { color: #4CAF50; font-size: 30px; }
.reward-item-preview.special-next-pass .next-pass-text { font-weight: bold; font-size: 0.9em; color: #4CAF50; }

.more-items-indicator-on-card {
    font-size: 0.9em;
    color: #999;
    margin-top: 5px;
    font-style: italic;
}
.no-reward-item-on-card {
    color: #777;
    font-style: italic;
    font-size: 0.9em;
    line-height: 60px; /* Pour centrer verticalement */
}

/* Statut/Bouton en bas de chaque carte de voie */
.path-card-action-status {
    margin-top: auto; /* Pousse en bas */
    font-size: 0.9em;
    padding: 8px 10px; /* Plus grand */
    border-radius: 5px;
    width: 95%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: background-color 0.2s;
}
.path-card-action-status .material-symbols-outlined { margin-right: 6px; font-size: 1.3em; }

/* Styles des "boutons" de statut */
.path-card-action-status[data-status="opt_in_required"] { background-color: #0277bd; color: #e1f5fe; } /* Bleu clair */
.path-card-action-status[data-status="premium_pass_required"] { background-color: #795548; color: #d7ccc8; } /* Marron pour "Pass Premium" */
.path-card-action-status[data-status="locked"] { background-color: #424242; color: #bdbdbd; } /* Gris foncé */
.path-card-action-status[data-status="claimable"] { background-color: #4CAF50; color: white; } /* Vert */
.path-card-action-status[data-status="claimed"] { background-color: #388E3C; color: #c8e6c9; } /* Vert plus foncé */

/* Décorations de slot en bas des cartes de voie */
.slot-decoration {
    position: absolute;
    bottom: 5px; /* Ajustez */
    width: 70px; /* Ajustez la taille de votre image */
    height: 54px; /* Ajustez la taille de votre image */
    opacity: 0.3; /* Léger pour ne pas surcharger */
}
.slot-free-decoration { right: 0px; bottom: 0px; }
.slot-premium-decoration { left: 0px; bottom: 0px; }


/* Message si Aucune Saison Disponible (inchangé) */
.papel-pass-no-season { text-align: center; padding: 50px 20px; background-color: #2e2e2e; border-radius: 8px; }
.papel-pass-no-season h2 { font-size: 1.8em; color: #ddd; margin-bottom: 15px; }
.papel-pass-no-season p { font-size: 1.1em; color: #aaa; }

/* Styles pour la modale (inchangé) */
.loyalty-modal-rewards-list { list-style-type: none; padding-left: 0; text-align: left; }
.loyalty-modal-rewards-list li { padding: 5px 0; display: flex; align-items: center; }
.modal-reward-icon { 
	width: auto; 
	/* height: 24px;  */
	margin-right: 10px; 
    vertical-align: middle; /* Bon pour les images en ligne avec du texte */
    object-fit: contain; /* Pour que l'image ne soit pas déformée */ }
	
.modal-status-message { margin-top: 15px; padding: 10px; background-color: #2e2e2e; border-radius: 4px; text-align: center; font-weight: bold; }

/* Piste des Récompenses Défilante */
.papel-pass-rewards-track-container {
    position: relative; /* Indispensable pour positionner les flèches en absolu */
    margin-bottom: 30px;
    padding-left: 60px;  /* Espace À GAUCHE pour la flèche gauche */
    padding-right: 60px; /* Espace À DROITE pour la flèche droite */
    box-sizing: border-box;
}

.papel-pass-rewards-track {
    /* Le padding a été déplacé vers le conteneur parent */
    /* ... autres styles existants pour .papel-pass-rewards-track (display: flex, overflow-x, etc.) ... */
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    /* padding: 20px 0; /* Ancien padding, peut être supprimé ou réduit */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
/* ... (cacher scrollbar) ... */


.papel-pass-tier-item > hr.tier-path-separator {
    visibility: hidden; 
}

.loyalty-modal-rewards-list li.modal-reward-item-next-pass {
    font-weight: bold;
    color: gold; /* Couleur Premium pour le texte */
    font-size: 1.05em; 
    display: flex; /* Pour s'assurer que l'icône et le texte s'alignent bien */
    align-items: center;
}

.loyalty-modal-rewards-list li.modal-reward-item-next-pass .modal-reward-icon {
    /* S'assurer que la couleur gold est bien appliquée. 
       Si elle ne l'est pas, c'est qu'un autre style plus spécifique la surcharge. */
    /* color: gold !important; Utiliser !important pour le test, mais à éviter en production si possible */
    /* Vérifiez aussi si .modal-reward-icon a des propriétés de font-size ou line-height qui pourraient cacher l'icône si mal configurées pour les symboles */
}