/**
 * H2J Ecosystem — Flags system (centralized)
 *
 * Centralized flag rendering for all H2J modules (multilang widgets, tel
 * pickers, language switchers, etc). Uses a WebP sprite for 244 world flags
 * + SVG overrides for French DOM-TOM territories (MQ, GP, GF, RE, YT, MF,
 * BL, PM, PF) that the sprite doesn't include as distinct flags.
 *
 * Assets :
 *   - /views/img/flags/sprite.webp      (27 KB, 3904x12)
 *   - /views/img/flags/sprite@2x.webp   (65 KB, retina)
 *   - /views/img/flags/globe.webp       (fallback unknown country)
 *   - /views/img/flags/custom/{iso}.svg (9 DOM-TOM territories)
 *
 * API classes :
 *   .h2j-flag                           → base (mandatory)
 *   .h2j-flag--{iso}                    → country selector (lowercase ISO-2)
 *                                         e.g. .h2j-flag--fr, .h2j-flag--mq
 *   .h2j-flag--size-sm / -md / -lg      → size variants (16 / 24 / 32 px wide)
 *   .h2j-flag--rounded                  → rounded corners (2px)
 *   .h2j-flag--globe                    → explicit globe fallback
 *
 * IMPORTANT : Size classes are namespaced with `--size-` prefix to avoid
 * collision with country codes (e.g. MD = Moldova, SM = San Marino).
 * Never use `.h2j-flag--md` as a size modifier — it's the Moldova flag.
 *
 * Usage (via H2JFlags::render()) :
 *   <span class="h2j-flag h2j-flag--fr h2j-flag--size-md h2j-flag--rounded"
 *         role="img" aria-label="French"></span>
 *
 * Sprite math : width 3904px ÷ 16px = 244 flags, alphabetical ISO-2.
 * Each flag starts at offset -(index × 16)px.
 *
 * @author    H2J Ecosystem <info@2klove.fr>
 * @copyright 2024-2026 H2J sas RCS 978391720
 * @license   Commercial license
 * @since     v2.5.0
 */

:root {
    --h2j-flag-sprite-1x:   url('../img/flags/sprite.webp');
    --h2j-flag-sprite-2x:   url('../img/flags/sprite@2x.webp');
    --h2j-flag-globe-1x:    url('../img/flags/globe.webp');
    --h2j-flag-globe-2x:    url('../img/flags/globe@2x.webp');
    --h2j-flag-custom-base: url('../img/flags/custom/');
    --h2j-flag-sprite-w:    3904px;
    --h2j-flag-sprite-h:    12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   BASE — every flag element inherits this
   ═══════════════════════════════════════════════════════════════════════ */
.h2j-flag {
    --h2j-flag-offset: 0px;
    --h2j-flag-w: 16px;
    --h2j-flag-h: 12px;
    display: inline-block;
    width: var(--h2j-flag-w);
    height: var(--h2j-flag-h);
    background-image: var(--h2j-flag-sprite-1x);
    background-repeat: no-repeat;
    background-position: var(--h2j-flag-offset) 0;
    background-size: var(--h2j-flag-sprite-w) var(--h2j-flag-sprite-h);
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, .4);
    vertical-align: middle;
    flex-shrink: 0;
}
.h2j-flag--rounded { border-radius: 2px; }

