/* Flag-inspired country colors */
:root {
    --flag-af: #d32011;
    --flag-al: #e41e20;
    --flag-dz: #006233;
    --flag-ad: #0018a8;
    --flag-ao: #ce1126;
    --flag-ai: #012169;
    --flag-aq: #ffffff;
    --flag-ag: #ce1126;
    --flag-ar: #74acdf;
    --flag-am: #d90012;
    --flag-aw: #418fde;
    --flag-au: #012169;
    --flag-at: #ed2939;
    --flag-az: #009639;
    --flag-bs: #00abc9;
    --flag-bh: #ce1126;
    --flag-bd: #006a4e;
    --flag-bb: #ffc72c;
    --flag-by: #009639;
    --flag-be: #000000;
    --flag-bz: #003f87;
    --flag-bj: #ffd100;
    --flag-bm: #ce1126;
    --flag-bt: #ff4e12;
    --flag-bo: #d52b1e;
    --flag-bq: #21468b;
    --flag-ba: #002395;
    --flag-bw: #6da9d2;
    --flag-br: #009739;
    --flag-io: #012169;
    --flag-vg: #1e90ff;
    --flag-bn: #ffd100;
    --flag-bg: #00966e;
    --flag-bf: #009e49;
    --flag-bi: #ce1126;
    --flag-cv: #003893;
    --flag-kh: #032ea1;
    --flag-cm: #009639;
    --flag-ca: #ff0000;
    --flag-ky: #012169;
    --flag-cf: #003082;
    --flag-td: #002664;
    --flag-cl: #d52b1e;
    --flag-cn: #de2910;
    --flag-cx: #012169;
    --flag-cc: #009639;
    --flag-co: #ffd100;
    --flag-km: #ffd100;
    --flag-cg: #009639;
    --flag-cd: #007fff;
    --flag-ck: #012169;
    --flag-cr: #002b7f;
    --flag-ci: #ff9a00;
    --flag-hr: #171796;
    --flag-cu: #002a8f;
    --flag-cw: #002395;
    --flag-cy: #d57800;
    --flag-cz: #11457e;
    --flag-dk: #c60c30;
    --flag-dj: #6ab2dd;
    --flag-dm: #009639;
    --flag-do: #002d62;
    --flag-ec: #ffd100;
    --flag-eg: #ce1126;
    --flag-sv: #0047ab;
    --flag-gq: #009639;
    --flag-er: #12ad2b;
    --flag-ee: #0072ce;
    --flag-sz: #3c5eb4;
    --flag-et: #009639;
    --flag-fk: #012169;
    --flag-fo: #ed2939;
    --flag-fj: #68bfe5;
    --flag-fi: #003580;
    --flag-fr: #0055a4;
    --flag-gf: #0055a4;
    --flag-pf: #ed2939;
    --flag-tf: #002395;
    --flag-ga: #009639;
    --flag-gm: #ce1126;
    --flag-ge: #ffffff;
    --flag-de: #dd0000;
    --flag-gh: #ce1126;
    --flag-gi: #da020e;
    --flag-gr: #0d5eaf;
    --flag-gl: #d00c33;
    --flag-gd: #ce1126;
    --flag-gp: #0055a4;
    --flag-gu: #002868;
    --flag-gt: #4997d0;
    --flag-gg: #e8112d;
    --flag-gn: #ce1126;
    --flag-gw: #ce1126;
    --flag-gy: #009639;
    --flag-ht: #00209f;
    --flag-hm: #012169;
    --flag-va: #ffd100;
    --flag-hn: #0073cf;
    --flag-hk: #de2910;
    --flag-hu: #436f4d;
    --flag-is: #003897;
    --flag-in: #ff9933;
    --flag-id: #ce1126;
    --flag-ir: #009639;
    --flag-iq: #ce1126;
    --flag-ie: #169b62;
    --flag-im: #ce1126;
    --flag-il: #0038b8;
    --flag-it: #009246;
    --flag-jm: #009639;
    --flag-jp: #bc002d;
    --flag-je: #e8112d;
    --flag-jo: #ce1126;
    --flag-kz: #00afca;
    --flag-ke: #ce1126;
    --flag-ki: #0052cc;
    --flag-kp: #024fa2;
    --flag-kr: #cd2e3a;
    --flag-kw: #007a3d;
    --flag-kg: #e4002b;
    --flag-la: #ce1126;
    --flag-lv: #9e3039;
    --flag-lb: #ed1c24;
    --flag-ls: #00209f;
    --flag-lr: #bf0a30;
    --flag-ly: #239e46;
    --flag-li: #002780;
    --flag-lt: #fdbf11;
    --flag-lu: #ed2939;
    --flag-mo: #de2910;
    --flag-mg: #fc3d32;
    --flag-mw: #ce1126;
    --flag-my: #010066;
    --flag-mv: #d21034;
    --flag-ml: #14b53a;
    --flag-mt: #cf142b;
    --flag-mh: #0052cc;
    --flag-mq: #0055a4;
    --flag-mr: #006233;
    --flag-mu: #ea010f;
    --flag-yt: #0055a4;
    --flag-mx: #006847;
    --flag-fm: #6797d6;
    --flag-md: #0033a0;
    --flag-mc: #ce1126;
    --flag-mn: #da2032;
    --flag-me: #c40308;
    --flag-ms: #012169;
    --flag-ma: #c1272d;
    --flag-mz: #009639;
    --flag-mm: #fecb00;
    --flag-na: #003580;
    --flag-nr: #002b7f;
    --flag-np: #dc143c;
    --flag-nl: #ae1c28;
    --flag-nc: #0055a4;
    --flag-nz: #012169;
    --flag-ni: #0067ce;
    --flag-ne: #0db02b;
    --flag-ng: #008751;
    --flag-nu: #fedd00;
    --flag-nf: #009639;
    --flag-mk: #d20000;
    --flag-mp: #0052cc;
    --flag-no: #ef2b2d;
    --flag-om: #ce1126;
    --flag-pk: #01411c;
    --flag-pw: #4aadd6;
    --flag-ps: #ce1126;
    --flag-pa: #da020e;
    --flag-pg: #ce1126;
    --flag-py: #d52b1e;
    --flag-pe: #d91023;
    --flag-ph: #0038a8;
    --flag-pn: #012169;
    --flag-pl: #dc143c;
    --flag-pt: #046a38;
    --flag-pr: #ed2939;
    --flag-qa: #8d1b3d;
    --flag-re: #0055a4;
    --flag-ro: #002b7f;
    --flag-ru: #d52b1e;
    --flag-rw: #00a1de;
    --flag-bl: #0055a4;
    --flag-sh: #012169;
    --flag-kn: #009639;
    --flag-lc: #65c5db;
    --flag-mf: #0055a4;
    --flag-pm: #0055a4;
    --flag-vc: #012169;
    --flag-ws: #ce1126;
    --flag-sm: #18a2b8;
    --flag-st: #12ad2b;
    --flag-sa: #006c35;
    --flag-sn: #00853f;
    --flag-rs: #c6363c;
    --flag-sc: #003d88;
    --flag-sl: #1eb53a;
    --flag-sg: #ed2939;
    --flag-sx: #0047ab;
    --flag-sk: #ee1c25;
    --flag-si: #005da4;
    --flag-sb: #0052cc;
    --flag-so: #4189dd;
    --flag-za: #007a4d;
    --flag-gs: #012169;
    --flag-ss: #0f47af;
    --flag-es: #aa151b;
    --flag-lk: #ff9900;
    --flag-sd: #d21034;
    --flag-sr: #377e3f;
    --flag-sj: #ef2b2d;
    --flag-se: #006aa7;
    --flag-ch: #da291c;
    --flag-sy: #ce1126;
    --flag-tw: #fe0000;
    --flag-tj: #006600;
    --flag-tz: #1eb53a;
    --flag-th: #ed1c24;
    --flag-tl: #dc143c;
    --flag-tg: #006a4e;
    --flag-tk: #012169;
    --flag-to: #c8102e;
    --flag-tt: #ce1126;
    --flag-tn: #e70013;
    --flag-tr: #e30a17;
    --flag-tm: #00b04f;
    --flag-tc: #012169;
    --flag-tv: #6797d6;
    --flag-ug: #fcdc04;
    --flag-ua: #005bbb;
    --flag-ae: #00732f;
    --flag-gb: #c8102e;
    --flag-us: #002f6c;
    --flag-um: #002868;
    --flag-uy: #0038a8;
    --flag-uz: #1eb53a;
    --flag-vu: #ce1126;
    --flag-ve: #ffd100;
    --flag-vn: #da251d;
    --flag-vi: #002868;
    --flag-wf: #0055a4;
    --flag-eh: #007a3d;
    --flag-ye: #ce1126;
    --flag-zm: #de2d26;
    --flag-zw: #009639;
}

