/**
 * UTM Order Display Helper
 * Displays order details in success modals using real API response structure.
 *
 * Real API response from GET /orders/{id}:
 * {
 *   id: string, publicId: string, status: string,
 *   clientDetails: { email, firstName, lastName },
 *   itemGroups: [{
 *     id: string,
 *     productType: "DIGITAL"|"PHYSICAL",
 *     shipmentDetails: {
 *       strategyName: string,
 *       strategyPayload: {},
 *       execution: { status: string, strategyPayload: { messageId? } | { trackingNumber? } }
 *     },
 *     items: [{ id, name, units: [{ id, payload: {} }] }]
 *   }]
 * }
 */
(function () {
    "use strict";

    // Fill every element matching `selector` inside `root`. Webflow may duplicate fields
    // across collapsed accordions / instruction blocks — querySelector would only hit the first.
    function fillAll(root, selector, value) {
        if (!root) return;
        var nodes = root.querySelectorAll(selector);
        for (var i = 0; i < nodes.length; i++) {
            nodes[i].textContent = value;
        }
    }

    var OrderDisplay = {
        /**
         * Populate eSIM success modal with order details
         * @param {Object} orderDetails - Full order details from GET /orders/{id}/result
         * @param {string} simType - SIM type from UTM.orderState.simType
         */
        displayESIMSuccess: function(orderDetails, simType) {

            var modal = document.querySelector("#modal-success-esim");
            if (!modal) {
                return;
            }

            var client = orderDetails.clientDetails || {};
            var itemGroup = (orderDetails.itemGroups || [])[0] || {};
            var shipmentDetails = itemGroup.shipmentDetails || {};
            var executionPayload = (shipmentDetails.execution || {}).strategyPayload || {};

            // Message ID from CORE_EMAIL delivery execution
            var messageId = executionPayload.messageId || "";

            // Order public ID or internal ID
            var orderId = orderDetails.publicId || orderDetails.id || "";

            // Client info
            var fullName = [client.firstName, client.lastName].filter(Boolean).join(" ");

            // Units payload — eSIM data (QR, activation code, etc.)
            var item = ((itemGroup.items || [])[0]) || {};
            var unit = ((item.units || [])[0]) || {};
            var unitPayload = unit.payload || [];


            // Extract values from unitPayload array [{type, key, value}]
            var qrData = null;
            var phoneNumber = "";
            var pin1 = "";
            var pin2 = "";
            var puk1 = "";
            var puk2 = "";
            var iccid = "";

            if (Array.isArray(unitPayload)) {
                unitPayload.forEach(function(p) {
                    if (!p) return;
                    switch (p.key) {
                        case "QR_CODE":      qrData = p.value || null; break;
                        case "PHONE_NUMBER": phoneNumber = p.value || ""; break;
                        case "PIN1":         pin1 = p.value || ""; break;
                        case "PIN2":         pin2 = p.value || ""; break;
                        case "PUK1":         puk1 = p.value || ""; break;
                        case "PUK2":         puk2 = p.value || ""; break;
                        case "ICCID":        iccid = p.value || ""; break;
                    }
                });
            }

            // Fill modal fields — fillAll handles duplicated bindings (same class in accordion + instructions).
            fillAll(modal, ".modal-esim_name", fullName);
            fillAll(modal, ".modal-esim_email", client.email || "");
            fillAll(modal, ".modal-esim_order-id, .order-id", orderId);
            // messageId — confirmation that email was sent
            fillAll(modal, ".modal-esim_message-id, .esim-message-id", messageId);

            // SIM data fields (clear placeholders and set real values)
            fillAll(modal, ".modal-esim_number", phoneNumber);
            fillAll(modal, ".modal-esim_pin1",   pin1);
            fillAll(modal, ".modal-esim_pin2",   pin2);
            fillAll(modal, ".modal-esim_puk1",   puk1);
            fillAll(modal, ".modal-esim_puk2",   puk2);
            fillAll(modal, ".modal-esim_iccid",  iccid);

            // Plan / price / type — from API response
            fillAll(modal, ".modal-esim_plan", item.name || "");

            if (orderDetails.totalPrice != null) {
                fillAll(modal, ".modal-esim_price",
                    String(orderDetails.totalPrice).replace(/\.0+$/, "") + " ₴");
            }

            var t = (simType || "").toLowerCase();
            var isPlasticType = t.indexOf("plastic") !== -1 ||
                                t.indexOf("new") !== -1 ||
                                t.indexOf("нова") !== -1;
            fillAll(modal, ".modal-esim_type-of-card, .modal-esim_type",
                isPlasticType ? "Пластикова SIM" : "eSIM");

            // Wire up the install-eSIM button — OS-aware install URL.
            // iOS opens Settings via Apple's universal-link wrapper.
            // Android 13+ (Pixel) and One UI 5+ (Samsung) handle LPA: URIs natively.
            // Desktop has no native eSIM activation → button hidden, user scans the QR.
            var ua = navigator.userAgent || "";
            var isIOS = /iPad|iPhone|iPod/.test(ua) ||
                        (ua.indexOf("Mac") !== -1 && navigator.maxTouchPoints > 1);
            var isAndroid = /Android/i.test(ua);

            var installUrl = "";
            if (qrData) {
                if (isIOS) {
                    installUrl = "https://esimsetup.apple.com/esim_qrcode_provisioning?carddata=" + encodeURIComponent(qrData);
                } else if (isAndroid) {
                    // qrData arrives as LPA:1$<SMDP+>$<activation_code> — pass as-is.
                    installUrl = qrData;
                }
            }

            var installBtn = modal.querySelector("#install-esim");
            if (installBtn && installUrl) {
                installBtn.href = installUrl;
                // Android LPA: URI must NOT open in a new tab — needs same-frame navigation
                // for Settings intent to fire. Apple universal links work in either mode,
                // but keep them in new tab to preserve the success modal.
                if (isAndroid) {
                    installBtn.removeAttribute("target");
                    installBtn.removeAttribute("rel");
                } else {
                    installBtn.target = "_blank";
                    installBtn.rel = "noopener noreferrer";
                }
                installBtn.style.display = "";
            } else if (installBtn) {
                installBtn.style.display = "none";
            }

            // #guideLink lives inside the iOS guide block. Even on Android/desktop the user
            // may read the instruction here and tap the link from their iPhone — so it must always
            // resolve to the Apple universal link, regardless of the current device.
            var appleInstallUrl = qrData
                ? "https://esimsetup.apple.com/esim_qrcode_provisioning?carddata=" + encodeURIComponent(qrData)
                : "";
            var guideLink = modal.querySelector("#guideLink");
            if (guideLink && appleInstallUrl) {
                guideLink.href = appleInstallUrl;
                guideLink.target = "_blank";
                guideLink.rel = "noopener noreferrer";
            }

            // Generate QR code
            if (qrData) {
                var qrContainer = modal.querySelector("#esim-qr-container");
                if (qrContainer) {
                    qrContainer.innerHTML = "";
                    if (typeof QRCodeStyling !== "undefined") {
                        var qrCode = new QRCodeStyling({
                            width: 300,
                            height: 300,
                            type: "svg",
                            data: qrData,
                            margin: 10,
                            qrOptions: { errorCorrectionLevel: "M" },
                            dotsOptions: { color: "#000000", type: "square" },
                            cornersSquareOptions: { color: "#000000", type: "square" },
                            cornersDotOptions: { color: "#000000", type: "square" },
                            backgroundOptions: { color: "#ffffff" },
                            image: null
                        });
                        qrCode.append(qrContainer);
                    } else {
                    }
                } else {
                }
            }
        },

        /**
         * Populate Plastic SIM success modal with order details.
         *
         * Callable with `orderDetails = null` — in that case the modal is populated from
         * UTM.orderState.pendingSnapshot only. The caller typically paints with snapshot
         * first (for instant feedback after PAID), then re-calls with the API response
         * once /orders/{id} resolves.
         *
         * The Plastic success modal shares the .modal-esim_table-row layout with the
         * pre-payment summary in modals.js — fields are matched by their .modal-esim_table-label
         * text, mirroring updateSummary().
         *
         * @param {Object|null} orderDetails - GET /orders/{id} response, or null
         * @param {string} simType - SIM type from UTM.orderState.simType
         */
        displayPlasticSuccess: function(orderDetails, simType) {
            var modal = document.querySelector("#modal-plastic");
            if (!modal) return;

            // Webflow templates have used both class names for this step:
            //   - .modal-success            (older)
            //   - .is--payment-success      (current, used by modalApi.open's isPaid branch)
            // Try current first so we never miss the rendered step on production.
            var successStep = modal.querySelector(".is--payment-success.is-active")
                || modal.querySelector(".modal-success.is-active")
                || modal.querySelector(".is--payment-success")
                || modal.querySelector(".modal-success")
                || modal;
            if (!successStep) return;

            var snap = (window.UTM && window.UTM.orderState && window.UTM.orderState.pendingSnapshot) || {};
            var details = orderDetails || {};
            var client = details.clientDetails || {};
            var itemGroup = (details.itemGroups || [])[0] || {};
            var shipmentDetails = itemGroup.shipmentDetails || {};
            var executionPayload = (shipmentDetails.execution || {}).strategyPayload || {};
            var item = ((itemGroup.items || [])[0]) || {};

            var fullName = [client.firstName || snap.firstName, client.lastName || snap.lastName]
                .filter(Boolean).join(" ");
            var email   = client.email || snap.email || "";
            var orderId = details.publicId || details.id || "";
            var trackingNumber = executionPayload.trackingNumber || "";
            var planName = item.name || snap.planName || "";

            var rawPrice = (details.totalPrice != null) ? details.totalPrice : snap.planPrice;
            var priceStr = (rawPrice != null && rawPrice !== "")
                ? String(rawPrice).replace(/\.0+$/, "") + " ₴"
                : "";

            // Delivery: prefer API strategy, fall back to snapshot.deliveryType (pickup/courier).
            var strategyName = shipmentDetails.strategyName ||
                (snap.deliveryType === "pickup"  ? "NOVA_POST_BRANCH"  :
                 snap.deliveryType === "courier" ? "NOVA_POST_COURIER" : "");
            var deliveryLabel = this.translateDeliveryType(strategyName);

            // The API's strategyPayload contains branchId (opaque) or the address string
            // we sent. For pickup we prefer the snapshot's human-readable branchName.
            var addressFromApi = (shipmentDetails.strategyPayload || {}).address || "";
            var addressLine = (strategyName === "NOVA_POST_BRANCH")
                ? (snap.branchName || "")
                : (snap.address || addressFromApi || "");

            // 1. Standard selectors (some Webflow templates use these directly).
            fillAll(successStep, ".modal-esim_name, .order-name",         fullName);
            fillAll(successStep, ".modal-esim_email, .order-email",       email);
            fillAll(successStep, ".order-number, .modal-esim_order-id",   orderId);
            fillAll(successStep, ".order-tracking, .tracking-number",     trackingNumber);
            fillAll(successStep, ".order-delivery-type",                  deliveryLabel);
            fillAll(successStep, ".modal-esim_plan",                      planName);
            if (priceStr) fillAll(successStep, ".modal-esim_price",       priceStr);
            fillAll(successStep, ".modal-esim_type, .modal-esim_type-of-card", "Пластикова SIM");

            // 2. Webflow summary-table rows. Layout is .modal-esim_table-row with a label
            //    (.modal-esim_table-label) and a value cell (.modal-esim_table-item[1]).
            //    Match the same label keywords updateSummary() uses to stay in sync.
            var rows = successStep.querySelectorAll(".modal-esim_table-row");
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                var labelEl = row.querySelector(".modal-esim_table-label");
                var label = (labelEl && labelEl.textContent || "").trim();
                var items = row.querySelectorAll(".modal-esim_table-item");
                var valCell = (items[1] && items[1].querySelector("div")) || items[1];
                if (!valCell) continue;

                if (label.includes("Замовник") || label.includes("Заказчик")) {
                    valCell.textContent = fullName;
                } else if (label.includes("Електронна") || label.includes("Email") || label.includes("E-mail") || label.includes("пошта")) {
                    valCell.textContent = email;
                } else if (label.includes("Тариф") || label.includes("План")) {
                    valCell.textContent = planName;
                } else if (label.includes("Тип SIM") || label.includes("Тип сим")) {
                    valCell.textContent = "Пластикова SIM";
                } else if (label.includes("Місто") || label.includes("Город")) {
                    valCell.textContent = snap.cityName || "";
                } else if (label.includes("Доставка") || label.includes("Способ")) {
                    valCell.textContent = deliveryLabel;
                } else if (label.includes("Адреса") || label.includes("Адрес")) {
                    valCell.textContent = addressLine;
                    row.style.display = addressLine ? "" : "none";
                } else if (label.includes("відділення") || label.includes("Отделение")) {
                    valCell.textContent = snap.branchName || "";
                    row.style.display = snap.branchName ? "" : "none";
                } else if (label.includes("Загальна") || label.includes("вартість") || label.includes("Общая") || label.includes("стоимость")) {
                    if (priceStr) valCell.textContent = priceStr;
                } else if (label.includes("Номер замовлення") || label.includes("Номер заказа")) {
                    valCell.textContent = orderId;
                } else if (label.includes("ТТН") || label.includes("Tracking") || label.includes("Трекінг")) {
                    valCell.textContent = trackingNumber;
                    row.style.display = trackingNumber ? "" : "none";
                }
            }
        },

        /**
         * Main entry point — called from showOrderSuccess in modals.
         * @param {Object} orderDetails - Full order details from GET /orders/{id}/result
         * @param {string} simType - SIM type from UTM.orderState.simType (passed explicitly)
         */
        displayOrderSuccess: function(orderDetails, simType) {
            if (!orderDetails) {
                return;
            }

            var sType = (simType || "").toLowerCase();
            var isPlastic = sType.includes("plastic") ||
                            sType.includes("new") ||
                            sType.includes("нова") ||
                            sType === "p";

            if (isPlastic) {
                this.displayPlasticSuccess(orderDetails, simType);
            } else {
                // Default to eSIM for "esim" or any unknown type
                this.displayESIMSuccess(orderDetails, simType);
            }
        },

        /**
         * Translate delivery strategy name to Ukrainian
         * @param {string} strategyName - API strategyName: EMAIL | NOVA_POST_BRANCH | NOVA_POST_COURIER
         * @returns {string}
         */
        translateDeliveryType: function(strategyName) {
            if (!strategyName) return "";

            var translations = {
                "CORE_EMAIL":         "Електронна пошта",
                "EMAIL":              "Електронна пошта",
                "NOVA_POST_BRANCH":   "Самовивіз з Нової Пошти",
                "NOVA_POST_COURIER":  "Кур'єрська доставка Нової Пошти",
                // legacy UI values (used in modals updateSummary)
                "pickup":             "Самовивіз з Нової Пошти",
                "courier":            "Кур'єрська доставка Нової Пошти",
                "branch":             "Самовивіз з Нової Пошти",
                "email":              "Електронна пошта"
            };

            return translations[strategyName] || strategyName;
        }
    };

    // Export to global UTM namespace
    window.UTM = window.UTM || {};
    window.UTM.OrderDisplay = OrderDisplay;


})();
/**
 * UTM Order API Module
 * Handles order creation, payment flow, and SSE status tracking
 */
