{"id":14021,"date":"2025-07-27T13:25:03","date_gmt":"2025-07-27T13:25:03","guid":{"rendered":"https:\/\/nacoverpool.pt\/staging\/?page_id=14021"},"modified":"2026-05-10T12:19:58","modified_gmt":"2026-05-10T11:19:58","slug":"coberturas-de-barras-a-medida-calculadora","status":"publish","type":"page","link":"https:\/\/nacoverpool.pt\/staging\/coberturas-de-barras-a-medida-calculadora\/","title":{"rendered":"Coberturas de Barras a medida &#8211; Calculadora"},"content":{"rendered":"<style>.elementor-14021 .elementor-element.elementor-element-5731454{padding:0em 0em 3em 0em;}.elementor-14021 .elementor-element.elementor-element-deff149{padding:0em 0em 0em 0em;}.elementor-bc-flex-widget .elementor-14021 .elementor-element.elementor-element-bfc8bf5.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-14021 .elementor-element.elementor-element-bfc8bf5.elementor-column.elementor-element[data-element_type=\"column\"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-14021 .elementor-element.elementor-element-1793013{padding:0em 0em 0em 0em;}.elementor-14021 .elementor-element.elementor-element-5e24f76{text-align:start;}.elementor-14021 .elementor-element.elementor-element-5e24f76 img{width:55%;}.elementor-14021 .elementor-element.elementor-element-2a8e427{text-align:start;}.elementor-14021 .elementor-element.elementor-element-2a8e427 img{width:65%;}@media(max-width:767px){.elementor-14021 .elementor-element.elementor-element-deff149{padding:0em 1em 0em 1em;}.elementor-14021 .elementor-element.elementor-element-a5a788b{padding:0em 1em 0em 1em;}.elementor-14021 .elementor-element.elementor-element-1793013{padding:0em 1em 0em 1em;}.elementor-14021 .elementor-element.elementor-element-5e24f76 img{width:100%;}.elementor-14021 .elementor-element.elementor-element-2a8e427 img{width:100%;}}<\/style>\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14021\" class=\"elementor elementor-14021\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-31133eb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"31133eb\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d87b638\" data-id=\"d87b638\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cafa048 elementor-widget elementor-widget-html\" data-id=\"cafa048\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"multistep-form-container\">\r\n    <!-- Div doo formul\u00e1rio \u00e0 esquerda -->\r\n    <div class=\"form-container\">\r\n        <div id=\"multistep-form\">\r\n            <!-- Barra de steps flutuante -->\r\n            <div class=\"floating-steps\">\r\n                <div class=\"steps\">\r\n                    <div class=\"step\" data-step=\"1\"><span class=\"step-number\">1<\/span><span class=\"step-label\">Forma<\/span><\/div>\r\n                    <div class=\"step\" data-step=\"2\"><span class=\"step-number\">2<\/span><span class=\"step-label\">Cobertura<\/span><\/div>\r\n                    <div class=\"step\" data-step=\"3\"><span class=\"step-number\">3<\/span><span class=\"step-label\">Pedido<\/span><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            \r\n\r\n            <form id=\"form\">\r\n                \r\n<div class=\"step-top-bar floating\">\r\n    <h3 id=\"current-step-title\"><\/h3>\r\n\r\n    <div class=\"step-navigation\">\r\n        <button type=\"button\" id=\"prevBtn\">Anterior<\/button>\r\n        <button type=\"button\" id=\"nextBtn\" class=\"nextBtn\">Pr\u00f3ximo<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n<style>\r\n\/* ===== STEP TOP BAR FLUTUANTE ===== *\/\r\n.step-top-bar.floating {\r\n    position: sticky; \/* melhor que fixed *\/\r\n    top: 0;\r\n    z-index: 100;\r\n    background: #ffffff;\r\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 10px;\r\n\r\n    padding: 10px 12px;\r\n    margin-bottom: 16px;\r\n}\r\n\r\n\/* T\u00edtulo *\/\r\n.step-top-bar.floating h3 {\r\n    margin: 0;\r\n    text-align: center;\r\n    font-size: 15px;\r\n    line-height: 1.25;\r\n    font-weight: 600;\r\n}\r\n\r\n\/* Navega\u00e7\u00e3o *\/\r\n.step-top-bar.floating .step-navigation {\r\n    display: flex;\r\n    gap: 12px;\r\n}\r\n\r\n\/* Bot\u00f5es *\/\r\n.step-top-bar.floating button {\r\n    min-width: 110px;\r\n    min-height: 38px;\r\n    font-size: 12px;\r\n    border-radius: 6px;\r\n}\r\n\r\n\/* ===== TABLET ===== *\/\r\n@media (min-width: 600px) {\r\n    .step-top-bar.floating h3 {\r\n        font-size: 16px;\r\n    }\r\n\r\n    .step-top-bar.floating button {\r\n        min-width: 130px;\r\n        font-size: 13px;\r\n    }\r\n}\r\n\r\n\/* ===== DESKTOP ===== *\/\r\n@media (min-width: 992px) {\r\n    .step-top-bar.floating {\r\n        top: 8px; \/* respira do topo *\/\r\n    }\r\n\r\n    .step-top-bar.floating h3 {\r\n        font-size: 17px;\r\n    }\r\n\r\n    .step-top-bar.floating button {\r\n        min-width: 150px;\r\n        font-size: 14px;\r\n    }\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\nfunction syncStepTitle() {\r\n    const activeStep = document.querySelector('.form-step.active');\r\n    const titleEl = document.getElementById('current-step-title');\r\n\r\n    if (!activeStep || !titleEl) return;\r\n\r\n    \/\/ Define t\u00edtulos personalizados para cada step\r\n    const stepTitles = {\r\n        1: \"Escolha o formato da piscina e informe as medidas\",\r\n        2: \"Cobertura\",\r\n        3: \"Resumo Completo do Pedido\"\r\n    };\r\n    \r\n    const stepNumber = activeStep.getAttribute('data-step');\r\n    titleEl.textContent = stepTitles[stepNumber] || '';\r\n    \r\n    \/\/ Adiciona classe de estiliza\u00e7\u00e3o\r\n    titleEl.classList.add('styled-title');\r\n    \r\n    \/\/ Adiciona anima\u00e7\u00e3o de destaque\r\n    titleEl.classList.add('title-updated');\r\n    setTimeout(() => {\r\n        titleEl.classList.remove('title-updated');\r\n    }, 500);\r\n}\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    syncStepTitle();\r\n});\r\n<\/script>\r\n<style>\r\n.step-top-bar.floating h3.styled-title {\r\n    color: #2e7d32 !important;\r\n    font-size: 16px !important;\r\n    font-weight: 600 !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n}\r\n\r\n@media (min-width: 600px) {\r\n    .step-top-bar.floating h3.styled-title {\r\n        font-size: 18px !important;\r\n    }\r\n}\r\n\r\n@media (min-width: 992px) {\r\n    .step-top-bar.floating h3.styled-title {\r\n        font-size: 20px !important;\r\n    }\r\n}\r\n<\/style>\r\n<style>\r\n    \/* ============================================= *\/\r\n\/* AJUSTES PARA O STEP 1 \u2013 TUDO VIS\u00cdVEL SEM SCROLL *\/\r\n\/* ============================================= *\/\r\n\r\n\/* Remove alturas fixas e overflow dos steps *\/\r\n.form-step {\r\n    min-height: auto !important;\r\n    max-height: none !important;\r\n    overflow: visible !important;\r\n    padding: 15px;\r\n}\r\n\r\n\/* Container principal do step 1 *\/\r\n.shapes-container {\r\n    min-width: auto !important; \/* remove largura m\u00ednima que causava scroll horizontal *\/\r\n    display: flex;\r\n    gap: 20px;\r\n}\r\n\r\n\/* Lado esquerdo (lista de formas) mant\u00e9m altura controlada *\/\r\n.shapes-list {\r\n    max-height: calc(100vh - 250px); \/* ajuste conforme seu cabe\u00e7alho *\/\r\n    overflow-y: auto; \/* s\u00f3 scroll aqui se necess\u00e1rio *\/\r\n}\r\n\r\n\/* Lado direito: organiza ilustra\u00e7\u00e3o, medidas e margem *\/\r\n.shape-right {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;      \/* duas colunas iguais *\/\r\n    grid-template-rows: auto auto;       \/* duas linhas autom\u00e1ticas *\/\r\n    gap: 12px;\r\n    align-content: start;\r\n}\r\n\r\n\/* Ilustra\u00e7\u00e3o ocupa as duas colunas na primeira linha *\/\r\n.shape-illustration {\r\n    grid-column: 1 \/ -1;\r\n    padding: 8px;\r\n}\r\n#shape-illustration-img {\r\n    height: 140px !important;             \/* reduz altura da imagem *\/\r\n    width: auto;\r\n    max-width: 100%;\r\n    object-fit: contain;\r\n}\r\n\r\n\/* Container de medidas (agora coluna esquerda da segunda linha) *\/\r\n.measurements-container {\r\n    grid-column: 1 \/ 2;\r\n    margin: 0;\r\n    padding: 12px;\r\n}\r\n\r\n\/* Margem adicional (agora coluna direita da segunda linha) *\/\r\n.shape-right > div:last-of-type {         \/* seleciona a div da margem *\/\r\n    grid-column: 2 \/ 3;\r\n    margin: 0 !important;\r\n    padding: 15px !important;\r\n}\r\n\r\n\/* Ajustes internos para ficar mais compacto *\/\r\n.measurements-inputs {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n}\r\n.measurement {\r\n    flex: 1 1 auto;\r\n    min-width: 100px;\r\n}\r\n.measurement input {\r\n    width: 70px;\r\n    padding: 4px;\r\n}\r\n.total-area, .production-time {\r\n    font-size: 11px;\r\n    margin: 4px 0;\r\n}\r\n.measurements-note {\r\n    font-size: 9px !important;\r\n}\r\n\r\n\/* Margem adicional \u2013 reduz padding e fonte *\/\r\n.shape-right > div:last-of-type h3 {\r\n    font-size: 16px !important;\r\n    margin: 0 0 8px 0 !important;\r\n}\r\n.shape-right > div:last-of-type p {\r\n    font-size: 12px !important;\r\n    padding: 8px !important;\r\n    margin-bottom: 10px !important;\r\n}\r\n#extra-margin {\r\n    padding: 6px !important;\r\n    font-size: 13px !important;\r\n}\r\n#preview-margem {\r\n    margin-top: 8px !important;\r\n    padding: 8px !important;\r\n}\r\n\r\n\/* Ajuste na lista de formas para n\u00e3o ocupar altura excessiva *\/\r\n.shape-item {\r\n    max-width: 80px;\r\n}\r\n.shape-item img {\r\n    max-width: 40%;\r\n}\r\n\r\n\/* Remove scroll horizontal que podia aparecer *\/\r\n#multistep-form-container {\r\n    overflow-x: hidden;\r\n}\r\n<\/style>\r\n<style>\r\n    \/* ============================================= *\/\r\n\/* CENTRALIZAR INPUTS DE MEDIDAS \u2013 STEP 1       *\/\r\n\/* ============================================= *\/\r\n\r\n.measurements-inputs {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;  \/* centraliza os itens horizontalmente *\/\r\n    gap: 20px;                \/* espa\u00e7o entre os grupos de input *\/\r\n    margin: 10px 0;\r\n}\r\n\r\n.measurement {\r\n    display: flex;\r\n    justify-content: center;\r\n    min-width: 100px;\r\n}\r\n\r\n.measurement > div {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;      \/* centraliza label e input verticalmente *\/\r\n    text-align: center;\r\n}\r\n\r\n.measurement label {\r\n    margin-bottom: 4px;\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n    color: #333;\r\n}\r\n\r\n.measurement input {\r\n    width: 80px;              \/* largura fixa para todos os inputs *\/\r\n    padding: 6px 8px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 4px;\r\n    text-align: center;       \/* texto digitado centralizado *\/\r\n    font-size: 14px;\r\n    margin-right: 0 !important; \/* remove o margin-right inline *\/\r\n}\r\n\r\n\/* Ajuste para o \u00edcone de check (se existir) *\/\r\n.valid-check {\r\n    position: absolute;\r\n    right: -20px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: green;\r\n    font-size: 16px;\r\n}\r\n\r\n\/* Responsivo: em telas pequenos, reduz a largura dos inputs *\/\r\n@media (max-width: 600px) {\r\n    .measurement input {\r\n        width: 65px;\r\n        padding: 4px;\r\n        font-size: 12px;\r\n    }\r\n    .measurements-inputs {\r\n        gap: 10px;\r\n    }\r\n}\r\n<\/style>\r\n<style>\r\n    \/* ============================================= *\/\r\n\/* REDUZIR ALTURA DAS DIVs DE MEDIDAS E MARGEM  *\/\r\n\/* ============================================= *\/\r\n\r\n\/* Container de medidas *\/\r\n.measurements-container {\r\n    padding: 8px !important;           \/* reduz padding *\/\r\n    margin: 0 !important;\r\n}\r\n\r\n\/* T\u00edtulo \"Nota: As medidas s\u00e3o interiores\" *\/\r\n.measurements-note {\r\n    font-size: 9px !important;\r\n    margin: 0 0 4px 0 !important;\r\n    line-height: 1.2;\r\n}\r\n\r\n\/* Container dos inputs *\/\r\n.measurements-inputs {\r\n    gap: 8px !important;               \/* reduz espa\u00e7o entre inputs *\/\r\n    margin: 4px 0 !important;\r\n}\r\n\r\n\/* Cada grupo (label + input) *\/\r\n.measurement {\r\n    min-width: 80px !important;        \/* um pouco menor *\/\r\n}\r\n\r\n.measurement > div {\r\n    gap: 2px !important;               \/* espa\u00e7o entre label e input *\/\r\n}\r\n\r\n.measurement label {\r\n    font-size: 11px !important;        \/* menor *\/\r\n    margin-bottom: 0 !important;\r\n}\r\n\r\n.measurement input {\r\n    width: 70px !important;            \/* reduz largura *\/\r\n    padding: 4px 6px !important;       \/* padding vertical menor *\/\r\n    font-size: 12px !important;\r\n}\r\n\r\n\/* \u00c1rea total e tempo de produ\u00e7\u00e3o *\/\r\n.total-area, .production-time {\r\n    font-size: 10px !important;\r\n    margin: 2px 0 !important;\r\n    line-height: 1.3;\r\n}\r\n\r\n\/* ===== MARGEM ADICIONAL ===== *\/\r\n\/* Div principal da margem *\/\r\n.shape-right > div:last-of-type {\r\n    padding: 10px !important;          \/* reduz padding *\/\r\n    margin: 0 !important;\r\n}\r\n\r\n\/* Cabe\u00e7alho com \u00edcone e t\u00edtulo *\/\r\n.shape-right > div:last-of-type > div:first-child {\r\n    margin-bottom: 6px !important;     \/* reduz espa\u00e7o abaixo do cabe\u00e7alho *\/\r\n    gap: 5px !important;               \/* reduz gap entre \u00edcone e t\u00edtulo *\/\r\n}\r\n\r\n\/* \u00cdcone *\/\r\n.shape-right > div:last-of-type > div:first-child span {\r\n    width: 24px !important;\r\n    height: 24px !important;\r\n    font-size: 14px !important;\r\n}\r\n\r\n\/* T\u00edtulo \"Margem Adicional\" *\/\r\n.shape-right > div:last-of-type h3 {\r\n    font-size: 14px !important;        \/* menor *\/\r\n    margin: 0 !important;\r\n}\r\n\r\n\/* Texto explicativo *\/\r\n.shape-right > div:last-of-type p {\r\n    font-size: 11px !important;        \/* menor *\/\r\n    padding: 6px !important;           \/* reduz padding *\/\r\n    margin-bottom: 8px !important;\r\n    line-height: 1.3;\r\n}\r\n\r\n\/* Label do select *\/\r\n.shape-right > div:last-of-type label {\r\n    font-size: 11px !important;\r\n    margin-bottom: 3px !important;\r\n}\r\n\r\n\/* Select *\/\r\n#extra-margin {\r\n    padding: 5px !important;           \/* padding vertical menor *\/\r\n    font-size: 12px !important;\r\n}\r\n\r\n\/* Preview da margem *\/\r\n#preview-margem {\r\n    margin-top: 5px !important;\r\n    padding: 5px !important;\r\n    font-size: 11px !important;\r\n}\r\n\r\n\/* Em telas muito pequenas, talvez reorganizar *\/\r\n@media (max-width: 700px) {\r\n    .shape-right {\r\n        grid-template-columns: 1fr;    \/* volta para uma coluna *\/\r\n    }\r\n    .measurements-container,\r\n    .shape-right > div:last-of-type {\r\n        grid-column: 1 \/ -1;\r\n    }\r\n}\r\n<\/style>\r\n<style>\r\n    \/* Aumentar a imagem de ilustra\u00e7\u00e3o *\/\r\n.shape-illustration {\r\n    padding: 1px  !important; \/* reduzir padding para dar mais espa\u00e7o \u00e0 imagem *\/\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n<\/style>\r\n<style>\r\n    .measurements-container {\r\n    padding: 10px !important;\r\n}\r\n.measurements-container h4 {\r\n    margin: 0 0 5px 0;\r\n    font-size: 9px !important;\r\n}\r\n.measurements-inputs {\r\n    margin: 5px 0;\r\n    gap: 10px;\r\n}\r\n.measurement input {\r\n    padding: 4px;\r\n    font-size: 12px;\r\n}\r\n.total-area, .production-time {\r\n    margin: 3px 0;\r\n    font-size: 10px;\r\n}\r\n<\/style>\r\n\r\n                <!-- Step 1: Forma e Medidas -->\r\n                <div class=\"form-step\" data-step=\"1\">\r\n                    <div class=\"shapes-container\">\r\n                        <!-- Lado Esquerdo: Lista de Formas -->\r\n                        <div class=\"shapes-list\">\r\n                            <div class=\"shape-item\" data-shape=\"a\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_a.png\" alt=\"Forma A\">\r\n                                <span class=\"shape-letter\">A<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item \" data-shape=\"b\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_b.png\" alt=\"Forma B\">\r\n                                <span class=\"shape-letter\">B<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item\" data-shape=\"c\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_c.png\" alt=\"Forma C\">\r\n                                <span class=\"shape-letter\">C<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item\" data-shape=\"d\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_d.png\" alt=\"Forma D\">\r\n                                <span class=\"shape-letter\">D<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item\" data-shape=\"e\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_e.png\" alt=\"Forma E\">\r\n                                <span class=\"shape-letter\">E<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item\" data-shape=\"f\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_f.png\" alt=\"Forma F\">\r\n                                <span class=\"shape-letter\">F<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item\" data-shape=\"g\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_g.png\" alt=\"Forma G\">\r\n                                <span class=\"shape-letter\">G<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item\" data-shape=\"h\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_h.png\" alt=\"Forma H\">\r\n                                <span class=\"shape-letter\">H<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item\" data-shape=\"i\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_i.png\" alt=\"Forma I\">\r\n                                <span class=\"shape-letter\">I<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item\" data-shape=\"j\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_j.png\" alt=\"Forma J\">\r\n                                <span class=\"shape-letter\">J<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item\" data-shape=\"k\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_k.png\" alt=\"Forma K\">\r\n                                <span class=\"shape-letter\">K<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item\" data-shape=\"l\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_l.png\" alt=\"Forma L\">\r\n                                <span class=\"shape-letter\">L<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item\" data-shape=\"m\">\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_m.png\" alt=\"Forma M\">\r\n                                <span class=\"shape-letter\">M<\/span>\r\n                            <\/div>\r\n                            <div class=\"shape-item shape-custom\" data-shape=\"n\">\r\n                                <div class=\"custom-tooltip\">\r\n                                    <span class=\"tooltip-text\">\r\n                                        Outra forma?\r\n                                    <\/span>\r\n                                <\/div>\r\n\r\n                                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_n.png\" alt=\"Forma N\">\r\n                                <span class=\"shape-letter\">N<\/span>\r\n                            <\/div>\r\n\r\n\r\n                            <style>\r\n                                    \/* Destaque da forma N *\/\r\n.shape-custom {\r\n    position: relative;\r\n    border: 2px dashed #ff9800;\r\n    background-color: #fffaf2;\r\n}\r\n\r\n\/* Tooltip base *\/\r\n.custom-tooltip {\r\n    position: absolute;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background-color: #ffffff;\r\n    border: 1.5px solid #ff9800;\r\n    border-radius: 6px;\r\n    padding: 6px 10px;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    color: #d35400;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    white-space: nowrap;\r\n    z-index: 5;\r\n    box-shadow: 0 3px 8px rgba(0,0,0,0.12);\r\n}\r\n\r\n\/* Posi\u00e7\u00e3o em baixo *\/\r\n.custom-tooltip.bottom {\r\n    bottom: -38px;\r\n}\r\n\r\n\/* Seta apontando para cima *\/\r\n.custom-tooltip.bottom::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: -6px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    border-width: 0 6px 6px 6px;\r\n    border-style: solid;\r\n    border-color: transparent transparent #ff9800 transparent;\r\n}\r\n\r\n\/* \u00cdcone *\/\r\n.tooltip-icon {\r\n    font-size: 13px;\r\n}\r\n\r\n\/* Tablet *\/\r\n@media (max-width: 768px) {\r\n    .custom-tooltip {\r\n        font-size: 10px;\r\n        padding: 5px 8px;\r\n    }\r\n\r\n    .custom-tooltip.bottom {\r\n        bottom: -34px;\r\n    }\r\n}\r\n\r\n\/* Mobile *\/\r\n@media (max-width: 480px) {\r\n    .custom-tooltip {\r\n        font-size: 6px;\r\n        padding: 1px 2px;\r\n    }\r\n\r\n    .custom-tooltip.bottom {\r\n        bottom: -30px;\r\n    }\r\n}\r\n@media (max-width: 360px) {\r\n    .custom-tooltip.bottom {\r\n        position: static;\r\n        transform: none;\r\n        margin-top: 6px;\r\n    }\r\n\r\n    .custom-tooltip.bottom::after {\r\n        display: none;\r\n    }\r\n}\r\n\r\n                            <\/style>\r\n                            \r\n                        <\/div>\r\n\r\n                        <!-- Lado Direito: Ilustra\u00e7\u00e3o e Medidas -->\r\n                        <div class=\"shape-right\">\r\n                           <!--  <span class=\"shape-prompt\">Escolha o formato da piscina<\/span>\r\n                            Ilustra\u00e7\u00e3o da Forma Selecionada -->\r\n                            <div class=\"shape-illustration\">\r\n                                <img decoding=\"async\" id=\"shape-illustration-img\" style=\"height: 200px;\" src=\"https:\/\/recursos.nacoverpool.pt\/logo.jpg\" alt=\"Ilustra\u00e7\u00e3o da Forma\">\r\n                            <\/div>\r\n\r\n                            <!-- Inputs de Medidas -->\r\n                            <div class=\"measurements-container\">\r\n                                <h4 class=\"measurements-note\" style=\"font-size: 10px!important;\">Nota: As medidas s\u00e3o interiores  <span class=\"required-field\">(Obrigat\u00f3rio*)<\/span>\r\n                                 <span style=\"color: #4CAF50;\"> | Fabrica\u00e7\u00e3o\/envio: 3 dias \u00fateis.<\/span>\r\n                                <\/h4>\r\n                                <div id=\"measurements-inputs\"><\/div>\r\n                                <p class=\"total-area\"><strong>\u00c1rea total:<\/strong> <span id=\"total-area\">0.00<\/span> m\u00b2<\/p>\r\n                               <!-- <p class=\"production-time\">O tempo de fabrica\u00e7\u00e3o e envio ser\u00e1 de 3 dias \u00fateis.<\/p> -->\r\n                            <\/div>\r\n\r\n <!-- ===== MARGEM ADICIONAL - VERS\u00c3O SIMPLES ===== -->\r\n<div style=\"background: #f0f8ff; border: 1px solid #4CAF50; border-radius: 10px; padding: 15px; margin: 15px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1);\">\r\n    \r\n    <div style=\"display: flex; align-items: center; gap: 10px; margin-bottom: 10px;\">\r\n        <span style=\"background: #4CAF50; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px;\">\ud83d\udccf<\/span>\r\n        <h3 style=\"margin: 0; color: #2e7d32; font-size: 16px; font-weight: bold;\">Margem Adicional<\/h3>\r\n    <\/div>\r\n    \r\n    <p style=\"margin: 0 0 10px 0; color: #555; font-size: 13px; background: #fff; padding: 8px; border-radius: 6px; border-left: 4px solid #4CAF50;\">\r\n        Adicione uma margem extra em todo o per\u00edmetro para garantir um ajuste\r\n    <\/p>\r\n    \r\n    <!-- LABEL E SELECT NA MESMA LINHA -->\r\n    <div style=\"display: flex; align-items: center; gap: 10px; margin: 10px 0;\">\r\n        <label for=\"extra-margin\" style=\"flex-shrink: 0; font-weight: bold; color: #333; white-space: nowrap; font-size: 14px;\">\r\n            Selecione a margem desejada:\r\n        <\/label>\r\n        <select id=\"extra-margin\" style=\"flex: 1; min-width: 120px; padding: 8px 10px; border: 1px solid #4CAF50; border-radius: 6px; font-size: 13px; background: white; color: black; cursor: pointer; font-weight: normal;\">\r\n            <option value=\"0\" selected>0 cm (Sem margem)<\/option>\r\n            <option value=\"5\">5 cm<\/option>\r\n            <option value=\"10\">10 cm<\/option>\r\n            <option value=\"15\">15 cm<\/option>\r\n            <option value=\"20\">20 cm<\/option>\r\n            <option value=\"25\">25 cm<\/option>\r\n            <option value=\"30\">30 cm<\/option>\r\n            <option value=\"35\">35 cm<\/option>\r\n            <option value=\"40\">40 cm<\/option>\r\n        <\/select>\r\n    <\/div>\r\n    \r\n    <!-- Preview da sele\u00e7\u00e3o -->\r\n    <div id=\"preview-margem\" style=\"margin-top: 8px; padding: 8px; background: #e8f5e9; border-radius: 6px; display: none;\">\r\n        <span style=\"color: #2e7d32; font-weight: bold;\">\u2713 Margem de <span id=\"margem-escolhida\">0<\/span>cm selecionada<\/span>\r\n    <\/div>\r\n    \r\n<\/div>\r\n<br>\r\n<br>\r\n<br>\r\n<script>\/\/ Margem Adicional - Script \r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const select = document.getElementById('extra-margin');\r\n    const preview = document.getElementById('preview-margem');\r\n    const margemEscolhida = document.getElementById('margem-escolhida');\r\n    \r\n    if (select) {\r\n        \/\/ Mostrar preview se j\u00e1 houver valor selecionado\r\n        if (select.value != '0') {\r\n            preview.style.display = 'block';\r\n            margemEscolhida.textContent = select.value;\r\n        }\r\n        \r\n        \/\/ Quando mudar o select\r\n        select.addEventListener('change', function() {\r\n            const valor = this.value;\r\n            \r\n            \/\/ Atualizar vari\u00e1veis globais\r\n            window.extraMarginCm = parseFloat(valor);\r\n            window.extraMargin = window.extraMarginCm \/ 100;\r\n            \r\n            \/\/ Mostrar preview\r\n            if (valor != '0') {\r\n                preview.style.display = 'block';\r\n                margemEscolhida.textContent = valor;\r\n            } else {\r\n                preview.style.display = 'none';\r\n            }\r\n            \r\n            \/\/ Atualizar \u00e1rea total se a fun\u00e7\u00e3o existir\r\n            if (typeof calculateTotalArea === 'function') {\r\n                calculateTotalArea();\r\n            }\r\n            \r\n            \/\/ Atualizar resumo\r\n            atualizarResumoMargem();\r\n        });\r\n    }\r\n    \r\n    function atualizarResumoMargem() {\r\n        const container = document.getElementById('summary-margin-container');\r\n        const valorResumo = document.getElementById('summary-margin');\r\n        \r\n        if (container && valorResumo) {\r\n            if (window.extraMarginCm > 0) {\r\n                container.style.display = 'flex';\r\n                valorResumo.textContent = window.extraMarginCm + ' cm';\r\n            } else {\r\n                container.style.display = 'none';\r\n            }\r\n        }\r\n    }\r\n});\r\n<\/script>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                \r\n\r\n                <!-- Step 2: Manta -->\r\n                <div class=\"form-step\" data-step=\"2\">\r\n                    <h3>Cobertura<\/h3>\r\n                    <div class=\"blanket-container\">\r\n                         <div class=\"blanket-cards\">\r\n                        <!-- Card 1 -->\r\n                        <div class=\"blanket-card\" data-image_id=\"1\" data-price=\"34.99\" data-color=\"#00CED1\">\r\n                            <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/cobertura\/barras\/1.jpg\" alt=\"Manta 12\">\r\n                            <h6>Cobertura de Barra - Azul<\/h6>\r\n                            <a href=\"https:\/\/nacoverpool.es\/cobertores-de-barras-a-medida-ficha-tecnicas\/\" class=\"tech-spec-link\" target=\"_blank\" title=\"Abrir ficha t\u00e9cnica em nova aba\" rel=\"nofollow noopener\">\r\n                                    Ficha T\u00e9cnica\r\n                                <\/a>\r\n                            <p>Pre\u00e7o por m\u00b2: \u20ac34.99<\/p>\r\n                            <p>Pre\u00e7o total: <span class=\"total-price\">\u20ac0.00<\/span><\/p>\r\n                        <\/div>\r\n                        <!-- Card 2 -->\r\n                        <div class=\"blanket-card\" data-image_id=\"2\" data-price=\"34.99\" data-color=\"#00CED1\">\r\n                            <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/cobertura\/barras\/2.jpg\" alt=\"Manta 8\">\r\n                            <h6>Cobertura de Barra - Cinza<\/h6>\r\n                            <a href=\"https:\/\/nacoverpool.es\/cobertores-de-barras-a-medida-ficha-tecnicas\/\" class=\"tech-spec-link\" target=\"_blank\" title=\"Abrir ficha t\u00e9cnica em nova aba\" rel=\"nofollow noopener\">\r\n                                    Ficha T\u00e9cnica\r\n                                <\/a>\r\n                            <p>Pre\u00e7o por m\u00b2: \u20ac34.99<\/p>\r\n                            <p>Pre\u00e7o total: <span class=\"total-price\">\u20ac0.00<\/span><\/p>\r\n                        <\/div>\r\n                        <!-- Card 3 -->\r\n                        <div class=\"blanket-card\" data-image_id=\"3\" data-price=\"34.99\" data-color=\"#0000D1\">\r\n                            <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/cobertura\/barras\/3.jpg\" alt=\"Manta 4\">\r\n                            <h6>Cobertura de Barra - Verde<\/h6>\r\n                            <a href=\"https:\/\/nacoverpool.es\/cobertores-de-barras-a-medida-ficha-tecnicas\/\" class=\"tech-spec-link\" target=\"_blank\" title=\"Abrir ficha t\u00e9cnica em nova aba\" rel=\"nofollow noopener\">\r\n                                    Ficha T\u00e9cnica\r\n                                <\/a>\r\n                            <p>Pre\u00e7o por m\u00b2: \u20ac34.99<\/p>\r\n                            <p>Pre\u00e7o total: <span class=\"total-price\">\u20ac0.00<\/span><\/p>\r\n                        <\/div>\r\n                        <!-- Card 4 -->\r\n                        <div class=\"blanket-card\" data-image_id=\"4\" data-price=\"34.99\" data-color=\"#00CED1\">\r\n                            <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/cobertura\/barras\/4.jpg\" alt=\"Manta 10\">\r\n                            <h6>Cobertura de Barra - Chocolate<\/h6>\r\n                            <a href=\"https:\/\/nacoverpool.es\/cobertores-de-barras-a-medida-ficha-tecnicas\/\" class=\"tech-spec-link\" target=\"_blank\" title=\"Abrir ficha t\u00e9cnica em nova aba\" rel=\"nofollow noopener\">\r\n                                    Ficha T\u00e9cnica\r\n                                <\/a>\r\n                            <p>Pre\u00e7o por m\u00b2: \u20ac34.99<\/p>\r\n                            <p>Pre\u00e7o total: <span class=\"total-price\">\u20ac0.00<\/span><\/p>\r\n                        <\/div>\r\n                        <!-- Card 5 -->\r\n                        <div class=\"blanket-card\" data-image_id=\"5\" data-price=\"34.99\" data-color=\"#00CED1\">\r\n                            <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/cobertura\/barras\/5.jpg\" alt=\"Manta 11\">\r\n                            <h6>Cobertura de Barra - Negro<\/h6>\r\n                            <a href=\"https:\/\/nacoverpool.es\/cobertores-de-barras-a-medida-ficha-tecnicas\/\" class=\"tech-spec-link\" target=\"_blank\" title=\"Abrir ficha t\u00e9cnica em nova aba\" rel=\"nofollow noopener\">\r\n                                    Ficha T\u00e9cnica\r\n                                <\/a>\r\n                            <p>Pre\u00e7o por m\u00b2: \u20ac34.99<\/p>\r\n                            <p>Pre\u00e7o total: <span class=\"total-price\">\u20ac0.00<\/span><\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <\/div>\r\n                   \r\n                <\/div>\r\n\r\n                <!-- Step 7: Relat\u00f3rio -->\r\n                <div class=\"form-step\" data-step=\"3\">\r\n                    <h3>Pedido<\/h3>\r\n                    <div class=\"relatoriofinal-container\">\r\n<div class=\"relatorio-container\">\r\n                        <!-- Lado Esquerdo: Imagens -->\r\n                        <div class=\"relatorio-imagem\">\r\n\r\n                            <div class=\"image-card\">\r\n                                <h6>Forma da piscina<\/h6>\r\n                                <img decoding=\"async\"  id=\"relatorio-forma-img\" src=\"https:\/\/recursos.nacoverpool.pt\/logo.png\" alt=\"Forma Selecionada\">\r\n                            <\/div>\r\n\r\n\r\n                            <!-- Imagem de Cobertor -->\r\n                            <div class=\"image-card\" id=\"relatorio-manta-container\">\r\n                                <h6>Cobertura<\/h6>\r\n                                <img decoding=\"async\" id=\"relatorio-manta-img\" src=\"\" alt=\"Manta Selecionada\">\r\n                            <\/div>                          \r\n                                                 \r\n                            \r\n                        <\/div>\r\n\r\n                        <!-- Lado Direito: Resumo e Custos -->\r\n                        <div class=\"relatorio-detalhes\">\r\n    <button class=\"btn-pedido finalizar-pedido\" id=\"finalizar-pedido\">Finalizar Pedido<\/button>\r\n    <!--<h4>Resumo Completo do Pedido<\/h4>-->\r\n    <div class=\"resumo-detalhes\">\r\n        <table id=\"resumo-compra\">\r\n            <thead>\r\n                <tr>\r\n                    <th>Artigo<\/th>\r\n                    <th>Detalhes<\/th>\r\n                    <th>Valor<\/th>\r\n                <\/tr>\r\n            <\/thead>\r\n            <tbody>\r\n                <!-- Forma e Medidas -->\r\n                <tr class=\"category-row\">\r\n                    <td colspan=\"3\"><strong>Forma e Medidas<\/strong><\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td>Forma Seleccionada<\/td>\r\n                    <td id=\"forma-selecionada\">-<\/td>\r\n                    <td>-<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td>Medidas<\/td>\r\n                    <td id=\"medidas-forma\">-<\/td>\r\n                    <td>-<\/td>\r\n                <\/tr>\r\n                <!-- No relat\u00f3rio final, adicione esta linha na tabela -->\r\n                <tr>\r\n                    <td>Margem Adicional<\/td>\r\n                    <td id=\"relatorio-margem\">0 cm<\/td>\r\n                    <td>-<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td>\u00c1rea Total<\/td>\r\n                    <td id=\"area-total\">- m\u00b2<\/td>\r\n                    <td>-<\/td>\r\n                <\/tr>\r\n\r\n                \r\n\r\n                <!-- Cobertor -->\r\n                <tr class=\"category-row\">\r\n                    <td colspan=\"3\"><strong>Cobertura<\/strong><\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td>Modelo<\/td>\r\n                    <td id=\"modelo-manta\">-<\/td>\r\n                    <td id=\"preco-manta\">\u20ac0.00<\/td>\r\n                <\/tr>\r\n\r\n                <!-- Totales -->\r\n                 <tr class=\"total-row\">\r\n                    <td colspan=\"2\"><strong>Transporte<\/strong><\/td>\r\n                    <td>\r\n                        <span class=\"transport-info\" style=\"cursor: help;\">\r\n                            Ser\u00e1 calculado no checkout \r\n                            <button type=\"button\" class=\"transport-tooltip-btn\" style=\"background: none; border: none; cursor: pointer; font-size: 14px; margin-left: 5px;\">\u2139\ufe0f<\/button>\r\n                        <\/span>\r\n                    <\/td>\r\n                <\/tr>\r\n                <tr class=\"total-row\">\r\n                    <td colspan=\"2\"><strong>Subtotal<\/strong><\/td>\r\n                    <td id=\"subtotal\">\u20ac0.00<\/td>\r\n                <\/tr>\r\n                <tr class=\"total-row grand-total\">\r\n                    <td colspan=\"2\"><strong>Total Final<\/strong><\/td>\r\n                    <td id=\"total-final\">\u20ac0.00<\/td>\r\n                    <input type=\"hidden\" name=\"custom_transporte\" id=\"custom-transporte-input\" value=\"\">\r\n                <\/tr>\r\n            <\/tbody>\r\n        <\/table>\r\n\r\n        <div class=\"info-entrega\">\r\n            <p><strong>Prazo de Entrega:<\/strong> <span id=\"prazo-entrega\">3 dias \u00fateis<\/span><\/p>\r\n            <p><strong>M\u00e9todo de Envio:<\/strong> Transportista<\/p>\r\n        <\/div>\r\n\r\n        <button class=\"btn-pedido finalizar-pedido\" id=\"finalizar-pedido\">Finalizar Pedido<\/button>\r\n    <\/div>\r\n<\/div>\r\n                    <\/div>\r\n                    <\/div>\r\n\r\n                    \r\n                <\/div>\r\n\r\n\r\n            <\/form>\r\n        <\/div>\r\n    <\/div>\r\n\r\n     <!-- Div do resumo \u00e0 direita -->\r\n      <div class=\"compact-summary\" id=\"resumo_pequeno\">\r\n        <h3>Resumo do pedido<\/h3>\r\n        <div class=\"summary-items\">\r\n            \r\n            <!-- Forma -->\r\n            <div class=\"summary-item\">\r\n                <img decoding=\"async\" id=\"summary-shape-img\" src=\"https:\/\/recursos.nacoverpool.pt\/logo.jpg\" class=\"summary-img\">\r\n                <div class=\"summary-details\">\r\n                    <span class=\"item-label\" id=\"forna\" >Forma:<\/span>\r\n                    <span id=\"summary-shape\" class=\"item-value\">--<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <!-- No resumo compacto (card flutuante) - Adicione esta div -->\r\n            <div class=\"summary-item\" id=\"summary-margin-container\" style=\"display: none;\">\r\n                <img decoding=\"async\" src=\"https:\/\/recursos.nacoverpool.pt\/logo.jpg\" class=\"summary-img\">\r\n                <div class=\"summary-details\">\r\n                    <span class=\"item-label\">Margem Adicional:<\/span>\r\n                    <span id=\"summary-margin\" class=\"item-value\">0 cm<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- Cobertor -->\r\n            <div class=\"summary-item\">\r\n                <img decoding=\"async\" id=\"summary-blanket-img\" src=\"https:\/\/recursos.nacoverpool.pt\/logo.jpg\" class=\"summary-img\">\r\n                <div class=\"summary-details\">\r\n                    <span class=\"item-label\">Cobertura:<\/span>\r\n                    <span id=\"summary-blanket\" class=\"item-value\">\u20ac0.00<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            \r\n            <!-- Total -->\r\n            <div class=\"summary-total\">\r\n                <span class=\"total-label\">Total:<\/span>\r\n                <span id=\"summary-total\" class=\"total-value\">\u20ac0.00<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- TRANSPORTE - ADICIONAR este c\u00f3digo ANTES do fechamento do <\/body> ou no final do HTML -->\r\n<div id=\"transport-info-modal\" class=\"transport-modal\" style=\"display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);\">\r\n    <div class=\"transport-modal-content\" style=\"background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 600px; border-radius: 8px;\">\r\n        <h4 style=\"margin-top: 0; color: #333;\">Pre\u00e7os de Transporte - Capas de Barras<\/h4>\r\n        <table class=\"transport-prices-table\" style=\"width: 100%; border-collapse: collapse; margin: 15px 0;\">\r\n            <thead>\r\n                <tr style=\"background-color: #f2f2f2;\">\r\n                    <th style=\"border: 1px solid #ddd; padding: 8px; text-align: left;\">Destino<\/th>\r\n                    <th style=\"border: 1px solid #ddd; padding: 8px; text-align: left;\">C\u00f3digo Postal<\/th>\r\n                    <th style=\"border: 1px solid #ddd; padding: 8px; text-align: left;\">Capa de Barra<\/th>\r\n                <\/tr>\r\n            <\/thead>\r\n            <tbody>\r\n                <tr>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">Can\u00e1rias<\/td>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">35xxx \/ 38xxx<\/td>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">250\u20ac<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">Baleares<\/td>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">07xxx<\/td>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">180\u20ac<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">A\u00e7ores<\/td>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">95xx-xxx<\/td>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">200\u20ac<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">Madeira<\/td>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">90xx-xxx<\/td>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">200\u20ac<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">Outros Destinos<\/td>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">-<\/td>\r\n                    <td style=\"border: 1px solid #ddd; padding: 8px;\">99\u20ac<\/td>\r\n                <\/tr>\r\n            <\/tbody>\r\n        <\/table>\r\n        \r\n        <div style=\"background-color: #fffacd; padding: 15px; border-radius: 5px; margin: 15px 0; border-left: 4px solid #ffd700;\">\r\n            <h5 style=\"margin: 0 0 8px 0; color: #333;\">\ud83d\udca1 Informa\u00e7\u00e3o Importante:<\/h5>\r\n            <p style=\"margin: 0; font-size: 14px; color: #555;\">\r\n                Para <strong>Capa de Barras<\/strong> o transporte tem custo fixo segundo o destino. \r\n               N\u00e3o h\u00e1 distin\u00e7\u00e3o entre \"somente cobertura\" ou \"com o enrolador\", como ocorre com cobertores t\u00e9rmicos.\r\n            <\/p>\r\n        <\/div>\r\n        \r\n        <button onclick=\"closeTransportInfo()\" style=\"background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; float: right;\">Fechar<\/button>\r\n        <div style=\"clear: both;\"><\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Modal para a forma N - Adicione isso no final do seu HTML, antes do fechamento do <\/body> -->\r\n<div id=\"shape-n-modal\" class=\"custom-modal\" style=\"display: none;\">\r\n    <div class=\"modal-overlay\"><\/div>\r\n    <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n            <h3>Forma Personalizada<\/h3>\r\n            <button type=\"button\" class=\"modal-close\">&times;<\/button>\r\n        <\/div>\r\n        <div class=\"modal-body\">\r\n            <p>N\u00e3o encontrou o formato da sua piscina? <br> Anexe fotos e a nossa equipa tratar\u00e1 do resto.<\/p>\r\n            \r\n            <form id=\"custom-shape-form\">\r\n                <div class=\"form-group\">\r\n                    <label for=\"custom-name\">Nome *<\/label>\r\n                    <input type=\"text\" id=\"custom-name\" name=\"name\" required placeholder=\"Seu nome completo\">\r\n                <\/div>\r\n                \r\n                <div class=\"form-group\">\r\n                    <label for=\"custom-email\">Email *<\/label>\r\n                    <input type=\"email\" id=\"custom-email\" name=\"email\" required placeholder=\"seu@email.com\">\r\n                <\/div>\r\n                \r\n                <div class=\"form-group\">\r\n                    <label for=\"custom-phone\">Contacto Telef\u00f3nico *<\/label>\r\n                    <input type=\"tel\" id=\"custom-phone\" name=\"phone\" required placeholder=\"+351 912 345 678\">\r\n                <\/div>\r\n                \r\n                <div class=\"form-group\">\r\n                    <label for=\"custom-message\">Mensagem *<\/label>\r\n                    <textarea id=\"custom-message\" name=\"message\" required placeholder=\"Descreva a forma da sua piscina, medidas aproximadas ou qualquer informa\u00e7\u00e3o relevante...\" rows=\"4\"><\/textarea>\r\n                <\/div>\r\n                \r\n                <div class=\"form-group\">\r\n                    <label for=\"custom-photos\">Fotos da Piscina (opcional)<\/label>\r\n                    <div class=\"file-upload-area\" id=\"file-upload-area\">\r\n                        <input type=\"file\" id=\"custom-photos\" name=\"photos[]\" multiple accept=\"image\/*\" style=\"display: none;\">\r\n                        <div class=\"upload-prompt\">\r\n                            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path>\r\n                                <polyline points=\"17 8 12 3 7 8\"><\/polyline>\r\n                                <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"><\/line>\r\n                            <\/svg>\r\n                            <p>Clique para adicionar fotos ou arraste aqui<\/p>\r\n                            <p class=\"upload-hint\">Pode adicionar v\u00e1rias fotos (m\u00e1x. 10)<\/p>\r\n                        <\/div>\r\n                        <div class=\"preview-container\" id=\"preview-container\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"form-group\">\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" name=\"newsletter\" id=\"custom-newsletter\" checked>\r\n                        <span>Desejo receber novidades e ofertas por email<\/span>\r\n                    <\/label>\r\n                <\/div>\r\n                \r\n                <div class=\"form-actions\">\r\n                    <button type=\"button\" class=\"btn-secondary modal-cancel\">Cancelar<\/button>\r\n                    <button type=\"submit\" class=\"btn-primary\" id=\"submit-custom-form\">\r\n                        <span class=\"btn-text\">Enviar Pedido<\/span>\r\n                        <span class=\"btn-loader\" style=\"display: none;\"><\/span>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Modal de sucesso -->\r\n<div id=\"success-modal\" class=\"custom-modal\" style=\"display: none;\">\r\n    <div class=\"modal-overlay\"><\/div>\r\n    <div class=\"modal-content success-content\">\r\n        <div class=\"success-icon\">\r\n            <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path>\r\n                <polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline>\r\n            <\/svg>\r\n        <\/div>\r\n        <h3>Pedido Enviado com Sucesso!<\/h3>\r\n        <p>Obrigado pelo seu pedido. Nossa equipe entrar\u00e1 em contacto consigo brevemente para discutir os detalhes da sua cobertura personalizada.<\/p>\r\n        <button type=\"button\" class=\"btn-primary close-success\">Fechar<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* Estilos do Modal *\/\r\n.custom-modal {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 10000;\r\n    font-family: 'Inter', sans-serif;\r\n}\r\n\r\n.modal-overlay {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(0, 0, 0, 0.5);\r\n    backdrop-filter: blur(4px);\r\n}\r\n\r\n.modal-content {\r\n    position: relative;\r\n    background: white;\r\n    width: 90%;\r\n    max-width: 600px;\r\n    max-height: 85vh;\r\n    margin: 7.5vh auto;\r\n    border-radius: 12px;\r\n    overflow: hidden;\r\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\r\n    animation: modalSlideIn 0.3s ease-out;\r\n}\r\n\r\n@keyframes modalSlideIn {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(-30px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n.modal-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 20px 30px;\r\n    background: #f8f9fa;\r\n    border-bottom: 1px solid #eaeaea;\r\n}\r\n\r\n.modal-header h3 {\r\n    margin: 0;\r\n    color: #333;\r\n    font-size: 18px;\r\n    font-weight: 600;\r\n}\r\n\r\n.modal-close {\r\n    background: none;\r\n    border: none;\r\n    font-size: 28px;\r\n    color: #666;\r\n    cursor: pointer;\r\n    line-height: 1;\r\n    padding: 0;\r\n    width: 30px;\r\n    height: 30px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: 50%;\r\n    transition: all 0.2s;\r\n}\r\n\r\n.modal-close:hover {\r\n    background: #f0f0f0;\r\n    color: #333;\r\n}\r\n\r\n.modal-body {\r\n    padding: 30px;\r\n    overflow-y: auto;\r\n    max-height: calc(85vh - 80px);\r\n}\r\n\r\n.modal-body p {\r\n    margin-bottom: 25px;\r\n    color: #666;\r\n    line-height: 1.5;\r\n}\r\n\r\n\/* Form Styles *\/\r\n.form-group {\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.form-group label {\r\n    display: block;\r\n    margin-bottom: 8px;\r\n    color: #333;\r\n    font-weight: 500;\r\n    font-size: 14px;\r\n}\r\n\r\n.form-group input,\r\n.form-group textarea {\r\n    width: 100%;\r\n    padding: 12px 16px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 8px;\r\n    font-size: 14px;\r\n    font-family: inherit;\r\n    transition: border-color 0.2s;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.form-group input:focus,\r\n.form-group textarea:focus {\r\n    outline: none;\r\n    border-color: #4CAF50;\r\n    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);\r\n}\r\n\r\n.form-group input::placeholder,\r\n.form-group textarea::placeholder {\r\n    color: #999;\r\n}\r\n\r\n\/* File Upload *\/\r\n.file-upload-area {\r\n    border: 2px dashed #ddd;\r\n    border-radius: 8px;\r\n    padding: 25px;\r\n    text-align: center;\r\n    cursor: pointer;\r\n    transition: all 0.3s;\r\n    background: #fafafa;\r\n}\r\n\r\n.file-upload-area:hover {\r\n    border-color: #4CAF50;\r\n    background: #f8fff8;\r\n}\r\n\r\n.file-upload-area.dragover {\r\n    border-color: #4CAF50;\r\n    background: #f0fff0;\r\n}\r\n\r\n.upload-prompt svg {\r\n    color: #999;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.upload-prompt p {\r\n    margin: 5px 0;\r\n    color: #666;\r\n}\r\n\r\n.upload-hint {\r\n    font-size: 12px;\r\n    color: #999;\r\n}\r\n\r\n\/* Preview Container *\/\r\n.preview-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 10px;\r\n    margin-top: 15px;\r\n    min-height: 60px;\r\n}\r\n\r\n.preview-item {\r\n    position: relative;\r\n    width: 80px;\r\n    height: 80px;\r\n    border-radius: 6px;\r\n    overflow: hidden;\r\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n}\r\n\r\n.preview-item img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n}\r\n\r\n.remove-photo {\r\n    position: absolute;\r\n    top: 5px;\r\n    right: 5px;\r\n    width: 20px;\r\n    height: 20px;\r\n    background: rgba(0,0,0,0.7);\r\n    color: white;\r\n    border: none;\r\n    border-radius: 50%;\r\n    font-size: 12px;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    line-height: 1;\r\n}\r\n\r\n.remove-photo:hover {\r\n    background: #dc3545;\r\n}\r\n\r\n\/* Checkbox *\/\r\n.checkbox-label {\r\n    display: flex;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    color: #666;\r\n    font-size: 14px;\r\n}\r\n\r\n.checkbox-label input {\r\n    width: auto;\r\n    margin-right: 10px;\r\n}\r\n\r\n\/* Form Actions *\/\r\n.form-actions {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    gap: 15px;\r\n    margin-top: 30px;\r\n    padding-top: 20px;\r\n    border-top: 1px solid #eee;\r\n}\r\n\r\n.btn-primary,\r\n.btn-secondary {\r\n    padding: 12px 28px;\r\n    border: none;\r\n    border-radius: 8px;\r\n    font-size: 14px;\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n    font-family: inherit;\r\n}\r\n\r\n.btn-primary {\r\n    background: #4CAF50;\r\n    color: white;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n\r\n.btn-primary:hover:not(:disabled) {\r\n    background: #45a049;\r\n    transform: translateY(-1px);\r\n}\r\n\r\n.btn-primary:disabled {\r\n    opacity: 0.6;\r\n    cursor: not-allowed;\r\n}\r\n\r\n.btn-secondary {\r\n    background: #f8f9fa;\r\n    color: #666;\r\n    border: 1px solid #ddd;\r\n}\r\n\r\n.btn-secondary:hover {\r\n    background: #e9ecef;\r\n}\r\n\r\n\/* Loader Animation *\/\r\n.btn-loader {\r\n    width: 16px;\r\n    height: 16px;\r\n    border: 2px solid rgba(255,255,255,0.3);\r\n    border-radius: 50%;\r\n    border-top-color: white;\r\n    animation: spin 1s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n    to { transform: rotate(360deg); }\r\n}\r\n\r\n\/* Success Modal *\/\r\n.success-content {\r\n    text-align: center;\r\n    padding: 40px 30px;\r\n}\r\n\r\n.success-icon {\r\n    width: 80px;\r\n    height: 80px;\r\n    margin: 0 auto 20px;\r\n    background: #e8f5e9;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #4CAF50;\r\n}\r\n\r\n.success-content h3 {\r\n    margin: 0 0 15px;\r\n    color: #333;\r\n    font-size: 24px;\r\n}\r\n\r\n.success-content p {\r\n    color: #666;\r\n    line-height: 1.6;\r\n    margin-bottom: 25px;\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 768px) {\r\n    .modal-content {\r\n        width: 95%;\r\n        margin: 5vh auto;\r\n        max-height: 90vh;\r\n    }\r\n    \r\n    .modal-header,\r\n    .modal-body {\r\n        padding: 20px;\r\n    }\r\n    \r\n    .form-actions {\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .btn-primary,\r\n    .btn-secondary {\r\n        width: 100%;\r\n        justify-content: center;\r\n    }\r\n}\r\n\r\n\/* Estilos espec\u00edficos para bot\u00e3o do modal *\/\r\n#submit-custom-form {\r\n    opacity: 1 !important;\r\n    cursor: pointer !important;\r\n    pointer-events: all !important;\r\n    background: #4CAF50 !important;\r\n    color: white !important;\r\n    border: none !important;\r\n    border-radius: 8px !important;\r\n    padding: 12px 28px !important;\r\n    font-size: 14px !important;\r\n    font-weight: 500 !important;\r\n    transition: all 0.2s !important;\r\n}\r\n\r\n#submit-custom-form:disabled {\r\n    opacity: 0.6 !important;\r\n    cursor: not-allowed !important;\r\n}\r\n\r\n\/* Estilos para o modal alternativo *\/\r\n.alternative-contact {\r\n    text-align: center;\r\n    padding: 20px;\r\n}\r\n\r\n.alternative-contact h4 {\r\n    color: #dc3545;\r\n    margin-bottom: 15px;\r\n}\r\n\r\n.alternative-contact p {\r\n    margin-bottom: 15px;\r\n    color: #666;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ C\u00f3digo JavaScript para o modal da forma N\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    \/\/ Inicializar vari\u00e1veis\r\n    let uploadedFiles = [];\r\n    \r\n    \/\/ 1. Adicionar evento de clique \u00e0 forma N\r\n    const shapeN = document.querySelector('.shape-item[data-shape=\"n\"]');\r\n    const shapeNModal = document.getElementById('shape-n-modal');\r\n    const successModal = document.getElementById('success-modal');\r\n    \r\n    if (shapeN) {\r\n        shapeN.addEventListener('click', function(e) {\r\n            e.preventDefault();\r\n            openShapeNModal();\r\n        });\r\n    }\r\n    \r\n    \/\/ 2. Fun\u00e7\u00f5es para abrir\/fechar modais\r\n    function openShapeNModal() {\r\n        shapeNModal.style.display = 'block';\r\n        document.body.style.overflow = 'hidden';\r\n    }\r\n    \r\n    function closeShapeNModal() {\r\n        shapeNModal.style.display = 'none';\r\n        document.body.style.overflow = 'auto';\r\n        resetForm();\r\n    }\r\n    \r\n    function openSuccessModal() {\r\n        successModal.style.display = 'block';\r\n    }\r\n    \r\n    function closeSuccessModal() {\r\n        successModal.style.display = 'none';\r\n        closeShapeNModal();\r\n    }\r\n    \r\n    \/\/ 3. Event Listeners para os bot\u00f5es do modal\r\n    document.querySelectorAll('.modal-close, .modal-cancel').forEach(btn => {\r\n        btn.addEventListener('click', closeShapeNModal);\r\n    });\r\n    \r\n    const closeSuccessBtn = document.querySelector('.close-success');\r\n    if (closeSuccessBtn) {\r\n        closeSuccessBtn.addEventListener('click', closeSuccessModal);\r\n    }\r\n    \r\n    \/\/ Fechar modal ao clicar fora do conte\u00fado\r\n    document.querySelectorAll('.modal-overlay').forEach(overlay => {\r\n        overlay.addEventListener('click', function(e) {\r\n            if (e.target === this) {\r\n                if (shapeNModal.style.display === 'block') {\r\n                    closeShapeNModal();\r\n                }\r\n                if (successModal.style.display === 'block') {\r\n                    closeSuccessModal();\r\n                }\r\n            }\r\n        });\r\n    });\r\n    \r\n    \/\/ 4. Gerenciamento de upload de fotos\r\n    const fileInput = document.getElementById('custom-photos');\r\n    const uploadArea = document.getElementById('file-upload-area');\r\n    const previewContainer = document.getElementById('preview-container');\r\n    \r\n    if (uploadArea && fileInput) {\r\n        uploadArea.addEventListener('click', () => fileInput.click());\r\n        \r\n        uploadArea.addEventListener('dragover', (e) => {\r\n            e.preventDefault();\r\n            uploadArea.classList.add('dragover');\r\n        });\r\n        \r\n        uploadArea.addEventListener('dragleave', () => {\r\n            uploadArea.classList.remove('dragover');\r\n        });\r\n        \r\n        uploadArea.addEventListener('drop', (e) => {\r\n            e.preventDefault();\r\n            uploadArea.classList.remove('dragover');\r\n            handleFiles(e.dataTransfer.files);\r\n        });\r\n        \r\n        fileInput.addEventListener('change', (e) => {\r\n            handleFiles(e.target.files);\r\n        });\r\n    }\r\n    \r\n    function handleFiles(files) {\r\n        const remainingSlots = 10 - uploadedFiles.length;\r\n        const filesToAdd = Array.from(files).slice(0, remainingSlots);\r\n        \r\n        filesToAdd.forEach(file => {\r\n            if (file.type.startsWith('image\/')) {\r\n                uploadedFiles.push(file);\r\n                createPreview(file);\r\n            }\r\n        });\r\n        \r\n        if (files.length > remainingSlots) {\r\n            alert(`S\u00f3 pode adicionar at\u00e9 10 fotos. ${files.length - remainingSlots} foto(s) n\u00e3o foram adicionadas.`);\r\n        }\r\n        \r\n        if (fileInput) {\r\n            fileInput.value = '';\r\n        }\r\n    }\r\n    \r\n    function createPreview(file) {\r\n        const reader = new FileReader();\r\n        reader.onload = (e) => {\r\n            const previewItem = document.createElement('div');\r\n            previewItem.className = 'preview-item';\r\n            \r\n            const img = document.createElement('img');\r\n            img.src = e.target.result;\r\n            img.alt = 'Preview';\r\n            \r\n            const removeBtn = document.createElement('button');\r\n            removeBtn.type = 'button';\r\n            removeBtn.className = 'remove-photo';\r\n            removeBtn.innerHTML = '\u00d7';\r\n            removeBtn.addEventListener('click', () => {\r\n                const index = uploadedFiles.indexOf(file);\r\n                if (index > -1) {\r\n                    uploadedFiles.splice(index, 1);\r\n                }\r\n                previewItem.remove();\r\n            });\r\n            \r\n            previewItem.appendChild(img);\r\n            previewItem.appendChild(removeBtn);\r\n            \r\n            if (previewContainer) {\r\n                previewContainer.appendChild(previewItem);\r\n            }\r\n        };\r\n        reader.readAsDataURL(file);\r\n    }\r\n    \r\n    \/\/ 5. Envio do formul\u00e1rio\r\n    const customForm = document.getElementById('custom-shape-form');\r\n    const submitBtn = document.getElementById('submit-custom-form');\r\n    \r\n    if (customForm && submitBtn) {\r\n        const btnText = submitBtn.querySelector('.btn-text');\r\n        const btnLoader = submitBtn.querySelector('.btn-loader');\r\n        \r\n        customForm.addEventListener('submit', async (e) => {\r\n            e.preventDefault();\r\n            \r\n            \/\/ Valida\u00e7\u00e3o b\u00e1sica\r\n            const requiredFields = ['name', 'email', 'phone', 'message'];\r\n            let isValid = true;\r\n            \r\n            requiredFields.forEach(field => {\r\n                const input = document.getElementById(`custom-${field}`);\r\n                if (input && !input.value.trim()) {\r\n                    isValid = false;\r\n                    input.style.borderColor = '#dc3545';\r\n                    input.addEventListener('input', function() {\r\n                        this.style.borderColor = '#ddd';\r\n                    }, { once: true });\r\n                } else if (input) {\r\n                    input.style.borderColor = '#ddd';\r\n                }\r\n            });\r\n            \r\n            if (!isValid) {\r\n                alert('Por favor, preencha todos os campos obrigat\u00f3rios (*).');\r\n                return;\r\n            }\r\n            \r\n            \/\/ Valida\u00e7\u00e3o de email\r\n            const emailInput = document.getElementById('custom-email');\r\n            if (emailInput) {\r\n                const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n                if (!emailRegex.test(emailInput.value)) {\r\n                    emailInput.style.borderColor = '#dc3545';\r\n                    alert('Por favor, insira um email v\u00e1lido.');\r\n                    return;\r\n                }\r\n            }\r\n            \r\n            \/\/ Mostrar loader\r\n            submitBtn.disabled = true;\r\n            if (btnText) btnText.textContent = 'A enviar...';\r\n            if (btnLoader) btnLoader.style.display = 'block';\r\n            \r\n            try {\r\n                \/\/ Criar objeto FormData\r\n                const formData = new FormData();\r\n                \r\n                \/\/ Dados b\u00e1sicos\r\n                formData.append('action', 'submit_custom_shape_request');\r\n                formData.append('name', document.getElementById('custom-name').value.trim());\r\n                formData.append('email', document.getElementById('custom-email').value.trim());\r\n                formData.append('phone', document.getElementById('custom-phone').value.trim());\r\n                formData.append('message', document.getElementById('custom-message').value.trim());\r\n                formData.append('newsletter', document.querySelector('input[name=\"newsletter\"]').checked ? 'true' : 'false');\r\n\r\n                \/\/ Adicionar fotos (se existirem)\r\n                if (uploadedFiles.length > 0) {\r\n                    uploadedFiles.forEach((file, index) => {\r\n                        formData.append(`photos[${index}]`, file);\r\n                    });\r\n                }\r\n                \r\n                \/\/ URL do AJAX do WordPress\r\n                const ajaxUrl = '\/wp-admin\/admin-ajax.php';\r\n                \r\n                \/\/ Enviar requisi\u00e7\u00e3o\r\n                \r\n                const response = await fetch(ajaxUrl, {\r\n                    method: 'POST',\r\n                    body: formData\r\n                });\r\n                \r\n                \/\/ Verificar se a resposta \u00e9 JSON\r\n                const contentType = response.headers.get('content-type');\r\n                if (contentType && contentType.includes('application\/json')) {\r\n                    const result = await response.json();\r\n                    \r\n                    if (result.success) {\r\n                        \/\/ Sucesso\r\n                        closeShapeNModal();\r\n                        openSuccessModal();\r\n                        resetForm();\r\n                    } else {\r\n                        throw new Error(result.data || 'Erro desconhecido');\r\n                    }\r\n                } else {\r\n                    \/\/ Se n\u00e3o for JSON, pode ser um erro do WordPress\r\n                    const text = await response.text();\r\n                    throw new Error('Resposta inv\u00e1lida do servidor');\r\n                }\r\n                \r\n            } catch (error) {\r\n                console.error('Erro detalhado:', error);\r\n                \r\n                \/\/ Mostrar mensagem de erro amig\u00e1vel\r\n                let errorMessage = 'Ocorreu um erro ao enviar o pedido. ';\r\n                \r\n                if (error.message.includes('email')) {\r\n                    errorMessage += 'Por favor, verifique o email inserido.';\r\n                } else if (error.message.includes('obrigat\u00f3rio')) {\r\n                    errorMessage += 'Por favor, preencha todos os campos obrigat\u00f3rios.';\r\n                } else {\r\n                    errorMessage += 'Por favor, tente novamente.';\r\n                }\r\n                \r\n                alert(errorMessage);\r\n                \r\n                \/\/ Mostrar alternativa de contato\r\n                showAlternativeContact();\r\n            } finally {\r\n                \/\/ Restaurar bot\u00e3o\r\n                submitBtn.disabled = false;\r\n                if (btnText) btnText.textContent = 'Enviar Pedido';\r\n                if (btnLoader) btnLoader.style.display = 'none';\r\n            }\r\n        });\r\n    }\r\n\r\n    function uploadWithProgress(formData) {\r\n    return new Promise((resolve, reject) => {\r\n        const xhr = new XMLHttpRequest();\r\n        \r\n        \/\/ Mostrar progresso\r\n        xhr.upload.addEventListener('progress', (event) => {\r\n            if (event.lengthComputable) {\r\n                const percentComplete = (event.loaded \/ event.total) * 100;\r\n                console.log(`Upload: ${percentComplete.toFixed(1)}%`);\r\n                \/\/ Voc\u00ea pode adicionar uma barra de progresso aqui\r\n            }\r\n        });\r\n        \r\n        xhr.onload = function() {\r\n            if (xhr.status === 200) {\r\n                try {\r\n                    const response = JSON.parse(xhr.responseText);\r\n                    resolve(response);\r\n                } catch (error) {\r\n                    reject(new Error('Resposta inv\u00e1lida do servidor'));\r\n                }\r\n            } else {\r\n                reject(new Error(`Erro HTTP: ${xhr.status}`));\r\n            }\r\n        };\r\n        \r\n        xhr.onerror = function() {\r\n            reject(new Error('Erro de rede'));\r\n        };\r\n        \r\n        xhr.open('POST', '\/wp-admin\/admin-ajax.php');\r\n        xhr.send(formData);\r\n    });\r\n}\r\n    \r\n    \/\/ 6. Fun\u00e7\u00e3o para mostrar alternativa de contato\r\n    function showAlternativeContact() {\r\n        const name = document.getElementById('custom-name')?.value || '';\r\n        const email = document.getElementById('custom-email')?.value || '';\r\n        const phone = document.getElementById('custom-phone')?.value || '';\r\n        const message = document.getElementById('custom-message')?.value || '';\r\n        \r\n        const contactInfo = `\r\n        <div class=\"alternative-contact\">\r\n            <h4>\u26a0\ufe0f Aten\u00e7\u00e3o<\/h4>\r\n            <p>O sistema de envio autom\u00e1tico est\u00e1 temporariamente indispon\u00edvel.<\/p>\r\n            <p>Por favor, envie um email manualmente para:<\/p>\r\n            <p style=\"font-size: 18px; font-weight: bold; color: #4CAF50;\">\r\n                carlosmonjane98@gmail.com\r\n            <\/p>\r\n            \r\n            <div style=\"background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 20px 0; text-align: left;\">\r\n                <h5>\ud83d\udccb Dados do seu pedido:<\/h5>\r\n                <p><strong>Nome:<\/strong> ${name}<\/p>\r\n                <p><strong>Email:<\/strong> ${email}<\/p>\r\n                <p><strong>Telefone:<\/strong> ${phone}<\/p>\r\n                <p><strong>Mensagem:<\/strong><br>${message}<\/p>\r\n                <p><strong>Fotos:<\/strong> ${uploadedFiles.length} anexo(s)<\/p>\r\n            <\/div>\r\n            \r\n            <div style=\"display: flex; gap: 10px; justify-content: center;\">\r\n                <button type=\"button\" onclick=\"copyContactData()\" style=\"background: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;\">\r\n                    \ud83d\udccb Copiar Dados\r\n                <\/button>\r\n                <button type=\"button\" onclick=\"closeShapeNModal()\" style=\"background: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;\">\r\n                    Fechar\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n        `;\r\n        \r\n        \/\/ Substituir conte\u00fado do modal\r\n        const modalBody = document.querySelector('.modal-body');\r\n        if (modalBody) {\r\n            modalBody.innerHTML = contactInfo;\r\n        }\r\n    }\r\n    \r\n    \/\/ 7. Fun\u00e7\u00e3o para copiar dados (exposta globalmente)\r\n    window.copyContactData = function() {\r\n        const name = document.getElementById('custom-name')?.value || '';\r\n        const email = document.getElementById('custom-email')?.value || '';\r\n        const phone = document.getElementById('custom-phone')?.value || '';\r\n        const message = document.getElementById('custom-message')?.value || '';\r\n        \r\n        const textToCopy = `Nome: ${name}\r\nEmail: ${email}\r\nTelefone: ${phone}\r\n\r\nMensagem:\r\n${message}\r\n\r\n---\r\nPedido enviado atrav\u00e9s do formul\u00e1rio de forma personalizada`;\r\n\r\n        navigator.clipboard.writeText(textToCopy)\r\n            .then(() => {\r\n                alert('\u2705 Dados copiados! Cole no seu email para geral@nacoverpool.pt');\r\n                closeShapeNModal();\r\n            })\r\n            .catch(err => {\r\n                console.error('Erro ao copiar:', err);\r\n                alert('N\u00e3o foi poss\u00edvel copiar. Por favor, anote os dados manualmente.');\r\n            });\r\n    };\r\n    \r\n    \/\/ 8. Fun\u00e7\u00e3o para resetar o formul\u00e1rio\r\n    function resetForm() {\r\n        const form = document.getElementById('custom-shape-form');\r\n        if (form) {\r\n            form.reset();\r\n        }\r\n        uploadedFiles = [];\r\n        if (previewContainer) {\r\n            previewContainer.innerHTML = '';\r\n        }\r\n        if (fileInput) {\r\n            fileInput.value = '';\r\n        }\r\n    }\r\n});\r\n<\/script>\r\n\r\n<!-- TRANSPORTE - ADICIONAR este script no final do HTML -->\r\n<script>\r\n\/\/ Fun\u00e7\u00f5es para o modal de transporte\r\nfunction toggleTransportInfo() {\r\n    const modal = document.getElementById('transport-info-modal');\r\n    if (modal.style.display === 'block') {\r\n        modal.style.display = 'none';\r\n    } else {\r\n        modal.style.display = 'block';\r\n    }\r\n}\r\n\r\nfunction closeTransportInfo() {\r\n    document.getElementById('transport-info-modal').style.display = 'none';\r\n}\r\n\r\n\/\/ Fechar modal ao clicar fora\r\nwindow.addEventListener('click', function(event) {\r\n    const modal = document.getElementById('transport-info-modal');\r\n    if (event.target === modal) {\r\n        modal.style.display = 'none';\r\n    }\r\n});\r\n\r\n\/\/ Adicionar evento de clique aos bot\u00f5es de informa\u00e7\u00e3o\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const infoButtons = document.querySelectorAll('.transport-tooltip-btn');\r\n    infoButtons.forEach(button => {\r\n        button.addEventListener('click', function(e) {\r\n            e.stopPropagation();\r\n            toggleTransportInfo();\r\n        });\r\n    });\r\n});\r\n<\/script>\r\n\r\n<!--Style: DIVs Principais e Card Resumo-->\r\n<style>\r\n    \/* Container principal *\/\r\n#multistep-form-container {\r\n    display: flex;\r\n    gap: 0px;\r\n    margin: 0 auto;\r\n    padding: 0px;\r\n    position: relative;\r\n    align-items: flex-start;\r\n    overflow-x: hidden;\r\n}\r\n\r\nh3 {\r\n    font-size: 12px!important;\r\n}\r\n\r\n\/* Div principal do formul\u00e1rio (85% da largura) *\/\r\n.form-main {\r\n    flex: 4;\r\n    width: 85%;\r\n}\r\n\r\n\/* Div compacta do resumo (15% da largura) *\/\r\n.compact-summary {\r\n   flex: 0 0 22%;\r\n    max-width: 320px;\r\n    position: sticky;\r\n    top: 100px;\r\n    background: #f8f9fa;\r\n    border-radius: 8px;\r\n    padding: 15px;\r\n    box-shadow: 0 2px 4px rgba(0,0,0,0.05);\r\n    font-size: 13px;\r\n    height: fit-content;\r\n    margin-top: 20px;\r\n}\r\n\r\n.compact-summary h3 {\r\n    margin: 0 0 10px 0;\r\n    font-size: 15px;\r\n    color: #333;\r\n    padding-bottom: 8px;\r\n    border-bottom: 1px solid #eee;\r\n}\r\n\r\n.summary-items {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 10px;\r\n}\r\n\r\n\r\n\/* Garante que todas as imagens comecem com o logo *\/\r\n#summary-shape-img,\r\n#summary-blanket-img,\r\n#summary-reinforcement-img,\r\n#summary-roller-img,\r\n#summary-cover-img,\r\n#summary-edges-img,\r\n#summary-ladder-img,\r\n#summary-edges-img {\r\n    src: url('https:\/\/recursos.nacoverpool.pt\/logo.jpg');\r\n    width: 50px;\r\n    height: 50px;\r\n    object-fit: contain;\r\n    border-radius: 4px;\r\n    border: 1px solid #ddd;\r\n    background-color: #fff;\r\n    padding: 2px;\r\n}\r\n\r\n\/* Esconde a imagem de cantos inicialmente *\/\r\n\r\n\r\n.summary-img {\r\n    width: 40px;\r\n    height: 40px;\r\n    object-fit: contain;\r\n    border-radius: 4px;\r\n    border: 1px solid #ddd;\r\n    background-color: #fff;\r\n    padding: 2px;\r\n}\r\n\r\n.summary-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 6px 0;\r\n    min-height: 44px;\r\n}\r\n\r\n\r\n.summary-details {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex-grow: 1;\r\n    min-width: 0;\r\n}\r\n\r\n.item-label {\r\n    color: #555;\r\n    font-size: 12px;\r\n    font-weight: 500;\r\n}\r\n\r\n.item-value {\r\n    font-weight: 600;\r\n    color: #333;\r\n    font-size: 13px;\r\n}\r\n\r\n.summary-total {\r\n    margin-top: 12px;\r\n    padding-top: 12px;\r\n    border-top: 2px solid #eee;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    font-weight: bold;\r\n    font-size: 15px;\r\n}\r\n\r\n.total-value {\r\n    color: #2e7d32;\r\n}\r\n\r\n\/* Responsividade *\/\r\n@media (max-width: 900px) {\r\n    #multistep-form-container {\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .form-main {\r\n        width: 100%;\r\n    }\r\n    \r\n    .compact-summary {\r\n        width: 100%;\r\n        position: static;\r\n        margin: 20px 0;\r\n        min-width: auto;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<style>\r\n    input::placeholder {\r\n        font-size: 10px; \/* ou outro tamanho desejado *\/\r\n    }\r\n<\/style>\r\n\r\n<!--Step 1 Formato da Pescina & Medidas-->\r\n<style>\r\n    \/* Estilos base *\/\r\n    .form-step {\r\n        padding: 15px;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n\r\n    \r\n    .form-step h3 {\r\n        color: #2e7d32;\r\n        font-size: 40px;\r\n        margin-bottom: 15px;\r\n        text-align: center;\r\n    }\r\n    \r\n\r\n    \r\n    \/* Container de medidas responsivo *\/\r\n    .measurements-container {\r\n        padding: 10px;\r\n        border: 1px solid #ddd;\r\n        border-radius: 5px;\r\n        background-color: #f9f9f9;\r\n    }\r\n    \r\n    .measurements-note {\r\n        color: green;\r\n        margin-bottom: 10px;\r\n        font-size: 10px;\r\n    }\r\n    \r\n    .required-field {\r\n        color: red;\r\n    }\r\n    \r\n    .total-area, .production-time {\r\n        margin: 5px 0;\r\n        font-size: 12px;\r\n    }\r\n\r\n    \/* NOVO START *\/\r\n\/* Container principal *\/\r\n.shapes-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n    margin-top: 15px;\r\n    min-width: 950px;\r\n}\r\n\r\n\/* Lista de formas *\/\r\n.shapes-list {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\r\n    gap: 5px;\r\n    overflow-y: auto;\r\n    max-height: none;\r\n    padding-right: 0;\r\n}\r\n\r\n\/* Item de forma *\/\r\n.shape-item {\r\n    position: relative;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 0px;\r\n    border: 2px solid #ddd;\r\n    border-radius: 6px;\r\n    background: white;\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n    max-width: 100px;\r\n    aspect-ratio: 1\/1;\r\n}\r\n\r\n.shape-item img {\r\n    max-width: 50%;\r\n    height: auto;\r\n}\r\n\r\n\/* Lado direito responsivo *\/\r\n.shape-right {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 15px;\r\n    text-align: center;\r\n}\r\n\r\n.shape-prompt {\r\n    color: green;\r\n    font-weight: bold;\r\n    display: block;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n\/* Ilustra\u00e7\u00e3o responsiva *\/\r\n.shape-illustration {\r\n    border: 1px solid #ddd;\r\n    border-radius: 5px;\r\n    padding: 15px;\r\n    background-color: #f9f9f9;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n#shape-illustration-img {\r\n    max-width: 100%;\r\n    height: auto;\r\n    max-height: 250px;\r\n}\r\n\r\n\/* Responsividade para telas m\u00e9dias (tablets) *\/\r\n@media (max-width: 950px) {\r\n    .shapes-container {\r\n        min-width: 100%;\r\n        padding: 0 10px;\r\n    }\r\n\r\n    .shape-item {\r\n        max-width: 80px;\r\n    }\r\n\r\n    .shape-item img {\r\n        max-width: 40%;\r\n    }\r\n}\r\n\r\n\/* Responsividade para telas pequenas (smartphones) *\/\r\n@media (max-width: 600px) {\r\n    .shapes-list {\r\n        grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));\r\n        gap: 4px;\r\n    }\r\n\r\n    .shape-item {\r\n        max-width: 50px;\r\n    }\r\n\r\n    .shape-item img {\r\n        max-width: 80%;\r\n    }\r\n\r\n    #shape-illustration-img {\r\n        max-height: 150px;\r\n    }\r\n}\r\n\r\n\r\n    \/* NOVO END *\/\r\n    \r\n    \/* Media Queries para diferentes tamanhos de tela *\/\r\n    @media (min-width: 768px) {\r\n        .shapes-container {\r\n            flex-direction: row;\r\n            max-height: 70vh;\r\n        }\r\n        \r\n        .shapes-list {\r\n            flex: 1;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            max-height: 70vh;\r\n            padding-right: 10px;\r\n        }\r\n\r\n        .shape-right {\r\n            flex: 2;\r\n        }\r\n        \r\n        #shape-illustration-img {\r\n            max-height: 300px;\r\n        }\r\n    }\r\n    \r\n    @media (min-width: 992px) {\r\n        .shapes-list {\r\n            grid-template-columns: repeat(3, 1fr);\r\n        }\r\n\r\n        \r\n    }\r\n    \r\n    \/* Scrollbar personalizada *\/\r\n    .shapes-list::-webkit-scrollbar {\r\n        width: 6px;\r\n    }\r\n    \r\n    .shapes-list::-webkit-scrollbar-thumb {\r\n        background-color: #bbb;\r\n        border-radius: 5px;\r\n    }\r\n    \r\n    .shapes-list::-webkit-scrollbar-track {\r\n        background-color: #f1f1f1;\r\n    }\r\n    \r\n    \/* Efeitos de hover e sele\u00e7\u00e3o *\/\r\n    .shape-item:hover {\r\n        border-color: #4CAF50;\r\n    }\r\n    \r\n    .shape-item.active {\r\n        border-color: #4CAF50;\r\n        background: #e8f5e9;\r\n    }\r\n    \r\n    \/* Letra da forma *\/\r\n    .shape-letter {\r\n        position: absolute;\r\n        top: 5px;\r\n        left: 5px;\r\n        width: 20px;\r\n        height: 20px;\r\n        background-color: #4CAF50;\r\n        color: white;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        font-size: 12px;\r\n        font-weight: bold;\r\n    }\r\n    \r\n    @media (min-width: 768px) {\r\n        .shape-letter {\r\n            top: 8px;\r\n            left: 8px;\r\n            width: 24px;\r\n            height: 24px;\r\n            font-size: 14px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<!-- Style de Medidas Sobrantes-->\r\n <style>\r\n\r\n    \/* Estilo para a margem adicional no resumo *\/\r\n#summary-margin-container {\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.margin-active {\r\n    border-left: 3px solid #4CAF50;\r\n    background-color: #f0fff0;\r\n    padding-left: 8px;\r\n}\r\n\r\n    .margin-select {\r\n    margin-bottom: 15px;\r\n}\r\n\r\n.margin-select label {\r\n    display: block;\r\n    margin-bottom: 5px;\r\n    font-weight: bold;\r\n}\r\n\r\n.margin-select select {\r\n    width: 100%;\r\n    padding: 8px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n}\r\n <\/style>\r\n\r\n<!--Step 2 Mantas-->\r\n<style>\r\n\/* ===========================\r\n   CONTAINER PRINCIPAL\r\n=========================== *\/\r\n.blanket-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n    margin-top: 15px;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    min-width: 950px; \/* Apenas desktop *\/\r\n}\r\n\r\n\/* ===========================\r\n   GRID DE CARDS\r\n=========================== *\/\r\n.blanket-cards {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n    gap: 14px;\r\n    margin-top: 15px;\r\n    padding: 10px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 8px;\r\n    background-color: #f9f9f9;\r\n    overflow-x: hidden;\r\n}\r\n\r\n\/* ===========================\r\n   CARD INDIVIDUAL\r\n=========================== *\/\r\n.blanket-card {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    padding: 12px;\r\n    text-align: center;\r\n    background-color: white;\r\n    border: 1px solid #ddd;\r\n    border-radius: 8px;\r\n    cursor: pointer;\r\n    transition: transform 0.3s, box-shadow 0.3s, border 0.3s, background-color 0.3s;\r\n}\r\n\r\n.blanket-card img {\r\n    width: 100%;\r\n    max-height: 300px;\r\n    height: auto;\r\n    object-fit: contain;\r\n    border-radius: 6px;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.blanket-card h6 {\r\n    margin: 8px 0 4px;\r\n    font-size: 14px;\r\n}\r\n\r\n.blanket-card p {\r\n    margin: 3px 0;\r\n    font-size: 13px;\r\n}\r\n\r\n\/* ===========================\r\n   HOVER & SELE\u00c7\u00c3O\r\n=========================== *\/\r\n.blanket-card:hover {\r\n    transform: scale(1.05);\r\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.blanket-card.selected {\r\n    border: 3px solid #4CAF50;\r\n    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);\r\n    background-color: #f0fff0;\r\n}\r\n\r\n\/* ===========================\r\n   LINK DE ESPECIFICA\u00c7\u00d5ES\r\n=========================== *\/\r\n.tech-spec-link {\r\n    display: inline-block;\r\n    margin: 4px 0;\r\n    font-size: 10px;\r\n    font-weight: bold;\r\n    color: #2c7be5;\r\n    text-decoration: none;\r\n    transition: all 0.2s;\r\n}\r\n\r\n.tech-spec-link:hover {\r\n    color: #1a5cb0;\r\n    text-decoration: underline;\r\n}\r\n\r\n\/* ===========================\r\n   RESPONSIVIDADE\r\n=========================== *\/\r\n\r\n\/* Tablets e telas m\u00e9dias *\/\r\n@media (max-width: 950px) {\r\n    .blanket-container {\r\n        min-width: auto; \/* Remove min-width em tablets *\/\r\n    }\r\n\r\n    .blanket-cards {\r\n        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\r\n    }\r\n\r\n    .blanket-card h6 {\r\n        font-size: 12px;\r\n    }\r\n\r\n    .blanket-card p {\r\n        font-size: 10px;\r\n    }\r\n\r\n    .blanket-card img {\r\n        max-height: 180px;\r\n    }\r\n}\r\n\r\n\/* Smartphones *\/\r\n@media (max-width: 600px) {\r\n    .blanket-cards {\r\n        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\r\n        gap: 12px;\r\n        padding: 8px;\r\n    }\r\n\r\n    .blanket-card {\r\n        padding: 8px;\r\n    }\r\n\r\n    .blanket-card img {\r\n        max-height: 150px;\r\n    }\r\n\r\n    .blanket-card h6 {\r\n        font-size: 10px;\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    .blanket-card p {\r\n        font-size: 9px;\r\n    }\r\n}\r\n\r\n\/* Micro telas *\/\r\n@media (max-width: 400px) {\r\n    .blanket-cards {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .blanket-card img {\r\n        max-width: 80%;\r\n    }\r\n\r\n    .blanket-card h6 {\r\n        font-size: 12px;\r\n    }\r\n\r\n    .blanket-card p {\r\n        font-size: 10px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<!--Step 1 Inputs-->\r\n<style>\r\n\r\n\r\n\/* Inputs *\/\r\n.measurements-inputs {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 15px;\r\n}\r\n\r\n.measurement {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n    font-size: 14px;\r\n}\r\n\r\n\/* === RESPONSIVO === *\/\r\n@media (max-width: 600px) {\r\n    .ladder-container {\r\n        flex-direction: column;\r\n    }\r\n\r\n    .ladder-image {\r\n        max-height: 280px;\r\n        padding: 15px;\r\n    }\r\n\r\n    .ladder-image img {\r\n        max-width: 90%;\r\n        max-height: 240px;\r\n    }\r\n\r\n    .ladder-card img {\r\n    width: 80%;\r\n    height: auto;\r\n    object-fit: contain;\r\n}\r\n.ladder-card p {\r\n    font-size: 9;\r\n}\r\n}\r\n\r\n    \r\n    .valid-check {\r\n        position: absolute;\r\n        right: -25px;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        color: green;\r\n        font-size: 18px;\r\n        display: none;\r\n    }\r\n    \r\n    input.valid {\r\n        border-color: green !important;\r\n    }\r\n\r\n    .measurement label {\r\n        font-size: 14px;\r\n    }\r\n\r\n    .measurement input {\r\n        width: 60px;\r\n        padding: 5px;\r\n        border: 1px solid #ccc;\r\n        border-radius: 3px;\r\n        text-align: center;\r\n    }\r\n\r\n    \/* \u00cdcone de informa\u00e7\u00e3o *\/\r\n    .info-icon {\r\n        display: inline-block;\r\n        width: 16px;\r\n        height: 16px;\r\n        font-size: 12px;\r\n        font-weight: bold;\r\n        color: #fff;\r\n        background-color: #4CAF50;\r\n        border-radius: 50%;\r\n        text-align: center;\r\n        cursor: pointer;\r\n        margin-left: 5px;\r\n        position: relative;\r\n    }\r\n\r\n    \/* Tooltip *\/\r\n    .info-icon:hover::after {\r\n        content: attr(data-tooltip);\r\n        position: absolute;\r\n        left: 50%;\r\n        bottom: 25px;\r\n        transform: translateX(-50%);\r\n        background-color: rgba(0, 0, 0, 0.8);\r\n        color: #fff;\r\n        padding: 5px 8px;\r\n        border-radius: 5px;\r\n        font-size: 12px;\r\n        white-space: nowrap;\r\n        opacity: 1;\r\n        visibility: visible;\r\n    }\r\n\r\n    \/* Esconde o tooltip por padr\u00e3o *\/\r\n    .info-icon::after {\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n\r\n\r\n<\/style>\r\n\r\n<!-- Step 7  Relat\u00f3rio -->\r\n<style>\r\n    \/* Estilos para o Relat\u00f3rio *\/\r\n    .relatorio-container {\r\n    display: grid;\r\n    grid-template-columns: 1fr 2fr;\r\n    gap: 30px;\r\n    margin-top: 20px;\r\n    background-color: transparent;\r\n    padding: 25px;\r\n    border-radius: 10px;\r\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n     overflow: hidden; \/* Remove a barra de scroll *\/\r\n    margin: 20px auto; \/* Centraliza horizontalmente *\/\r\n    max-width: 95%; \/* Garante que n\u00e3o ultrapasse a tela *\/\r\n}\r\n\r\n.relatoriofinal-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n    margin-top: 15px;\r\n    min-width: 950px;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n    .relatoriofinal-container {\r\n        min-width: auto; \/* permite encolher *\/\r\n        gap: 15px;\r\n        padding: 0 10px;\r\n    }\r\n\r\n    .relatorio-container {\r\n        grid-template-columns: 1fr;\r\n        padding: 15px;\r\n    }\r\n\r\n    .relatorio-imagem {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\r\n        gap: 10px;\r\n    }\r\n\r\n    .relatorio-imagem .image-card img {\r\n        max-height: 120px; \/* reduz altura em telas pequenas *\/\r\n        height: auto;\r\n    }\r\n\r\n    #relatorio-cantos-medidas {\r\n        font-size: 12px;\r\n    }\r\n\r\n    .relatorio-detalhes {\r\n        padding: 0;\r\n    }\r\n\r\n    .btn-pedido {\r\n        font-size: 14px;\r\n        padding: 12px;\r\n    }\r\n\r\n    #resumo-compra th, \r\n    #resumo-compra td {\r\n        padding: 8px 10px;\r\n        font-size: 12px;\r\n    }\r\n}\r\n\r\n\r\n    .relatorio-imagem .image-card img {\r\n        max-height: 150px;\r\n        width: auto;\r\n        margin: 0 auto;\r\n        display: block;\r\n    }\r\n\r\n\r\n    .image-card:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 6px 12px rgba(0,0,0,0.15);\r\n    }\r\n    \r\n    .image-card h4 {\r\n        margin: 0 0 10px 0;\r\n        color: #2c3e50;\r\n        font-size: 16px;\r\n    }\r\n    \r\n    .image-card img {\r\n        width: 100%;\r\n        height: 180px;\r\n        object-fit: contain;\r\n        border-radius: 5px;\r\n        background: #f8f9fa;\r\n        padding: 10px;\r\n    }\r\n\r\n     .image-card {\r\n        background-color: white;\r\n    }\r\n\r\n    \r\n\r\n\r\n    .relatorio-imagem img {\r\n        max-width: 100%;\r\n        height: auto;\r\n        border-radius: 8px;\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    .relatorio-detalhes {\r\n        flex: 0 0 auto;\r\n        padding: 10px;\r\n    }\r\n\r\n\/* === DETALHES DO RELAT\u00d3RIO === *\/\r\n.relatorio-detalhes {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    gap: 20px;\r\n}\r\n\r\n\/* === TABELA DE RESUMO === *\/\r\n#resumo-compra {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-bottom: 25px;\r\n    font-size: 14px;\r\n}\r\n\r\n    #resumo-compra th,\r\n#resumo-compra td {\r\n    padding: 12px 15px;\r\n    text-align: left;\r\n    border-bottom: 1px solid #e0e0e0;\r\n}\r\n\r\n#resumo-compra th {\r\n    background-color: #f5f5f5;\r\n    font-weight: 600;\r\n}\r\n\r\n    .category-row {\r\n        background-color: #f0f7ff !important;\r\n        font-weight: bold;\r\n    }\r\n\r\n    .category-row td {\r\n        padding: 8px 15px !important;\r\n    }\r\n\r\n    .total-row {\r\n        font-weight: bold;\r\n    }\r\n\r\n    .grand-total {\r\n        background-color: #f0fff0;\r\n        font-size: 1.1em;\r\n    }\r\n\r\n    .grand-total td {\r\n        padding: 15px !important;\r\n    }\r\n\r\n    .info-entrega {\r\n        margin-top: 25px;\r\n        padding: 15px;\r\n        background-color: #f9f9f9;\r\n        border-radius: 8px;\r\n        border-left: 4px solid #4CAF50;\r\n    }\r\n\r\n    .info-entrega p {\r\n        margin: 8px 0;\r\n        color: #555;\r\n    }\r\n\r\n\/* === BOT\u00c3O FINALIZAR === *\/\r\n.btn-pedido {\r\n    width: 100%;\r\n    padding: 15px;\r\n    background-color: #4CAF50;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 6px;\r\n    font-size: 16px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n    transition: background-color 0.3s;\r\n}\r\n\r\n    .btn-pedido:hover {\r\n        background-color: #45a049;\r\n    }\r\n\r\n    .additional-images {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        margin-top: 20px;\r\n    }\r\n<\/style>\r\n\r\n<!--MULTSTEP FORM-->\r\n<style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap');\r\n\r\n    #multistep-form {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 30px;\r\n        font-family: 'Inter', sans-serif;\r\n        padding-bottom: 60px;\r\n    }\r\n\r\n        \/* Estilo para a barra de steps flutuante *\/\r\n    .floating-steps {\r\n        position: inherit;\r\n        left: 0;\r\n        right: 0;\r\n        background-color: rgba(255, 255, 255, 0.9); \/* Fundo semi-transparente *\/\r\n        padding: 10px 20px;\r\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\r\n        z-index: 1000; \/* Garante que a barra fique acima de outros elementos *\/\r\n    }\r\n\r\n    \/* Estilo para a lista de steps *\/\r\n    .steps {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        position: relative;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    \/* Estilo para cada step *\/\r\n    .step {\r\n        flex: 1;\r\n        text-align: center;\r\n        position: relative;\r\n        z-index: 1;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .step-number {\r\n        display: inline-block;\r\n        width: 35px;\r\n        height: 35px;\r\n        line-height: 35px;\r\n        border-radius: 50%;\r\n        background-color: #f1f1f1;\r\n        color: #333;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        transition: background-color 0.3s, color 0.3s;\r\n    }\r\n\r\n    .step-label {\r\n        display: block;\r\n        margin-top: 8px;\r\n        font-size: 12px;\r\n        color: #444;\r\n    }\r\n\r\n    \/* Em telas menores que 768px (mobile e tablet) *\/\r\n    @media screen and (max-width: 768px) {\r\n        .step-label {\r\n            font-size: 9px;\r\n        }\r\n    }\r\n\r\n    \/* Para telas bem pequenas (tipo 375px ou menos) *\/\r\n    @media screen and (max-width: 400px) {\r\n        .step-label {\r\n            font-size: 8px;\r\n        }\r\n    }\r\n\r\n    .step.active .step-number {\r\n        background-color: #4CAF50;\r\n        color: white;\r\n    }\r\n\r\n\r\n    .steps::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 0;\r\n        right: 0;\r\n        height: 3px;\r\n        background-color: #ddd;\r\n        z-index: 0;\r\n    }\r\n\r\n\r\n    .form-step {\r\n        display: none;\r\n    width: 100%;\r\n    min-height: 500px; \/* Altura m\u00ednima igual para todos *\/\r\n    padding: 25px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 8px;\r\n    background-color: #f9f9f9;\r\n    margin-bottom: 20px;\r\n    box-sizing: border-box;\r\n    overflow-y: auto;\r\n    max-height: 80vh;\r\n}\r\n\r\n    .form-step.active {\r\n        display: block;\r\n    }\r\n\r\n    \/* Estilo para a navega\u00e7\u00e3o flutuante *\/\r\n    .floating-navigation {\r\n        position: absolute;\r\n        transform: translateX(-50%);\r\n        left: 50%;\r\n        margin-top: 1%;\r\n        display: flex;\r\n        gap: 10px;\r\n        background-color: rgba(255, 255, 255, 0.9); \/* Fundo semi-transparente *\/\r\n        padding: 5px 20px;\r\n        border-radius: 25px;\r\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\r\n        z-index: 1000; \/* Garante que os bot\u00f5es fiquem acima de outros elementos *\/\r\n    }\r\n\r\n    \/* Responsividade para telas m\u00e9dias (tablets) *\/\r\n@media (max-width: 950px) {\r\n    \/* Estilo para a navega\u00e7\u00e3o flutuante *\/\r\n    .floating-navigation {\r\n        position: fixed;\r\n    }\r\n}\r\n\r\n\/* Responsividade para telas pequenas (smartphones) *\/\r\n@media (max-width: 600px) {\r\n    .floating-navigation {\r\n        position: fixed;\r\n    }\r\n\r\n}\r\n\r\n    \/* Estilo para os bot\u00f5es *\/\r\n    .floating-navigation button {\r\n        padding: 6px 24px;\r\n        border: none;\r\n        border-radius: 6px;\r\n        background-color: #4CAF50;\r\n        color: white;\r\n        font-size: 12px;\r\n        font-weight: bold;\r\n        cursor: pointer;\r\n        transition: background-color 0.3s;\r\n    }\r\n\r\n    .floating-navigation button:hover {\r\n        background-color: #45a049;\r\n    }\r\n\r\n    .floating-navigation button:disabled {\r\n        background-color: #ccc;\r\n        cursor: not-allowed;\r\n    }\r\n\r\n    button {\r\n        padding: 8px 24px;\r\n        margin-left: 10px;\r\n        border: none;\r\n        border-radius: 6px;\r\n        background-color: #4CAF50;\r\n        color: white;\r\n        font-size: 14px;\r\n        font-weight: bold;\r\n        cursor: pointer;\r\n        transition: background-color 0.3s;\r\n    }\r\n\r\n    button:hover {\r\n        background-color: #45a049;\r\n    }\r\n\r\n    button:disabled {\r\n        background-color: #ccc;\r\n        cursor: not-allowed;\r\n    }\r\n\r\n    .radio-cards {\r\n        display: flex;\r\n        gap: 20px;\r\n        margin-top: 20px;\r\n    }\r\n\r\n    .radio-card {\r\n        flex: 1;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .radio-card input[type=\"radio\"] {\r\n        display: none;\r\n    }\r\n\r\n    .radio-card .card-content {\r\n        position: relative;\r\n        height: 150px;\r\n        background-size: cover;\r\n        background-position: center;\r\n        border-radius: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: white;\r\n        font-size: 20px;\r\n        font-weight: bold;\r\n        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);\r\n        transition: transform 0.3s, box-shadow 0.3s;\r\n    }\r\n\r\n    .radio-card .card-content::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        background-color: rgba(0, 0, 0, 0.3);\r\n        border-radius: 10px;\r\n    }\r\n\r\n    .radio-card input[type=\"radio\"]:checked + .card-content {\r\n        transform: scale(1.05);\r\n        box-shadow: 0 0 15px rgba(72, 207, 173, 0.8), 0 0 30px rgba(72, 207, 173, 0.6);\r\n        border: 2px solid #48CFAD;\r\n    }\r\n\r\n    .radio-card:hover .card-content {\r\n        transform: scale(1.05);\r\n        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);\r\n    }\r\n<\/style>\r\n\r\n<!--Script: Card Flutuante-->\r\n<script>\r\n\r\n\r\n    \/\/ Atualiza o resumo sempre que houver mudan\u00e7as\r\n    document.querySelectorAll('.shape-item, .blanket-card, input, select').forEach(item => {\r\n        item.addEventListener('change', updateCompactSummary);\r\n        item.addEventListener('changr', updateRelatorioCompleto);\r\n    });\r\n\r\n    \r\n\r\n\/\/ Substitua a fun\u00e7\u00e3o updateCompactSummary() no script \"Card Flutuante\"\r\n\r\nfunction updateCompactSummary() {\r\n    console.log(\"=== ATUALIZANDO RESUMO ===\");\r\n    \r\n    \/\/ Obter a forma selecionada\r\n    const shapeCard = document.querySelector('.shape-item.active')?.getAttribute('data-shape') || '--';\r\n    \r\n    \/\/ Obter o pre\u00e7o da manta da vari\u00e1vel global\r\n    let blanketPrice = parseFloat(totalPriceBlanket) || 0;\r\n    \r\n    console.log(\"Pre\u00e7o da manta:\", blanketPrice);\r\n    \r\n    \/\/ Atualiza imagens\r\n    updateSummaryImages();\r\n\r\n    \/\/ Atualiza os valores no resumo\r\n    document.getElementById('summary-shape').textContent = shapeCard.toUpperCase();\r\n    document.getElementById('summary-blanket').textContent = `\u20ac${blanketPrice.toFixed(2)}`;\r\n\r\n    \/\/ Atualiza margem adicional\r\n    const marginCm = extraMargin * 100; \/\/ Converte metros para cm\r\n    document.getElementById('summary-margin').textContent = `${marginCm} cm`;\r\n    \r\n    \/\/ Mostra\/oculta a margem no resumo\r\n    const marginContainer = document.getElementById('summary-margin-container');\r\n    if (marginContainer) {\r\n        if (marginCm > 0) {\r\n            marginContainer.style.display = 'flex';\r\n            marginContainer.classList.add('margin-active');\r\n        } else {\r\n            marginContainer.style.display = 'none';\r\n            marginContainer.classList.remove('margin-active');\r\n        }\r\n    }\r\n    \r\n    \/\/ Calcula o total geral\r\n    const total = blanketPrice;\r\n    document.getElementById('summary-total').textContent = `\u20ac${total.toFixed(2)}`;\r\n    \r\n    console.log(\"Resumo atualizado - Total:\", total.toFixed(2));\r\n}\r\n\r\nfunction updateSummaryImages() {\r\n    \/\/ Imagem padr\u00e3o (logo)\r\n    const defaultImg = 'https:\/\/recursos.nacoverpool.pt\/logo.jpg';\r\n    \r\n    \/\/ Forma\r\n    const shapeItem = document.querySelector('.shape-item.active');\r\n    document.getElementById('summary-shape-img').src = shapeItem?.querySelector('img')?.src || defaultImg;\r\n    \r\n    \/\/ Cobertor\r\n    const blanketItem = document.querySelector('.blanket-card.selected');\r\n    document.getElementById('summary-blanket-img').src = blanketItem?.querySelector('img')?.src || defaultImg;\r\n\r\n\r\n}\r\n    \/\/ Inicializa o resumo\r\n    updateCompactSummary();\r\n\r\n<\/script>\r\n\r\n\r\n\r\n<!--Script STEP 1 - Forma da Psicina & Medidas-->\r\n<script>\r\n    let selectedShape = null;\r\n    let extraMargin = 0;\r\n    let extraMarginCm = 0;\r\n    \/\/ Script STEP 1 - Formato da Piscina & Medidas (com valida\u00e7\u00f5es)\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    const shapeItems = document.querySelectorAll('.shape-item');\r\n    const shapeIllustrationImg = document.getElementById('shape-illustration-img');\r\n    const measurementsInputs = document.getElementById('measurements-inputs');\r\n    const totalArea = document.getElementById('total-area') || 0;\r\n    const productionTime = document.getElementById('production-time');\r\n    const nextBtn = document.getElementById('nextBtn');\r\n    \r\n\r\n    document.getElementById('extra-margin').addEventListener('change', function() {\r\n    extraMarginCm = parseFloat(this.value);\r\n    extraMargin = extraMarginCm \/ 100; \/\/ Convertendo cm para metros\r\n    updateMarginDisplay();\r\n    updateCompactSummary();\r\n});\r\n\r\n    \r\n\r\n    const shapesMeasurements = {\r\n        a: ['C'],\r\n        b: ['A', 'B'],\r\n        c: ['A', 'B', 'D', 'E'],\r\n        d: ['A', 'B', 'D', 'E'],\r\n        e: ['A', 'B', 'D', 'E'],\r\n        f: ['A', 'B', 'D', 'E'],\r\n        g: ['A', 'B', 'D', 'E'],\r\n        h: ['A', 'B', 'D', 'E'],\r\n        i: ['A', 'B', 'C', 'D'],\r\n        j: ['A', 'B', 'C', 'D'],\r\n        k: ['A', 'B', 'R1', 'R2'],\r\n        l: ['A', 'B', 'C', 'D'],\r\n        m: ['A', 'B', 'C', 'E', 'D1', 'D2'],\r\n        n: []\r\n    };\r\n\r\n    \/\/ Evento de clique para selecionar a forma\r\n    shapeItems.forEach(item => {\r\n        item.addEventListener('click', function () {\r\n            shapeItems.forEach(shape => shape.classList.remove('active'));\r\n            this.classList.add('active');\r\n\r\n            selectedShape = this.getAttribute('data-shape');\r\n            shapeIllustrationImg.src = `https:\/\/recursos.nacoverpool.pt\/image\/formas\/pool_category_image_${selectedShape}.png`;\r\n            totalShapeCard = selectedShape;\r\n            totalArea.textContent = '';\r\n            saveShape(selectedShape);\r\n\r\n            generateMeasurementInputs();\r\n            updateCompactSummary();\r\n\r\n            \/\/ Atualiza valida\u00e7\u00e3o do bot\u00e3o pr\u00f3ximo\r\n            validateStep2();\r\n        });\r\n    });\r\n\r\n    \/\/ Gerar inputs de medidas\r\n    \/\/ Atualize a fun\u00e7\u00e3o generateMeasurementInputs para incluir os checks\r\nfunction generateMeasurementInputs() {\r\n     updateCompactSummary();\r\n    measurementsInputs.innerHTML = '';\r\n\r\n    if (selectedShape === 'n') {\r\n        totalArea.textContent = '';\r\n        productionTime.textContent = 'Contacte a nossa equipe atrav\u00e9s do email geral@nacoverpool.pt';\r\n        return;\r\n    }\r\n\r\n    if (shapesMeasurements[selectedShape]) {\r\n        const sides = shapesMeasurements[selectedShape];\r\n\r\n        const rowContainer = document.createElement('div');\r\n        rowContainer.className = 'measurements-inputs';\r\n\r\n        sides.forEach(side => {\r\n            const div = document.createElement('div');\r\n            div.className = 'measurement';\r\n            div.innerHTML = `\r\n    <div style=\"margin-bottom: 12px;\">\r\n        <label for=\"${side}\" style=\"display: block; margin-bottom: 4px;\">${side}:<\/label>\r\n        <input type=\"number\" id=\"${side}\" placeholder=\"metros\" step=\"0.1\" min=\"0.1\" required style=\"margin-right: 8px; padding: 4px;\">\r\n        <span class=\"valid-check\" style=\"display:none\">\u2714<\/span>\r\n    <\/div>\r\n`;\r\n\r\n            rowContainer.appendChild(div);\r\n        });\r\n\r\n        measurementsInputs.appendChild(rowContainer);\r\n\r\n        sides.forEach(side => {\r\n            const input = document.getElementById(side);\r\n            input.addEventListener('input', function() {\r\n                calculateTotalArea();\r\n                validateMeasurements();\r\n                validateStep2();\r\n            });\r\n        });\r\n\r\n        productionTime.textContent = 'O tempo de fabrica\u00e7\u00e3o e envio ser\u00e1 de 3 dias \u00fateis.';\r\n    }\r\n}\r\n    \/\/ Validar medidas conforme regras espec\u00edficas\r\n    function validateMeasurements() {\r\n        if (!selectedShape || selectedShape === 'n') return true;\r\n\r\n        \/\/ Reset all error styles\r\n        document.querySelectorAll('.measurement input').forEach(input => {\r\n            input.classList.remove('valid');\r\n            input.style.borderColor = '';\r\n        });\r\n\r\n        document.querySelectorAll('.valid-check').forEach(check => {\r\n        check.style.display = 'none';\r\n    });\r\n\r\n        let isValid = true;\r\n        const sides = shapesMeasurements[selectedShape];\r\n        \r\n           \/\/ Primeira valida\u00e7\u00e3o: todos os valores devem ser positivos\r\n    sides.forEach(side => {\r\n        const input = document.getElementById(side);\r\n        const value = parseFloat(input.value);\r\n        if (isNaN(value) || value <= 0) {\r\n            input.style.borderColor = 'red';\r\n            isValid = false;\r\n        }\r\n    });\r\n\r\n        if (!isValid) return false;\r\n\r\n        \/\/ Valida\u00e7\u00f5es espec\u00edficas por forma\r\n        switch (selectedShape) {\r\n            case 'a':\r\n                \/\/ C deve ser positivo (j\u00e1 verificado acima)\r\n                markAsValid('C');\r\n            break;\r\n                \r\n            case 'b':\r\n            const A_b = parseFloat(document.getElementById('A').value);\r\n            const B_b = parseFloat(document.getElementById('B').value);\r\n            if (A_b < B_b) {\r\n                document.getElementById('A').style.borderColor = 'red';\r\n                document.getElementById('B').style.borderColor = 'red';\r\n                isValid = false;\r\n            } else {\r\n                markAsValid('A');\r\n                markAsValid('B');\r\n            }\r\n            break;\r\n                \r\n            case 'c':\r\n            const A_c = parseFloat(document.getElementById('A').value);\r\n            const B_c = parseFloat(document.getElementById('B').value);\r\n            const D_c = parseFloat(document.getElementById('D').value);\r\n            const E_c = parseFloat(document.getElementById('E').value);\r\n            if (A_c < B_c || D_c < E_c) {\r\n                if (A_c < B_c) {\r\n                    document.getElementById('A').style.borderColor = 'red';\r\n                    document.getElementById('B').style.borderColor = 'red';\r\n                }\r\n                if (D_c < E_c) {\r\n                    document.getElementById('D').style.borderColor = 'red';\r\n                    document.getElementById('E').style.borderColor = 'red';\r\n                }\r\n                isValid = false;\r\n            } else {\r\n                markAsValid('A');\r\n                markAsValid('B');\r\n                markAsValid('D');\r\n                markAsValid('E');\r\n            }\r\n            break;\r\n                \r\n            case 'd':\r\n                const A_d = parseFloat(document.getElementById('A').value);\r\n                const B_d = parseFloat(document.getElementById('B').value);\r\n                const D_d = parseFloat(document.getElementById('D').value);\r\n                const E_d = parseFloat(document.getElementById('E').value);\r\n                if (A_d < B_d || D_d >= B_d || E_d >= A_d || B_d <= (B_d - D_d)) {\r\n                    if (A_d < B_d) {\r\n                        document.getElementById('A').style.borderColor = 'red';\r\n                        document.getElementById('B').style.borderColor = 'red';\r\n                    }\r\n                    if (D_d >= B_d) document.getElementById('D').style.borderColor = 'red';\r\n                    if (E_d >= A_d) document.getElementById('E').style.borderColor = 'red';\r\n                    if (B_d <= (B_d - D_d)) document.getElementById('B').style.borderColor = 'red';\r\n                    isValid = false;\r\n                }\r\n                else {\r\n                markAsValid('A');\r\n                markAsValid('B');\r\n                markAsValid('D');\r\n                markAsValid('E');\r\n            }\r\n                break;\r\n                \r\n            case 'e':\r\n                const A_e = parseFloat(document.getElementById('A').value);\r\n                const B_e = parseFloat(document.getElementById('B').value);\r\n                const D_e = parseFloat(document.getElementById('D').value);\r\n                const E_e = parseFloat(document.getElementById('E').value);\r\n                if (A_e < B_e || B_e >= (B_e + E_e) || A_e <= D_e || A_e <= (A_e - D_e)) {\r\n                    if (A_e < B_e) {\r\n                        document.getElementById('A').style.borderColor = 'red';\r\n                        document.getElementById('B').style.borderColor = 'red';\r\n                    }\r\n                    if (B_e >= (B_e + E_e)) document.getElementById('B').style.borderColor = 'red';\r\n                    if (A_e <= D_e) document.getElementById('A').style.borderColor = 'red';\r\n                    if (A_e <= (A_e - D_e)) document.getElementById('A').style.borderColor = 'red';\r\n                    isValid = false;\r\n                } else {\r\n                markAsValid('A');\r\n                markAsValid('B');\r\n                markAsValid('D');\r\n                markAsValid('E');\r\n            }\r\n                break;\r\n                \r\n            case 'f':\r\n                const A_f = parseFloat(document.getElementById('A').value);\r\n                const B_f = parseFloat(document.getElementById('B').value);\r\n                const D_f = parseFloat(document.getElementById('D').value);\r\n                const E_f = parseFloat(document.getElementById('E').value);\r\n                if (A_f < B_f || B_f <= E_f || B_f >= (B_f + E_f) || A_f <= D_f || A_f <= (A_f - D_f)) {\r\n                    if (A_f < B_f) {\r\n                        document.getElementById('A').style.borderColor = 'red';\r\n                        document.getElementById('B').style.borderColor = 'red';\r\n                    }\r\n                    if (B_f <= E_f) document.getElementById('B').style.borderColor = 'red';\r\n                    if (B_f >= (B_f + E_f)) document.getElementById('B').style.borderColor = 'red';\r\n                    if (A_f <= D_f) document.getElementById('A').style.borderColor = 'red';\r\n                    if (A_f <= (A_f - D_f)) document.getElementById('A').style.borderColor = 'red';\r\n                    isValid = false;\r\n                }else {\r\n                markAsValid('A');\r\n                markAsValid('B');\r\n                markAsValid('D');\r\n                markAsValid('E');\r\n            }\r\n                break;\r\n                \r\n            case 'g':\r\n                const A_g = parseFloat(document.getElementById('A').value);\r\n                const B_g = parseFloat(document.getElementById('B').value);\r\n                const D_g = parseFloat(document.getElementById('D').value);\r\n                const E_g = parseFloat(document.getElementById('E').value);\r\n                if (A_g < B_g || B_g >= (B_g + E_g) || A_g <= D_g || A_g <= (A_g - D_g)) {\r\n                    if (A_g < B_g) {\r\n                        document.getElementById('A').style.borderColor = 'red';\r\n                        document.getElementById('B').style.borderColor = 'red';\r\n                    }\r\n                    if (B_g >= (B_g + E_g)) document.getElementById('B').style.borderColor = 'red';\r\n                    if (A_g <= D_g) document.getElementById('A').style.borderColor = 'red';\r\n                    if (A_g <= (A_g - D_g)) document.getElementById('A').style.borderColor = 'red';\r\n                    isValid = false;\r\n                } else {\r\n                markAsValid('A');\r\n                markAsValid('B');\r\n                markAsValid('D');\r\n                markAsValid('E');\r\n            }\r\n                break;\r\n                \r\n            case 'h':\r\n                const A_h = parseFloat(document.getElementById('A').value);\r\n                const B_h = parseFloat(document.getElementById('B').value);\r\n                const D_h = parseFloat(document.getElementById('D').value);\r\n                const E_h = parseFloat(document.getElementById('E').value);\r\n                if (A_h < B_h || B_h <= E_h || B_h >= (B_h + E_h) || A_h <= D_h || A_h <= (A_h - D_h)) {\r\n                    if (A_h < B_h) {\r\n                        document.getElementById('A').style.borderColor = 'red';\r\n                        document.getElementById('B').style.borderColor = 'red';\r\n                    }\r\n                    if (B_h <= E_h) document.getElementById('B').style.borderColor = 'red';\r\n                    if (B_h >= (B_h + E_h)) document.getElementById('B').style.borderColor = 'red';\r\n                    if (A_h <= D_h) document.getElementById('A').style.borderColor = 'red';\r\n                    if (A_h <= (A_h - D_h)) document.getElementById('A').style.borderColor = 'red';\r\n                    isValid = false;\r\n                } else {\r\n                markAsValid('A');\r\n                markAsValid('B');\r\n                markAsValid('D');\r\n                markAsValid('E');\r\n            }\r\n                break;\r\n                \r\n            case 'i':\r\n            case 'j':\r\n                const A_ij = parseFloat(document.getElementById('A').value);\r\n                const B_ij = parseFloat(document.getElementById('B').value);\r\n                const C_ij = parseFloat(document.getElementById('C').value);\r\n                const D_ij = parseFloat(document.getElementById('D').value);\r\n                if (B_ij < A_ij || A_ij <= D_ij || B_ij <= C_ij || A_ij <= (A_ij - D_ij) || B_ij <= (B_ij - C_ij)) {\r\n                    if (B_ij < A_ij) {\r\n                        document.getElementById('A').style.borderColor = 'red';\r\n                        document.getElementById('B').style.borderColor = 'red';\r\n                    }\r\n                    if (A_ij <= D_ij) document.getElementById('A').style.borderColor = 'red';\r\n                    if (B_ij <= C_ij) document.getElementById('B').style.borderColor = 'red';\r\n                    if (A_ij <= (A_ij - D_ij)) document.getElementById('A').style.borderColor = 'red';\r\n                    if (B_ij <= (B_ij - C_ij)) document.getElementById('B').style.borderColor = 'red';\r\n                    isValid = false;\r\n                } else {\r\n                markAsValid('A');\r\n                markAsValid('B');\r\n                markAsValid('C');\r\n                markAsValid('D');\r\n            }\r\n                break;\r\n                \r\n            case 'k':\r\n                const B_k = parseFloat(document.getElementById('B').value);\r\n                const R1_k = parseFloat(document.getElementById('R1').value);\r\n                const R2_k = parseFloat(document.getElementById('R2').value);\r\n                if (B_k <= R1_k || B_k <= R2_k) {\r\n                    if (B_k <= R1_k) document.getElementById('B').style.borderColor = 'red';\r\n                    if (B_k <= R2_k) document.getElementById('B').style.borderColor = 'red';\r\n                    isValid = false;\r\n                }else {\r\n                markAsValid('B');\r\n                markAsValid('R1');\r\n                markAsValid('R2');\r\n            }\r\n                break;\r\n                \r\n            case 'l':\r\n                const B_l = parseFloat(document.getElementById('B').value);\r\n                const A_l = parseFloat(document.getElementById('A').value);\r\n                const C_l = parseFloat(document.getElementById('C').value);\r\n                const D_l = parseFloat(document.getElementById('D').value);\r\n                if (B_l < A_l || A_l <= C_l || A_l <= D_l || B_l <= C_l || B_l <= D_l) {\r\n                    if (B_l < A_l) {\r\n                        document.getElementById('A').style.borderColor = 'red';\r\n                        document.getElementById('B').style.borderColor = 'red';\r\n                    }\r\n                    if (A_l <= C_l) document.getElementById('A').style.borderColor = 'red';\r\n                    if (A_l <= D_l) document.getElementById('A').style.borderColor = 'red';\r\n                    if (B_l <= C_l) document.getElementById('B').style.borderColor = 'red';\r\n                    if (B_l <= D_l) document.getElementById('B').style.borderColor = 'red';\r\n                    isValid = false;\r\n                }else {\r\n                markAsValid('A');\r\n                markAsValid('B');\r\n                markAsValid('C');\r\n                markAsValid('D');\r\n            }\r\n                break;\r\n                \r\n            case 'm':\r\n                const E_m = parseFloat(document.getElementById('E').value);\r\n                const A_m = parseFloat(document.getElementById('A').value);\r\n                const B_m = parseFloat(document.getElementById('B').value);\r\n                const C_m = parseFloat(document.getElementById('C').value);\r\n                const D1_m = parseFloat(document.getElementById('D1').value);\r\n                const D2_m = parseFloat(document.getElementById('D2').value);\r\n                if (E_m <= A_m || E_m <= B_m || E_m <= C_m || \r\n                    D1_m <= A_m || D1_m <= B_m || D1_m <= C_m || \r\n                    D2_m <= A_m || D2_m <= B_m || D2_m <= C_m || \r\n                    B_m <= A_m || B_m <= C_m) {\r\n                    \/\/ Marcar todos os inputs relevantes\r\n                    if (E_m <= A_m || E_m <= B_m || E_m <= C_m) document.getElementById('E').style.borderColor = 'red';\r\n                    if (D1_m <= A_m || D1_m <= B_m || D1_m <= C_m) document.getElementById('D1').style.borderColor = 'red';\r\n                    if (D2_m <= A_m || D2_m <= B_m || D2_m <= C_m) document.getElementById('D2').style.borderColor = 'red';\r\n                    if (B_m <= A_m || B_m <= C_m) document.getElementById('B').style.borderColor = 'red';\r\n                    isValid = false;\r\n                }else {\r\n                markAsValid('A');\r\n                markAsValid('B');\r\n                markAsValid('C');\r\n                markAsValid('E');\r\n                markAsValid('D1');\r\n                markAsValid('D1');\r\n            }\r\n                break;\r\n            default:\r\n            \/\/ Para formas sem regras espec\u00edficas, marca todos como v\u00e1lidos\r\n            sides.forEach(side => markAsValid(side));\r\n\r\n        }\r\n\r\n        return isValid;\r\n    }\r\n\r\n    \/\/ Fun\u00e7\u00e3o auxiliar para marcar um campo como v\u00e1lido\r\nfunction markAsValid(id) {\r\n    const input = document.getElementById(id);\r\n    input.classList.add('valid');\r\n    \r\n    \/\/ Adiciona o \u00edcone de check se n\u00e3o existir\r\n    if (!input.nextElementSibling || !input.nextElementSibling.classList.contains('valid-check')) {\r\n        const check = document.createElement('span');\r\n        check.className = 'valid-check';\r\n        check.innerHTML = '\u2714';\r\n        check.style.display = 'inline-block';\r\n        input.parentNode.appendChild(check);\r\n    } else {\r\n        input.nextElementSibling.style.display = 'inline-block';\r\n    }\r\n}\r\n\r\n    \/\/ Validar se pode avan\u00e7ar para o pr\u00f3ximo passo\r\n    function validateStep2() {\r\n        if (!selectedShape) {\r\n            nextBtn.disabled = true;\r\n            return false;\r\n        }\r\n        \r\n        if (selectedShape === 'n') {\r\n            nextBtn.disabled = false;\r\n            return true;\r\n        }\r\n        \r\n        \/\/ Verificar se todos os campos est\u00e3o preenchidos e v\u00e1lidos\r\n        const sides = shapesMeasurements[selectedShape];\r\n        let allFilled = true;\r\n        \r\n        sides.forEach(side => {\r\n            const value = parseFloat(document.getElementById(side).value);\r\n            if (isNaN(value) || value <= 0) {\r\n                allFilled = false;\r\n            }\r\n        });\r\n        \r\n        if (!allFilled) {\r\n            nextBtn.disabled = true;\r\n            return false;\r\n        }\r\n        \r\n        const measurementsValid = validateMeasurements();\r\n        nextBtn.disabled = !measurementsValid;\r\n        return measurementsValid;\r\n    }\r\n\r\n    \/\/ Fun\u00e7\u00e3o para atualizar a margem em todos os lugares\r\nfunction updateMarginDisplay() {\r\n    const marginCm = extraMargin * 100; \/\/ Converte metros para cm\r\n    \r\n    \/\/ Atualiza no resumo compacto\r\n    const marginSummary = document.getElementById('summary-margin');\r\n    const marginContainer = document.getElementById('summary-margin-container');\r\n    \r\n    if (marginSummary) {\r\n        marginSummary.textContent = `${marginCm} cm`;\r\n    }\r\n    \r\n    if (marginContainer) {\r\n        if (marginCm > 0) {\r\n            marginContainer.style.display = 'flex';\r\n            marginContainer.classList.add('margin-active');\r\n        } else {\r\n            marginContainer.style.display = 'none';\r\n            marginContainer.classList.remove('margin-active');\r\n        }\r\n    }\r\n    \r\n    \/\/ Atualiza no relat\u00f3rio final\r\n    const relatorioMargem = document.getElementById('relatorio-margem');\r\n    if (relatorioMargem) {\r\n        relatorioMargem.textContent = `${marginCm} cm `;\r\n    }\r\n    \r\n    \/\/ Recalcula a \u00e1rea total com a margem\r\n    calculateTotalArea();\r\n}\r\n\r\n    \/\/ Calcular \u00e1rea total\r\n    function calculateTotalArea() {\r\n        if (selectedShape === 'n') return;\r\n\r\n        const sides = shapesMeasurements[selectedShape];\r\n        let total = 0;\r\n        let dimensions = {};\r\n\r\n        \/\/ Obter todas as medidas primeiro\r\n        sides.forEach(side => {\r\n            dimensions[side] = parseFloat(document.getElementById(side).value) || 0;\r\n        });\r\n\r\n        \/\/ Calcular \u00e1rea base\r\n        switch (selectedShape) {\r\n            case 'a':\r\n                total = Math.pow(dimensions['C'] + 2 * extraMargin, 2);\r\n                break;\r\n            case 'b':\r\n                total = (dimensions['A'] + 2 * extraMargin) * (dimensions['B'] + 2 * extraMargin);                           \r\n                break;\r\n            case 'c':\r\n            case 'd':\r\n                total = (dimensions['B'] + 2 * extraMargin) * (dimensions['A'] + dimensions['E'] + 2 * extraMargin);\r\n                break;\r\n            case 'e':\r\n            case 'f':\r\n            case 'g':\r\n            case 'h':\r\n                total = (dimensions['A'] + 2 * extraMargin) * (dimensions['B'] + dimensions['E'] + 2 * extraMargin);\r\n                break;\r\n            case 'i':\r\n            case 'j':\r\n                total = (dimensions['A'] + 2 * extraMargin) * (dimensions['B'] + 2 * extraMargin);\r\n                break;\r\n            case 'k':\r\n                total = (dimensions['A'] + 2 * extraMargin) * (dimensions['B'] + dimensions['R1'] + dimensions['R2'] + 2 * extraMargin);\r\n                break;\r\n            case 'l':\r\n                total = (dimensions['A'] + 2 * dimensions['C'] + 2 * extraMargin) * \r\n                    (dimensions['B'] + 2 * dimensions['D'] + 2 * extraMargin);\r\n                break;\r\n            case 'm':\r\n                total = (dimensions['E'] + 2 * extraMargin) * (dimensions['C'] + 2 * extraMargin);\r\n                break;\r\n            default:\r\n                total = 0;\r\n        }\r\n\r\n        totalArea.textContent = total.toFixed(2);\r\n           if (typeof calculateTotalPrice === 'function') {\r\n                setTimeout(calculateTotalPrice, 10);\r\n            }\r\n\r\n        \/\/ Verificar se a \u00e1rea \u00e9 menor que 6m\u00b2 e mostrar aviso\r\n    checkMinimumArea(total);\r\n    \r\n    }\r\n\r\n    \/\/ Fun\u00e7\u00e3o para verificar \u00e1rea m\u00ednima\r\nfunction checkMinimumArea(area) {\r\n    const areaWarning = document.getElementById('area-warning');\r\n    \r\n    if (!areaWarning) {\r\n        \/\/ Criar elemento de aviso se n\u00e3o existir\r\n        const warningElement = document.createElement('div');\r\n        warningElement.id = 'area-warning';\r\n        warningElement.style.cssText = `\r\n            background-color: #fff3cd;\r\n            border: 1px solid #ffeaa7;\r\n            color: #856404;\r\n            padding: 5px 15px;\r\n            border-radius: 5px;\r\n            margin: 15px 0;\r\n            display: none;\r\n            font-size: 9px;\r\n        `;\r\n        warningElement.innerHTML = `\r\n            <strong>\u26a0\ufe0f \u00c1rea M\u00ednima Requerida:<\/strong> \r\n            A \u00e1rea total da cobertura deve ser de pelo menos 6m\u00b2. \r\n            \u00c1rea atual: <span id=\"current-area\">${area.toFixed(2)}<\/span>m\u00b2\r\n        `;\r\n        \r\n        \/\/ Inserir ap\u00f3s o elemento de \u00e1rea total\r\n        const areaContainer = document.querySelector('.area-container') || totalArea.parentElement;\r\n        areaContainer.appendChild(warningElement);\r\n    }\r\n    \r\n    if (area < 6) {\r\n        \/\/ Mostrar aviso\r\n        document.getElementById('area-warning').style.display = 'block';\r\n        document.getElementById('current-area').textContent = area.toFixed(2);\r\n        \r\n        \/\/ Desabilitar bot\u00e3o de avan\u00e7o se existir\r\n        disableNextButton(true);\r\n        \r\n        return false;\r\n    } else {\r\n        \/\/ Ocultar aviso\r\n        document.getElementById('area-warning').style.display = 'none';\r\n        \r\n        \/\/ Habilitar bot\u00e3o de avan\u00e7o\r\n        disableNextButton(false);\r\n        \r\n        return true;\r\n    }\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para desabilitar\/habilitar bot\u00e3o de avan\u00e7o\r\nfunction disableNextButton(disable) {\r\n    \/\/ Encontrar todos os bot\u00f5es de pr\u00f3ximo passo poss\u00edveis\r\n    const nextButtons = [\r\n        document.querySelector('.next-step'),\r\n        document.querySelector('.btn-next'),\r\n        document.querySelector('.nextBtn'),\r\n        document.querySelector('.proceed-button'),\r\n        document.querySelector('button[type=\"submit\"]'),\r\n        document.querySelector('.wc-forward')\r\n    ].filter(button => button !== null);\r\n\r\n    const nextBtn = document.getElementById('nextBtn');\r\n    const submitBtnFormN = document.getElementById('submit-custom-form');\r\n    \r\n    nextButtons.forEach(button => {\r\n        if (disable) {\r\n            nextBtn.disabled = true;\r\n            button.disabled = true;\r\n            \r\n            button.style.opacity = '0.6';\r\n            button.style.cursor = 'not-allowed';\r\n            button.title = '\u00c1rea m\u00ednima de 6m\u00b2 n\u00e3o atingida';\r\n            submitBtnFormN.disabled = false;\r\n        } else {\r\n            button.disabled = false;\r\n            button.style.opacity = '1';\r\n            button.style.cursor = 'pointer';\r\n            button.title = '';\r\n            submitBtnFormN.disabled = false;\r\n        }\r\n    });\r\n}\r\n\r\n\/\/ Adicionar valida\u00e7\u00e3o no evento de submit do formul\u00e1rio\r\nfunction addAreaValidationToForm() {\r\n    const form = document.querySelector('form'); \/\/ Ajuste o seletor conforme seu formul\u00e1rio\r\n    \r\n    if (form) {\r\n        form.addEventListener('submit', function(e) {\r\n            const currentArea = parseFloat(totalArea.textContent) || 0;\r\n            \r\n            if (currentArea < 6) {\r\n                e.preventDefault();\r\n                \r\n                \/\/ Mostrar mensagem de erro mais destacada\r\n                showAreaErrorModal();\r\n                \r\n                \/\/ Rolar at\u00e9 o aviso\r\n                document.getElementById('area-warning').scrollIntoView({ \r\n                    behavior: 'smooth', \r\n                    block: 'center' \r\n                });\r\n                \r\n                return false;\r\n            }\r\n        });\r\n    }\r\n}\r\n\r\n\/\/ Fun\u00e7\u00e3o para mostrar modal de erro (opcional)\r\nfunction showAreaErrorModal() {\r\n    \/\/ Criar modal tempor\u00e1rio\r\n    const modal = document.createElement('div');\r\n    modal.style.cssText = `\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: rgba(0,0,0,0.5);\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        z-index: 10000;\r\n    `;\r\n    \r\n    modal.innerHTML = `\r\n        <div style=\"background: white; padding: 20px; border-radius: 8px; max-width: 400px; text-align: center;\">\r\n            <h3 style=\"color: #dc3545; margin-top: 0;\">\u274c \u00c1rea Insuficiente<\/h3>\r\n            <p>A \u00e1rea total da cobertura deve ser de pelo menos <strong>6m\u00b2<\/strong>.<\/p>\r\n            <p>\u00c1rea atual: <strong>${parseFloat(totalArea.textContent).toFixed(2)}m\u00b2<\/strong><\/p>\r\n            <button onclick=\"this.parentElement.parentElement.remove()\" \r\n                    style=\"background: #dc3545; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;\">\r\n                Entendido\r\n            <\/button>\r\n        <\/div>\r\n    `;\r\n    \r\n    document.body.appendChild(modal);\r\n}\r\n\r\n\/\/ Inicializar a valida\u00e7\u00e3o quando o DOM estiver carregado\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    addAreaValidationToForm();\r\n    \r\n    \/\/ Verificar \u00e1rea inicial se j\u00e1 houver valores\r\n    setTimeout(() => {\r\n        const initialArea = parseFloat(totalArea.textContent) || 0;\r\n        if (initialArea > 0) {\r\n            checkMinimumArea(initialArea);\r\n        }\r\n    }, 500);\r\n});\r\n\r\n\/\/ Tamb\u00e9m validar quando o usu\u00e1rio alterar medidas\r\ndocument.addEventListener('input', function(e) {\r\n    if (e.target.type === 'number' && e.target.id in shapesMeasurements) {\r\n        \/\/ Pequeno delay para garantir que o c\u00e1lculo foi atualizado\r\n        setTimeout(() => {\r\n            const currentArea = parseFloat(totalArea.textContent) || 0;\r\n            checkMinimumArea(currentArea);\r\n        }, 100);\r\n    }\r\n});\r\n\r\n    \/\/ Adicionar evento de valida\u00e7\u00e3o ao bot\u00e3o pr\u00f3ximo\r\n    \r\n    nextBtn.addEventListener('click', function(e) {\r\n        const currentStep = document.querySelector('.form-step.active').getAttribute('data-step');\r\n        if (currentStep === 0) { \/\/ STEP 1\r\n            if (!validateStep2()) {\r\n                console.log(\"Reforco Calculado 02\")\r\n                e.preventDefault();\r\n                alert('Por favor, corrija as medidas antes de avan\u00e7ar.');\r\n            } \r\n        }\r\n    });\r\n\r\n    \r\n            \/\/ ============ PRESELECIONAR FORMA B ==========\r\n            \/\/ =============================================\r\n            \r\n            \/\/ Aguardar um breve momento ap\u00f3s o carregamento da p\u00e1gina\r\n            setTimeout(() => {\r\n                \/\/ Encontrar o elemento da forma B\r\n                const shapeB = document.querySelector('.shape-item[data-shape=\"b\"]');\r\n                \r\n                if (shapeB) {\r\n                    \/\/ Simular clique na forma B\r\n                    shapeB.click();\r\n                    \r\n                    \/\/ Preencher valores padr\u00e3o para demonstra\u00e7\u00e3o\r\n                    setTimeout(() => {\r\n                        const inputA = document.getElementById('A');\r\n                        const inputB = document.getElementById('B');\r\n                        \r\n                        if (inputA && inputB) {\r\n                            inputA.value = '0';\r\n                            inputB.value = '0';\r\n                            \r\n                            \/\/ Disparar eventos de input para calcular a \u00e1rea\r\n                            inputA.dispatchEvent(new Event('input'));\r\n                            inputB.dispatchEvent(new Event('input'));\r\n                        }\r\n                    }, 100);\r\n                }\r\n            }, 100);\r\n\r\n});\r\n<\/script>\r\n\r\n<script>\r\n\/\/ Vari\u00e1veis globais\r\nlet totalPriceBlanket = 0;\r\nlet selectedBlanket = null;\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    const totalArea = document.getElementById('total-area');\r\n    const blanketCards = document.querySelectorAll('.blanket-card');\r\n    const nextBtn = document.getElementById('nextBtn');\r\n    const marginSelect = document.getElementById('extra-margin');\r\n    \r\n    \/\/ Fun\u00e7\u00e3o para calcular o pre\u00e7o total\r\n    function calculateTotalPrice() {\r\n        const totalSquareMeters = parseFloat(totalArea.textContent) || 0;\r\n        \r\n        blanketCards.forEach(card => {\r\n            const pricePerSquareMeter = parseFloat(card.getAttribute('data-price')) || 0;\r\n            const totalPrice = totalSquareMeters * pricePerSquareMeter;\r\n            card.querySelector('.total-price').textContent = `\u20ac${totalPrice.toFixed(2)}`;\r\n        });\r\n        \r\n        \/\/ Atualizar o pre\u00e7o do card selecionado, se houver\r\n        if (selectedBlanket) {\r\n            const pricePerSquareMeter = parseFloat(selectedBlanket.getAttribute('data-price')) || 0;\r\n            totalPriceBlanket = (totalSquareMeters * pricePerSquareMeter).toFixed(2);\r\n        }\r\n        \r\n        \/\/ Atualizar resumos\r\n        updateCompactSummary();\r\n        if (typeof updateRelatorioCompleto === 'function') {\r\n            updateRelatorioCompleto();\r\n        }\r\n    }\r\n\r\n    \/\/ Evento de clique para selecionar a manta\r\n    blanketCards.forEach(card => {\r\n        card.addEventListener('click', function () {\r\n            blanketCards.forEach(b => b.classList.remove('selected'));\r\n            this.classList.add('selected');\r\n            selectedBlanket = this;\r\n\r\n            const totalSquareMeters = parseFloat(totalArea.textContent) || 0;\r\n            const pricePerSquareMeter = parseFloat(this.getAttribute('data-price')) || 0;\r\n            totalPriceBlanket = (totalSquareMeters * pricePerSquareMeter).toFixed(2);\r\n            \r\n            updateCompactSummary();\r\n            if (typeof updateRelatorioCompleto === 'function') {\r\n                updateRelatorioCompleto();\r\n            }\r\n        });\r\n    });\r\n\r\n    \/\/ Monitorar mudan\u00e7as na \u00e1rea (inputs de medida e margem)\r\n    function setupAreaMonitoring() {\r\n        \/\/ Monitorar inputs de medida\r\n        const measurementInputs = document.querySelectorAll('.measurements-inputs input');\r\n        measurementInputs.forEach(input => {\r\n            input.addEventListener('input', function() {\r\n                \/\/ Aguardar a fun\u00e7\u00e3o calculateTotalArea terminar\r\n                setTimeout(calculateTotalPrice, 50);\r\n            });\r\n        });\r\n        \r\n        \/\/ Monitorar mudan\u00e7a na margem\r\n        if (marginSelect) {\r\n            marginSelect.addEventListener('change', function() {\r\n                setTimeout(calculateTotalPrice, 50);\r\n            });\r\n        }\r\n    }\r\n\r\n    \/\/ Executar setup quando o step 1 for alterado\r\n    const shapeItems = document.querySelectorAll('.shape-item');\r\n    shapeItems.forEach(item => {\r\n        item.addEventListener('click', function() {\r\n            \/\/ Pequeno delay para permitir que os novos inputs sejam criados\r\n            setTimeout(setupAreaMonitoring, 300);\r\n        });\r\n    });\r\n\r\n    \/\/ Configurar monitoramento inicial\r\n    setupAreaMonitoring();\r\n\r\n    \/\/ Impede avan\u00e7ar sem selecionar uma manta\r\n    nextBtn.addEventListener('click', function (event) {\r\n        const currentStep = document.querySelector('.form-step.active').getAttribute('data-step');\r\n        if (currentStep === '2' && !selectedBlanket) {\r\n            event.preventDefault();\r\n            alert('Por favor, selecione uma manta antes de continuar.');\r\n            return false;\r\n        }\r\n    });\r\n\r\n    \/\/ Atualiza os pre\u00e7os ao entrar no Step 2\r\n    const step2 = document.querySelector('.form-step[data-step=\"2\"]');\r\n    if (step2) {\r\n        step2.addEventListener('click', function() {\r\n            setTimeout(calculateTotalPrice, 100);\r\n        });\r\n    }\r\n\r\n    console.log(\"Step 2 - Mantas inicializado\");\r\n});\r\n<\/script>\r\n\r\n<!--Script: Step 8 Relat\u00f3rio Final-->\r\n<script>\r\n    \/\/ =============================================\r\n\/\/ ============ RELAT\u00d3RIO FINAL ================\r\n\/\/ =============================================\r\n\r\n\/**\r\n * M\u00f3dulo principal do relat\u00f3rio final\r\n * Respons\u00e1vel por atualizar e gerenciar todo o conte\u00fado do relat\u00f3rio\r\n *\/\r\nconst RelatorioFinal = (() => {\r\n    \/\/ Configura\u00e7\u00f5es globais\r\n    const config = {\r\n        imageBaseUrl: 'https:\/\/recursos.nacoverpool.pt\/image\/formas\/',\r\n        defaultImage: 'https:\/\/recursos.nacoverpool.pt\/logo.jpg',\r\n        transportCost: 99, \/\/ Custo fixo de transporte\r\n        ivaRate: 0,     \/\/ Taxa de IVA (0%)\r\n        shapes: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n']\r\n    };\r\n\r\n    \/\/ Elementos do DOM cacheados\r\n    const elements = {\r\n        formaSelecionada: document.getElementById('forma-selecionada'),\r\n        relatorioFormaImg: document.getElementById('relatorio-forma-img'),\r\n        medidasForma: document.getElementById('medidas-forma'),\r\n        areaTotal: document.getElementById('area-total'),\r\n        modeloManta: document.getElementById('modelo-manta'),\r\n        precoManta: document.getElementById('preco-manta'),\r\n        relatorioMantaImg: document.getElementById('relatorio-manta-img'),\r\n        subtotal: document.getElementById('subtotal'),\r\n        iva: document.getElementById('iva'),\r\n        totalFinal: document.getElementById('total-final'),\r\n        prazoEntrega: document.getElementById('prazo-entrega'),\r\n        nextBtn: document.getElementById('nextBtn')\r\n    };\r\n\r\n    \/\/ ==================== FUN\u00c7\u00d5ES PRINCIPAIS ====================\r\n\r\n    \/**\r\n     * Inicializa o m\u00f3dulo do relat\u00f3rio\r\n     *\/\r\n    function init() {\r\n        preloadImages();\r\n        setupEventListeners();\r\n        updateRelatorioCompleto();\r\n    }\r\n\r\n    \/**\r\n     * Atualiza todo o conte\u00fado do relat\u00f3rio\r\n     *\/\r\n    function updateRelatorioCompleto() {\r\n        updateFormaEMedidas();\r\n        updateCobertor();\r\n        calculateTotais();\r\n    }\r\n\r\n    \/\/ ==================== FUN\u00c7\u00d5ES DE ATUALIZA\u00c7\u00c3O ====================\r\n\r\n    \/**\r\n     * Atualiza a se\u00e7\u00e3o de Forma e Medidas\r\n     *\/\r\n      function updateFormaEMedidas() {\r\n        const selectedShape = localStorage.getItem('selectedShape')?.toUpperCase() || '-';\r\n        \r\n        \/\/ Atualiza texto da forma\r\n        if (elements.formaSelecionada) {\r\n            elements.formaSelecionada.textContent = `Forma ${selectedShape}`;\r\n            elements.formaSelecionada.dataset.shape = selectedShape.toLowerCase();\r\n        }\r\n        \r\n        \/\/ Atualiza imagem da forma\r\n        if (selectedShape !== '-' && elements.relatorioFormaImg) {\r\n            const shapeLower = selectedShape.toLowerCase();\r\n            const imgUrl = `${config.imageBaseUrl}pool_category_image_${shapeLower}.png`;\r\n            loadImageWithFallback(imgUrl, elements.relatorioFormaImg, config.defaultImage);\r\n        } else if (elements.relatorioFormaImg) {\r\n            elements.relatorioFormaImg.style.display = 'none';\r\n        }\r\n\r\n        \/\/ Atualiza medidas (excluindo medidas de escada)\r\n        const inputs = document.querySelectorAll('.measurements-inputs input:not(#measure-a):not(#measure-b):not(#measure-c)');\r\n        const medidas = Array.from(inputs)\r\n            .map(input => `${input.id.replace('measure-', '').toUpperCase()}: ${input.value || '0'}m`)\r\n            .join(', ');\r\n        \r\n        if (elements.medidasForma) elements.medidasForma.textContent = medidas || '-';\r\n        \r\n        \/\/ Atualiza \u00e1rea total\r\n        const areaTotal = document.getElementById('total-area')?.textContent || '0.00';\r\n        if (elements.areaTotal) elements.areaTotal.textContent = `${areaTotal} m\u00b2`;\r\n    }\r\n\r\n    \/**\r\n     * Atualiza a se\u00e7\u00e3o de Cobertor\r\n     *\/\r\n    function updateCobertor() {\r\n        const selectedBlanket = document.querySelector('.blanket-card.selected');\r\n        \r\n        if (selectedBlanket) {\r\n            const blanketName = selectedBlanket.querySelector('h6')?.textContent || 'Cobertor n\u00e3o especificada';\r\n            const blanketPrice = selectedBlanket.querySelector('.total-price')?.textContent || '\u20ac0.00';\r\n            const blanketImg = selectedBlanket.querySelector('img')?.src || '';\r\n            \r\n            if (elements.modeloManta) elements.modeloManta.textContent = blanketName;\r\n            if (elements.precoManta) elements.precoManta.textContent = blanketPrice;\r\n            if (elements.relatorioMantaImg) elements.relatorioMantaImg.src = blanketImg;\r\n        } else {\r\n            if (elements.modeloManta) elements.modeloManta.textContent = 'Nenhuma selecionada';\r\n            if (elements.precoManta) elements.precoManta.textContent = '\u20ac0.00';\r\n        }\r\n    }\r\n\r\n    \/**\r\n     * Calcula todos os valores financeiros e atualiza a tabela\r\n     *\/\r\n    function calculateTotais() {\r\n        \/\/ Obter Pre\u00e7o da manta\r\n        const blanketPrice = parseFloat(\r\n            (elements.precoManta?.textContent.replace('\u20ac', '') || '0').trim()\r\n        );\r\n\r\n        \/\/ Calcular custo de transporte (s\u00f3 aplica se houver cobertura)\r\n        const transporte = blanketPrice > 0 ? config.transportCost : 0;\r\n\r\n        \/\/ Atualizar\/inserir linha de transporte\r\n        \/\/updateTransportRow(transporte);\r\n\r\n        \/\/ Calcular valores financeiros\r\n        const subtotal = blanketPrice;\r\n        const iva = subtotal * config.ivaRate;\r\n        const total = subtotal + iva; \/\/ + transporte;\r\n\r\n        \/\/ Atualizar elementos do DOM\r\n        if (elements.subtotal) elements.subtotal.textContent = `\u20ac${subtotal.toFixed(2)}`;\r\n        if (elements.iva) elements.iva.textContent = `\u20ac${iva.toFixed(2)}`;\r\n        if (elements.totalFinal) elements.totalFinal.textContent = `\u20ac${total.toFixed(2)}`;\r\n        if (elements.prazoEntrega) elements.prazoEntrega.textContent = determineDeliveryTime();\r\n    }\r\n\r\n    \/\/ ==================== FUN\u00c7\u00d5ES AUXILIARES ====================\r\n\r\n    \/**\r\n     * Pr\u00e9-carrega imagens das formas para melhor performance\r\n     *\/\r\n    function preloadImages() {\r\n        config.shapes.forEach(shape => {\r\n            const img = new Image();\r\n            img.src = `${config.imageBaseUrl}pool_category_image_${shape}.png`;\r\n        });\r\n    }\r\n\r\n    \/**\r\n     * Configura todos os event listeners necess\u00e1rios\r\n     *\/\r\n    function setupEventListeners() {\r\n        \/\/ Atualiza relat\u00f3rio quando steps s\u00e3o abertos\r\n        [1, 2, 3, 4, 5].forEach(step => {\r\n            const stepEl = document.querySelector(`.form-step[data-step=\"${step}\"]`);\r\n            if (stepEl) {\r\n                stepEl.addEventListener('click', updateRelatorioCompleto);\r\n            }\r\n        });\r\n\r\n        \/\/ Valida\u00e7\u00e3o ao clicar no bot\u00e3o pr\u00f3ximo\r\n        if (elements.nextBtn) {\r\n            elements.nextBtn.addEventListener('click', handleNextButton);\r\n        }\r\n    }\r\n\r\n    \/**\r\n     * Carrega imagem com fallback em caso de erro\r\n     *\/\r\n    function loadImageWithFallback(src, imgElement, fallbackSrc) {\r\n        const img = new Image();\r\n        img.onload = () => {\r\n            imgElement.src = src;\r\n            imgElement.style.display = 'block';\r\n        };\r\n        img.onerror = () => {\r\n            imgElement.src = fallbackSrc;\r\n            console.warn(`Imagem n\u00e3o encontrada: ${src}, usando fallback`);\r\n        };\r\n        img.src = src;\r\n    }\r\n\r\n    \/**\r\n     * Atualiza a linha de transporte na tabela\r\n     *\/\r\n    function updateTransportRow(transporte) {\r\n        let transporteEl = document.getElementById('transporte-row');\r\n        \r\n        if (!transporteEl) {\r\n            transporteEl = document.createElement('tr');\r\n            transporteEl.className = 'total-row';\r\n            transporteEl.id = 'transporte-row';\r\n            transporteEl.innerHTML = `\r\n                <td colspan=\"2\"><strong>Transporte<\/strong><\/td>\r\n                <td id=\"transporte-valor\">\u20ac${transporte.toFixed(2)}<\/td>\r\n            `;\r\n            \r\n            const subtotalRow = document.querySelector('.total-row');\r\n            if (subtotalRow) {\r\n                subtotalRow.parentNode.insertBefore(transporteEl, subtotalRow);\r\n            }\r\n        } else {\r\n            const transporteValor = document.getElementById('transporte-valor');\r\n            if (transporteValor) transporteValor.textContent = `\u20ac${transporte.toFixed(2)}`;\r\n        }\r\n    }\r\n\r\n    \/**\r\n     * Determina o prazo de entrega baseado nas sele\u00e7\u00f5es\r\n     *\/\r\n    function determineDeliveryTime() {\r\n        \/\/ L\u00f3gica pode ser expandida conforme necess\u00e1rio\r\n        return '3 dias \u00fateis';\r\n    }\r\n\r\n    \/**\r\n     * Manipula o clique no bot\u00e3o pr\u00f3ximo\r\n     *\/\r\n    function handleNextButton(e) {\r\n        const currentStep = document.querySelector('.form-step.active')?.getAttribute('data-step');\r\n        \r\n        if (currentStep === '2') {\r\n            updateRelatorioCompleto();\r\n        }\r\n        \r\n        if (currentStep === '0') {\r\n            if (!validateStep2()) {\r\n                e.preventDefault();\r\n                alert('Por favor, corrija as medidas antes de avan\u00e7ar.');\r\n            }\r\n        }\r\n    }\r\n\r\n    \/**\r\n     * Fun\u00e7\u00e3o de valida\u00e7\u00e3o do passo 2 (exemplo)\r\n     *\/\r\n    function validateStep2() {\r\n        \/\/ Implemente sua l\u00f3gica de valida\u00e7\u00e3o aqui\r\n        return true;\r\n    }\r\n\r\n    \/\/ Expor m\u00e9todos p\u00fablicos\r\n    return {\r\n        init,\r\n        updateRelatorioCompleto\r\n    };\r\n})();\r\n\r\n\/\/ Inicializa o m\u00f3dulo quando o DOM estiver pronto\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    RelatorioFinal.init();\r\n});\r\n\r\n\/\/ Opcional: expor para debug no console\r\nwindow.RelatorioFinal = RelatorioFinal;\r\n<\/script>\r\n\r\n\r\n\r\n<!--MAIN-->\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function () {\r\n    const steps = document.querySelectorAll('.step');\r\n    const formSteps = document.querySelectorAll('.form-step');\r\n    const prevBtn = document.getElementById('prevBtn');\r\n    const nextBtn = document.getElementById('nextBtn');\r\n    let currentStep = 0;\r\n    clearStorage();\r\n\r\n    function updateSteps() {\r\n        \/\/ Recupera a forma selecionada\r\n        const selectedShape = getShape();\r\n        console.log('Forma selecionada:', selectedShape); \/\/ Para depura\u00e7\u00e3o\r\n\r\n        \/\/ Atualiza a interface com base no passo atual\r\n        steps.forEach((step, index) => {\r\n            if (index === currentStep) {\r\n                step.classList.add('active');\r\n            } else {\r\n                step.classList.remove('active');\r\n            }\r\n        });\r\n\r\n        formSteps.forEach((formStep, index) => {\r\n            if (index === currentStep) {\r\n                formStep.classList.add('active');\r\n            } else {\r\n                formStep.classList.remove('active');\r\n            }\r\n        });\r\n\r\n        \/\/ Atualiza o estado dos bot\u00f5es \"Anterior\" e \"Pr\u00f3ximo\"\r\n        prevBtn.disabled = currentStep === 0;\r\n        nextBtn.disabled = currentStep === steps.length - 1;\r\n\r\n        \/\/ Chama fun\u00e7\u00f5es espec\u00edficas para cada passo, se necess\u00e1rio\r\n        if (currentStep === 1) {\r\n            initializeStep2();\r\n        } else if (currentStep === 2) {\r\n            initializestep3();\r\n        } \r\n    }\r\n\r\n    function validateStep(step) {\r\n        if (step === 0) {\r\n            const seasonSelected = document.querySelector('input[name=\"season\"]:checked');\r\n            const selectedShape = document.querySelector('.shape-item.active')?.getAttribute('data-shape');\r\n            if (!selectedShape) {\r\n                alert('Por favor, selecione uma forma.');\r\n                return false;\r\n            }\r\n        }\r\n        return true;\r\n    }\r\n\r\n    steps.forEach((step, index) => {\r\n        step.addEventListener('click', () => {\r\n            if (validateStep(currentStep)) {\r\n                currentStep = index;\r\n                updateSteps(); \/\/ Atualiza o passo e chama getShape()\r\n                 syncStepTitle();\r\n            }\r\n        });\r\n    });\r\n\r\n    prevBtn.addEventListener('click', () => {\r\n        if (currentStep > 0) {\r\n            currentStep--;\r\n            updateSteps(); \/\/ Atualiza o passo e chama getShape()\r\n             syncStepTitle();\r\n        }\r\n    });\r\n\r\n    nextBtn.addEventListener('click', () => {\r\n        if (validateStep(currentStep)) {\r\n            if (currentStep < steps.length - 1) {\r\n                currentStep++;\r\n                updateSteps(); \/\/ Atualiza o passo e chama getShape()\r\n                 syncStepTitle();\r\n            }\r\n        }\r\n    });\r\n\r\n    updateSteps(); \/\/ Inicializa o primeiro passo\r\n     syncStepTitle();\r\n});\r\n\r\n\r\n\/\/ Fun\u00e7\u00f5es espec\u00edficas para cada passo\r\nfunction initializeStep2() {\r\n    const selectedShape = getShape();\r\n    if (selectedShape) {\r\n        console.log('Forma selecionada no Passo 2:', selectedShape);\r\n        \/\/ Atualize a interface conforme necess\u00e1rio\r\n    }\r\n}\r\n\r\nfunction initializestep3() {\r\n    const selectedShape = getShape();\r\n    if (selectedShape) {\r\n        console.log('Forma selecionada no Passo 6:', selectedShape);\r\n        \/\/ Atualize a interface conforme necess\u00e1rio\r\n    }\r\n}\r\n\r\nfunction initializestep4_() {\r\n    const selectedShape = getShape();\r\n    if (selectedShape) {\r\n        console.log('Forma selecionada no Passo 7:', selectedShape);\r\n        \/\/ Atualize a interface conforme necess\u00e1rio\r\n    }\r\n}\r\n<\/script>\r\n\r\n<!--SCRIPT GERAL-->\r\n<script>\r\n    \/\/ Guardar a forma selecionada\r\nfunction saveShape(shape) {\r\n    localStorage.setItem('selectedShape', shape);\r\n    console.log(`Forma \"${shape}\" guardada no localStorage.`);\r\n}\r\n\r\n\/\/ Modificar a forma selecionada\r\nfunction updateShape(newShape) {\r\n    localStorage.setItem('selectedShape', newShape);\r\n    console.log(`Forma alterada para \"${newShape}\".`);\r\n}\r\n\r\n\/\/ Recuperar a forma selecionada\r\nfunction getShape() {\r\n    const shape = localStorage.getItem('selectedShape');\r\n    if (shape) {\r\n        console.log(`Forma recuperada: \"${shape}\".`);\r\n    } else {\r\n        console.log('Nenhuma forma guardada.');\r\n    }\r\n    return shape;\r\n}\r\n\r\n\/\/ Apagar a forma selecionada\r\nfunction deleteShape() {\r\n    localStorage.removeItem('selectedShape');\r\n    console.log('Forma apagada do localStorage.');\r\n}\r\n\r\n\/\/ Limpar todo o localStorage\r\nfunction clearStorage() {\r\n    localStorage.clear();\r\n    console.log('localStorage limpo.');\r\n}\r\n\r\n<\/script>\r\n\r\n<!--Pagamento WooComerce-->\r\n<script>\r\n    \/\/ Finalizar pedido e redirecionar para checkout\r\n\/\/ Finalizar pedido e redirecionar para checkout\r\n\r\ndocument.querySelectorAll('.finalizar-pedido').forEach(button => {\r\n    button.addEventListener('click', function () {\r\n\r\n        \/\/ Obter o nonce diretamente do objeto localizado\r\n        const nonce = wc_ajax.nonce;\r\n\r\n    \/\/ Usar valores est\u00e1ticos para teste\r\n        const orderData = {\r\n        shape: document.getElementById('forma-selecionada')?.textContent || '--',\r\n        measurements: document.getElementById('medidas-forma')?.textContent || '--', \r\n        areatotal: document.getElementById('area-total')?.textContent || '--',\r\n        blanket: document.getElementById('modelo-manta')?.textContent || '--',\r\n        blanket_price: document.getElementById('preco-manta')?.textContent || '\u20ac0',\r\n        reinforcement: document.getElementById('tipo-reforco')?.textContent || '--',\r\n        reinforcement_price: document.getElementById('preco-reforco')?.textContent || '\u20ac0',\r\n        roller: document.getElementById('tipo-enrolador')?.textContent || '--',\r\n        enrolador: document.getElementById('relatorio-enrolador-img')?.src || '--', \r\n        escada: document.getElementById('relatorio-escada-img')?.src || '--', \r\n        roller_price: document.getElementById('preco-enrolador')?.textContent || '\u20ac0',\r\n        cover: document.getElementById('medida-capa')?.textContent || '--',\r\n        cover_price: document.getElementById('preco-capa')?.textContent || '\u20ac0',\r\n        edges: document.getElementById('quantidade-cantos')?.textContent || '0',\r\n        edges_price: document.getElementById('preco-cantos')?.textContent || '\u20ac0',\r\n        ladder: document.getElementById('tipo-escada')?.textContent || '--',\r\n        ladder_measurements: document.getElementById('medidas-escada')?.textContent || '--',\r\n        subtotal: document.getElementById('subtotal')?.textContent || '\u20ac0',\r\n        transporte: document.getElementById('transporte-valor')?.textContent || '\u20ac0',\r\n        custom_transporte: document.getElementById('transporte-valor')?.textContent.replace('\u20ac', '') || '0',\r\n        tipo_form: 'barras',\r\n        total: document.getElementById('total-final')?.textContent || '\u20ac0',\r\n        margem_adicional: `${extraMarginCm} cm`,\r\n        \r\n    };\r\n\r\n    \/\/ Mostrar loader\r\n    const button = this;\r\n    button.disabled = true;\r\n    button.innerHTML = '<span class=\"loader\"><\/span> Processando...';\r\n\r\n    console.log(\"Enviando dados para o servidor:\", orderData); \/\/ Log para depura\u00e7\u00e3o\r\n\r\n        \/\/ Usando FormData para melhor compatibilidade\r\n    const formData = new FormData();\r\n    formData.append('action', 'create_custom_order');\r\n    formData.append('nonce', wc_ajax.nonce_form1);\r\n    formData.append('order_data', JSON.stringify(orderData));\r\n\r\n    \/\/ Enviar para o WordPress via AJAX\r\n    \/\/ Modifique a parte do fetch no seu script\r\n    fetch(wc_ajax.ajax_url, {\r\n        method: 'POST',\r\n        body: formData,\r\n        credentials: 'same-origin',\r\n        headers: {\r\n        'X-Requested-With': 'XMLHttpRequest'\r\n    }\r\n        \r\n    })\r\n    .then(response => {\r\n            if (!response.ok) {\r\n                throw new Error(`HTTP error! status: ${response.status}`);\r\n            }\r\n            return response.json();\r\n        })\r\n    .then(data => {\r\n        console.log(\"AGGGGGGGG Start\");\r\n        console.log(wc_ajax.nonce_form1)\r\n        console.log(data);\r\n        console.log(data.cart_url);\r\n        console.log(wc_ajax.cart_url);\r\n        console.log(\"AGGGGGGGG END\");\r\n        if(data.success) {\r\n            \/\/ Redirecionar para a p\u00e1gina do carrinho\r\n            window.location.href = data.cart_url || wc_ajax.cart_url || '\/carrinho\/';\r\n        } else {\r\n            console.log(data)\r\n            alert('Erro ao criar pedido: ' + (data.message || 'Erro desconhecido'));\r\n            \r\n            button.disabled = false;\r\n            button.textContent = 'Finalizar Pedido';\r\n        }\r\n    })\r\n    .catch(error => {\r\n        console.error('Error:', error);\r\n        alert('Ocorreu um erro ao processar seu pedido. Por favor, tente novamente.');\r\n        button.disabled = false;\r\n        button.textContent = 'Finalizar Pedido';\r\n    });\r\n\r\n    });\r\n});\r\n\r\n\r\n\/\/ CSS para o loader (mantido igual)\r\nconst style = document.createElement('style');\r\nstyle.textContent = `\r\n.loader {\r\n    display: inline-block;\r\n    width: 16px;\r\n    height: 16px;\r\n    border: 2px solid rgba(255,255,255,.3);\r\n    border-radius: 50%;\r\n    border-top-color: #fff;\r\n    animation: spin 1s ease-in-out infinite;\r\n    margin-right: 8px;\r\n    vertical-align: middle;\r\n}\r\n@keyframes spin {\r\n    to { transform: rotate(360deg); }\r\n}\r\n`;\r\ndocument.head.appendChild(style);\r\n\r\n\r\n\/\/ Fun\u00e7\u00e3o para inicializar o cobertor Azul com todos os c\u00e1lculos\r\nfunction initializeDefaultBlanket() {\r\n    \/\/ 1. Verificar se j\u00e1 temos uma \u00e1rea calculada\r\n    const areaElement = document.getElementById('total-area');\r\n    const areaValue = parseFloat(areaElement?.textContent) || 0;\r\n    \r\n    if (areaValue === 0) {\r\n        \/\/ Se n\u00e3o tem \u00e1rea, tentar calcular\r\n        if (typeof calculateTotalArea === 'function') {\r\n            calculateTotalArea();\r\n        }\r\n        \r\n        \/\/ Aguardar um pouco e tentar novamente\r\n        setTimeout(() => {\r\n            initializeDefaultBlanket();\r\n        }, 200);\r\n        return;\r\n    }\r\n    \r\n    \/\/ 2. Encontrar o card Azul\r\n    const azulBlanketCard = document.querySelector('.blanket-card[data-image_id=\"1\"]');\r\n    \r\n    if (!azulBlanketCard) {\r\n        console.warn('Cobertor Azul n\u00e3o encontrado!');\r\n        return;\r\n    }\r\n    \r\n    \/\/ 3. Calcular pre\u00e7o do cobertor Azul\r\n    const totalSquareMeters = parseFloat(document.getElementById('total-area')?.textContent) || 0;\r\n    const pricePerSquareMeter = parseFloat(azulBlanketCard.getAttribute('data-price')) || 0;\r\n    const totalPrice = totalSquareMeters * pricePerSquareMeter;\r\n    \r\n    \/\/ 4. Atualizar visual do card Azul\r\n    azulBlanketCard.querySelector('.total-price').textContent = `\u20ac${totalPrice.toFixed(2)}`;\r\n    \r\n    \/\/ 5. Selecionar o card Azul\r\n    document.querySelectorAll('.blanket-card').forEach(card => {\r\n        card.classList.remove('selected');\r\n    });\r\n    \r\n    azulBlanketCard.classList.add('selected');\r\n    \r\n    \/\/ 6. Atualizar vari\u00e1veis globais\r\n    if (typeof selectedBlanket !== 'undefined') {\r\n        selectedBlanket = azulBlanketCard;\r\n    }\r\n    \r\n    if (typeof totalPriceBlanket !== 'undefined') {\r\n        totalPriceBlanket = totalPrice.toFixed(2);\r\n    }\r\n    \r\n    \/\/ 7. Atualizar todas as visualiza\u00e7\u00f5es\r\n    if (typeof updateCompactSummary === 'function') {\r\n        updateCompactSummary();\r\n    }\r\n    \r\n    if (typeof updateStepSelections === 'function') {\r\n        updateStepSelections();\r\n    }\r\n    \r\n    if (typeof calculateTotalPrice === 'function') {\r\n        calculateTotalPrice();\r\n    }\r\n    \r\n    if (typeof updateRelatorioCompleto === 'function') {\r\n        updateRelatorioCompleto();\r\n    }\r\n    \r\n    console.log('Cobertor Azul inicializado com pre\u00e7o: \u20ac' + totalPrice.toFixed(2));\r\n}\r\n\r\n\/\/ Inicializar quando o DOM carregar\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    \/\/ Aguardar um pouco mais para garantir que todas as fun\u00e7\u00f5es estejam carregadas\r\n    setTimeout(() => {\r\n        initializeDefaultBlanket();\r\n    }, 800); \/\/ 800ms deve ser suficiente\r\n});\r\n\r\n\/\/ Tamb\u00e9m inicializar quando o usu\u00e1rio voltar para o step 2\r\nconst step2Element = document.querySelector('.form-step[data-step=\"2\"]');\r\nif (step2Element) {\r\n    step2Element.addEventListener('click', function() {\r\n        \/\/ Verificar se nenhum cobertor est\u00e1 selecionado\r\n        const selectedBlanket = document.querySelector('.blanket-card.selected');\r\n        if (!selectedBlanket) {\r\n            setTimeout(() => {\r\n                initializeDefaultBlanket();\r\n            }, 100);\r\n        }\r\n    });\r\n}\r\n\r\n\r\n<\/script>\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5731454 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5731454\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5d91255\" data-id=\"5d91255\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6a8700c elementor-widget elementor-widget-image\" data-id=\"6a8700c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"2048\" height=\"1415\" src=\"https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2024\/11\/cobertura-de-barras-esboco-2048x14150000-1.png\" class=\"attachment-full size-full wp-image-12267\" alt=\"\" srcset=\"https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2024\/11\/cobertura-de-barras-esboco-2048x14150000-1.png 2048w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2024\/11\/cobertura-de-barras-esboco-2048x14150000-1-300x207.png 300w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2024\/11\/cobertura-de-barras-esboco-2048x14150000-1-1024x708.png 1024w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2024\/11\/cobertura-de-barras-esboco-2048x14150000-1-768x531.png 768w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2024\/11\/cobertura-de-barras-esboco-2048x14150000-1-1536x1061.png 1536w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2024\/11\/cobertura-de-barras-esboco-2048x14150000-1-600x415.png 600w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-deff149 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"deff149\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8afc775\" data-id=\"8afc775\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-79e3d25 elementor-widget elementor-widget-text-editor\" data-id=\"79e3d25\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"54\" data-end=\"231\">O cobertor \u00e9 fabricado em lona de PVC de alta qualidade e conta com uma garantia de 2 anos. O seu resistente tecido de poli\u00e9ster revestido a PVC est\u00e1 dispon\u00edvel em v\u00e1rias cores.<\/p><p data-start=\"233\" data-end=\"467\" data-is-last-node=\"\" data-is-only-node=\"\">Este modelo de cobertor necessita de menos fixa\u00e7\u00f5es do que os cobertores de inverno tradicionais. O sistema de fixa\u00e7\u00e3o e montagem \u00e9 realizado atrav\u00e9s de tensores: de um lado ficam fixos e, do outro, encontram-se as catracas de tens\u00e3o.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a5a788b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a5a788b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-1dd7727\" data-id=\"1dd7727\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0fd4fb6 elementor-widget elementor-widget-image\" data-id=\"0fd4fb6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2021\/11\/cobertura-de-barras.jpg\" class=\"attachment-large size-large wp-image-10692\" alt=\"\" srcset=\"https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2021\/11\/cobertura-de-barras.jpg 960w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2021\/11\/cobertura-de-barras-300x169.jpg 300w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2021\/11\/cobertura-de-barras-768x432.jpg 768w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2021\/11\/cobertura-de-barras-600x338.jpg 600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-bfc8bf5\" data-id=\"bfc8bf5\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-86adec6 elementor-widget elementor-widget-text-editor\" data-id=\"86adec6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"54\" data-end=\"202\">Dever\u00e1 instalar as fixa\u00e7\u00f5es laterais anti-vento, que se recomendam quando a piscina n\u00e3o \u00e9 utilizada diariamente ou quando h\u00e1 chuva ou ventos fortes.<\/p><p data-start=\"204\" data-end=\"514\">Os tubos do cobertor de barras s\u00e3o de alum\u00ednio, com 40 mm de di\u00e2metro e 2 mm de espessura. A dist\u00e2ncia entre eles depende do comprimento do cobertor, variando entre um m\u00ednimo de 1,60 m e um m\u00e1ximo de 1,90 m. Os tubos s\u00e3o seguros e, ao mesmo tempo, f\u00e1ceis de utilizar gra\u00e7as ao seu sistema de manivela rotativa.<\/p><p data-start=\"516\" data-end=\"668\" data-is-last-node=\"\" data-is-only-node=\"\">A manivela de recolha \u00e9 fabricada em a\u00e7o inoxid\u00e1vel. O cobertor \u00e9 entregue com todos os acess\u00f3rios necess\u00e1rios: tensores, catracas, fixa\u00e7\u00f5es e manivela.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1793013 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1793013\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f633c9d\" data-id=\"f633c9d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-73a2ef2 elementor-widget elementor-widget-text-editor\" data-id=\"73a2ef2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Manuten\u00e7\u00e3o da cobertura<\/p><p>Para uma manuten\u00e7\u00e3o correta da cobertura, recomendamos limp\u00e1-la entre tr\u00eas e seis vezes por ano. Esta limpeza \u00e9 especialmente importante para eliminar impurezas e sujidade que possam obstruir os escoamentos da cobertura. Para garantir a seguran\u00e7a, mantenha a piscina sempre com \u00e1gua, tal como na \u00e9poca de utiliza\u00e7\u00e3o normal.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f214576 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f214576\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-34fe396\" data-id=\"34fe396\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5e24f76 elementor-widget elementor-widget-image\" data-id=\"5e24f76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1920\" height=\"850\" src=\"https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract-e1746719626387.png\" class=\"attachment-full size-full wp-image-13387\" alt=\"\" srcset=\"https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract-e1746719626387.png 1920w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract-e1746719626387-300x133.png 300w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract-e1746719626387-1024x453.png 1024w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract-e1746719626387-768x340.png 768w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract-e1746719626387-1536x680.png 1536w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract-e1746719626387-600x266.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1c16011 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1c16011\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-db4bc53\" data-id=\"db4bc53\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2a8e427 elementor-widget elementor-widget-image\" data-id=\"2a8e427\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract1.png\" class=\"attachment-full size-full wp-image-13391\" alt=\"\" srcset=\"https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract1.png 1920w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract1-300x169.png 300w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract1-1024x576.png 1024w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract1-768x432.png 768w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract1-1536x864.png 1536w, https:\/\/nacoverpool.pt\/staging\/wp-content\/uploads\/2025\/05\/Caract1-600x338.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>1Forma 2Cobertura 3Pedido Anterior Pr\u00f3ximo A B C D E F G H I J K L M Outra forma? N Nota: As medidas s\u00e3o interiores (Obrigat\u00f3rio*) | Fabrica\u00e7\u00e3o\/envio: 3 dias \u00fateis. \u00c1rea total: 0.00 m\u00b2 \ud83d\udccf Margem Adicional Adicione uma margem extra em todo o per\u00edmetro para garantir um ajuste Selecione a margem desejada: [&hellip;]<\/p>\n","protected":false},"author":348,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-14021","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nacoverpool.pt\/staging\/wp-json\/wp\/v2\/pages\/14021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nacoverpool.pt\/staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nacoverpool.pt\/staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nacoverpool.pt\/staging\/wp-json\/wp\/v2\/users\/348"}],"replies":[{"embeddable":true,"href":"https:\/\/nacoverpool.pt\/staging\/wp-json\/wp\/v2\/comments?post=14021"}],"version-history":[{"count":3,"href":"https:\/\/nacoverpool.pt\/staging\/wp-json\/wp\/v2\/pages\/14021\/revisions"}],"predecessor-version":[{"id":18827,"href":"https:\/\/nacoverpool.pt\/staging\/wp-json\/wp\/v2\/pages\/14021\/revisions\/18827"}],"wp:attachment":[{"href":"https:\/\/nacoverpool.pt\/staging\/wp-json\/wp\/v2\/media?parent=14021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}