/* Basisstijlen */
.amrz-leaderboard {
  /* Gebruik max-width voor desktop en width % voor flexibiliteit */
  max-width: 800px; /* Maximale breedte op grote schermen */
  width: 95%; /* Neemt bijna volledige breedte op kleinere schermen */
  margin: 1em auto; /* Centreren en wat verticale ruimte */
  box-sizing: border-box; /* Zorgt dat padding/border binnen de width valt */
}

.amrz-leaderboard *,
.amrz-leaderboard *::before,
.amrz-leaderboard *::after {
  box-sizing: inherit; /* Erf box-sizing voor alle elementen */
}

.amrz-leaderboard .ranking {
  clear: both;
  font-size: 1.1rem; /* Iets kleiner basis font-size, kan per breakpoint aangepast */
  color: #fff;
}

.amrz-leaderboard .ranking .contain {
  padding: 0 1em; /* Iets minder horizontale padding standaard */
}

.amrz-leaderboard .ranking .ranking-table {
  margin: 0 auto;
  max-width: 100%;
  width: 100%; /* Zorg dat tabel container de beschikbare ruimte pakt */
}

.amrz-leaderboard .ranking .ranking-table .ranking-table-body {
  border: 0.063em solid #dbe2e8;
  border-radius: 0.375rem;
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.12);
  max-height: 24.625em;
  overflow-y: auto; /* Veranderd naar auto, scroll alleen als nodig */
  overflow-x: hidden; /* Voorkom onnodige horizontale scrollbar hier */
  -webkit-overflow-scrolling: touch;
}

.amrz-leaderboard .ranking .ranking-table .ranking-table-header-row {
  display: flex;
  flex-direction: row;
  font-weight: 700;
  justify-content: space-between;
  margin-bottom: 0.25em;
  padding-bottom: 0.175em;
  /* padding-right: 20px; Verwijderd - flex doet de spacing */
  padding-top: 0.175em;
  text-transform: uppercase;
  padding-left: 0.5em; /* Kleine padding links */
  padding-right: 0.5em; /* Kleine padding rechts */
}

.amrz-leaderboard .ranking .ranking-table .ranking-table-header-row .ranking-table-header-data {
  align-self: center;
  text-align: center;
  flex-basis: 20%; /* Geef een basis breedte mee */
  flex-grow: 1; /* Laat items groeien om ruimte te vullen */
  flex-shrink: 1; /* Laat items krimpen indien nodig */
  min-width: 0; /* Belangrijk om krimpen mogelijk te maken */
  padding: 0 0.25em; /* Ruimte tussen kolommen */
}

/* Geef specifieke kolommen eventueel meer ruimte indien nodig */
/* Voorbeeld: Geef de naamkolom (stel dat dit de 2e is) meer ruimte */
.amrz-leaderboard .ranking .ranking-table .ranking-table-header-row .ranking-table-header-data:nth-child(2) {
  flex-grow: 2; /* Deze kolom mag meer groeien dan de anderen */
  text-align: left; /* Namen vaak links uitgelijnd */
}
/* Voorbeeld: De rank kolom (1e) heeft misschien minder ruimte nodig */
.amrz-leaderboard .ranking .ranking-table .ranking-table-header-row .ranking-table-header-data:first-child {
  flex-basis: 10%;
  flex-grow: 0; /* Niet laten groeien */
  text-align: center;
}

.amrz-leaderboard .ranking .ranking-table .ranking-table-header-row .ranking-table-header-data .no-medal {
  height: 2.5em; /* Iets kleiner gemaakt */
  width: 2.5em; /* Iets kleiner gemaakt */
  margin-top: 0; /* Geen negatieve margin nodig in header */
  display: inline-block; /* Zorgt voor juiste positionering */
  vertical-align: middle;
}

/* Verwijder vaste breedte */
/* .amrz-leaderboard .ranking .ranking-table .ranking-table-header-row > div { */
/* width: 140px; */ /* VERWIJDERD */
/* } */

.amrz-leaderboard .ranking .ranking-table .ranking-table-row {
  background-color: #ffffff3d;
  border: 0.025em solid #3c164d;
  border-radius: 0.375rem;
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.12);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
  padding: 0.5em;
}

