From b4ec4e37577dfe6b7288860fddfbb88b8b50dab6 Mon Sep 17 00:00:00 2001
From: rajchales-monito <rajchales-monito@users.noreply.github.com>
Date: Thu, 30 Jul 2026 09:47:33 +0200
Subject: [PATCH] Use flag images for widget language select

---
 public/admin.css |  7 +++++--
 public/admin.js  | 14 +++++++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/public/admin.css b/public/admin.css
index 11ef0ca..4d74092 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -252,12 +252,15 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   z-index: 1;
   left: 12px;
   top: 50%;
-  width: 22px;
+  width: 18px;
+  height: 13px;
   transform: translateY(-50%);
-  font-size: 17px;
   line-height: 1;
   pointer-events: none;
 }
+.selected-language-flag .flag-image {
+  display: block;
+}
 .effect-settings .full-row {
   display: grid;
   align-items: stretch;
diff --git a/public/admin.js b/public/admin.js
index 2fbc661..5f2e367 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -461,7 +461,7 @@ function renderSite() {
 function renderWidgetLanguageOptions(form, settings) {
   const language = settings.widgetLanguage || {};
   const options = WIDGET_LANGUAGES
-    .map(([code, label]) => `<option value="${code}">${languageFlag(code)} ${code.toUpperCase()} - ${escapeHtml(label)}</option>`)
+    .map(([code, label]) => `<option value="${code}">${code.toUpperCase()} - ${escapeHtml(label)}</option>`)
     .join("");
   form.defaultLanguage.innerHTML = options;
   form.widgetLanguageMode.value = language.mode === "fixed" ? "default" : language.mode || "auto";
@@ -470,13 +470,18 @@ function renderWidgetLanguageOptions(form, settings) {
 }
 
 function languageFlag(language) {
+  const countryCode = languageCountryCode(language);
+  return countryCode ? flagEmoji(countryCode) : "";
+}
+
+function languageCountryCode(language) {
   const countries = {
     cs: "CZ", sk: "SK", en: "GB", de: "DE", pl: "PL", hu: "HU", ro: "RO", bg: "BG", hr: "HR", sl: "SI",
     it: "IT", fr: "FR", es: "ES", pt: "PT", nl: "NL", da: "DK", sv: "SE", fi: "FI", no: "NO", et: "EE",
     lv: "LV", lt: "LT", el: "GR", uk: "UA", ru: "RU", tr: "TR", sr: "RS", bs: "BA", sq: "AL", mk: "MK",
     mt: "MT", ga: "IE", is: "IS", be: "BY", ca: "ES"
   };
-  return flagEmoji(countries[language] || language);
+  return countries[language] || "";
 }
 
 function flagEmoji(countryCode) {
@@ -489,7 +494,10 @@ function updateDefaultLanguageFlag() {
   const flag = $("#defaultLanguageFlag");
   const select = $("#settingsForm")?.defaultLanguage;
   if (!flag || !select) return;
-  flag.textContent = languageFlag(select.value || "cs");
+  const countryCode = languageCountryCode(select.value || "cs");
+  flag.innerHTML = countryCode
+    ? `<span class="flag-image" style="background-image:url('https://flagcdn.com/24x18/${countryCode.toLowerCase()}.png')" aria-hidden="true"></span>`
+    : "";
 }
 
 function renderWidgetCopyFields(language) {