/* Flag-based country colors - Border colors */
.filter-item[data-filter="af"] {
    border-color: var(--flag-af);
}

.filter-item[data-filter="al"] {
    border-color: var(--flag-al);
}

.filter-item[data-filter="dz"] {
    border-color: var(--flag-dz);
}

.filter-item[data-filter="ad"] {
    border-color: var(--flag-ad);
}

.filter-item[data-filter="ao"] {
    border-color: var(--flag-ao);
}

.filter-item[data-filter="ai"] {
    border-color: var(--flag-ai);
}

.filter-item[data-filter="aq"] {
    border-color: var(--flag-aq);
}

.filter-item[data-filter="ag"] {
    border-color: var(--flag-ag);
}

.filter-item[data-filter="ar"] {
    border-color: var(--flag-ar);
}

.filter-item[data-filter="am"] {
    border-color: var(--flag-am);
}

.filter-item[data-filter="aw"] {
    border-color: var(--flag-aw);
}

.filter-item[data-filter="au"] {
    border-color: var(--flag-au);
}

.filter-item[data-filter="at"] {
    border-color: var(--flag-at);
}

.filter-item[data-filter="az"] {
    border-color: var(--flag-az);
}

.filter-item[data-filter="bs"] {
    border-color: var(--flag-bs);
}

.filter-item[data-filter="bh"] {
    border-color: var(--flag-bh);
}

.filter-item[data-filter="bd"] {
    border-color: var(--flag-bd);
}

.filter-item[data-filter="bb"] {
    border-color: var(--flag-bb);
}

.filter-item[data-filter="by"] {
    border-color: var(--flag-by);
}

.filter-item[data-filter="be"] {
    border-color: var(--flag-be);
}

.filter-item[data-filter="bz"] {
    border-color: var(--flag-bz);
}

.filter-item[data-filter="bj"] {
    border-color: var(--flag-bj);
}

.filter-item[data-filter="bm"] {
    border-color: var(--flag-bm);
}

.filter-item[data-filter="bt"] {
    border-color: var(--flag-bt);
}

.filter-item[data-filter="bo"] {
    border-color: var(--flag-bo);
}

.filter-item[data-filter="bq"] {
    border-color: var(--flag-bq);
}

.filter-item[data-filter="ba"] {
    border-color: var(--flag-ba);
}

.filter-item[data-filter="bw"] {
    border-color: var(--flag-bw);
}

.filter-item[data-filter="br"] {
    border-color: var(--flag-br);
}

.filter-item[data-filter="io"] {
    border-color: var(--flag-io);
}

.filter-item[data-filter="vg"] {
    border-color: var(--flag-vg);
}

.filter-item[data-filter="bn"] {
    border-color: var(--flag-bn);
}

.filter-item[data-filter="bg"] {
    border-color: var(--flag-bg);
}

.filter-item[data-filter="bf"] {
    border-color: var(--flag-bf);
}

.filter-item[data-filter="bi"] {
    border-color: var(--flag-bi);
}

.filter-item[data-filter="cv"] {
    border-color: var(--flag-cv);
}

.filter-item[data-filter="kh"] {
    border-color: var(--flag-kh);
}

.filter-item[data-filter="cm"] {
    border-color: var(--flag-cm);
}

.filter-item[data-filter="ca"] {
    border-color: var(--flag-ca);
}

.filter-item[data-filter="ky"] {
    border-color: var(--flag-ky);
}

.filter-item[data-filter="cf"] {
    border-color: var(--flag-cf);
}

.filter-item[data-filter="td"] {
    border-color: var(--flag-td);
}

.filter-item[data-filter="cl"] {
    border-color: var(--flag-cl);
}

.filter-item[data-filter="cn"] {
    border-color: var(--flag-cn);
}

.filter-item[data-filter="cx"] {
    border-color: var(--flag-cx);
}

.filter-item[data-filter="cc"] {
    border-color: var(--flag-cc);
}

.filter-item[data-filter="co"] {
    border-color: var(--flag-co);
}

.filter-item[data-filter="km"] {
    border-color: var(--flag-km);
}

.filter-item[data-filter="cg"] {
    border-color: var(--flag-cg);
}

.filter-item[data-filter="cd"] {
    border-color: var(--flag-cd);
}

.filter-item[data-filter="ck"] {
    border-color: var(--flag-ck);
}

.filter-item[data-filter="cr"] {
    border-color: var(--flag-cr);
}

.filter-item[data-filter="ci"] {
    border-color: var(--flag-ci);
}

.filter-item[data-filter="hr"] {
    border-color: var(--flag-hr);
}

.filter-item[data-filter="cu"] {
    border-color: var(--flag-cu);
}

.filter-item[data-filter="cw"] {
    border-color: var(--flag-cw);
}

.filter-item[data-filter="cy"] {
    border-color: var(--flag-cy);
}

.filter-item[data-filter="cz"] {
    border-color: var(--flag-cz);
}

.filter-item[data-filter="dk"] {
    border-color: var(--flag-dk);
}

.filter-item[data-filter="dj"] {
    border-color: var(--flag-dj);
}

.filter-item[data-filter="dm"] {
    border-color: var(--flag-dm);
}

.filter-item[data-filter="do"] {
    border-color: var(--flag-do);
}

.filter-item[data-filter="ec"] {
    border-color: var(--flag-ec);
}

.filter-item[data-filter="eg"] {
    border-color: var(--flag-eg);
}

.filter-item[data-filter="sv"] {
    border-color: var(--flag-sv);
}

.filter-item[data-filter="gq"] {
    border-color: var(--flag-gq);
}

.filter-item[data-filter="er"] {
    border-color: var(--flag-er);
}

.filter-item[data-filter="ee"] {
    border-color: var(--flag-ee);
}

.filter-item[data-filter="sz"] {
    border-color: var(--flag-sz);
}

.filter-item[data-filter="et"] {
    border-color: var(--flag-et);
}

.filter-item[data-filter="fk"] {
    border-color: var(--flag-fk);
}

.filter-item[data-filter="fo"] {
    border-color: var(--flag-fo);
}

.filter-item[data-filter="fj"] {
    border-color: var(--flag-fj);
}

.filter-item[data-filter="fi"] {
    border-color: var(--flag-fi);
}

.filter-item[data-filter="fr"] {
    border-color: var(--flag-fr);
}

.filter-item[data-filter="gf"] {
    border-color: var(--flag-gf);
}

.filter-item[data-filter="pf"] {
    border-color: var(--flag-pf);
}

.filter-item[data-filter="tf"] {
    border-color: var(--flag-tf);
}

.filter-item[data-filter="ga"] {
    border-color: var(--flag-ga);
}

.filter-item[data-filter="gm"] {
    border-color: var(--flag-gm);
}

.filter-item[data-filter="ge"] {
    border-color: var(--flag-ge);
}

.filter-item[data-filter="de"] {
    border-color: var(--flag-de);
}

.filter-item[data-filter="gh"] {
    border-color: var(--flag-gh);
}

.filter-item[data-filter="gi"] {
    border-color: var(--flag-gi);
}

.filter-item[data-filter="gr"] {
    border-color: var(--flag-gr);
}

.filter-item[data-filter="gl"] {
    border-color: var(--flag-gl);
}

.filter-item[data-filter="gd"] {
    border-color: var(--flag-gd);
}

.filter-item[data-filter="gp"] {
    border-color: var(--flag-gp);
}

.filter-item[data-filter="gu"] {
    border-color: var(--flag-gu);
}

.filter-item[data-filter="gt"] {
    border-color: var(--flag-gt);
}

.filter-item[data-filter="gg"] {
    border-color: var(--flag-gg);
}

.filter-item[data-filter="gn"] {
    border-color: var(--flag-gn);
}

.filter-item[data-filter="gw"] {
    border-color: var(--flag-gw);
}

.filter-item[data-filter="gy"] {
    border-color: var(--flag-gy);
}

.filter-item[data-filter="ht"] {
    border-color: var(--flag-ht);
}

.filter-item[data-filter="hm"] {
    border-color: var(--flag-hm);
}

.filter-item[data-filter="va"] {
    border-color: var(--flag-va);
}

.filter-item[data-filter="hn"] {
    border-color: var(--flag-hn);
}

