/* Existing website flags from styles.css; preview-only, no emoji dependency. */
.flag-icon { position:relative; display:inline-block; flex:0 0 24px; width:24px; height:17px; overflow:hidden; border-radius:4px; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.22); line-height:1; direction:ltr; }

.flag-icon::before,
.flag-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.flag-icon--us {
  background: repeating-linear-gradient(
    to bottom,
    #b22234 0 7.7%,
    #fff 7.7% 15.4%
  );
}

.flag-icon--us::before {
  inset: 0 auto auto 0;
  width: 42%;
  height: 54%;
  background: #3c3b6e;
}

.flag-icon--cn {
  background: #de2910;
}

.flag-icon--cn::before,
.flag-icon--vn::before {
  content: "★";
  color: #ffde00;
  font-size: 9px;
  line-height: 1;
}

.flag-icon--cn::before {
  inset: 2px auto auto 3px;
}

.flag-icon--in {
  background: linear-gradient(to bottom, #ff9933 0 33.33%, #fff 33.33% 66.66%, #138808 66.66%);
}

.flag-icon--in::before,
.flag-icon--jp::before,
.flag-icon--bd::before,
.flag-icon--et::before,
.flag-icon--kr::before {
  inset: 50% auto auto 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.flag-icon--in::before {
  width: 5px;
  height: 5px;
  background: #000080;
}

.flag-icon--es {
  background: linear-gradient(to bottom, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%);
}

.flag-icon--sa {
  background: #006c35;
}

.flag-icon--sa::before {
  inset: 10px 4px auto 6px;
  height: 1.5px;
  border-radius: 999px;
  background: #fff;
}

.flag-icon--fr {
  background: linear-gradient(to right, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66%);
}

.flag-icon--bd {
  background: #006a4e;
}

.flag-icon--bd::before {
  width: 8px;
  height: 8px;
  margin-left: -1px;
  background: #f42a41;
}

.flag-icon--br {
  background: #009b3a;
}

.flag-icon--br::before {
  inset: 50% auto auto 50%;
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background: #ffdf00;
  transform: translate(-50%, -50%) rotate(45deg) scaleX(1.35);
}

.flag-icon--br::after {
  inset: 50% auto auto 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #002776;
  transform: translate(-50%, -50%);
}

.flag-icon--id {
  background: linear-gradient(to bottom, #ce1126 0 50%, #fff 50%);
}

.flag-icon--pk {
  background: linear-gradient(to right, #fff 0 25%, #01411c 25%);
}

.flag-icon--pk::before,
.flag-icon--tr::before {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
}

.flag-icon--pk::before {
  inset: 4px auto auto 11px;
}

.flag-icon--pk::after,
.flag-icon--tr::after {
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.flag-icon--pk::after {
  inset: 4px auto auto 13px;
  background: #01411c;
}

.flag-icon--ru {
  background: linear-gradient(to bottom, #fff 0 33.33%, #0039a6 33.33% 66.66%, #d52b1e 66.66%);
}

.flag-icon--de {
  background: linear-gradient(to bottom, #000 0 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66%);
}

.flag-icon--jp::before {
  width: 8px;
  height: 8px;
  background: #bc002d;
}

.flag-icon--vn {
  background: #da251d;
}

.flag-icon--vn::before {
  inset: 4px auto auto 8px;
}

.flag-icon--tz {
  background: linear-gradient(145deg, #1eb53a 0 38%, #fcd116 38% 43%, #000 43% 57%, #fcd116 57% 62%, #00a3dd 62%);
}

.flag-icon--ng {
  background: linear-gradient(to right, #008751 0 33.33%, #fff 33.33% 66.66%, #008751 66.66%);
}

.flag-icon--tr {
  background: #e30a17;
}

.flag-icon--tr::before {
  inset: 4px auto auto 6px;
}

.flag-icon--tr::after {
  inset: 4px auto auto 9px;
  background: #e30a17;
}

.flag-icon--ph {
  background: linear-gradient(to bottom, #0038a8 0 50%, #ce1126 50%);
}

.flag-icon--ph::before {
  inset: 0 auto auto 0;
  width: 0;
  height: 0;
  border-top: 8.5px solid transparent;
  border-bottom: 8.5px solid transparent;
  border-left: 12px solid #fff;
}

.flag-icon--ph::after {
  inset: 7px auto auto 4px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: #fcd116;
}

.flag-icon--ir {
  background: linear-gradient(to bottom, #239f40 0 33.33%, #fff 33.33% 66.66%, #da0000 66.66%);
}

.flag-icon--ir::before {
  inset: 7px auto auto 10px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #da0000;
}

.flag-icon--kr::before {
  width: 8px;
  height: 8px;
  background: linear-gradient(to bottom, #c60c30 0 50%, #003478 50%);
}

.flag-icon--et {
  background: linear-gradient(to bottom, #078930 0 33.33%, #fcd116 33.33% 66.66%, #da121a 66.66%);
}

.flag-icon--et::before {
  width: 7px;
  height: 7px;
  background: #0f47af;
}

.flag-icon--th {
  background: linear-gradient(
    to bottom,
    #a51931 0 16.66%,
    #fff 16.66% 33.33%,
    #2d2a4a 33.33% 66.66%,
    #fff 66.66% 83.33%,
    #a51931 83.33%
  );
}

.flag-icon--it {
  background: linear-gradient(to right, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66%);
}