.amrz-leaderboard .ranking .ranking-table .ranking-table-row.row-footer {
  background: none !important; /* Geen achtergrondkleur voor footer */
  border: none;
  box-shadow: none !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
  padding: 0.5em;
  font-size: large;
  font-weight: 600;
}

/* Verwijder vaste breedte en gebruik flexbox properties */
.amrz-leaderboard .ranking .ranking-table .ranking-table-row > .ranking-table-data {
  /* width: 100px; */ /* VERWIJDERD */
  flex-basis: 20%; /* Zelfde basis als header */
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
  text-align: center;
  padding: 0 0.25em; /* Ruimte tussen kolommen */
  font-size: 0.9em; /* Iets kleinere font-size in de cellen */
  display: table;
}

/* Style specifieke data cellen, passend bij de header kolommen */
/* Voorbeeld: Rank kolom (1e) */
.amrz-leaderboard .ranking .ranking-table .ranking-table-row > .ranking-table-data:first-child {
  font-weight: 600;
  text-align: center;
  flex-basis: 10%;
  flex-grow: 1;
  /* Bevat de medaille of rank nummer */
}

/* Voorbeeld: Naam kolom (2e) */
.amrz-leaderboard .ranking .ranking-table .ranking-table-row > .ranking-table-data:nth-child(2) {
  font-size: 0.875em; /* Was al zo */
  font-weight: 500; /* Iets lichter dan rank */
  text-align: left; /* Naam links uitlijnen */
  flex-grow: 2; /* Meer ruimte voor de naam */
  word-break: break-word; /* Zorg dat lange namen afbreken */
}

/* Leader rij styling blijft grotendeels gelijk, alleen padding is aangepast door .ranking-table-row */
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-1,
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-2,
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-3 {
  /* Inherit padding from .ranking-table-row */
  /* background-color, border-radius, box-shadow, margin-bottom blijven */
  color: white; /* Was specifiek gezet via nth-child, kan hier */
  position: relative; /* Behoud voor eventuele pseudo-elementen */
  transition: all 0.2s ease; /* Behoud transitie */
}
/* Verwijder aparte padding top/bottom */
/* .amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-1, ... {
  padding-bottom: 0.875em;
  padding-top: 0.875em;
} */

