Add CSS flag dropdown select with lipis flag-icons

- css/flag-icons.css: lipis 4x3 set, 1x1 stripped, paths → ../icons/flags/
- countries_inc.php: asort, Smarty assigns, loadCss (PKG_PATH not PKG_URL);
  PHP files reduce to single require()
- flag_select_inc.tpl: custom dropdown with .fi CSS flags, search filter,
  jQuery open/close; fsName/fsValue/fsId/fsSize; min-width 300px;
  line-height:1.5em on flag spans
- html_head_inc.tpl placeholder; display templates keep {biticon istyle=flag}

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

10 files changed, 85 insertions, 26 deletions

diff --git a/css/flag-icons.css b/css/flag-icons.css
new file mode 100644
index 0000000..b62eda5
--- /dev/null
+++ b/css/flag-icons.css
@@ -0,0 +1 @@
+.fib,.fi{background-size:contain;background-position:50%;background-repeat:no-repeat}.fi{position:relative;display:inline-block;width:1.333333em;line-height:1em}.fi:before{content:" "}.fi-xx{background-image:url(../icons/flags/xx.svg)}.fi-ad{background-image:url(../icons/flags/ad.svg)}.fi-ae{background-image:url(../icons/flags/ae.svg)}.fi-af{background-image:url(../icons/flags/af.svg)}.fi-ag{background-image:url(../icons/flags/ag.svg)}.fi-ai{background-image:url(../icons/flags/ai.svg)}.fi-al{background-image:url(../icons/flags/al.svg)}.fi-am{background-image:url(../icons/flags/am.svg)}.fi-ao{background-image:url(../icons/flags/ao.svg)}.fi-aq{background-image:url(../icons/flags/aq.svg)}.fi-ar{background-image:url(../icons/flags/ar.svg)}.fi-as{background-image:url(../icons/flags/as.svg)}.fi-at{background-image:url(../icons/flags/at.svg)}.fi-au{background-image:url(../icons/flags/au.svg)}.fi-aw{background-image:url(../icons/flags/aw.svg)}.fi-ax{background-image:url(../icons/flags/ax.svg)}.fi-az{background-image:url(../icons/flags/az.svg)}.fi-ba{background-image:url(../icons/flags/ba.svg)}.fi-bb{background-image:url(../icons/flags/bb.svg)}.fi-bd{background-image:url(../icons/flags/bd.svg)}.fi-be{background-image:url(../icons/flags/be.svg)}.fi-bf{background-image:url(../icons/flags/bf.svg)}.fi-bg{background-image:url(../icons/flags/bg.svg)}.fi-bh{background-image:url(../icons/flags/bh.svg)}.fi-bi{background-image:url(../icons/flags/bi.svg)}.fi-bj{background-image:url(../icons/flags/bj.svg)}.fi-bl{background-image:url(../icons/flags/bl.svg)}.fi-bm{background-image:url(../icons/flags/bm.svg)}.fi-bn{background-image:url(../icons/flags/bn.svg)}.fi-bo{background-image:url(../icons/flags/bo.svg)}.fi-bq{background-image:url(../icons/flags/bq.svg)}.fi-br{background-image:url(../icons/flags/br.svg)}.fi-bs{background-image:url(../icons/flags/bs.svg)}.fi-bt{background-image:url(../icons/flags/bt.svg)}.fi-bv{background-image:url(../icons/flags/bv.svg)}.fi-bw{background-image:url(../icons/flags/bw.svg)}.fi-by{background-image:url(../icons/flags/by.svg)}.fi-bz{background-image:url(../icons/flags/bz.svg)}.fi-ca{background-image:url(../icons/flags/ca.svg)}.fi-cc{background-image:url(../icons/flags/cc.svg)}.fi-cd{background-image:url(../icons/flags/cd.svg)}.fi-cf{background-image:url(../icons/flags/cf.svg)}.fi-cg{background-image:url(../icons/flags/cg.svg)}.fi-ch{background-image:url(../icons/flags/ch.svg)}.fi-ci{background-image:url(../icons/flags/ci.svg)}.fi-ck{background-image:url(../icons/flags/ck.svg)}.fi-cl{background-image:url(../icons/flags/cl.svg)}.fi-cm{background-image:url(../icons/flags/cm.svg)}.fi-cn{background-image:url(../icons/flags/cn.svg)}.fi-co{background-image:url(../icons/flags/co.svg)}.fi-cr{background-image:url(../icons/flags/cr.svg)}.fi-cu{background-image:url(../icons/flags/cu.svg)}.fi-cv{background-image:url(../icons/flags/cv.svg)}.fi-cw{background-image:url(../icons/flags/cw.svg)}.fi-cx{background-image:url(../icons/flags/cx.svg)}.fi-cy{background-image:url(../icons/flags/cy.svg)}.fi-cz{background-image:url(../icons/flags/cz.svg)}.fi-de{background-image:url(../icons/flags/de.svg)}.fi-dj{background-image:url(../icons/flags/dj.svg)}.fi-dk{background-image:url(../icons/flags/dk.svg)}.fi-dm{background-image:url(../icons/flags/dm.svg)}.fi-do{background-image:url(../icons/flags/do.svg)}.fi-dz{background-image:url(../icons/flags/dz.svg)}.fi-ec{background-image:url(../icons/flags/ec.svg)}.fi-ee{background-image:url(../icons/flags/ee.svg)}.fi-eg{background-image:url(../icons/flags/eg.svg)}.fi-eh{background-image:url(../icons/flags/eh.svg)}.fi-er{background-image:url(../icons/flags/er.svg)}.fi-es{background-image:url(../icons/flags/es.svg)}.fi-et{background-image:url(../icons/flags/et.svg)}.fi-fi{background-image:url(../icons/flags/fi.svg)}.fi-fj{background-image:url(../icons/flags/fj.svg)}.fi-fk{background-image:url(../icons/flags/fk.svg)}.fi-fm{background-image:url(../icons/flags/fm.svg)}.fi-fo{background-image:url(../icons/flags/fo.svg)}.fi-fr{background-image:url(../icons/flags/fr.svg)}.fi-ga{background-image:url(../icons/flags/ga.svg)}.fi-gb{background-image:url(../icons/flags/gb.svg)}.fi-gd{background-image:url(../icons/flags/gd.svg)}.fi-ge{background-image:url(../icons/flags/ge.svg)}.fi-gf{background-image:url(../icons/flags/gf.svg)}.fi-gg{background-image:url(../icons/flags/gg.svg)}.fi-gh{background-image:url(../icons/flags/gh.svg)}.fi-gi{background-image:url(../icons/flags/gi.svg)}.fi-gl{background-image:url(../icons/flags/gl.svg)}.fi-gm{background-image:url(../icons/flags/gm.svg)}.fi-gn{background-image:url(../icons/flags/gn.svg)}.fi-gp{background-image:url(../icons/flags/gp.svg)}.fi-gq{background-image:url(../icons/flags/gq.svg)}.fi-gr{background-image:url(../icons/flags/gr.svg)}.fi-gs{background-image:url(../icons/flags/gs.svg)}.fi-gt{background-image:url(../icons/flags/gt.svg)}.fi-gu{background-image:url(../icons/flags/gu.svg)}.fi-gw{background-image:url(../icons/flags/gw.svg)}.fi-gy{background-image:url(../icons/flags/gy.svg)}.fi-hk{background-image:url(../icons/flags/hk.svg)}.fi-hm{background-image:url(../icons/flags/hm.svg)}.fi-hn{background-image:url(../icons/flags/hn.svg)}.fi-hr{background-image:url(../icons/flags/hr.svg)}.fi-ht{background-image:url(../icons/flags/ht.svg)}.fi-hu{background-image:url(../icons/flags/hu.svg)}.fi-id{background-image:url(../icons/flags/id.svg)}.fi-ie{background-image:url(../icons/flags/ie.svg)}.fi-il{background-image:url(../icons/flags/il.svg)}.fi-im{background-image:url(../icons/flags/im.svg)}.fi-in{background-image:url(../icons/flags/in.svg)}.fi-io{background-image:url(../icons/flags/io.svg)}.fi-iq{background-image:url(../icons/flags/iq.svg)}.fi-ir{background-image:url(../icons/flags/ir.svg)}.fi-is{background-image:url(../icons/flags/is.svg)}.fi-it{background-image:url(../icons/flags/it.svg)}.fi-je{background-image:url(../icons/flags/je.svg)}.fi-jm{background-image:url(../icons/flags/jm.svg)}.fi-jo{background-image:url(../icons/flags/jo.svg)}.fi-jp{background-image:url(../icons/flags/jp.svg)}.fi-ke{background-image:url(../icons/flags/ke.svg)}.fi-kg{background-image:url(../icons/flags/kg.svg)}.fi-kh{background-image:url(../icons/flags/kh.svg)}.fi-ki{background-image:url(../icons/flags/ki.svg)}.fi-km{background-image:url(../icons/flags/km.svg)}.fi-kn{background-image:url(../icons/flags/kn.svg)}.fi-kp{background-image:url(../icons/flags/kp.svg)}.fi-kr{background-image:url(../icons/flags/kr.svg)}.fi-kw{background-image:url(../icons/flags/kw.svg)}.fi-ky{background-image:url(../icons/flags/ky.svg)}.fi-kz{background-image:url(../icons/flags/kz.svg)}.fi-la{background-image:url(../icons/flags/la.svg)}.fi-lb{background-image:url(../icons/flags/lb.svg)}.fi-lc{background-image:url(../icons/flags/lc.svg)}.fi-li{background-image:url(../icons/flags/li.svg)}.fi-lk{background-image:url(../icons/flags/lk.svg)}.fi-lr{background-image:url(../icons/flags/lr.svg)}.fi-ls{background-image:url(../icons/flags/ls.svg)}.fi-lt{background-image:url(../icons/flags/lt.svg)}.fi-lu{background-image:url(../icons/flags/lu.svg)}.fi-lv{background-image:url(../icons/flags/lv.svg)}.fi-ly{background-image:url(../icons/flags/ly.svg)}.fi-ma{background-image:url(../icons/flags/ma.svg)}.fi-mc{background-image:url(../icons/flags/mc.svg)}.fi-md{background-image:url(../icons/flags/md.svg)}.fi-me{background-image:url(../icons/flags/me.svg)}.fi-mf{background-image:url(../icons/flags/mf.svg)}.fi-mg{background-image:url(../icons/flags/mg.svg)}.fi-mh{background-image:url(../icons/flags/mh.svg)}.fi-mk{background-image:url(../icons/flags/mk.svg)}.fi-ml{background-image:url(../icons/flags/ml.svg)}.fi-mm{background-image:url(../icons/flags/mm.svg)}.fi-mn{background-image:url(../icons/flags/mn.svg)}.fi-mo{background-image:url(../icons/flags/mo.svg)}.fi-mp{background-image:url(../icons/flags/mp.svg)}.fi-mq{background-image:url(../icons/flags/mq.svg)}.fi-mr{background-image:url(../icons/flags/mr.svg)}.fi-ms{background-image:url(../icons/flags/ms.svg)}.fi-mt{background-image:url(../icons/flags/mt.svg)}.fi-mu{background-image:url(../icons/flags/mu.svg)}.fi-mv{background-image:url(../icons/flags/mv.svg)}.fi-mw{background-image:url(../icons/flags/mw.svg)}.fi-mx{background-image:url(../icons/flags/mx.svg)}.fi-my{background-image:url(../icons/flags/my.svg)}.fi-mz{background-image:url(../icons/flags/mz.svg)}.fi-na{background-image:url(../icons/flags/na.svg)}.fi-nc{background-image:url(../icons/flags/nc.svg)}.fi-ne{background-image:url(../icons/flags/ne.svg)}.fi-nf{background-image:url(../icons/flags/nf.svg)}.fi-ng{background-image:url(../icons/flags/ng.svg)}.fi-ni{background-image:url(../icons/flags/ni.svg)}.fi-nl{background-image:url(../icons/flags/nl.svg)}.fi-no{background-image:url(../icons/flags/no.svg)}.fi-np{background-image:url(../icons/flags/np.svg)}.fi-nr{background-image:url(../icons/flags/nr.svg)}.fi-nu{background-image:url(../icons/flags/nu.svg)}.fi-nz{background-image:url(../icons/flags/nz.svg)}.fi-om{background-image:url(../icons/flags/om.svg)}.fi-pa{background-image:url(../icons/flags/pa.svg)}.fi-pe{background-image:url(../icons/flags/pe.svg)}.fi-pf{background-image:url(../icons/flags/pf.svg)}.fi-pg{background-image:url(../icons/flags/pg.svg)}.fi-ph{background-image:url(../icons/flags/ph.svg)}.fi-pk{background-image:url(../icons/flags/pk.svg)}.fi-pl{background-image:url(../icons/flags/pl.svg)}.fi-pm{background-image:url(../icons/flags/pm.svg)}.fi-pn{background-image:url(../icons/flags/pn.svg)}.fi-pr{background-image:url(../icons/flags/pr.svg)}.fi-ps{background-image:url(../icons/flags/ps.svg)}.fi-pt{background-image:url(../icons/flags/pt.svg)}.fi-pw{background-image:url(../icons/flags/pw.svg)}.fi-py{background-image:url(../icons/flags/py.svg)}.fi-qa{background-image:url(../icons/flags/qa.svg)}.fi-re{background-image:url(../icons/flags/re.svg)}.fi-ro{background-image:url(../icons/flags/ro.svg)}.fi-rs{background-image:url(../icons/flags/rs.svg)}.fi-ru{background-image:url(../icons/flags/ru.svg)}.fi-rw{background-image:url(../icons/flags/rw.svg)}.fi-sa{background-image:url(../icons/flags/sa.svg)}.fi-sb{background-image:url(../icons/flags/sb.svg)}.fi-sc{background-image:url(../icons/flags/sc.svg)}.fi-sd{background-image:url(../icons/flags/sd.svg)}.fi-se{background-image:url(../icons/flags/se.svg)}.fi-sg{background-image:url(../icons/flags/sg.svg)}.fi-sh{background-image:url(../icons/flags/sh.svg)}.fi-si{background-image:url(../icons/flags/si.svg)}.fi-sj{background-image:url(../icons/flags/sj.svg)}.fi-sk{background-image:url(../icons/flags/sk.svg)}.fi-sl{background-image:url(../icons/flags/sl.svg)}.fi-sm{background-image:url(../icons/flags/sm.svg)}.fi-sn{background-image:url(../icons/flags/sn.svg)}.fi-so{background-image:url(../icons/flags/so.svg)}.fi-sr{background-image:url(../icons/flags/sr.svg)}.fi-ss{background-image:url(../icons/flags/ss.svg)}.fi-st{background-image:url(../icons/flags/st.svg)}.fi-sv{background-image:url(../icons/flags/sv.svg)}.fi-sx{background-image:url(../icons/flags/sx.svg)}.fi-sy{background-image:url(../icons/flags/sy.svg)}.fi-sz{background-image:url(../icons/flags/sz.svg)}.fi-tc{background-image:url(../icons/flags/tc.svg)}.fi-td{background-image:url(../icons/flags/td.svg)}.fi-tf{background-image:url(../icons/flags/tf.svg)}.fi-tg{background-image:url(../icons/flags/tg.svg)}.fi-th{background-image:url(../icons/flags/th.svg)}.fi-tj{background-image:url(../icons/flags/tj.svg)}.fi-tk{background-image:url(../icons/flags/tk.svg)}.fi-tl{background-image:url(../icons/flags/tl.svg)}.fi-tm{background-image:url(../icons/flags/tm.svg)}.fi-tn{background-image:url(../icons/flags/tn.svg)}.fi-to{background-image:url(../icons/flags/to.svg)}.fi-tr{background-image:url(../icons/flags/tr.svg)}.fi-tt{background-image:url(../icons/flags/tt.svg)}.fi-tv{background-image:url(../icons/flags/tv.svg)}.fi-tw{background-image:url(../icons/flags/tw.svg)}.fi-tz{background-image:url(../icons/flags/tz.svg)}.fi-ua{background-image:url(../icons/flags/ua.svg)}.fi-ug{background-image:url(../icons/flags/ug.svg)}.fi-um{background-image:url(../icons/flags/um.svg)}.fi-us{background-image:url(../icons/flags/us.svg)}.fi-uy{background-image:url(../icons/flags/uy.svg)}.fi-uz{background-image:url(../icons/flags/uz.svg)}.fi-va{background-image:url(../icons/flags/va.svg)}.fi-vc{background-image:url(../icons/flags/vc.svg)}.fi-ve{background-image:url(../icons/flags/ve.svg)}.fi-vg{background-image:url(../icons/flags/vg.svg)}.fi-vi{background-image:url(../icons/flags/vi.svg)}.fi-vn{background-image:url(../icons/flags/vn.svg)}.fi-vu{background-image:url(../icons/flags/vu.svg)}.fi-wf{background-image:url(../icons/flags/wf.svg)}.fi-ws{background-image:url(../icons/flags/ws.svg)}.fi-ye{background-image:url(../icons/flags/ye.svg)}.fi-yt{background-image:url(../icons/flags/yt.svg)}.fi-za{background-image:url(../icons/flags/za.svg)}.fi-zm{background-image:url(../icons/flags/zm.svg)}.fi-zw{background-image:url(../icons/flags/zw.svg)}.fi-arab{background-image:url(../icons/flags/arab.svg)}.fi-asean{background-image:url(../icons/flags/asean.svg)}.fi-cefta{background-image:url(../icons/flags/cefta.svg)}.fi-cp{background-image:url(../icons/flags/cp.svg)}.fi-dg{background-image:url(../icons/flags/dg.svg)}.fi-eac{background-image:url(../icons/flags/eac.svg)}.fi-es-ct{background-image:url(../icons/flags/es-ct.svg)}.fi-es-ga{background-image:url(../icons/flags/es-ga.svg)}.fi-es-pv{background-image:url(../icons/flags/es-pv.svg)}.fi-eu{background-image:url(../icons/flags/eu.svg)}.fi-gb-eng{background-image:url(../icons/flags/gb-eng.svg)}.fi-gb-nir{background-image:url(../icons/flags/gb-nir.svg)}.fi-gb-sct{background-image:url(../icons/flags/gb-sct.svg)}.fi-gb-wls{background-image:url(../icons/flags/gb-wls.svg)}.fi-ic{background-image:url(../icons/flags/ic.svg)}.fi-pc{background-image:url(../icons/flags/pc.svg)}.fi-sh-ac{background-image:url(../icons/flags/sh-ac.svg)}.fi-sh-hl{background-image:url(../icons/flags/sh-hl.svg)}.fi-sh-ta{background-image:url(../icons/flags/sh-ta.svg)}.fi-un{background-image:url(../icons/flags/un.svg)}.fi-xk{background-image:url(../icons/flags/xk.svg)}
diff --git a/hauth_register.php b/hauth_register.php
index 9eb2ab8..8e4dd6d 100755
--- a/hauth_register.php
+++ b/hauth_register.php
@@ -80,8 +80,6 @@ $gBitSmarty->assign( 'languages', $languages );
 $gBitSmarty->assign( 'gBitLanguage', $gBitLanguage );
 
 require( USERS_PKG_INCLUDE_PATH.'countries_inc.php' );
