@magicfeedback/popup-sdk 1.5.0 → 1.7.0

package/dist/react-native.js

@@ -178,11 +178,2096 @@ var init_font = __esm({
   }
 });
 
+// src/i18n/labels.ts
+function resolveLocale(lang) {
+  if (typeof lang !== "string") return "en";
+  const normalized = lang.trim().toLowerCase().replace(/_/g, "-");
+  if (!normalized) return "en";
+  if (normalized === "zh" || normalized.startsWith("zh-")) return "zh-CN";
+  const primary = normalized.split("-")[0];
+  switch (primary) {
+    case "en":
+      return "en";
+    case "es":
+      return "es";
+    case "da":
+      return "da";
+    case "no":
+    case "nb":
+    case "nn":
+      return "no";
+    case "sv":
+      return "sv";
+    case "fi":
+      return "fi";
+    case "de":
+      return "de";
+    case "fr":
+      return "fr";
+    case "pt":
+      return "pt";
+    case "ar":
+      return "ar";
+    case "bn":
+      return "bn";
+    default:
+      return "en";
+  }
+}
+function isRtlLanguage(lang) {
+  return RTL_LOCALES.includes(resolveLocale(lang));
+}
+function directionFor(lang) {
+  return isRtlLanguage(lang) ? "rtl" : "ltr";
+}
+function getLabels(lang) {
+  return LABELS[resolveLocale(lang)];
+}
+function resolveActionLabels(actions, lang) {
+  const labels = getLabels(lang);
+  const pick = (value, fallback) => {
+    const trimmed = typeof value === "string" ? value.trim() : "";
+    return trimmed ? value : fallback;
+  };
+  return {
+    accept: pick(actions?.accept?.label, labels.accept),
+    decline: pick(actions?.decline?.label, labels.decline),
+    start: pick(actions?.start?.label, labels.start),
+    complete: pick(actions?.complete?.label, labels.complete),
+    back: pick(actions?.back?.label, labels.back)
+  };
+}
+var EN, ES, DA, NO, SV, FI, DE, FR, PT, AR, BN, ZH_CN, LABELS, RTL_LOCALES, RESOLVE_LOCALE_JS;
+var init_labels = __esm({
+  "src/i18n/labels.ts"() {
+    "use strict";
+    EN = {
+      accept: "Send",
+      decline: "Cancel",
+      start: "Start survey",
+      complete: "Complete survey",
+      back: "Back",
+      question: "Question",
+      of: "of",
+      followUp: "Follow-up",
+      closeAria: "Close popup",
+      loadingAria: "Loading survey",
+      errorRequired: "Please answer the required question to continue.",
+      errorSubmit: "An error occurred while submitting. Please try again or close the popup."
+    };
+    ES = {
+      accept: "Enviar",
+      decline: "Cancelar",
+      start: "Empezar encuesta",
+      complete: "Completar encuesta",
+      back: "Atr\xE1s",
+      question: "Pregunta",
+      of: "de",
+      followUp: "Seguimiento",
+      closeAria: "Cerrar ventana emergente",
+      loadingAria: "Cargando encuesta",
+      errorRequired: "Responde la pregunta obligatoria para continuar.",
+      errorSubmit: "Se produjo un error al enviar. Int\xE9ntalo de nuevo o cierra la ventana."
+    };
+    DA = {
+      accept: "Send",
+      decline: "Annuller",
+      start: "Start unders\xF8gelse",
+      complete: "Afslut unders\xF8gelse",
+      back: "Tilbage",
+      question: "Sp\xF8rgsm\xE5l",
+      of: "af",
+      followUp: "Opf\xF8lgning",
+      closeAria: "Luk pop op",
+      loadingAria: "Indl\xE6ser unders\xF8gelse",
+      errorRequired: "Besvar venligst det obligatoriske sp\xF8rgsm\xE5l for at forts\xE6tte.",
+      errorSubmit: "Der opstod en fejl under afsendelsen. Pr\xF8v igen, eller luk pop op-vinduet."
+    };
+    NO = {
+      accept: "Send",
+      decline: "Avbryt",
+      start: "Start unders\xF8kelse",
+      complete: "Fullf\xF8r unders\xF8kelse",
+      back: "Tilbake",
+      question: "Sp\xF8rsm\xE5l",
+      of: "av",
+      followUp: "Oppf\xF8lging",
+      closeAria: "Lukk popup",
+      loadingAria: "Laster unders\xF8kelse",
+      errorRequired: "Svar p\xE5 det obligatoriske sp\xF8rsm\xE5let for \xE5 fortsette.",
+      errorSubmit: "Det oppstod en feil under innsendingen. Pr\xF8v igjen, eller lukk popupen."
+    };
+    SV = {
+      accept: "Skicka",
+      decline: "Avbryt",
+      start: "Starta unders\xF6kning",
+      complete: "Slutf\xF6r unders\xF6kning",
+      back: "Tillbaka",
+      question: "Fr\xE5ga",
+      of: "av",
+      followUp: "Uppf\xF6ljning",
+      closeAria: "St\xE4ng popup",
+      loadingAria: "Laddar unders\xF6kning",
+      errorRequired: "Svara p\xE5 den obligatoriska fr\xE5gan f\xF6r att forts\xE4tta.",
+      errorSubmit: "Ett fel uppstod vid inskickningen. F\xF6rs\xF6k igen eller st\xE4ng popupen."
+    };
+    FI = {
+      accept: "L\xE4het\xE4",
+      decline: "Peruuta",
+      start: "Aloita kysely",
+      complete: "Viimeistele kysely",
+      back: "Takaisin",
+      question: "Kysymys",
+      of: "/",
+      followUp: "Jatkokysymys",
+      closeAria: "Sulje ponnahdusikkuna",
+      loadingAria: "Ladataan kysely\xE4",
+      errorRequired: "Vastaa pakolliseen kysymykseen jatkaaksesi.",
+      errorSubmit: "L\xE4hetyksess\xE4 tapahtui virhe. Yrit\xE4 uudelleen tai sulje ponnahdusikkuna."
+    };
+    DE = {
+      accept: "Senden",
+      decline: "Abbrechen",
+      start: "Umfrage starten",
+      complete: "Umfrage abschlie\xDFen",
+      back: "Zur\xFCck",
+      question: "Frage",
+      of: "von",
+      followUp: "Folgefrage",
+      closeAria: "Popup schlie\xDFen",
+      loadingAria: "Umfrage wird geladen",
+      errorRequired: "Bitte beantworte die Pflichtfrage, um fortzufahren.",
+      errorSubmit: "Beim Senden ist ein Fehler aufgetreten. Versuche es erneut oder schlie\xDFe das Popup."
+    };
+    FR = {
+      accept: "Envoyer",
+      decline: "Annuler",
+      start: "Commencer l'enqu\xEAte",
+      complete: "Terminer l'enqu\xEAte",
+      back: "Retour",
+      question: "Question",
+      of: "sur",
+      followUp: "Question compl\xE9mentaire",
+      closeAria: "Fermer la fen\xEAtre",
+      loadingAria: "Chargement de l'enqu\xEAte",
+      errorRequired: "Veuillez r\xE9pondre \xE0 la question obligatoire pour continuer.",
+      errorSubmit: "Une erreur s'est produite lors de l'envoi. R\xE9essayez ou fermez la fen\xEAtre."
+    };
+    PT = {
+      accept: "Enviar",
+      decline: "Cancelar",
+      start: "Iniciar question\xE1rio",
+      complete: "Concluir question\xE1rio",
+      back: "Voltar",
+      question: "Pergunta",
+      of: "de",
+      followUp: "Seguimento",
+      closeAria: "Fechar janela",
+      loadingAria: "A carregar question\xE1rio",
+      errorRequired: "Responda \xE0 pergunta obrigat\xF3ria para continuar.",
+      errorSubmit: "Ocorreu um erro ao enviar. Tente novamente ou feche a janela."
+    };
+    AR = {
+      accept: "\u0625\u0631\u0633\u0627\u0644",
+      decline: "\u0625\u0644\u063A\u0627\u0621",
+      start: "\u0627\u0628\u062F\u0623 \u0627\u0644\u0627\u0633\u062A\u0628\u064A\u0627\u0646",
+      complete: "\u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0627\u0633\u062A\u0628\u064A\u0627\u0646",
+      back: "\u0631\u062C\u0648\u0639",
+      question: "\u0633\u0624\u0627\u0644",
+      of: "\u0645\u0646",
+      followUp: "\u0633\u0624\u0627\u0644 \u0645\u062A\u0627\u0628\u0639\u0629",
+      closeAria: "\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0646\u0627\u0641\u0630\u0629 \u0627\u0644\u0645\u0646\u0628\u062B\u0642\u0629",
+      loadingAria: "\u062C\u0627\u0631\u064D \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0627\u0633\u062A\u0628\u064A\u0627\u0646",
+      errorRequired: "\u064A\u0631\u062C\u0649 \u0627\u0644\u0625\u062C\u0627\u0628\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0624\u0627\u0644 \u0627\u0644\u0645\u0637\u0644\u0648\u0628 \u0644\u0644\u0645\u062A\u0627\u0628\u0639\u0629.",
+      errorSubmit: "\u062D\u062F\u062B \u062E\u0637\u0623 \u0623\u062B\u0646\u0627\u0621 \u0627\u0644\u0625\u0631\u0633\u0627\u0644. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649 \u0623\u0648 \u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0646\u0627\u0641\u0630\u0629."
+    };
+    BN = {
+      accept: "\u09AA\u09BE\u09A0\u09BE\u09A8",
+      decline: "\u09AC\u09BE\u09A4\u09BF\u09B2",
+      start: "\u099C\u09B0\u09BF\u09AA \u09B6\u09C1\u09B0\u09C1 \u0995\u09B0\u09C1\u09A8",
+      complete: "\u099C\u09B0\u09BF\u09AA \u09B8\u09AE\u09CD\u09AA\u09C2\u09B0\u09CD\u09A3 \u0995\u09B0\u09C1\u09A8",
+      back: "\u09AA\u09BF\u099B\u09A8\u09C7",
+      question: "\u09AA\u09CD\u09B0\u09B6\u09CD\u09A8",
+      of: "/",
+      followUp: "\u09AB\u09B2\u09CB-\u0986\u09AA",
+      closeAria: "\u09AA\u09AA\u0986\u09AA \u09AC\u09A8\u09CD\u09A7 \u0995\u09B0\u09C1\u09A8",
+      loadingAria: "\u099C\u09B0\u09BF\u09AA \u09B2\u09CB\u09A1 \u09B9\u099A\u09CD\u099B\u09C7",
+      errorRequired: "\u099A\u09BE\u09B2\u09BF\u09AF\u09BC\u09C7 \u09AF\u09C7\u09A4\u09C7 \u0986\u09AC\u09B6\u09CD\u09AF\u0995 \u09AA\u09CD\u09B0\u09B6\u09CD\u09A8\u09C7\u09B0 \u0989\u09A4\u09CD\u09A4\u09B0 \u09A6\u09BF\u09A8\u0964",
+      errorSubmit: "\u099C\u09AE\u09BE \u09A6\u09C7\u0993\u09AF\u09BC\u09BE\u09B0 \u09B8\u09AE\u09AF\u09BC \u098F\u0995\u099F\u09BF \u09A4\u09CD\u09B0\u09C1\u099F\u09BF \u0998\u099F\u09C7\u099B\u09C7\u0964 \u0986\u09AC\u09BE\u09B0 \u099A\u09C7\u09B7\u09CD\u099F\u09BE \u0995\u09B0\u09C1\u09A8 \u09AC\u09BE \u09AA\u09AA\u0986\u09AA \u09AC\u09A8\u09CD\u09A7 \u0995\u09B0\u09C1\u09A8\u0964"
+    };
+    ZH_CN = {
+      accept: "\u53D1\u9001",
+      decline: "\u53D6\u6D88",
+      start: "\u5F00\u59CB\u95EE\u5377",
+      complete: "\u5B8C\u6210\u95EE\u5377",
+      back: "\u8FD4\u56DE",
+      question: "\u95EE\u9898",
+      of: "/",
+      followUp: "\u8FFD\u95EE",
+      closeAria: "\u5173\u95ED\u5F39\u7A97",
+      loadingAria: "\u6B63\u5728\u52A0\u8F7D\u95EE\u5377",
+      errorRequired: "\u8BF7\u56DE\u7B54\u5FC5\u7B54\u9898\u540E\u7EE7\u7EED\u3002",
+      errorSubmit: "\u63D0\u4EA4\u65F6\u51FA\u9519\u3002\u8BF7\u91CD\u8BD5\u6216\u5173\u95ED\u5F39\u7A97\u3002"
+    };
+    LABELS = {
+      en: EN,
+      es: ES,
+      da: DA,
+      no: NO,
+      sv: SV,
+      fi: FI,
+      de: DE,
+      fr: FR,
+      pt: PT,
+      ar: AR,
+      bn: BN,
+      "zh-CN": ZH_CN
+    };
+    RTL_LOCALES = ["ar"];
+    RESOLVE_LOCALE_JS = `function ddResolveLocale(lang){
+  if(typeof lang!=='string') return 'en';
+  var n=lang.trim().toLowerCase().replace(/_/g,'-');
+  if(!n) return 'en';
+  if(n==='zh'||n.indexOf('zh-')===0) return 'zh-CN';
+  var p=n.split('-')[0];
+  if(p==='en') return 'en';
+  if(p==='es') return 'es';
+  if(p==='da') return 'da';
+  if(p==='no'||p==='nb'||p==='nn') return 'no';
+  if(p==='sv') return 'sv';
+  if(p==='fi') return 'fi';
+  if(p==='de') return 'de';
+  if(p==='fr') return 'fr';
+  if(p==='pt') return 'pt';
+  if(p==='ar') return 'ar';
+  if(p==='bn') return 'bn';
+  return 'en';
+}`;
+  }
+});
+
 // src/assets/style.css
 var style_default;
 var init_style = __esm({
   "src/assets/style.css"() {
-    style_default = '.magicfeedback-container {\n    width: 100%;\n}\n\n\n.magicfeedback-success-message,\n.magicfeedback-info-message,\n.magicfeedback-start-message,\n.magicfeedback-container{\n    animation-duration: 0.5s;\n    animation-name: animate-fade;\n    animation-delay: 0.25s;\n    animation-fill-mode: backwards;\n\n    font-style: normal;\n    text-align: justify;\n    font-weight: 400;\n    font-size: 1.2rem;\n    color: #475569;\n    line-height: 1.5;\n}\n\n@keyframes animate-fade {\n    0% { opacity: 0; }\n    100% { opacity: 1; }\n}\n\n.magicfeedback-form {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n}\n.magicfeedback-questions {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    width: 100%;\n}\n\n.magicfeedback-div {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    margin-bottom: 10px;\n    width: 100%;\n}\n\n.magicfeedback-label {\n    margin-bottom: 25px;\n    margin-top: 20px;\n    font-weight: 400;\n    font-family: inherit;\n    font-size: 1.2rem;\n    color: #212529;\n    text-align: start;\n    word-wrap: break-word;\n    white-space: normal;\n\n}\n\n.magicfeedback-checkbox {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    width: 100%;\n}\n\n.magicfeedback-checkbox-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin-bottom: 5px;\n    margin-top: 5px;\n}\n\n/* Cualificado con `div`: @magicfeedback/native reutiliza la clase "magicfeedback-radio"\n   tambi\xE9n en el <input> de cada opci\xF3n (rating), y sin el tag este selector lo capturaba\n   tambi\xE9n, rompiendo su tama\xF1o (el input pasaba a display:flex; width:100%). */\ndiv.magicfeedback-radio {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    flex-wrap: wrap;\n    width: 100%;\n    margin-right: 5px;\n    padding: 5px;\n    box-sizing: border-box;\n}\n\n.magicfeedback-checkbox-container,\n.magicfeedback-radio-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 5px;\n    padding: 5px 0;\n    background-color: #fff;\n    border-radius: 5px;\n    box-shadow: 0 0 3px #ccc;\n}\n\n.deepdots-popup input::-webkit-outer-spin-button,\n.deepdots-popup input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    -moz-appearance: textfield;\n}\n\n.magicfeedback-checkbox input[type="checkbox"] {\n    margin-right: 5px;\n    margin-left: 5px;\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n}\n\n\n.magicfeedback-checkbox label,\n.magicfeedback-radio-container label {\n    margin-left: 5px;\n    font-weight: 400;\n    font-family: inherit;\n    font-size: 16px;\n    color: #212529;\n    text-align: start;\n    width: 100%;\n}\n\n.deepdots-popup p {\n    margin-bottom: 0px;\n    font-size: 12px;\n}\n\n.deepdots-popup h2 {\n    line-height: 1.66;\n    margin: 0;\n    padding: 0;\n    font-weight: 900;\n    color: #222;\n    font-family: var(--deepdots-font, \'Montserrat\');\n    font-size: 18px;\n    text-transform: uppercase;\n    text-align: center;\n    margin-bottom: 40px;\n}\n\n/* Los controles de formulario no heredan font-family por defecto: cuando hay\n   fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */\n.deepdots-popup.deepdots-has-font button,\n.deepdots-popup.deepdots-has-font input,\n.deepdots-popup.deepdots-has-font textarea,\n.deepdots-popup.deepdots-has-font select {\n    font-family: var(--deepdots-font, inherit);\n}\n\n.deepdots-popup h6 {\n    margin-bottom: 1rem;\n}\n\n.deepdots-popup input[type="date"],\n.deepdots-popup input[type="text"],\n.deepdots-popup input[type="number"],\n.deepdots-popup input[type="email"],\n.deepdots-popup input[type="password"],\n.deepdots-popup textarea,\n.deepdots-popup select {\n    box-sizing: border-box;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100%;\n    border: 2px solid #ccc; /* Default border color - you can customize this */\n    border-radius: 5px;\n    font-size: 18px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    min-height: 50px;\n    font-family: inherit;\n    -webkit-appearance: none;\n}\n\n.deepdots-popup select {\n    background-image: linear-gradient(45deg, transparent 50%, gray 50%),\n    linear-gradient(135deg, gray 50%, transparent 50%),\n    linear-gradient(to right, #ccc, #ccc);\n    background-position: calc(100% - 20px) calc(1em + 2px),\n    calc(100% - 15px) calc(1em + 2px),\n    calc(100% - 2.5em) 0.5em;\n    background-size: 5px 5px,\n    5px 5px,\n    1px 1.5em;\n    background-repeat: no-repeat;\n}\n\n.magicfeedback-boolean-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 10px 0;\n    width: 100%;\n}\n\n.magicfeedback-boolean-container label {\n    margin-left: 10px;\n    font-weight: 400;\n    font-size: 16px;\n    width: 100%;\n    padding-top: 5px;\n}\n\n.magicfeedback-boolean-option {\n    margin-right: 10px;\n    margin-left: 10px;\n    width: 100%;\n    height: 38px;\n    border-radius: 8px;\n    font-size: 16px;\n    cursor: pointer;\n    border: 1px solid #ced4da !important;\n}\n\n.magicfeedback-boolean-option label {\n    font-weight: 400;\n    font-size: 16px;\n    color: #475569;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: inherit;\n}\n\n.magicfeedback-boolean-option input[type=radio] + label:hover {\n    color: #007bff;\n}\n\n.magicfeedback-boolean-option input[type=radio]:checked + label {\n    color: #007bff;\n    background-color: #cadff8;\n}\n\n/* Tama\xF1o expl\xEDcito y sin padding: un radio nativo con `padding: 20px` y solo `width` (sin\n   `height`) se dibujaba enorme en WebKit, que s\xED aplica el padding al control. Se ve\xEDa en\n   iOS (WebView de React Native y Safari) y no en Chrome. `flex: 0 0 auto` evita que el\n   contenedor flex de la opci\xF3n lo estire. */\n.deepdots-popup input[type="radio"] {\n    padding: 0;\n    margin: 10px 0 10px 15px;\n    width: 20px;\n    height: 20px;\n    min-width: 20px;\n    flex: 0 0 auto;\n    background-color: #fff;\n    box-shadow: none;\n}\n\n/* Style for focused input/select */\n.deepdots-popup input:focus, .deepdots-popup select:focus {\n    border-color: #4CAF50; /* Highlight color when focused - you can customize this */\n}\n\n/* Style for invalid input (example: validation error) */\n.deepdots-popup input.error, .deepdots-popup select.error {\n    border-color: #ff3333; /* Red color for error state - you can customize this */\n}\n\n.magicfeedback-action-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 10px;\n    width: 100%;\n}\n\n.magicfeedback-action-container .magicfeedback-submit {\n    cursor: pointer;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100px;\n    border-radius: 8px;\n    font-size: 16px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    background-color: #1E293B;\n    color: white;\n}\n\n.magicfeedback-action-container .magicfeedback-back {\n    cursor: pointer;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100px;\n    border: 0;\n    border-radius: 8px;\n    font-size: 16px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    background-color: transparent;\n    color: #212529;\n}\n\n\n\n/* Rating styles */\n.magicfeedback-rating {\n    width: 100%;\n}\n\n.magicfeedback-rating-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n    flex-wrap: wrap;\n    align-items: center;\n\n    margin: 15px 5px;\n    padding: 0;\n\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n.magicfeedback-rating-placeholder-value,\n.magicfeedback-rating-placeholder{\n    text-align: center;\n    align-content: center;\n    justify-content: center;\n    text-wrap: wrap;\n}\n\n.magicfeedback-rating-option {\n    margin: 0 0.5rem;\n    padding: 0;\n}\n\n@media (max-width: 1024px) {\n    .magicfeedback-rating-option {\n        margin: 10px 0;\n        padding: 0;\n        width: 20%;\n        display: flex;\n        justify-content: center;\n    }\n\n    .magicfeedback-rating-placeholder-value {\n        font-size: 0.75rem;\n        margin-bottom: 1px;\n    }\n    .magicfeedback-rating-placeholder{\n        justify-content: center;\n    }\n\n    .magicfeedback-rating-container {\n        flex-wrap: wrap;\n        justify-content: flex-start;\n    }\n}\n\n\n.magicfeedback-rating-option-label-container {\n    display: flex;\n    flex-direction: column;\n}\n\n\n.magicfeedback-rating-option-label-container label {\n    display: inline-block;\n    text-align: center;\n    margin-bottom: 0;\n    font-weight: 600;\n    font-size: 18px;\n    color: #475569;\n}\n\n.magicfeedback-rating-option-label-container input[type=radio] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n/* IMAGE STYLES */\n.magicfeedback-rating-option-label-container input[type=radio] + img {\n    cursor: pointer;\n    height: 48px;\n    width: 48px;\n}\n\n/* LABEL STYLES */\n.magicfeedback-rating-option-label-container input[type=radio] + label {\n    cursor: pointer;\n}\n\n/* CHECKED STYLES */\n.magicfeedback-rating-option-label-container input[type=radio]:checked + img {\n    box-shadow: #007bff 0px 1px 4px, #007BFFA0 0px 0px 0px 2px;\n    border-radius: 50%;\n}\n\n.magicfeedback-rating-number {\n    width: 100%;\n}\n.magicfeedback-rating-container,\n.magicfeedback-rating-number-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n\n    margin: 15px 0;\n    padding: 0;\n\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n/* Cuando hay placeholders (Very bad / Very good), el placeholder ocupa\n   el 100% de la primera l\xEDnea y los boxes bajan a la siguiente */\n.magicfeedback-rating-number-container--with-placeholder {\n    flex-wrap: wrap;\n    align-items: flex-start;\n}\n\n.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-placeholder {\n    width: 100%;\n    margin-bottom: 8px;\n}\n\n.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-number-option {\n    width: auto;\n    flex: 1;\n}\n\n.magicfeedback-rating-number-option {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 5px;\n    padding: 0;\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    width: 100%;\n}\n\n.magicfeedback-rating-number-option-row{\n    max-width: 100% !important;\n}\n\n.magicfeedback-rating-number-top-placeholder,\n.magicfeedback-rating-number-bottom-placeholder{\n    text-align: center !important;\n    align-content: center;\n    justify-content: center;\n    text-wrap: wrap;\n\n    font-size: 15px;\n    color: #475569;\n\n    width: 100%;\n    margin: auto;\n}\n\n@media (min-width: 650px) {\n    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-ltr:first-child,\n    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-rtl:last-child {\n        margin-left: 0;\n        width: calc(100% - 10px);\n    }\n\n    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-rtl:first-child,\n    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-ltr:last-child {\n        margin-right: 0;\n        width: calc(100% - 10px);\n    }\n}\n\n\n.magicfeedback-rating-number-option-label-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n}\n\n.magicfeedback-rating-number-option-label-container label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0 10px;\n    font-weight: 600;\n    font-size: 14px;\n    color: #475569;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    min-height: 50px;\n    text-align: center;\n    padding: 0;\n    border-radius: 4px;\n    border: 1px solid #ced4da;\n    background-color: rgba(246, 246, 246, 0.3);\n    transition: background-color 0.15s ease-in-out;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] + label {\n    cursor: pointer;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] + label:hover,\n.magicfeedback-rating-number-option-label-container input[type=radio]:checked + label {\n    color: #007bff;\n    border: 1px solid #007bff;\n    background-color: rgba(86, 168, 253, 0.29);\n}\n\n.magicfeedback-rating-number-container-column{\n    align-items: flex-start !important;\n}\n\n@media (max-width: 650px) {\n    .magicfeedback-rating-number-container-ltr {\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n\n    .magicfeedback-rating-number-container-rtl {\n        justify-content: center;\n        flex-wrap: wrap-reverse;\n    }\n\n    .magicfeedback-rating-number-option {\n        max-width: 100%;\n        height: 55px;\n        margin: 5px 0;\n    }\n}\n\n.magicfeedback-rating-star {\n    width: 100%;\n}\n\n.magicfeedback-rating-star-container {\n    display: flex !important;\n    flex-direction: row !important;\n    justify-content: center !important;\n    align-items: center !important;\n    flex-wrap: wrap;\n    margin: 15px 5px;\n    padding: 0;\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n.magicfeedback-rating-star-option:not(:checked) > .rating__star {\n    float: right;\n    width: 1em;\n    overflow: hidden;\n    white-space: nowrap;\n    cursor: pointer;\n    font-size: 30px;\n    color: #ccc;\n    margin: 0 10px;\n}\n\n.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,\n.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {\n    color: #deb217 !important;\n}\n\n.magicfeedback-rating-star-selected {\n    color: #ffc700 !important;\n}\n\n\n/* Style for multiple choice image */\n.magicfeedback-image-option-label-container:hover {\n    cursor: pointer;\n    border: 0 !important;\n}\n\n.magicfeedback-image-option-label-container input[type=radio]:checked + img,\n.magicfeedback-image-option-label-container input[type=checkbox]:checked + img {\n    border: 1px solid #007bff !important;\n    box-shadow: 0 0 3px #007bff !important;\n}\n\n.magicfeedback-image-option-label-container input[type=radio] + img,\n.magicfeedback-image-option-label-container input[type=checkbox] + img {\n    border: 1px solid transparent !important;\n}\n\n.magicfeedback-image-option-label-container{\n    margin: 10px !important;\n    height: calc(100% - 20px) !important;\n    width: calc(100% - 20px) !important;\n}\n\n.magicfeedback-multiple-choice-image-option {\n    display: flex;\n    height: auto !important;\n    box-shadow: 0 0 3px #ccc;\n}\n\n.magicfeedback-multiple-choice-image-label {\n    font-size: 1rem;\n}\n\n.magicfeedback-consent-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 10px 0;\n    width: 100%;\n}\n\n.magicfeedback-consent-container label {\n    margin-left: 10px;\n}\n\n.magicfeedback-start-message-container {\n    /* ... add your start message container styles here ... */\n}\n\n.magicfeedback-success-message,\n.magicfeedback-info-message,\n.magicfeedback-start-message {\n    margin: 35px 5px;\n}\n\n.magicfeedback-success-message p,\n.magicfeedback-info-message p,\n.magicfeedback-start-message p {\n    font-style: normal;\n    text-align: start;\n    font-weight: 400;\n    font-size: 16px;\n    color: #475569;\n    line-height: 1.5;\n}\n\n.magicfeedback-success-message img,\n.magicfeedback-info-message img,\n.magicfeedback-start-message img {\n    width: 400px;\n    max-width: 80%;\n    height: auto;\n    margin: 10px auto;\n}\n\n.magicfeedback-counter,\n.magicfeedback-point-system-total {\n    margin: 10px 0 0 0 !important;\n    display: flex !important;\n    justify-content: right !important;\n    align-items: center !important;\n    width: 100%;\n}\n\n.magicfeedback-skip-container {\n    background-color: transparent !important;\n    border: 0 !important;\n    color: #999999FF !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    cursor: pointer !important;\n    font-size: 0.5em !important;\n    font-weight: 400 !important;\n    box-shadow: 0 0 0 !important;\n\n    &:hover {\n        color: #0066ff;\n    }\n}\n\n.magicfeedback-skip-container input[type=checkbox] {\n    border-color: #999999FF !important;\n    border: 0 !important;\n    cursor: pointer !important;\n\n}\n\n.magicfeedback-multi-question-matrix,\n.magicfeedback-point-system,\n.magicfeedback-priority-list {\n    width: 100% !important;\n}\n\n.magicfeedback-multi-question-matrix-container,\n.magicfeedback-point-system-container,\n.magicfeedback-priority-list-container {\n    width: 100% !important;\n    overflow-x: auto;\n}\n\n.magicfeedback-point-system-list,\n.magicfeedback-priority-list-list,\n.magicfeedback-multi-question-matrix-table {\n    width: 100% !important;\n    padding: 0 !important;\n    overflow-x: auto;\n}\n\n.magicfeedback-multi-question-matrix {\n    position: relative !important;\n}\n\n.magicfeedback-multi-question-matrix-container {\n    overflow: auto !important;\n    padding-bottom: 10px;\n}\n\n.magicfeedback-multi-question-matrix-label{\n    text-align: left !important;\n}\n.magicfeedback-priority-list-item {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0 10px 10px;\n\n    border: 1px solid #ced4da;\n    border-radius: 5px;\n    margin: 10px 0 !important;\n}\n\n.magicfeedback-point-system-item {\n    height: 45px;\n    margin: 5px 0 !important;\n}\n\n.magicfeedback-point-system-item label,\n.magicfeedback-priority-list-item-label {\n    font-family: inherit;\n    font-size: 18px !important;\n    color: #212529;\n    text-align: start;\n    word-wrap: break-word;\n    white-space: normal;\n    padding: 0 10px 0 0;\n}\n\n.magicfeedback-point-system-input-container {\n    padding: 0 10px 0 0;\n    border-radius: 5px;\n    font-size: 14px;\n    border: 1px solid #ced4da;\n    height: 42px;\n    margin: auto 0;\n}\n\n.magicfeedback-multi-question-matrix-table thead {\n    margin-bottom: 20px;\n}\n\n.magicfeedback-multi-question-matrix-table th{\n    text-align: center;\n    font-weight: 400 !important;\n    font-size: 1rem !important;\n    padding: 0  10px !important;\n}\n\n.magicfeedback-multi-question-matrix-table th,\n.magicfeedback-multi-question-matrix-table td label,\n.magicfeedback-priority-list-arrow-up,\n.magicfeedback-priority-list-arrow-down {\n    font-style: normal !important;\n    font-weight: 400 !important;\n    font-size: 1rem !important;\n    color: #475569 !important;\n    cursor: pointer !important;\n    margin: 0 !important;\n    line-height: inherit;\n}\n\n.magicfeedback-multi-question-matrix-table tr {\n    align-items: center;\n    margin: 5px 0;\n}\n\n.magicfeedback-multi-question-matrix-row-tr{\n    border-radius: 5px;\n    margin: 10px 0 !important;\n}\n\n.magicfeedback-multi-question-matrix-row-tr:nth-child(odd) {\n    background-color: #f1f6f6; /* Light gray background for odd rows */\n}\n\n.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {\n    background-color: #ffffff; /* White background for even rows */\n}\n\n.magicfeedback-multi-question-matrix-row-label {\n    text-align: left !important;\n}\n\n.magicfeedback-point-system-item span {\n    color: #475569 !important;\n}\n\n.magicfeedback-point-system-item input {\n    padding: 0;\n    margin: 0 !important;\n    width: auto !important;\n    min-width: 100px !important;\n    height: auto !important;\n    min-height: 42px;\n    cursor: pointer;\n    font-size: 14px;\n    text-align: center !important;\n}\n\n.magicfeedback-multi-question-matrix-table input {\n    margin: auto !important;\n    padding: 20px !important;\n    width: 100% !important;\n    height: 15px;\n    border: 1px solid #ced4da;\n    cursor: pointer;\n}\n\n.magicfeedback-image{\n    max-height: 400px !important;\n    height: auto !important;\n    max-width: 100% !important;\n    margin: 10px auto !important;\n}\n\n.magicfeedback-error{\n    margin-top: 5px;\n}';
+    style_default = `/**
+ * NO EDITAR A MANO \u2014 generado por scripts/vendor-survey-css.mjs
+ *
+ * Copia de @magicfeedback/native@2.2.22 \u2192 dist/styles/magicfeedback-default.css
+ * (la hoja can\xF3nica del paquete, la que apunta su campo "style"), con estos cambios locales:
+ *
+ *  1. Sin el @import de Google Fonts (Nunito): no queremos una petici\xF3n externa desde la
+ *     p\xE1gina del host, y la tipograf\xEDa la decide el popup.
+ *  2. .magicfeedback-container hereda la fuente del popup (var(--deepdots-font, inherit)).
+ *  3. Los selectores desnudos (h2, p, input, textarea, select, ::placeholder, .error) van
+ *     acotados a .deepdots-popup: este CSS se inyecta en el <head> del host y sin acotar
+ *     repintar\xEDa su web.
+ *  4. El grupo .magicfeedback-radio se cualifica como div.magicfeedback-radio (la clase acaba
+ *     tambi\xE9n en el <input> del boolean).
+ *  5. Al final, un bloque de reglas propias del popup (fuente en los controles y padding del
+ *     radio nativo).
+ *
+ * Las variables --mf-* se dejan en :root a prop\xF3sito: el modal del priority-list se portea a
+ * <body>, fuera de .deepdots-popup, y ah\xED las necesita.
+ *
+ * Para subir de versi\xF3n: npm i @magicfeedback/native@<v> && node scripts/vendor-survey-css.mjs
+ */
+
+/**
+ * @magicfeedback/native - Default Styles
+ * Clean, minimal, and elegant survey rendering
+ */
+
+/* @import de Google Fonts (Nunito) eliminado al vendorizar: la fuente la pone el popup. */
+
+/* ========================================
+   CSS VARIABLES - Design SYSTEM
+   ======================================== */
+:root {
+    /* Colors - Minimal Pastel */
+    /* --mf-primary is the one source of truth for brand/accent color \u2014
+       every token below derives from it via color-mix() (or references
+       it directly) so changing this single value, here or via a
+       per-integration override, keeps hover/light/border states in
+       sync automatically instead of going stale independently. Scoped
+       to genuinely interactive/accent surfaces (buttons, selected
+       chips, focus rings) \u2014 general body text stays on its own neutral
+       scale below, not tied to the brand color. */
+    --mf-primary: #5d7bad;
+    --mf-primary-hover: color-mix(in srgb, var(--mf-primary) 85%, black);
+    --mf-primary-light: color-mix(in srgb, var(--mf-primary) 15%, white);
+    /* a translucent tint \u2014 mixed with transparent (opacity), not white,
+       so it reads as a soft shadow of the brand color rather than a
+       pastel of it. */
+    --mf-primary-border: color-mix(in srgb, var(--mf-primary) 35%, transparent);
+
+    --mf-text-primary: #1E293B;
+    --mf-text-secondary: #475569;
+    --mf-text-muted: #94A3B8;
+
+    --mf-bg-primary: #F8FAFC;
+    --mf-bg-secondary: #FFFFFF;
+    --mf-bg-hover: #EEF2F6;
+
+    --mf-border: #E2E8F0;
+    --mf-border-focus: var(--mf-primary);
+
+    --mf-success: #16A34A;
+    --mf-error: #EF4444;
+    --mf-warning: #F59E0B;
+
+    --mf-surface: #FFFFFF;
+    --mf-surface-alt: #F1F5F9;
+    --mf-accent: #38BDF8;
+
+    /* Spacing */
+    --mf-space-xs: 0.25rem;
+    --mf-space-sm: 0.5rem;
+    --mf-space-md: 0.75rem;
+    --mf-space-lg: 1rem;
+    --mf-space-xl: 1.5rem;
+
+    /* Border Radius */
+    --mf-radius-sm: 0.5rem;
+    --mf-radius-md: 0.75rem;
+    --mf-radius-lg: 1.25rem;
+    --mf-radius-full: 9999px;
+
+    /* Shadows */
+    --mf-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
+    --mf-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
+    --mf-shadow-lg: 0 16px 30px rgba(15, 23, 42, 0.12);
+    --mf-shadow-focus: 0 0 0 3px rgba(30, 41, 59, 0.15);
+    --mf-shadow-card: 0 18px 40px rgba(15, 23, 42, 0.08);
+
+    /* Typography */
+    --mf-font-sans: "Nunito", "Quicksand", "Avenir Next", "Trebuchet MS", sans-serif;
+    --mf-font-size-sm: 0.875rem;
+    --mf-font-size-base: 1rem;
+    --mf-font-size-lg: 1.125rem;
+    --mf-font-size-xl: 1.25rem;
+    --mf-line-height: 1.6;
+
+    /* Font Weights */
+    --mf-font-weight-normal: 400;
+    --mf-font-weight-medium: 500;
+    --mf-font-weight-semibold: 600;
+    --mf-font-weight-bold: 700;
+    --mf-font-weight-extrabold: 800;
+
+    /* Transitions */
+    --mf-transition: all 0.2s ease;
+    --mf-transition-fast: all 0.15s ease;
+}
+
+/* ========================================
+   ANIMATIONS
+   ======================================== */
+@keyframes mf-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes mf-slide-in {
+    from {
+        opacity: 0;
+        transform: translateX(-16px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes mf-scale-in {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes mf-pulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.8;
+    }
+}
+
+/* ========================================
+   BASE CONTAINER
+   ======================================== */
+.magicfeedback-container {
+    /* Local: hereda la fuente del popup; --deepdots-font viene de PopupStyle.font. */
+    font-family: var(--deepdots-font, inherit);
+    color: var(--mf-text-primary);
+    line-height: var(--mf-line-height);
+    animation: mf-fade-in 0.4s ease-out;
+    border-radius: var(--mf-radius-lg);
+}
+
+/* ========================================
+   MESSAGES
+   ======================================== */
+.magicfeedback-success-message,
+.magicfeedback-info-message,
+.magicfeedback-start-message {
+    padding: var(--mf-space-lg);
+    margin: var(--mf-space-lg) 0;
+    animation: mf-scale-in 0.3s ease-out;
+}
+
+/* .magicfeedback-info-message/-start-message are set via innerHTML (see
+   renderInfoPage.ts / questions.service.ts's renderStartMessage) \u2014 whatever
+   rich text a survey author writes lands here as real HTML, not just the
+   <p>/<img> pair this used to style. Covering the rest of what a rich-text
+   editor commonly outputs (headings, lists, links, emphasis, quotes, code,
+   rules) keeps that content on the same type scale and palette as the rest
+   of the widget instead of falling back to unstyled browser defaults. */
+.magicfeedback-success-message > :first-child,
+.magicfeedback-info-message > :first-child,
+.magicfeedback-start-message > :first-child {
+    margin-top: 0;
+}
+
+.magicfeedback-success-message > :last-child,
+.magicfeedback-info-message > :last-child,
+.magicfeedback-start-message > :last-child {
+    margin-bottom: 0;
+}
+
+.magicfeedback-success-message p,
+.magicfeedback-info-message p,
+.magicfeedback-start-message p {
+    font-size: var(--mf-font-size-base);
+    color: var(--mf-text-secondary);
+    margin: 0 0 var(--mf-space-md);
+    line-height: var(--mf-line-height);
+}
+
+.magicfeedback-info-message h1,
+.magicfeedback-info-message h2,
+.magicfeedback-info-message h3,
+.magicfeedback-info-message h4,
+.magicfeedback-info-message h5,
+.magicfeedback-info-message h6,
+.magicfeedback-start-message h1,
+.magicfeedback-start-message h2,
+.magicfeedback-start-message h3,
+.magicfeedback-start-message h4,
+.magicfeedback-start-message h5,
+.magicfeedback-start-message h6 {
+    color: var(--mf-text-primary);
+    font-weight: var(--mf-font-weight-bold);
+    line-height: 1.3;
+    margin: var(--mf-space-lg) 0 var(--mf-space-sm);
+    text-align: start;
+}
+
+.magicfeedback-info-message h1, .magicfeedback-start-message h1 { font-size: var(--mf-font-size-xl); }
+.magicfeedback-info-message h2, .magicfeedback-start-message h2 { font-size: var(--mf-font-size-lg); }
+.magicfeedback-info-message h3,
+.magicfeedback-info-message h4,
+.magicfeedback-info-message h5,
+.magicfeedback-info-message h6,
+.magicfeedback-start-message h3,
+.magicfeedback-start-message h4,
+.magicfeedback-start-message h5,
+.magicfeedback-start-message h6 { font-size: var(--mf-font-size-base); }
+
+.magicfeedback-info-message strong,
+.magicfeedback-info-message b,
+.magicfeedback-start-message strong,
+.magicfeedback-start-message b {
+    font-weight: var(--mf-font-weight-bold);
+    color: var(--mf-text-primary);
+}
+
+.magicfeedback-info-message a,
+.magicfeedback-start-message a {
+    color: var(--mf-primary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.magicfeedback-info-message a:hover,
+.magicfeedback-start-message a:hover {
+    color: var(--mf-primary-hover);
+}
+
+.magicfeedback-info-message ul,
+.magicfeedback-info-message ol,
+.magicfeedback-start-message ul,
+.magicfeedback-start-message ol {
+    margin: 0 0 var(--mf-space-md);
+    padding-inline-start: var(--mf-space-xl);
+    color: var(--mf-text-secondary);
+    line-height: var(--mf-line-height);
+}
+
+.magicfeedback-info-message li + li,
+.magicfeedback-start-message li + li {
+    margin-top: var(--mf-space-xs);
+}
+
+.magicfeedback-info-message blockquote,
+.magicfeedback-start-message blockquote {
+    margin: 0 0 var(--mf-space-md);
+    padding: var(--mf-space-sm) var(--mf-space-md);
+    border-inline-start: 3px solid var(--mf-primary-border);
+    color: var(--mf-text-secondary);
+    font-style: italic;
+}
+
+.magicfeedback-info-message code,
+.magicfeedback-start-message code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.9em;
+    background: var(--mf-bg-hover);
+    padding: 0.15em 0.4em;
+    border-radius: var(--mf-radius-sm);
+}
+
+.magicfeedback-info-message pre,
+.magicfeedback-start-message pre {
+    margin: 0 0 var(--mf-space-md);
+    padding: var(--mf-space-md);
+    background: var(--mf-bg-hover);
+    border-radius: var(--mf-radius-md);
+    overflow-x: auto;
+}
+
+.magicfeedback-info-message pre code,
+.magicfeedback-start-message pre code {
+    background: none;
+    padding: 0;
+}
+
+.magicfeedback-info-message hr,
+.magicfeedback-start-message hr {
+    border: none;
+    border-top: 1px solid var(--mf-border);
+    margin: var(--mf-space-lg) 0;
+}
+
+.magicfeedback-success-message img,
+.magicfeedback-info-message img,
+.magicfeedback-start-message img {
+    max-width: 100%;
+    height: auto;
+    margin: var(--mf-space-lg) auto;
+    display: block;
+    border-radius: var(--mf-radius-md);
+}
+
+.magicfeedback-image {
+    max-height: 400px;
+    height: auto;
+    max-width: 100%;
+    margin: var(--mf-space-lg) auto;
+    display: block;
+    border-radius: var(--mf-radius-md);
+}
+
+/* ========================================
+   FORM STRUCTURE
+   ======================================== */
+.magicfeedback-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mf-space-lg);
+    padding: clamp(16px, 2.5vw, 28px);
+}
+
+.magicfeedback-questions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mf-space-xl);
+    width: 100%;
+}
+
+.magicfeedback-div {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mf-space-sm);
+    animation: mf-slide-in 0.3s ease-out;
+    background: var(--mf-bg-secondary);
+    border-radius: var(--mf-radius-md);
+}
+
+/* ========================================
+   LABELS & TYPOGRAPHY
+   ======================================== */
+.magicfeedback-label {
+    font-size: var(--mf-font-size-lg);
+    font-weight: var(--mf-font-weight-bold);
+    color: var(--mf-text-primary);
+    line-height: var(--mf-line-height);
+    text-align: start;
+    letter-spacing: -0.01em;
+}
+
+.magicfeedback-sublabel {
+    font-size: var(--mf-font-size-base);
+    font-weight: var(--mf-font-weight-normal);
+    color: var(--mf-text-secondary);
+    margin-bottom: var(--mf-space-sm);
+}
+
+.deepdots-popup h2 {
+    font-size: var(--mf-font-size-xl);
+    font-weight: 600;
+    color: var(--mf-text-primary);
+    margin: 0 0 var(--mf-space-xl) 0;
+    text-align: center;
+    letter-spacing: -0.01em;
+}
+
+.deepdots-popup p {
+    margin: 0;
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-text-secondary);
+}
+
+/* ========================================
+   FORM INPUTS
+   ======================================== */
+.deepdots-popup input[type="date"],
+.deepdots-popup input[type="text"],
+.deepdots-popup input[type="number"],
+.deepdots-popup input[type="email"],
+.deepdots-popup input[type="password"],
+.deepdots-popup textarea,
+.deepdots-popup select {
+    padding: 0.75rem 0.9rem;
+    font-size: var(--mf-font-size-base);
+    font-family: inherit;
+    color: var(--mf-text-primary);
+    background-color: var(--mf-surface);
+    border: 2px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    outline: none;
+    transition: var(--mf-transition);
+    -webkit-appearance: none;
+    appearance: none;
+    box-shadow: var(--mf-shadow-sm);
+}
+
+.deepdots-popup textarea {
+    min-height: 100px;
+    resize: vertical;
+}
+
+.deepdots-popup input::placeholder,
+.deepdots-popup textarea::placeholder {
+    color: var(--mf-text-muted);
+}
+
+/* Remove number input spinners */
+.deepdots-popup input::-webkit-outer-spin-button,
+.deepdots-popup input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.deepdots-popup input[type="number"] {
+    /* -moz-appearance: textfield; removed for lint compatibility */
+}
+
+/* Custom Select Arrow */
+.deepdots-popup select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--mf-space-md) center;
+    padding-inline-end: var(--mf-space-xl);
+}
+
+/* Error State */
+.deepdots-popup input.error,
+.deepdots-popup select.error,
+.deepdots-popup textarea.error {
+    border-color: var(--mf-error);
+}
+
+.magicfeedback-error {
+    margin-top: var(--mf-space-xs);
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-error);
+}
+
+/* ========================================
+   CHECKBOX & RADIO OPTIONS
+   ======================================== */
+.magicfeedback-checkbox,
+div.magicfeedback-radio {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mf-space-sm);
+    width: 100%;
+}
+
+.magicfeedback-checkbox-container,
+.magicfeedback-radio-container {
+    display: flex;
+    align-items: center;
+    gap: var(--mf-space-sm);
+    padding: var(--mf-space-md);
+    border: 1.5px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-checkbox-container:hover,
+.magicfeedback-radio-container:hover {
+    background-color: var(--mf-bg-hover);
+    border-color: var(--mf-primary);
+}
+
+.magicfeedback-checkbox-container:has(input:checked),
+.magicfeedback-radio-container:has(input:checked) {
+    background-color: var(--mf-primary-light);
+    border-color: var(--mf-primary);
+}
+
+.magicfeedback-checkbox input[type="checkbox"],
+.magicfeedback-radio-container input[type="radio"] {
+    width: 18px;
+    height: 18px;
+    margin: 0;
+    cursor: pointer;
+    flex-shrink: 0;
+    accent-color: var(--mf-primary);
+}
+
+.magicfeedback-checkbox label,
+.magicfeedback-radio-container label {
+    font-size: var(--mf-font-size-base);
+    text-align: start;
+    color: var(--mf-text-primary);
+    cursor: pointer;
+    margin: 0;
+    flex: 1;
+}
+
+/* ========================================
+   BOOLEAN OPTIONS
+   ======================================== */
+.magicfeedback-boolean-container {
+    display: flex;
+    gap: var(--mf-space-md);
+    width: 100%;
+}
+
+.magicfeedback-boolean-option {
+    flex: 1;
+    position: relative;
+}
+
+.magicfeedback-boolean-option input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.magicfeedback-boolean-option label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--mf-space-md);
+    font-size: var(--mf-font-size-base);
+    font-weight: 500;
+    color: var(--mf-text-secondary);
+    border: 1.5px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+    margin: 0;
+    width: -webkit-fill-available;
+    height: inherit;
+}
+
+.magicfeedback-boolean-option label:hover {
+    background-color: var(--mf-bg-hover);
+    border-color: var(--mf-primary);
+}
+
+.magicfeedback-boolean-option input[type="radio"]:checked + label {
+    color: var(--mf-primary);
+    background-color: var(--mf-primary-light);
+    border-color: var(--mf-primary);
+    font-weight: 600;
+}
+
+/* ========================================
+   RATING SYSTEMS
+   ======================================== */
+.magicfeedback-rating,
+.magicfeedback-rating-number,
+.magicfeedback-rating-star {
+    width: 100%;
+}
+
+.magicfeedback-rating-container,
+.magicfeedback-rating-number-container,
+.magicfeedback-rating-star-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--mf-space-sm);
+    justify-content: center;
+    align-items: center;
+    padding: var(--mf-space-md) 0;
+    list-style: none;
+    margin: 0;
+}
+
+/* Caption line below the row \u2014 min on one side, max on the other (swapped
+   for order: "rtl") \u2014 same simple, non-responsive pattern as the
+   rating-number row caption. Used by rating-star and rating-emoji. */
+.magicfeedback-rating-placeholder {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--mf-space-md);
+    width: 100%;
+    margin-top: var(--mf-space-sm);
+    font-size: var(--mf-font-size-sm);
+    font-weight: var(--mf-font-weight-semibold);
+    color: var(--mf-text-secondary);
+}
+
+.magicfeedback-rating-placeholder-value {
+    overflow-wrap: anywhere;
+}
+
+.magicfeedback-rating-placeholder-value:last-child {
+    text-align: end;
+}
+
+/* Rating with Images */
+.magicfeedback-rating-option-label-container input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.magicfeedback-rating-option-label-container img {
+    width: 56px;
+    height: 56px;
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+    border-radius: var(--mf-radius-full);
+    border: 2px solid transparent;
+}
+
+.magicfeedback-rating-option-label-container img:hover {
+    transform: scale(1.1);
+    border-color: var(--mf-primary);
+}
+
+.magicfeedback-rating-option-label-container input[type="radio"]:checked + img {
+    border-color: var(--mf-primary);
+    box-shadow: 0 0 0 3px var(--mf-primary-light);
+}
+
+.magicfeedback-rating-option-label-container label {
+    display: block;
+    text-align: center;
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-text-secondary);
+    margin-top: var(--mf-space-xs);
+    cursor: pointer;
+}
+
+/* Rating Numbers \u2014 each option is its own outlined chip in the survey's
+   primary color, with a gap between them. Row and column use the same
+   chip; column additionally has room to show each option's own text
+   plainly next to its number. */
+
+/* Every size here is width:100%/flex:1 combined with the chip's own
+   padding and border. Without border-box, the browser's default
+   content-box adds that padding/border on TOP of the declared size, so
+   the chip quietly overflows past its flex slot \u2014 reading as "not quite
+   full width" or, worse, pushing into the next chip. */
+.magicfeedback-rating-number-container,
+.magicfeedback-rating-number-option,
+.magicfeedback-rating-number-option-label-container,
+.magicfeedback-rating-number-value {
+    box-sizing: border-box;
+}
+
+/* The shared rating-container rule (above, reused by star rating) sets
+   align-items:center for its row-of-chips layout \u2014 in a stacked column
+   that still nudges a 100%-wide chip inward instead of a true 0 offset.
+   Force stretch so every chip fills the exact same width, flush on
+   both sides. */
+.magicfeedback-rating-number-container-column,
+.magicfeedback-rating-number-container-column-reverse {
+    align-items: stretch;
+}
+
+/* Caption line below the row \u2014 the single place min/max labels live
+   for row mode, shared by mobile and desktop. */
+.magicfeedback-rating-number-scale-labels {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--mf-space-md);
+    margin-top: var(--mf-space-sm);
+    font-size: var(--mf-font-size-sm);
+    font-weight: var(--mf-font-weight-semibold);
+    color: var(--mf-text-secondary);
+}
+
+.magicfeedback-rating-number-scale-label {
+    overflow-wrap: anywhere;
+}
+
+.magicfeedback-rating-number-scale-label:last-child {
+    text-align: end;
+}
+
+/* Column, no per-option text: each row is its own separated chip, so
+   the min/max labels bookend the stack from outside it \u2014 one line
+   above the first chip, one below the last. Margin goes on whichever
+   side actually faces the list \u2014 the "before" label (always the first
+   child) gets space below it, the "after" one (always right after the
+   container, extra option row or not) gets space above it \u2014 so both
+   sit the same distance from the chips regardless of which one it is. */
+.magicfeedback-rating-number-scale-label-block {
+    font-size: var(--mf-font-size-sm);
+    font-weight: var(--mf-font-weight-semibold);
+    color: var(--mf-text-secondary);
+    text-align: center;
+}
+
+.magicfeedback-rating-number-scale-label-block:first-child {
+    margin-bottom: var(--mf-space-sm);
+}
+
+.magicfeedback-rating-number-container + .magicfeedback-rating-number-scale-label-block {
+    margin-top: var(--mf-space-sm);
+}
+
+.magicfeedback-rating-number-option {
+    display: flex;
+}
+
+.magicfeedback-rating-number-option-label-container {
+    position: relative;
+    width: 100%;
+    display: flex;
+    cursor: pointer;
+}
+
+.magicfeedback-rating-number-option-label-container input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.magicfeedback-rating-number-value {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    transition: var(--mf-transition-fast);
+    color: var(--mf-text-secondary);
+    font-weight: var(--mf-font-weight-semibold);
+}
+
+/* Row: individual outlined chips in the survey's own primary color \u2014
+   var(--mf-primary) so whatever brand color a given survey sets carries
+   through automatically, no color hardcoded here. */
+.magicfeedback-rating-number-container-row,
+.magicfeedback-rating-number-container-row-reverse {
+    flex-wrap: nowrap;
+    gap: var(--mf-space-sm);
+}
+
+.magicfeedback-rating-number-option-row,
+.magicfeedback-rating-number-option-row-reverse {
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.magicfeedback-rating-number-option-row .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-value {
+    min-height: 56px;
+    padding: var(--mf-space-sm);
+    border: 2px solid var(--mf-primary-border);
+    border-radius: var(--mf-radius-md);
+    background: var(--mf-bg-secondary);
+    color: var(--mf-primary);
+    font-size: var(--mf-font-size-lg);
+    font-weight: var(--mf-font-weight-bold);
+}
+
+/* More than 6 options (e.g. a 0-10 NPS scale): still one row, never
+   wraps \u2014 but scaled down on purpose, so it reads as a compact chip
+   rather than the same 56px button stretched thin. */
+.magicfeedback-rating-number-container-row--dense .magicfeedback-rating-number-option-row .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-container-row--dense .magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-value {
+    min-height: 36px;
+    padding: var(--mf-space-xs);
+    border-radius: var(--mf-radius-sm);
+    font-size: 0.8rem;
+}
+
+.magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+    background: var(--mf-primary-light);
+}
+
+.magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
+    color: #fff;
+    background-color: var(--mf-primary);
+    box-shadow: var(--mf-shadow-md);
+}
+
+/* Extra option: always its own row below the scale, and styled like every
+   other chip now \u2014 "doesn't apply" is still not a point on the 1..N
+   continuum, but it no longer needs a different border style to say so. */
+.magicfeedback-rating-number-extra-row {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--mf-space-sm);
+}
+
+.magicfeedback-rating-number-option--extra {
+    flex: 0 1 auto;
+}
+
+.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container {
+    width: auto;
+}
+
+.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-value {
+    min-height: 36px;
+    padding: 0 var(--mf-space-md);
+    border: 2px solid var(--mf-primary-border);
+    border-radius: var(--mf-radius-md);
+    background: var(--mf-bg-secondary);
+    color: var(--mf-primary);
+    font-size: var(--mf-font-size-sm);
+}
+
+.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+    background: var(--mf-primary-light);
+}
+
+.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
+    color: #fff;
+    background-color: var(--mf-primary);
+    box-shadow: var(--mf-shadow-md);
+}
+
+/* Column: the same separated chips as row, just stacked \u2014 each option is
+   its own outlined chip with a gap between them, not one shared box. */
+.magicfeedback-rating-number-container-column,
+.magicfeedback-rating-number-container-column-reverse {
+    gap: var(--mf-space-sm);
+}
+
+.magicfeedback-rating-number-option-column,
+.magicfeedback-rating-number-option-column-reverse {
+    width: 100%;
+}
+
+.magicfeedback-rating-number-option-column .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-value {
+    justify-content: flex-start;
+    gap: var(--mf-space-sm);
+    min-height: 48px;
+    padding: var(--mf-space-sm) var(--mf-space-md);
+    border: 2px solid var(--mf-primary-border);
+    border-radius: var(--mf-radius-md);
+    background: var(--mf-bg-secondary);
+    color: var(--mf-primary);
+}
+
+.magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+    background: var(--mf-primary-light);
+}
+
+.magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
+    color: #fff;
+    background-color: var(--mf-primary);
+    box-shadow: var(--mf-shadow-md);
+}
+
+.magicfeedback-rating-number-value-num {
+    font-weight: var(--mf-font-weight-bold);
+}
+
+/* Column with per-option text: a min-width so "1".."9" and "10" line up,
+   with the label text starting at the same x. Skipped entirely when the
+   column has no per-option text at all (--bare below) \u2014 with nothing to
+   align against, the same left-shift bug from row mode would resurface. */
+.magicfeedback-rating-number-container-column:not(.magicfeedback-rating-number-container-column--bare) .magicfeedback-rating-number-value-num,
+.magicfeedback-rating-number-container-column-reverse:not(.magicfeedback-rating-number-container-column--bare) .magicfeedback-rating-number-value-num {
+    flex: none;
+    min-width: 1.4em;
+}
+
+/* Column, no per-option text at all (only min/max, or nothing): a bare
+   numbered list has nothing to left-align against, so center each
+   number instead of stranding it on the left with blank space beside it. */
+.magicfeedback-rating-number-container-column--bare .magicfeedback-rating-number-value {
+    justify-content: center;
+}
+
+.magicfeedback-rating-number-value-label {
+    font-weight: var(--mf-font-weight-medium);
+}
+
+.magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
+    color: #fff;
+    background-color: var(--mf-primary);
+}
+
+/* Star Rating */
+.magicfeedback-rating-star-container {
+    justify-content: center;
+}
+
+.magicfeedback-rating-star-option:not(:checked) > .rating__star {
+    font-size: 40px;
+    color: var(--mf-border);
+    cursor: pointer;
+    margin: 0 var(--mf-space-xs);
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
+.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
+    color: #fbbf24;
+    transform: scale(1.1);
+}
+
+.magicfeedback-rating-star-selected {
+    color: #fbbf24 !important;
+}
+
+/* ========================================
+   MULTIPLE CHOICE WITH IMAGES
+   ======================================== */
+.magicfeedback-multiple-choice-image-option {
+    display: flex;
+    border-radius: var(--mf-radius-md);
+    overflow: hidden;
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-image-option-label-container {
+    cursor: pointer;
+    border-radius: var(--mf-radius-md);
+    overflow: hidden;
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-image-option-label-container input[type="radio"],
+.magicfeedback-image-option-label-container input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.magicfeedback-image-option-label-container img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border: 2px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-image-option-label-container:hover img {
+    border-color: var(--mf-primary);
+    box-shadow: var(--mf-shadow-md);
+}
+
+.magicfeedback-image-option-label-container input:checked + img {
+    border-color: var(--mf-primary);
+    box-shadow: 0 0 0 3px var(--mf-primary-light);
+}
+
+/* ========================================
+   MATRIX QUESTIONS
+   ======================================== */
+.magicfeedback-multi-question-matrix-container {
+    width: 100%;
+    overflow-x: auto;
+    border-radius: var(--mf-radius-md);
+}
+
+.magicfeedback-multi-question-matrix-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 var(--mf-space-xs);
+}
+
+.magicfeedback-multi-question-matrix-table th {
+    padding: var(--mf-space-md);
+    text-align: center;
+    font-size: var(--mf-font-size-sm);
+    font-weight: 500;
+    color: var(--mf-text-secondary);
+}
+
+.magicfeedback-multi-question-matrix-row-tr {
+    background-color: var(--mf-bg-primary);
+    border-radius: var(--mf-radius-md);
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
+    background-color: var(--mf-bg-secondary);
+}
+
+.magicfeedback-multi-question-matrix-row-tr:hover {
+    background-color: var(--mf-bg-hover);
+    box-shadow: var(--mf-shadow-sm);
+}
+
+.magicfeedback-multi-question-matrix-table td {
+    padding: var(--mf-space-md);
+    text-align: center;
+}
+
+.magicfeedback-multi-question-matrix-label {
+    text-align: start;
+    font-size: var(--mf-font-size-base);
+    color: var(--mf-text-primary);
+}
+
+.magicfeedback-multi-question-matrix-table input[type="radio"] {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    accent-color: var(--mf-primary);
+}
+
+/* ========================================
+   PRIORITY LIST
+   ======================================== */
+.magicfeedback-priority-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--mf-space-md);
+    margin: var(--mf-space-sm) 0;
+    background-color: var(--mf-bg-primary);
+    border: 1.5px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-priority-list-item:hover {
+    box-shadow: var(--mf-shadow-sm);
+    border-color: var(--mf-primary);
+}
+
+.magicfeedback-priority-list-item-label {
+    flex: 1;
+    font-size: var(--mf-font-size-base);
+    text-align: start;
+    color: var(--mf-text-primary);
+    margin: 0;
+}
+
+.magicfeedback-priority-list-arrow-up,
+.magicfeedback-priority-list-arrow-down {
+    padding: var(--mf-space-xs);
+    font-size: var(--mf-font-size-lg);
+    color: var(--mf-text-secondary);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+    user-select: none;
+}
+
+.magicfeedback-priority-list-arrow-up:hover,
+.magicfeedback-priority-list-arrow-down:hover {
+    color: var(--mf-primary);
+    transform: scale(1.2);
+}
+
+/* ========================================
+   POINT SYSTEM
+   ======================================== */
+.magicfeedback-point-system-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--mf-space-md);
+    margin: var(--mf-space-sm) 0;
+    background-color: var(--mf-bg-primary);
+    border: 1.5px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    min-height: 45px;
+}
+
+.magicfeedback-point-system-item label {
+    flex: 1;
+    font-size: var(--mf-font-size-base);
+    color: var(--mf-text-primary);
+    margin: 0;
+}
+
+.magicfeedback-point-system-input-container {
+    display: flex;
+    align-items: center;
+    gap: var(--mf-space-sm);
+}
+
+.magicfeedback-point-system-item input {
+    width: 80px;
+    min-width: 80px;
+    padding: var(--mf-space-sm);
+    text-align: center;
+    font-size: var(--mf-font-size-base);
+    border: 1.5px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    margin: 0;
+}
+
+.magicfeedback-point-system-total {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: var(--mf-space-md);
+    font-size: var(--mf-font-size-base);
+    font-weight: 600;
+    color: var(--mf-text-primary);
+}
+
+/* ========================================
+   CONSENT
+   ======================================== */
+.magicfeedback-consent-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--mf-space-sm);
+    padding: var(--mf-space-md);
+    background-color: var(--mf-bg-secondary);
+    border-radius: var(--mf-radius-md);
+    margin: var(--mf-space-md) 0;
+}
+
+.magicfeedback-consent-container input[type="checkbox"] {
+    margin-top: 2px;
+    flex-shrink: 0;
+    accent-color: var(--mf-primary);
+}
+
+.magicfeedback-consent-container label {
+    flex: 1;
+    font-size: var(--mf-font-size-sm);
+    text-align: start;
+    color: var(--mf-text-secondary);
+    line-height: var(--mf-line-height);
+    cursor: pointer;
+    margin-bottom: 0;
+}
+
+/* ========================================
+   ACTION BUTTONS
+   ======================================== */
+.magicfeedback-action-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mf-space-md);
+    margin-top: var(--mf-space-xl);
+    padding-top: var(--mf-space-lg);
+    border-top: 1px solid var(--mf-border);
+}
+
+.magicfeedback-submit {
+    padding: 0.8rem 1.6rem;
+    font-size: var(--mf-font-size-base);
+    font-weight: 800;
+    color: #FFFFFF;
+    background-color: var(--mf-primary);
+    border: 2px solid var(--mf-primary);
+    border-radius: var(--mf-radius-full);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+    box-shadow: var(--mf-shadow-md);
+}
+
+.magicfeedback-submit:hover {
+    background-color: var(--mf-primary-hover);
+    box-shadow: var(--mf-shadow-lg);
+    transform: translateY(-2px);
+}
+
+.magicfeedback-submit:active {
+    transform: translateY(0);
+    box-shadow: var(--mf-shadow-sm);
+}
+
+.magicfeedback-submit:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.magicfeedback-back {
+    padding: 0.65rem 1rem;
+    font-size: var(--mf-font-size-base);
+    font-weight: 700;
+    color: var(--mf-primary);
+    background-color: var(--mf-bg-secondary);
+    border: 2px solid var(--mf-border);
+    border-radius: var(--mf-radius-full);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-back:hover {
+    border-color: var(--mf-primary);
+    background-color: var(--mf-bg-hover);
+}
+
+/* ========================================
+   SKIP & COUNTER
+   ======================================== */
+.magicfeedback-skip-container {
+    display: flex;
+    align-items: center;
+    gap: var(--mf-space-xs);
+    padding: 0;
+    margin: 0;
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-text-muted);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-skip-container:hover {
+    color: var(--mf-primary);
+}
+
+.magicfeedback-skip-container input[type="checkbox"] {
+    margin: 0;
+    cursor: pointer;
+    accent-color: var(--mf-primary);
+}
+
+.magicfeedback-counter {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: var(--mf-space-md);
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-text-muted);
+}
+
+/* ========================================
+   MODAL STYLES
+   ======================================== */
+/* Modal backdrop */
+.magicfeedback-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0,0,0,0.4);
+    display: none; /* toggled to flex when open */
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+
+/* Modal container */
+.magicfeedback-modal {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+    max-width: 520px;
+    width: 90%;
+    max-height: 80vh;
+    /* Flex column so the options list scrolls while the actions footer
+       (counter + confirm button) stays pinned and always visible. */
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 16px;
+    position: relative;
+    /* Portalled to document.body (see renderPriorityList.ts) to escape the
+       host page's overflow/z-index \u2014 so it never inherits
+       .magicfeedback-container's neutral text color and instead inherits
+       whatever color the host page's own <body> happens to set. Needs its
+       own explicit baseline rather than relying on that inheritance. */
+    color: var(--mf-text-primary);
+}
+
+/* Modal actions */
+.magicfeedback-modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 12px;
+    flex-shrink: 0;
+}
+
+.magicfeedback-modal-counter {
+    margin-inline-end: auto;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: var(--mf-text-secondary);
+}
+
+/* Modal list */
+.magicfeedback-modal-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    /* Scrollable area; footer stays fixed below it. */
+    flex: 1 1 auto;
+    overflow-y: auto;
+    min-height: 0;
+}
+
+.magicfeedback-modal-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+}
+
+/* Priority list header */
+.magicfeedback-priority-list-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 8px;
+}
+
+.magicfeedback-priority-list-reorder {
+    margin-top: 8px;
+}
+
+.magicfeedback-priority-list-list {
+    padding: 0;
+    list-style: none;
+}
+
+.magicfeedback-priority-list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 5px 0;
+}
+
+.magicfeedback-priority-list-item-label {
+    font-size: 15px;
+}
+
+.magicfeedback-priority-list-arrows {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+/* Buttons */
+.magicfeedback-button {
+    appearance: none;
+    border: 2px solid var(--mf-border);
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-bg-secondary);
+    color: var(--mf-text-primary);
+    padding: 0.6rem 1rem;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    box-shadow: var(--mf-shadow-sm);
+}
+
+.magicfeedback-button:hover {
+    background: var(--mf-bg-hover);
+    border-color: var(--mf-primary);
+}
+
+.magicfeedback-button:active {
+    transform: translateY(1px);
+}
+
+.magicfeedback-button-primary {
+    border-color: var(--mf-primary);
+    background: var(--mf-primary);
+    color: #fff;
+    box-shadow: var(--mf-shadow-md);
+}
+
+.magicfeedback-button-primary:hover {
+    background: var(--mf-primary-hover);
+}
+
+.magicfeedback-button-primary:active {
+    background: var(--mf-primary-hover);
+}
+
+/* Warning flash */
+.magicfeedback-warning {
+    color: #C70039;
+}
+
+/* Start message button */
+.magicfeedback-start-message-button {
+    appearance: none;
+    border: 2px solid var(--mf-primary);
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-primary);
+    color: #fff;
+    padding: 0.8rem 1.4rem;
+    font-size: 15px;
+    font-weight: 800;
+    cursor: pointer;
+    box-shadow: var(--mf-shadow-md);
+}
+
+.magicfeedback-start-message-button:hover {
+    background: var(--mf-primary-hover);
+}
+
+/* ========================================
+   RESPONSIVE DESIGN
+   ======================================== */
+@media (max-width: 768px) {
+    :root {
+        --mf-space-lg: 1.25rem;
+        --mf-space-xl: 1.5rem;
+    }
+
+    .magicfeedback-container {
+        padding: 12px;
+        border-radius: var(--mf-radius-md);
+    }
+
+    .magicfeedback-form {
+        padding: 14px;
+        border-radius: var(--mf-radius-md);
+    }
+
+    .magicfeedback-div {
+        padding: 12px;
+        gap: var(--mf-space-lg)
+    }
+
+    .magicfeedback-label {
+        font-size: var(--mf-font-size-base);
+    }
+
+    .deepdots-popup input[type="date"],
+    .deepdots-popup input[type="text"],
+    .deepdots-popup input[type="number"],
+    .deepdots-popup input[type="email"],
+    .deepdots-popup input[type="password"],
+    .deepdots-popup textarea,
+    .deepdots-popup select {
+        padding: 0.85rem 0.95rem;
+        font-size: 1rem;
+        min-height: 46px;
+    }
+
+    /*
+    .magicfeedback-radio-container,
+    .magicfeedback-checkbox-container,
+    .magicfeedback-boolean-container,
+    .magicfeedback-consent-container {
+        width: 100%;
+    }
+    */
+
+    .magicfeedback-radio-container,
+    .magicfeedback-checkbox-container {
+        padding: 10px 12px;
+        border-radius: var(--mf-radius-md);
+        border: 1px solid var(--mf-border);
+        gap: 10px;
+    }
+
+    .magicfeedback-rating-container,
+    .magicfeedback-rating-number-container,
+    .magicfeedback-rating-star-container {
+        gap: 10px;
+    }
+
+    .magicfeedback-boolean-container {
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .magicfeedback-rating-number-container-row,
+    .magicfeedback-rating-number-container-row-reverse {
+        gap: 6px;
+    }
+
+    .magicfeedback-rating-number-option-row .magicfeedback-rating-number-value,
+    .magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-value {
+        min-height: 44px;
+        padding: var(--mf-space-xs);
+        font-size: 0.9rem;
+    }
+
+    .magicfeedback-action-container {
+        flex-direction: column-reverse;
+    }
+
+    .magicfeedback-submit,
+    .magicfeedback-back {
+        width: 100%;
+        text-align: center;
+        min-height: 48px;
+    }
+}
+
+/* ========================================
+   ACCESSIBILITY
+   ======================================== */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+
+/* ========================================
+   UTILITY CLASSES
+   ======================================== */
+.magicfeedback-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+.magicfeedback-modal-close {
+    position: absolute;
+    top: 8px;
+    inset-inline-end: 8px;
+    background: transparent;
+    border: none;
+    font-size: 20px;
+    line-height: 1;
+    cursor: pointer;
+    color: #666;
+}
+
+.magicfeedback-modal-close:hover,
+.magicfeedback-modal-close:focus {
+    color: #000;
+    outline: none;
+}
+
+/* ========================================
+   FILE / IMAGE UPLOAD
+   ======================================== */
+.magicfeedback-upload {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mf-space-md);
+    width: 100%;
+    margin: 10px 0;
+}
+
+/* The native input is an invisible, focusable overlay covering the dropzone. */
+.magicfeedback-upload-native {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 2;
+}
+
+.magicfeedback-upload-dropzone {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mf-space-sm);
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 150px;
+    padding: var(--mf-space-xl);
+    text-align: center;
+    border: 2px dashed var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    background-color: var(--mf-surface-alt);
+    cursor: pointer;
+    transition: var(--mf-transition);
+}
+
+.magicfeedback-upload-dropzone:hover {
+    border-color: var(--mf-primary);
+    background-color: var(--mf-bg-hover);
+}
+
+.magicfeedback-upload-dropzone:focus-within {
+    border-color: var(--mf-primary);
+    box-shadow: var(--mf-shadow-focus);
+}
+
+.magicfeedback-upload-dropzone.is-dragover {
+    border-color: var(--mf-primary);
+    border-style: solid;
+    background-color: var(--mf-primary-light);
+    box-shadow: var(--mf-shadow-focus);
+}
+
+.magicfeedback-upload-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 46px;
+    height: 46px;
+    color: var(--mf-primary);
+    background-color: var(--mf-surface);
+    border-radius: var(--mf-radius-full);
+    box-shadow: var(--mf-shadow-sm);
+    pointer-events: none;
+}
+
+.magicfeedback-upload-icon svg {
+    width: 24px;
+    height: 24px;
+}
+
+.magicfeedback-upload-cta {
+    font-family: inherit;
+    font-weight: var(--mf-font-weight-semibold);
+    font-size: var(--mf-font-size-base);
+    color: var(--mf-text-primary);
+    pointer-events: none;
+}
+
+.magicfeedback-upload-hint {
+    font-family: inherit;
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-text-muted);
+    pointer-events: none;
+}
+
+.magicfeedback-upload-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mf-space-sm);
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.magicfeedback-upload-list:empty {
+    display: none;
+}
+
+.magicfeedback-upload-file-item {
+    display: flex;
+    align-items: center;
+    gap: var(--mf-space-md);
+    padding: var(--mf-space-sm) var(--mf-space-md);
+    background-color: var(--mf-surface);
+    border: 1px solid var(--mf-border);
+    border-radius: var(--mf-radius-sm);
+    box-shadow: var(--mf-shadow-sm);
+    animation: mf-scale-in 0.2s ease-out;
+}
+
+.magicfeedback-upload-thumb {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+    color: var(--mf-text-secondary);
+    background-color: var(--mf-surface-alt);
+    border-radius: var(--mf-radius-sm);
+}
+
+.magicfeedback-upload-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.magicfeedback-upload-thumb svg {
+    width: 20px;
+    height: 20px;
+}
+
+.magicfeedback-upload-file-info {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-width: 0;
+    text-align: start;
+}
+
+.magicfeedback-upload-file-name {
+    font-family: inherit;
+    font-size: var(--mf-font-size-sm);
+    font-weight: var(--mf-font-weight-semibold);
+    color: var(--mf-text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.magicfeedback-upload-file-size {
+    font-family: inherit;
+    font-size: 0.75rem;
+    color: var(--mf-text-muted);
+}
+
+.magicfeedback-upload-remove {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    color: var(--mf-text-muted);
+    background-color: transparent;
+    border: none;
+    border-radius: var(--mf-radius-full);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-upload-remove:hover,
+.magicfeedback-upload-remove:focus-visible {
+    color: var(--mf-error);
+    background-color: var(--mf-primary-light);
+    outline: none;
+}
+
+.magicfeedback-upload-remove svg {
+    width: 16px;
+    height: 16px;
+}
+
+.magicfeedback-upload-error {
+    display: none;
+    font-family: inherit;
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-error);
+}
+
+.magicfeedback-upload-error.is-visible {
+    display: block;
+}
+
+/* ========================================
+   RTL (Arabic)
+   ========================================
+   The SDK stamps dir="rtl" (and .magicfeedback-rtl) on the survey container
+   for right-to-left languages. Everything else in this stylesheet uses logical
+   properties (text-align: start, padding-inline-*, inset-inline-*), so it
+   mirrors on its own; only the handful of rules that cannot be expressed
+   logically live here.
+
+   Rules are scoped to [dir="rtl"] inside our own subtree so a host page that is
+   itself RTL, or one that embeds an Arabic survey in an LTR page, both render
+   correctly. */
+
+/* background-position has no logical form: move the select caret to the
+   left edge, opposite the padding that inset-inline-end already mirrored. */
+[dir="rtl"] select {
+    background-position: left var(--mf-space-md) center;
+}
+
+/* Emails, URLs, numbers, dates and phone numbers are latin/numeric content
+   even in an Arabic survey: keep their own direction LTR so punctuation
+   (@, ., +, /) lands where the user expects, but align them to the start of
+   the RTL line so they still read as part of the form. */
+[dir="rtl"] input[type="email"],
+[dir="rtl"] input[type="url"],
+[dir="rtl"] input[type="number"],
+[dir="rtl"] input[type="tel"],
+[dir="rtl"] input[type="date"],
+[dir="rtl"] input[type="time"] {
+    direction: ltr;
+    text-align: right;
+}
+
+/* Mirror of mf-slide-in: questions enter from the reading edge. */
+@keyframes mf-slide-in-rtl {
+    from {
+        opacity: 0;
+        transform: translateX(16px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+[dir="rtl"] .magicfeedback-div {
+    animation-name: mf-slide-in-rtl;
+}
+
+/* ========================================
+   LOCAL \u2014 reglas del popup, no vienen del paquete
+   ======================================== */
+
+/* Los controles de formulario no heredan font-family: cuando el popup trae fuente propia
+   (clase deepdots-has-font), se les fuerza la del contenedor. */
+.deepdots-popup.deepdots-has-font button,
+.deepdots-popup.deepdots-has-font input,
+.deepdots-popup.deepdots-has-font textarea,
+.deepdots-popup.deepdots-has-font select {
+    font-family: var(--deepdots-font, inherit);
+}
+
+/* WebKit s\xED aplica el padding al radio nativo: con padding el control se dibuja enorme (se vio
+   en iOS, WebView de RN y Safari, no en Chrome). El paquete ya no lo pone, pero la regla es
+   barata y evita que vuelva. */
+.deepdots-popup input[type="radio"] {
+    padding: 0;
+}
+`;
   }
 });
 