/* Achtergronden voor leaders blijven hetzelfde */
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-1 {
  background:
    radial-gradient(ellipse farthest-corner at right bottom, #fedb37 0%, #fdb931 8%, #9f7928 30%, #8a6e2f 40%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, #ffffff 0%, #ffffac 8%, #d1b464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  border: 0.125em solid #b8860b;
}
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-1:hover {
  /* Hover effecten blijven */
}
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-2 {
  background:
    radial-gradient(ellipse farthest-corner at right bottom, #e0e0e0 0%, #c0c0c0 10%, #a9a9a9 35%, #888888 50%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, #ffffff 0%, #f8f8f8 10%, #d3d3d3 35%, #8d8d8d 62.5%, #6c6c6c 100%);
  border: 0.125em solid #808080;
}
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-2:hover {
  /* Hover effecten blijven */
}
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-3 {
  background:
    radial-gradient(ellipse farthest-corner at right bottom, #cd7f32 0%, #b87333 10%, #8c5523 35%, #6e3c1a 50%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, #e3a469 0%, #da9351 10%, #b57d45 35%, #844e20 62.5%, #5d3412 100%);
  border: 0.125em solid #6e3c1a;
}
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-3:hover {
  /* Hover effecten blijven */
}

/* Medaille styling - aanpassen grootte en positie */
.amrz-leaderboard .ranking .ranking-table .medal-bronze,
.amrz-leaderboard .ranking .ranking-table .medal-gold,
.amrz-leaderboard .ranking .ranking-table .medal-silver,
.amrz-leaderboard .ranking .ranking-table .no-medal {
  height: 2.5em; /* Kleinere, consistente grootte */
  width: 2.5em;
  margin: 0; /* Reset margin, positionering via flexbox align-items */
  display: inline-block; /* Zorgt dat het als block in de flow zit */
  vertical-align: middle; /* Helpt bij uitlijning met tekst indien nodig */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-1,
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-2,
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-3 {
  background-color: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.12);
  margin-bottom: 1.25em;
  padding-bottom: 0.875em;
  padding-top: 0.875em;
}

.amrz-leaderboard .ranking .ranking-table .medal-bronze,
.amrz-leaderboard .ranking .ranking-table .medal-gold,
.amrz-leaderboard .ranking .ranking-table .medal-silver {
  height: 3.875em;
  margin-left: 1em;
  margin-top: -1.363em;
  width: 3.875em;
}

.amrz-leaderboard .ranking .ranking-table .no-medal {
  margin-left: 1em;
  width: 3.875em;
  display: table-cell;
}

/* Specifieke achtergronden voor medailles */
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-1 .medal-gold {
  background-image: url("../images/medal-gold.svg");
  background-size: contain;
}
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-2 .medal-silver {
  background-image: url("../images/medal-silver.svg");
  background-size: contain;
}
.amrz-leaderboard .ranking .ranking-table .ranking-table-row-leader-3 .medal-bronze {
  background-image: url("../images/medal-bronze.svg");
  background-size: contain;
}
/* Placeholder voor no-medal indien nodig (bv. een simpel rondje of niks) */
/* .amrz-leaderboard .ranking .ranking-table .no-medal { background-image: url(...); } */

/* Verwijder :nth-child(-n+4) voor kleur, nu direct op leader classes gezet */
/* .amrz-leaderboard .ranking .ranking-table .ranking-table-row:nth-child(-n + 4) {
  color: white;
} */

/* Data cell styling (al grotendeels hierboven aangepakt) */
.amrz-leaderboard .ranking .ranking-table .ranking-table-data {
  /* align-self: center; Is nu op .ranking-table-row gezet */
  /* font-size: 1em; Is nu specifieker per cel gezet */
  /* text-align: center; Is nu specifieker per cel gezet */
}

/* --- Media Queries voor verdere aanpassingen --- */
.amrz-leaderboard .ranking .ranking-table .ranking-table-header-row .ranking-table-header-data:first-child {
  flex-basis: 16%;
  flex-grow: 0;
  text-align: center;
}
/* Tablets en kleinere schermen (max. 768px) */
@media screen and (max-width: 768px) {
  .amrz-leaderboard .ranking {
    font-size: 1rem; /* Kleinere basis font-size */
  }

  .amrz-leaderboard .ranking .contain {
    padding: 0 0.5em; /* Minder horizontale padding */
  }

  /* Eventueel kolom breedtes verder aanpassen indien nodig */
  /* Voorbeeld: Maak score kolommen kleiner */
  .amrz-leaderboard .ranking .ranking-table .ranking-table-header-row .ranking-table-header-data:nth-child(n + 3),
  .amrz-leaderboard .ranking .ranking-table .ranking-table-row > .ranking-table-data:nth-child(n + 3) {
    flex-basis: 15%;
  }
  .amrz-leaderboard .ranking .ranking-table .ranking-table-header-row .ranking-table-header-data:first-child {
    flex-basis: 16%;
    flex-grow: 0;
    text-align: center;
  }
}

/* Kleine mobiele schermen (max. 480px) */
@media screen and (max-width: 480px) {
  .amrz-leaderboard .ranking {
    font-size: 1rem; /* Nog kleinere basis font-size */
  }

  /* Zorg dat de naam kolom nog steeds genoeg ruimte heeft */
  .amrz-leaderboard .ranking .ranking-table .ranking-table-header-row .ranking-table-header-data:nth-child(2),
  .amrz-leaderboard .ranking .ranking-table .ranking-table-row > .ranking-table-data:nth-child(2) {
    flex-basis: 0%; /* Geef het expliciet meer basisruimte */
  }

  .amrz-leaderboard .ranking .ranking-table .ranking-table-header-row .ranking-table-header-data:first-child {
    flex-basis: 23%;
    flex-grow: 0;
    text-align: center;
  }
}

/* Oude media queries voor vaste breedte zijn niet meer nodig */
/* @media screen and (max-width: 1024px) { ... } */
/* @media screen and (max-width: 768px) { ... } */
/* @media screen and (max-width: 480px) { ... } */
.ranking-table-header-row {
  color: #fff;
}
.amrz-leaderboard-footer {
  display: flex;
  font-size: large;
  font-weight: 600;
  color: #fff;
}
.amrz-leaderboard-footer div:first-child {
  flex: 1;
}

.amrz-leaderboard-footer .total_sold {
  width: 22%;
}

.amrz-leaderboard-footer .total_sold_amount {
  width: 19%;
}