/* ── Country flag icons ──
 * Minimalist circular flag badges using inline SVG backgrounds.
 * Usage: <span class="flag flag-SE"></span>
 */

.flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Sweden ── */
.flag-SE {
  background-color: #006AA7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23006AA7'/%3E%3Crect x='0' y='40' width='100' height='20' fill='%23FECC00'/%3E%3Crect x='30' y='0' width='20' height='100' fill='%23FECC00'/%3E%3C/svg%3E");
}

/* ── Norway ── */
.flag-NO {
  background-color: #BA0C2F;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23BA0C2F'/%3E%3Crect x='0' y='38' width='100' height='24' fill='%23fff'/%3E%3Crect x='26' y='0' width='24' height='100' fill='%23fff'/%3E%3Crect x='0' y='42' width='100' height='16' fill='%23002868'/%3E%3Crect x='30' y='0' width='16' height='100' fill='%23002868'/%3E%3C/svg%3E");
}

/* ── France ── */
.flag-FR {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3CclipPath id='fc'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23fc)'%3E%3Crect width='34' height='100' fill='%23002395'/%3E%3Crect x='34' width='32' height='100' fill='%23fff'/%3E%3Crect x='66' width='34' height='100' fill='%23ED2939'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Finland ── */
.flag-FI {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23fff'/%3E%3Crect x='0' y='40' width='100' height='20' fill='%23003580'/%3E%3Crect x='30' y='0' width='20' height='100' fill='%23003580'/%3E%3C/svg%3E");
}

/* ── Denmark ── */
.flag-DK {
  background-color: #C8102E;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23C8102E'/%3E%3Crect x='0' y='40' width='100' height='20' fill='%23fff'/%3E%3Crect x='30' y='0' width='20' height='100' fill='%23fff'/%3E%3C/svg%3E");
}

/* ── Great Britain ── */
.flag-GB {
  background-color: #012169;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23012169'/%3E%3Cpath d='M50 0L100 50L50 100L0 50Z' fill='none'/%3E%3Crect x='0' y='40' width='100' height='20' fill='%23fff'/%3E%3Crect x='40' y='0' width='20' height='100' fill='%23fff'/%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%23fff' stroke-width='14'/%3E%3Cline x1='100' y1='0' x2='0' y2='100' stroke='%23fff' stroke-width='14'/%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%23C8102E' stroke-width='6'/%3E%3Cline x1='100' y1='0' x2='0' y2='100' stroke='%23C8102E' stroke-width='6'/%3E%3Crect x='0' y='43' width='100' height='14' fill='%23C8102E'/%3E%3Crect x='43' y='0' width='14' height='100' fill='%23C8102E'/%3E%3C/svg%3E");
}

/* ── Italy ── */
.flag-IT {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3CclipPath id='ic'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23ic)'%3E%3Crect width='34' height='100' fill='%23009246'/%3E%3Crect x='34' width='32' height='100' fill='%23fff'/%3E%3Crect x='66' width='34' height='100' fill='%23CE2B37'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Germany ── */
.flag-DE {
  background-color: #FFCE00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3CclipPath id='dc'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23dc)'%3E%3Crect width='100' height='34' fill='%23000'/%3E%3Crect y='34' width='100' height='32' fill='%23DD0000'/%3E%3Crect y='66' width='100' height='34' fill='%23FFCE00'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── United States ── */
.flag-US {
  background-color: #B22234;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3CclipPath id='uc'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23uc)'%3E%3Crect width='100' height='100' fill='%23B22234'/%3E%3Crect y='8' width='100' height='8' fill='%23fff'/%3E%3Crect y='23' width='100' height='8' fill='%23fff'/%3E%3Crect y='38' width='100' height='8' fill='%23fff'/%3E%3Crect y='54' width='100' height='8' fill='%23fff'/%3E%3Crect y='69' width='100' height='8' fill='%23fff'/%3E%3Crect y='84' width='100' height='8' fill='%23fff'/%3E%3Crect width='45' height='46' fill='%233C3B6E'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Australia ── */
.flag-AU {
  background-color: #012169;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3CclipPath id='ac'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23ac)'%3E%3Crect width='100' height='100' fill='%23012169'/%3E%3Crect y='40' width='50' height='6' fill='%23fff'/%3E%3Crect x='20' width='6' height='50' fill='%23fff'/%3E%3Crect y='42' width='50' height='2' fill='%23C8102E'/%3E%3Crect x='22' width='2' height='50' fill='%23C8102E'/%3E%3Ccircle cx='65' cy='70' r='4' fill='%23fff'/%3E%3Ccircle cx='80' cy='55' r='4' fill='%23fff'/%3E%3Ccircle cx='75' cy='78' r='3' fill='%23fff'/%3E%3Ccircle cx='55' cy='55' r='3' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── New Zealand ── */
.flag-NZ {
  background-color: #012169;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3CclipPath id='nzc'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23nzc)'%3E%3Crect width='100' height='100' fill='%23012169'/%3E%3Crect y='40' width='50' height='6' fill='%23fff'/%3E%3Crect x='20' width='6' height='50' fill='%23fff'/%3E%3Crect y='42' width='50' height='2' fill='%23C8102E'/%3E%3Crect x='22' width='2' height='50' fill='%23C8102E'/%3E%3Ccircle cx='72' cy='35' r='4' fill='%23C8102E' stroke='%23fff' stroke-width='1'/%3E%3Ccircle cx='82' cy='50' r='4' fill='%23C8102E' stroke='%23fff' stroke-width='1'/%3E%3Ccircle cx='76' cy='65' r='4' fill='%23C8102E' stroke='%23fff' stroke-width='1'/%3E%3Ccircle cx='65' cy='75' r='3' fill='%23C8102E' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Belgium ── */
.flag-BE {
  background-color: #FDDA24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3CclipPath id='bec'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23bec)'%3E%3Crect width='34' height='100' fill='%23000'/%3E%3Crect x='34' width='32' height='100' fill='%23FDDA24'/%3E%3Crect x='66' width='34' height='100' fill='%23EF3340'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Netherlands ── */
.flag-NL {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3CclipPath id='nlc'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23nlc)'%3E%3Crect width='100' height='34' fill='%23AE1C28'/%3E%3Crect y='34' width='100' height='32' fill='%23fff'/%3E%3Crect y='66' width='100' height='34' fill='%2321468B'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Size variants ── */
.flag-xs {
  width: 12px;
  height: 12px;
}

.flag-sm {
  width: 14px;
  height: 14px;
}

.flag-lg {
  width: 22px;
  height: 22px;
}

/* ── Flag as toggle (settings) ── */
.flag-toggle {
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.flag-toggle .flag {
  width: 24px;
  height: 24px;
  position: absolute;
  inset: 0;
  transition: opacity 0.15s ease;
}
.flag-toggle .flag-off {
  background-image: none !important;
  background-color: transparent;
  border: 2px solid var(--text-dim, #555);
  box-sizing: border-box;
  opacity: 1;
}
.flag-toggle .flag-on {
  opacity: 0;
}
.flag-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.flag-toggle input:checked ~ .flag-on { opacity: 1; }
.flag-toggle input:checked ~ .flag-off { opacity: 0; }