@@ -207,6 +2292,49 @@ var init_logger = __esm({
   }
 });
 
+// src/ui/logo.ts
+function insertPopupLogo(parent, anchor, style, id) {
+  if (!style?.logo) return null;
+  if (parent.ownerDocument.getElementById(id)) return null;
+  const img = parent.ownerDocument.createElement("img");
+  img.id = id;
+  img.src = style.logo;
+  img.alt = "Logo";
+  img.style.cssText = BASE_CSS;
+  if (style.logoSize && MAX_HEIGHT[style.logoSize]) {
+    img.style.maxHeight = MAX_HEIGHT[style.logoSize];
+  }
+  switch (style.logoPosition) {
+    case "left":
+      img.style.margin = "12px 0 0 0";
+      img.style.setProperty("margin-inline-start", "0");
+      img.style.setProperty("margin-inline-end", "16px");
+      break;
+    case "right":
+      img.style.margin = "12px 0 0 0";
+      img.style.setProperty("margin-inline-start", "auto");
+      img.style.setProperty("margin-inline-end", "0");
+      break;
+    case "center":
+      img.style.margin = "12px auto 0 auto";
+      break;
+  }
+  parent.insertBefore(img, anchor);
+  return img;
+}
+var BASE_CSS, MAX_HEIGHT;
+var init_logo = __esm({
+  "src/ui/logo.ts"() {
+    "use strict";
+    BASE_CSS = "max-height:40px; max-width:100%; object-fit:contain; display:block; margin:12px 0 0 0;";
+    MAX_HEIGHT = {
+      small: "30px",
+      medium: "50px",
+      large: "70px"
+    };
+  }
+});
+
 // src/ui/renderPopup.ts
 var renderPopup_exports = {};
 __export(renderPopup_exports, {
@@ -304,6 +2432,9 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   let stylesInjected = false;
   let pageDepth = 0;
   let onStartPage = false;
+  let labels = getLabels(options?.language);
+  let actionLabels = resolveActionLabels(actions, options?.language);
+  let direction = directionFor(options?.language);
   const isDark = style?.theme === "dark";
   const theme = {
     popupBg: isDark ? "#1e1e1e" : "#fff",
@@ -313,7 +2444,6 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     // oscuros con texto blanco sobre el fondo claro del popup.
     colorScheme: isDark ? "dark" : "light",
     textPrimary: isDark ? "#f0f0f0" : "#111",
-    closeBtnHoverBg: isDark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.06)",
     closeBtnHoverColor: isDark ? "#fff" : "#000000",
     textMuted: isDark ? "#9ca3af" : "#6b7280",
     progressTrack: isDark ? "#3f3f46" : "#e5e7eb"
@@ -331,6 +2461,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const popup = document.createElement("div");
   popup.id = "dd-popup";
   popup.className = "deepdots-popup";
+  popup.setAttribute("dir", direction);
   popup.style.cssText = `
       position: relative;
       display: flex;
@@ -360,7 +2491,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const titleEl = document.createElement("h2");
   titleEl.id = "dd-title";
   titleEl.className = "deepdots-popup-title";
-  titleEl.style.cssText = `margin:0; font-size:17px; font-weight:600; line-height:1.3; color:${theme.textPrimary}; text-transform:none; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;`;
+  titleEl.style.cssText = `margin:0; font-size:17px; font-weight:600; line-height:1.3; color:${theme.textPrimary}; text-transform:none; text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;`;
   titleEl.hidden = true;
   const setTitle = (value) => {
     if (!value) return;
@@ -372,10 +2503,10 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const closeBtn = document.createElement("button");
   closeBtn.id = "dd-close";
   closeBtn.type = "button";
-  closeBtn.setAttribute("aria-label", "Close popup");
+  closeBtn.setAttribute("aria-label", labels.closeAria);
   closeBtn.innerHTML = `
-      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5 5L19 19M5 19L19 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="butt"/>
       </svg>
     `;
   closeBtn.style.cssText = `
@@ -390,17 +2521,15 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       cursor:pointer;
       color:${theme.textPrimary};
       padding:4px;
-      transition: color .15s ease, transform .15s ease, background .15s ease;
+      transition: color .15s ease, transform .15s ease;
       box-shadow: none !important;
     `;
   closeBtn.onmouseenter = () => {
     closeBtn.style.color = theme.closeBtnHoverColor;
-    closeBtn.style.background = theme.closeBtnHoverBg;
     closeBtn.style.transform = "scale(1.06)";
   };
   closeBtn.onmouseleave = () => {
     closeBtn.style.color = theme.textPrimary;
-    closeBtn.style.background = "transparent";
     closeBtn.style.transform = "scale(1)";
   };
   closeBtn.onclick = () => {
@@ -433,7 +2562,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   progressLabel.appendChild(progressTotal);
   const progressFollowUp = document.createElement("span");
   progressFollowUp.id = "dd-progress-followup";
-  progressFollowUp.textContent = "Follow-up";
+  progressFollowUp.textContent = labels.followUp;
   progressFollowUp.style.cssText = "display:none; font-size:12px; font-weight:600; color:#fff; background:rgba(59,130,246,0.44); border-radius:999px; padding:2px 10px;";
   progressHead.appendChild(progressLabel);
   progressHead.appendChild(progressFollowUp);
@@ -465,8 +2594,8 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       progressCurrent.textContent = `${Math.round(pct)}%`;
       progressTotal.textContent = "";
     } else {
-      progressCurrent.textContent = `Question ${label}`;
-      progressTotal.textContent = ` of ${total}`;
+      progressCurrent.textContent = `${labels.question} ${label}`;
+      progressTotal.textContent = ` ${labels.of} ${total}`;
     }
     progressFollowUp.style.display = p.followup ? "inline-block" : "none";
   }
@@ -503,7 +2632,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const spinnerEl = document.createElement("div");
   spinnerEl.className = "mf-spinner";
   spinnerEl.setAttribute("role", "status");
-  spinnerEl.setAttribute("aria-label", "Loading survey");
+  spinnerEl.setAttribute("aria-label", labels.loadingAria);
   spinnerEl.innerHTML = '<div class="mf-spinner-circle"></div>';
   spinnerEl.style.cssText = "position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);";
   const formDivId = `magicfeedback-form-${surveyId}`;
@@ -522,7 +2651,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const backButton = document.createElement("button");
   backButton.id = "dd-back";
   backButton.className = "dd-nav-btn";
-  backButton.textContent = actions?.back ? actions.back.label : "Back";
+  backButton.textContent = actionLabels.back;
   backButton.style.cssText = `
       background: transparent;
       color: ${theme.textMuted};
@@ -552,7 +2681,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const startButton = document.createElement("button");
   startButton.id = "dd-start";
   startButton.className = "dd-nav-btn";
-  startButton.textContent = actions?.start ? actions.start.label : "Start survey";
+  startButton.textContent = actionLabels.start;
   startButton.style.cssText = `
       background: #1E293B;
       color: #fff;
@@ -579,7 +2708,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const closeButton = document.createElement("button");
   closeButton.id = "dd-complete";
   closeButton.className = "dd-nav-btn";
-  closeButton.textContent = actions?.complete ? actions.complete.label : "Complete survey";
+  closeButton.textContent = actionLabels.complete;
   closeButton.style.cssText = `
       background: #1E293B;
       color: #fff;
@@ -610,7 +2739,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const submitButton = document.createElement("button");
   submitButton.id = "dd-submit";
   submitButton.className = "dd-nav-btn";
-  submitButton.textContent = actions?.accept ? actions.accept.label : "Send";
+  submitButton.textContent = actionLabels.accept;
   submitButton.style.cssText = `
       background: #1E293B;
       color: #fff;
@@ -634,6 +2763,19 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       formInstance?.send?.();
     }
   };
+  function applyLabels(lang) {
+    labels = getLabels(lang);
+    actionLabels = resolveActionLabels(actions, lang);
+    backButton.textContent = actionLabels.back;
+    startButton.textContent = actionLabels.start;
+    closeButton.textContent = actionLabels.complete;
+    submitButton.textContent = actionLabels.accept;
+    closeBtn.setAttribute("aria-label", labels.closeAria);
+    spinnerEl.setAttribute("aria-label", labels.loadingAria);
+    progressFollowUp.textContent = labels.followUp;
+    direction = directionFor(lang);
+    popup.setAttribute("dir", direction);
+  }
   backButton.style.display = "none";
   startButton.style.display = "none";
   submitButton.style.display = "none";
@@ -754,6 +2896,8 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       addSuccessScreen: false
     };
     generateOptions.onLoadedEvent = ({ formData }) => {
+      const surveyLang = Array.isArray(formData?.lang) ? formData.lang.find((l) => typeof l === "string" && l.trim().length > 0) : void 0;
+      if (surveyLang) applyLabels(surveyLang);
       try {
       } catch {
       }
@@ -790,47 +2934,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
           backButton.style.color = s.buttonSecondaryColor;
           backButton.style.border = "none";
         }
-        if (s.logo) {
-          if (!document.getElementById("deepdots-popup-logo")) {
-            const logoImg = document.createElement("img");
-            logoImg.id = "deepdots-popup-logo";
-            logoImg.src = s.logo;
-            logoImg.alt = "Logo";
-            logoImg.style.cssText = "max-height:40px; max-width:100%; object-fit:contain;";
-            if (s.logoSize) {
-              switch (s.logoSize) {
-                case "small":
-                  logoImg.style.maxHeight = "30px";
-                  break;
-                case "medium":
-                  logoImg.style.maxHeight = "50px";
-                  break;
-                case "large":
-                  logoImg.style.maxHeight = "70px";
-                  break;
-              }
-            }
-            if (s.logoPosition) {
-              switch (s.logoPosition) {
-                case "left":
-                  logoImg.style.margin = "0 16px 42px 0";
-                  logoImg.style.display = "block";
-                  logoImg.style.marginLeft = "0";
-                  break;
-                case "right":
-                  logoImg.style.margin = "0 0 42px 16px";
-                  logoImg.style.display = "block";
-                  logoImg.style.marginLeft = "auto";
-                  break;
-                case "center":
-                  logoImg.style.margin = "0 auto 42px auto";
-                  logoImg.style.display = "block";
-                  break;
-              }
-            }
-            containerContent.insertBefore(logoImg, main);
-          }
-        }
+        insertPopupLogo(popup, progressEl, s, "deepdots-popup-logo");
         if (s.startMessage && s.startMessage !== "") {
           sdkLog(s.startMessage);
           onStartPage = true;
@@ -854,13 +2958,13 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       if (errText) {
         setLoading(false);
         if (errText.toLowerCase().includes("no response")) {
-          errorHint.textContent = "Please answer the required question to continue.";
+          errorHint.textContent = labels.errorRequired;
           errorHint.style.display = "block";
           emit("popup_clicked", surveyId, { action: "validation_error_required" });
           updateNavButtons();
           return;
         }
-        errorHint.textContent = "An error occurred while submitting. Please try again or close the popup.";
+        errorHint.textContent = labels.errorSubmit;
         errorHint.style.display = "block";
         emit("popup_clicked", surveyId, { action: "submit_error", error: errText });
         return;
@@ -901,7 +3005,9 @@ var init_renderPopup = __esm({
     "use strict";
     init_tracking_manager();
     init_font();
+    init_logo();
     init_logger();
+    init_labels();
     import_native = __toESM(require("@magicfeedback/native"));
     init_style();
   }
@@ -1113,6 +3219,7 @@ init_tracking_manager();
 
 // src/ui/surveyHtml.ts
 init_font();
+init_labels();
 init_style();
 var POSITION_MAP = {
   center: { justifyContent: "center", alignItems: "center", padding: "0", background: "rgba(0,0,0,0.5)" },
@@ -1126,9 +3233,13 @@ var POSITION_MAP = {
 function jsonForScript(value) {
   return JSON.stringify(value ?? null).replace(/</g, "\\u003C").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
 }
+function trimmedOrNull(value) {
+  const trimmed = typeof value === "string" ? value.trim() : "";
+  return trimmed ? value : null;
+}
 function buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
-  const version = opts.version ?? "2.2.4";
+  const version = opts.version ?? "2.2.22";
   const cdn = `https://cdn.jsdelivr.net/npm/@magicfeedback/native@${version}/dist/magicfeedback-sdk.browser.js`;
   const sid = jsonForScript(opts.surveyId);
   const pid = jsonForScript(opts.productId);
@@ -1160,10 +3271,22 @@ function buildSurveyHtml(opts) {
   const titleJson = jsonForScript(opts.title ?? "");
   const customCss = (opts.surveyCss ?? "").replace(/<\/\s*style/gi, "<\\/style");
   const progressPref = opts.showProgressBar === void 0 ? "null" : String(opts.showProgressBar);
-  const backLabel = jsonForScript(opts.actions?.back?.label ?? "Back");
-  const startLabel = jsonForScript(opts.actions?.start?.label ?? "Start survey");
-  const completeLabel = jsonForScript(opts.actions?.complete?.label ?? "Complete survey");
-  const submitLabel = jsonForScript(opts.actions?.accept?.label ?? "Send");
+  const initLabels = getLabels(opts.language);
+  const initActionLabels = resolveActionLabels(opts.actions, opts.language);
+  const backLabel = jsonForScript(initActionLabels.back);
+  const startLabel = jsonForScript(initActionLabels.start);
+  const completeLabel = jsonForScript(initActionLabels.complete);
+  const submitLabel = jsonForScript(initActionLabels.accept);
+  const labelsTableJson = jsonForScript(LABELS);
+  const actionOverridesJson = jsonForScript({
+    accept: trimmedOrNull(opts.actions?.accept?.label),
+    start: trimmedOrNull(opts.actions?.start?.label),
+    complete: trimmedOrNull(opts.actions?.complete?.label),
+    back: trimmedOrNull(opts.actions?.back?.label)
+  });
+  const initLangJson = jsonForScript(opts.language ?? "");
+  const initDirection = directionFor(opts.language);
+  const rtlLocalesJson = jsonForScript(RTL_LOCALES);
   return `<!DOCTYPE html><html><head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <meta name="color-scheme" content="${colorScheme}"/>
@@ -1176,8 +3299,8 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 .deepdots-popup-header{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;flex:0 0 auto}
 /* Neutraliza la regla \`.deepdots-popup h2\` del CSS del survey (uppercase, centrado y
    margin-bottom 40px), pensada para los enunciados y no para el t\xEDtulo de la cabecera. */
-#dd-title{margin:0;font-family:var(--deepdots-font,'Montserrat',inherit);font-size:17px;font-weight:600;line-height:1.3;color:${textPrimary};text-transform:none;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-#dd-close{background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:${textPrimary};padding:4px;flex:0 0 auto;margin-left:auto}
+#dd-title{margin:0;font-family:var(--deepdots-font,'Montserrat',inherit);font-size:17px;font-weight:600;line-height:1.3;color:${textPrimary};text-transform:none;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#dd-close{background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:${textPrimary};padding:4px;flex:0 0 auto;margin-inline-start:auto}
 /* Progreso alineado con la cabecera: sin padding horizontal propio, lo marca la tarjeta.
    El vertical es el mismo arriba y abajo, y del mismo valor que el padding de la tarjeta. */
 .deepdots-progress{display:none;flex-direction:column;gap:8px;width:100%;flex:0 0 auto;padding:16px 0;box-sizing:border-box}
@@ -1205,7 +3328,7 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 #dd-form-wrapper{width:100%;flex:1 1 auto}
 #mf{width:100%;box-sizing:border-box;visibility:hidden}
 .deepdots-popup-main *{max-width:100%;box-sizing:border-box}
-#dd-logo{max-height:40px;max-width:100%;object-fit:contain}
+#dd-logo{max-height:40px;max-width:100%;object-fit:contain;display:block;margin:12px 0 0 0}
 .deepdots-error-hint{display:none;margin:12px 0 0 0;padding:10px 12px;border-radius:6px;background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;font-size:13px}
 /* Pantalla final: el HTML del editor de la plataforma (imagen + texto), centrado. */
 .deepdots-success{display:none;width:100%;text-align:center;padding:24px 0;color:${textPrimary}}
@@ -1234,35 +3357,35 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 ${customCss}
 </style>
 </head><body>
-<div class="${popupClass}" id="dd-popup">
+<div class="${popupClass}" id="dd-popup" dir="${initDirection}">
   <div class="deepdots-popup-header">
     <h2 id="dd-title" class="deepdots-popup-title" hidden></h2>
-    <button type="button" id="dd-close" aria-label="Close popup">
-      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <button type="button" id="dd-close" aria-label="${initLabels.closeAria}">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5 5L19 19M5 19L19 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="butt"/>
       </svg>
     </button>
   </div>
   <div class="deepdots-progress" id="dd-progress">
     <div class="deepdots-progress-head">
       <span id="dd-progress-label"><span id="dd-progress-current"></span><span id="dd-progress-total"></span></span>
-      <span id="dd-progress-followup">Follow-up</span>
+      <span id="dd-progress-followup">${initLabels.followUp}</span>
     </div>
     <div class="deepdots-progress-track"><div id="dd-progress-bar"></div></div>
   </div>
   <div class="deepdots-popup-container-content" id="dd-content">
     <div class="deepdots-popup-main" id="dd-main">
       <div id="dd-form-wrapper">
-        <div class="mf-spinner" id="dd-spinner" role="status" aria-label="Loading survey"><div class="mf-spinner-circle"></div></div>
+        <div class="mf-spinner" id="dd-spinner" role="status" aria-label="${initLabels.loadingAria}"><div class="mf-spinner-circle"></div></div>
         <div id="mf"></div>
       </div>
       <div class="deepdots-error-hint" id="dd-error" role="alert" aria-live="polite"></div>
     </div>
     <div class="deepdots-popup-footer" id="dd-footer">
-      <button type="button" class="dd-nav-btn" id="dd-submit">Send</button>
-      <button type="button" class="dd-nav-btn" id="dd-back">Back</button>
-      <button type="button" class="dd-nav-btn" id="dd-complete">Complete survey</button>
-      <button type="button" class="dd-nav-btn" id="dd-start">Start survey</button>
+      <button type="button" class="dd-nav-btn" id="dd-submit"></button>
+      <button type="button" class="dd-nav-btn" id="dd-back"></button>
+      <button type="button" class="dd-nav-btn" id="dd-complete"></button>
+      <button type="button" class="dd-nav-btn" id="dd-start"></button>
     </div>
   </div>
 </div>
@@ -1291,6 +3414,32 @@ ${customCss}
   var progressTotal=document.getElementById('dd-progress-total');
   var progressFollowUp=document.getElementById('dd-progress-followup');
   var progressBar=document.getElementById('dd-progress-bar');
+  var closeEl=document.getElementById('dd-close');
+
+  // --- i18n del chrome -------------------------------------------------------------------
+  // La tabla completa viaja embebida porque el idioma del survey (\`formData.lang[0]\`) solo se
+  // conoce ya dentro del WebView. \`ddResolveLocale\` es el espejo del \`resolveLocale\` de TS
+  // (paridad cubierta por test).
+  var DD_LABELS=${labelsTableJson};
+  var DD_ACTION_OVERRIDES=${actionOverridesJson};
+  ${RESOLVE_LOCALE_JS}
+  var DD_LABELS_ACTIVE=DD_LABELS[ddResolveLocale(${initLangJson})];
+  var DD_RTL=${rtlLocalesJson};
+  function ddIsRtl(lang){ return DD_RTL.indexOf(ddResolveLocale(lang))!==-1; }
+  function ddApplyLabels(lang){
+    var next=DD_LABELS[ddResolveLocale(lang)];
+    if(!next) return;
+    DD_LABELS_ACTIVE=next;
+    // El survey ya se ha volteado a s\xED mismo: el chrome tiene que acompa\xF1arlo.
+    popup.setAttribute('dir', ddIsRtl(lang) ? 'rtl' : 'ltr');
+    backBtn.textContent=DD_ACTION_OVERRIDES.back||next.back;
+    startBtn.textContent=DD_ACTION_OVERRIDES.start||next.start;
+    completeBtn.textContent=DD_ACTION_OVERRIDES.complete||next.complete;
+    submitBtn.textContent=DD_ACTION_OVERRIDES.accept||next.accept;
+    if(closeEl){ closeEl.setAttribute('aria-label',next.closeAria); }
+    if(spinner){ spinner.setAttribute('aria-label',next.loadingAria); }
+    progressFollowUp.textContent=next.followUp;
+  }
 
   function setTitle(t){
     if(!t) return;
@@ -1331,8 +3480,8 @@ ${customCss}
       progressCurrent.textContent=Math.round(pct)+'%';
       progressTotal.textContent='';
     } else {
-      progressCurrent.textContent='Question '+label;
-      progressTotal.textContent=' of '+total;
+      progressCurrent.textContent=DD_LABELS_ACTIVE.question+' '+label;
+      progressTotal.textContent=' '+DD_LABELS_ACTIVE.of+' '+total;
     }
     progressFollowUp.style.display=p&&p.followup?'inline-block':'none';
   }
@@ -1342,7 +3491,7 @@ ${customCss}
   completeBtn.textContent=${completeLabel};
   submitBtn.textContent=${submitLabel};
 
-  document.getElementById('dd-close').onclick=function(){ emitJSON('popup_close'); };
+  closeEl.onclick=function(){ emitJSON('popup_close'); };
   backBtn.onclick=function(){ if(window.DeepdotsForm && window.DeepdotsForm.back){ window.DeepdotsForm.back(); } };
   startBtn.onclick=function(){
     if(window.DeepdotsForm && window.DeepdotsForm.startForm){
@@ -1437,6 +3586,14 @@ ${customCss}
         // fallback es un literal gen\xE9rico que ignora style.successMessage.
         addSuccessScreen:false,
         onLoadedEvent:function(args){
+          // Idioma del survey: manda sobre el del init para que el chrome no se quede en
+          // ingl\xE9s delante de un survey traducido.
+          var langs=args && args.formData ? args.formData.lang : null;
+          if(langs && langs.length){
+            for(var li=0;li<langs.length;li++){
+              if(typeof langs[li]==='string' && langs[li].trim()){ ddApplyLabels(langs[li]); break; }
+            }
+          }
           var s=args && args.formData ? args.formData.style : null;
           if(s && !stylesInjected){
             stylesInjected=true;
@@ -1463,10 +3620,14 @@ ${customCss}
               if(s.logoSize==='small'){ logoImg.style.maxHeight='30px'; }
               else if(s.logoSize==='medium'){ logoImg.style.maxHeight='50px'; }
               else if(s.logoSize==='large'){ logoImg.style.maxHeight='70px'; }
-              if(s.logoPosition==='left'){ logoImg.style.margin='0 16px 20px 0'; logoImg.style.display='block'; logoImg.style.marginLeft='0'; }
-              else if(s.logoPosition==='right'){ logoImg.style.margin='0 0 20px 16px'; logoImg.style.display='block'; logoImg.style.marginLeft='auto'; }
-              else if(s.logoPosition==='center'){ logoImg.style.margin='0 auto 20px auto'; logoImg.style.display='block'; }
-              main.insertBefore(logoImg, document.getElementById('dd-form-wrapper'));
+              // M\xE1rgenes l\xF3gicos: con un survey RTL el popup va con dir="rtl" y el logo
+              // tiene que acompa\xF1ar al chrome. En LTR el resultado es el mismo de antes.
+              if(s.logoPosition==='left'){ logoImg.style.margin='12px 0 0 0'; logoImg.style.setProperty('margin-inline-start','0'); logoImg.style.setProperty('margin-inline-end','16px'); }
+              else if(s.logoPosition==='right'){ logoImg.style.margin='12px 0 0 0'; logoImg.style.setProperty('margin-inline-start','auto'); logoImg.style.setProperty('margin-inline-end','0'); }
+              else if(s.logoPosition==='center'){ logoImg.style.margin='12px auto 0 auto'; }
+              // Encima de la barra de progreso, como hermano del header (espejo de ui/logo.ts en
+              // web). Fuera de #dd-main, as\xED el logo no se va con el scroll del formulario.
+              popup.insertBefore(logoImg, progressEl);
             }
             if(s.startMessage && s.startMessage!==''){ onStartPage=true; updateButtons('start'); }
             else { updateButtons('in_progress_first'); }
@@ -1488,12 +3649,12 @@ ${customCss}
             setLoading(false);
             if(error.toLowerCase().indexOf('no response')!==-1){
               // La p\xE1gina no ha cambiado: el estado de navegaci\xF3n se queda como estaba.
-              errorHint.textContent='Please answer the required question to continue.';
+              errorHint.textContent=DD_LABELS_ACTIVE.errorRequired;
               errorHint.style.display='block';
               updateNavButtons();
               return;
             }
-            errorHint.textContent='An error occurred while submitting. Please try again or close the popup.';
+            errorHint.textContent=DD_LABELS_ACTIVE.errorSubmit;
             errorHint.style.display='block';
             return;
           }
@@ -1566,7 +3727,8 @@ var ReactNativePopupRenderer = class {
       chrome: renderChrome,
       title: options?.title,
       showProgressBar: options?.showProgressBar,
-      surveyCss: options?.surveyCss
+      surveyCss: options?.surveyCss,
+      language: options?.language
     });
     if (this.options.onShow) {
       this.options.onShow({ surveyId, productId, html });
@@ -3379,7 +5541,7 @@ var DeepdotsPopups = class {
         miniService,
         analyticsFeedbackSessionId,
         this.renderChrome,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss }
+        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
       );
       return;
     }
@@ -3399,7 +5561,7 @@ var DeepdotsPopups = class {
         sessionId,
         miniService,
         analyticsFeedbackSessionId,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss }
+        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
       );
     });
   }