{"id":904,"date":"2026-08-01T21:50:46","date_gmt":"2026-08-01T21:50:46","guid":{"rendered":"https:\/\/personalizemyride.com\/?page_id=904"},"modified":"2026-08-03T20:36:16","modified_gmt":"2026-08-03T20:36:16","slug":"menus","status":"publish","type":"page","link":"https:\/\/personalizemyride.com\/?page_id=904","title":{"rendered":"Custom Text"},"content":{"rendered":"\n<div data-block-name=\"woocommerce\/single-product\" data-product-id=\"897\" data-wp-context=\"woocommerce\/products::{&quot;productId&quot;:897,&quot;variationId&quot;:null}\" data-wp-interactive=\"woocommerce\/single-product\" class=\"wp-block-woocommerce-single-product woocommerce\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div data-block-name=\"woocommerce\/product-gallery\" data-wp-context=\"{&quot;imageData&quot;:[0],&quot;isDialogOpen&quot;:false,&quot;isDragging&quot;:false,&quot;touchStartX&quot;:0,&quot;touchCurrentX&quot;:0,&quot;productId&quot;:&quot;897&quot;,&quot;selectedImageId&quot;:0,&quot;thumbnailsOverflow&quot;:{&quot;top&quot;:false,&quot;bottom&quot;:false,&quot;left&quot;:false,&quot;right&quot;:false},&quot;hideNextPreviousButtons&quot;:true,&quot;isDisabledPrevious&quot;:true,&quot;isDisabledNext&quot;:true,&quot;ariaLabelPrevious&quot;:&quot;Previous image&quot;,&quot;ariaLabelNext&quot;:&quot;Next image&quot;}\" data-wp-interactive=\"woocommerce\/product-gallery\" class=\"wp-block-woocommerce-product-gallery wc-block-product-gallery  is-single-product-gallery-image is-layout-flex wp-container-woocommerce-product-gallery-is-layout-b407a2ef wp-block-woocommerce-product-gallery-is-layout-flex\">\n\n\t\t\t<div data-block-name=\"woocommerce\/product-gallery-large-image\" class=\"wc-block-product-gallery-large-image wp-block-woocommerce-product-gallery-large-image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wc-block-product-gallery-large-image__inner-blocks\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<dialog inert\n\t\t\t\tdata-wp-bind--open=\"context.isDialogOpen\"\n\t\t\t\tdata-wp-bind--inert=\"!context.isDialogOpen\"\n\t\t\t\tdata-wp-on--close=\"actions.closeDialog\"\n\t\t\t\tdata-wp-on--keydown=\"actions.onDialogKeyDown\"\n\t\t\t\tdata-wp-watch=\"callbacks.dialogStateChange\"\n\t\t\t\tclass=\"wc-block-product-gallery-dialog\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\taria-label=\"Product Gallery\">\n\t\t\t\t<div class=\"wc-block-product-gallery-dialog__header\">\n\t\t\t\t\t<button class=\"wc-block-product-gallery-dialog__close-button\" data-wp-on--click=\"actions.closeDialog\" aria-label=\"Close dialog\">\n\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t\t\t<path d=\"M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z\"><\/path>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"wc-block-product-gallery-dialog__content\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img data-image-id='0' data-wp-watch='callbacks.toggleImageVisibility' src='https:\/\/personalizemyride.com\/wp-content\/uploads\/woocommerce-placeholder.webp' srcset='' sizes='' decoding='async' alt='' \/>\t\t\t\t<\/div>\n\t\t\t<\/dialog>\n\t\t<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><h2 class=\"has-text-align-center wp-block-post-title\">Custom Text Decals<\/h2>\n\n<div data-block-name=\"woocommerce\/product-price\" data-is-descendent-of-single-product-block=\"true\" data-text-align=\"center\" class=\"has-text-align-center wp-block-woocommerce-product-price\" ><div class=\"wc-block-components-product-price wc-block-grid__product-price\" >\n\t\t\t\t\t<span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\" translate=\"no\">&#36;<\/span>0.00<\/bdi><\/span>\n\t\t\t\t<\/div><\/div>\n\n\n\n<form data-block-name=\"woocommerce\/add-to-cart-with-options\" class=\"wp-block-add-to-cart-with-options wc-block-add-to-cart-with-options cart is-layout-flow wp-block-woocommerce-add-to-cart-with-options\" data-wp-interactive=\"woocommerce\/add-to-cart-with-options\" data-wp-class--is-invalid=\"!state.isFormValid\" action=\"https:\/\/personalizemyride.com\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F904\" method=\"post\" enctype=\"multipart\/form-data\" data-wp-context='{\"quantity\":{\"897\":1},\"validationErrors\":[]}'>        <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&amp;family=Bebas+Neue&amp;family=Black+Ops+One&amp;family=Cabin:wght@700&amp;family=Changa+One&amp;family=Chewy&amp;family=Cinzel:wght@700&amp;family=Comfortaa:wght@700&amp;family=Cookie&amp;family=Courgette&amp;family=Creepster&amp;family=Dancing+Script:wght@700&amp;family=Fredoka&amp;family=Great+Vibes&amp;family=Lobster&amp;family=Montserrat:wght@700&amp;family=Orbitron:wght@700&amp;family=Oswald:wght@700&amp;family=Pacifico&amp;family=Permanent+Marker&amp;family=Playfair+Display:wght@700&amp;family=Press+Start+2P&amp;family=Righteous&amp;family=Roboto:wght@700&amp;family=Russo+One&amp;family=Sacramento&amp;family=Shadows+Into+Light&amp;family=Teko:wght@700&amp;family=Ubuntu:wght@700&amp;family=Yellowtail&#038;display=swap\" rel=\"stylesheet\">\r\n        <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n        <style>\r\n            @keyframes rainbowBorder {\r\n                0% { background-position: 0% 50%; }\r\n                50% { background-position: 100% 50%; }\r\n                100% { background-position: 0% 50%; }\r\n            }\r\n            .rainbow-field-wrap {\r\n                padding: 2px;\r\n                border-radius: 8px;\r\n                background: linear-gradient(270deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff);\r\n                background-size: 400% 400%;\r\n                animation: rainbowBorder 6s ease infinite;\r\n                margin-bottom: 12px;\r\n            }\r\n            .rainbow-field-inner {\r\n                width: 100%;\r\n                padding: 10px;\r\n                border: none;\r\n                border-radius: 6px;\r\n                font-size: 16px;\r\n                background: #fff;\r\n                color: #000;\r\n                box-sizing: border-box;\r\n            }\r\n            select.rainbow-field-inner {\r\n                font-size: 14px;\r\n            }\r\n            .line-builder-row {\r\n                background: #fdfdfd;\r\n                border: 1px solid #e5e7eb;\r\n                border-radius: 8px;\r\n                padding: 12px;\r\n                margin-bottom: 12px;\r\n                position: relative;\r\n            }\r\n            .line-builder-row h4 {\r\n                margin: 0 0 8px 0;\r\n                font-size: 13px;\r\n                color: #4b5563;\r\n                display: flex;\r\n                justify-content: space-between;\r\n                align-items: center;\r\n            }\r\n            .remove-line-btn {\r\n                background: #fee2e2;\r\n                color: #dc2626;\r\n                border: none;\r\n                border-radius: 4px;\r\n                padding: 2px 8px;\r\n                cursor: pointer;\r\n                font-size: 11px;\r\n                font-weight: bold;\r\n            }\r\n            .remove-line-btn:hover { background: #fecaca; }\r\n\r\n            \/* Custom Visual Font Dropdown Styling *\/\r\n            .custom-font-dropdown {\r\n                position: relative;\r\n                width: 100%;\r\n                user-select: none;\r\n            }\r\n            .custom-font-selected {\r\n                background: #fff;\r\n                border: none;\r\n                border-radius: 6px;\r\n                padding: 8px 10px;\r\n                font-size: 13px;\r\n                cursor: pointer;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: space-between;\r\n                box-sizing: border-box;\r\n                color: #000;\r\n                min-height: 38px;\r\n            }\r\n            .custom-font-options {\r\n                display: none;\r\n                position: absolute;\r\n                top: 100%;\r\n                left: 0;\r\n                right: 0;\r\n                background: #fff;\r\n                border: 1px solid #d1d5db;\r\n                border-radius: 6px;\r\n                max-height: 220px;\r\n                overflow-y: auto;\r\n                z-index: 99;\r\n                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n                margin-top: 2px;\r\n            }\r\n            .custom-font-option {\r\n                padding: 8px 12px;\r\n                cursor: pointer;\r\n                font-size: 15px;\r\n                color: #111827;\r\n            }\r\n            .custom-font-option:hover {\r\n                background: #f3f4f6;\r\n            }\r\n        <\/style>\r\n\r\n        <div id=\"vinylBuilderRoot\" style=\"margin: 20px auto; text-align: left; width: 100%; max-width: 450px; box-sizing: border-box; font-family: sans-serif;\">\r\n            \r\n            <div style=\"margin-bottom: 15px;\">\r\n                <label style=\"display: block; font-weight: bold; margin-bottom: 6px; color: #333; font-size: 14px;\">Decal Lines (Text):<\/label>\r\n                <div id=\"linesContainer\"><\/div>\r\n            <\/div>\r\n\r\n            <div style=\"display: flex; gap: 10px; margin-bottom: 15px;\">\r\n                <div style=\"flex: 1;\">\r\n                    <label style=\"display: block; font-weight: bold; margin-bottom: 6px; color: #333; font-size: 14px;\">Length (in):<\/label>\r\n                    <div class=\"rainbow-field-wrap\" style=\"margin-bottom: 0;\">\r\n                        <select id=\"realVinylLength\" name=\"custom_decal_length\" class=\"rainbow-field-inner\">\r\n                                                            <option value=\"6\" >6&#8243;<\/option>\r\n                                                            <option value=\"7\" >7&#8243;<\/option>\r\n                                                            <option value=\"8\" >8&#8243;<\/option>\r\n                                                            <option value=\"9\" >9&#8243;<\/option>\r\n                                                            <option value=\"10\" >10&#8243;<\/option>\r\n                                                            <option value=\"11\" >11&#8243;<\/option>\r\n                                                            <option value=\"12\"  selected='selected'>12&#8243;<\/option>\r\n                                                            <option value=\"13\" >13&#8243;<\/option>\r\n                                                            <option value=\"14\" >14&#8243;<\/option>\r\n                                                            <option value=\"15\" >15&#8243;<\/option>\r\n                                                            <option value=\"16\" >16&#8243;<\/option>\r\n                                                            <option value=\"17\" >17&#8243;<\/option>\r\n                                                            <option value=\"18\" >18&#8243;<\/option>\r\n                                                            <option value=\"19\" >19&#8243;<\/option>\r\n                                                            <option value=\"20\" >20&#8243;<\/option>\r\n                                                            <option value=\"21\" >21&#8243;<\/option>\r\n                                                            <option value=\"22\" >22&#8243;<\/option>\r\n                                                            <option value=\"23\" >23&#8243;<\/option>\r\n                                                            <option value=\"24\" >24&#8243;<\/option>\r\n                                                            <option value=\"25\" >25&#8243;<\/option>\r\n                                                            <option value=\"26\" >26&#8243;<\/option>\r\n                                                            <option value=\"27\" >27&#8243;<\/option>\r\n                                                            <option value=\"28\" >28&#8243;<\/option>\r\n                                                            <option value=\"29\" >29&#8243;<\/option>\r\n                                                            <option value=\"30\" >30&#8243;<\/option>\r\n                                                            <option value=\"31\" >31&#8243;<\/option>\r\n                                                            <option value=\"32\" >32&#8243;<\/option>\r\n                                                            <option value=\"33\" >33&#8243;<\/option>\r\n                                                            <option value=\"34\" >34&#8243;<\/option>\r\n                                                            <option value=\"35\" >35&#8243;<\/option>\r\n                                                            <option value=\"36\" >36&#8243;<\/option>\r\n                                                            <option value=\"37\" >37&#8243;<\/option>\r\n                                                            <option value=\"38\" >38&#8243;<\/option>\r\n                                                            <option value=\"39\" >39&#8243;<\/option>\r\n                                                            <option value=\"40\" >40&#8243;<\/option>\r\n                                                            <option value=\"41\" >41&#8243;<\/option>\r\n                                                            <option value=\"42\" >42&#8243;<\/option>\r\n                                                            <option value=\"43\" >43&#8243;<\/option>\r\n                                                            <option value=\"44\" >44&#8243;<\/option>\r\n                                                            <option value=\"45\" >45&#8243;<\/option>\r\n                                                            <option value=\"46\" >46&#8243;<\/option>\r\n                                                            <option value=\"47\" >47&#8243;<\/option>\r\n                                                            <option value=\"48\" >48&#8243;<\/option>\r\n                                                    <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n                <div style=\"flex: 1;\">\r\n                    <label style=\"display: block; font-weight: bold; margin-bottom: 6px; color: #333; font-size: 14px;\">Height (in):<\/label>\r\n                    <div class=\"rainbow-field-wrap\" style=\"margin-bottom: 0;\">\r\n                        <select id=\"realVinylHeight\" name=\"custom_decal_height\" class=\"rainbow-field-inner\">\r\n                                                            <option value=\"1\" >1&#8243;<\/option>\r\n                                                            <option value=\"2\" >2&#8243;<\/option>\r\n                                                            <option value=\"3\" >3&#8243;<\/option>\r\n                                                            <option value=\"4\"  selected='selected'>4&#8243;<\/option>\r\n                                                            <option value=\"5\" >5&#8243;<\/option>\r\n                                                            <option value=\"6\" >6&#8243;<\/option>\r\n                                                            <option value=\"7\" >7&#8243;<\/option>\r\n                                                            <option value=\"8\" >8&#8243;<\/option>\r\n                                                            <option value=\"9\" >9&#8243;<\/option>\r\n                                                            <option value=\"10\" >10&#8243;<\/option>\r\n                                                            <option value=\"11\" >11&#8243;<\/option>\r\n                                                            <option value=\"12\" >12&#8243;<\/option>\r\n                                                            <option value=\"13\" >13&#8243;<\/option>\r\n                                                            <option value=\"14\" >14&#8243;<\/option>\r\n                                                            <option value=\"15\" >15&#8243;<\/option>\r\n                                                            <option value=\"16\" >16&#8243;<\/option>\r\n                                                            <option value=\"17\" >17&#8243;<\/option>\r\n                                                            <option value=\"18\" >18&#8243;<\/option>\r\n                                                    <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div style=\"display: flex; gap: 10px; margin-bottom: 15px;\">\r\n                <div style=\"flex: 1;\">\r\n                    <label style=\"display: block; font-weight: bold; margin-bottom: 6px; color: #333; font-size: 14px;\">Line Spacing:<\/label>\r\n                    <div class=\"rainbow-field-wrap\" style=\"margin-bottom: 0;\">\r\n                        <select id=\"realVinylLineSpacing\" name=\"custom_decal_spacing\" class=\"rainbow-field-inner\">\r\n                            <option value=\"1.0\">Compact (1.0)<\/option>\r\n                            <option value=\"1.2\" selected>Normal (1.2)<\/option>\r\n                            <option value=\"1.5\">Relaxed (1.5)<\/option>\r\n                            <option value=\"2.0\">Double (2.0)<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n                <div style=\"flex: 1;\">\r\n                    <label style=\"display: block; font-weight: bold; margin-bottom: 6px; color: #333; font-size: 14px;\">Text Alignment:<\/label>\r\n                    <div class=\"rainbow-field-wrap\" style=\"margin-bottom: 0;\">\r\n                        <select id=\"realVinylAlignment\" name=\"custom_decal_alignment\" class=\"rainbow-field-inner\">\r\n                            <option value=\"center\" selected>Center<\/option>\r\n                            <option value=\"left\">Left<\/option>\r\n                            <option value=\"right\">Right<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div style=\"display: flex; gap: 10px; margin-bottom: 15px;\">\r\n                <div style=\"flex: 1;\">\r\n                <!--    <label style=\"display: block; font-weight: bold; margin-bottom: 6px; color: #333; font-size: 14px;\">Canvas Background Color:<\/label> -->\r\n                    <div class=\"rainbow-field-wrap\" style=\"margin-bottom: 0; background: #fff; padding: 6px; display: flex; align-items: center; gap: 8px;\">\r\n                        <input type=\"color\" id=\"realVinylBgColorPicker\" value=\"#ffffff\" style=\"width: 0px; height: 0px; border: none; border-radius: 4px; cursor: pointer; background: none;\">\r\n                        <button type=\"button\" id=\"transparentBgBtn\" style=\"background: #f3f4f6; border: 0px solid #d1d5db; padding: 0px 0px; border-radius: 4px; font-size: 12px; cursor: pointer; font-weight: bold;\"><\/button> \r\n                    <\/div> \r\n                <\/div>\r\n                <div style=\"flex: 1;\">\r\n                <!--    <label style=\"display: block; font-weight: bold; margin-bottom: 6px; color: #333; font-size: 14px;\">Upload BG Photo:<\/label> -->\r\n                <!--    <div class=\"rainbow-field-wrap\" style=\"margin-bottom: 0; background: #fff; padding: 6px;\"> \r\n                        <input type=\"file\" id=\"realVinylBgUpload\" accept=\".pdf,.png,.jpg,.jpeg,.heic,.svg\" style=\"font-size: 12px; width: 100%;\">\r\n                    <\/div> -->\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Background Image Fit, Opacity, Blur, and Brightness Controls (Hidden until photo uploaded) -->\r\n            <div id=\"bgEnhancePanel\" style=\"display: none; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 15px;\">\r\n                <span style=\"display: block; font-weight: bold; margin-bottom: 8px; color: #333; font-size: 13px;\">Background Image Adjustments:<\/span>\r\n                \r\n                <div style=\"margin-bottom: 10px;\">\r\n                    <label style=\"display: block; font-size: 12px; font-weight: bold; color: #4b5563; margin-bottom: 4px;\">Fit Mode:<\/label>\r\n                    <select id=\"bgFitMode\" class=\"rainbow-field-inner\" style=\"padding: 6px; font-size: 13px;\">\r\n                        <option value=\"cover\" selected>Fit Cover (Fill Area)<\/option>\r\n                        <option value=\"contain\">Fit Contain (Show Entire Image)<\/option>\r\n                        <option value=\"fill\">Fit Fill (Stretch to Bounds)<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n\r\n                <div style=\"display: flex; gap: 10px; margin-bottom: 8px;\">\r\n                    <div style=\"flex: 1;\">\r\n                        <label style=\"display: block; font-size: 11px; font-weight: bold; color: #4b5563; margin-bottom: 2px;\">Opacity (<span id=\"bgOpacityVal\">100<\/span>%)<\/label>\r\n                        <input type=\"range\" id=\"bgOpacityRange\" min=\"0\" max=\"100\" value=\"100\" step=\"1\" style=\"width: 100%;\">\r\n                    <\/div>\r\n                    <div style=\"flex: 1;\">\r\n                        <label style=\"display: block; font-size: 11px; font-weight: bold; color: #4b5563; margin-bottom: 2px;\">Blur (<span id=\"bgBlurVal\">0<\/span>px)<\/label>\r\n                        <input type=\"range\" id=\"bgBlurRange\" min=\"0\" max=\"20\" value=\"0\" step=\"1\" style=\"width: 100%;\">\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <label style=\"display: block; font-size: 11px; font-weight: bold; color: #4b5563; margin-bottom: 2px;\">Brightness (<span id=\"bgBrightnessVal\">100<\/span>%)<\/label>\r\n                    <input type=\"range\" id=\"bgBrightnessRange\" min=\"0\" max=\"200\" value=\"100\" step=\"5\" style=\"width: 100%;\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- View window wrapper -->\r\n            <div style=\"position: relative; width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box;\">\r\n                <span style=\"display: block; font-weight: bold; margin-bottom: 8px; color: #333; font-size: 14px;\">Live Preview:<\/span>\r\n                <div id=\"realVinylContainer\" style=\"border: 2px dashed #4b5563; width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box; overflow: hidden; position: relative; background-color: #ffffff;\">\r\n                    <svg id=\"liveSvgCanvas\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" width=\"100%\" height=\"100%\" style=\"display: block; position: absolute; top: 0; left: 0;\"><\/svg>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <input type=\"hidden\" id=\"decalLinesPayload\" name=\"custom_decal_lines_json\" value=\"\">\r\n            <input type=\"hidden\" id=\"decalBgData\" name=\"custom_decal_bg\" value=\"\">\r\n            <input type=\"hidden\" id=\"decalPdfData\" name=\"custom_decal_pdf\" value=\"\">\r\n        <\/div>\r\n\r\n        <script>\r\n        window.addEventListener('load', function() {\r\n            var linesContainer = document.getElementById('linesContainer');\r\n            var lengthSelect = document.getElementById('realVinylLength');\r\n            var heightSelect = document.getElementById('realVinylHeight');\r\n            var lineSpacingSelect = document.getElementById('realVinylLineSpacing');\r\n            var alignmentSelect = document.getElementById('realVinylAlignment');\r\n            var bgColorPicker = document.getElementById('realVinylBgColorPicker');\r\n            var transparentBgBtn = document.getElementById('transparentBgBtn');\r\n            var bgUploadInput = document.getElementById('realVinylBgUpload');\r\n            var previewContainer = document.getElementById('realVinylContainer');\r\n            var liveSvgCanvas = document.getElementById('liveSvgCanvas');\r\n            var bgEnhancePanel = document.getElementById('bgEnhancePanel');\r\n            var bgFitMode = document.getElementById('bgFitMode');\r\n            var bgOpacityRange = document.getElementById('bgOpacityRange');\r\n            var bgOpacityVal = document.getElementById('bgOpacityVal');\r\n            var bgBlurRange = document.getElementById('bgBlurRange');\r\n            var bgBlurVal = document.getElementById('bgBlurVal');\r\n            var bgBrightnessRange = document.getElementById('bgBrightnessRange');\r\n            var bgBrightnessVal = document.getElementById('bgBrightnessVal');\r\n            var pdfInput = document.getElementById('decalPdfData');\r\n            var bgInput = document.getElementById('decalBgData');\r\n            var linesPayloadInput = document.getElementById('decalLinesPayload');\r\n\r\n            if (!linesContainer || !liveSvgCanvas) return;\r\n\r\n            var fontList = [\r\n                {name: 'Montserrat Bold', val: \"'Montserrat', sans-serif\", weight: '700'},\r\n                {name: 'Bebas Neue', val: \"'Bebas Neue', sans-serif\", weight: '400'},\r\n                {name: 'Anton', val: \"'Anton', sans-serif\", weight: '400'},\r\n                {name: 'Oswald', val: \"'Oswald', sans-serif\", weight: '700'},\r\n                {name: 'Roboto Bold', val: \"'Roboto', sans-serif\", weight: '700'},\r\n                {name: 'Black Ops One', val: \"'Black Ops One', cursive\", weight: '400'},\r\n                {name: 'Permanent Marker', val: \"'Permanent Marker', cursive\", weight: '400'},\r\n                {name: 'Pacifico', val: \"'Pacifico', cursive\", weight: '400'},\r\n                {name: 'Playfair Display', val: \"'Playfair Display', serif\", weight: '700'},\r\n                {name: 'Lobster', val: \"'Lobster', cursive\", weight: '400'},\r\n                {name: 'Russo One', val: \"'Russo One', sans-serif\", weight: '400'},\r\n                {name: 'Righteous', val: \"'Righteous', cursive\", weight: '400'},\r\n                {name: 'Teko', val: \"'Teko', sans-serif\", weight: '700'},\r\n                {name: 'Orbitron', val: \"'Orbitron', sans-serif\", weight: '700'},\r\n                {name: 'Cinzel', val: \"'Cinzel', serif\", weight: '700'},\r\n                {name: 'Dancing Script', val: \"'Dancing Script', cursive\", weight: '700'},\r\n                {name: 'Great Vibes', val: \"'Great Vibes', cursive\", weight: '400'},\r\n                {name: 'Sacramento', val: \"'Sacramento', cursive\", weight: '400'},\r\n                {name: 'Yellowtail', val: \"'Yellowtail', cursive\", weight: '400'},\r\n                {name: 'Cookie', val: \"'Cookie', cursive\", weight: '400'},\r\n                {name: 'Courgette', val: \"'Courgette', cursive\", weight: '400'},\r\n                {name: 'Chewy', val: \"'Chewy', cursive\", weight: '400'},\r\n                {name: 'Creepster', val: \"'Creepster', cursive\", weight: '400'},\r\n                {name: 'Shadows Into Light', val: \"'Shadows Into Light', cursive\", weight: '400'},\r\n                {name: 'Comfortaa', val: \"'Comfortaa', cursive\", weight: '700'},\r\n                {name: 'Ubuntu Bold', val: \"'Ubuntu', sans-serif\", weight: '700'},\r\n                {name: 'Cabin Bold', val: \"'Cabin', sans-serif\", weight: '700'},\r\n                {name: 'Changa One', val: \"'Changa One', cursive\", weight: '400'},\r\n                {name: 'Fredoka One', val: \"'Fredoka', cursive\", weight: '400'},\r\n                {name: 'Press Start 2P', val: \"'Press Start 2P', cursive\", weight: '400'}\r\n            ];\r\n\r\n            var currentBgColor = '#ffffff';\r\n            var uploadedBgDataUrl = '';\r\n\r\n            function createLineRow(textVal = '', fontVal = \"'Montserrat', sans-serif\", lineScale = 1.0, offsetX = 0, offsetY = 0) {\r\n                var rowDiv = document.createElement('div');\r\n                rowDiv.className = 'line-builder-row';\r\n\r\n                var currentFontObj = fontList.find(function(f) { return f.val === fontVal; }) || fontList[0];\r\n\r\n                var fontOptionsHTML = '';\r\n                fontList.forEach(function(f) {\r\n                    fontOptionsHTML += '<div class=\"custom-font-option\" data-value=\"' + f.val + '\" data-weight=\"' + f.weight + '\" style=\"font-family: ' + f.val + '; font-weight: ' + f.weight + ';\">' + f.name + '<\/div>';\r\n                });\r\n\r\n                rowDiv.innerHTML = `\r\n                    <h4>\r\n                        <span>Line Item<\/span>\r\n                        <button type=\"button\" class=\"remove-line-btn\">Remove<\/button>\r\n                    <\/h4>\r\n                    <input type=\"text\" class=\"line-text rainbow-field-inner\" placeholder=\"Enter line text... (Press Enter for next line)\" value=\"${textVal}\" style=\"margin-bottom: 8px; padding: 6px 10px; font-size: 14px;\">\r\n                    \r\n                    <div class=\"rainbow-field-wrap\" style=\"margin-bottom: 8px;\">\r\n                        <div class=\"custom-font-dropdown\">\r\n                            <div class=\"custom-font-selected rainbow-field-inner\" style=\"font-family: ${currentFontObj.val}; font-weight: ${currentFontObj.weight};\">\r\n                                <span class=\"selected-font-text\">${currentFontObj.name}<\/span>\r\n                                <i class=\"fa-solid fa-chevron-down\" style=\"font-size: 10px; color: #6b7280;\"><\/i>\r\n                            <\/div>\r\n                            <div class=\"custom-font-options\">\r\n                                ${fontOptionsHTML}\r\n                            <\/div>\r\n                        <\/div>\r\n                        <input type=\"hidden\" class=\"line-font\" value=\"${fontVal}\" data-weight=\"${currentFontObj.weight}\">\r\n                    <\/div>\r\n\r\n                    <div style=\"margin-top: 6px; display: flex; align-items: center; gap: 8px;\">\r\n                        <span style=\"font-size: 12px; color: #4b5563; font-weight: bold;\">Line Size Multiplier:<\/span>\r\n                        <input type=\"range\" class=\"line-scale-range\" min=\"0.5\" max=\"3.0\" step=\"0.1\" value=\"${lineScale}\" style=\"flex: 1;\">\r\n                        <span class=\"line-scale-val\" style=\"font-size: 12px; width: 35px; text-align: right;\">${lineScale}x<\/span>\r\n                    <\/div>\r\n                    \r\n                    <!-- Individual Line Position Micro-Controls -->\r\n                    <div style=\"margin-top: 8px; border-top: 1px dashed #e5e7eb; padding-top: 6px; display: flex; align-items: center; justify-content: space-between;\">\r\n                        <span style=\"font-size: 11px; font-weight: bold; color: #6b7280;\">Line Offset (X \/ Y):<\/span>\r\n                        <div style=\"display: flex; gap: 4px; align-items: center;\">\r\n                            <button type=\"button\" class=\"line-move-up\" title=\"Move Line Up\" style=\"background: #111827; color: #fff; border: none; border-radius: 4px; width: 26px; height: 26px; font-size: 11px; cursor: pointer;\"><i class=\"fa-solid fa-arrow-up\"><\/i><\/button>\r\n                            <button type=\"button\" class=\"line-move-down\" title=\"Move Line Down\" style=\"background: #111827; color: #fff; border: none; border-radius: 4px; width: 26px; height: 26px; font-size: 11px; cursor: pointer;\"><i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n                            <button type=\"button\" class=\"line-move-left\" title=\"Move Line Left\" style=\"background: #111827; color: #fff; border: none; border-radius: 4px; width: 26px; height: 26px; font-size: 11px; cursor: pointer;\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/button>\r\n                            <button type=\"button\" class=\"line-move-right\" title=\"Move Line Right\" style=\"background: #111827; color: #fff; border: none; border-radius: 4px; width: 26px; height: 26px; font-size: 11px; cursor: pointer;\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/button>\r\n                            <button type=\"button\" class=\"line-reset-offset\" title=\"Reset Offset to Spacing\" style=\"background: #4b5563; color: #fff; border: none; border-radius: 4px; padding: 0 6px; height: 26px; font-size: 10px; font-weight: bold; cursor: pointer;\">Reset Offset<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <input type=\"hidden\" class=\"line-offset-x\" value=\"${offsetX}\">\r\n                    <input type=\"hidden\" class=\"line-offset-y\" value=\"${offsetY}\">\r\n                `;\r\n\r\n                rowDiv.querySelector('.remove-line-btn').addEventListener('click', function() {\r\n                    if (linesContainer.children.length > 1) {\r\n                        rowDiv.remove();\r\n                        updatePreview();\r\n                    } else {\r\n                        alert('You must have at least one line.');\r\n                    }\r\n                });\r\n\r\n                \/\/ Custom font dropdown interactivity logic\r\n                var fontDropdownRoot = rowDiv.querySelector('.custom-font-dropdown');\r\n                var fontSelectedBox = fontDropdownRoot.querySelector('.custom-font-selected');\r\n                var fontOptionsBox = fontDropdownRoot.querySelector('.custom-font-options');\r\n                var hiddenFontInput = rowDiv.querySelector('.line-font');\r\n\r\n                fontSelectedBox.addEventListener('click', function(e) {\r\n                    e.stopPropagation();\r\n                    document.querySelectorAll('.custom-font-options').forEach(function(opt) {\r\n                        if (opt !== fontOptionsBox) opt.style.display = 'none';\r\n                    });\r\n                    fontOptionsBox.style.display = (fontOptionsBox.style.display === 'block' ? 'none' : 'block');\r\n                });\r\n\r\n                fontOptionsBox.querySelectorAll('.custom-font-option').forEach(function(optElem) {\r\n                    optElem.addEventListener('click', function() {\r\n                        var val = optElem.getAttribute('data-value');\r\n                        var wt = optElem.getAttribute('data-weight');\r\n                        var fontName = optElem.innerText;\r\n\r\n                        hiddenFontInput.value = val;\r\n                        hiddenFontInput.setAttribute('data-weight', wt);\r\n                        \r\n                        fontSelectedBox.style.fontFamily = val;\r\n                        fontSelectedBox.style.fontWeight = wt;\r\n                        fontSelectedBox.querySelector('.selected-font-text').innerText = fontName;\r\n\r\n                        fontOptionsBox.style.display = 'none';\r\n                        updatePreview();\r\n                    });\r\n                });\r\n\r\n                var textInput = rowDiv.querySelector('.line-text');\r\n                textInput.addEventListener('input', updatePreview);\r\n                textInput.addEventListener('keydown', function(e) {\r\n                    if (e.key === 'Enter') {\r\n                        e.preventDefault();\r\n                        var newRow = createLineRow('');\r\n                        linesContainer.insertBefore(newRow, rowDiv.nextSibling);\r\n                        newRow.querySelector('.line-text').focus();\r\n                        updatePreview();\r\n                    }\r\n                });\r\n\r\n                var rangeInput = rowDiv.querySelector('.line-scale-range');\r\n                var rangeValLabel = rowDiv.querySelector('.line-scale-val');\r\n                rangeInput.addEventListener('input', function() {\r\n                    rangeValLabel.innerText = rangeInput.value + 'x';\r\n                    updatePreview();\r\n                });\r\n\r\n                var offsetXInput = rowDiv.querySelector('.line-offset-x');\r\n                var offsetYInput = rowDiv.querySelector('.line-offset-y');\r\n\r\n                rowDiv.querySelector('.line-move-up').addEventListener('click', function() {\r\n                    offsetYInput.value = parseInt(offsetYInput.value || 0) - 5;\r\n                    updatePreview();\r\n                });\r\n                rowDiv.querySelector('.line-move-down').addEventListener('click', function() {\r\n                    offsetYInput.value = parseInt(offsetYInput.value || 0) + 5;\r\n                    updatePreview();\r\n                });\r\n                rowDiv.querySelector('.line-move-left').addEventListener('click', function() {\r\n                    offsetXInput.value = parseInt(offsetXInput.value || 0) - 5;\r\n                    updatePreview();\r\n                });\r\n                rowDiv.querySelector('.line-move-right').addEventListener('click', function() {\r\n                    offsetXInput.value = parseInt(offsetXInput.value || 0) + 5;\r\n                    updatePreview();\r\n                });\r\n                rowDiv.querySelector('.line-reset-offset').addEventListener('click', function() {\r\n                    offsetXInput.value = 0;\r\n                    offsetYInput.value = 0;\r\n                    updatePreview();\r\n                });\r\n\r\n                linesContainer.appendChild(rowDiv);\r\n                return rowDiv;\r\n            }\r\n\r\n            document.addEventListener('click', function() {\r\n                document.querySelectorAll('.custom-font-options').forEach(function(opt) {\r\n                    opt.style.display = 'none';\r\n                });\r\n            });\r\n\r\n            createLineRow('Your Preview', \"'Montserrat', sans-serif\", 1.0, 0, 0);\r\n\r\n            bgColorPicker.addEventListener('input', function() {\r\n                currentBgColor = bgColorPicker.value;\r\n                previewContainer.style.backgroundColor = currentBgColor;\r\n                updatePreview();\r\n            });\r\n\r\n            transparentBgBtn.addEventListener('click', function() {\r\n                currentBgColor = 'transparent';\r\n                previewContainer.style.backgroundColor = 'transparent';\r\n                bgColorPicker.value = '#ffffff';\r\n                updatePreview();\r\n            });\r\n\r\n            if (bgUploadInput) {\r\n                bgUploadInput.addEventListener('change', function(e) {\r\n                    var file = e.target.files[0];\r\n                    if (!file) return;\r\n                    var reader = new FileReader();\r\n                    reader.onload = function(evt) {\r\n                        uploadedBgDataUrl = evt.target.result;\r\n                        bgEnhancePanel.style.display = 'block';\r\n                        if (bgInput) bgInput.value = uploadedBgDataUrl;\r\n                        updatePreview();\r\n                    };\r\n                    reader.readAsDataURL(file);\r\n                });\r\n            }\r\n\r\n            if (bgFitMode) bgFitMode.addEventListener('change', updatePreview);\r\n            if (bgOpacityRange) {\r\n                bgOpacityRange.addEventListener('input', function() {\r\n                    bgOpacityVal.innerText = bgOpacityRange.value;\r\n                    updatePreview();\r\n                });\r\n            }\r\n            if (bgBlurRange) {\r\n                bgBlurRange.addEventListener('input', function() {\r\n                    bgBlurVal.innerText = bgBlurRange.value;\r\n                    updatePreview();\r\n                });\r\n            }\r\n            if (bgBrightnessRange) {\r\n                bgBrightnessRange.addEventListener('input', function() {\r\n                    bgBrightnessVal.innerText = bgBrightnessRange.value;\r\n                    updatePreview();\r\n                });\r\n            }\r\n\r\n            function gatherLinesData() {\r\n                var rows = linesContainer.querySelectorAll('.line-builder-row');\r\n                var linesData = [];\r\n                rows.forEach(function(row) {\r\n                    var txt = row.querySelector('.line-text').value;\r\n                    var fontInputElem = row.querySelector('.line-font');\r\n                    var fnt = fontInputElem.value;\r\n                    var wt = fontInputElem.getAttribute('data-weight') || '400';\r\n                    var scl = parseFloat(row.querySelector('.line-scale-range').value) || 1.0;\r\n                    var offX = parseInt(row.querySelector('.line-offset-x').value) || 0;\r\n                    var offY = parseInt(row.querySelector('.line-offset-y').value) || 0;\r\n\r\n                    linesData.push({\r\n                        text: txt,\r\n                        font: fnt,\r\n                        weight: wt,\r\n                        scale: scl,\r\n                        offsetX: offX,\r\n                        offsetY: offY\r\n                    });\r\n                });\r\n                return linesData;\r\n            }\r\n\r\n            function generateSvgMarkup(autoFitScale = 1.0) {\r\n                var linesData = gatherLinesData();\r\n                var lenInches = parseFloat(lengthSelect ? lengthSelect.value : 12);\r\n                var htInches = parseFloat(heightSelect ? heightSelect.value : 4);\r\n                var alignVal = alignmentSelect ? alignmentSelect.value : 'center';\r\n                var spacingVal = parseFloat(lineSpacingSelect ? lineSpacingSelect.value : 1.2);\r\n\r\n                var scaleFactor = 100;\r\n                var lenVal = lenInches * scaleFactor;\r\n                var htVal = htInches * scaleFactor;\r\n\r\n                var svgParts = [];\r\n                svgParts.push('<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" width=\"100%\" height=\"100%\" viewBox=\"0 0 ' + lenVal + ' ' + htVal + '\" preserveAspectRatio=\"xMidYMid meet\">');\r\n                svgParts.push('<style>');\r\n                svgParts.push('  @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Bebas+Neue&family=Black+Ops+One&family=Cabin:wght@700&family=Changa+One&family=Chewy&family=Cinzel:wght@700&family=Comfortaa:wght@700&family=Cookie&family=Courgette&family=Creepster&family=Dancing+Script:wght@700&family=Fredoka&family=Great+Vibes&family=Lobster&family=Montserrat:wght@700&family=Orbitron:wght@700&family=Oswald:wght@700&family=Pacifico&family=Permanent+Marker&family=Playfair+Display:wght@700&family=Press+Start+2P&family=Righteous&family=Roboto:wght@700&family=Russo+One&family=Sacramento&family=Shadows+Into+Light&family=Teko:wght@700&family=Ubuntu:wght@700&family=Yellowtail&display=swap\");');\r\n                svgParts.push('<\/style>');\r\n\r\n                svgParts.push('<defs>');\r\n                var blurVal = bgBlurRange ? parseFloat(bgBlurRange.value) : 0;\r\n                if (blurVal > 0) {\r\n                    svgParts.push('<filter id=\"svgBlur\"><feGaussianBlur stdDeviation=\"' + blurVal * (lenVal \/ 400) + '\"\/><\/filter>');\r\n                }\r\n                svgParts.push('<\/defs>');\r\n\r\n                if (currentBgColor !== 'transparent') {\r\n                    svgParts.push('<rect width=\"100%\" height=\"100%\" fill=\"' + currentBgColor + '\"\/>');\r\n                }\r\n\r\n                if (uploadedBgDataUrl) {\r\n                    var opacityVal = (bgOpacityRange ? parseFloat(bgOpacityRange.value) : 100) \/ 100;\r\n                    var brightnessVal = bgBrightnessRange ? parseFloat(bgBrightnessRange.value) : 100;\r\n                    var fitVal = bgFitMode ? bgFitMode.value : 'cover';\r\n\r\n                    var preserveAttr = 'none';\r\n                    if (fitVal === 'cover') preserveAttr = 'xMidYMid slice';\r\n                    else if (fitVal === 'contain') preserveAttr = 'xMidYMid meet';\r\n\r\n                    var filterStr = '';\r\n                    if (blurVal > 0 || brightnessVal !== 100) {\r\n                        filterStr = 'filter=\"';\r\n                        if (blurVal > 0) filterStr += 'url(#svgBlur) ';\r\n                        if (brightnessVal !== 100) filterStr += 'brightness(' + (brightnessVal \/ 100) + ')';\r\n                        filterStr += '\"';\r\n                    }\r\n\r\n                    svgParts.push('<image href=\"' + uploadedBgDataUrl + '\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"' + preserveAttr + '\" opacity=\"' + opacityVal + '\" ' + filterStr + '\/>');\r\n                }\r\n\r\n                var totalLines = linesData.length;\r\n                var effectiveLines = Math.max(1, totalLines);\r\n                var baseFontSize = Math.max(10, (htVal * 0.45) \/ (effectiveLines * spacingVal)) * autoFitScale;\r\n                var totalBlockHeight = effectiveLines * baseFontSize * spacingVal;\r\n                var startY = (htVal - totalBlockHeight) \/ 2 + baseFontSize * 0.78;\r\n\r\n                var anchorX = lenVal \/ 2;\r\n                var textAnchorAttr = 'middle';\r\n                if (alignVal === 'left') { anchorX = lenVal * 0.1; textAnchorAttr = 'start'; }\r\n                if (alignVal === 'right') { anchorX = lenVal * 0.9; textAnchorAttr = 'end'; }\r\n\r\n                linesData.forEach(function(line, idx) {\r\n                    var currentY = startY + (idx * baseFontSize * spacingVal) + (line.offsetY * autoFitScale);\r\n                    var lineFontSize = baseFontSize * line.scale;\r\n                    var escapedText = line.text.replace(\/&\/g, '&amp;').replace(\/<\/g, '&lt;').replace(\/>\/g, '&gt;');\r\n                    \r\n                    svgParts.push('<g transform=\"translate(' + (line.offsetX * autoFitScale) + ', 0)\">');\r\n                    if (escapedText) {\r\n                        svgParts.push('<text x=\"' + anchorX + '\" y=\"' + currentY + '\" font-family=\"' + line.font + '\" font-weight=\"' + line.weight + '\" font-size=\"' + lineFontSize + '\" fill=\"#000000\" text-anchor=\"' + textAnchorAttr + '\" xml:space=\"preserve\">' + escapedText + '<\/text>');\r\n                    }\r\n                    svgParts.push('<\/g>');\r\n                });\r\n\r\n                svgParts.push('<\/svg>');\r\n                return svgParts.join('\\n');\r\n            }\r\n\r\n            function calculateAutoFitScale() {\r\n                var linesData = gatherLinesData();\r\n                if (linesData.length === 0) return 1.0;\r\n\r\n                var lenInches = parseFloat(lengthSelect ? lengthSelect.value : 12);\r\n                var htInches = parseFloat(heightSelect ? heightSelect.value : 4);\r\n                var spacingVal = parseFloat(lineSpacingSelect ? lineSpacingSelect.value : 1.2);\r\n                var alignVal = alignmentSelect ? alignmentSelect.value : 'center';\r\n\r\n                var scaleFactor = 100;\r\n                var lenVal = lenInches * scaleFactor;\r\n                var htVal = htInches * scaleFactor;\r\n\r\n                var totalLines = linesData.length;\r\n                var baseFontSize = Math.max(10, (htVal * 0.55) \/ (totalLines * spacingVal));\r\n\r\n                var anchorX = lenVal \/ 2;\r\n                if (alignVal === 'left') anchorX = lenVal * 0.1;\r\n                if (alignVal === 'right') anchorX = lenVal * 0.9;\r\n\r\n                \/\/ Create an offscreen temporary SVG container to measure actual rendered bounding boxes\r\n                var tempSvg = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'svg');\r\n                tempSvg.setAttribute('width', lenVal);\r\n                tempSvg.setAttribute('height', htVal);\r\n                tempSvg.style.position = 'absolute';\r\n                tempSvg.style.visibility = 'hidden';\r\n                tempSvg.style.pointerEvents = 'none';\r\n\r\n                var totalBlockHeight = totalLines * baseFontSize * spacingVal;\r\n                var startY = (htVal - totalBlockHeight) \/ 2 + baseFontSize * 0.78;\r\n\r\n                linesData.forEach(function(line, idx) {\r\n                    var currentY = startY + (idx * baseFontSize * spacingVal) + line.offsetY;\r\n                    var lineFontSize = baseFontSize * line.scale;\r\n                    if (!line.text) return;\r\n\r\n                    var textElem = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\r\n                    textElem.setAttribute('x', anchorX);\r\n                    textElem.setAttribute('y', currentY);\r\n                    textElem.setAttribute('font-family', line.font);\r\n                    textElem.setAttribute('font-weight', line.weight);\r\n                    textElem.setAttribute('font-size', lineFontSize);\r\n                    if (alignVal === 'left') textElem.setAttribute('text-anchor', 'start');\r\n                    else if (alignVal === 'right') textElem.setAttribute('text-anchor', 'end');\r\n                    else textElem.setAttribute('text-anchor', 'middle');\r\n\r\n                    if (line.offsetX) {\r\n                        textElem.setAttribute('transform', 'translate(' + line.offsetX + ', 0)');\r\n                    }\r\n                    textElem.textContent = line.text;\r\n                    tempSvg.appendChild(textElem);\r\n                });\r\n\r\n                document.body.appendChild(tempSvg);\r\n\r\n                var maxScaleNeeded = 1.0;\r\n                var padding = lenVal * 0.04; \/\/ 4% safety boundary margin\r\n\r\n                var textElements = tempSvg.querySelectorAll('text');\r\n                textElements.forEach(function(txtElem) {\r\n                    try {\r\n                        var bbox = txtElem.getBBox();\r\n                        if (bbox.width > 0) {\r\n                            var minAllowedX = padding;\r\n                            var maxAllowedX = lenVal - padding;\r\n\r\n                            if (bbox.x < minAllowedX) {\r\n                                var overflowLeft = minAllowedX - bbox.x;\r\n                                var factor = (bbox.width + overflowLeft) \/ bbox.width;\r\n                                if (factor > maxScaleNeeded) maxScaleNeeded = factor;\r\n                            }\r\n                            if ((bbox.x + bbox.width) > maxAllowedX) {\r\n                                var overflowRight = (bbox.x + bbox.width) - maxAllowedX;\r\n                                var factor = (bbox.width + overflowRight) \/ bbox.width;\r\n                                if (factor > maxScaleNeeded) maxScaleNeeded = factor;\r\n                            }\r\n                        }\r\n                    } catch(err) {}\r\n                });\r\n\r\n                document.body.removeChild(tempSvg);\r\n\r\n                if (maxScaleNeeded > 1.0) {\r\n                    \/\/ Increase the multiplier (e.g., 1.25 or 1.5) to make it shrink faster\r\n    \t\t\t\tvar aggressiveScale = 1.0 + (maxScaleNeeded - 1.0) * 1.5; \r\n    \t\t\t\treturn 1.0 \/ aggressiveScale;\r\n                }\r\n                return 1.0;\r\n            }\r\n\r\n            function buildSnapshotPayload() {\r\n                var linesData = gatherLinesData();\r\n                if (linesPayloadInput) linesPayloadInput.value = JSON.stringify(linesData);\r\n\r\n                var lenInches = parseFloat(lengthSelect ? lengthSelect.value : 12);\r\n                var htInches = parseFloat(heightSelect ? heightSelect.value : 4);\r\n                var autoFit = calculateAutoFitScale();\r\n                var svgString = generateSvgMarkup(autoFit);\r\n\r\n                var htmlContent = '<html><head><title>Decal Print Preview<\/title>' +\r\n                    '<style>@page { size: ' + lenInches + 'in ' + htInches + 'in; margin: 0; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: #fff; overflow: hidden; display: flex; justify-content: center; align-items: center; } svg { width: 100%; height: 100%; display: block; object-fit: contain; }<\/style>' +\r\n                    '<body>' + svgString + '<\/body><\/html>';\r\n\r\n                if (pdfInput) pdfInput.value = btoa(unescape(encodeURIComponent(htmlContent)));\r\n            }\r\n\r\n            function updatePreview() {\r\n                var lenVal = parseFloat(lengthSelect.value) || 12;\r\n                var htVal = parseFloat(heightSelect.value) || 4;\r\n                var ratio = lenVal \/ htVal;\r\n                \r\n                var parentWidth = previewContainer.parentElement ? previewContainer.parentElement.offsetWidth : 450;\r\n                var containerMaxWidth = parentWidth > 0 ? parentWidth : 450;\r\n                var calculatedHeight = containerMaxWidth \/ ratio;\r\n\r\n                if (calculatedHeight > 350) calculatedHeight = 350;\r\n                else if (calculatedHeight < 50) calculatedHeight = 50;\r\n\r\n                previewContainer.style.width = containerMaxWidth + 'px';\r\n                previewContainer.style.height = calculatedHeight + 'px';\r\n                previewContainer.style.backgroundColor = (currentBgColor === 'transparent' ? 'transparent' : currentBgColor);\r\n\r\n                var autoFit = calculateAutoFitScale();\r\n                liveSvgCanvas.innerHTML = generateSvgMarkup(autoFit);\r\n\r\n                document.fonts.ready.then(function() {\r\n                    buildSnapshotPayload();\r\n                });\r\n            }\r\n\r\n            if (lengthSelect) lengthSelect.addEventListener('change', updatePreview);\r\n            if (heightSelect) heightSelect.addEventListener('change', updatePreview);\r\n            if (lineSpacingSelect) lineSpacingSelect.addEventListener('change', updatePreview);\r\n            if (alignmentSelect) alignmentSelect.addEventListener('change', updatePreview);\r\n            window.addEventListener('resize', updatePreview);\r\n\r\n            var cartForm = linesContainer.closest('form.cart');\r\n            if (cartForm) {\r\n                cartForm.addEventListener('submit', function() {\r\n                    buildSnapshotPayload();\r\n                });\r\n            }\r\n\r\n            updatePreview();\r\n        });\r\n        <\/script>\r\n        <div data-block-name=\"woocommerce\/product-button\" class=\"wp-block-button wc-block-components-product-button align- wp-block-woocommerce-product-button\"\n\t\t\t\t\t\n\t\t\t\t\tdata-wp-context='{\"quantityToAdd\":1,\"addToCartText\":\"Add to cart\",\"tempQuantity\":0,\"animationStatus\":\"IDLE\",\"inTheCartText\":\"### in cart\",\"noticeId\":\"\",\"hasPressedButton\":false}'\n\t\t\t\t>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"wp-block-button__link wp-element-button wc-block-components-product-button__button add_to_cart_button product_type_simple wc-interactive single_add_to_cart_button\"\n\t\t\t\t\t\tstyle=\"\"\n\t\t\t\t\t\ttype=\"submit\" data-product_id=\"897\" data-product_sku=\"\" aria-label=\"Add to cart: &ldquo;Custom Text Decals&rdquo;\" value=\"897\"\n\t\t\t\t\t\t\n\t\t\t\t\t>\n\t\t\t\t\t<span >Add to cart<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t\t\n\t\t\t\t<\/div><input type=\"hidden\" name=\"add-to-cart\" value=\"897\" \/><\/form>\n\n\n<div data-block-name=\"woocommerce\/product-meta\" class=\"wp-block-woocommerce-product-meta\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-3a88641f wp-block-group-is-layout-flex\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-904","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/personalizemyride.com\/index.php?rest_route=\/wp\/v2\/pages\/904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/personalizemyride.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/personalizemyride.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/personalizemyride.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/personalizemyride.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=904"}],"version-history":[{"count":5,"href":"https:\/\/personalizemyride.com\/index.php?rest_route=\/wp\/v2\/pages\/904\/revisions"}],"predecessor-version":[{"id":984,"href":"https:\/\/personalizemyride.com\/index.php?rest_route=\/wp\/v2\/pages\/904\/revisions\/984"}],"wp:attachment":[{"href":"https:\/\/personalizemyride.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}