.filter-item[data-filter="hk"] {
    border-color: var(--flag-hk);
}

.filter-item[data-filter="hu"] {
    border-color: var(--flag-hu);
}

.filter-item[data-filter="is"] {
    border-color: var(--flag-is);
}

.filter-item[data-filter="in"] {
    border-color: var(--flag-in);
}

.filter-item[data-filter="id"] {
    border-color: var(--flag-id);
}

.filter-item[data-filter="ir"] {
    border-color: var(--flag-ir);
}

.filter-item[data-filter="iq"] {
    border-color: var(--flag-iq);
}

.filter-item[data-filter="ie"] {
    border-color: var(--flag-ie);
}

.filter-item[data-filter="im"] {
    border-color: var(--flag-im);
}

.filter-item[data-filter="il"] {
    border-color: var(--flag-il);
}

.filter-item[data-filter="it"] {
    border-color: var(--flag-it);
}

.filter-item[data-filter="jm"] {
    border-color: var(--flag-jm);
}

.filter-item[data-filter="jp"] {
    border-color: var(--flag-jp);
}

.filter-item[data-filter="je"] {
    border-color: var(--flag-je);
}

.filter-item[data-filter="jo"] {
    border-color: var(--flag-jo);
}

.filter-item[data-filter="kz"] {
    border-color: var(--flag-kz);
}

.filter-item[data-filter="ke"] {
    border-color: var(--flag-ke);
}

.filter-item[data-filter="ki"] {
    border-color: var(--flag-ki);
}

.filter-item[data-filter="kp"] {
    border-color: var(--flag-kp);
}

.filter-item[data-filter="kr"] {
    border-color: var(--flag-kr);
}

.filter-item[data-filter="kw"] {
    border-color: var(--flag-kw);
}

.filter-item[data-filter="kg"] {
    border-color: var(--flag-kg);
}

.filter-item[data-filter="la"] {
    border-color: var(--flag-la);
}

.filter-item[data-filter="lv"] {
    border-color: var(--flag-lv);
}

.filter-item[data-filter="lb"] {
    border-color: var(--flag-lb);
}

.filter-item[data-filter="ls"] {
    border-color: var(--flag-ls);
}

.filter-item[data-filter="lr"] {
    border-color: var(--flag-lr);
}

.filter-item[data-filter="ly"] {
    border-color: var(--flag-ly);
}

.filter-item[data-filter="li"] {
    border-color: var(--flag-li);
}

.filter-item[data-filter="lt"] {
    border-color: var(--flag-lt);
}

.filter-item[data-filter="lu"] {
    border-color: var(--flag-lu);
}

.filter-item[data-filter="mo"] {
    border-color: var(--flag-mo);
}

.filter-item[data-filter="mg"] {
    border-color: var(--flag-mg);
}

.filter-item[data-filter="mw"] {
    border-color: var(--flag-mw);
}

.filter-item[data-filter="my"] {
    border-color: var(--flag-my);
}

.filter-item[data-filter="mv"] {
    border-color: var(--flag-mv);
}

.filter-item[data-filter="ml"] {
    border-color: var(--flag-ml);
}

.filter-item[data-filter="mt"] {
    border-color: var(--flag-mt);
}

.filter-item[data-filter="mh"] {
    border-color: var(--flag-mh);
}

.filter-item[data-filter="mq"] {
    border-color: var(--flag-mq);
}

.filter-item[data-filter="mr"] {
    border-color: var(--flag-mr);
}

.filter-item[data-filter="mu"] {
    border-color: var(--flag-mu);
}

.filter-item[data-filter="yt"] {
    border-color: var(--flag-yt);
}

.filter-item[data-filter="mx"] {
    border-color: var(--flag-mx);
}

.filter-item[data-filter="fm"] {
    border-color: var(--flag-fm);
}

.filter-item[data-filter="md"] {
    border-color: var(--flag-md);
}

.filter-item[data-filter="mc"] {
    border-color: var(--flag-mc);
}

.filter-item[data-filter="mn"] {
    border-color: var(--flag-mn);
}

.filter-item[data-filter="me"] {
    border-color: var(--flag-me);
}

.filter-item[data-filter="ms"] {
    border-color: var(--flag-ms);
}

.filter-item[data-filter="ma"] {
    border-color: var(--flag-ma);
}

.filter-item[data-filter="mz"] {
    border-color: var(--flag-mz);
}

.filter-item[data-filter="mm"] {
    border-color: var(--flag-mm);
}

.filter-item[data-filter="na"] {
    border-color: var(--flag-na);
}

.filter-item[data-filter="nr"] {
    border-color: var(--flag-nr);
}

.filter-item[data-filter="np"] {
    border-color: var(--flag-np);
}

.filter-item[data-filter="nl"] {
    border-color: var(--flag-nl);
}

.filter-item[data-filter="nc"] {
    border-color: var(--flag-nc);
}

.filter-item[data-filter="nz"] {
    border-color: var(--flag-nz);
}

.filter-item[data-filter="ni"] {
    border-color: var(--flag-ni);
}

.filter-item[data-filter="ne"] {
    border-color: var(--flag-ne);
}

.filter-item[data-filter="ng"] {
    border-color: var(--flag-ng);
}

.filter-item[data-filter="nu"] {
    border-color: var(--flag-nu);
}

.filter-item[data-filter="nf"] {
    border-color: var(--flag-nf);
}

.filter-item[data-filter="mk"] {
    border-color: var(--flag-mk);
}

.filter-item[data-filter="mp"] {
    border-color: var(--flag-mp);
}

.filter-item[data-filter="no"] {
    border-color: var(--flag-no);
}

.filter-item[data-filter="om"] {
    border-color: var(--flag-om);
}

.filter-item[data-filter="pk"] {
    border-color: var(--flag-pk);
}

.filter-item[data-filter="pw"] {
    border-color: var(--flag-pw);
}

.filter-item[data-filter="ps"] {
    border-color: var(--flag-ps);
}

.filter-item[data-filter="pa"] {
    border-color: var(--flag-pa);
}

.filter-item[data-filter="pg"] {
    border-color: var(--flag-pg);
}

.filter-item[data-filter="py"] {
    border-color: var(--flag-py);
}

.filter-item[data-filter="pe"] {
    border-color: var(--flag-pe);
}

.filter-item[data-filter="ph"] {
    border-color: var(--flag-ph);
}

.filter-item[data-filter="pn"] {
    border-color: var(--flag-pn);
}

.filter-item[data-filter="pl"] {
    border-color: var(--flag-pl);
}

.filter-item[data-filter="pt"] {
    border-color: var(--flag-pt);
}

.filter-item[data-filter="pr"] {
    border-color: var(--flag-pr);
}

.filter-item[data-filter="qa"] {
    border-color: var(--flag-qa);
}

.filter-item[data-filter="re"] {
    border-color: var(--flag-re);
}

.filter-item[data-filter="ro"] {
    border-color: var(--flag-ro);
}

.filter-item[data-filter="ru"] {
    border-color: var(--flag-ru);
}

.filter-item[data-filter="rw"] {
    border-color: var(--flag-rw);
}

.filter-item[data-filter="bl"] {
    border-color: var(--flag-bl);
}

.filter-item[data-filter="sh"] {
    border-color: var(--flag-sh);
}

.filter-item[data-filter="kn"] {
    border-color: var(--flag-kn);
}

.filter-item[data-filter="lc"] {
    border-color: var(--flag-lc);
}

.filter-item[data-filter="mf"] {
    border-color: var(--flag-mf);
}

.filter-item[data-filter="pm"] {
    border-color: var(--flag-pm);
}

.filter-item[data-filter="vc"] {
    border-color: var(--flag-vc);
}

.filter-item[data-filter="ws"] {
    border-color: var(--flag-ws);
}

.filter-item[data-filter="sm"] {
    border-color: var(--flag-sm);
}

.filter-item[data-filter="st"] {
    border-color: var(--flag-st);
}

.filter-item[data-filter="sa"] {
    border-color: var(--flag-sa);
}

.filter-item[data-filter="sn"] {
    border-color: var(--flag-sn);
}

.filter-item[data-filter="rs"] {
    border-color: var(--flag-rs);
}

.filter-item[data-filter="sc"] {
    border-color: var(--flag-sc);
}

.filter-item[data-filter="sl"] {
    border-color: var(--flag-sl);
}

.filter-item[data-filter="sg"] {
    border-color: var(--flag-sg);
}

