.payment-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 10px;
    transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
    width: 100%;
    max-width: 135px;
    text-align: center;
    justify-content: flex-start; /* Aligner les éléments à gauche */
    padding: 10px;
    box-sizing: border-box; /* Inclure le padding dans la largeur totale */
    position: relative;
}

.payment-option:hover {
    background: #f8f9fa;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}

/* Cacher le bouton radio */
.payment-option input[type="radio"] {
    display: none; 
}

/* Icône de validation */
.check-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1.2rem;
    color: transparent; /* Masqué par défaut */
    transition: color 0.3s ease;
}

/* Afficher l'icône quand l'option est sélectionnée */
.payment-option:has(input[type="radio"]:checked) {
    border: 2px solid var(--primary); /* Changer la bordure */
}

.payment-option:has(input[type="radio"]:checked) .check-icon {
    color: var(--primary); /* Affiche l'icône */
}