/* ─────────────────────────────────────────────────────────────────────────
   IPSYSTEM v1.15 — CSS-only country flags
   Pure CSS gradient-based flags for 50+ countries (MENA + global).
   Renders consistently on Windows/macOS/Linux desktops — no emoji fonts needed.
   For unrepresented countries, displays a styled 2-letter ISO code badge.
   Class pattern: <span class="flag flag-{iso2}"></span>  (e.g. flag-jo, flag-us)
   ───────────────────────────────────────────────────────────────────────── */
.flag{display:inline-block;width:22px;height:16px;border-radius:2px;background:#f8f9fa;flex-shrink:0;position:relative;overflow:hidden;box-shadow:0 0 0 0.5px rgba(0,0,0,.1);vertical-align:middle}
.flag-sm{width:18px;height:13px}
.flag-lg{width:28px;height:20px}

/* Default fallback for unknown ISO codes — show 2-letter code in grey.
   Note: NO background here — that was the bug in v1.15 (it covered country
   gradients). The grey fallback color is now on .flag itself. */
.flag::before{content:attr(data-iso);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:800;color:#495057;text-transform:uppercase;letter-spacing:.5px}
/* When .flag-known is applied (a country-specific class is also present),
   suppress the ISO label by emptying content. Country-specific ::before
   rules (Norway/Denmark/Finland crosses, Bahrain zigzag, etc.) keep their
   designs because they redefine the pseudo's geometry & background. */
.flag.flag-known::before{content:""}

/* v1.6.6 — SVG image fallback for countries without a CSS gradient.
   The helpers (PHP flagHtml + JS flagHtml + Select2 templateResult) emit
   `class="flag flag-cdn flag-<iso>"` with an inline background-image URL
   pointing to a CC0-licensed SVG (flagcdn.com by default). These rules
   suppress the ISO-code badge and size the image to fill the flag box.
   If the image fails to load (CDN unreachable, blocked CSP, etc.), the
   user sees the grey base color of .flag — still readable next to the
   country name. */
.flag.flag-cdn::before{content:""}
.flag.flag-cdn{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ─── Three horizontal stripes ─── */
.flag-de{background:linear-gradient(to bottom,#000 0 33.3%,#d00 33.3% 66.6%,#ffce00 66.6%)}
.flag-eg{background:linear-gradient(to bottom,#ce1126 0 33.3%,#fff 33.3% 66.6%,#000 66.6%)}
.flag-iq{background:linear-gradient(to bottom,#ce1126 0 33.3%,#fff 33.3% 66.6%,#000 66.6%)}
.flag-sy{background:linear-gradient(to bottom,#ce1126 0 33.3%,#fff 33.3% 66.6%,#000 66.6%)}
.flag-ye{background:linear-gradient(to bottom,#ce1126 0 33.3%,#fff 33.3% 66.6%,#000 66.6%)}
.flag-ru{background:linear-gradient(to bottom,#fff 0 33.3%,#0039a6 33.3% 66.6%,#d52b1e 66.6%)}
.flag-nl{background:linear-gradient(to bottom,#ae1c28 0 33.3%,#fff 33.3% 66.6%,#21468b 66.6%)}
.flag-hu{background:linear-gradient(to bottom,#ce2939 0 33.3%,#fff 33.3% 66.6%,#477050 66.6%)}
.flag-bg{background:linear-gradient(to bottom,#fff 0 33.3%,#00966e 33.3% 66.6%,#d62612 66.6%)}
.flag-lt{background:linear-gradient(to bottom,#fdb913 0 33.3%,#006a44 33.3% 66.6%,#c1272d 66.6%)}
.flag-ee{background:linear-gradient(to bottom,#0072ce 0 33.3%,#000 33.3% 66.6%,#fff 66.6%)}
.flag-ar{background:linear-gradient(to bottom,#74acdf 0 33.3%,#fff 33.3% 66.6%,#74acdf 66.6%)}
.flag-au{background:linear-gradient(to bottom,#012169 0 50%,#012169 50%);position:relative}
.flag-au::after{content:"AU";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:800;color:#fff}

/* ─── Three vertical stripes ─── */
.flag-fr{background:linear-gradient(to right,#0055a4 0 33.3%,#fff 33.3% 66.6%,#ef4135 66.6%)}
.flag-it{background:linear-gradient(to right,#009246 0 33.3%,#fff 33.3% 66.6%,#ce2b37 66.6%)}
.flag-ie{background:linear-gradient(to right,#169b62 0 33.3%,#fff 33.3% 66.6%,#ff883e 66.6%)}
.flag-be{background:linear-gradient(to right,#000 0 33.3%,#fdda24 33.3% 66.6%,#ef3340 66.6%)}
.flag-mx{background:linear-gradient(to right,#006847 0 33.3%,#fff 33.3% 66.6%,#ce1126 66.6%)}
.flag-ng{background:linear-gradient(to right,#008751 0 33.3%,#fff 33.3% 66.6%,#008751 66.6%)}
.flag-ro{background:linear-gradient(to right,#002b7f 0 33.3%,#fcd116 33.3% 66.6%,#ce1126 66.6%)}
.flag-pe{background:linear-gradient(to right,#d91023 0 33.3%,#fff 33.3% 66.6%,#d91023 66.6%)}

/* ─── Two horizontal stripes ─── */
.flag-pl{background:linear-gradient(to bottom,#fff 0 50%,#dc143c 50%)}
.flag-id{background:linear-gradient(to bottom,#dc143c 0 50%,#fff 50%)}
.flag-mc{background:linear-gradient(to bottom,#ce1126 0 50%,#fff 50%)}
.flag-ua{background:linear-gradient(to bottom,#0057b8 0 50%,#ffd700 50%)}

/* ─── Nordic crosses ─── */
.flag-se{background:#006aa7;position:relative}
.flag-se::after{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:#fecc02}
.flag-se::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:#fecc02}
.flag-no{background:#ed2939;position:relative}
.flag-no::after{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:#fff;box-shadow:-1px 0 0 #002868,1px 0 0 #002868}
.flag-no::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:#fff;box-shadow:0 -1px 0 #002868,0 1px 0 #002868}
.flag-dk{background:#c8102e;position:relative}
.flag-dk::after{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:#fff}
.flag-dk::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:#fff}
.flag-fi{background:#fff;position:relative}
.flag-fi::after{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:#003580}
.flag-fi::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:#003580}
.flag-is{background:#02529c;position:relative}
.flag-is::after{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:#fff;box-shadow:-1px 0 0 #dc1e35,1px 0 0 #dc1e35}
.flag-is::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:#fff;box-shadow:0 -1px 0 #dc1e35,0 1px 0 #dc1e35}

/* ─── Special: triangle + stripes (Palestine, Jordan, Sudan, Kuwait) ─── */
.flag-ps{background:linear-gradient(to bottom,#000 0 33.3%,#fff 33.3% 66.6%,#007a3d 66.6%);position:relative}
.flag-ps::after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:#ce1126;clip-path:polygon(0 0,100% 50%,0 100%)}
.flag-jo{background:linear-gradient(to bottom,#000 0 33.3%,#fff 33.3% 66.6%,#007a3d 66.6%);position:relative}
.flag-jo::after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:#ce1126;clip-path:polygon(0 0,100% 50%,0 100%)}
.flag-sd{background:linear-gradient(to bottom,#d21034 0 33.3%,#fff 33.3% 66.6%,#000 66.6%);position:relative}
.flag-sd::after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:#007a3d;clip-path:polygon(0 0,100% 50%,0 100%)}
.flag-kw{background:linear-gradient(to bottom,#007a3d 0 33.3%,#fff 33.3% 66.6%,#ce1126 66.6%);position:relative}
.flag-kw::after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:#000;clip-path:polygon(0 0,100% 30%,100% 70%,0 100%)}

/* ─── Saudi Arabia: green with white text "SA" placeholder ─── */
.flag-sa{background:#006c35;position:relative}
.flag-sa::after{content:"SA";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px;font-weight:800;letter-spacing:.5px}

/* ─── UAE: 4-band layout ─── */
.flag-ae{background:linear-gradient(to bottom,#00732f 0 33.3%,#fff 33.3% 66.6%,#000 66.6%);position:relative}
.flag-ae::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#ce1126}

/* ─── Oman: white/red/green with red side band ─── */
.flag-om{background:linear-gradient(to bottom,#fff 0 33.3%,#db161b 33.3% 66.6%,#008000 66.6%);position:relative}
.flag-om::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#db161b}

/* ─── Bahrain & Qatar: with white left band + zigzag ─── */
.flag-bh{background:#ce1126;position:relative}
.flag-bh::after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:#fff;clip-path:polygon(0 0,70% 0,100% 12.5%,70% 25%,100% 37.5%,70% 50%,100% 62.5%,70% 75%,100% 87.5%,70% 100%,0 100%)}
.flag-qa{background:#8a1538;position:relative}
.flag-qa::after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:#fff;clip-path:polygon(0 0,70% 0,100% 11%,70% 22%,100% 33%,70% 44%,100% 55%,70% 66%,100% 77%,70% 88%,100% 100%,0 100%)}

/* ─── Lebanon: with cedar tree placeholder ─── */
.flag-lb{background:linear-gradient(to bottom,#ed1c24 0 25%,#fff 25% 75%,#ed1c24 75%);position:relative}
.flag-lb::after{content:"🌲";position:absolute;inset:25% 0 25% 0;display:flex;align-items:center;justify-content:center;font-size:9px}

/* ─── Algeria, Tunisia, Morocco, Libya ─── */
.flag-dz{background:linear-gradient(to right,#006233 50%,#fff 50%);position:relative}
.flag-dz::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;background:#d21034;border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset -1.5px 0 0 #fff}
.flag-tn{background:#e70013;position:relative}
.flag-tn::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}
.flag-tn::before{content:"";position:absolute;left:calc(50% + 1px);top:50%;width:5px;height:5px;background:#e70013;border-radius:50%;transform:translate(-50%,-50%);z-index:1}
.flag-ma{background:#c1272d;position:relative}
.flag-ma::after{content:"★";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#006233;font-size:10px}
.flag-ly{background:linear-gradient(to bottom,#e70013 0 25%,#000 25% 75%,#239e46 75%);position:relative}
.flag-ly::after{content:"☪";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px}

/* ─── Turkey: red with crescent ─── */
.flag-tr{background:#e30a17;position:relative}
.flag-tr::after{content:"☪";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:bold}

/* ─── Israel ─── */
.flag-il{background:#fff;position:relative;box-shadow:inset 0 3px 0 #0038b8,inset 0 -3px 0 #0038b8}
.flag-il::after{content:"✡";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#0038b8;font-size:9px}

/* ─── United Kingdom: simplified Union Jack ─── */
.flag-gb{background:#012169;position:relative;overflow:hidden}
.flag-gb::after{content:"";position:absolute;inset:0;background:
  linear-gradient(45deg,transparent calc(50% - 1.5px),#fff calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px)),
  linear-gradient(-45deg,transparent calc(50% - 1.5px),#fff calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.flag-gb::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:#fff;transform:translateY(-50%);box-shadow:0 0 0 0,inset 0 0 0 1px #c8102e}

/* ─── United States: simplified red/white stripes + blue corner ─── */
.flag-us{background:repeating-linear-gradient(to bottom,#bf0a30 0 1.43px,#fff 1.43px 2.86px);position:relative}
.flag-us::after{content:"";position:absolute;left:0;top:0;width:9px;height:9px;background:#002868}
.flag-us::before{content:"★";position:absolute;left:0;top:0;width:9px;height:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:7px;z-index:2}

/* ─── Canada ─── */
.flag-ca{background:linear-gradient(to right,#d52b1e 0 25%,#fff 25% 75%,#d52b1e 75%);position:relative}
.flag-ca::after{content:"🍁";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px}

/* ─── China: red with stars ─── */
.flag-cn{background:#de2910;position:relative}
.flag-cn::after{content:"★";position:absolute;left:3px;top:2px;color:#ffde00;font-size:7px}
.flag-cn::before{content:"★";position:absolute;left:8px;top:6px;color:#ffde00;font-size:4px}

/* ─── Japan: white with red disk ─── */
.flag-jp{background:#fff;position:relative}
.flag-jp::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;background:#bc002d;border-radius:50%;transform:translate(-50%,-50%)}

/* ─── India: tricolor with chakra placeholder ─── */
.flag-in{background:linear-gradient(to bottom,#ff9933 0 33.3%,#fff 33.3% 66.6%,#138808 66.6%);position:relative}
.flag-in::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border:1px solid #000080;border-radius:50%;transform:translate(-50%,-50%);background:#fff}

/* ─── Spain: yellow band w/ red stripes ─── */
.flag-es{background:linear-gradient(to bottom,#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75%)}

/* ─── Switzerland: red with white cross ─── */
.flag-ch{background:#d52b1e;position:relative}
.flag-ch::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:12px;line-height:0}

/* ─── Brazil: green with diamond + circle ─── */
.flag-br{background:#009c3b;position:relative}
.flag-br::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:9px;background:#ffdf00;transform:translate(-50%,-50%) rotate(0);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.flag-br::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;background:#002776;border-radius:50%;transform:translate(-50%,-50%);z-index:1}

/* ─── South Africa, South Korea, Pakistan placeholders ─── */
.flag-za{background:linear-gradient(to bottom,#007749 0 33.3%,#fff 33.3% 66.6%,#de3831 66.6%)}
.flag-kr{background:#fff;position:relative}
.flag-kr::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(to right,#cd2e3a 50%,#0047a0 50%)}
.flag-pk{background:linear-gradient(to right,#fff 0 25%,#01411c 25%);position:relative}
.flag-pk::after{content:"☪";position:absolute;left:60%;top:50%;color:#fff;transform:translate(-50%,-50%);font-size:9px}

/* ─── Singapore, Malaysia, Indonesia, Thailand ─── */
.flag-sg{background:linear-gradient(to bottom,#ed2939 0 50%,#fff 50%);position:relative}
.flag-sg::after{content:"☪";position:absolute;left:25%;top:25%;color:#fff;font-size:7px;transform:translate(-50%,-50%)}
.flag-my{background:repeating-linear-gradient(to bottom,#cc0001 0 1.14px,#fff 1.14px 2.28px);position:relative}
.flag-my::after{content:"";position:absolute;left:0;top:0;width:11px;height:8px;background:#010066}
.flag-th{background:linear-gradient(to bottom,#ed1c24 0 16.6%,#fff 16.6% 33.3%,#241d4f 33.3% 66.6%,#fff 66.6% 83.3%,#ed1c24 83.3%)}

/* ─── Greek, Portugal, Czech ─── */
.flag-gr{background:repeating-linear-gradient(to bottom,#0d5eaf 0 1.78px,#fff 1.78px 3.56px);position:relative}
.flag-gr::after{content:"";position:absolute;left:0;top:0;width:9px;height:9px;background:#0d5eaf}
.flag-pt{background:linear-gradient(to right,#006400 40%,#dc143c 40%)}
.flag-cz{background:linear-gradient(to bottom,#fff 50%,#d7141a 50%);position:relative}
.flag-cz::after{content:"";position:absolute;left:0;top:0;bottom:0;width:11px;background:#11457e;clip-path:polygon(0 0,100% 50%,0 100%)}

/* ─── Austria, Latvia, Luxembourg ─── */
.flag-at{background:linear-gradient(to bottom,#ed2939 0 33.3%,#fff 33.3% 66.6%,#ed2939 66.6%)}
.flag-lv{background:linear-gradient(to bottom,#9e1b32 0 40%,#fff 40% 60%,#9e1b32 60%)}
.flag-lu{background:linear-gradient(to bottom,#ee2436 0 33.3%,#fff 33.3% 66.6%,#00a3e0 66.6%)}

/* ─── Iran ─── */
.flag-ir{background:linear-gradient(to bottom,#239f40 0 33.3%,#fff 33.3% 66.6%,#da0000 66.6%)}