.filter-item[data-filter="sx"] {
    border-color: var(--flag-sx);
}

.filter-item[data-filter="sk"] {
    border-color: var(--flag-sk);
}

.filter-item[data-filter="si"] {
    border-color: var(--flag-si);
}

.filter-item[data-filter="sb"] {
    border-color: var(--flag-sb);
}

.filter-item[data-filter="so"] {
    border-color: var(--flag-so);
}

.filter-item[data-filter="za"] {
    border-color: var(--flag-za);
}

.filter-item[data-filter="gs"] {
    border-color: var(--flag-gs);
}

.filter-item[data-filter="ss"] {
    border-color: var(--flag-ss);
}

.filter-item[data-filter="es"] {
    border-color: var(--flag-es);
}

.filter-item[data-filter="lk"] {
    border-color: var(--flag-lk);
}

.filter-item[data-filter="sd"] {
    border-color: var(--flag-sd);
}

.filter-item[data-filter="sr"] {
    border-color: var(--flag-sr);
}

.filter-item[data-filter="sj"] {
    border-color: var(--flag-sj);
}

.filter-item[data-filter="se"] {
    border-color: var(--flag-se);
}

.filter-item[data-filter="ch"] {
    border-color: var(--flag-ch);
}

.filter-item[data-filter="sy"] {
    border-color: var(--flag-sy);
}

.filter-item[data-filter="tw"] {
    border-color: var(--flag-tw);
}

.filter-item[data-filter="tj"] {
    border-color: var(--flag-tj);
}

.filter-item[data-filter="tz"] {
    border-color: var(--flag-tz);
}

.filter-item[data-filter="th"] {
    border-color: var(--flag-th);
}

.filter-item[data-filter="tl"] {
    border-color: var(--flag-tl);
}

.filter-item[data-filter="tg"] {
    border-color: var(--flag-tg);
}

.filter-item[data-filter="tk"] {
    border-color: var(--flag-tk);
}

.filter-item[data-filter="to"] {
    border-color: var(--flag-to);
}

.filter-item[data-filter="tt"] {
    border-color: var(--flag-tt);
}

.filter-item[data-filter="tn"] {
    border-color: var(--flag-tn);
}

.filter-item[data-filter="tr"] {
    border-color: var(--flag-tr);
}

.filter-item[data-filter="tm"] {
    border-color: var(--flag-tm);
}

.filter-item[data-filter="tc"] {
    border-color: var(--flag-tc);
}

.filter-item[data-filter="tv"] {
    border-color: var(--flag-tv);
}

.filter-item[data-filter="ug"] {
    border-color: var(--flag-ug);
}

.filter-item[data-filter="ua"] {
    border-color: var(--flag-ua);
}

.filter-item[data-filter="ae"] {
    border-color: var(--flag-ae);
}

.filter-item[data-filter="gb"] {
    border-color: var(--flag-gb);
}

.filter-item[data-filter="us"] {
    border-color: var(--flag-us);
}

.filter-item[data-filter="um"] {
    border-color: var(--flag-um);
}

.filter-item[data-filter="uy"] {
    border-color: var(--flag-uy);
}

.filter-item[data-filter="uz"] {
    border-color: var(--flag-uz);
}

.filter-item[data-filter="vu"] {
    border-color: var(--flag-vu);
}

.filter-item[data-filter="ve"] {
    border-color: var(--flag-ve);
}

.filter-item[data-filter="vn"] {
    border-color: var(--flag-vn);
}

.filter-item[data-filter="vi"]:hover, .filter-item[data-filter="vi"].active {
    background-color: var(--flag-vi);
    color: #ffffff;
}

.filter-item[data-filter="wf"]:hover, .filter-item[data-filter="wf"].active {
    background-color: var(--flag-wf);
    color: #ffffff;
}

.filter-item[data-filter="eh"]:hover, .filter-item[data-filter="eh"].active {
    background-color: var(--flag-eh);
    color: #ffffff;
}

.filter-item[data-filter="ye"]:hover, .filter-item[data-filter="ye"].active {
    background-color: var(--flag-ye);
    color: #ffffff;
}

.filter-item[data-filter="zm"]:hover, .filter-item[data-filter="zm"].active {
    background-color: var(--flag-zm);
    color: #ffffff;
}

.filter-item[data-filter="zw"]:hover, .filter-item[data-filter="zw"].active {
    background-color: var(--flag-zw);
    color: #ffffff;
}

"] { border-color: var(--flag-vi); }
.filter-item[data-filter="wf"] {
    border-color: var(--flag-wf);
}

.filter-item[data-filter="eh"] {
    border-color: var(--flag-eh);
}

.filter-item[data-filter="ye"] {
    border-color: var(--flag-ye);
}

.filter-item[data-filter="zm"] {
    border-color: var(--flag-zm);
}

.filter-item[data-filter="zw"] {
    border-color: var(--flag-zw);
}

/* Hover and active states with intelligent text color contrast */
.filter-item[data-filter="af"]:hover, .filter-item[data-filter="af"].active {
    background-color: var(--flag-af);
    color: #ffffff;
}

.filter-item[data-filter="al"]:hover, .filter-item[data-filter="al"].active {
    background-color: var(--flag-al);
    color: #ffffff;
}

.filter-item[data-filter="dz"]:hover, .filter-item[data-filter="dz"].active {
    background-color: var(--flag-dz);
    color: #ffffff;
}

.filter-item[data-filter="ad"]:hover, .filter-item[data-filter="ad"].active {
    background-color: var(--flag-ad);
    color: #ffffff;
}

.filter-item[data-filter="ao"]:hover, .filter-item[data-filter="ao"].active {
    background-color: var(--flag-ao);
    color: #ffffff;
}

.filter-item[data-filter="ai"]:hover, .filter-item[data-filter="ai"].active {
    background-color: var(--flag-ai);
    color: #ffffff;
}

.filter-item[data-filter="aq"]:hover, .filter-item[data-filter="aq"].active {
    background-color: var(--flag-aq);
    color: #000000;
}

.filter-item[data-filter="ag"]:hover, .filter-item[data-filter="ag"].active {
    background-color: var(--flag-ag);
    color: #ffffff;
}

.filter-item[data-filter="ar"]:hover, .filter-item[data-filter="ar"].active {
    background-color: var(--flag-ar);
    color: #000000;
}

.filter-item[data-filter="am"]:hover, .filter-item[data-filter="am"].active {
    background-color: var(--flag-am);
    color: #ffffff;
}

.filter-item[data-filter="aw"]:hover, .filter-item[data-filter="aw"].active {
    background-color: var(--flag-aw);
    color: #ffffff;
}

.filter-item[data-filter="au"]:hover, .filter-item[data-filter="au"].active {
    background-color: var(--flag-au);
    color: #ffffff;
}

.filter-item[data-filter="at"]:hover, .filter-item[data-filter="at"].active {
    background-color: var(--flag-at);
    color: #ffffff;
}

.filter-item[data-filter="az"]:hover, .filter-item[data-filter="az"].active {
    background-color: var(--flag-az);
    color: #ffffff;
}

.filter-item[data-filter="bs"]:hover, .filter-item[data-filter="bs"].active {
    background-color: var(--flag-bs);
    color: #000000;
}

.filter-item[data-filter="bh"]:hover, .filter-item[data-filter="bh"].active {
    background-color: var(--flag-bh);
    color: #ffffff;
}

.filter-item[data-filter="bd"]:hover, .filter-item[data-filter="bd"].active {
    background-color: var(--flag-bd);
    color: #ffffff;
}

.filter-item[data-filter="bb"]:hover, .filter-item[data-filter="bb"].active {
    background-color: var(--flag-bb);
    color: #000000;
}

.filter-item[data-filter="by"]:hover, .filter-item[data-filter="by"].active {
    background-color: var(--flag-by);
    color: #ffffff;
}

.filter-item[data-filter="be"]:hover, .filter-item[data-filter="be"].active {
    background-color: var(--flag-be);
    color: #ffffff;
}

.filter-item[data-filter="bz"]:hover, .filter-item[data-filter="bz"].active {
    background-color: var(--flag-bz);
    color: #ffffff;
}

.filter-item[data-filter="bj"]:hover, .filter-item[data-filter="bj"].active {
    background-color: var(--flag-bj);
    color: #000000;
}

.filter-item[data-filter="bm"]:hover, .filter-item[data-filter="bm"].active {
    background-color: var(--flag-bm);
    color: #ffffff;
}

.filter-item[data-filter="bt"]:hover, .filter-item[data-filter="bt"].active {
    background-color: var(--flag-bt);
    color: #ffffff;
}

