/* css/donor-badge.css */
/* Badge DONATEUR positionné au-dessus de l'avatar (profil) */
/* Isolation via .avatar-wrapper et .donor-badge-above pour ne rien casser ailleurs */

.avatar-wrapper { position: relative; display: inline-block; }

/* wrapper précis pour le badge au dessus */
.donor-badge-above {
  position: absolute;
  top: -8px;       /* légèrement au dessus du bord de l'avatar */
  right: -8px;     /* chevauche le coin droit */
  z-index: 30;
  pointer-events: auto;
}

/* badge circulaire jaune */
.donor-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  background: linear-gradient(180deg,#ffd94d 0%, #ffb400 100%); /* jaune dégradé */
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 -2px 6px rgba(0,0,0,0.08);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* icône cœur/blanc */
.donor-badge svg path { fill: #fff; }

/* hover léger */
.donor-badge:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 -2px 6px rgba(0,0,0,0.12);
}

/* si avatar taille réduite (mobile), réduire également le badge */
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
@media (max-width:480px){
  .avatar { width:72px; height:72px; }
  .donor-badge { width:34px; height:34px; }
  .donor-badge-above { top: -6px; right: -6px; }
}
/* ensure badge link inherits layout and pointer */
.avatar-wrapper { position: relative; display: inline-block; }
.donor-badge-above { position: absolute; top: -8px; right: -8px; z-index: 30; display:inline-block; text-decoration:none; }
.donor-badge { width: 40px; height: 40px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg,#ffd94d 0%, #ffb400 100%); box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 -2px 6px rgba(0,0,0,0.08); transition: transform .12s ease; }
.donor-badge svg path{ fill:#fff; }
.donor-badge-above:hover .donor-badge{ transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
.donor-badge-above { cursor: pointer; }
@media (max-width:480px){ .donor-badge { width:34px; height:34px; } .donor-badge-above { top:-6px; right:-6px; } }