(function () {
    "use strict";

    // ============================================
    // Configuration & Setup
    // ============================================
    function getApiBase() {
        if (typeof window !== 'undefined' && window.CONFIG && window.CONFIG.API_BASE) {
            return window.CONFIG.API_BASE;
        }
        if (typeof CONFIG !== 'undefined' && CONFIG.API_BASE) {
            return CONFIG.API_BASE;
        }
        return "https://api.utm.net.ua";
    }

    // ============================================
    // UUID v4 Generator
    // ============================================
    function generateUUID() {
        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
            return crypto.randomUUID();
        }
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0;
            var v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

    // ============================================
    // ============================================
    // Error Code → Ukrainian Message Mapping
    // ============================================
    // Actual error codes from API docs
    var ERROR_CODE_MAP = {
        "VALIDATION":                          "Помилка валідації даних.",
        "TOO_MANY_REQUESTS":                   "Ви робите забагато запитів. Спробуйте трохи пізніше.",
        "INTERNAL_SERVER_ERROR":               "Внутрішня помилка сервера. Спробуйте ще раз.",
        "ORDERS_ORDER_NOT_FOUND":              "Замовлення не знайдено.",
        "ORDERS_ORDER_PRODUCT_NOT_FOUND":      "Обраний тариф не знайдено.",
        "ORDERS_ORDER_ITEM_UNAVAILABLE":       "Товар тимчасово недоступний у вказаній кількості.",
        "ORDERS_ORDER_RESULT_EXPIRED":         "Термін доступності результату замовлення вичерпано.",
        // SSE internal
        "SSE_PARSE_ERROR":                     "Помилка зв'язку з сервером."
    };

    function mapErrorCode(code) {
        return (code && ERROR_CODE_MAP[code]) || null;
    }

    // ============================================
    // Product SKU Mapping
    // ============================================
    var PRODUCT_SKU_MAP = {
        // eSIM variants
        "eSIM_M":         "SIM_ESI_INT_M",
        "eSIM_UNLIMITED":  "SIM_ESI_INT_UNL",
        "eSIM_YEARLY":    "SIM_ESI_ANN",

        // Plastic SIM variants
        "Plastic_M":        "SIM_PLA_INT_M",
        "Plastic_UNLIMITED": "SIM_PLA_INT_UNL",
        "Plastic_YEARLY":   "SIM_PLA_ANN"
    };

    /**
     * Get product variant SKU based on simType and tariff plan
     */
    function getProductVariantSku(simType, tariffPlan) {
        var normalizedSimType = (simType || "eSIM").toLowerCase().includes("esim") ? "eSIM" : "Plastic";

        var planType = "M"; // default
        if (tariffPlan) {
            var plan = tariffPlan.toLowerCase();
            if (plan.includes("безлім") || plan.includes("unlimited")) {
                planType = "UNLIMITED";
            } else if (plan.includes("річн") || plan.includes("yearly") || plan.includes("year")) {
                planType = "YEARLY";
            } else {
                planType = "M";
            }
        }

        var sku = normalizedSimType + "_" + planType;
        return PRODUCT_SKU_MAP[sku] || "SIM_ESI_INT_M"; // fallback
    }

    // ============================================
    // Order State Management
    // ============================================
    var OrderAPI = {
        eventSource: null,

        /**
         * Create a new SIM order
         * @param {Object} orderData - Order data from the form
         * @returns {Promise<Object>} - Response with payment link
         */
        createOrder: async function (orderData) {

            // Generate unique order ID on frontend
            var generatedId = generateUUID();

            // Determine product variant SKU
            var productVariantSku = getProductVariantSku(
                orderData.simType,
                orderData.tariffPlan
            );


            var isESIM = (orderData.simType || "").toLowerCase().includes("esim");
            var phoneNumber = orderData.phone ? "+" + orderData.phone : "";

            // Build request body according to API spec.
            // API requires phoneNumber inside clientDetails (Validation:
            // "clientDetails.phoneNumber should not be empty"). The Nova Post
            // strategies still expect a copy inside strategyPayload below — leaving
            // it only there triggers an API VALIDATION error.
            var requestBody = {
                generatedId: generatedId,
                productVariantSku: productVariantSku,

                clientDetails: {
                    firstName:   orderData.firstName || "",
                    lastName:    orderData.lastName  || "",
                    email:       orderData.email     || "",
                    phoneNumber: phoneNumber
                },

                meta: orderData.promocode ? { promocode: orderData.promocode } : {},

                // Shipment details (filled below based on SIM type)
                shipmentDetails: null
            };

            if (isESIM) {
                // eSIM delivered via email — no payload needed
                requestBody.shipmentDetails = {
                    strategyName: "CORE_EMAIL",
                    strategyPayload: {}
                };
            } else if (orderData.delivery) {
                // Plastic SIM — Nova Post delivery
                var delivery = orderData.delivery;

                if (delivery.type === "courier") {
                    requestBody.shipmentDetails = {
                        strategyName: "NOVA_POST_COURIER",
                        strategyPayload: {
                            phoneNumber: phoneNumber,
                            cityId: delivery.cityId || "",
                            streetId: delivery.streetId || "",
                            house: delivery.house || ""
                        }
                    };
                } else if (delivery.type === "pickup") {
                    requestBody.shipmentDetails = {
                        strategyName: "NOVA_POST_BRANCH",
                        strategyPayload: {
                            phoneNumber: phoneNumber,
                            branchId: delivery.branchId || ""
                        }
                    };
                }
            }


            try {
                var response = await fetch(getApiBase() + "/orders/sims", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify(requestBody)
                });

                if (!response.ok) {
                    // Rate limiting — show user-friendly Ukrainian message
                    if (response.status === 429) {
                        var rateLimitError = new Error("Ви робите забагато запитів. Спробуйте трохи пізніше.");
                        rateLimitError.status = 429;
                        rateLimitError.title = "Забагато запитів";
                        rateLimitError.details = {};
                        rateLimitError.validationErrors = [];
                        throw rateLimitError;
                    }

                    var errorData = await response.json().catch(function() {
                        return { message: "Помилка створення замовлення" };
                    });

                    // Validation errors structure: payload.fields[{name, code, message}]
                    var validationFields = (errorData.payload && errorData.payload.fields) || [];

                    var errorCode = errorData.code || null;
                    var mappedMsg = mapErrorCode(errorCode);
                    var error = new Error(mappedMsg || errorData.message || "Помилка створення замовлення: " + response.status);
                    error.status = response.status;
                    error.code = errorCode;
                    error.title = errorData.title || null;
                    error.details = errorData;
                    error.validationErrors = validationFields; // [{name, code, message}]
                    throw error;
                }

                var data = await response.json();

                // Attach generatedId so processOrder can use it for /status and /result
                data.generatedId = generatedId;
                return data;

            } catch (error) {
                // ✅ FIX #7: Preserve error details for UI display
                if (!error.status) {
                    error.status = 0; // Network error
                    error.details = { message: error.message };
                    error.validationErrors = [];
                }
                throw error;
            }
        },

        /**
         * Start listening to order status via SSE
         * @param {string} orderId - The order ID from API response
         * @param {Function} onStatusChange - Callback for status updates
         * @param {Object} [options]
         * @param {number} [options.timeoutMs=90000] - No-progress timeout: if no terminal status arrives in this window, emit {status:"TIMEOUT"}.
         */
        startStatusListener: function (orderId, onStatusChange, options) {

            var self = this;
            var timeoutMs = (options && typeof options.timeoutMs === "number") ? options.timeoutMs : 90000;
            var timeoutTimer = null;

            function clearProgressTimer() {
                if (timeoutTimer) {
                    clearTimeout(timeoutTimer);
                    timeoutTimer = null;
                }
            }

            function stopListening() {
                clearProgressTimer();
                if (self.eventSource) {
                    self.eventSource.close();
                    self.eventSource = null;
                }
            }

            var url = getApiBase() + "/orders/" + orderId + "/status";

            self.eventSource = new EventSource(url);

            // Start no-progress timer immediately. Cancelled on terminal status (SENT/COMPLETED/FAILED)
            // or when caller calls stopListening. Fires once if backend goes silent (e.g. payment
            // provider webhook broken — saw this with City24).
            timeoutTimer = setTimeout(function () {
                stopListening();
                if (onStatusChange) onStatusChange({
                    status: "TIMEOUT",
                    code: "TIMEOUT",
                    message: "Дякую за замовлення. Ваш платіж ще в обробці, згодом ви отримаєте деталі на вказаний Email."
                });
            }, timeoutMs);

            self.eventSource.onmessage = function (event) {
                try {
                    var eventData = JSON.parse(event.data);
                    // Cancel no-progress timer once a terminal status arrives.
                    var status = eventData.status || eventData.type;
                    if (status === "SENT" || status === "COMPLETED" || status === "FAILED") {
                        clearProgressTimer();
                    }
                    if (onStatusChange) onStatusChange(eventData);
                } catch (e) {
                    // Non-JSON message from server (e.g. "Validation failed.")
                    var raw = (event.data || "").trim();
                    stopListening();
                    if (onStatusChange) onStatusChange({ status: "FAILED", code: "VALIDATION", message: "Помилка валідації даних. Перевірте правильність введених даних." });
                }
            };

            self.eventSource.onerror = function (error) {
                stopListening();

                var raw = (error && error.data) ? (error.data + "").trim() : null;
                var errorPayload = null;
                if (raw) { try { errorPayload = JSON.parse(raw); } catch (e) { /* plain text */ } }

                var code    = (errorPayload && errorPayload.code)    || null;
                var message = (errorPayload && errorPayload.message) || null;

                if (!message) {
                    if (!raw) {
                        message = "Не вдалося відстежити статус замовлення. Перевірте email для підтвердження.";
                    } else if (raw === "Validation failed." || code === "VALIDATION") {
                        message = "Помилка валідації даних. Перевірте правильність введених даних.";
                        code = code || "VALIDATION";
                    } else {
                        message = raw;
                    }
                }

                if (onStatusChange) onStatusChange({ status: "FAILED", code: code || "SSE_ERROR", message: message });
            };

            return stopListening;
        },

        /**
         * Fetch order details
         * @param {string} orderId - The order ID
         * @returns {Promise<Object>} - Order details
         */
        getOrderDetails: async function (orderId) {

            try {
                var response = await fetch(getApiBase() + "/orders/" + orderId, {
                    method: "GET",
                    headers: {
                        "Content-Type": "application/json"
                    }
                });

                if (!response.ok) {
                    throw new Error("Не вдалося отримати деталі замовлення: " + response.status);
                }

                var data = await response.json();
                return data;

            } catch (error) {
                throw error;
            }
        },

        /**
         * Handle the complete order flow
         * @param {Object} orderData - Order data from form
         * @param {Object} callbacks - Callbacks for different events
         */
        processOrder: async function (orderData, callbacks) {
            var self = this;

            try {
                // 1. Create the order
                var orderResponse = await this.createOrder(orderData);

                if (callbacks.onOrderCreated) {
                    callbacks.onOrderCreated(orderResponse);
                }

                // Skip SSE if page is about to redirect to payment provider.
                // EventSource would error on unload and falsely trigger onError,
                // which clears the pending order from localStorage. SSE is
                // re-established by resumePendingOrder on return.
                if (orderResponse.paymentUrl) {
                    return;
                }

                // 2. Use generatedId (UUID) for /status and /result endpoints
                var orderId = orderResponse.generatedId;
                var stopListening = this.startStatusListener(
                    orderId, // API returns publicId
                    function (eventData) {
                        // Handle different event types
                        var eventType = eventData.status || eventData.type;


                        switch (eventType) {
                            case "PAID":
                                if (callbacks.onPaid) {
                                    // Pass stopListening so caller can stop SSE if PAID is the final event (e.g. plastic SIM)
                                    callbacks.onPaid(eventData, stopListening);
                                }
                                break;

                            case "SENT":
                            case "COMPLETED":
                                // Order has been sent/processed

                                // Stop SSE immediately to prevent reconnect loop
                                // (server closes connection after SENT which triggers onerror)
                                stopListening();

                                // Fetch full order details
                                self.getOrderDetails(orderId)
                                    .then(function (orderDetails) {
                                        if (callbacks.onSent) {
                                            callbacks.onSent(orderDetails);
                                        }
                                    })
                                    .catch(function (error) {
                                        if (callbacks.onError) {
                                            callbacks.onError(error);
                                        }
                                    });
                                break;

                            case "FAILED":
                            case "ERROR":
                                if (callbacks.onError) {
                                    callbacks.onError(eventData);
                                }
                                stopListening();
                                break;

                            case "TIMEOUT":
                                // No-progress timeout — payment likely still processing on provider side.
                                // Surface as pending UI, not error. Listener already stopped itself.
                                if (callbacks.onTimeout) {
                                    callbacks.onTimeout(eventData);
                                } else if (callbacks.onError) {
                                    callbacks.onError(eventData);
                                }
                                break;

                            default:
                                // Other status updates
                                if (callbacks.onStatusUpdate) {
                                    callbacks.onStatusUpdate(eventData);
                                }
                        }
                    }
                );

            } catch (error) {
                if (callbacks.onError) {
                    callbacks.onError(error);
                }
            }
        }
    };

    // Export to global UTM namespace
    window.UTM = window.UTM || {};
    window.UTM.OrderAPI = OrderAPI;


})();
(function () {
    "use strict";

    // ============================================
    // 1. Core & Utilities
    // ============================================
    var UTM = window.UTM = window.UTM || {};
    var CONFIG = {
        API_BASE: "https://api.utm.net.ua",
        USE_PROXY: false, // Set to true to use a proxy if CORS is blocked on staging
        SEARCH_MIN_CHARS: 2,
        DEBOUNCE_DELAY: 400
    };

    function getConfig(key) {
        if (typeof window !== 'undefined' && window.CONFIG && window.CONFIG[key] !== undefined) {
            return window.CONFIG[key];
        }
        return CONFIG[key];
    }

    // Nova Post autocomplete styles (.np-select-*, .np-item) live in the Webflow
    // Custom Code <style> block — Site Settings → Custom Code → Head.

    UTM.orderState = UTM.orderState || {
        planName: "", planPrice: 0,
        bundleName: "", bundlePrice: 0,
        simType: "", cityId: null, streetId: null,
        isPaid: false
    };

    function qs(sel, root) { return (root || document).querySelector(sel); }
    function qsa(sel, root) { return Array.prototype.slice.call((root || document).querySelectorAll(sel)); }
    function debounce(fn, delay) {
        var t; return function () {
            var args = arguments, ctx = this;
            clearTimeout(t); t = setTimeout(function () { fn.apply(ctx, args); }, delay);
        };
    }

    function isValidEmail(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); }
    function normalizeDigits(v) {
        var d = String(v || "").replace(/\D/g, "");
        if (d.length === 0) return "380";
        if (!d.startsWith("380")) {
            if (d.startsWith("0")) d = "38" + d;
            else if (d.startsWith("80")) d = "3" + d;
            else d = "380" + d;
        }
        return d.slice(0, 12);
    }
    function isValidUaPhone(digits) {
        // Validates format only: +38(0XX)XXXXXXX
        // No operator code restriction — supports number portability
        return /^380\d{9}$/.test(digits);
    }
    // Allowlist for payment redirects. Add a provider here when integrating a new one —
    // any redirect target outside this list is rejected, blocking open-redirect attacks
    // if the backend response is tampered with.
    var PAYMENT_HOST_ALLOWLIST = [
        "bank24.com.ua",
        "city24.ua",
        "city24bank.com",          // pay-gate.city24bank.com (City24 prod gateway)
        "city24pay.tdev.pp.ua",    // staging payment host (api-staging.utm.net.ua)
        "wayforpay.com"
    ];
    function isSafeUrl(url) {
        if (typeof url !== "string") return false;
        try {
            var u = new URL(url);
            if (u.protocol !== "https:") return false;
            var host = u.hostname.toLowerCase();
            return PAYMENT_HOST_ALLOWLIST.some(function (d) {
                return host === d || host.endsWith("." + d);
            });
        } catch (e) {
            return false;
        }
    }

    /**
     * Get human-readable SIM type label.
     * @param {string} simType - Raw simType value
     * @returns {string} Localized SIM type label (plastic vs eSIM).
     */
    function getHumanSimType(simType) {
        var sType = (simType || "").toLowerCase();
        var isPlastic = sType.includes("plastic") ||
                       sType.includes("пластик") ||
                       sType.includes("new") ||
                       sType.includes("нова") ||
                       sType === "p";
        return isPlastic ? "Пластикова SIM" : "eSIM";
    }

    // Extract the user-visible label from a Nova Post autocomplete select. The select stores
    // an opaque id as its value (e.g. branchId), so we read the option text or the sibling
    // .np-select-display element to get a human-readable city/branch/street name for the
    // success modal — the API doesn't return these labels.
    function readNPDisplayText(selectEl) {
        if (!selectEl) return "";
        if (selectEl.tagName === "SELECT" && selectEl.selectedIndex >= 0) {
            var opt = selectEl.options[selectEl.selectedIndex];
            if (opt && opt.text) return opt.text;
        }
        var wrapper = selectEl.closest(".np-select-wrapper") || selectEl.parentElement;
        var display = wrapper ? wrapper.querySelector(".np-select-display") : null;
        if (display) {
            var text = display.tagName === "INPUT" ? display.value : display.textContent;
            return (text || "").trim();
        }
        return (selectEl.value || "").trim();
    }

    // ============================================
    // 2. Phone Masking System (with Visual Layer)
    // ============================================
    function bindPhoneMask(input) {
        if (!input || input.dataset.maskBound) return;
        var wrapper = input.parentElement;
        var overlay = qs(".phone-mask-overlay", wrapper);
        var style = window.getComputedStyle(input);

        if (!overlay) {
            overlay = document.createElement("div");
            overlay.className = "phone-mask-overlay";
            overlay.style.cssText = `
                position: absolute;
                top: 0; left: 0; width: 100%; height: 100%;
                pointer-events: none;
                display: flex;
                align-items: center;
                color: #000;
                z-index: 1;
                font-family: ${style.fontFamily};
                font-size: ${style.fontSize};
                font-weight: ${style.fontWeight};
                letter-spacing: ${style.letterSpacing};
                padding-left: ${style.paddingLeft};
                line-height: ${style.lineHeight};
            `;
            wrapper.style.position = "relative";
            wrapper.appendChild(overlay);
        }

        input.style.color = "transparent";
        input.style.caretColor = "#000";
        input.style.position = "relative";
        input.style.zIndex = "2";
        input.style.background = "transparent";
        input.dataset.maskBound = "true";

        function getMasked(digits) {
            var f = digits.slice(3).slice(0, 9);
            return "+380 (" + (f.slice(0, 2) + "XX".slice(f.length).slice(0, 2)) + ") " +
                (f.slice(2, 5) + "XXX".slice(Math.max(0, f.length - 2)).slice(0, 3)) + "-" +
                (f.slice(5, 7) + "XX".slice(Math.max(0, f.length - 5)).slice(0, 2)) + "-" +
                (f.slice(7, 9) + "XX".slice(Math.max(0, f.length - 7)).slice(0, 2));
        }

        function update() {
            var digits = normalizeDigits(input.value);
            var masked = getMasked(digits);

            input.value = masked;
            overlay.textContent = masked;

            // Sync Caret: Calculate position based on the digit count
            var count = digits.length - 3; // Entered digits after 380
            var pos = 6; // Start position after "+380 ("
            if (count > 0) {
                if (count <= 2) pos = 6 + count;
                else if (count <= 5) pos = 6 + 2 + 2 + (count - 2); // prefix(+6) + d2 + ") "(+2) + d3
                else if (count <= 7) pos = 6 + 2 + 2 + 3 + 1 + (count - 5); // ... + d3 + "-"(+1) + d2
                else pos = 6 + 2 + 2 + 3 + 1 + 2 + 1 + (count - 7); // ... + d2 + "-"(+1) + d2
            }
            input.setSelectionRange(pos, pos);
        }

        input.addEventListener("input", update);
        input.addEventListener("click", update);
        input.addEventListener("keydown", (e) => {
            if (e.key === "Backspace") {
                var d = normalizeDigits(input.value);
                if (d.length <= 3) e.preventDefault();
                else setTimeout(update, 0);
            }
        });
        update();
    }

    // ============================================
    // 3. Nova Poshta Integration (Autocomplete)
    // ============================================
    async function npFetch(path, params) {
        try {
            var baseUrl = getConfig("API_BASE");
            if (getConfig("USE_PROXY")) baseUrl = "https://corsproxy.io/?" + encodeURIComponent(baseUrl);

            var url = new URL(baseUrl + path);
            if (params) Object.keys(params).forEach(k => {
                var v = params[k];
                if (v && typeof v === "object") {
                    Object.keys(v).forEach(sk => url.searchParams.append(k + "[" + sk + "]", v[sk]));
                } else {
                    url.searchParams.append(k, v);
                }
            });

            const res = await fetch(url);
            const data = await res.json();
            var items = data.payload || data.data || data || [];
            if (!Array.isArray(items)) items = [];
            return items;
        } catch (e) {
            return [];
        }
    }

    function initNPAutocomplete(select, searchFn) {
        if (!select || select.dataset.npAutocomplete) return;
        select.dataset.npAutocomplete = "1";

        var wrapper = select.closest(".np-select-wrapper") || select.parentElement;
        var display = qs(".np-select-display", wrapper) || select;
        var dropdown = qs(".np-select-dropdown", wrapper);
        var searchInput = qs(".np-select-search", wrapper);
        var results = qs(".np-select-results", wrapper);

        if (!dropdown || !searchInput) {
            return;
        }

        // ✅ Pagination state
        var currentPage = 1;
        var pageSize = 20;
        var currentQuery = "";
        var isLoading = false;
        var hasMore = true;
        var loadedIds = new Set();

        var openDropdown = (e) => {
            if (e) { e.preventDefault(); e.stopPropagation(); }
            if (dropdown.style.display === "block") return;
            dropdown.style.display = "block";
            searchInput.value = "";
            searchInput.focus();

            // Load initial results if dropdown is empty
            if (!results.innerHTML || results.innerHTML.trim() === "") {
                runSearch("");  // Trigger search with empty query to load first results
            }
        };

        // ✅ FIX: Allow manual input for Address field (courier delivery)
        if (display.tagName === "INPUT") {
            // For INPUT fields - allow typing and use dropdown as optional autocomplete
            display.addEventListener("click", openDropdown);
            display.addEventListener("focus", openDropdown);

            // Allow manual typing — write user input via new Option() so the value is
            // never parsed as HTML (string-concat into innerHTML is a self-XSS sink).
            display.addEventListener("input", function(e) {
                var manualValue = e.target.value.trim();
                if (manualValue) {
                    select.options.length = 0;
                    select.add(new Option(manualValue, "manual:" + manualValue, true, true));
                    select.dataset.manualInput = "true";
                }
            });
        } else {
            // For DIV display - only open on click
            display.addEventListener("click", openDropdown);
        }

        // ✅ Load more results (pagination)
        async function loadMore(append = false) {
            if (isLoading || !hasMore) return;

            isLoading = true;

            if (!append) {
                results.innerHTML = "<div class='np-item'>Пошук...</div>";
            } else {
                // Add loader at bottom
                var loader = document.createElement("div");
                loader.className = "np-item np-loader";
                loader.textContent = "Завантаження...";
                results.appendChild(loader);
            }

            const items = await searchFn(currentQuery, currentPage, pageSize);

            // ✅ Filter duplicates (fix for infinite loading of same items)
            var newItems = [];
            if (items && items.length) {
                newItems = items.filter(item => {
                    // Enhanced ID lookup: ensure we find a unique key
                    var id = item.id || item.Ref || item.Description || item.name || item.Present || item.DescriptionUz;
                    if (!id) {
                        // Extended fallback for objects without clear ID
                        id = item.SettlementStreetRef || item.DeliveryCity || JSON.stringify(item);
                    }
                    
                    if (loadedIds.has(id)) return false;
                    loadedIds.add(id);
                    return true;
                });
            }

            // If we got items but all were duplicates -> stop pagination (likely API looping or fully loaded)
            if (items && items.length > 0 && newItems.length === 0) {
                 hasMore = false;
                 isLoading = false;
                 if (append) {
                     var loader = results.querySelector(".np-loader");
                     if (loader) loader.remove();
                 }
                 return;
            }

            // ✅ Relaxed Pagination Check:
            // Don't rely on (length >= pageSize) because API might return fewer items than requested (e.g. default limit 10 vs 20)
            hasMore = items.length > 0;

            if (!append) results.innerHTML = "";
            else {
                var loader = results.querySelector(".np-loader");
                if (loader) loader.remove();
            }

            if (newItems.length === 0) {
                if (!append) results.innerHTML = "<div class='np-item'>Нічого не знайдено</div>";
                isLoading = false;
                hasMore = false; // Stop if no new items found
                return;
            }

            newItems.forEach(item => {
                var d = document.createElement("div");
                d.className = "np-item";
                
                // Robust extraction for display text
                var text = item.name || item.Description || item.Present || item.DescriptionUz || "---";
                
                // Robust extraction for ID (MUST match the filter logic to ensure we have a value)
                var id = item.id || item.Ref || item.Description || item.name || item.Present || item.DescriptionUz;
                if (!id) id = item.SettlementStreetRef || item.DeliveryCity || JSON.stringify(item); // Last resort

                d.textContent = text;
                d.onclick = (e) => {
                    e.stopPropagation();
                    
                    // ✅ Robustly update SELECT value
                    // Using new Option() is safer than innerHTML for value sync
                    select.innerHTML = ""; // Clear
                    select.add(new Option(text, id, true, true));
                    select.value = id; // Force value update
                    
                    // ✅ Clear manual input flag when selecting from autocomplete
                    delete select.dataset.manualInput;

                    // Update Display
                    if (display.tagName === "INPUT") {
                        display.value = text;
                        display.classList.remove("placeholder");
                    } else {
                        display.textContent = text;
                        display.classList.remove("placeholder");
                        display.style.color = "#000";
                    }
                    
                    dropdown.style.display = "none";
                    
                    // Trigger change for validation
                    // Small timeout to ensure DOM is ready
                    setTimeout(() => {
                        select.dispatchEvent(new Event("change", { bubbles: true }));
                    }, 0);
                };
                results.appendChild(d);
            });

            isLoading = false;
        }

        const runSearch = debounce(async (q) => {
            currentQuery = q;
            currentPage = 1;
            hasMore = true;
            loadedIds.clear();
            await loadMore(false);
        }, getConfig("DEBOUNCE_DELAY"));

        searchInput.oninput = (e) => {
            var q = e.target.value.trim();
            if (q.length >= getConfig("SEARCH_MIN_CHARS")) runSearch(q);
            else if (q.length === 0) runSearch(""); // Load initial results
        };

        searchInput.onclick = (e) => e.stopPropagation();

        // ✅ Infinite scroll - load more on scroll to bottom
        results.addEventListener("scroll", function() {
            var scrolledToBottom = results.scrollHeight - results.scrollTop <= results.clientHeight + 50;
            if (scrolledToBottom && hasMore && !isLoading) {
                currentPage++;
                loadMore(true);
            }
        });

        document.addEventListener("click", (e) => {
            if (!wrapper.contains(e.target)) dropdown.style.display = "none";
        });
    }

    // ============================================
    // 4. Modal System (Logic & Accessibility)
    // ============================================
    function setAriaHidden(el, isHidden) {
        if (!el) return;
        if (isHidden) el.setAttribute("aria-hidden", "true");
        else {
            el.setAttribute("aria-hidden", "false");
            var p = el.parentElement;
            while (p && p !== document.body) {
                if (p.getAttribute("aria-hidden") === "true") p.setAttribute("aria-hidden", "false");
                p = p.parentElement;
            }
        }
    }

    function updateHiddenFields() {
        var state = UTM.orderState;
        var fPlan = qs('#selected-plan'), fPrice = qs('#selected-price'), fSim = qs('#sim-type');
        if (fPlan) fPlan.value = state.planName || "";
        if (fPrice) fPrice.value = state.bundlePrice || ""; // Only Starter Pack Price
        if (fSim) fSim.value = state.simType || "";
    }

    var modalApi = {
        open: function (id) {
            if (document.activeElement) document.activeElement.blur();

            var d = document.getElementById(id);
            if (!d) return;

            // --- REDIRECTION LOGIC IF PAID ---
            if (UTM.orderState.isPaid && ["modal-plan", "modal-bundle", "modal-order", "modal-plastic", "modal-plastic-success"].includes(id)) {
                var sType = (UTM.orderState.simType || "").toLowerCase();
                if (sType.includes("esim")) {
                    id = "modal-success-esim";
                    d = document.getElementById(id);
                } else {
                    id = "modal-plastic";
                    d = document.getElementById(id);
                }
            }

            if (d) {
                // Close any other open modals first
                qsa(".modal, .modal__dialog").forEach(el => { el.classList.remove("is-open"); setAriaHidden(el, true); });

                d.classList.add("is-open");
                setAriaHidden(d, false);
                var wrap = d.closest(".modal");
                if (wrap) { wrap.classList.add("is-open"); setAriaHidden(wrap, false); }
                document.body.classList.add("modal-open");

                // --- BUNDLE FILTERING ---
                if (id === "modal-bundle" && UTM.orderState.planName) {
                    var selectedPlan = UTM.orderState.planName.trim().toLowerCase();

                    // 1. Find all possible items that can be bundles/slides
                    var allCards = qsa(".plan-card, .plan_item--bshadow, [data-plan-name]", d);

                    // 2. Hide everything first
                    allCards.forEach(c => c.style.display = "none");

                    // 3. Show only matches
                    var found = 0;
                    allCards.forEach(function (card) {
                        var cardName = (card.getAttribute("data-plan-name") || "").trim().toLowerCase();
                        if (cardName === selectedPlan) {
                            card.style.display = "block";
                            found++;
                        }
                    });
                }

                // If paid, force show success step inside the modal
                if (UTM.orderState.isPaid && id !== "modal-success-esim") {
                    // For new #modal-plastic (plastic success screen) — show the payment-success step
                    var paymentSuccess = d.querySelector(".is--payment-success");
                    if (paymentSuccess) {
                        var steps = qsa(".modal-step, .modal-step-esim, .modal-success, .modal-error-esim", d);
                        steps.forEach(s => { s.style.display = "none"; s.classList.remove("is-active"); });
                        paymentSuccess.style.display = "block";
                        paymentSuccess.classList.add("is-active");
                    } else {
                        var steps = qsa(".modal-step, .modal-step-esim, .modal-success, .modal-error-esim", d);
                        steps.forEach(s => { s.style.display = "none"; s.classList.remove("is-active"); });
                        var success = d.querySelector(".modal-success");
                        if (success) {
                            success.style.display = "block";
                            success.classList.add("is-active");
                        }
                    }
                } else {
                    this.resetToInitial(d);
                }

                // After payment, real data is set by displayOrderSuccess.
                // updateSummary would clobber it with form values (empty post-reload)
                // and hardcoded SIM placeholders. Skip it on success modals.
                if (!UTM.orderState.isPaid) {
                    this.updateSummary(d);
                }
                if (window.initPlanModalSlider) setTimeout(() => window.initPlanModalSlider(), 100);
            }
        },
        close: function () {
            qsa(".modal, .modal__dialog").forEach(el => { el.classList.remove("is-open"); setAriaHidden(el, true); });
            document.body.classList.remove("modal-open");
            // ✅ FIX #5: Don't clear data on close - preserve user input
            // User can reopen modal and continue where they left off
        },
        resetToInitial: function (dialog) {
            var steps = qsa(".modal-step, .modal-step-esim, .modal-success, .modal-error-esim", dialog);
            steps.forEach(s => { s.style.display = "none"; s.classList.remove("is-active"); });
            var initial = qs("[data-step-initial]", dialog) || dialog.querySelector(".modal-step, .modal-step-esim");
            if (initial) { initial.style.display = "block"; initial.classList.add("is-active"); }
        },
        next: function (currentBtn) {
            var currentStep = currentBtn.closest(".modal-step") || currentBtn.closest(".modal-step-esim");
            if (!currentStep) return;

            var target = currentBtn.getAttribute("data-step-next");
            var nextStep = null;

            // --- Branching: Plastic -> Delivery, eSIM -> Payment ---
            var isContactStep = currentStep.classList.contains("is--describe-you") ||
                currentStep.getAttribute("data-step") === "step-contacts";

            if (isContactStep) {
                var sType = (UTM.orderState.simType || "").toLowerCase();
                // Plastic SIM matches any of the localized aliases checked below.
                var isPlastic = sType.includes("plastic") ||
                    sType.includes("пластик") ||
                    sType.includes("new") ||
                    sType.includes("нова") ||
                    sType === "p";


                if (isPlastic) {
                    var dlg = currentStep.closest(".modal__dialog") || currentStep.closest(".modal");
                    nextStep = dlg.querySelector(".is--delivery") ||
                        dlg.querySelector(".is--select-delivery") ||
                        dlg.querySelector('[data-step="step-delivery"]') ||
                        dlg.querySelector('[data-step="delivery"]');

                    if (!nextStep) {
                        this.open("modal-plastic-success");
                        return;
                    }
                } else {
                    var dlg = currentStep.closest(".modal__dialog") || currentStep.closest(".modal");
                    nextStep = dlg.querySelector(".is--payment") ||
                        dlg.querySelector(".is--select-payment") ||
                        dlg.querySelector('[data-step="step-payment"]') ||
                        dlg.querySelector('[data-step="payment"]');

                    if (!nextStep) {
                        nextStep = currentStep.nextElementSibling;
                    }
                }
            }

            if (!nextStep) {
                nextStep = (target && target !== "true") ?
                    (document.getElementById(target) || qs(`[data-step="${target}"]`, currentStep.parentElement)) :
                    currentStep.nextElementSibling;
            }

            if (nextStep) {
                currentStep.style.display = "none"; currentStep.classList.remove("is-active");
                nextStep.style.display = "block"; nextStep.classList.add("is-active");
                var tel = nextStep.querySelector('input[type="tel"]');
                if (tel) bindPhoneMask(tel);

                // Auto-enable payment button when reaching that step
                if (nextStep.classList.contains("is--payment") || nextStep.classList.contains("is--1")) {
                    this.updateSummary(nextStep.closest(".modal__dialog") || nextStep.closest(".modal"));
                    var pBtn = nextStep.querySelector(".button");
                    if (pBtn) {
                        pBtn.disabled = false;
                        pBtn.removeAttribute("disabled");
                        pBtn.classList.remove("is-disabled");
                    }
                }
            }
        },
        prev: function (currentBtn) {
            var currentStep = currentBtn.closest(".modal-step") || currentBtn.closest(".modal-step-esim");
            if (!currentStep) return;
            var target = currentBtn.getAttribute("data-step-prev");

            // ✅ FIX #6: Branching back from modal-plastic-success to modal-order
            if (!target && !currentStep.previousElementSibling) {
                // If it's the first step of modal-plastic-success (delivery), go back to describe-you in modal-order
                if (currentStep.closest("#modal-plastic-success")) {
                    // Close current modal first
                    this.close();
                    // Open modal-order with describe-you step
                    setTimeout(() => {
                        this.open("modal-order");
                        setTimeout(() => {
                            var dlg = document.getElementById("modal-order");
                            var steps = qsa(".modal-step, .modal-step-esim", dlg);
                            steps.forEach(s => { s.style.display = "none"; s.classList.remove("is-active"); });
                            var prev = document.getElementById("describe-you");
                            if (prev) { prev.style.display = "block"; prev.classList.add("is-active"); }
                        }, 10);
                    }, 50);
                    return;
                }
            }

            var prevStep = (target && target !== "true") ?
                (document.getElementById(target) || qs(`[data-step="${target}"]`, currentStep.parentElement)) :
                currentStep.previousElementSibling;

            if (prevStep) {
                currentStep.style.display = "none"; currentStep.classList.remove("is-active");
                prevStep.style.display = "block"; prevStep.classList.add("is-active");
            }
        },
        updateSummary: function (dialog) {
            updateHiddenFields();
            var state = UTM.orderState;
            var priceStr = String(state.bundlePrice || 0).replace(" ₴", "") + " ₴";

            // --- Fill Actual Order Data ---
            qsa(".modal-esim_plan", dialog).forEach(el => el.textContent = state.bundleName || "");
            qsa(".modal-esim_price", dialog).forEach(el => el.textContent = priceStr);
            qsa(".modal-esim_type, .modal-esim_type-of-card", dialog).forEach(el => el.textContent = getHumanSimType(state.simType));

            var fName = (qs('[name="first-name"]', document) || qs('#first-name', document) || { value: "" }).value;
            var lName = (qs('[name="last-name"]', document) || qs('#last-name', document) || { value: "" }).value;
            var email = (qs('[name="email"]', document) || qs('#email', document) || { value: "" }).value;

            qsa(".modal-esim_name", dialog).forEach(el => el.textContent = fName + " " + lName);
            qsa(".modal-esim_email", dialog).forEach(el => el.textContent = email);

            // --- Fill Backend Stubs (Placeholder for real API response) ---
            qsa(".modal-esim_number", dialog).forEach(el => el.textContent = "+380 99 XXX XX XX");
            qsa(".modal-esim_pin1", dialog).forEach(el => el.textContent = "1234");
            qsa(".modal-esim_pin2", dialog).forEach(el => el.textContent = "5678");
            qsa(".modal-esim_iccid", dialog).forEach(el => el.textContent = "89380 00000 00000 0000F");

            // --- Delivery Logic (for plastic) ---
            // Scope to the current dialog first. Both modal-order and modal-plastic-success
            // can host Delivery-Type radios, and a default-checked "courier" radio in the
            // hidden modal would otherwise win a document-wide search and cause the summary
            // to show "Кур'єр" even when the user picked pickup in this dialog.
            var modeInput = qs('input[name="Delivery-Type"]:checked', dialog)
                || qs('input[name="Delivery-Type"]:checked', document);
            var mode = modeInput ? modeInput.value : "";
            var getVal = (id) => {
                var el = qs(id, document);
                if (!el) return "";
                if (el.tagName === "SELECT") return el.options[el.selectedIndex]?.text || "";
                return el.value || "";
            };

            var rows = qsa(".modal-esim_table-row", dialog);
            rows.forEach(row => {
                var label = (qs(".modal-esim_table-label", row)?.textContent || "").trim();
                var valCell = qsa(".modal-esim_table-item", row)[1]?.querySelector("div") || qsa(".modal-esim_table-item", row)[1];
                if (!valCell) return;

                if (label.includes("Тип SIM")) {
                    valCell.textContent = getHumanSimType(state.simType);
                } else if (label.includes("Місто") || label.includes("Город")) {
                    valCell.textContent = getVal("#City");
                } else if (label.includes("Доставка") || label.includes("Способ")) {
                    // Use translation function from OrderDisplay helper
                    var deliveryType = mode === "courier" ? "courier" : "pickup";
                    valCell.textContent = (window.UTM && window.UTM.OrderDisplay && window.UTM.OrderDisplay.translateDeliveryType)
                        ? window.UTM.OrderDisplay.translateDeliveryType(deliveryType)
                        : (mode === "courier" ? "Кур'єрська доставка Нової Пошти" : "Самовивіз з Нової Пошти");
                } else if (label.includes("Адреса") || label.includes("Адрес")) {
                    if (mode === "pickup") row.style.display = "none";
                    else {
                        row.style.display = "";
                        var addr = getVal("#Address");
                        var bld = getVal("#Building"), flt = getVal("#Flat");
                        if (bld) addr += ", буд. " + bld;
                        if (flt) addr += ", кв. " + flt;
                        valCell.textContent = addr;
                    }
                } else if (label.includes("відділення") || label.includes("Отделение")) {
                    if (mode === "courier") row.style.display = "none";
                    else {
                        row.style.display = "";
                        valCell.textContent = getVal("#Department");
                    }
                }
            });
        }
    };


    // ============================================
    // 6. Global Event Listeners & Logic
    // ============================================
    document.addEventListener("click", function (e) {
        var target = e.target;

        // Plan/Bundle Selection
        var openBtn = target.closest("[data-modal-open]");
        if (openBtn) {
            var id = openBtn.getAttribute("data-modal-open");

            // Pre-select SIM type based on data-sim-preselect attribute
            var simPreselect = openBtn.getAttribute("data-sim-preselect");
            if (simPreselect) {
                // Explicit preselection from button attribute
                UTM.orderState.simType = simPreselect;
            } else {
                // Always reset simType on new flow — SIM selection step must always be shown
                UTM.orderState.simType = "";
                var simRadios = document.querySelectorAll('input[name="New-Client"]');
                simRadios.forEach(function (r) { r.checked = false; });
            }

            var card = openBtn.closest("[data-plan-name]");
            if (card) {
                var n = card.getAttribute("data-plan-name"), p = card.getAttribute("data-plan-price");
                if (id === "modal-bundle") {
                    UTM.orderState.planName = n;
                    UTM.orderState.planPrice = p;
                    // Reset bundle data to avoid mixing old bundle with new plan
                    UTM.orderState.bundleName = "";
                    UTM.orderState.bundlePrice = 0;
                }
                else if (id === "modal-order") {
                    UTM.orderState.bundleName = n;
                    UTM.orderState.bundlePrice = p;
                }
                updateHiddenFields();
            }
            e.preventDefault(); modalApi.open(id); return;
        }

        // SIM Type Selection (Buttons)
        var simBtn = target.closest("[data-sim-type]");
        if (simBtn) {
            UTM.orderState.simType = simBtn.getAttribute("data-sim-type");
            var dlg = simBtn.closest(".modal__dialog");
            if (dlg) modalApi.updateSummary(dlg);
            updateHiddenFields();
            // Hide plastic delivery banner for eSIM, show for Plastic
            var isESIM = !UTM.orderState.simType.toLowerCase().includes("plastic");
            qsa(".modal-banner").forEach(function(el) { el.style.display = isESIM ? "none" : ""; });
            // No need to preventDefault here if it also has data-step-next, which is handled below
        }

        // Webflow Radio Fix
        var radioWrap = target.closest(".w-radio, .esim-checkbox_radio-field");
        if (radioWrap) {
            setTimeout(() => {
                var input = radioWrap.querySelector('input[type="radio"]');
                if ((input && input.checked) || radioWrap.querySelector(".w--redirected-checked")) {
                    // Only update simType for SIM-type radios, not Delivery-Type radios
                    if (input && input.name !== "Delivery-Type") {
                        UTM.orderState.simType = input.value;
                        // Hide plastic delivery banner for eSIM, show for Plastic
                        var isESIMRadio = !UTM.orderState.simType.toLowerCase().includes("plastic");
                        qsa(".modal-banner").forEach(function(el) { el.style.display = isESIMRadio ? "none" : ""; });
                    }
                    updateHiddenFields();
                    var step = radioWrap.closest(".modal-step, .modal-step-esim");
                    if (step) {
                        var btn = step.querySelector(".button.is-validation") || step.querySelector("[data-step-next]");
                        if (btn) { btn.disabled = false; btn.removeAttribute("disabled"); btn.classList.remove("is-disabled"); }
                    }
                }
            }, 50);
        }

        // Payment Button — intercept ANY button in payment step (with OR without data-step-next)
        var payBtn = target.closest(".is--payment .button, [data-step='plastic-oplata'] .button");
        if (!payBtn) {
            // Also catch by text if button is inside a known modal payment step
            var anyBtn = target.closest(".button");
            if (anyBtn && (anyBtn.textContent || "").trim().includes("Оплатити")) {
                var inPay = anyBtn.closest(".is--payment, [data-step='plastic-oplata']");
                if (inPay) payBtn = anyBtn;
            }
        }
        if (payBtn) {
            var inModal = payBtn.closest("#modal-order, #modal-plastic-success");
            if (inModal) {
                e.preventDefault();
                window.processOrder();
                return;
            }
        }

        // Navigation
        var nextBtn = target.closest("[data-step-next]");
        if (nextBtn) {
            // Payment Button — intercept BEFORE disabled check (payment btn may still be "disabled" visually)
            var btnText = (nextBtn.textContent || "").trim();
            var inPaymentStep = nextBtn.closest("[data-step='plastic-oplata'], .is--payment");
            var inPlasticModal = nextBtn.closest("#modal-plastic-success");
            var inOrderModal = nextBtn.closest("#modal-order");
            if ((btnText.includes("Оплатити") || inPaymentStep) && (inPlasticModal || inOrderModal)) {
                e.preventDefault();
                window.processOrder();
                return;
            }

            if (nextBtn.disabled || nextBtn.classList.contains("is-disabled")) { e.preventDefault(); return; }

            e.preventDefault(); modalApi.next(nextBtn); return;
        }

        var prevBtn = target.closest("[data-step-prev]");
        if (prevBtn) {
            e.preventDefault();
            modalApi.prev(prevBtn);
            return;
        }


        // Done Button Logic (Reset session)
        var doneBtn = target.closest(".button");
        if (doneBtn && (doneBtn.textContent.trim() === "Готово" || doneBtn.querySelector("strong")?.textContent.trim() === "Готово")) {
            e.preventDefault();
            UTM.orderState.isPaid = false; // Reset so next order starts from step 1
            modalApi.close();
            return;
        }

        if (target.id === "new-client") { e.preventDefault(); modalApi.open("modal-plan"); }
        if (target.closest("[data-modal-close]")) modalApi.close();
    });

    // Validations & Syncing
    // --- Validation Refresh Function ---
    function refreshValidation(step) {
        if (!step) return;
        var btn = step.querySelector(".button.is-validation") || step.querySelector("[data-step-next]");
        if (!btn) return;

        var required = qsa("input[required], select[required]", step);
        var failingField = null;

        var ok = required.every(i => {
            // ✅ Skip NP helper inputs (search/display fields inside dropdowns)
            if (i.classList.contains("np-select-search") || i.classList.contains("np-select-display")) return true;

            // ✅ Skip validation for disabled fields
            if (i.disabled) return true;

            var val = i.value.trim();
            var fieldOk = true;

            if (i.type === "checkbox") {
                // Check both standard property and Webflow custom class
                fieldOk = i.checked || (i.parentElement && i.parentElement.querySelector(".w--redirected-checked"));
            }
            else if (i.type === "email") fieldOk = isValidEmail(val);
            else if (i.type === "tel" || i.getAttribute("name") === "contact-phone") fieldOk = isValidUaPhone(normalizeDigits(val));
            else if (i.tagName === "SELECT") {
                // ✅ For SELECT with manual input support - check display field
                if (i.dataset.manualInput === "true") {
                    // Find display input field
                    var wrapper = i.closest(".np-select-wrapper") || i.parentElement;
                    var displayInput = qs('[data-np-display], input[type="text"]', wrapper);
                    if (displayInput && displayInput.tagName === "INPUT") {
                        val = displayInput.value.trim();
                    }
                }
                fieldOk = val.length > 0;
            }
            else {
                // ✅ Relax validation for Building/House/Flat/Apartment to allow 1 character
                var isShortField = /building|house|flat|apartment|corps|office/i.test(i.id || "") ||
                                   /building|house|flat|apartment|corps|office/i.test(i.name || "");

                if (isShortField) fieldOk = val.length > 0;
                else fieldOk = val.length > 1;
            }

            // Ukrainian-only validation for first/last name fields
            var isNameField = /first.?name|firstName/i.test(i.name || "") || /first.?name/i.test(i.id || "") ||
                              /last.?name|lastName/i.test(i.name || "") || /last.?name/i.test(i.id || "");
            if (isNameField && val.length > 0 && fieldOk) {
                var ukrainianOnly = /^[А-ЯҐЄІЇа-яґєіїʼ'\-\s]+$/.test(val);
                if (!ukrainianOnly) {
                    fieldOk = false;
                    var errEl = i.parentElement.querySelector(".utm-field-error");
                    if (!errEl) {
                        errEl = document.createElement("div");
                        errEl.className = "utm-field-error";
                        errEl.style.cssText = "color:#e53935;font-size:12px;margin-top:4px;";
                        i.parentElement.appendChild(errEl);
                    }
                    var isLastName = /last.?name|lastName/i.test(i.name || "") || /last.?name/i.test(i.id || "");
                    errEl.textContent = isLastName
                        ? "Прізвище має бути введено українською мовою."
                        : "Ім'я має бути введено українською мовою.";
                } else {
                    var errEl = i.parentElement.querySelector(".utm-field-error");
                    if (errEl) errEl.textContent = "";
                }
            }

            if (!fieldOk && !failingField) failingField = i.getAttribute("name") || i.id;
            return fieldOk;
        });

        // Also validate name fields regardless of `required` attribute
        var ukrainianOnlyRe = /^[А-ЯҐЄІЇа-яґєіїʼ'\-\s]+$/;
        var nameSelectors = [
            'input[name="first-name"], input[name="First-Name"], input[name="firstName"]',
            'input[name="last-name"], input[name="Last-Name"], input[name="lastName"]'
        ];
        nameSelectors.forEach(function(sel) {
            var inp = step.querySelector(sel);
            if (!inp) return;
            var v = inp.value.trim();
            if (v.length === 0) return; // empty handled by required check
            var valid = ukrainianOnlyRe.test(v);
            var errEl = inp.parentElement.querySelector(".utm-field-error");
            if (!valid) {
                ok = false;
                if (!errEl) {
                    errEl = document.createElement("div");
                    errEl.className = "utm-field-error";
                    errEl.style.cssText = "color:#e53935;font-size:12px;margin-top:4px;";
                    inp.parentElement.appendChild(errEl);
                }
                var isLast = /last.?name|lastName/i.test(inp.name || "") || /last.?name/i.test(inp.id || "");
                errEl.textContent = isLast
                    ? "Прізвище має бути введено українською мовою."
                    : "Ім'я має бути введено українською мовою.";
            } else {
                if (errEl) errEl.textContent = "";
            }
        });

        btn.disabled = !ok;
        if (ok) btn.removeAttribute("disabled"); else btn.setAttribute("disabled", "disabled");
        btn.classList.toggle("is-disabled", !ok);

        // Sync for summary table
        if (step.classList.contains("is--describe-you")) {
            var fName = (qs('[name="first-name"]', step) || qs('#first-name', step) || { value: "" }).value;
            var lName = (qs('[name="last-name"]', step) || qs('#last-name', step) || { value: "" }).value;
            var email = (qs('[name="email"]', step) || qs('#email', step) || { value: "" }).value;
            qsa(".modal-esim_name").forEach(el => el.textContent = fName + " " + lName);
            qsa(".modal-esim_email").forEach(el => el.textContent = email);
        }
    }

    document.addEventListener("input", function (e) { refreshValidation(e.target.closest(".modal-step, .modal-step-esim")); });
    document.addEventListener("change", function (e) { refreshValidation(e.target.closest(".modal-step, .modal-step-esim")); });

    // Support for clicking custom checkbox/radio wrappers
    document.addEventListener("click", function (e) {
        var wrap = e.target.closest(".w-checkbox, .w-radio");
        if (wrap) setTimeout(() => refreshValidation(wrap.closest(".modal-step, .modal-step-esim")), 50);
    });

    // ============================================
    // 7. Real Order Creation & Payment Flow
    // ============================================

    /**
     * Collect order data from the modal form
     */
    function collectOrderData(modal) {
        var orderData = {
            simType: UTM.orderState.simType || "eSIM",
            tariffPlan: UTM.orderState.planName || "",
            bundle: UTM.orderState.bundleName || null,

            // Customer info
            firstName: "",
            lastName: "",
            middleName: "",
            email: "",
            phone: "",

            // Optional promo code
            promocode: "",

            // Delivery (for Plastic SIM)
            delivery: null
        };

        // Collect customer info from form fields
        // For modal-plastic: personal data is in modal-order, so search whole document
        var searchRoot = document;
        var firstNameInput = qs('input[name="first-name"], input[name="First-Name"], input[name="firstName"]', searchRoot);
        var lastNameInput = qs('input[name="last-name"], input[name="Last-Name"], input[name="lastName"]', searchRoot);
        var middleNameInput = qs('input[name="middle-name"], input[name="Middle-Name"], input[name="middleName"]', searchRoot);
        var emailInput = qs('input[type="email"], input[name="email"]', searchRoot);
        var phoneInput = qs('input[name="contact-phone"], input[name="phone"]', searchRoot);
        var promocodeInput = qs('input[name="promocode"], #promocode', searchRoot);

        if (firstNameInput) orderData.firstName = firstNameInput.value.trim();
        if (lastNameInput) orderData.lastName = lastNameInput.value.trim();
        if (middleNameInput) orderData.middleName = middleNameInput.value.trim();
        if (emailInput) orderData.email = emailInput.value.trim();
        if (phoneInput) orderData.phone = normalizeDigits(phoneInput.value);
        if (promocodeInput) orderData.promocode = promocodeInput.value.trim();

        // Collect delivery info for Plastic SIM
        var sType = (orderData.simType || "").toLowerCase();
        var isPlastic = sType.includes("plastic") ||
                       sType.includes("пластик") ||
                       sType.includes("new") ||
                       sType.includes("нова") ||
                       sType === "p";

        if (isPlastic) {
            // Search the currently-active modal first. The previous code hard-coded
            // #modal-plastic-success, which always exists in the DOM — so a default-checked
            // "courier" radio inside that (hidden) modal silently overrode the user's
            // actual "pickup" selection inside modal-order, and the order was sent to the
            // API as NOVA_POST_COURIER instead of NOVA_POST_BRANCH.
            var deliveryTypeInput = qs('input[name="Delivery-Type"]:checked', modal || document)
                || qs('input[name="Delivery-Type"]:checked', document);

            // If we still can't find a checked radio, infer from filled fields rather than
            // blindly defaulting to "courier" — a filled #Department means the user chose pickup.
            var deliveryType;
            if (deliveryTypeInput) {
                deliveryType = deliveryTypeInput.value;
            } else {
                var inferDept = qs('#Department', document);
                deliveryType = (inferDept && inferDept.value) ? "pickup" : "courier";
            }

            // Match the lookup root to where the radio actually lives, then fall back to
            // document so we don't lose fields that may be in a different modal.
            var fieldRoot = (deliveryTypeInput && deliveryTypeInput.closest(".modal, .modal__dialog")) || modal || document;
            var departmentSelect = qs('#Department', fieldRoot) || qs('#Department', document);
            var streetSelect = qs('#Address', fieldRoot) || qs('#Address', document);
            var houseInput = qs('input[name="house"], input[name="House"]', fieldRoot)
                || qs('input[name="house"], input[name="House"]', document);
            var apartmentInput = qs('input[name="apartment"], input[name="Apartment"]', fieldRoot)
                || qs('input[name="apartment"], input[name="Apartment"]', document);

            orderData.delivery = {
                type: deliveryType
            };

            // Capture human-readable city name for the success modal — the API doesn't echo
            // a city string back (cityId is encoded into branchId/address), so we have to
            // grab it from the form before the user is redirected to the payment provider.
            var citySelect = qs('#City', fieldRoot) || qs('#City', document);
            orderData.delivery.cityName = readNPDisplayText(citySelect);

            if (deliveryType === "pickup" && departmentSelect && !departmentSelect.disabled) {
                // For pickup - only branchId needed (only if not disabled)
                orderData.delivery.branchId = departmentSelect.value;
                orderData.delivery.branchName = readNPDisplayText(departmentSelect);
            } else if (deliveryType === "courier") {
                var cityId = citySelect ? citySelect.value : "";
                if (cityId.startsWith("manual:")) cityId = "";
                orderData.delivery.cityId = cityId;

                var streetId = streetSelect ? streetSelect.value : "";
                if (streetId.startsWith("manual:")) streetId = "";
                orderData.delivery.streetId = streetId;

                orderData.delivery.house = houseInput ? houseInput.value.trim() : "";
            }
        }

        return orderData;
    }

    /**
     * Show payment loader overlay.
     * Styles for `.utm-payment-loader*` and `@keyframes utm-spin` are defined in the
     * Webflow Custom Code <style> block (Site Settings → Custom Code → Head).
     */

    /**
     * Show an inline validation error on a form field — used when processOrder's safety
     * checks fail (e.g. user reaches payment via dev-tools without filling contact-phone).
     * Switches the modal to the step that hosts the failing input, focuses it, and writes
     * the message into a `.utm-field-error` element below the field.
     */
    function showFieldValidationError(modal, fieldSelectors, message) {
        if (!modal) return;
        var input = null;
        for (var i = 0; i < fieldSelectors.length && !input; i++) {
            input = modal.querySelector(fieldSelectors[i]);
        }
        if (!input) {
            // Field is not in the active modal — fall back to a top-level alert overlay
            // so the user at least sees what's wrong instead of a silent no-op.
            showThankYouOverlay(message);
            return;
        }

        var step = input.closest(".modal-step, .modal-step-esim");
        if (step) {
            var allSteps = qsa(".modal-step, .modal-step-esim, .modal-success, .modal-error-esim", modal);
            allSteps.forEach(function(s) {
                s.style.display = "none";
                s.classList.remove("is-active");
            });
            step.style.display = "block";
            step.classList.add("is-active");
        }

        var parent = input.parentElement;
        var errEl = parent.querySelector(".utm-field-error");
        if (!errEl) {
            errEl = document.createElement("div");
            errEl.className = "utm-field-error";
            errEl.style.cssText = "color:#e53935;font-size:12px;margin-top:4px;";
            parent.appendChild(errEl);
        }
        errEl.textContent = message;

        try { input.focus({ preventScroll: true }); } catch (e) { input.focus(); }
        try { input.scrollIntoView({ block: "center", behavior: "smooth" }); }
        catch (e) { input.scrollIntoView(); }
    }

    function showPaymentLoader(modal) {
        var existingLoader = document.querySelector(".utm-payment-loader");
        if (existingLoader) {
            existingLoader.style.display = "flex";
            return;
        }

        var loader = document.createElement("div");
        loader.className = "utm-payment-loader";

        var spinner = document.createElement("div");
        spinner.className = "utm-payment-loader__spinner";
        loader.appendChild(spinner);

        var text = document.createElement("div");
        text.className = "utm-payment-loader__text";
        text.textContent = "Обробка замовлення...";
        loader.appendChild(text);

        var hint = document.createElement("div");
        hint.className = "utm-payment-loader__hint";
        hint.textContent = "Зачекайте, будь ласка";
        loader.appendChild(hint);

        document.body.appendChild(loader);
    }

    /**
     * Hide payment loader overlay
     */
    function hidePaymentLoader() {
        document.querySelectorAll(".utm-payment-loader").forEach(function(el) { el.remove(); });
    }

    /**
     * Update the inline page loader (e.g. on /order) to a "thank you, details on email" state.
     * Used for two cases:
     *  1) Return to /order page with empty storage (Safari ITP wiped state).
     *  2) SSE no-progress timeout — payment likely still being processed.
     *
     * Expected loader markup on the page (text content set in the embed):
     *   <div id="utm-page-loader">
     *     <div data-utm-spinner>...</div>
     *     <div data-utm-loader-title>...</div>
     *     <div data-utm-loader-subtitle>...</div>
     *   </div>
     */
    function showThankYouOverlay(message) {
        hidePaymentLoader();

        var pageLoader = document.getElementById("utm-page-loader");
        if (!pageLoader) {
            return;
        }

        var spinner = pageLoader.querySelector("[data-utm-spinner]");
        if (spinner) spinner.style.display = "none";
        var loaderTitle = pageLoader.querySelector("[data-utm-loader-title]");
        if (loaderTitle) loaderTitle.textContent = "Дякую за замовлення";
        var loaderSub = pageLoader.querySelector("[data-utm-loader-subtitle]");
        if (loaderSub) loaderSub.textContent = message;
    }

    function isOnOrderReturnPage() {
        var p = (window.location && window.location.pathname) || "";
        // Match /order and /order/ (with or without trailing slash); case-insensitive.
        return /^\/order\/?$/i.test(p);
    }

    /**
     * Show success state in modal
     */
    function showOrderSuccess(modal, orderDetails) {
        var step = modal.querySelector(".is-active");
        var successStep = modal.querySelector(".modal-success");

        if (step && successStep) {
            step.style.display = "none";
            step.classList.remove("is-active");
            successStep.style.display = "block";
            successStep.classList.add("is-active");
        }

        UTM.orderState.isPaid = true;

        var sType = (UTM.orderState.simType || "").toLowerCase();

        // Populate order details using helper if available
        if (window.UTM && window.UTM.OrderDisplay && orderDetails) {
            window.UTM.OrderDisplay.displayOrderSuccess(orderDetails, UTM.orderState.simType);
        }

        // For eSIM, open QR code modal (data already populated by displayOrderSuccess above)
        if (sType.includes("esim")) {
            setTimeout(() => { modalApi.open("modal-success-esim"); }, 1500);
        }
    }

    /**
     * Show error state in modal
     */
    function showOrderError(modal, error) {

        // Find error step — if not in current modal, fall back to modal-order
        var errorStep = modal.querySelector(".modal-error-esim");
        var errorModal = modal;
        if (!errorStep) {
            var fallback = document.getElementById("modal-order");
            if (fallback) {
                errorStep = fallback.querySelector(".modal-error-esim");
                errorModal = fallback;
                // Close current modal and open modal-order
                qsa(".modal, .modal__dialog").forEach(function(el) { el.classList.remove("is-open"); setAriaHidden(el, true); });
                fallback.classList.add("is-open");
                setAriaHidden(fallback, false);
                var wrap = fallback.closest(".modal");
                if (wrap) { wrap.classList.add("is-open"); setAriaHidden(wrap, false); }
            }
        }

        if (!errorStep) {
            return;
        }

        // Remember active step before hiding — used by back button
        var previousStep = qs(".modal-step.is-active, .modal-step-esim.is-active", errorModal);

        // Hide all steps in the target modal
        var allSteps = qsa(".modal-step-esim, .modal-success, .modal-error-esim", errorModal);
        allSteps.forEach(function(step) {
            step.style.display = "none";
            step.classList.remove("is-active");
        });

        // Update modal reference for subsequent operations
        modal = errorModal;

        errorStep.style.display = "block";
        errorStep.classList.add("is-active");

        // Fill error content
        var errorTitle = qs(".modal-error-esim_content h3", errorStep);
        var errorDesc = qs(".modal-error-esim_content p", errorStep);
        var errorCodeEl = qs(".modal-error-esim_error-code", errorStep);

        // Normalize: handle both Error objects and plain SSE event objects {status, code, message}
        var errorCode    = error.code   || (error.details && error.details.code) || null;
        var errorStatus  = error.status || null;
        var errorMessage = error.message || (typeof error === "object" && error.message) || "";
        var validationErrors = error.validationErrors || [];

        // Map error code to Ukrainian (codes from API docs)
        var ERROR_CODE_MAP_UI = {
            "VALIDATION":                        "Помилка валідації даних.",
            "TOO_MANY_REQUESTS":                 "Ви робите забагато запитів. Спробуйте трохи пізніше.",
            "INTERNAL_SERVER_ERROR":             "Внутрішня помилка сервера. Спробуйте ще раз.",
            "ORDERS_ORDER_NOT_FOUND":            "Замовлення не знайдено.",
            "ORDERS_ORDER_PRODUCT_NOT_FOUND":    "Обраний тариф не знайдено.",
            "ORDERS_ORDER_ITEM_UNAVAILABLE":     "Товар тимчасово недоступний у вказаній кількості.",
            "ORDERS_ORDER_RESULT_EXPIRED":       "Термін доступності результату замовлення вичерпано.",
            "SSE_PARSE_ERROR":                   "Помилка зв'язку з сервером."
        };
        var mappedMessage = (errorCode && ERROR_CODE_MAP_UI[errorCode]) || null;

        if (errorTitle) {
            // Use title from API response if available, otherwise use mapped or generic title
            errorTitle.textContent = error.title || "Помилка створення замовлення";
        }

        var displayCode = errorCode || errorStatus || "UNKNOWN";

        if (errorDesc) {
            var message = mappedMessage || errorMessage || "Щось пішло не так. Спробуйте ще раз.";

            // Add validation field errors if present
            // New format: [{name, code, message}] (was {propertyName, message})
            if (validationErrors.length > 0) {
                message += "\n\nДеталі помилок:";
                validationErrors.forEach(function(err) {
                    var fieldMsg = err.message || "";
                    var fieldName = err.name || "";
                    message += "\n• " + (fieldName ? fieldName + ": " : "") + fieldMsg;
                });
            }

            // Always append the API error code so support/users can identify the failure.
            // The dedicated .modal-error-esim_error-code element may not exist in every modal layout.
            message += "\n\nКод помилки: " + displayCode;

            errorDesc.textContent = message;
        }

        if (errorCodeEl) {
            errorCodeEl.textContent = "Код помилки: " + displayCode;
        }

        // Handle retry button — restart payment flow
        var retryButton = qs("button[data-step-next]", errorStep);
        if (retryButton) {
            retryButton.onclick = function() {
                errorStep.style.display = "none";
                errorStep.classList.remove("is-active");
                window.processOrder();
            };
        }

        // Handle back button — return to previous step
        var backButton = qs("[data-step-prev]", errorStep);
        if (backButton && previousStep) {
            backButton.onclick = function(e) {
                e.preventDefault();
                e.stopPropagation();
                errorStep.style.display = "none";
                errorStep.classList.remove("is-active");
                previousStep.style.display = "block";
                previousStep.classList.add("is-active");
            };
        }

    }

    // ============================================
    // Pending Order Recovery (localStorage — cross-tab)
    // ============================================

    // NOTE: must NOT start with "utm_" — Cloudflare/Webflow analytics scrub keys with
    // that prefix on cross-site returns (treated as stale marketing tracking).
    var PENDING_ORDER_KEY = 'order_resume_state';

    function savePendingOrder(uuid, simType, snapshot) {
        // snapshot captures the display fields the success modal needs after a payment
        // redirect — client name/email, plan/price, city/branch/address. The API echoes
        // some of this back on /orders/{id}, but city/branch labels are not in the response.
        var data = {
            uuid: uuid,
            simType: simType,
            createdAt: Date.now(),
            snapshot: snapshot || null
        };
        var json = JSON.stringify(data);
        var lsOk = false, cookieOk = false;
        try {
            localStorage.setItem(PENDING_ORDER_KEY, json);
            lsOk = localStorage.getItem(PENDING_ORDER_KEY) === json;
        } catch(e) {}
        try {
            var expires = new Date(Date.now() + 30 * 60 * 1000).toUTCString();
            document.cookie = PENDING_ORDER_KEY + '=' + encodeURIComponent(json) +
                '; expires=' + expires + '; path=/; SameSite=Lax; Secure';
            cookieOk = document.cookie.indexOf(PENDING_ORDER_KEY + '=') !== -1;
        } catch(e) {}
    }

    function clearPendingOrder() {
        try { localStorage.removeItem(PENDING_ORDER_KEY); } catch(e) {}
        try {
            document.cookie = PENDING_ORDER_KEY +
                '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; SameSite=Lax';
        } catch(e) {}
    }

    function readPendingOrder() {
        var raw = null;
        try { raw = localStorage.getItem(PENDING_ORDER_KEY); } catch(e) {}
        if (raw) return raw;
        try {
            var match = document.cookie.match(
                new RegExp('(?:^|; )' + PENDING_ORDER_KEY + '=([^;]*)')
            );
            if (match) {
                return decodeURIComponent(match[1]);
            }
        } catch(e) {}
        return null;
    }

    function resumePendingOrder() {
        // Resume + SSE listening happens only on /order — the dedicated return page.
        // Backend always redirects there after payment, so any other page can skip this entirely.
        if (!isOnOrderReturnPage()) {
            return;
        }

        // OrderAPI may load after modals.js when scripts are fetched in parallel (Webflow prod).
        // Poll every 100ms for up to 5s before giving up.
        if (!window.UTM || !window.UTM.OrderAPI) {
            resumePendingOrder._tries = (resumePendingOrder._tries || 0) + 1;
            if (resumePendingOrder._tries <= 50) {
                setTimeout(resumePendingOrder, 100);
            } else {
            }
            return;
        }
        var raw = readPendingOrder();

        // Storage-lock fallback: backend redirects to /order after payment. If both
        // localStorage and cookie were wiped (e.g. iOS Safari strict ITP), there's no uuid
        // to resume — show a thank-you message so the user knows the order was accepted.
        if (!raw) {
            showThankYouOverlay("Деталі замовлення надіслані на вказаний Email.");
            return;
        }
        var pending;
        try { pending = JSON.parse(raw); } catch(e) {
            clearPendingOrder();
            showThankYouOverlay("Деталі замовлення надіслані на вказаний Email.");
            return;
        }
        if (!pending || !pending.uuid) {
            clearPendingOrder();
            showThankYouOverlay("Деталі замовлення надіслані на вказаний Email.");
            return;
        }

        // 30-minute TTL
        if (pending.createdAt && Date.now() - pending.createdAt > 30 * 60 * 1000) {
            clearPendingOrder();
            showThankYouOverlay("Деталі замовлення надіслані на вказаний Email.");
            return;
        }

        var uuid    = pending.uuid;
        var simType = pending.simType || '';
        var isPlastic = simType.toLowerCase().includes('new') || simType.toLowerCase().includes('plastic');
        var modalId = isPlastic ? 'modal-plastic-success' : 'modal-success-esim';

        // Restore simType so showOrderSuccess knows which flow this is
        UTM.orderState.simType = simType;

        // Restore the display snapshot captured at order create. The payment redirect wiped
        // form state, so the success modal would otherwise fall back to Webflow placeholders.
        if (pending.snapshot) {
            UTM.orderState.pendingSnapshot = pending.snapshot;
            if (pending.snapshot.planName && !UTM.orderState.bundleName) {
                UTM.orderState.bundleName = pending.snapshot.planName;
            }
            if (pending.snapshot.planPrice && !UTM.orderState.bundlePrice) {
                UTM.orderState.bundlePrice = pending.snapshot.planPrice;
            }
        }

        modalApi.open(modalId);
        var activeModal = document.getElementById(modalId);
        if (!activeModal) {
            clearPendingOrder();
            return;
        }

        showPaymentLoader(activeModal);

        var paidReceived = false;

        function tryFetchResult() {
            window.UTM.OrderAPI.getOrderDetails(uuid)
                .then(function(orderDetails) {
                    hidePaymentLoader();
                    clearPendingOrder();
                    UTM.orderState.isPaid = true;
                    if (isPlastic) {
                        modalApi.open('modal-plastic');
                        if (window.UTM.OrderDisplay && window.UTM.OrderDisplay.displayPlasticSuccess) {
                            window.UTM.OrderDisplay.displayPlasticSuccess(orderDetails, UTM.orderState.simType);
                        }
                    } else {
                        showOrderSuccess(activeModal, orderDetails);
                    }
                })
                .catch(function(err) {
                    hidePaymentLoader();
                    clearPendingOrder();
                    showOrderError(activeModal, err || { code: 'INTERNAL_SERVER_ERROR', message: 'Не вдалося отримати деталі замовлення.' });
                });
        }

        function startSSEListener() {
            window.UTM.OrderAPI.startStatusListener(uuid, function(eventData) {
                var status = eventData.status || eventData.type;
                switch (status) {
                    case 'PAID':
                        paidReceived = true;
                        // Keep loader visible — wait for SENT/COMPLETED before showing
                        // the success modal. PAID just means payment cleared; fulfilment
                        // (Nova Post creation, eSIM email) is still pending and may fail.
                        break;
                    case 'SENT':
                    case 'COMPLETED':
                        tryFetchResult();
                        break;
                    case 'TIMEOUT':
                        // No-progress timeout (provider webhook delayed/broken).
                        // Don't clear pending order — webhook may still arrive; let TTL clean up.
                        hidePaymentLoader();
                        showThankYouOverlay("Ваш платіж ще в обробці, згодом ви отримаєте деталі на вказаний Email.");
                        break;
                    case 'FAILED':
                        // Server closes SSE stream after PAID/SENT — that surfaces here
                        // as {status:"FAILED", code:"SSE_ERROR"}, not a real failure.
                        // Result fetch (triggered by SENT) handles the final state.
                        if (eventData.code === 'SSE_ERROR' && paidReceived) {
                            return;
                        }
                        hidePaymentLoader();
                        clearPendingOrder();
                        showOrderError(activeModal, eventData);
                        break;
                    default:
                        break;
                }
            });
        }

        // Check current status first — handles already-processed orders when returning from payment in a new tab
        window.UTM.OrderAPI.getOrderDetails(uuid)
            .then(function(orderDetails) {
                var status = (orderDetails.status || '').toUpperCase();
                if (status === 'SENT' || status === 'COMPLETED') {
                    hidePaymentLoader();
                    clearPendingOrder();
                    UTM.orderState.isPaid = true;
                    if (isPlastic) {
                        modalApi.open('modal-plastic');
                        if (window.UTM.OrderDisplay && window.UTM.OrderDisplay.displayPlasticSuccess) {
                            window.UTM.OrderDisplay.displayPlasticSuccess(orderDetails, UTM.orderState.simType);
                        }
                    } else {
                        showOrderSuccess(activeModal, orderDetails);
                    }
                    return;
                }
                if (status === 'FAILED' || status === 'ERROR') {
                    hidePaymentLoader();
                    clearPendingOrder();
                    showOrderError(activeModal, orderDetails);
                    return;
                }
                startSSEListener();
            })
            .catch(function() {
                startSSEListener();
            });
    }

    /**
     * Process order when payment button is clicked
     */
    window.processOrder = function() {

        var activeModal = qs("#modal-order.is-open") || qs("#modal-plastic-success.is-open");
        if (!activeModal) {
            return;
        }

        // Collect order data from form
        var orderData = collectOrderData(activeModal);
        var isPlasticOrder = (orderData.simType || '').toLowerCase().includes('new') || (orderData.simType || '').toLowerCase().includes('plastic');
        if (isPlasticOrder) {
        }

        // Validate required fields. Phone is required for both eSIM and Plastic flows
        // — API rejects with VALIDATION on `clientDetails.phoneNumber` if it's empty,
        // regardless of strategy (CORE_EMAIL or NOVA_POST_*).
        if (!orderData.email) {
            showFieldValidationError(
                activeModal,
                ['input[type="email"]', 'input[name="email"]'],
                "Будь ласка, вкажіть електронну пошту."
            );
            return;
        }
        if (!isValidUaPhone(orderData.phone)) {
            showFieldValidationError(
                activeModal,
                ['input[name="contact-phone"]', 'input[name="phone"]', 'input[type="tel"]'],
                "Будь ласка, вкажіть номер телефону у форматі +380XXXXXXXXX."
            );
            return;
        }

        // Check if OrderAPI is available
        if (!window.UTM || !window.UTM.OrderAPI) {
            return;
        }

        // Show loader before processing
        showPaymentLoader(activeModal);

        var paidReceived = false;
        var navigatingToPayment = false;

        // Process the order
        window.UTM.OrderAPI.processOrder(orderData, {
            onOrderCreated: function(response) {
                if (isPlasticOrder) {
                }
                // Save generatedId for SSE error recovery
                orderData._generatedId = response.generatedId;

                // Build a snapshot of display-ready fields. The success modal needs city
                // and branch names which the API doesn't echo back — capture them here
                // before the payment redirect wipes the form state.
                var delivery = orderData.delivery || {};
                var snapshot = {
                    firstName:    orderData.firstName,
                    lastName:     orderData.lastName,
                    email:        orderData.email,
                    phone:        orderData.phone,
                    planName:     UTM.orderState.bundleName || UTM.orderState.planName || "",
                    planPrice:    UTM.orderState.bundlePrice || UTM.orderState.planPrice || null,
                    simType:      orderData.simType,
                    deliveryType: delivery.type || null,
                    cityName:     delivery.cityName || "",
                    branchId:     delivery.branchId || "",
                    branchName:   delivery.branchName || "",
                    address:      delivery.address || ""
                };
                UTM.orderState.pendingSnapshot = snapshot;

                // Save pending order to localStorage for cross-tab recovery after payment redirect
                savePendingOrder(response.generatedId, orderData.simType, snapshot);
                // Keep loader visible — user is redirected to payment page
                // Loader will be hidden after PAID or SENT event
                if (response.paymentUrl && isSafeUrl(response.paymentUrl)) {
                    navigatingToPayment = true;
                    // Defer navigation by 250ms so the browser has time to flush
                    // the localStorage/cookie writes above to disk before page unload.
                    // Without this, the writes can race with navigation and be lost.
                    setTimeout(function() {
                        window.location.href = response.paymentUrl;
                    }, 250);
                }
            },

            onPaid: function(eventData, stopListening) {
                paidReceived = true;
                // Keep the loader visible. PAID is an intermediate state — order is paid
                // but the fulfilment step (Nova Post / email send) hasn't completed yet,
                // so we don't yet know if the order will succeed or fail. Wait for
                // SENT/COMPLETED before showing the success modal, FAILED for the error
                // modal, TIMEOUT for the "still processing" overlay. Don't call
                // stopListening — we explicitly need the next event from SSE.
            },

            onSent: function(orderDetails) {
                clearPendingOrder();
                hidePaymentLoader();
                UTM.orderState.isPaid = true;
                var sType = (UTM.orderState.simType || "").toLowerCase();
                var isPlastic = sType.includes("plastic") || sType.includes("new") || sType.includes("нова") || sType === "p";

                if (isPlastic) {
                    modalApi.open("modal-plastic");
                    if (window.UTM.OrderDisplay && window.UTM.OrderDisplay.displayPlasticSuccess) {
                        window.UTM.OrderDisplay.displayPlasticSuccess(orderDetails, UTM.orderState.simType);
                    }
                } else {
                    showOrderSuccess(activeModal, orderDetails);
                }
            },

            onError: function(error) {
                if (isPlasticOrder) {
                }
                // SSE error during redirect-to-payment is expected (the page is unloading).
                // Don't clear the pending order — resumePendingOrder needs it on return.
                if (navigatingToPayment && error && error.code === 'SSE_ERROR') {
                    return;
                }
                // SSE dropped after payment — try fetching result instead of showing error
                if (paidReceived && error && error.code === 'SSE_ERROR') {
                    var pendingUuid = orderData._generatedId;
                    if (pendingUuid && window.UTM.OrderAPI.getOrderDetails) {
                        window.UTM.OrderAPI.getOrderDetails(pendingUuid)
                            .then(function(orderDetails) {
                                hidePaymentLoader();
                                clearPendingOrder();
                                UTM.orderState.isPaid = true;
                                var s = (UTM.orderState.simType || "").toLowerCase();
                                var p = s.includes("plastic") || s.includes("new") || s.includes("нова") || s === "p";
                                if (p) {
                                    modalApi.open('modal-plastic');
                                    if (window.UTM.OrderDisplay && window.UTM.OrderDisplay.displayPlasticSuccess) {
                                        window.UTM.OrderDisplay.displayPlasticSuccess(orderDetails, UTM.orderState.simType);
                                    }
                                } else {
                                    showOrderSuccess(activeModal, orderDetails);
                                }
                            })
                            .catch(function() {
                                hidePaymentLoader();
                                clearPendingOrder();
                                showOrderError(activeModal, error);
                            });
                        return;
                    }
                }
                clearPendingOrder();
                hidePaymentLoader();
                showOrderError(activeModal, error);
            },

            onTimeout: function(eventData) {
                // 90s no-progress: payment provider went silent (saw this with City24).
                // Keep pending order in storage so resumePendingOrder can still recover
                // if the user reloads later — TTL handles cleanup.
                hidePaymentLoader();
                showThankYouOverlay("Ваш платіж ще в обробці, згодом ви отримаєте деталі на вказаний Email.");
            },

            onStatusUpdate: function(eventData) {
                // Can show loading state or progress here
            }
        });
    };

    qsa("input[type='tel']").forEach(bindPhoneMask);

    // Nova Poshta Setup (All modals)
    function resetNPField(select) {
        if (!select) return;
        select.value = "";
        delete select.dataset.manualInput;
        // Trigger change event so validation knows it's empty
        select.dispatchEvent(new Event("change"));
        
        var wrapper = select.closest(".np-select-wrapper") || select.parentElement;
        if (wrapper) {
            var display = qs(".np-select-display", wrapper);
            if (display) {
                if (display.tagName === "INPUT") display.value = "";
                else {
                    display.textContent = select.getAttribute("placeholder") || "Оберіть зі списку";
                    display.classList.add("placeholder");
                } 
            }
            var search = qs(".np-select-search", wrapper);
            if (search) search.value = "";
            var results = qs(".np-select-results", wrapper);
            if (results) results.innerHTML = "";
            
            // Also hide dropdown if open
            var dropdown = qs(".np-select-dropdown", wrapper);
            if (dropdown) dropdown.style.display = "none";
        }
    }

    function clearDependentFields(dlg) {
        qsa("#Department", dlg).forEach(el => resetNPField(el));
        qsa("#Address", dlg).forEach(el => resetNPField(el));
    }

    // 1. Initialize City Autocomplete
    qsa("#City").forEach(citySel => {
        initNPAutocomplete(citySel, (q, page, limit) => npFetch("/shipments/providers/novaPost/cities", { filter: { searchQuery: q }, page: page, limit: limit }));

        citySel.addEventListener("change", () => {
             var dlg = citySel.closest(".modal__dialog") || citySel.closest(".modal");
             var val = citySel.value;
             
             // Update state
             if (!val.startsWith("manual:")) {
                 UTM.orderState.cityId = val;
             }
             
             // Clear dependents whenever city changes
             if (dlg) clearDependentFields(dlg);
        });
    });

    // 2. Initialize Department Autocomplete (Dynamic CityID)
    qsa("#Department").forEach(target => {
        initNPAutocomplete(target, (q, page, limit) => {
             var dlg = target.closest(".modal__dialog") || target.closest(".modal");
             var cityId = qs("#City", dlg)?.value;
             
             // Check if manual city or no city
             if (!cityId || cityId.startsWith("manual:")) {
                 return Promise.resolve([]);
             }
             
             return npFetch("/shipments/providers/novaPost/branches", { cityId, filter: { searchQuery: q }, page: page, limit: limit });
        });
    });

    // 3. Initialize Address Autocomplete (Dynamic CityID)
    qsa("#Address").forEach(target => {
        initNPAutocomplete(target, (q, page, limit) => {
             var dlg = target.closest(".modal__dialog") || target.closest(".modal");
             var cityId = qs("#City", dlg)?.value;

             if (!cityId || cityId.startsWith("manual:")) {
                 return Promise.resolve([]);
             }

             return npFetch("/shipments/providers/novaPost/streets", { cityId, filter: { searchQuery: q }, page: page, limit: limit });
        });
    });

    // Delivery Type Toggle (Courier vs Pickup)
    function updateDeliveryVisibility(radio) {
        var dlg = radio.closest(".modal__dialog") || radio.closest(".modal");
        if (!dlg) return;
        var mode = radio.value; // "courier" or "pickup"

        var deptSection = dlg.querySelector(".is--department");
        var addrSection = dlg.querySelector(".modal-delivery_address-wrapper");
        var mainContainer = dlg.querySelector(".modal-delivery_address");

        if (mainContainer) mainContainer.style.display = "block";

        if (mode === "pickup") {
            if (deptSection) {
                deptSection.style.display = "block";
                qsa("input, select, .np-select-display", deptSection).forEach(i => {
                    if (i.tagName === "INPUT" || i.tagName === "SELECT") {
                        i.required = true; i.disabled = false;
                    }
                });
            }
            if (addrSection) {
                addrSection.style.display = "none";
                qsa("input, select, .np-select-display", addrSection).forEach(i => {
                    if (i.tagName === "INPUT" || i.tagName === "SELECT") {
                        i.required = false; i.disabled = true;
                        // Clear value when hiding to avoid sending wrong data
                        if (i.tagName === "INPUT") i.value = "";
                        // Reset address select using our helper
                        if (i.id === "Address") resetNPField(i);
                    }
                });
            }
        } else if (mode === "courier") {
            if (deptSection) {
                deptSection.style.display = "none";
                qsa("input, select, .np-select-display", deptSection).forEach(i => {
                    if (i.tagName === "INPUT" || i.tagName === "SELECT") {
                        i.required = false; i.disabled = true;
                        // Clear value when hiding to avoid sending wrong data
                        if (i.tagName === "SELECT") {
                            i.selectedIndex = -1;
                            if (i.id === "Department") resetNPField(i);
                        }
                    }
                });
            }
            if (addrSection) {
                addrSection.style.display = "block";
                
                // ✅ Enable ALL inputs in address section (Robust Fix)
                // Explicitly targeting search and display inputs to ensure they are unlocked
                var inputsToEnable = qsa("input, select, textarea, button, .np-select-search, .np-select-display", addrSection);
                
                inputsToEnable.forEach(i => {
                    // Enable interaction - remove attributes explicitly
                    i.disabled = false;
                    i.removeAttribute("disabled");
                    
                    i.readOnly = false;
                    i.removeAttribute("readonly");
                    
                    i.style.pointerEvents = "auto";
                    i.classList.remove("is-disabled");
                    
                    // Set required for inputs (except Flat which is optional, and search inputs which don't need required)
                    if (i.tagName === "INPUT" || i.tagName === "SELECT") {
                        // Don't mark search inputs as required
                        if (i.classList.contains("np-select-search")) {
                            i.required = false;
                            i.removeAttribute("required");
                        } else if (i.id !== "Flat") {
                            i.required = true;
                            // Also set attribute for styling
                            i.setAttribute("required", "required");
                        }
                    }

                    // Force reset Address field to ensure clean state
                    // Only do this if it's the SELECT element
                    if (i.tagName === "SELECT" && i.id === "Address" && !i.value) {
                         resetNPField(i);
                    }
                });
            }
        }

        var step = radio.closest(".modal-step, .modal-step-esim");
        if (step) refreshValidation(step);
    }

    // On mobile, after the user picks a delivery method, the address fields appear below
    // and are usually scrolled out of view. Bring them into the viewport so the user sees
    // what to fill next instead of having to scroll manually.
    function scrollDeliveryAddressIntoView(radio) {
        if (!/iPhone|iPad|iPod|Android/i.test(navigator.userAgent || "")) return;
        var dlg = radio.closest(".modal__dialog") || radio.closest(".modal");
        if (!dlg) return;
        var addressBlock = dlg.querySelector(".modal-delivery_address");
        if (!addressBlock) return;
        setTimeout(function () {
            try { addressBlock.scrollIntoView({ block: "start", behavior: "smooth" }); }
            catch (e) { addressBlock.scrollIntoView(); }
        }, 80);
    }

    document.addEventListener("change", e => {
        if (e.target.name === "Delivery-Type") {
            updateDeliveryVisibility(e.target);
            scrollDeliveryAddressIntoView(e.target);
        }
    });

    document.addEventListener("click", e => {
        var radioWrap = e.target.closest(".w-radio");
        if (radioWrap) {
            var input = radioWrap.querySelector('input[name="Delivery-Type"]');
            if (input) setTimeout(function () {
                updateDeliveryVisibility(input);
                scrollDeliveryAddressIntoView(input);
            }, 50);
        }
    });

    // Init visibility for any pre-checked radios
    qsa('input[name="Delivery-Type"]:checked').forEach(updateDeliveryVisibility);

    // --- GLOBAL FORM SUBMIT DISABLE ---
    // Prevent ANY Webflow form from submitting in any case
    document.addEventListener("submit", function (e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }, true);

    window.UTM.modalApi = modalApi;

    // --- MOBILE: keep focused field above virtual keyboard ---
    // iOS Safari doesn't auto-scroll fields inside fixed-position modal dialogs,
    // so radios/inputs at the bottom of the delivery modal get covered by the keyboard.
    // Fix: give the dialog scroll-headroom while typing, then scrollIntoView the focused field
    // after the keyboard finishes animating (~250ms on iOS, ~150ms on Android).
    // Styles for .modal__dialog (scroll-padding-bottom) and .modal__dialog.utm-kbd-open
    // are defined in the Webflow Custom Code <style> block.
    (function setupMobileKeyboardScroll() {
        var ua = navigator.userAgent || "";
        var isMobile = /iPhone|iPad|iPod|Android/i.test(ua);
        if (!isMobile) return;

        var FIELD_SEL = "input:not([type='hidden']):not([type='radio']):not([type='checkbox']),select,textarea,[contenteditable='true'],.np-select-search";

        document.addEventListener("focusin", function (e) {
            var t = e.target;
            if (!t || !t.matches || !t.matches(FIELD_SEL)) return;
            var dlg = t.closest(".modal__dialog");
            if (!dlg) return;
            dlg.classList.add("utm-kbd-open");
            setTimeout(function () {
                try { t.scrollIntoView({ block: "center", behavior: "smooth" }); }
                catch (err) { t.scrollIntoView(); }
            }, 320);
        });

        document.addEventListener("focusout", function () {
            setTimeout(function () {
                var ae = document.activeElement;
                if (!ae || !ae.matches || !ae.matches(FIELD_SEL)) {
                    qsa(".modal__dialog.utm-kbd-open").forEach(function (el) {
                        el.classList.remove("utm-kbd-open");
                    });
                }
            }, 150);
        });
    })();

    // --- A11y: Escape closes, Tab traps focus inside the open modal ---
    (function setupModalKeyboardA11y() {
        var FOCUSABLE_SEL = 'a[href]:not([tabindex="-1"]),' +
            'button:not([disabled]):not([tabindex="-1"]),' +
            'input:not([disabled]):not([type="hidden"]):not([tabindex="-1"]),' +
            'select:not([disabled]):not([tabindex="-1"]),' +
            'textarea:not([disabled]):not([tabindex="-1"]),' +
            '[tabindex]:not([tabindex="-1"])';

        function getOpenDialog() {
            return document.querySelector(".modal__dialog.is-open");
        }

        function getVisibleFocusables(root) {
            return qsa(FOCUSABLE_SEL, root).filter(function (el) {
                // Skip elements inside hidden steps / collapsed accordions.
                if (el.offsetParent === null && el.tagName !== "BODY") return false;
                if (el.getAttribute("aria-hidden") === "true") return false;
                return true;
            });
        }

        document.addEventListener("keydown", function (e) {
            var dlg = getOpenDialog();
            if (!dlg) return;

            if (e.key === "Escape" || e.key === "Esc") {
                e.preventDefault();
                modalApi.close();
                return;
            }

            if (e.key !== "Tab") return;

            var focusables = getVisibleFocusables(dlg);
            if (focusables.length === 0) {
                e.preventDefault();
                return;
            }
            var first = focusables[0];
            var last  = focusables[focusables.length - 1];
            var active = document.activeElement;

            // If focus escaped the modal entirely, pull it back to the first focusable.
            if (!dlg.contains(active)) {
                e.preventDefault();
                first.focus();
                return;
            }

            if (e.shiftKey && active === first) {
                e.preventDefault();
                last.focus();
            } else if (!e.shiftKey && active === last) {
                e.preventDefault();
                first.focus();
            }
        });
    })();

    // --- Scroll lock for Webflow native nav (mobile hamburger) ---
    // Webflow toggles `w--open` on `.w-nav-button` (the hamburger), not on `.w-nav` itself.
    // Style rules for `body.utm-nav-open` are defined in the Webflow Custom Code <style> block.
    (function setupNavScrollLock() {
        var buttons = qsa(".w-nav-button");
        if (!buttons.length) return;

        function sync() {
            var anyOpen = buttons.some(function (b) { return b.classList.contains("w--open"); });
            document.body.classList.toggle("utm-nav-open", anyOpen);
        }

        var observer = new MutationObserver(sync);
        buttons.forEach(function (b) {
            observer.observe(b, { attributes: true, attributeFilter: ["class"] });
        });
        sync();
    })();

    // Resume any pending order from previous page session
    resumePendingOrder();
})();