.filter-item[data-filter="bo"]:hover, .filter-item[data-filter="bo"].active {
    background-color: var(--flag-bo);
    color: #ffffff;
}

.filter-item[data-filter="bq"]:hover, .filter-item[data-filter="bq"].active {
    background-color: var(--flag-bq);
    color: #ffffff;
}

.filter-item[data-filter="ba"]:hover, .filter-item[data-filter="ba"].active {
    background-color: var(--flag-ba);
    color: #ffffff;
}

.filter-item[data-filter="bw"]:hover, .filter-item[data-filter="bw"].active {
    background-color: var(--flag-bw);
    color: #000000;
}

.filter-item[data-filter="br"]:hover, .filter-item[data-filter="br"].active {
    background-color: var(--flag-br);
    color: #ffffff;
}

.filter-item[data-filter="io"]:hover, .filter-item[data-filter="io"].active {
    background-color: var(--flag-io);
    color: #ffffff;
}

.filter-item[data-filter="vg"]:hover, .filter-item[data-filter="vg"].active {
    background-color: var(--flag-vg);
    color: #ffffff;
}

.filter-item[data-filter="bn"]:hover, .filter-item[data-filter="bn"].active {
    background-color: var(--flag-bn);
    color: #000000;
}

.filter-item[data-filter="bg"]:hover, .filter-item[data-filter="bg"].active {
    background-color: var(--flag-bg);
    color: #ffffff;
}

.filter-item[data-filter="bf"]:hover, .filter-item[data-filter="bf"].active {
    background-color: var(--flag-bf);
    color: #ffffff;
}

.filter-item[data-filter="bi"]:hover, .filter-item[data-filter="bi"].active {
    background-color: var(--flag-bi);
    color: #ffffff;
}

.filter-item[data-filter="cv"]:hover, .filter-item[data-filter="cv"].active {
    background-color: var(--flag-cv);
    color: #ffffff;
}

.filter-item[data-filter="kh"]:hover, .filter-item[data-filter="kh"].active {
    background-color: var(--flag-kh);
    color: #ffffff;
}

.filter-item[data-filter="cm"]:hover, .filter-item[data-filter="cm"].active {
    background-color: var(--flag-cm);
    color: #ffffff;
}

.filter-item[data-filter="ca"]:hover, .filter-item[data-filter="ca"].active {
    background-color: var(--flag-ca);
    color: #ffffff;
}

.filter-item[data-filter="ky"]:hover, .filter-item[data-filter="ky"].active {
    background-color: var(--flag-ky);
    color: #ffffff;
}

.filter-item[data-filter="cf"]:hover, .filter-item[data-filter="cf"].active {
    background-color: var(--flag-cf);
    color: #ffffff;
}

.filter-item[data-filter="td"]:hover, .filter-item[data-filter="td"].active {
    background-color: var(--flag-td);
    color: #ffffff;
}

.filter-item[data-filter="cl"]:hover, .filter-item[data-filter="cl"].active {
    background-color: var(--flag-cl);
    color: #ffffff;
}

.filter-item[data-filter="cn"]:hover, .filter-item[data-filter="cn"].active {
    background-color: var(--flag-cn);
    color: #ffffff;
}

.filter-item[data-filter="cx"]:hover, .filter-item[data-filter="cx"].active {
    background-color: var(--flag-cx);
    color: #ffffff;
}

.filter-item[data-filter="cc"]:hover, .filter-item[data-filter="cc"].active {
    background-color: var(--flag-cc);
    color: #ffffff;
}

.filter-item[data-filter="co"]:hover, .filter-item[data-filter="co"].active {
    background-color: var(--flag-co);
    color: #000000;
}

.filter-item[data-filter="km"]:hover, .filter-item[data-filter="km"].active {
    background-color: var(--flag-km);
    color: #000000;
}

.filter-item[data-filter="cg"]:hover, .filter-item[data-filter="cg"].active {
    background-color: var(--flag-cg);
    color: #ffffff;
}

.filter-item[data-filter="cd"]:hover, .filter-item[data-filter="cd"].active {
    background-color: var(--flag-cd);
    color: #ffffff;
}

.filter-item[data-filter="ck"]:hover, .filter-item[data-filter="ck"].active {
    background-color: var(--flag-ck);
    color: #ffffff;
}

.filter-item[data-filter="cr"]:hover, .filter-item[data-filter="cr"].active {
    background-color: var(--flag-cr);
    color: #ffffff;
}

.filter-item[data-filter="ci"]:hover, .filter-item[data-filter="ci"].active {
    background-color: var(--flag-ci);
    color: #000000;
}

.filter-item[data-filter="hr"]:hover, .filter-item[data-filter="hr"].active {
    background-color: var(--flag-hr);
    color: #ffffff;
}

.filter-item[data-filter="cu"]:hover, .filter-item[data-filter="cu"].active {
    background-color: var(--flag-cu);
    color: #ffffff;
}

.filter-item[data-filter="cw"]:hover, .filter-item[data-filter="cw"].active {
    background-color: var(--flag-cw);
    color: #ffffff;
}

.filter-item[data-filter="cy"]:hover, .filter-item[data-filter="cy"].active {
    background-color: var(--flag-cy);
    color: #000000;
}

.filter-item[data-filter="cz"]:hover, .filter-item[data-filter="cz"].active {
    background-color: var(--flag-cz);
    color: #ffffff;
}

.filter-item[data-filter="dk"]:hover, .filter-item[data-filter="dk"].active {
    background-color: var(--flag-dk);
    color: #ffffff;
}

.filter-item[data-filter="dj"]:hover, .filter-item[data-filter="dj"].active {
    background-color: var(--flag-dj);
    color: #000000;
}

.filter-item[data-filter="dm"]:hover, .filter-item[data-filter="dm"].active {
    background-color: var(--flag-dm);
    color: #ffffff;
}

.filter-item[data-filter="do"]:hover, .filter-item[data-filter="do"].active {
    background-color: var(--flag-do);
    color: #ffffff;
}

.filter-item[data-filter="ec"]:hover, .filter-item[data-filter="ec"].active {
    background-color: var(--flag-ec);
    color: #000000;
}

.filter-item[data-filter="eg"]:hover, .filter-item[data-filter="eg"].active {
    background-color: var(--flag-eg);
    color: #ffffff;
}

.filter-item[data-filter="sv"]:hover, .filter-item[data-filter="sv"].active {
    background-color: var(--flag-sv);
    color: #ffffff;
}

.filter-item[data-filter="gq"]:hover, .filter-item[data-filter="gq"].active {
    background-color: var(--flag-gq);
    color: #ffffff;
}

.filter-item[data-filter="er"]:hover, .filter-item[data-filter="er"].active {
    background-color: var(--flag-er);
    color: #ffffff;
}

.filter-item[data-filter="ee"]:hover, .filter-item[data-filter="ee"].active {
    background-color: var(--flag-ee);
    color: #ffffff;
}

.filter-item[data-filter="sz"]:hover, .filter-item[data-filter="sz"].active {
    background-color: var(--flag-sz);
    color: #ffffff;
}

.filter-item[data-filter="et"]:hover, .filter-item[data-filter="et"].active {
    background-color: var(--flag-et);
    color: #ffffff;
}

.filter-item[data-filter="fk"]:hover, .filter-item[data-filter="fk"].active {
    background-color: var(--flag-fk);
    color: #ffffff;
}

.filter-item[data-filter="fo"]:hover, .filter-item[data-filter="fo"].active {
    background-color: var(--flag-fo);
    color: #ffffff;
}

.filter-item[data-filter="fj"]:hover, .filter-item[data-filter="fj"].active {
    background-color: var(--flag-fj);
    color: #000000;
}

.filter-item[data-filter="fi"]:hover, .filter-item[data-filter="fi"].active {
    background-color: var(--flag-fi);
    color: #ffffff;
}

.filter-item[data-filter="fr"]:hover, .filter-item[data-filter="fr"].active {
    background-color: var(--flag-fr);
    color: #ffffff;
}

.filter-item[data-filter="gf"]:hover, .filter-item[data-filter="gf"].active {
    background-color: var(--flag-gf);
    color: #ffffff;
}

.filter-item[data-filter="pf"]:hover, .filter-item[data-filter="pf"].active {
    background-color: var(--flag-pf);
    color: #ffffff;
}

.filter-item[data-filter="tf"]:hover, .filter-item[data-filter="tf"].active {
    background-color: var(--flag-tf);
    color: #ffffff;
}