-asort( $bwCountries );
-$gBitSmarty->assign( 'countries', $bwCountries );
 
 
 // include preferences settings from other packages - these will be included as individual tabs
diff --git a/includes/countries_inc.php b/includes/countries_inc.php
index a59cb12..c711720 100644
--- a/includes/countries_inc.php
+++ b/includes/countries_inc.php
@@ -526,3 +526,14 @@ $bwIso3166 = [
 	// Territories without clean entry: cp (Clipperton), dg (Diego Garcia), ic (Canary Islands)
 	// Placeholder: xx (unknown flag)
 ];
+
+asort( $bwCountries );
+
+global $gBitSmarty, $gBitThemes;
+if (!empty($gBitSmarty)) {
+	$gBitSmarty->assign( 'countries', $bwCountries );
+	$gBitSmarty->assign( 'countryFlags', $bwIso3166 );
+	if (!empty($gBitThemes)) {
+		$gBitThemes->loadCss( USERS_PKG_PATH.'css/flag-icons.css' );
+	}
+}
diff --git a/preferences.php b/preferences.php
index 39f3b03..728564d 100755
--- a/preferences.php
+++ b/preferences.php
@@ -226,8 +226,6 @@ $languages = $gBitLanguage->listLanguages();
 $gBitSmarty->assign( 'languages', $languages );
 
 require( USERS_PKG_INCLUDE_PATH.'countries_inc.php' );