/* Retina */
@media (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2) {
    .h2j-flag {
        background-image: var(--h2j-flag-sprite-2x);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   SIZE VARIANTS — proportional scaling of sprite (keeps 4:3 ratio)
   Native : 16x12  /  --size-md : 24x18  /  --size-lg : 32x24
   Scaling uses background-size multiplier to keep sprite crisp.

   IMPORTANT : prefix `--size-` avoids collision with country codes.
   Using `.h2j-flag--md` (without prefix) would clash with MD (Moldova).
   ═══════════════════════════════════════════════════════════════════════ */
.h2j-flag--size-sm {
    --h2j-flag-w: 16px;
    --h2j-flag-h: 12px;
}
.h2j-flag--size-md {
    --h2j-flag-w: 24px;
    --h2j-flag-h: 18px;
    background-size: calc(var(--h2j-flag-sprite-w) * 1.5) calc(var(--h2j-flag-sprite-h) * 1.5);
    background-position: calc(var(--h2j-flag-offset) * 1.5) 0;
}
.h2j-flag--size-lg {
    --h2j-flag-w: 32px;
    --h2j-flag-h: 24px;
    background-size: calc(var(--h2j-flag-sprite-w) * 2) calc(var(--h2j-flag-sprite-h) * 2);
    background-position: calc(var(--h2j-flag-offset) * 2) 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBE FALLBACK — used when country is unknown / unsupported
   ═══════════════════════════════════════════════════════════════════════ */
.h2j-flag--globe {
    background-image: var(--h2j-flag-globe-1x);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: none;
}
@media (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2) {
    .h2j-flag--globe {
        background-image: var(--h2j-flag-globe-2x);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   SPRITE OFFSETS — 244 countries, alphabetical ISO-2, 16px each
   Generated from intl-tel-input v25 sprite (idyll.fr/h2jtools source).
   ═══════════════════════════════════════════════════════════════════════ */
.h2j-flag--ac { --h2j-flag-offset: 0px; }
.h2j-flag--ad { --h2j-flag-offset: -16px; }
.h2j-flag--ae { --h2j-flag-offset: -32px; }
.h2j-flag--af { --h2j-flag-offset: -48px; }
.h2j-flag--ag { --h2j-flag-offset: -64px; }
.h2j-flag--ai { --h2j-flag-offset: -80px; }
.h2j-flag--al { --h2j-flag-offset: -96px; }
.h2j-flag--am { --h2j-flag-offset: -112px; }
.h2j-flag--ao { --h2j-flag-offset: -128px; }
.h2j-flag--ar { --h2j-flag-offset: -144px; }
.h2j-flag--as { --h2j-flag-offset: -160px; }
.h2j-flag--at { --h2j-flag-offset: -176px; }
.h2j-flag--au { --h2j-flag-offset: -192px; }
.h2j-flag--aw { --h2j-flag-offset: -208px; }
.h2j-flag--ax { --h2j-flag-offset: -224px; }
.h2j-flag--az { --h2j-flag-offset: -240px; }
.h2j-flag--ba { --h2j-flag-offset: -256px; }
.h2j-flag--bb { --h2j-flag-offset: -272px; }
.h2j-flag--bd { --h2j-flag-offset: -288px; }
.h2j-flag--be { --h2j-flag-offset: -304px; }
.h2j-flag--bf { --h2j-flag-offset: -320px; }
.h2j-flag--bg { --h2j-flag-offset: -336px; }
.h2j-flag--bh { --h2j-flag-offset: -352px; }
.h2j-flag--bi { --h2j-flag-offset: -368px; }
.h2j-flag--bj { --h2j-flag-offset: -384px; }
.h2j-flag--bm { --h2j-flag-offset: -416px; }
.h2j-flag--bn { --h2j-flag-offset: -432px; }
.h2j-flag--bo { --h2j-flag-offset: -448px; }
.h2j-flag--bq { --h2j-flag-offset: -464px; }
.h2j-flag--br { --h2j-flag-offset: -480px; }
.h2j-flag--bs { --h2j-flag-offset: -496px; }
.h2j-flag--bt { --h2j-flag-offset: -512px; }
.h2j-flag--bw { --h2j-flag-offset: -528px; }
.h2j-flag--by { --h2j-flag-offset: -544px; }
.h2j-flag--bz { --h2j-flag-offset: -560px; }
.h2j-flag--ca { --h2j-flag-offset: -576px; }
.h2j-flag--cc { --h2j-flag-offset: -592px; }
.h2j-flag--cd { --h2j-flag-offset: -608px; }
.h2j-flag--cf { --h2j-flag-offset: -624px; }
.h2j-flag--cg { --h2j-flag-offset: -640px; }
.h2j-flag--ch { --h2j-flag-offset: -656px; }
.h2j-flag--ci { --h2j-flag-offset: -672px; }
.h2j-flag--ck { --h2j-flag-offset: -688px; }
.h2j-flag--cl { --h2j-flag-offset: -704px; }
.h2j-flag--cm { --h2j-flag-offset: -720px; }
.h2j-flag--cn { --h2j-flag-offset: -736px; }
.h2j-flag--co { --h2j-flag-offset: -752px; }
.h2j-flag--cr { --h2j-flag-offset: -768px; }
.h2j-flag--cu { --h2j-flag-offset: -784px; }
.h2j-flag--cv { --h2j-flag-offset: -800px; }
.h2j-flag--cw { --h2j-flag-offset: -816px; }
.h2j-flag--cx { --h2j-flag-offset: -832px; }
.h2j-flag--cy { --h2j-flag-offset: -848px; }
.h2j-flag--cz { --h2j-flag-offset: -864px; }
.h2j-flag--de { --h2j-flag-offset: -880px; }
.h2j-flag--dj { --h2j-flag-offset: -896px; }
.h2j-flag--dk { --h2j-flag-offset: -912px; }
.h2j-flag--dm { --h2j-flag-offset: -928px; }
.h2j-flag--do { --h2j-flag-offset: -944px; }
.h2j-flag--dz { --h2j-flag-offset: -960px; }
.h2j-flag--ec { --h2j-flag-offset: -976px; }
.h2j-flag--ee { --h2j-flag-offset: -992px; }
.h2j-flag--eg { --h2j-flag-offset: -1008px; }
.h2j-flag--eh { --h2j-flag-offset: -1024px; }
.h2j-flag--er { --h2j-flag-offset: -1040px; }
.h2j-flag--es { --h2j-flag-offset: -1056px; }
.h2j-flag--et { --h2j-flag-offset: -1072px; }
.h2j-flag--fi { --h2j-flag-offset: -1088px; }
.h2j-flag--fj { --h2j-flag-offset: -1104px; }
.h2j-flag--fk { --h2j-flag-offset: -1120px; }
.h2j-flag--fm { --h2j-flag-offset: -1136px; }
.h2j-flag--fo { --h2j-flag-offset: -1152px; }
.h2j-flag--fr { --h2j-flag-offset: -1168px; }
.h2j-flag--ga { --h2j-flag-offset: -1184px; }
.h2j-flag--gb { --h2j-flag-offset: -1200px; }
.h2j-flag--gd { --h2j-flag-offset: -1216px; }
.h2j-flag--ge { --h2j-flag-offset: -1232px; }
.h2j-flag--gg { --h2j-flag-offset: -1264px; }
.h2j-flag--gh { --h2j-flag-offset: -1280px; }
.h2j-flag--gi { --h2j-flag-offset: -1296px; }
.h2j-flag--gl { --h2j-flag-offset: -1312px; }
.h2j-flag--gm { --h2j-flag-offset: -1328px; }
.h2j-flag--gn { --h2j-flag-offset: -1344px; }
.h2j-flag--gq { --h2j-flag-offset: -1376px; }
.h2j-flag--gr { --h2j-flag-offset: -1392px; }
.h2j-flag--gt { --h2j-flag-offset: -1408px; }
.h2j-flag--gu { --h2j-flag-offset: -1424px; }
.h2j-flag--gw { --h2j-flag-offset: -1440px; }
.h2j-flag--gy { --h2j-flag-offset: -1456px; }
.h2j-flag--hk { --h2j-flag-offset: -1472px; }
.h2j-flag--hn { --h2j-flag-offset: -1488px; }
.h2j-flag--hr { --h2j-flag-offset: -1504px; }
.h2j-flag--ht { --h2j-flag-offset: -1520px; }
.h2j-flag--hu { --h2j-flag-offset: -1536px; }
.h2j-flag--id { --h2j-flag-offset: -1552px; }
.h2j-flag--ie { --h2j-flag-offset: -1568px; }
.h2j-flag--il { --h2j-flag-offset: -1584px; }
.h2j-flag--im { --h2j-flag-offset: -1600px; }
.h2j-flag--in { --h2j-flag-offset: -1616px; }
.h2j-flag--io { --h2j-flag-offset: -1632px; }
.h2j-flag--iq { --h2j-flag-offset: -1648px; }
.h2j-flag--ir { --h2j-flag-offset: -1664px; }
.h2j-flag--is { --h2j-flag-offset: -1680px; }
.h2j-flag--it { --h2j-flag-offset: -1696px; }
.h2j-flag--je { --h2j-flag-offset: -1712px; }
.h2j-flag--jm { --h2j-flag-offset: -1728px; }
.h2j-flag--jo { --h2j-flag-offset: -1744px; }
.h2j-flag--jp { --h2j-flag-offset: -1760px; }
.h2j-flag--ke { --h2j-flag-offset: -1776px; }
.h2j-flag--kg { --h2j-flag-offset: -1792px; }
.h2j-flag--kh { --h2j-flag-offset: -1808px; }
.h2j-flag--ki { --h2j-flag-offset: -1824px; }
.h2j-flag--km { --h2j-flag-offset: -1840px; }
.h2j-flag--kn { --h2j-flag-offset: -1856px; }
.h2j-flag--kp { --h2j-flag-offset: -1872px; }
.h2j-flag--kr { --h2j-flag-offset: -1888px; }
.h2j-flag--kw { --h2j-flag-offset: -1904px; }
.h2j-flag--ky { --h2j-flag-offset: -1920px; }
.h2j-flag--kz { --h2j-flag-offset: -1936px; }
.h2j-flag--la { --h2j-flag-offset: -1952px; }
.h2j-flag--lb { --h2j-flag-offset: -1968px; }
.h2j-flag--lc { --h2j-flag-offset: -1984px; }
.h2j-flag--li { --h2j-flag-offset: -2000px; }
.h2j-flag--lk { --h2j-flag-offset: -2016px; }
.h2j-flag--lr { --h2j-flag-offset: -2032px; }
.h2j-flag--ls { --h2j-flag-offset: -2048px; }
.h2j-flag--lt { --h2j-flag-offset: -2064px; }
.h2j-flag--lu { --h2j-flag-offset: -2080px; }
.h2j-flag--lv { --h2j-flag-offset: -2096px; }
.h2j-flag--ly { --h2j-flag-offset: -2112px; }
.h2j-flag--ma { --h2j-flag-offset: -2128px; }
.h2j-flag--mc { --h2j-flag-offset: -2144px; }
.h2j-flag--md { --h2j-flag-offset: -2160px; }
.h2j-flag--me { --h2j-flag-offset: -2176px; }
.h2j-flag--mg { --h2j-flag-offset: -2208px; }
.h2j-flag--mh { --h2j-flag-offset: -2224px; }
.h2j-flag--mk { --h2j-flag-offset: -2240px; }
.h2j-flag--ml { --h2j-flag-offset: -2256px; }
.h2j-flag--mm { --h2j-flag-offset: -2272px; }
.h2j-flag--mn { --h2j-flag-offset: -2288px; }
.h2j-flag--mo { --h2j-flag-offset: -2304px; }
.h2j-flag--mp { --h2j-flag-offset: -2320px; }
.h2j-flag--mr { --h2j-flag-offset: -2352px; }
.h2j-flag--ms { --h2j-flag-offset: -2368px; }
.h2j-flag--mt { --h2j-flag-offset: -2384px; }
.h2j-flag--mu { --h2j-flag-offset: -2400px; }
.h2j-flag--mv { --h2j-flag-offset: -2416px; }
.h2j-flag--mw { --h2j-flag-offset: -2432px; }
.h2j-flag--mx { --h2j-flag-offset: -2448px; }
.h2j-flag--my { --h2j-flag-offset: -2464px; }
.h2j-flag--mz { --h2j-flag-offset: -2480px; }
.h2j-flag--na { --h2j-flag-offset: -2496px; }
.h2j-flag--nc { --h2j-flag-offset: -2512px; }
.h2j-flag--ne { --h2j-flag-offset: -2528px; }
.h2j-flag--nf { --h2j-flag-offset: -2544px; }
.h2j-flag--ng { --h2j-flag-offset: -2560px; }
.h2j-flag--ni { --h2j-flag-offset: -2576px; }
.h2j-flag--nl { --h2j-flag-offset: -2592px; }
.h2j-flag--no { --h2j-flag-offset: -2608px; }
.h2j-flag--np { --h2j-flag-offset: -2624px; }
.h2j-flag--nr { --h2j-flag-offset: -2640px; }
.h2j-flag--nu { --h2j-flag-offset: -2656px; }
.h2j-flag--nz { --h2j-flag-offset: -2672px; }
.h2j-flag--om { --h2j-flag-offset: -2688px; }
.h2j-flag--pa { --h2j-flag-offset: -2704px; }
.h2j-flag--pe { --h2j-flag-offset: -2720px; }
.h2j-flag--pg { --h2j-flag-offset: -2752px; }
.h2j-flag--ph { --h2j-flag-offset: -2768px; }
.h2j-flag--pk { --h2j-flag-offset: -2784px; }
.h2j-flag--pl { --h2j-flag-offset: -2800px; }
.h2j-flag--pr { --h2j-flag-offset: -2832px; }
.h2j-flag--ps { --h2j-flag-offset: -2848px; }
.h2j-flag--pt { --h2j-flag-offset: -2864px; }
.h2j-flag--pw { --h2j-flag-offset: -2880px; }
.h2j-flag--py { --h2j-flag-offset: -2896px; }
.h2j-flag--qa { --h2j-flag-offset: -2912px; }
.h2j-flag--ro { --h2j-flag-offset: -2944px; }
.h2j-flag--rs { --h2j-flag-offset: -2960px; }
.h2j-flag--ru { --h2j-flag-offset: -2976px; }
.h2j-flag--rw { --h2j-flag-offset: -2992px; }
.h2j-flag--sa { --h2j-flag-offset: -3008px; }
.h2j-flag--sb { --h2j-flag-offset: -3024px; }
.h2j-flag--sc { --h2j-flag-offset: -3040px; }
.h2j-flag--sd { --h2j-flag-offset: -3056px; }
.h2j-flag--se { --h2j-flag-offset: -3072px; }
.h2j-flag--sg { --h2j-flag-offset: -3088px; }
.h2j-flag--sh { --h2j-flag-offset: -3104px; }
.h2j-flag--si { --h2j-flag-offset: -3120px; }
.h2j-flag--sj { --h2j-flag-offset: -3136px; }
.h2j-flag--sk { --h2j-flag-offset: -3152px; }
.h2j-flag--sl { --h2j-flag-offset: -3168px; }
.h2j-flag--sm { --h2j-flag-offset: -3184px; }
.h2j-flag--sn { --h2j-flag-offset: -3200px; }
.h2j-flag--so { --h2j-flag-offset: -3216px; }
.h2j-flag--sr { --h2j-flag-offset: -3232px; }
.h2j-flag--ss { --h2j-flag-offset: -3248px; }
.h2j-flag--st { --h2j-flag-offset: -3264px; }
.h2j-flag--sv { --h2j-flag-offset: -3280px; }
.h2j-flag--sx { --h2j-flag-offset: -3296px; }
.h2j-flag--sy { --h2j-flag-offset: -3312px; }
.h2j-flag--sz { --h2j-flag-offset: -3328px; }
.h2j-flag--tc { --h2j-flag-offset: -3344px; }
.h2j-flag--td { --h2j-flag-offset: -3360px; }
.h2j-flag--tg { --h2j-flag-offset: -3376px; }
.h2j-flag--th { --h2j-flag-offset: -3392px; }
.h2j-flag--tj { --h2j-flag-offset: -3408px; }
.h2j-flag--tk { --h2j-flag-offset: -3424px; }
.h2j-flag--tl { --h2j-flag-offset: -3440px; }
.h2j-flag--tm { --h2j-flag-offset: -3456px; }
.h2j-flag--tn { --h2j-flag-offset: -3472px; }
.h2j-flag--to { --h2j-flag-offset: -3488px; }
.h2j-flag--tr { --h2j-flag-offset: -3504px; }
.h2j-flag--tt { --h2j-flag-offset: -3520px; }
.h2j-flag--tv { --h2j-flag-offset: -3536px; }
.h2j-flag--tw { --h2j-flag-offset: -3552px; }
.h2j-flag--tz { --h2j-flag-offset: -3568px; }
.h2j-flag--ua { --h2j-flag-offset: -3584px; }
.h2j-flag--ug { --h2j-flag-offset: -3600px; }
.h2j-flag--us { --h2j-flag-offset: -3616px; }
.h2j-flag--uy { --h2j-flag-offset: -3632px; }
.h2j-flag--uz { --h2j-flag-offset: -3648px; }
.h2j-flag--va { --h2j-flag-offset: -3664px; }
.h2j-flag--vc { --h2j-flag-offset: -3680px; }
.h2j-flag--ve { --h2j-flag-offset: -3696px; }
.h2j-flag--vg { --h2j-flag-offset: -3712px; }
.h2j-flag--vi { --h2j-flag-offset: -3728px; }
.h2j-flag--vn { --h2j-flag-offset: -3744px; }
.h2j-flag--vu { --h2j-flag-offset: -3760px; }
.h2j-flag--wf { --h2j-flag-offset: -3776px; }
.h2j-flag--ws { --h2j-flag-offset: -3792px; }
.h2j-flag--xk { --h2j-flag-offset: -3808px; }
.h2j-flag--ye { --h2j-flag-offset: -3824px; }
.h2j-flag--za { --h2j-flag-offset: -3856px; }
.h2j-flag--zm { --h2j-flag-offset: -3872px; }
.h2j-flag--zw { --h2j-flag-offset: -3888px; }

/* ═══════════════════════════════════════════════════════════════════════
   DOM-TOM FR OVERRIDES — 9 French overseas territories use local SVGs
   instead of a (non-existent) sprite entry. These take precedence over
   any generic fallback.
   Territories : MQ, GP, GF, RE, YT, MF, BL, PM, PF
   ═══════════════════════════════════════════════════════════════════════ */
.h2j-flag--mq,
.h2j-flag--gp,
.h2j-flag--gf,
.h2j-flag--re,
.h2j-flag--yt,
.h2j-flag--mf,
.h2j-flag--bl,
.h2j-flag--pm,
.h2j-flag--pf {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.h2j-flag--mq { background-image: url('../img/flags/custom/mq.svg') !important; }
.h2j-flag--gp { background-image: url('../img/flags/custom/gp.svg') !important; }
.h2j-flag--gf { background-image: url('../img/flags/custom/gf.svg') !important; }
.h2j-flag--re { background-image: url('../img/flags/custom/re.svg') !important; }
.h2j-flag--yt { background-image: url('../img/flags/custom/yt.svg') !important; }
.h2j-flag--mf { background-image: url('../img/flags/custom/mf.svg') !important; }
.h2j-flag--bl { background-image: url('../img/flags/custom/bl.svg') !important; }
.h2j-flag--pm { background-image: url('../img/flags/custom/pm.svg') !important; }
.h2j-flag--pf { background-image: url('../img/flags/custom/pf.svg') !important; }