.filter-item[data-filter="ga"]:hover, .filter-item[data-filter="ga"].active {
    background-color: var(--flag-ga);
    color: #ffffff;
}

.filter-item[data-filter="gm"]:hover, .filter-item[data-filter="gm"].active {
    background-color: var(--flag-gm);
    color: #ffffff;
}

.filter-item[data-filter="ge"]:hover, .filter-item[data-filter="ge"].active {
    background-color: var(--flag-ge);
    color: #000000;
}

.filter-item[data-filter="de"]:hover, .filter-item[data-filter="de"].active {
    background-color: var(--flag-de);
    color: #ffffff;
}

.filter-item[data-filter="gh"]:hover, .filter-item[data-filter="gh"].active {
    background-color: var(--flag-gh);
    color: #ffffff;
}

.filter-item[data-filter="gi"]:hover, .filter-item[data-filter="gi"].active {
    background-color: var(--flag-gi);
    color: #ffffff;
}

.filter-item[data-filter="gr"]:hover, .filter-item[data-filter="gr"].active {
    background-color: var(--flag-gr);
    color: #ffffff;
}

.filter-item[data-filter="gl"]:hover, .filter-item[data-filter="gl"].active {
    background-color: var(--flag-gl);
    color: #ffffff;
}

.filter-item[data-filter="gd"]:hover, .filter-item[data-filter="gd"].active {
    background-color: var(--flag-gd);
    color: #ffffff;
}

.filter-item[data-filter="gp"]:hover, .filter-item[data-filter="gp"].active {
    background-color: var(--flag-gp);
    color: #ffffff;
}

.filter-item[data-filter="gu"]:hover, .filter-item[data-filter="gu"].active {
    background-color: var(--flag-gu);
    color: #ffffff;
}

.filter-item[data-filter="gt"]:hover, .filter-item[data-filter="gt"].active {
    background-color: var(--flag-gt);
    color: #ffffff;
}

.filter-item[data-filter="gg"]:hover, .filter-item[data-filter="gg"].active {
    background-color: var(--flag-gg);
    color: #ffffff;
}

.filter-item[data-filter="gn"]:hover, .filter-item[data-filter="gn"].active {
    background-color: var(--flag-gn);
    color: #ffffff;
}

.filter-item[data-filter="gw"]:hover, .filter-item[data-filter="gw"].active {
    background-color: var(--flag-gw);
    color: #ffffff;
}

.filter-item[data-filter="gy"]:hover, .filter-item[data-filter="gy"].active {
    background-color: var(--flag-gy);
    color: #ffffff;
}

.filter-item[data-filter="ht"]:hover, .filter-item[data-filter="ht"].active {
    background-color: var(--flag-ht);
    color: #ffffff;
}

.filter-item[data-filter="hm"]:hover, .filter-item[data-filter="hm"].active {
    background-color: var(--flag-hm);
    color: #ffffff;
}

.filter-item[data-filter="va"]:hover, .filter-item[data-filter="va"].active {
    background-color: var(--flag-va);
    color: #000000;
}

.filter-item[data-filter="hn"]:hover, .filter-item[data-filter="hn"].active {
    background-color: var(--flag-hn);
    color: #ffffff;
}

.filter-item[data-filter="hk"]:hover, .filter-item[data-filter="hk"].active {
    background-color: var(--flag-hk);
    color: #ffffff;
}

.filter-item[data-filter="hu"]:hover, .filter-item[data-filter="hu"].active {
    background-color: var(--flag-hu);
    color: #ffffff;
}

.filter-item[data-filter="is"]:hover, .filter-item[data-filter="is"].active {
    background-color: var(--flag-is);
    color: #ffffff;
}

.filter-item[data-filter="in"]:hover, .filter-item[data-filter="in"].active {
    background-color: var(--flag-in);
    color: #000000;
}

.filter-item[data-filter="id"]:hover, .filter-item[data-filter="id"].active {
    background-color: var(--flag-id);
    color: #ffffff;
}

.filter-item[data-filter="ir"]:hover, .filter-item[data-filter="ir"].active {
    background-color: var(--flag-ir);
    color: #ffffff;
}

.filter-item[data-filter="iq"]:hover, .filter-item[data-filter="iq"].active {
    background-color: var(--flag-iq);
    color: #ffffff;
}

.filter-item[data-filter="ie"]:hover, .filter-item[data-filter="ie"].active {
    background-color: var(--flag-ie);
    color: #ffffff;
}

.filter-item[data-filter="im"]:hover, .filter-item[data-filter="im"].active {
    background-color: var(--flag-im);
    color: #ffffff;
}

.filter-item[data-filter="il"]:hover, .filter-item[data-filter="il"].active {
    background-color: var(--flag-il);
    color: #ffffff;
}

.filter-item[data-filter="it"]:hover, .filter-item[data-filter="it"].active {
    background-color: var(--flag-it);
    color: #ffffff;
}

.filter-item[data-filter="jm"]:hover, .filter-item[data-filter="jm"].active {
    background-color: var(--flag-jm);
    color: #ffffff;
}

.filter-item[data-filter="jp"]:hover, .filter-item[data-filter="jp"].active {
    background-color: var(--flag-jp);
    color: #ffffff;
}

.filter-item[data-filter="je"]:hover, .filter-item[data-filter="je"].active {
    background-color: var(--flag-je);
    color: #ffffff;
}

.filter-item[data-filter="jo"]:hover, .filter-item[data-filter="jo"].active {
    background-color: var(--flag-jo);
    color: #ffffff;
}

.filter-item[data-filter="kz"]:hover, .filter-item[data-filter="kz"].active {
    background-color: var(--flag-kz);
    color: #000000;
}

.filter-item[data-filter="ke"]:hover, .filter-item[data-filter="ke"].active {
    background-color: var(--flag-ke);
    color: #ffffff;
}

.filter-item[data-filter="ki"]:hover, .filter-item[data-filter="ki"].active {
    background-color: var(--flag-ki);
    color: #ffffff;
}

.filter-item[data-filter="kp"]:hover, .filter-item[data-filter="kp"].active {
    background-color: var(--flag-kp);
    color: #ffffff;
}

.filter-item[data-filter="kr"]:hover, .filter-item[data-filter="kr"].active {
    background-color: var(--flag-kr);
    color: #ffffff;
}

.filter-item[data-filter="kw"]:hover, .filter-item[data-filter="kw"].active {
    background-color: var(--flag-kw);
    color: #ffffff;
}

.filter-item[data-filter="kg"]:hover, .filter-item[data-filter="kg"].active {
    background-color: var(--flag-kg);
    color: #ffffff;
}

.filter-item[data-filter="la"]:hover, .filter-item[data-filter="la"].active {
    background-color: var(--flag-la);
    color: #ffffff;
}

.filter-item[data-filter="lv"]:hover, .filter-item[data-filter="lv"].active {
    background-color: var(--flag-lv);
    color: #ffffff;
}

.filter-item[data-filter="lb"]:hover, .filter-item[data-filter="lb"].active {
    background-color: var(--flag-lb);
    color: #ffffff;
}

.filter-item[data-filter="ls"]:hover, .filter-item[data-filter="ls"].active {
    background-color: var(--flag-ls);
    color: #ffffff;
}

.filter-item[data-filter="lr"]:hover, .filter-item[data-filter="lr"].active {
    background-color: var(--flag-lr);
    color: #ffffff;
}

.filter-item[data-filter="ly"]:hover, .filter-item[data-filter="ly"].active {
    background-color: var(--flag-ly);
    color: #ffffff;
}

.filter-item[data-filter="li"]:hover, .filter-item[data-filter="li"].active {
    background-color: var(--flag-li);
    color: #ffffff;
}

.filter-item[data-filter="lt"]:hover, .filter-item[data-filter="lt"].active {
    background-color: var(--flag-lt);
    color: #000000;
}

.filter-item[data-filter="lu"]:hover, .filter-item[data-filter="lu"].active {
    background-color: var(--flag-lu);
    color: #ffffff;
}

.filter-item[data-filter="mo"]:hover, .filter-item[data-filter="mo"].active {
    background-color: var(--flag-mo);
    color: #ffffff;
}

.filter-item[data-filter="mg"]:hover, .filter-item[data-filter="mg"].active {
    background-color: var(--flag-mg);
    color: #ffffff;
}

.filter-item[data-filter="mw"]:hover, .filter-item[data-filter="mw"].active {
    background-color: var(--flag-mw);
    color: #ffffff;
}

