@magicfeedback/popup-sdk 1.2.0 → 1.3.0

package/dist/index.js

@@ -181,6 +181,14 @@ var init_font = __esm({
   }
 });
 
+// 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.deepdots-popup input[type="radio"] {\n    padding: 20px;\n    margin: 10px 0 10px 15px;\n    width: 40px;\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}';
+  }
+});
+
 // src/util/logger.ts
 function setLogger(logger) {
   active = logger ?? console;
@@ -2127,876 +2135,6 @@ var require_magicfeedback_sdk_browser = __commonJS({
   }
 });
 
-// src/assets/style.css
-var style_default;
-var init_style = __esm({
-  "src/assets/style.css"() {
-    style_default = `.magicfeedback-container {
-    width: 100%;
-}
-
-
-.magicfeedback-success-message,
-.magicfeedback-info-message,
-.magicfeedback-start-message,
-.magicfeedback-container{
-    animation-duration: 0.5s;
-    animation-name: animate-fade;
-    animation-delay: 0.25s;
-    animation-fill-mode: backwards;
-
-    font-style: normal;
-    text-align: justify;
-    font-weight: 400;
-    font-size: 1.2rem;
-    color: #475569;
-    line-height: 1.5;
-}
-
-@keyframes animate-fade {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-}
-
-.magicfeedback-form {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    width: 100%;
-}
-.magicfeedback-questions {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    width: 100%;
-}
-
-.magicfeedback-div {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    margin-bottom: 10px;
-    width: 100%;
-}
-
-.magicfeedback-label {
-    margin-bottom: 25px;
-    margin-top: 20px;
-    font-weight: 400;
-    font-family: inherit;
-    font-size: 1.2rem;
-    color: #212529;
-    text-align: start;
-    word-wrap: break-word;
-    white-space: normal;
-
-}
-
-.magicfeedback-checkbox {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    width: 100%;
-}
-
-.magicfeedback-checkbox-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 5px;
-    margin-top: 5px;
-}
-
-.magicfeedback-radio {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    width: 100%;
-    margin-right: 5px;
-    padding: 5px;
-}
-
-.magicfeedback-checkbox-container,
-.magicfeedback-radio-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 5px;
-    padding: 5px 0;
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0 3px #ccc;
-}
-
-.deepdots-popup input::-webkit-outer-spin-button,
-.deepdots-popup input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    -moz-appearance: textfield;
-}
-
-.magicfeedback-checkbox input[type="checkbox"] {
-    margin-right: 5px;
-    margin-left: 5px;
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-}
-
-
-.magicfeedback-checkbox label,
-.magicfeedback-radio-container label {
-    margin-left: 5px;
-    font-weight: 400;
-    font-family: inherit;
-    font-size: 16px;
-    color: #212529;
-    text-align: start;
-    width: 100%;
-}
-
-.deepdots-popup p {
-    margin-bottom: 0px;
-    font-size: 12px;
-}
-
-.deepdots-popup h2 {
-    line-height: 1.66;
-    margin: 0;
-    padding: 0;
-    font-weight: 900;
-    color: #222;
-    font-family: var(--deepdots-font, 'Montserrat');
-    font-size: 18px;
-    text-transform: uppercase;
-    text-align: center;
-    margin-bottom: 40px;
-}
-
-/* Los controles de formulario no heredan font-family por defecto: cuando hay
-   fuente custom (clase deepdots-has-font), los forzamos a usar 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);
-}
-
-.deepdots-popup h6 {
-    margin-bottom: 1rem;
-}
-
-.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 {
-    box-sizing: border-box;
-    padding: 10px;
-    margin: 10px 0;
-    width: 100%;
-    border: 2px solid #ccc; /* Default border color - you can customize this */
-    border-radius: 5px;
-    font-size: 18px;
-    outline: none;
-    transition: border-color 0.3s ease;
-    min-height: 50px;
-    font-family: inherit;
-    -webkit-appearance: none;
-}
-
-.deepdots-popup select {
-    background-image: linear-gradient(45deg, transparent 50%, gray 50%),
-    linear-gradient(135deg, gray 50%, transparent 50%),
-    linear-gradient(to right, #ccc, #ccc);
-    background-position: calc(100% - 20px) calc(1em + 2px),
-    calc(100% - 15px) calc(1em + 2px),
-    calc(100% - 2.5em) 0.5em;
-    background-size: 5px 5px,
-    5px 5px,
-    1px 1.5em;
-    background-repeat: no-repeat;
-}
-
-.magicfeedback-boolean-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 10px 0;
-    width: 100%;
-}
-
-.magicfeedback-boolean-container label {
-    margin-left: 10px;
-    font-weight: 400;
-    font-size: 16px;
-    width: 100%;
-    padding-top: 5px;
-}
-
-.magicfeedback-boolean-option {
-    margin-right: 10px;
-    margin-left: 10px;
-    width: 100%;
-    height: 38px;
-    border-radius: 8px;
-    font-size: 16px;
-    cursor: pointer;
-    border: 1px solid #ced4da !important;
-}
-
-.magicfeedback-boolean-option label {
-    font-weight: 400;
-    font-size: 16px;
-    color: #475569;
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: inherit;
-}
-
-.magicfeedback-boolean-option input[type=radio] + label:hover {
-    color: #007bff;
-}
-
-.magicfeedback-boolean-option input[type=radio]:checked + label {
-    color: #007bff;
-    background-color: #cadff8;
-}
-
-.deepdots-popup input[type="radio"] {
-    padding: 20px;
-    margin: 10px 0 10px 15px;
-    width: 40px;
-    background-color: #fff;
-    box-shadow: none;
-}
-
-/* Style for focused input/select */
-.deepdots-popup input:focus, .deepdots-popup select:focus {
-    border-color: #4CAF50; /* Highlight color when focused - you can customize this */
-}
-
-/* Style for invalid input (example: validation error) */
-.deepdots-popup input.error, .deepdots-popup select.error {
-    border-color: #ff3333; /* Red color for error state - you can customize this */
-}
-
-.magicfeedback-action-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 10px;
-    width: 100%;
-}
-
-.magicfeedback-action-container .magicfeedback-submit {
-    cursor: pointer;
-    padding: 10px;
-    margin: 10px 0;
-    width: 100px;
-    border-radius: 8px;
-    font-size: 16px;
-    outline: none;
-    transition: border-color 0.3s ease;
-    background-color: #1E293B;
-    color: white;
-}
-
-.magicfeedback-action-container .magicfeedback-back {
-    cursor: pointer;
-    padding: 10px;
-    margin: 10px 0;
-    width: 100px;
-    border: 0;
-    border-radius: 8px;
-    font-size: 16px;
-    outline: none;
-    transition: border-color 0.3s ease;
-    background-color: transparent;
-    color: #212529;
-}
-
-
-
-/* Rating styles */
-.magicfeedback-rating {
-    width: 100%;
-}
-
-.magicfeedback-rating-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    align-items: center;
-
-    margin: 15px 5px;
-    padding: 0;
-
-    list-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-}
-
-.magicfeedback-rating-placeholder-value,
-.magicfeedback-rating-placeholder{
-    text-align: center;
-    align-content: center;
-    justify-content: center;
-    text-wrap: wrap;
-}
-
-.magicfeedback-rating-option {
-    margin: 0 0.5rem;
-    padding: 0;
-}
-
-@media (max-width: 1024px) {
-    .magicfeedback-rating-option {
-        margin: 10px 0;
-        padding: 0;
-        width: 20%;
-        display: flex;
-        justify-content: center;
-    }
-
-    .magicfeedback-rating-placeholder-value {
-        font-size: 0.75rem;
-        margin-bottom: 1px;
-    }
-    .magicfeedback-rating-placeholder{
-        justify-content: center;
-    }
-
-    .magicfeedback-rating-container {
-        flex-wrap: wrap;
-        justify-content: flex-start;
-    }
-}
-
-
-.magicfeedback-rating-option-label-container {
-    display: flex;
-    flex-direction: column;
-}
-
-
-.magicfeedback-rating-option-label-container label {
-    display: inline-block;
-    text-align: center;
-    margin-bottom: 0;
-    font-weight: 600;
-    font-size: 18px;
-    color: #475569;
-}
-
-.magicfeedback-rating-option-label-container input[type=radio] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-/* IMAGE STYLES */
-.magicfeedback-rating-option-label-container input[type=radio] + img {
-    cursor: pointer;
-    height: 48px;
-    width: 48px;
-}
-
-/* LABEL STYLES */
-.magicfeedback-rating-option-label-container input[type=radio] + label {
-    cursor: pointer;
-}
-
-/* CHECKED STYLES */
-.magicfeedback-rating-option-label-container input[type=radio]:checked + img {
-    box-shadow: #007bff 0px 1px 4px, #007BFFA0 0px 0px 0px 2px;
-    border-radius: 50%;
-}
-
-.magicfeedback-rating-number {
-    width: 100%;
-}
-.magicfeedback-rating-container,
-.magicfeedback-rating-number-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-
-    margin: 15px 0;
-    padding: 0;
-
-    list-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-}
-
-/* Cuando hay placeholders (Very bad / Very good), el placeholder ocupa
-   el 100% de la primera l\xEDnea y los boxes bajan a la siguiente */
-.magicfeedback-rating-number-container--with-placeholder {
-    flex-wrap: wrap;
-    align-items: flex-start;
-}
-
-.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-placeholder {
-    width: 100%;
-    margin-bottom: 8px;
-}
-
-.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-number-option {
-    width: auto;
-    flex: 1;
-}
-
-.magicfeedback-rating-number-option {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 5px;
-    padding: 0;
-    list-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    width: 100%;
-}
-
-.magicfeedback-rating-number-option-row{
-    max-width: 100% !important;
-}
-
-.magicfeedback-rating-number-top-placeholder,
-.magicfeedback-rating-number-bottom-placeholder{
-    text-align: center !important;
-    align-content: center;
-    justify-content: center;
-    text-wrap: wrap;
-
-    font-size: 15px;
-    color: #475569;
-
-    width: 100%;
-    margin: auto;
-}
-
-@media (min-width: 650px) {
-    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-ltr:first-child,
-    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-rtl:last-child {
-        margin-left: 0;
-        width: calc(100% - 10px);
-    }
-
-    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-rtl:first-child,
-    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-ltr:last-child {
-        margin-right: 0;
-        width: calc(100% - 10px);
-    }
-}
-
-
-.magicfeedback-rating-number-option-label-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-}
-
-.magicfeedback-rating-number-option-label-container label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin: 0 10px;
-    font-weight: 600;
-    font-size: 14px;
-    color: #475569;
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    min-height: 50px;
-    text-align: center;
-    padding: 0;
-    border-radius: 4px;
-    border: 1px solid #ced4da;
-    background-color: rgba(246, 246, 246, 0.3);
-    transition: background-color 0.15s ease-in-out;
-}
-
-.magicfeedback-rating-number-option-label-container input[type=radio] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.magicfeedback-rating-number-option-label-container input[type=radio] + label {
-    cursor: pointer;
-}
-
-.magicfeedback-rating-number-option-label-container input[type=radio] + label:hover,
-.magicfeedback-rating-number-option-label-container input[type=radio]:checked + label {
-    color: #007bff;
-    border: 1px solid #007bff;
-    background-color: rgba(86, 168, 253, 0.29);
-}
-
-.magicfeedback-rating-number-container-column{
-    align-items: flex-start !important;
-}
-
-@media (max-width: 650px) {
-    .magicfeedback-rating-number-container-ltr {
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .magicfeedback-rating-number-container-rtl {
-        justify-content: center;
-        flex-wrap: wrap-reverse;
-    }
-
-    .magicfeedback-rating-number-option {
-        max-width: 100%;
-        height: 55px;
-        margin: 5px 0;
-    }
-}
-
-.magicfeedback-rating-star {
-    width: 100%;
-}
-
-.magicfeedback-rating-star-container {
-    display: flex !important;
-    flex-direction: row !important;
-    justify-content: center !important;
-    align-items: center !important;
-    flex-wrap: wrap;
-    margin: 15px 5px;
-    padding: 0;
-    list-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-}
-
-.magicfeedback-rating-star-option:not(:checked) > .rating__star {
-    float: right;
-    width: 1em;
-    overflow: hidden;
-    white-space: nowrap;
-    cursor: pointer;
-    font-size: 30px;
-    color: #ccc;
-    margin: 0 10px;
-}
-
-.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
-.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
-    color: #deb217 !important;
-}
-
-.magicfeedback-rating-star-selected {
-    color: #ffc700 !important;
-}
-
-
-/* Style for multiple choice image */
-.magicfeedback-image-option-label-container:hover {
-    cursor: pointer;
-    border: 0 !important;
-}
-
-.magicfeedback-image-option-label-container input[type=radio]:checked + img,
-.magicfeedback-image-option-label-container input[type=checkbox]:checked + img {
-    border: 1px solid #007bff !important;
-    box-shadow: 0 0 3px #007bff !important;
-}
-
-.magicfeedback-image-option-label-container input[type=radio] + img,
-.magicfeedback-image-option-label-container input[type=checkbox] + img {
-    border: 1px solid transparent !important;
-}
-
-.magicfeedback-image-option-label-container{
-    margin: 10px !important;
-    height: calc(100% - 20px) !important;
-    width: calc(100% - 20px) !important;
-}
-
-.magicfeedback-multiple-choice-image-option {
-    display: flex;
-    height: auto !important;
-    box-shadow: 0 0 3px #ccc;
-}
-
-.magicfeedback-multiple-choice-image-label {
-    font-size: 1rem;
-}
-
-.magicfeedback-consent-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 10px 0;
-    width: 100%;
-}
-
-.magicfeedback-consent-container label {
-    margin-left: 10px;
-}
-
-.magicfeedback-start-message-container {
-    /* ... add your start message container styles here ... */
-}
-
-.magicfeedback-success-message,
-.magicfeedback-info-message,
-.magicfeedback-start-message {
-    margin: 35px 5px;
-}
-
-.magicfeedback-success-message p,
-.magicfeedback-info-message p,
-.magicfeedback-start-message p {
-    font-style: normal;
-    text-align: start;
-    font-weight: 400;
-    font-size: 16px;
-    color: #475569;
-    line-height: 1.5;
-}
-
-.magicfeedback-success-message img,
-.magicfeedback-info-message img,
-.magicfeedback-start-message img {
-    width: 400px;
-    max-width: 80%;
-    height: auto;
-    margin: 10px auto;
-}
-
-.magicfeedback-counter,
-.magicfeedback-point-system-total {
-    margin: 10px 0 0 0 !important;
-    display: flex !important;
-    justify-content: right !important;
-    align-items: center !important;
-    width: 100%;
-}
-
-.magicfeedback-skip-container {
-    background-color: transparent !important;
-    border: 0 !important;
-    color: #999999FF !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    cursor: pointer !important;
-    font-size: 0.5em !important;
-    font-weight: 400 !important;
-    box-shadow: 0 0 0 !important;
-
-    &:hover {
-        color: #0066ff;
-    }
-}
-
-.magicfeedback-skip-container input[type=checkbox] {
-    border-color: #999999FF !important;
-    border: 0 !important;
-    cursor: pointer !important;
-
-}
-
-.magicfeedback-multi-question-matrix,
-.magicfeedback-point-system,
-.magicfeedback-priority-list {
-    width: 100% !important;
-}
-
-.magicfeedback-multi-question-matrix-container,
-.magicfeedback-point-system-container,
-.magicfeedback-priority-list-container {
-    width: 100% !important;
-    overflow-x: auto;
-}
-
-.magicfeedback-point-system-list,
-.magicfeedback-priority-list-list,
-.magicfeedback-multi-question-matrix-table {
-    width: 100% !important;
-    padding: 0 !important;
-    overflow-x: auto;
-}
-
-.magicfeedback-multi-question-matrix {
-    position: relative !important;
-}
-
-.magicfeedback-multi-question-matrix-container {
-    overflow: auto !important;
-    padding-bottom: 10px;
-}
-
-.magicfeedback-multi-question-matrix-label{
-    text-align: left !important;
-}
-.magicfeedback-priority-list-item {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 0 10px 10px;
-
-    border: 1px solid #ced4da;
-    border-radius: 5px;
-    margin: 10px 0 !important;
-}
-
-.magicfeedback-point-system-item {
-    height: 45px;
-    margin: 5px 0 !important;
-}
-
-.magicfeedback-point-system-item label,
-.magicfeedback-priority-list-item-label {
-    font-family: inherit;
-    font-size: 18px !important;
-    color: #212529;
-    text-align: start;
-    word-wrap: break-word;
-    white-space: normal;
-    padding: 0 10px 0 0;
-}
-
-.magicfeedback-point-system-input-container {
-    padding: 0 10px 0 0;
-    border-radius: 5px;
-    font-size: 14px;
-    border: 1px solid #ced4da;
-    height: 42px;
-    margin: auto 0;
-}
-
-.magicfeedback-multi-question-matrix-table thead {
-    margin-bottom: 20px;
-}
-
-.magicfeedback-multi-question-matrix-table th{
-    text-align: center;
-    font-weight: 400 !important;
-    font-size: 1rem !important;
-    padding: 0  10px !important;
-}
-
-.magicfeedback-multi-question-matrix-table th,
-.magicfeedback-multi-question-matrix-table td label,
-.magicfeedback-priority-list-arrow-up,
-.magicfeedback-priority-list-arrow-down {
-    font-style: normal !important;
-    font-weight: 400 !important;
-    font-size: 1rem !important;
-    color: #475569 !important;
-    cursor: pointer !important;
-    margin: 0 !important;
-    line-height: inherit;
-}
-
-.magicfeedback-multi-question-matrix-table tr {
-    align-items: center;
-    margin: 5px 0;
-}
-
-.magicfeedback-multi-question-matrix-row-tr{
-    border-radius: 5px;
-    margin: 10px 0 !important;
-}
-
-.magicfeedback-multi-question-matrix-row-tr:nth-child(odd) {
-    background-color: #f1f6f6; /* Light gray background for odd rows */
-}
-
-.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
-    background-color: #ffffff; /* White background for even rows */
-}
-
-.magicfeedback-multi-question-matrix-row-label {
-    text-align: left !important;
-}
-
-.magicfeedback-point-system-item span {
-    color: #475569 !important;
-}
-
-.magicfeedback-point-system-item input {
-    padding: 0;
-    margin: 0 !important;
-    width: auto !important;
-    min-width: 100px !important;
-    height: auto !important;
-    min-height: 42px;
-    cursor: pointer;
-    font-size: 14px;
-    text-align: center !important;
-}
-
-.magicfeedback-multi-question-matrix-table input {
-    margin: auto !important;
-    padding: 20px !important;
-    width: 100% !important;
-    height: 15px;
-    border: 1px solid #ced4da;
-    cursor: pointer;
-}
-
-.magicfeedback-image{
-    max-height: 400px !important;
-    height: auto !important;
-    max-width: 100% !important;
-    margin: 10px auto !important;
-}
-
-.magicfeedback-error{
-    margin-top: 5px;
-}`;
-  }
-});
-
 // src/ui/renderPopup.ts
 var renderPopup_exports = {};
 __export(renderPopup_exports, {
@@ -3763,6 +2901,16 @@ init_tracking_manager();
 
 // src/ui/surveyHtml.ts
 init_font();
+init_style();
+var POSITION_MAP = {
+  center: { justifyContent: "center", alignItems: "center", padding: "0", background: "rgba(0,0,0,0.5)" },
+  bottom: { justifyContent: "center", alignItems: "flex-end", padding: "16px", background: "transparent" },
+  "bottom-right": { justifyContent: "flex-end", alignItems: "flex-end", padding: "16px", background: "transparent" },
+  "bottom-left": { justifyContent: "flex-start", alignItems: "flex-end", padding: "16px", background: "transparent" },
+  top: { justifyContent: "center", alignItems: "flex-start", padding: "16px", background: "transparent" },
+  "top-right": { justifyContent: "flex-end", alignItems: "flex-start", padding: "16px", background: "transparent" },
+  "top-left": { justifyContent: "flex-start", alignItems: "flex-start", padding: "16px", background: "transparent" }
+};
 function buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
   const version = opts.version ?? "2.2.4";
@@ -3773,17 +2921,141 @@ function buildSurveyHtml(opts) {
   const metaJson = JSON.stringify(opts.metadata ?? []);
   const fontFaceCss = opts.font ? buildFontFaceCss(opts.font.family, opts.font.url) : "";
   const fontFamilyValue = opts.font ? buildFontFamilyValue(opts.font.family) : "-apple-system,system-ui,sans-serif";
+  const popupClass = opts.font?.family ? "deepdots-popup deepdots-has-font" : "deepdots-popup";
+  const isDark = opts.theme === "dark";
+  const popupBg = isDark ? "#1e1e1e" : "#fff";
+  const colorScheme = isDark ? "dark" : "light";
+  const textPrimary = isDark ? "#f0f0f0" : "#111";
+  const pos = POSITION_MAP[opts.position ?? "center"] ?? POSITION_MAP.center;
+  const backLabel = JSON.stringify(opts.actions?.back?.label ?? "Back");
+  const startLabel = JSON.stringify(opts.actions?.start?.label ?? "Start survey");
+  const completeLabel = JSON.stringify(opts.actions?.complete?.label ?? "Complete survey");
+  const submitLabel = JSON.stringify(opts.actions?.accept?.label ?? "Send");
   return `<!DOCTYPE html><html><head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-<meta name="color-scheme" content="light"/>
-<style>${fontFaceCss}html,body{margin:0;padding:0;background:transparent;font-family:${fontFamilyValue}}#mf{width:100%;box-sizing:border-box}#mf *{max-width:100%;box-sizing:border-box}</style>
+<meta name="color-scheme" content="${colorScheme}"/>
+<style>
+${style_default}
+${fontFaceCss}
+html,body{margin:0;padding:0;height:100%;font-family:${fontFamilyValue}}
+body{display:flex;justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:${pos.background};padding:${pos.padding};box-sizing:border-box}
+.deepdots-popup{position:relative;display:flex;flex-direction:column;justify-content:flex-start;background:${popupBg};color-scheme:${colorScheme};border-radius:8px;padding:24px;box-shadow:0 4px 6px rgba(0,0,0,0.1);max-width:600px;width:90%;min-height:200px;box-sizing:border-box}
+.deepdots-popup-header{display:flex;justify-content:flex-end;align-items:center;width:100%}
+#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}
+.deepdots-popup-container-content{display:flex;flex-direction:column;padding:0 20px 12px 20px;max-height:80vh;overflow:hidden;box-sizing:border-box}
+.deepdots-popup-main{display:flex;flex-direction:column;width:100%;max-height:80vh;overflow-y:auto;overflow-x:hidden;position:relative}
+#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}
+.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}
+.deepdots-popup-footer{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;width:100%;padding-top:16px}
+.dd-nav-btn{display:none;border:none;padding:12px 24px;border-radius:4px;cursor:pointer;font-size:14px;box-shadow:0 2px 4px rgba(0,0,0,0.1);align-items:center;justify-content:center;text-align:center}
+#dd-back{background:transparent;color:#333;border:1px solid #999}
+#dd-start,#dd-complete,#dd-submit{background:#1E293B;color:#fff;border:none}
+#dd-submit:disabled,#dd-start:disabled,#dd-back:disabled,#dd-complete:disabled{opacity:0.6;cursor:not-allowed}
+.mf-spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
+.mf-spinner-circle{width:28px;height:28px;border:3px solid #e0e6ed;border-top-color:#1E293B;border-radius:50%;animation:ddspin 0.9s linear infinite}
+@keyframes ddspin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
+@media (max-width:640px){
+  .deepdots-popup{width:calc(100% - 24px);max-width:calc(100% - 24px);border-radius:12px}
+  .deepdots-popup-footer{flex-direction:column-reverse;gap:12px}
+  .dd-nav-btn{width:100%}
+  .magicfeedback-checkbox-container,.magicfeedback-radio-container{margin:4px 0;padding:4px 8px}
+  .magicfeedback-checkbox label,.magicfeedback-radio-container label{font-size:15px}
+  .deepdots-popup input[type="radio"]{margin:6px 0 6px 8px}
+  .deepdots-popup input[type="checkbox"]{width:16px;height:16px}
+}
+</style>
 </head><body>
-<div id="mf"></div>
+<div class="${popupClass}" id="dd-popup">
+  <div class="deepdots-popup-header">
+    <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"/>
+      </svg>
+    </button>
+  </div>
+  <div class="deepdots-popup-container-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 id="mf"></div>
+      </div>
+      <div class="deepdots-error-hint" id="dd-error" role="alert" aria-live="polite"></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>
+      </div>
+    </div>
+  </div>
+</div>
 <script>
 (function(){
   function emit(s){ try{ if(window.ReactNativeWebView){ window.ReactNativeWebView.postMessage(s); } }catch(e){} }
   function emitJSON(n,p){ try{ emit(JSON.stringify({name:n,payload:p||{}})); }catch(e){} }
   window.DeepdotsClose = function(){ emitJSON('popup_close'); };
+
+  var popup=document.getElementById('dd-popup');
+  var main=document.getElementById('dd-main');
+  var footer=document.getElementById('dd-footer');
+  var spinner=document.getElementById('dd-spinner');
+  var formHost=document.getElementById('mf');
+  var errorHint=document.getElementById('dd-error');
+  var backBtn=document.getElementById('dd-back');
+  var startBtn=document.getElementById('dd-start');
+  var completeBtn=document.getElementById('dd-complete');
+  var submitBtn=document.getElementById('dd-submit');
+
+  backBtn.textContent=${backLabel};
+  startBtn.textContent=${startLabel};
+  completeBtn.textContent=${completeLabel};
+  submitBtn.textContent=${submitLabel};
+
+  document.getElementById('dd-close').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){ window.DeepdotsForm.startForm(); } };
+  completeBtn.onclick=function(){ emitJSON('popup_close'); };
+  var surveyCompletedEmitted=false;
+  submitBtn.onclick=function(){
+    if(surveyCompletedEmitted) return;
+    if(window.DeepdotsForm && window.DeepdotsForm.send){ window.DeepdotsForm.send(); }
+  };
+
+  function updateButtons(state){
+    backBtn.style.display='none';
+    startBtn.style.display='none';
+    submitBtn.style.display='none';
+    completeBtn.style.display='none';
+    backBtn.style.width='';
+    startBtn.style.width='';
+    submitBtn.style.width='';
+    completeBtn.style.width='';
+    if(state==='start'){
+      startBtn.style.display='inline-flex';
+      startBtn.style.width='100%';
+    } else if(state==='in_progress_first'){
+      submitBtn.style.display='inline-flex';
+    } else if(state==='in_progress_next'){
+      backBtn.style.display='inline-flex';
+      submitBtn.style.display='inline-flex';
+    } else if(state==='completed'){
+      completeBtn.style.display='inline-flex';
+      completeBtn.style.width='100%';
+    }
+  }
+
+  function setLoading(isLoading){
+    spinner.style.display=isLoading?'flex':'none';
+    if(!isLoading){ formHost.style.visibility='visible'; }
+    footer.style.display=isLoading?'none':'flex';
+    backBtn.disabled=isLoading; startBtn.disabled=isLoading; completeBtn.disabled=isLoading; submitBtn.disabled=isLoading;
+    if(isLoading){ updateButtons(null); }
+  }
+  setLoading(true);
+
   var initialized=false;
   function initMF(){
     if(initialized || !window.magicfeedback) return initialized;
@@ -3792,23 +3064,85 @@ function buildSurveyHtml(opts) {
       window.magicfeedback.init({ debug:false, env:'${env}' });
       var form = window.magicfeedback.form(${sid}, ${pid}, ${profileJson}, ${metaJson});
       window.DeepdotsForm = form;
+      var stylesInjected=false;
       form.generate('mf', {
         addButton:false,
         getMetaData:true,
-        onLoadedEvent:function(){ emitJSON('loaded'); },
-        beforeSubmitEvent:function(){ emitJSON('before_submit'); },
+        onLoadedEvent:function(args){
+          var s=args && args.formData ? args.formData.style : null;
+          if(s && !stylesInjected){
+            stylesInjected=true;
+            if(s.boxBackgroundColor){ popup.style.background=s.boxBackgroundColor; }
+            if(s.contentAlign){ main.style.justifyContent = s.contentAlign==='center' ? 'center' : 'flex-start'; }
+            if(s.buttonPrimaryColor){
+              submitBtn.style.background=s.buttonPrimaryColor; submitBtn.style.border='none'; submitBtn.style.color='#fff';
+              startBtn.style.background=s.buttonPrimaryColor; startBtn.style.border='none'; startBtn.style.color='#fff';
+              completeBtn.style.background=s.buttonPrimaryColor; completeBtn.style.border='none'; completeBtn.style.color='#fff';
+            }
+            if(s.buttonSecondaryColor){
+              backBtn.style.background='#fff'; backBtn.style.color=s.buttonSecondaryColor; backBtn.style.border='1px solid '+s.buttonSecondaryColor;
+            }
+            if(s.logo && !document.getElementById('dd-logo')){
+              var logoImg=document.createElement('img');
+              logoImg.id='dd-logo'; logoImg.src=s.logo; logoImg.alt='Logo';
+              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'));
+            }
+            if(s.startMessage && s.startMessage!==''){ updateButtons('start'); }
+            else { updateButtons('in_progress_first'); }
+          } else {
+            updateButtons('in_progress_first');
+          }
+          emitJSON('loaded');
+          setLoading(false);
+        },
+        beforeSubmitEvent:function(){
+          setLoading(true);
+          emitJSON('before_submit');
+        },
         afterSubmitEvent:function(p){
-          try{ if(p && p.completed){ emitJSON('survey_completed', p); } else { emitJSON('after_submit', p); } }
-          catch(e){ emitJSON('after_submit'); }
+          var error=p && p.error ? (typeof p.error==='string' ? p.error : String(p.error)) : '';
+          if(error){
+            setLoading(false);
+            if(error.toLowerCase().indexOf('no response')!==-1){
+              errorHint.textContent='Please answer the required question to continue.';
+              errorHint.style.display='block';
+              updateButtons('in_progress_next');
+              return;
+            }
+            errorHint.textContent='An error occurred while submitting. Please try again or close the popup.';
+            errorHint.style.display='block';
+            return;
+          }
+          errorHint.style.display='none';
+          setLoading(false);
+          if(p && p.completed){
+            surveyCompletedEmitted=true;
+            updateButtons('completed');
+            emitJSON('survey_completed', p);
+            return;
+          }
+          if(p && p.total>1 && p.progress>0 && p.progress<p.total){ updateButtons('in_progress_next'); }
+          else { updateButtons('in_progress_first'); }
+          emitJSON('after_submit', p);
         },
-        onBackEvent:function(p){ emitJSON('back', p); }
-      }).catch(function(e){ emit('error:init'); });
-    }catch(e){ emit('error:exception'); }
+        onBackEvent:function(p){
+          if(p && p.progress===0){ updateButtons('in_progress_first'); }
+          else { updateButtons('in_progress_next'); }
+          emitJSON('back', p);
+        }
+      }).catch(function(e){ setLoading(false); emit('error:init'); });
+    }catch(e){ setLoading(false); emit('error:exception'); }
     return true;
   }
   var s=document.createElement('script'); s.src=${JSON.stringify(cdn)}; s.async=true;
   s.onload=function(){ initMF(); };
-  s.onerror=function(){ emit('error:load'); };
+  s.onerror=function(){ setLoading(false); emit('error:load'); };
   document.head.appendChild(s);
   var tries=0, t=setInterval(function(){ if(initMF()||++tries>40){ clearInterval(t); } },150);
 })();
@@ -3828,18 +3162,28 @@ var ReactNativePopupRenderer = class {
   }
   init() {
   }
-  show(surveyId, productId, _actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
+  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
     this.emitFn = emit;
     this.onCloseFn = onClose;
     this.currentSurveyId = surveyId;
     this.partialEmitted = false;
     const { profile, metadata } = buildSurveyIdentity(userId ?? null, sessionId ?? null, miniService ?? null, analyticsFeedbackSessionId ?? null);
-    const html = buildSurveyHtml({ surveyId, productId, env, profile, metadata, font: style?.font });
+    const html = buildSurveyHtml({
+      surveyId,
+      productId,
+      env,
+      profile,
+      metadata,
+      font: style?.font,
+      theme: style?.theme,
+      position: style?.position,
+      actions
+    });
     if (this.options.onShow) {
       this.options.onShow({ surveyId, productId, html });
     } else {
       sdkWarn(
-        "[Deepdots] ReactNativePopupRenderer sin onShow: pasa { onShow } a new ReactNativePopupRenderer({...}) para montar el WebView del survey."
+        "[Deepdots] ReactNativePopupRenderer has no onShow: pass { onShow } to new ReactNativePopupRenderer({...}) to mount the survey WebView."
       );
     }
   }
@@ -3957,7 +3301,7 @@ init_tracking_manager();
 // src/analytics/analytics-manager.ts
 function createDryRunSink(log = console.log) {
   return (payload) => log(
-    "[DeepdotsAnalytics] (dry-run \xB7 NO enviado \xB7 sin init.analytics) POST /sdk/feedback \u2192",
+    "[DeepdotsAnalytics] (dry-run \xB7 NOT sent \xB7 no init.analytics) POST /sdk/feedback \u2192",
     JSON.stringify(payload, null, 2)
   );
 }
@@ -4199,14 +3543,14 @@ function createFeedbackSink(options) {
     if (final && options.sendBeaconImpl && small) {
       const payload = typeof Blob !== "undefined" ? new Blob([json], { type: "application/json" }) : json;
       if (options.sendBeaconImpl(url, payload)) {
-        options.log?.("[DeepdotsAnalytics] flush final v\xEDa sendBeacon");
+        options.log?.("[DeepdotsAnalytics] final flush via sendBeacon");
         return;
       }
-      options.log?.("[DeepdotsAnalytics] sendBeacon rechaz\xF3 el lote; fallback a fetch");
+      options.log?.("[DeepdotsAnalytics] sendBeacon rejected the batch; falling back to fetch");
     }
     const f = options.fetchImpl ?? (typeof fetch !== "undefined" ? fetch : void 0);
     if (!f) {
-      options.log?.("[DeepdotsAnalytics] no fetch disponible; payload no enviado", body);
+      options.log?.("[DeepdotsAnalytics] no fetch available; payload not sent", body);
       return;
     }
     const res = await f(url, {
@@ -4219,10 +3563,10 @@ function createFeedbackSink(options) {
     if (!res.ok) {
       const detail = await safeBodyText(res);
       if (isRetryableStatus(res.status)) {
-        throw new Error(`POST /sdk/feedback ${res.status} (reintentable): ${detail}`);
+        throw new Error(`POST /sdk/feedback ${res.status} (retryable): ${detail}`);
       }
       options.log?.(
-        `[DeepdotsAnalytics] POST /sdk/feedback rechazado con ${res.status}; lote DESCARTADO:`,
+        `[DeepdotsAnalytics] POST /sdk/feedback rejected with ${res.status}; batch DISCARDED:`,
         detail
       );
       return;
@@ -4232,7 +3576,7 @@ function createFeedbackSink(options) {
       const data = await res.json();
       if (data?.sessionId && data.sessionId !== feedbackSessionId) {
         feedbackSessionId = data.sessionId;
-        options.log?.("[DeepdotsAnalytics] feedbackSessionId cacheado:", feedbackSessionId);
+        options.log?.("[DeepdotsAnalytics] feedbackSessionId cached:", feedbackSessionId);
         options.onSessionId?.(feedbackSessionId);
       }
     } catch {
@@ -4716,7 +4060,7 @@ var MessageGuard = class {
       return {
         emit: false,
         reason: "invalid_channel",
-        detail: `channel "${channel}" no v\xE1lido (esperado ${MESSAGE_CHANNELS.join(" | ")})`
+        detail: `invalid channel "${channel}" (expected ${MESSAGE_CHANNELS.join(" | ")})`
       };
     }
     const entry = this.seen.get(options.id);
@@ -4728,14 +4072,14 @@ var MessageGuard = class {
       return {
         emit: false,
         reason: "channel_conflict",
-        detail: `message_id "${options.id}" ya se report\xF3 en channel "${entry.channel}"; se descarta "${channel}"`
+        detail: `message_id "${options.id}" was already reported on channel "${entry.channel}"; discarding "${channel}"`
       };
     }
     if (entry.stages.has(stage)) {
       return {
         emit: false,
         reason: "duplicate_stage",
-        detail: `stage "${stage}" ya emitido para message_id "${options.id}"`
+        detail: `stage "${stage}" was already sent for message_id "${options.id}"`
       };
     }
     entry.stages.add(stage);
@@ -5029,7 +4373,7 @@ var DeepdotsPopups = class {
   trackMessage(stage, options) {
     const verdict = this.messageGuard.evaluate(stage, options);
     if (!verdict.emit) {
-      console.warn(`[DeepdotsPopups] trackMessage descartado (${verdict.reason}): ${verdict.detail}`);
+      console.warn(`[DeepdotsPopups] trackMessage discarded (${verdict.reason}): ${verdict.detail}`);
       return;
     }
     this.track("deepdots_message", buildMessageParams(stage, options));