/* Reserve a bit of space on the button for the flag */
/* Reserve space for the flag + a gap based on the actual flag size */
#country-filter-col.country-flag .btn {
  --flag-left: .50rem;     /* distance from the left edge of the button */
  --flag-w:    1.20em;     /* flag width */
  --flag-gap:  .35em;      /* space between flag and text */

  /* total left padding = left offset + flag width + gap */
  padding-left: calc(var(--flag-left) + var(--flag-w) + var(--flag-gap));
  position: relative; /* ensure ::before is positioned against the button */
}

/* Draw the flag */
#country-filter-col.country-flag .btn::before {
  content: "";
  position: absolute;
  left: var(--flag-left);
  top: 50%;
  transform: translateY(-50%);
  width: var(--flag-w);
  height: calc(var(--flag-w) * 0.75); /* keep ~4:3 aspect */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Country → SVG mapping (same paths you already have) */
#country-filter-col.se .btn::before { background-image: url("/assets/flag-icons/flags/4x3/se.svg"); }
#country-filter-col.dk .btn::before { background-image: url("/assets/flag-icons/flags/4x3/dk.svg"); }
#country-filter-col.no .btn::before { background-image: url("/assets/flag-icons/flags/4x3/no.svg"); }
#country-filter-col.fi .btn::before { background-image: url("/assets/flag-icons/flags/4x3/fi.svg"); }