.filter-item[data-filter="my"]:hover, .filter-item[data-filter="my"].active {
    background-color: var(--flag-my);
    color: #ffffff;
}

.filter-item[data-filter="mv"]:hover, .filter-item[data-filter="mv"].active {
    background-color: var(--flag-mv);
    color: #ffffff;
}

.filter-item[data-filter="ml"]:hover, .filter-item[data-filter="ml"].active {
    background-color: var(--flag-ml);
    color: #ffffff;
}

.filter-item[data-filter="mt"]:hover, .filter-item[data-filter="mt"].active {
    background-color: var(--flag-mt);
    color: #ffffff;
}

.filter-item[data-filter="mh"]:hover, .filter-item[data-filter="mh"].active {
    background-color: var(--flag-mh);
    color: #ffffff;
}

.filter-item[data-filter="mq"]:hover, .filter-item[data-filter="mq"].active {
    background-color: var(--flag-mq);
    color: #ffffff;
}

.filter-item[data-filter="mr"]:hover, .filter-item[data-filter="mr"].active {
    background-color: var(--flag-mr);
    color: #ffffff;
}

.filter-item[data-filter="mu"]:hover, .filter-item[data-filter="mu"].active {
    background-color: var(--flag-mu);
    color: #ffffff;
}

.filter-item[data-filter="yt"]:hover, .filter-item[data-filter="yt"].active {
    background-color: var(--flag-yt);
    color: #ffffff;
}

.filter-item[data-filter="mx"]:hover, .filter-item[data-filter="mx"].active {
    background-color: var(--flag-mx);
    color: #ffffff;
}

.filter-item[data-filter="fm"]:hover, .filter-item[data-filter="fm"].active {
    background-color: var(--flag-fm);
    color: #000000;
}

.filter-item[data-filter="md"]:hover, .filter-item[data-filter="md"].active {
    background-color: var(--flag-md);
    color: #ffffff;
}

.filter-item[data-filter="mc"]:hover, .filter-item[data-filter="mc"].active {
    background-color: var(--flag-mc);
    color: #ffffff;
}

.filter-item[data-filter="mn"]:hover, .filter-item[data-filter="mn"].active {
    background-color: var(--flag-mn);
    color: #ffffff;
}

.filter-item[data-filter="me"]:hover, .filter-item[data-filter="me"].active {
    background-color: var(--flag-me);
    color: #ffffff;
}

.filter-item[data-filter="ms"]:hover, .filter-item[data-filter="ms"].active {
    background-color: var(--flag-ms);
    color: #ffffff;
}

.filter-item[data-filter="ma"]:hover, .filter-item[data-filter="ma"].active {
    background-color: var(--flag-ma);
    color: #ffffff;
}

.filter-item[data-filter="mz"]:hover, .filter-item[data-filter="mz"].active {
    background-color: var(--flag-mz);
    color: #ffffff;
}

.filter-item[data-filter="mm"]:hover, .filter-item[data-filter="mm"].active {
    background-color: var(--flag-mm);
    color: #000000;
}

.filter-item[data-filter="na"]:hover, .filter-item[data-filter="na"].active {
    background-color: var(--flag-na);
    color: #ffffff;
}

.filter-item[data-filter="nr"]:hover, .filter-item[data-filter="nr"].active {
    background-color: var(--flag-nr);
    color: #ffffff;
}

.filter-item[data-filter="np"]:hover, .filter-item[data-filter="np"].active {
    background-color: var(--flag-np);
    color: #ffffff;
}

.filter-item[data-filter="nl"]:hover, .filter-item[data-filter="nl"].active {
    background-color: var(--flag-nl);
    color: #ffffff;
}

.filter-item[data-filter="nc"]:hover, .filter-item[data-filter="nc"].active {
    background-color: var(--flag-nc);
    color: #ffffff;
}

.filter-item[data-filter="nz"]:hover, .filter-item[data-filter="nz"].active {
    background-color: var(--flag-nz);
    color: #ffffff;
}

.filter-item[data-filter="ni"]:hover, .filter-item[data-filter="ni"].active {
    background-color: var(--flag-ni);
    color: #ffffff;
}

.filter-item[data-filter="ne"]:hover, .filter-item[data-filter="ne"].active {
    background-color: var(--flag-ne);
    color: #ffffff;
}

.filter-item[data-filter="ng"]:hover, .filter-item[data-filter="ng"].active {
    background-color: var(--flag-ng);
    color: #ffffff;
}

.filter-item[data-filter="nu"]:hover, .filter-item[data-filter="nu"].active {
    background-color: var(--flag-nu);
    color: #000000;
}

.filter-item[data-filter="nf"]:hover, .filter-item[data-filter="nf"].active {
    background-color: var(--flag-nf);
    color: #ffffff;
}

.filter-item[data-filter="mk"]:hover, .filter-item[data-filter="mk"].active {
    background-color: var(--flag-mk);
    color: #ffffff;
}

.filter-item[data-filter="mp"]:hover, .filter-item[data-filter="mp"].active {
    background-color: var(--flag-mp);
    color: #ffffff;
}

.filter-item[data-filter="no"]:hover, .filter-item[data-filter="no"].active {
    background-color: var(--flag-no);
    color: #ffffff;
}

.filter-item[data-filter="om"]:hover, .filter-item[data-filter="om"].active {
    background-color: var(--flag-om);
    color: #ffffff;
}

.filter-item[data-filter="pk"]:hover, .filter-item[data-filter="pk"].active {
    background-color: var(--flag-pk);
    color: #ffffff;
}

.filter-item[data-filter="pw"]:hover, .filter-item[data-filter="pw"].active {
    background-color: var(--flag-pw);
    color: #000000;
}

.filter-item[data-filter="ps"]:hover, .filter-item[data-filter="ps"].active {
    background-color: var(--flag-ps);
    color: #ffffff;
}

.filter-item[data-filter="pa"]:hover, .filter-item[data-filter="pa"].active {
    background-color: var(--flag-pa);
    color: #ffffff;
}

.filter-item[data-filter="pg"]:hover, .filter-item[data-filter="pg"].active {
    background-color: var(--flag-pg);
    color: #ffffff;
}

.filter-item[data-filter="py"]:hover, .filter-item[data-filter="py"].active {
    background-color: var(--flag-py);
    color: #ffffff;
}

.filter-item[data-filter="pe"]:hover, .filter-item[data-filter="pe"].active {
    background-color: var(--flag-pe);
    color: #ffffff;
}

.filter-item[data-filter="ph"]:hover, .filter-item[data-filter="ph"].active {
    background-color: var(--flag-ph);
    color: #ffffff;
}

.filter-item[data-filter="pn"]:hover, .filter-item[data-filter="pn"].active {
    background-color: var(--flag-pn);
    color: #ffffff;
}

.filter-item[data-filter="pl"]:hover, .filter-item[data-filter="pl"].active {
    background-color: var(--flag-pl);
    color: #ffffff;
}

.filter-item[data-filter="pt"]:hover, .filter-item[data-filter="pt"].active {
    background-color: var(--flag-pt);
    color: #ffffff;
}

.filter-item[data-filter="pr"]:hover, .filter-item[data-filter="pr"].active {
    background-color: var(--flag-pr);
    color: #ffffff;
}

.filter-item[data-filter="qa"]:hover, .filter-item[data-filter="qa"].active {
    background-color: var(--flag-qa);
    color: #ffffff;
}

.filter-item[data-filter="re"]:hover, .filter-item[data-filter="re"].active {
    background-color: var(--flag-re);
    color: #ffffff;
}

.filter-item[data-filter="ro"]:hover, .filter-item[data-filter="ro"].active {
    background-color: var(--flag-ro);
    color: #ffffff;
}

.filter-item[data-filter="ru"]:hover, .filter-item[data-filter="ru"].active {
    background-color: var(--flag-ru);
    color: #ffffff;
}

.filter-item[data-filter="rw"]:hover, .filter-item[data-filter="rw"].active {
    background-color: var(--flag-rw);
    color: #ffffff;
}

.filter-item[data-filter="bl"]:hover, .filter-item[data-filter="bl"].active {
    background-color: var(--flag-bl);
    color: #ffffff;
}

.filter-item[data-filter="sh"]:hover, .filter-item[data-filter="sh"].active {
    background-color: var(--flag-sh);
    color: #ffffff;
}

.filter-item[data-filter="kn"]:hover, .filter-item[data-filter="kn"].active {
    background-color: var(--flag-kn);
    color: #ffffff;
}

