/* ==========================================================================
   Flags intl-tel-input has not caught up with.

   The plugin draws every flag from ONE raster sprite —
   /plugins/intl-tel-input/img/flags.png and its @2x and .webp twins — and picks
   a country out of it with nothing but a background-position:

       .iti__sy { --iti-flag-offset: -3312px }

   So a flag is only ever as current as the sprite. Ours ships with
   intl-tel-input 24.7.0 and the sprite files are dated November 2024; Syria
   adopted its current flag — green/white/black with three red stars — that
   December. Nothing in the plugin computes a flag, so it will keep drawing the
   pre-2024 one until the sprite itself is replaced.

   Overriding here rather than editing the sprite, for three reasons: the sprite
   is a vendored binary and an upgrade overwrites it; a 3904px-wide PNG is not
   something to hand-patch and then have to redo for @2x and both .webp; and one
   rule in our own stylesheet is visible to whoever upgrades the plugin next.

   WHEN THE PLUGIN IS UPGRADED: check whether its sprite has the new flag, and
   if it does, delete this file, its <link> in views/layouts/head.ejs, and
   public/img/flags/sy.svg. Nothing else refers to them.
   ========================================================================== */

/* Two classes, so this beats the plugin's own .iti__flag background-image —
   both its 1x rule and the 2x one that follows it — on specificity rather than
   on load order. background-size and -position are reset because the shared
   rule sets them for a 3904px sprite, and this is a single 16x12 image. */
.iti__flag.iti__sy {
	background-image: url("/img/flags/sy.svg");
	background-position: 0 0;
	background-size: var(--iti-flag-width) var(--iti-flag-height);
}