/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

/* 🏅 Conteneur des badges */
.badges-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ✅ Section des badges débloqués et à débloquer */
.badges-unlocked, .badges-locked {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 badges par ligne */
    gap: 20px;
}

/* 🎖️ Style des badges */
.badge-item {
    position: relative;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    transition: transform 0.2s ease-in-out;
}

.badge-item img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 10px;
    transition: filter 0.3s ease-in-out;
}

/* 🔒 Badges verrouillés : Toujours en noir & blanc */
.badge-item.locked img {
    width: 200px;  /* Augmente la taille des badges verrouillés */
    height: 200px;
    filter: grayscale(100%);
}

/* 🔐 Cadenas sur les badges verrouillés */
.badge-item.locked::after {
    content: "🔒";
    font-size: 70px; /* Augmenter la taille du cadenas */
    color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}


/* 🛒 Le bouton "Acheter" est caché par défaut */
.buy-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 3;
}

/* 🎭 Effet au passage de la souris */
.badge-item.locked:hover .buy-badge {
    display: block; /* Affiche le bouton "Acheter" */
}

.badge-item.locked:hover::after {
    display: none; /* Cache le cadenas */
}

/* 🎨 Style du bouton Acheter */
.buy-button {
    background-color: #28a745;
    color: white;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
}

.buy-button:hover {
    background-color: #218838;
}



/* 🛠️ Style du conteneur du filtre */
.filter-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* 🎛️ Toggle switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #28a745;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* 🏷️ Texte du filtre */
.filter-label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* 🛠️ Cacher la section des badges verrouillés quand le filtre est activé */
.hide-locked .badges-locked, .hide-locked .locked-section-title {
    display: none;
}


/* 🎖️ Style du bouton de sélection */
.set-profile-badge {
    background-color: #ffcc00;
    color: black;
    padding: 8px 12px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.set-profile-badge:hover {
    background-color: #e6b800;
}

.set-profile-badge:disabled {
    background-color: #4caf50;
    color: white;
    cursor: default;
}

/* 🏆 Affichage du badge sélectionné à côté du pseudo */
.user-badge img.profile-badge {
    width: 20px; /* Augmente la taille */
    height: auto;
    margin-right: 5px;
    vertical-align: middle;
}