.filter-item[data-filter="lc"]:hover, .filter-item[data-filter="lc"].active {
    background-color: var(--flag-lc);
    color: #000000;
}

.filter-item[data-filter="mf"]:hover, .filter-item[data-filter="mf"].active {
    background-color: var(--flag-mf);
    color: #ffffff;
}

.filter-item[data-filter="pm"]:hover, .filter-item[data-filter="pm"].active {
    background-color: var(--flag-pm);
    color: #ffffff;
}

.filter-item[data-filter="vc"]:hover, .filter-item[data-filter="vc"].active {
    background-color: var(--flag-vc);
    color: #ffffff;
}

.filter-item[data-filter="ws"]:hover, .filter-item[data-filter="ws"].active {
    background-color: var(--flag-ws);
    color: #ffffff;
}

.filter-item[data-filter="sm"]:hover, .filter-item[data-filter="sm"].active {
    background-color: var(--flag-sm);
    color: #000000;
}

.filter-item[data-filter="st"]:hover, .filter-item[data-filter="st"].active {
    background-color: var(--flag-st);
    color: #ffffff;
}

.filter-item[data-filter="sa"]:hover, .filter-item[data-filter="sa"].active {
    background-color: var(--flag-sa);
    color: #ffffff;
}

.filter-item[data-filter="sn"]:hover, .filter-item[data-filter="sn"].active {
    background-color: var(--flag-sn);
    color: #ffffff;
}

.filter-item[data-filter="rs"]:hover, .filter-item[data-filter="rs"].active {
    background-color: var(--flag-rs);
    color: #ffffff;
}

.filter-item[data-filter="sc"]:hover, .filter-item[data-filter="sc"].active {
    background-color: var(--flag-sc);
    color: #ffffff;
}

.filter-item[data-filter="sl"]:hover, .filter-item[data-filter="sl"].active {
    background-color: var(--flag-sl);
    color: #ffffff;
}

.filter-item[data-filter="sg"]:hover, .filter-item[data-filter="sg"].active {
    background-color: var(--flag-sg);
    color: #ffffff;
}

.filter-item[data-filter="sx"]:hover, .filter-item[data-filter="sx"].active {
    background-color: var(--flag-sx);
    color: #ffffff;
}

.filter-item[data-filter="sk"]:hover, .filter-item[data-filter="sk"].active {
    background-color: var(--flag-sk);
    color: #ffffff;
}

.filter-item[data-filter="si"]:hover, .filter-item[data-filter="si"].active {
    background-color: var(--flag-si);
    color: #ffffff;
}

.filter-item[data-filter="sb"]:hover, .filter-item[data-filter="sb"].active {
    background-color: var(--flag-sb);
    color: #ffffff;
}

.filter-item[data-filter="so"]:hover, .filter-item[data-filter="so"].active {
    background-color: var(--flag-so);
    color: #ffffff;
}

.filter-item[data-filter="za"]:hover, .filter-item[data-filter="za"].active {
    background-color: var(--flag-za);
    color: #ffffff;
}

.filter-item[data-filter="gs"]:hover, .filter-item[data-filter="gs"].active {
    background-color: var(--flag-gs);
    color: #ffffff;
}

.filter-item[data-filter="ss"]:hover, .filter-item[data-filter="ss"].active {
    background-color: var(--flag-ss);
    color: #ffffff;
}

.filter-item[data-filter="es"]:hover, .filter-item[data-filter="es"].active {
    background-color: var(--flag-es);
    color: #ffffff;
}

.filter-item[data-filter="lk"]:hover, .filter-item[data-filter="lk"].active {
    background-color: var(--flag-lk);
    color: #000000;
}

.filter-item[data-filter="sd"]:hover, .filter-item[data-filter="sd"].active {
    background-color: var(--flag-sd);
    color: #ffffff;
}

.filter-item[data-filter="sr"]:hover, .filter-item[data-filter="sr"].active {
    background-color: var(--flag-sr);
    color: #ffffff;
}

.filter-item[data-filter="sj"]:hover, .filter-item[data-filter="sj"].active {
    background-color: var(--flag-sj);
    color: #ffffff;
}

.filter-item[data-filter="se"]:hover, .filter-item[data-filter="se"].active {
    background-color: var(--flag-se);
    color: #ffffff;
}

.filter-item[data-filter="ch"]:hover, .filter-item[data-filter="ch"].active {
    background-color: var(--flag-ch);
    color: #ffffff;
}

.filter-item[data-filter="sy"]:hover, .filter-item[data-filter="sy"].active {
    background-color: var(--flag-sy);
    color: #ffffff;
}

.filter-item[data-filter="tw"]:hover, .filter-item[data-filter="tw"].active {
    background-color: var(--flag-tw);
    color: #ffffff;
}

.filter-item[data-filter="tj"]:hover, .filter-item[data-filter="tj"].active {
    background-color: var(--flag-tj);
    color: #ffffff;
}

.filter-item[data-filter="tz"]:hover, .filter-item[data-filter="tz"].active {
    background-color: var(--flag-tz);
    color: #ffffff;
}

.filter-item[data-filter="th"]:hover, .filter-item[data-filter="th"].active {
    background-color: var(--flag-th);
    color: #ffffff;
}

.filter-item[data-filter="tl"]:hover, .filter-item[data-filter="tl"].active {
    background-color: var(--flag-tl);
    color: #ffffff;
}

.filter-item[data-filter="tg"]:hover, .filter-item[data-filter="tg"].active {
    background-color: var(--flag-tg);
    color: #ffffff;
}

.filter-item[data-filter="tk"]:hover, .filter-item[data-filter="tk"].active {
    background-color: var(--flag-tk);
    color: #ffffff;
}

.filter-item[data-filter="to"]:hover, .filter-item[data-filter="to"].active {
    background-color: var(--flag-to);
    color: #ffffff;
}

.filter-item[data-filter="tt"]:hover, .filter-item[data-filter="tt"].active {
    background-color: var(--flag-tt);
    color: #ffffff;
}

.filter-item[data-filter="tn"]:hover, .filter-item[data-filter="tn"].active {
    background-color: var(--flag-tn);
    color: #ffffff;
}

.filter-item[data-filter="tr"]:hover, .filter-item[data-filter="tr"].active {
    background-color: var(--flag-tr);
    color: #ffffff;
}

.filter-item[data-filter="tm"]:hover, .filter-item[data-filter="tm"].active {
    background-color: var(--flag-tm);
    color: #ffffff;
}

.filter-item[data-filter="tc"]:hover, .filter-item[data-filter="tc"].active {
    background-color: var(--flag-tc);
    color: #ffffff;
}

.filter-item[data-filter="tv"]:hover, .filter-item[data-filter="tv"].active {
    background-color: var(--flag-tv);
    color: #000000;
}

.filter-item[data-filter="ug"]:hover, .filter-item[data-filter="ug"].active {
    background-color: var(--flag-ug);
    color: #000000;
}

.filter-item[data-filter="ua"]:hover, .filter-item[data-filter="ua"].active {
    background-color: var(--flag-ua);
    color: #ffffff;
}

.filter-item[data-filter="ae"]:hover, .filter-item[data-filter="ae"].active {
    background-color: var(--flag-ae);
    color: #ffffff;
}

.filter-item[data-filter="gb"]:hover, .filter-item[data-filter="gb"].active {
    background-color: var(--flag-gb);
    color: #ffffff;
}

.filter-item[data-filter="us"]:hover, .filter-item[data-filter="us"].active {
    background-color: var(--flag-us);
    color: #ffffff;
}

.filter-item[data-filter="um"]:hover, .filter-item[data-filter="um"].active {
    background-color: var(--flag-um);
    color: #ffffff;
}

.filter-item[data-filter="uy"]:hover, .filter-item[data-filter="uy"].active {
    background-color: var(--flag-uy);
    color: #ffffff;
}

.filter-item[data-filter="uz"]:hover, .filter-item[data-filter="uz"].active {
    background-color: var(--flag-uz);
    color: #ffffff;
}

.filter-item[data-filter="vu"]:hover, .filter-item[data-filter="vu"].active {
    background-color: var(--flag-vu);
    color: #ffffff;
}

.filter-item[data-filter="ve"]:hover, .filter-item[data-filter="ve"].active {
    background-color: var(--flag-ve);
    color: #000000;
}

.filter-item[data-filter="vn"]:hover, .filter-item[data-filter="vn"].active {
    background-color: var(--flag-vn);
    color: #ffffff;
}

.filter-item[data-filter="vi