-asort( $bwCountries );
-$gBitSmarty->assign( 'countries', $bwCountries );
 
 $editUser->mInfo['users_homepage'] = $editUser->getPreference( 'users_homepage', '' );
 
diff --git a/register.php b/register.php
index 5a29460..f491f08 100755
--- a/register.php
+++ b/register.php
@@ -135,8 +135,6 @@ $gBitSmarty->assign( 'languages', $languages );
 $gBitSmarty->assign( 'gBitLanguage', $gBitLanguage );
 
 require( USERS_PKG_INCLUDE_PATH.'countries_inc.php' );
-asort( $bwCountries );
-$gBitSmarty->assign( 'countries', $bwCountries );
 
 $listHash = [
 	'is_public' => 'y',
diff --git a/templates/flag_select_inc.tpl b/templates/flag_select_inc.tpl
new file mode 100644
index 0000000..a73ceb1
--- /dev/null
+++ b/templates/flag_select_inc.tpl
@@ -0,0 +1,69 @@
+{* Flag country select widget.
+   Params: fsName (input name), fsValue (current alpha-3 code), fsId (unique element id)
+   Optional: fsSize (small|medium|large, default small) *}
+{assign var=_fsSizes value=['small'=>['w'=>21,'h'=>16],'medium'=>['w'=>32,'h'=>24],'large'=>['w'=>43,'h'=>32]]}
+{assign var=_fsDims value=$_fsSizes[$fsSize|default:'small']}
+{assign var=_fsStyle value="width:{$_fsDims.w}px;line-height:1.5em;vertical-align:middle"}
+{assign var=fsFlagCode value=$countryFlags[$fsValue]|default:''}
+<div class="bw-flag-select" id="{$fsId}">
+	<input type="hidden" name="{$fsName}" value="{$fsValue|escape}">
+	<button type="button" class="bw-flag-trigger form-control" style="text-align:left;cursor:pointer">
+		{if $fsFlagCode}<span class="fi fi-{$fsFlagCode}" style="{$_fsStyle};margin-right:6px"></span>{/if}<span class="bw-flag-label">{$countries[$fsValue]|default:''|escape}</span>
+		<span class="caret" style="float:right;margin-top:8px"></span>
+	</button>
+	<div class="bw-flag-dropdown panel panel-default" style="display:none;position:absolute;z-index:1050;min-width:300px">
+		<div class="panel-body" style="padding:6px">
+			<input type="text" class="bw-flag-search form-control input-sm" placeholder="{tr}Search{/tr}...">
+		</div>
+		<ul class="bw-flag-list list-unstyled" style="max-height:280px;overflow-y:auto;margin:0;padding:0 0 4px">
+			<li data-value="" data-label="" style="padding:4px 10px"><em>{tr}None{/tr}</em></li>
+			{foreach $countries as $code => $name}
+				{assign var=fc value=$countryFlags[$code]|default:''}
+				<li data-value="{$code|escape}" data-label="{$name|escape}" style="padding:3px 10px;cursor:pointer">
+					{if $fc}<span class="fi fi-{$fc}" style="{$_fsStyle};margin-right:6px"></span>{/if}{$name|escape}
+				</li>
+			{/foreach}
+		</ul>
+	</div>
+</div>
+{literal}
+<script>
+(function($) {
+	$(document).ready(function() {
+		$('.bw-flag-select').each(function() {
+			var $w = $(this), $input = $w.find('input[type=hidden]'),
+				$trigger = $w.find('.bw-flag-trigger'), $label = $w.find('.bw-flag-label'),
+				$dd = $w.find('.bw-flag-dropdown'), $search = $w.find('.bw-flag-search'),
+				$items = $w.find('.bw-flag-list li');
+
+			$trigger.on('click', function(e) {
+				e.stopPropagation();
+				$('.bw-flag-dropdown').not($dd).hide();
+				$dd.toggle();
+				if ($dd.is(':visible')) { $search.val('').trigger('input').focus(); }
+			});
+
+			$search.on('input', function() {
+				var q = $(this).val().toLowerCase();
+				$items.each(function() {
+					$(this).toggle(!q || $(this).data('label').toLowerCase().indexOf(q) !== -1);
+				});
+			});
+
+			$items.on('click', function() {
+				var val = $(this).data('value'), lbl = $(this).data('label');
+				$input.val(val);
+				$label.text(lbl);
+				var $fi = $(this).find('.fi');
+				$trigger.find('.fi').remove();
+				if ($fi.length) { $trigger.prepend($fi.clone().css('margin-right', '6px')); }
+				$dd.hide();
+			});
+
+			$(document).on('click.bwflag', function() { $dd.hide(); });
+			$dd.on('click', function(e) { e.stopPropagation(); });
+		});
+	});
+}(jQuery));
+</script>
+{/literal}
diff --git a/templates/html_head_inc.tpl b/templates/html_head_inc.tpl
new file mode 100644
index 0000000..a43660c
--- /dev/null
+++ b/templates/html_head_inc.tpl
@@ -0,0 +1 @@
+{* users html head — flag-icons.css loaded via countries_inc.php when $countries is assigned *}
diff --git a/templates/register.tpl b/templates/register.tpl
index 9f4ae89..366a1f0 100644
--- a/templates/register.tpl
+++ b/templates/register.tpl
@@ -129,12 +129,7 @@
 			<div class="form-group">
 				{formlabel label="Country" for="country"}
 				{forminput}
-					<select name="prefs[users_country]" id="country">
-						<option value=""></option>
-						{foreach $countries as $code => $name}
-							<option value="{$code|escape}"{if $smarty.request.prefs.users_country eq $code} selected="selected"{/if}>{$name|escape}</option>
-						{/foreach}
-					</select>
+					{include file="bitpackage:users/flag_select_inc.tpl" fsName="prefs[users_country]" fsValue=$smarty.request.prefs.users_country fsId="flag-select-reg"}
 					{formhelp note=""}
 				{/forminput}
 			</div>
diff --git a/templates/role_register.tpl b/templates/role_register.tpl
index e9b0463..3b4760c 100644
--- a/templates/role_register.tpl
+++ b/templates/role_register.tpl
@@ -145,12 +145,7 @@
 						<div class="form-group">
 							{formlabel label="Country" for="country"}
 							{forminput}
-								<select name="prefs[users_country]" id="country">
-									<option value=""></option>
-									{foreach $countries as $code => $name}
-										<option value="{$code|escape}"{if $smarty.request.prefs.users_country eq $code} selected="selected"{/if}>{$name|escape}</option>
-									{/foreach}
-								</select>
+								{include file="bitpackage:users/flag_select_inc.tpl" fsName="prefs[users_country]" fsValue=$smarty.request.prefs.users_country fsId="flag-select-role-reg"}
 								{formhelp note=""}
 							{/forminput}
 						</div>
diff --git a/templates/user_preferences.tpl b/templates/user_preferences.tpl
index 8ca189a..22d2cfa 100644
--- a/templates/user_preferences.tpl
+++ b/templates/user_preferences.tpl
@@ -61,14 +61,7 @@
 						<div class="form-group">
 							{formlabel label="Country" for="country"}
 							{forminput}
-								<select name="users_country" id="country" class="form-control">
-									<option value=""></option>
-									{foreach $countries as $code => $name}
-										<option value="{$code|escape}"{if $editUser->mPrefs.users_country_code eq $code} selected="selected"{/if}>{$name|escape}</option>
-									{/foreach}
-								</select>
-								&nbsp;
-								{if $editUser->mPrefs.flag}{biticon iforce=icon ipackage=users ipath="flags/" iname=$editUser->mPrefs.flag iexplain=$editUser->mPrefs.users_country istyle=flag}{/if}
+								{include file="bitpackage:users/flag_select_inc.tpl" fsName="users_country" fsValue=$editUser->mPrefs.users_country_code fsId="flag-select-prefs" fsSize="medium"}
 							{/forminput}
 						</div>