Property Valuation \u2013 Step 1<\/title>\r\n <style>\r\n :root {\r\n --bg:#ffffff;\r\n --text:#0f172a;\r\n --muted:#64748b;\r\n --line:#e2e8f0;\r\n --primary:#111827;\r\n --ring:#a3e3ff;\r\n --chip-bg:#f8fafc;\r\n --chip-on:#0ea5e9; \/* (ya no lo usamos para condition; mantenido por compatibilidad) *\/\r\n --card-bg:#f1f5f9;\r\n --brand:#54A847; \/* verde de marca *\/\r\n --brand-soft:#eaf6ec; \/* verde suave para fondo seleccionado *\/\r\n }\r\n *{box-sizing:border-box}\r\n html,body{\r\n margin:0; padding:0;\r\n background:var(--bg); color:var(--text);\r\n font:16px\/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\";\r\n }\r\n .container{max-width:880px;margin:40px auto;padding:0 16px 100px}\r\n h1{font-size:1.35rem;margin:0 0 18px;font-weight:600}\r\n form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 6px 24px rgba(15,23,42,.05);position:relative}\r\n .section-title{font-weight:600;margin:18px 0 10px}\r\n .row{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}\r\n @media (min-width:720px){.row.two{grid-template-columns:1fr 1fr}}\r\n label{display:block;font-size:.9rem;margin:2px 0 6px;color:var(--muted)}\r\n \/* Inputs *\/\r\n input[type=\"text\"],input[type=\"number\"],select{\r\n width:100%;appearance:none;background:#fff;\r\n border:1px solid var(--line);border-radius:12px;\r\n padding:14px;outline:none;transition:box-shadow .2s,border-color .2s\r\n }\r\n input::placeholder{color:#94a3b8}\r\n input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(84,168,71,.25)}\r\n \/* Quitar flechas nativas de number *\/\r\n input[type=number]::-webkit-outer-spin-button,\r\n input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\r\n input[type=number]{-moz-appearance:textfield;appearance:textfield}\r\n hr{border:none;border-top:1px solid var(--line);margin:16px 0}\r\n \/* Contadores en l\u00ednea *\/\r\n .counter{display:flex;align-items:center;gap:10px}\r\n .counter>label{margin:0 10px 0 0;white-space:nowrap;font-weight:600;color:var(--muted)}\r\n .counter .btn{\r\n height:40px;width:40px;border-radius:8px;\r\n border:1px solid var(--line);background:#fff;color:#000;cursor:pointer;\r\n font-size:22px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center\r\n }\r\n .counter input{text-align:center;border-radius:8px;height:40px;min-width:70px}\r\n .counter .btn:active{transform:translateY(1px)}\r\n .hidden{display:none}\r\n \/* Chips (Features) *\/\r\n .chips{display:flex;flex-wrap:wrap;gap:10px}\r\n .chip{position:relative}\r\n .chip input{position:absolute;opacity:0;pointer-events:none}\r\n .chip label{\r\n cursor:pointer;user-select:none;padding:10px 14px;border-radius:12px;\r\n border:1px solid var(--line);background:var(--chip-bg);color:var(--text);\r\n transition:border-color .2s,background .2s,transform .02s\r\n }\r\n .chip input:checked+label{border-color:var(--brand);background:var(--brand-soft)}\r\n .chip label:active{transform:translateY(1px)}\r\n \/* Condition cards *\/\r\n .cards{display:grid;gap:12px}\r\n .card{\r\n display:grid;grid-template-columns:84px 1fr;gap:14px;padding:12px;\r\n border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;align-items:center\r\n }\r\n .card:hover{border-color:var(--brand)}\r\n .card input{display:none}\r\n \/* \ud83d\uddbc\ufe0f Las im\u00e1genes se ajustan solas. SOLO pon el enlace en src *\/\r\n .card img{width:84px;height:60px;object-fit:cover;border-radius:10px;background:var(--card-bg)}\r\n .card .title{font-weight:600;margin-bottom:4px}\r\n .card .desc{color:var(--muted);font-size:.92rem}\r\n \/* (3) Selecci\u00f3n en verde como los chips *\/\r\n .card.selected{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px #e2f3e6 inset}\r\n .actions{display:flex;gap:12px;justify-content:center;margin-top:18px}\r\n .btn-primary{padding:12px 18px;border:none;border-radius:12px;background:var(--brand);color:#fff;cursor:pointer;font-weight:600}\r\n .btn-primary:hover{background:#46923d}\r\n .btn-primary:disabled{opacity:.5;cursor:not-allowed}\r\n \/* Progress *\/\r\n .progress{position:sticky;z-index:5;bottom:0;left:0;right:0;margin-top:26px;background:#fff;padding:10px 0 0;box-shadow:0 -6px 12px rgba(15,23,42,.04)}\r\n .progress-track{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;height:8px}\r\n .progress .seg{border-radius:999px;background:#e5e7eb;overflow:hidden}\r\n .progress .seg>span{display:block;height:100%;width:0;background:var(--primary);transition:width .35s ease}\r\n .progress .seg.filled>span{width:100%}\r\n \/* Phone + owner *\/\r\n .phone-group{display:grid;grid-template-columns:120px 1fr;gap:8px}\r\n .pill-toggle{display:inline-flex;gap:8px;margin-top:6px}\r\n .pill-toggle button{border:1px solid var(--line);background:#fff;color:#000;padding:10px 16px;border-radius:12px;cursor:pointer;font-weight:600}\r\n .pill-toggle button.active{background:var(--brand-soft);border-color:var(--brand)}\r\n .checkbox-line{display:flex;align-items:center;gap:10px;margin:6px 0}\r\n .checkbox-line input[type=\"checkbox\"]{width:18px;height:18px}\r\n .checkbox-line label a{text-decoration:underline}\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <div class=\"container\" id=\"formContainer\">\r\n <h1>Your Free Property Valuation<\/h1>\r\n <form id=\"valuationForm\" novalidate>\r\n \r\n <section id=\"stepBasics\">\r\n \r\n <div class=\"row\">\r\n <div>\r\n <label for=\"area\">Located area<\/label>\r\n <input id=\"area\" name=\"area\" type=\"text\" placeholder=\"La Nucia, Plaza del Sol\" autocomplete=\"address-line1\" required \/>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"row two\">\r\n <div>\r\n <label for=\"propertyType\">Property type<\/label>\r\n <select id=\"propertyType\" name=\"propertyType\" required>\r\n <option value=\"\" disabled selected>Select<\/option>\r\n <option>Apartment (Flat)<\/option>\r\n <option>Penthouse<\/option>\r\n <option>Townhouse<\/option>\r\n <option>Villa \/ Chalet<\/option>\r\n <option>Bungalow<\/option>\r\n <option>Other<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"floorLevel\">Floor level<\/label>\r\n <select id=\"floorLevel\" name=\"floorLevel\" required>\r\n <option value=\"\" disabled selected>Select<\/option>\r\n <option>Ground floor<\/option>\r\n <option>1st floor<\/option>\r\n <option>2nd floor<\/option>\r\n <option>3rd floor<\/option>\r\n <option>4th floor<\/option>\r\n <option>5th floor<\/option>\r\n <option>6th floor<\/option>\r\n <option>7th floor<\/option>\r\n <option>8th floor<\/option>\r\n <option>9th floor<\/option>\r\n <option>10th floor<\/option>\r\n <option>Top floor<\/option>\r\n <option>Split-level<\/option>\r\n <option>N\/A<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"row two\">\r\n <div>\r\n <label for=\"builtArea\">Built area (m\u00b2)<\/label>\r\n <input id=\"builtArea\" name=\"builtArea\" type=\"number\" inputmode=\"numeric\" min=\"1\" step=\"1\" placeholder=\"116\" required \/>\r\n <\/div>\r\n <div>\r\n <label for=\"yearBuilt\">Year built<\/label>\r\n <input id=\"yearBuilt\" name=\"yearBuilt\" type=\"number\" inputmode=\"numeric\" min=\"1800\" max=\"2100\" step=\"1\" placeholder=\"2008\" required \/>\r\n <\/div>\r\n <\/div>\r\n <hr \/>\r\n \r\n <div id=\"bedsBaths\" class=\"row two hidden\" aria-hidden=\"true\">\r\n <div class=\"counter\">\r\n <label for=\"bedrooms\">Bedrooms<\/label>\r\n <button class=\"btn\" data-counter=\"bedrooms\" data-action=\"dec\" type=\"button\" aria-label=\"Decrease bedrooms\">\u2212<\/button>\r\n <input id=\"bedrooms\" name=\"bedrooms\" type=\"number\" value=\"0\" min=\"0\" max=\"12\" step=\"1\" readonly \/>\r\n <button class=\"btn\" data-counter=\"bedrooms\" data-action=\"inc\" type=\"button\" aria-label=\"Increase bedrooms\">+<\/button>\r\n <\/div>\r\n <div class=\"counter\">\r\n <label for=\"bathrooms\">Bathrooms<\/label>\r\n <button class=\"btn\" data-counter=\"bathrooms\" data-action=\"dec\" type=\"button\" aria-label=\"Decrease bathrooms\">\u2212<\/button>\r\n <input id=\"bathrooms\" name=\"bathrooms\" type=\"number\" value=\"0\" min=\"0\" max=\"12\" step=\"1\" readonly \/>\r\n <button class=\"btn\" data-counter=\"bathrooms\" data-action=\"inc\" type=\"button\" aria-label=\"Increase bathrooms\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"extrasBlock\" class=\"row hidden\" aria-hidden=\"true\">\r\n <div>\r\n <div class=\"section-title\">What features does it have?<\/div>\r\n <div class=\"chips\">\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"furnished\" name=\"features\" value=\"Furnished\"><label for=\"furnished\">Furnished<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"terrace\" name=\"features\" value=\"Terrace\"><label for=\"terrace\">Terrace<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"elevator\" name=\"features\" value=\"Elevator\"><label for=\"elevator\">Elevator<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"ac\" name=\"features\" value=\"A\/C\"><label for=\"ac\">A\/C<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"heating\" name=\"features\" value=\"Heating\"><label for=\"heating\">Heating<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"parking\" name=\"features\" value=\"Parking\"><label for=\"parking\">Parking<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"balcony\" name=\"features\" value=\"Balcony\"><label for=\"balcony\">Balcony<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"garden\" name=\"features\" value=\"Garden\"><label for=\"garden\">Garden<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"pool\" name=\"features\" value=\"Pool\"><label for=\"pool\">Pool<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"outdoor\" name=\"features\" value=\"Outdoor space\"><label for=\"outdoor\">Outdoor<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"doorman\" name=\"features\" value=\"Doorman\"><label for=\"doorman\">Doorman<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"license\" name=\"features\" value=\"Tourist license\"><label for=\"license\">Tourist license<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"accessible\" name=\"features\" value=\"Accessible\"><label for=\"accessible\">Accessible<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"smarthome\" name=\"features\" value=\"Smart home\"><label for=\"smarthome\">Smart home<\/label><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"conditionBlock\" class=\"row hidden\" aria-hidden=\"true\">\r\n <div>\r\n <div class=\"section-title\">What's the property condition?<\/div>\r\n <div class=\"cards\" id=\"conditionCards\">\r\n <label class=\"card\" data-value=\"Design finishes\">\r\n <input type=\"radio\" name=\"condition\" value=\"Design finishes\" \/>\r\n <img decoding=\"async\" alt=\"Design finishes\" src=\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png\" onerror=\"this.onerror=null;this.src='https:\/\/via.placeholder.com\/84x60?text=Photo';\" \/>\r\n <div>\r\n <div class=\"title\">Design finishes<\/div>\r\n <div class=\"desc\">New build or renovated in the last 5 years with high-quality, design-led finishes.<\/div>\r\n <\/div>\r\n <\/label>\r\n <label class=\"card\" data-value=\"Good finishes\">\r\n <input type=\"radio\" name=\"condition\" value=\"Good finishes\" \/>\r\n <img decoding=\"async\" alt=\"Good finishes\" src=\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/2.png\" onerror=\"this.onerror=null;this.src='https:\/\/via.placeholder.com\/84x60?text=Photo';\" \/>\r\n <div>\r\n <div class=\"title\">Good finishes<\/div>\r\n <div class=\"desc\">Recently updated with good materials; overall well cared for.<\/div>\r\n <\/div>\r\n <\/label>\r\n <label class=\"card\" data-value=\"Good overall condition\">\r\n <input type=\"radio\" name=\"condition\" value=\"Good overall condition\" \/>\r\n <img decoding=\"async\" alt=\"Good overall condition\" src=\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/3.png\" onerror=\"this.onerror=null;this.src='https:\/\/via.placeholder.com\/84x60?text=Photo';\" \/>\r\n <div>\r\n <div class=\"title\">Good overall condition<\/div>\r\n <div class=\"desc\">Move-in ready; some elements may show age but no immediate works required.<\/div>\r\n <\/div>\r\n <\/label>\r\n <label class=\"card\" data-value=\"Minor refurbishment needed\">\r\n <input type=\"radio\" name=\"condition\" value=\"Minor refurbishment needed\" \/>\r\n <img decoding=\"async\" alt=\"Minor refurbishment needed\" src=\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/4.png\" onerror=\"this.onerror=null;this.src='https:\/\/via.placeholder.com\/84x60?text=Photo';\" \/>\r\n <div>\r\n <div class=\"title\">Minor refurbishment needed<\/div>\r\n <div class=\"desc\">Some rooms need light updates or modernization.<\/div>\r\n <\/div>\r\n <\/label>\r\n <label class=\"card\" data-value=\"Full refurbishment needed\">\r\n <input type=\"radio\" name=\"condition\" value=\"Full refurbishment needed\" \/>\r\n <img decoding=\"async\" alt=\"Full refurbishment needed\" src=\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/5.png\" onerror=\"this.onerror=null;this.src='https:\/\/via.placeholder.com\/84x60?text=Photo';\" \/>\r\n <div>\r\n <div class=\"title\">Full refurbishment needed<\/div>\r\n <div class=\"desc\">Comprehensive renovation required across multiple areas and systems.<\/div>\r\n <\/div>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"actions\">\r\n <button id=\"continueBtn\" class=\"btn-primary\" type=\"button\" disabled>Continue<\/button>\r\n <\/div>\r\n <\/section>\r\n \r\n <section id=\"stepContact\" class=\"hidden\" aria-hidden=\"true\">\r\n <hr \/>\r\n <h2 class=\"section-title\" style=\"font-size:1.25rem\">Get your results by email<\/h2>\r\n <br>\r\n <div class=\"row\">\r\n <div>\r\n <label for=\"email\">Email address<\/label>\r\n <input id=\"email\" name=\"email\" type=\"text\" inputmode=\"email\" placeholder=\"you@example.com\" required \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row two\">\r\n <div>\r\n <label for=\"fullName\">Full name<\/label>\r\n <input id=\"fullName\" name=\"fullName\" type=\"text\" placeholder=\"John Smith\" \/>\r\n <\/div>\r\n <div>\r\n <label for=\"phone\">Phone<\/label>\r\n <div class=\"phone-group\">\r\n <select id=\"dialCode\" name=\"dialCode\">\r\n <option value=\"+34\">\ud83c\uddea\ud83c\uddf8 +34<\/option>\r\n <option value=\"+44\">\ud83c\uddec\ud83c\udde7 +44<\/option>\r\n <option value=\"+33\">\ud83c\uddeb\ud83c\uddf7 +33<\/option>\r\n <option value=\"+49\">\ud83c\udde9\ud83c\uddea +49<\/option>\r\n <option value=\"+39\">\ud83c\uddee\ud83c\uddf9 +39<\/option>\r\n <option value=\"+31\">\ud83c\uddf3\ud83c\uddf1 +31<\/option>\r\n <option value=\"+32\">\ud83c\udde7\ud83c\uddea +32<\/option>\r\n <option value=\"+47\">\ud83c\uddf3\ud83c\uddf4 +47<\/option>\r\n <option value=\"+46\">\ud83c\uddf8\ud83c\uddea +46<\/option>\r\n <option value=\"+45\">\ud83c\udde9\ud83c\uddf0 +45<\/option>\r\n <option value=\"+41\">\ud83c\udde8\ud83c\udded +41<\/option>\r\n <option value=\"+43\">\ud83c\udde6\ud83c\uddf9 +43<\/option>\r\n <option value=\"+351\">\ud83c\uddf5\ud83c\uddf9 +351<\/option>\r\n <option value=\"+353\">\ud83c\uddee\ud83c\uddea +353<\/option>\r\n <option value=\"+358\">\ud83c\uddeb\ud83c\uddee +358<\/option>\r\n <\/select>\r\n <input id=\"phone\" name=\"phone\" type=\"text\" placeholder=\"600 000 000\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row two\">\r\n <div>\r\n <label for=\"sellTimeline\">When do you plan to sell?<\/label>\r\n <select id=\"sellTimeline\" name=\"sellTimeline\">\r\n <option value=\"\" disabled selected>Select<\/option>\r\n <option>As soon as possible<\/option>\r\n <option>In the next few months<\/option>\r\n <option>No rush to sell<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label>Are you the property owner? (required)<\/label>\r\n <div class=\"pill-toggle\" role=\"radiogroup\" aria-label=\"Owner\">\r\n <button type=\"button\" data-owner=\"Yes\">Yes<\/button>\r\n <button type=\"button\" data-owner=\"No\">No<\/button>\r\n <\/div>\r\n <input type=\"hidden\" id=\"isOwner\" name=\"isOwner\" value=\"\" \/>\r\n <\/div>\r\n <\/div>\r\n <br>\r\n <div class=\"checkbox-row\">\r\n <div class=\"checkbox-line\">\r\n <input type=\"checkbox\" id=\"marketing\" name=\"marketing\" value=\"optin\">\r\n <label for=\"marketing\">I agree to receive updates and offers<\/label>\r\n <\/div>\r\n <div class=\"checkbox-line\">\r\n <input type=\"checkbox\" id=\"terms\" name=\"terms\" value=\"accepted\" required>\r\n <label for=\"terms\">I accept the <a href=\"#\" target=\"_blank\" rel=\"noopener\">legal terms<\/a><\/label>\r\n <\/div>\r\n <\/div>\r\n <br>\r\n <div class=\"actions\">\r\n <button id=\"submitBtn\" class=\"btn-primary\" type=\"button\">Get my results<\/button>\r\n <\/div>\r\n <\/section>\r\n \r\n <div class=\"progress\" aria-hidden=\"false\">\r\n <div class=\"progress-track\" id=\"progressTrack\">\r\n <div class=\"seg\" data-step=\"basics\"><span><\/span><\/div>\r\n <div class=\"seg\" data-step=\"rooms\"><span><\/span><\/div>\r\n <div class=\"seg\" data-step=\"features\"><span><\/span><\/div>\r\n <div class=\"seg\" data-step=\"contact\"><span><\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n \r\n <div class=\"container hidden\" id=\"thankYouPage\" aria-hidden=\"true\" data-home-url=\"\/\">\r\n <h1 id=\"tyTitle\">Thank you for trusting Costa Blanca Green<\/h1>\r\n <form aria-labelledby=\"tyTitle\">\r\n \r\n <div aria-live=\"polite\" style=\"display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);background:var(--brand-soft);border-radius:12px;margin-bottom:12px\">\r\n \r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M20 7L9 18l-5-5\" fill=\"none\" stroke=\"var(--brand)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>\r\n <div style=\"font-weight:600;color:var(--text)\">Submission received<\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <p>Your property details are currently being reviewed by our team.<\/p>\r\n <p>You will soon receive an email with the valuation and next steps.<\/p>\r\n <p>We truly appreciate your trust in <strong>Costa Blanca Green<\/strong> and look forward to helping you with your property needs.<\/p>\r\n <\/div>\r\n <hr>\r\n <div class=\"actions\">\r\n \r\n <a id=\"tyHomeBtn\" class=\"btn-primary\" href=\"\/\" aria-label=\"Return to homepage\">Return to homepage<\/a>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <script>\r\n (function(){\r\n const form = document.getElementById('valuationForm');\r\n if (!form || form.dataset.jsBound === 'true') return; \/\/ evita listeners duplicados (Elementor)\r\n form.dataset.jsBound = 'true';\r\n \r\n \/\/ Elements\r\n const bedsBaths = document.getElementById('bedsBaths');\r\n const extrasBlock = document.getElementById('extrasBlock');\r\n const conditionBlock = document.getElementById('conditionBlock');\r\n const continueBtn = document.getElementById('continueBtn');\r\n const stepBasics = document.getElementById('stepBasics');\r\n const stepContact = document.getElementById('stepContact');\r\n const progressTrack = document.getElementById('progressTrack');\r\n const submitBtn = document.getElementById('submitBtn');\r\n \r\n \/\/ New elements for final view\r\n const formContainer = document.getElementById('formContainer');\r\n const thankYouPage = document.getElementById('thankYouPage');\r\n \r\n \/\/ Required basics\r\n const requiredIds = ['area','propertyType','floorLevel','builtArea','yearBuilt'];\r\n let roomsInteracted = false;\r\n \r\n function toggle(el,on){ el.classList.toggle('hidden',!on); el.setAttribute('aria-hidden',String(!on)); }\r\n function basicsComplete(){\r\n const area = document.getElementById('area').value.trim().length >= 3;\r\n const type = document.getElementById('propertyType').value !== '';\r\n const floor = document.getElementById('floorLevel').value !== '';\r\n const built = Number(document.getElementById('builtArea').value) > 0;\r\n const year = Number(document.getElementById('yearBuilt').value) >= 1800;\r\n return area && type && floor && built && year;\r\n }\r\n \/\/ \u2705 (1) Condici\u00f3n: al menos 1 bedroom y 1 bathroom\r\n function hasMinRooms(){\r\n const b = Number(document.getElementById('bedrooms').value || 0);\r\n const ba = Number(document.getElementById('bathrooms').value || 0);\r\n return b >= 1 && ba >= 1;\r\n }\r\n function featuresReady(){\r\n return basicsComplete() && roomsInteracted && hasMinRooms();\r\n }\r\n function conditionChosen(){ return !!form.querySelector('input[name=\"condition\"]:checked'); }\r\n \r\n function updateProgress(){\r\n const steps = {\r\n basics: basicsComplete(),\r\n rooms: basicsComplete() && roomsInteracted,\r\n features: featuresReady(),\r\n contact: !stepContact.classList.contains('hidden')\r\n };\r\n [...progressTrack.children].forEach(seg=>{\r\n const key = seg.getAttribute('data-step');\r\n seg.classList.toggle('filled', !!steps[key]);\r\n });\r\n }\r\n \r\n function refreshUI(){\r\n const basics = basicsComplete();\r\n toggle(bedsBaths, basics);\r\n const showNext = featuresReady();\r\n toggle(extrasBlock, showNext);\r\n toggle(conditionBlock, showNext);\r\n continueBtn.disabled = !(basics && roomsInteracted && hasMinRooms() && conditionChosen());\r\n updateProgress();\r\n }\r\n \r\n requiredIds.forEach(id=>{\r\n const el = document.getElementById(id);\r\n el.addEventListener('input', refreshUI);\r\n el.addEventListener('change', refreshUI);\r\n });\r\n \r\n \/\/ Counters (+\/-)\r\n form.addEventListener('click', (e)=>{\r\n const btn = e.target.closest('[data-counter]');\r\n if (btn){\r\n const id = btn.getAttribute('data-counter');\r\n const action = btn.getAttribute('data-action');\r\n const input = document.getElementById(id);\r\n const min = Number(input.min || 0);\r\n const max = Number(input.max || 99);\r\n const step = Number(input.step || 1);\r\n let val = Number(input.value || 0);\r\n val += (action === 'inc' ? step : -step);\r\n input.value = Math.max(min, Math.min(max, val));\r\n roomsInteracted = true;\r\n refreshUI();\r\n return;\r\n }\r\n \r\n \/\/ Condition card selection (3) \u2192 pinta en verde\r\n const card = e.target.closest('#conditionCards .card');\r\n if (card){\r\n const input = card.querySelector('input[type=\"radio\"]');\r\n input.checked = true;\r\n form.querySelectorAll('#conditionCards .card').forEach(c=>c.classList.remove('selected'));\r\n card.classList.add('selected');\r\n refreshUI();\r\n return;\r\n }\r\n \r\n \/\/ Owner pill toggle\r\n const ownerBtn = e.target.closest('.pill-toggle button');\r\n if (ownerBtn){\r\n form.querySelectorAll('.pill-toggle button').forEach(b=>b.classList.remove('active'));\r\n ownerBtn.classList.add('active');\r\n document.getElementById('isOwner').value = ownerBtn.dataset.owner;\r\n }\r\n });\r\n \r\n \/\/ Auto N\/A floor\r\n const typeSelect = document.getElementById('propertyType');\r\n const floorSelect = document.getElementById('floorLevel');\r\n typeSelect.addEventListener('change', ()=>{\r\n const t = typeSelect.value;\r\n const independent = ['Villa \/ Chalet','Bungalow','Other'];\r\n if (independent.includes(t) && (!floorSelect.value || floorSelect.value === 'Select')){\r\n floorSelect.value = 'N\/A';\r\n }\r\n refreshUI();\r\n });\r\n \r\n \/\/ Continue \u2192 Contact\r\n continueBtn.addEventListener('click', ()=>{\r\n toggle(stepBasics,false);\r\n toggle(stepContact,true);\r\n updateProgress();\r\n window.scrollTo({ top: form.offsetTop, behavior: 'smooth' });\r\n });\r\n \r\n \/\/ Mostrar agradecimiento en la misma URL\r\n function showThankYou(){\r\n \/\/ Oculta el contenedor con t\u00edtulo + formulario\r\n formContainer.classList.add('hidden');\r\n formContainer.setAttribute('aria-hidden','true');\r\n \/\/ Muestra el bloque de agradecimiento\r\n thankYouPage.classList.remove('hidden');\r\n thankYouPage.setAttribute('aria-hidden','false');\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n \r\n \/\/ \u2705 SUBMIT \u2192 POST al Webhook de n8n en JSON\r\n submitBtn?.addEventListener('click', async ()=>{\r\n const owner = document.getElementById('isOwner').value;\r\n const email = document.getElementById('email').value.trim();\r\n const terms = document.getElementById('terms').checked;\r\n \r\n if (!owner){ alert('Please select if you are the owner (Yes\/No).'); return; }\r\n if (!email){ alert('Please enter your email.'); return; }\r\n if (!terms){ alert('Please accept the legal terms.'); return; }\r\n \r\n \/\/ Construir payload con todos los campos (incluye arrays para features)\r\n const data = new FormData(form);\r\n const payload = Object.fromEntries(data.entries());\r\n payload.features = data.getAll('features'); \/\/ m\u00faltiples checkboxes\r\n payload.phone = `${payload.dialCode || ''} ${payload.phone || ''}`.trim();\r\n payload.submittedAt = new Date().toISOString();\r\n payload.userAgent = navigator.userAgent;\r\n \r\n const url = 'https:\/\/nagicoder.app.n8n.cloud\/webhook\/da595533-0fb4-4b6a-bc85-48dbe947b9EN';\r\n \r\n \/\/ Estado de env\u00edo\r\n const originalText = submitBtn.textContent;\r\n submitBtn.disabled = true;\r\n submitBtn.textContent = 'Sending...';\r\n \r\n try {\r\n const res = await fetch(url, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json'\r\n },\r\n body: JSON.stringify(payload),\r\n mode: 'cors', \/\/ por si el endpoint lo permite\r\n keepalive: true\r\n });\r\n \r\n if (!res.ok) {\r\n const text = await res.text().catch(()=> '');\r\n throw new Error(`Request failed: ${res.status} ${res.statusText} ${text ? '\u2013 ' + text : ''}`);\r\n }\r\n \r\n \/\/ \u2705 Mostrar agradecimiento sin cambiar de URL\r\n showThankYou();\r\n \/\/ Opcional: form.reset(); \/\/ si quieres limpiar el formulario\r\n \r\n } catch (err) {\r\n console.error('Submit error \u2192', err);\r\n alert('There was an error sending your information. Please try again.');\r\n } finally {\r\n submitBtn.disabled = false;\r\n submitBtn.textContent = originalText;\r\n }\r\n });\r\n \/\/ Personaliza la URL del bot\u00f3n de inicio por JS\r\n function setThankYouHomeUrl(url){\r\n const btn = document.getElementById('tyHomeBtn');\r\n const container = document.getElementById('thankYouPage');\r\n if (btn && url) btn.setAttribute('href', url);\r\n if (container && url) container.setAttribute('data-home-url', url);\r\n }\r\n \r\n \/\/ Carga inicial leyendo el atributo data-home-url del contenedor\r\n (function initTY(){\r\n const container = document.getElementById('thankYouPage');\r\n const btn = document.getElementById('tyHomeBtn');\r\n if (container && btn){\r\n const url = container.getAttribute('data-home-url');\r\n if (url) btn.setAttribute('href', url);\r\n }\r\n })();\r\n \r\n \/\/ Init\r\n refreshUI();\r\n })();\r\n <\/script>\r\n <\/body>\r\n<\/html>\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>Property Valuation \u2013 Step 1 Your Free Property Valuation Located area Property type SelectApartment (Flat)PenthouseTownhouseVilla \/ ChaletBungalowOther Floor level SelectGround floor1st floor2nd floor3rd floor4th floor5th floor6th floor7th floor8th floor9th floor10th floorTop floorSplit-levelN\/A Built area (m\u00b2) Year built Bedrooms \u2212 + Bathrooms \u2212 + What features does it have? Furnished Terrace Elevator A\/C Heating Parking Balcony […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-712","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Your Free Costa Blanca Property Valuation - Costa Blanca Green Real Estate<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Your Free Costa Blanca Property Valuation - Costa Blanca Green Real Estate\" \/>\n<meta property=\"og:description\" content=\"Property Valuation \u2013 Step 1 Your Free Property Valuation Located area Property type SelectApartment (Flat)PenthouseTownhouseVilla \/ ChaletBungalowOther Floor level SelectGround floor1st floor2nd floor3rd floor4th floor5th floor6th floor7th floor8th floor9th floor10th floorTop floorSplit-levelN\/A Built area (m\u00b2) Year built Bedrooms \u2212 + Bathrooms \u2212 + What features does it have? Furnished Terrace Elevator A\/C Heating Parking Balcony […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/\" \/>\n<meta property=\"og:site_name\" content=\"Costa Blanca Green Real Estate\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-10T09:49:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/\",\"url\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/\",\"name\":\"Your Free Costa Blanca Property Valuation - Costa Blanca Green Real Estate\",\"isPartOf\":{\"@id\":\"https:\/\/costablancagreen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png\",\"datePublished\":\"2025-08-26T09:21:55+00:00\",\"dateModified\":\"2025-09-10T09:49:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#primaryimage\",\"url\":\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png\",\"contentUrl\":\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/costablancagreen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Your Free Costa Blanca Property Valuation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/costablancagreen.com\/#website\",\"url\":\"https:\/\/costablancagreen.com\/\",\"name\":\"Costa Blanca Green Real Estate\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/costablancagreen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/costablancagreen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/costablancagreen.com\/#organization\",\"name\":\"Costa Blanca Green Real Estate\",\"url\":\"https:\/\/costablancagreen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/costablancagreen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2022\/12\/logo.svg\",\"contentUrl\":\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2022\/12\/logo.svg\",\"width\":300,\"height\":94,\"caption\":\"Costa Blanca Green Real Estate\"},\"image\":{\"@id\":\"https:\/\/costablancagreen.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Your Free Costa Blanca Property Valuation - Costa Blanca Green Real Estate","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/","og_locale":"nl_NL","og_type":"article","og_title":"Your Free Costa Blanca Property Valuation - Costa Blanca Green Real Estate","og_description":"Property Valuation \u2013 Step 1 Your Free Property Valuation Located area Property type SelectApartment (Flat)PenthouseTownhouseVilla \/ ChaletBungalowOther Floor level SelectGround floor1st floor2nd floor3rd floor4th floor5th floor6th floor7th floor8th floor9th floor10th floorTop floorSplit-levelN\/A Built area (m\u00b2) Year built Bedrooms \u2212 + Bathrooms \u2212 + What features does it have? Furnished Terrace Elevator A\/C Heating Parking Balcony […]","og_url":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/","og_site_name":"Costa Blanca Green Real Estate","article_modified_time":"2025-09-10T09:49:01+00:00","og_image":[{"url":"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"1 minuut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/","url":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/","name":"Your Free Costa Blanca Property Valuation - Costa Blanca Green Real Estate","isPartOf":{"@id":"https:\/\/costablancagreen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#primaryimage"},"image":{"@id":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#primaryimage"},"thumbnailUrl":"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png","datePublished":"2025-08-26T09:21:55+00:00","dateModified":"2025-09-10T09:49:01+00:00","breadcrumb":{"@id":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#primaryimage","url":"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png","contentUrl":"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/costablancagreen.com\/"},{"@type":"ListItem","position":2,"name":"Your Free Costa Blanca Property Valuation"}]},{"@type":"WebSite","@id":"https:\/\/costablancagreen.com\/#website","url":"https:\/\/costablancagreen.com\/","name":"Costa Blanca Green Real Estate","description":"","publisher":{"@id":"https:\/\/costablancagreen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/costablancagreen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/costablancagreen.com\/#organization","name":"Costa Blanca Green Real Estate","url":"https:\/\/costablancagreen.com\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/costablancagreen.com\/#\/schema\/logo\/image\/","url":"https:\/\/costablancagreen.com\/wp-content\/uploads\/2022\/12\/logo.svg","contentUrl":"https:\/\/costablancagreen.com\/wp-content\/uploads\/2022\/12\/logo.svg","width":300,"height":94,"caption":"Costa Blanca Green Real Estate"},"image":{"@id":"https:\/\/costablancagreen.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/pages\/712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/comments?post=712"}],"version-history":[{"count":2,"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/pages\/712\/revisions"}],"predecessor-version":[{"id":720,"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/pages\/712\/revisions\/720"}],"wp:attachment":[{"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/media?parent=712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t
\r\n \r\n \r\n \r\n Property Valuation \u2013 Step 1<\/title>\r\n <style>\r\n :root {\r\n --bg:#ffffff;\r\n --text:#0f172a;\r\n --muted:#64748b;\r\n --line:#e2e8f0;\r\n --primary:#111827;\r\n --ring:#a3e3ff;\r\n --chip-bg:#f8fafc;\r\n --chip-on:#0ea5e9; \/* (ya no lo usamos para condition; mantenido por compatibilidad) *\/\r\n --card-bg:#f1f5f9;\r\n --brand:#54A847; \/* verde de marca *\/\r\n --brand-soft:#eaf6ec; \/* verde suave para fondo seleccionado *\/\r\n }\r\n *{box-sizing:border-box}\r\n html,body{\r\n margin:0; padding:0;\r\n background:var(--bg); color:var(--text);\r\n font:16px\/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\";\r\n }\r\n .container{max-width:880px;margin:40px auto;padding:0 16px 100px}\r\n h1{font-size:1.35rem;margin:0 0 18px;font-weight:600}\r\n form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 6px 24px rgba(15,23,42,.05);position:relative}\r\n .section-title{font-weight:600;margin:18px 0 10px}\r\n .row{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}\r\n @media (min-width:720px){.row.two{grid-template-columns:1fr 1fr}}\r\n label{display:block;font-size:.9rem;margin:2px 0 6px;color:var(--muted)}\r\n \/* Inputs *\/\r\n input[type=\"text\"],input[type=\"number\"],select{\r\n width:100%;appearance:none;background:#fff;\r\n border:1px solid var(--line);border-radius:12px;\r\n padding:14px;outline:none;transition:box-shadow .2s,border-color .2s\r\n }\r\n input::placeholder{color:#94a3b8}\r\n input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(84,168,71,.25)}\r\n \/* Quitar flechas nativas de number *\/\r\n input[type=number]::-webkit-outer-spin-button,\r\n input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\r\n input[type=number]{-moz-appearance:textfield;appearance:textfield}\r\n hr{border:none;border-top:1px solid var(--line);margin:16px 0}\r\n \/* Contadores en l\u00ednea *\/\r\n .counter{display:flex;align-items:center;gap:10px}\r\n .counter>label{margin:0 10px 0 0;white-space:nowrap;font-weight:600;color:var(--muted)}\r\n .counter .btn{\r\n height:40px;width:40px;border-radius:8px;\r\n border:1px solid var(--line);background:#fff;color:#000;cursor:pointer;\r\n font-size:22px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center\r\n }\r\n .counter input{text-align:center;border-radius:8px;height:40px;min-width:70px}\r\n .counter .btn:active{transform:translateY(1px)}\r\n .hidden{display:none}\r\n \/* Chips (Features) *\/\r\n .chips{display:flex;flex-wrap:wrap;gap:10px}\r\n .chip{position:relative}\r\n .chip input{position:absolute;opacity:0;pointer-events:none}\r\n .chip label{\r\n cursor:pointer;user-select:none;padding:10px 14px;border-radius:12px;\r\n border:1px solid var(--line);background:var(--chip-bg);color:var(--text);\r\n transition:border-color .2s,background .2s,transform .02s\r\n }\r\n .chip input:checked+label{border-color:var(--brand);background:var(--brand-soft)}\r\n .chip label:active{transform:translateY(1px)}\r\n \/* Condition cards *\/\r\n .cards{display:grid;gap:12px}\r\n .card{\r\n display:grid;grid-template-columns:84px 1fr;gap:14px;padding:12px;\r\n border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;align-items:center\r\n }\r\n .card:hover{border-color:var(--brand)}\r\n .card input{display:none}\r\n \/* \ud83d\uddbc\ufe0f Las im\u00e1genes se ajustan solas. SOLO pon el enlace en src *\/\r\n .card img{width:84px;height:60px;object-fit:cover;border-radius:10px;background:var(--card-bg)}\r\n .card .title{font-weight:600;margin-bottom:4px}\r\n .card .desc{color:var(--muted);font-size:.92rem}\r\n \/* (3) Selecci\u00f3n en verde como los chips *\/\r\n .card.selected{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px #e2f3e6 inset}\r\n .actions{display:flex;gap:12px;justify-content:center;margin-top:18px}\r\n .btn-primary{padding:12px 18px;border:none;border-radius:12px;background:var(--brand);color:#fff;cursor:pointer;font-weight:600}\r\n .btn-primary:hover{background:#46923d}\r\n .btn-primary:disabled{opacity:.5;cursor:not-allowed}\r\n \/* Progress *\/\r\n .progress{position:sticky;z-index:5;bottom:0;left:0;right:0;margin-top:26px;background:#fff;padding:10px 0 0;box-shadow:0 -6px 12px rgba(15,23,42,.04)}\r\n .progress-track{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;height:8px}\r\n .progress .seg{border-radius:999px;background:#e5e7eb;overflow:hidden}\r\n .progress .seg>span{display:block;height:100%;width:0;background:var(--primary);transition:width .35s ease}\r\n .progress .seg.filled>span{width:100%}\r\n \/* Phone + owner *\/\r\n .phone-group{display:grid;grid-template-columns:120px 1fr;gap:8px}\r\n .pill-toggle{display:inline-flex;gap:8px;margin-top:6px}\r\n .pill-toggle button{border:1px solid var(--line);background:#fff;color:#000;padding:10px 16px;border-radius:12px;cursor:pointer;font-weight:600}\r\n .pill-toggle button.active{background:var(--brand-soft);border-color:var(--brand)}\r\n .checkbox-line{display:flex;align-items:center;gap:10px;margin:6px 0}\r\n .checkbox-line input[type=\"checkbox\"]{width:18px;height:18px}\r\n .checkbox-line label a{text-decoration:underline}\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <div class=\"container\" id=\"formContainer\">\r\n <h1>Your Free Property Valuation<\/h1>\r\n <form id=\"valuationForm\" novalidate>\r\n \r\n <section id=\"stepBasics\">\r\n \r\n <div class=\"row\">\r\n <div>\r\n <label for=\"area\">Located area<\/label>\r\n <input id=\"area\" name=\"area\" type=\"text\" placeholder=\"La Nucia, Plaza del Sol\" autocomplete=\"address-line1\" required \/>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"row two\">\r\n <div>\r\n <label for=\"propertyType\">Property type<\/label>\r\n <select id=\"propertyType\" name=\"propertyType\" required>\r\n <option value=\"\" disabled selected>Select<\/option>\r\n <option>Apartment (Flat)<\/option>\r\n <option>Penthouse<\/option>\r\n <option>Townhouse<\/option>\r\n <option>Villa \/ Chalet<\/option>\r\n <option>Bungalow<\/option>\r\n <option>Other<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"floorLevel\">Floor level<\/label>\r\n <select id=\"floorLevel\" name=\"floorLevel\" required>\r\n <option value=\"\" disabled selected>Select<\/option>\r\n <option>Ground floor<\/option>\r\n <option>1st floor<\/option>\r\n <option>2nd floor<\/option>\r\n <option>3rd floor<\/option>\r\n <option>4th floor<\/option>\r\n <option>5th floor<\/option>\r\n <option>6th floor<\/option>\r\n <option>7th floor<\/option>\r\n <option>8th floor<\/option>\r\n <option>9th floor<\/option>\r\n <option>10th floor<\/option>\r\n <option>Top floor<\/option>\r\n <option>Split-level<\/option>\r\n <option>N\/A<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"row two\">\r\n <div>\r\n <label for=\"builtArea\">Built area (m\u00b2)<\/label>\r\n <input id=\"builtArea\" name=\"builtArea\" type=\"number\" inputmode=\"numeric\" min=\"1\" step=\"1\" placeholder=\"116\" required \/>\r\n <\/div>\r\n <div>\r\n <label for=\"yearBuilt\">Year built<\/label>\r\n <input id=\"yearBuilt\" name=\"yearBuilt\" type=\"number\" inputmode=\"numeric\" min=\"1800\" max=\"2100\" step=\"1\" placeholder=\"2008\" required \/>\r\n <\/div>\r\n <\/div>\r\n <hr \/>\r\n \r\n <div id=\"bedsBaths\" class=\"row two hidden\" aria-hidden=\"true\">\r\n <div class=\"counter\">\r\n <label for=\"bedrooms\">Bedrooms<\/label>\r\n <button class=\"btn\" data-counter=\"bedrooms\" data-action=\"dec\" type=\"button\" aria-label=\"Decrease bedrooms\">\u2212<\/button>\r\n <input id=\"bedrooms\" name=\"bedrooms\" type=\"number\" value=\"0\" min=\"0\" max=\"12\" step=\"1\" readonly \/>\r\n <button class=\"btn\" data-counter=\"bedrooms\" data-action=\"inc\" type=\"button\" aria-label=\"Increase bedrooms\">+<\/button>\r\n <\/div>\r\n <div class=\"counter\">\r\n <label for=\"bathrooms\">Bathrooms<\/label>\r\n <button class=\"btn\" data-counter=\"bathrooms\" data-action=\"dec\" type=\"button\" aria-label=\"Decrease bathrooms\">\u2212<\/button>\r\n <input id=\"bathrooms\" name=\"bathrooms\" type=\"number\" value=\"0\" min=\"0\" max=\"12\" step=\"1\" readonly \/>\r\n <button class=\"btn\" data-counter=\"bathrooms\" data-action=\"inc\" type=\"button\" aria-label=\"Increase bathrooms\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"extrasBlock\" class=\"row hidden\" aria-hidden=\"true\">\r\n <div>\r\n <div class=\"section-title\">What features does it have?<\/div>\r\n <div class=\"chips\">\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"furnished\" name=\"features\" value=\"Furnished\"><label for=\"furnished\">Furnished<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"terrace\" name=\"features\" value=\"Terrace\"><label for=\"terrace\">Terrace<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"elevator\" name=\"features\" value=\"Elevator\"><label for=\"elevator\">Elevator<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"ac\" name=\"features\" value=\"A\/C\"><label for=\"ac\">A\/C<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"heating\" name=\"features\" value=\"Heating\"><label for=\"heating\">Heating<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"parking\" name=\"features\" value=\"Parking\"><label for=\"parking\">Parking<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"balcony\" name=\"features\" value=\"Balcony\"><label for=\"balcony\">Balcony<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"garden\" name=\"features\" value=\"Garden\"><label for=\"garden\">Garden<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"pool\" name=\"features\" value=\"Pool\"><label for=\"pool\">Pool<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"outdoor\" name=\"features\" value=\"Outdoor space\"><label for=\"outdoor\">Outdoor<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"doorman\" name=\"features\" value=\"Doorman\"><label for=\"doorman\">Doorman<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"license\" name=\"features\" value=\"Tourist license\"><label for=\"license\">Tourist license<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"accessible\" name=\"features\" value=\"Accessible\"><label for=\"accessible\">Accessible<\/label><\/div>\r\n <div class=\"chip\"><input type=\"checkbox\" id=\"smarthome\" name=\"features\" value=\"Smart home\"><label for=\"smarthome\">Smart home<\/label><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"conditionBlock\" class=\"row hidden\" aria-hidden=\"true\">\r\n <div>\r\n <div class=\"section-title\">What's the property condition?<\/div>\r\n <div class=\"cards\" id=\"conditionCards\">\r\n <label class=\"card\" data-value=\"Design finishes\">\r\n <input type=\"radio\" name=\"condition\" value=\"Design finishes\" \/>\r\n <img decoding=\"async\" alt=\"Design finishes\" src=\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png\" onerror=\"this.onerror=null;this.src='https:\/\/via.placeholder.com\/84x60?text=Photo';\" \/>\r\n <div>\r\n <div class=\"title\">Design finishes<\/div>\r\n <div class=\"desc\">New build or renovated in the last 5 years with high-quality, design-led finishes.<\/div>\r\n <\/div>\r\n <\/label>\r\n <label class=\"card\" data-value=\"Good finishes\">\r\n <input type=\"radio\" name=\"condition\" value=\"Good finishes\" \/>\r\n <img decoding=\"async\" alt=\"Good finishes\" src=\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/2.png\" onerror=\"this.onerror=null;this.src='https:\/\/via.placeholder.com\/84x60?text=Photo';\" \/>\r\n <div>\r\n <div class=\"title\">Good finishes<\/div>\r\n <div class=\"desc\">Recently updated with good materials; overall well cared for.<\/div>\r\n <\/div>\r\n <\/label>\r\n <label class=\"card\" data-value=\"Good overall condition\">\r\n <input type=\"radio\" name=\"condition\" value=\"Good overall condition\" \/>\r\n <img decoding=\"async\" alt=\"Good overall condition\" src=\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/3.png\" onerror=\"this.onerror=null;this.src='https:\/\/via.placeholder.com\/84x60?text=Photo';\" \/>\r\n <div>\r\n <div class=\"title\">Good overall condition<\/div>\r\n <div class=\"desc\">Move-in ready; some elements may show age but no immediate works required.<\/div>\r\n <\/div>\r\n <\/label>\r\n <label class=\"card\" data-value=\"Minor refurbishment needed\">\r\n <input type=\"radio\" name=\"condition\" value=\"Minor refurbishment needed\" \/>\r\n <img decoding=\"async\" alt=\"Minor refurbishment needed\" src=\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/4.png\" onerror=\"this.onerror=null;this.src='https:\/\/via.placeholder.com\/84x60?text=Photo';\" \/>\r\n <div>\r\n <div class=\"title\">Minor refurbishment needed<\/div>\r\n <div class=\"desc\">Some rooms need light updates or modernization.<\/div>\r\n <\/div>\r\n <\/label>\r\n <label class=\"card\" data-value=\"Full refurbishment needed\">\r\n <input type=\"radio\" name=\"condition\" value=\"Full refurbishment needed\" \/>\r\n <img decoding=\"async\" alt=\"Full refurbishment needed\" src=\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/5.png\" onerror=\"this.onerror=null;this.src='https:\/\/via.placeholder.com\/84x60?text=Photo';\" \/>\r\n <div>\r\n <div class=\"title\">Full refurbishment needed<\/div>\r\n <div class=\"desc\">Comprehensive renovation required across multiple areas and systems.<\/div>\r\n <\/div>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"actions\">\r\n <button id=\"continueBtn\" class=\"btn-primary\" type=\"button\" disabled>Continue<\/button>\r\n <\/div>\r\n <\/section>\r\n \r\n <section id=\"stepContact\" class=\"hidden\" aria-hidden=\"true\">\r\n <hr \/>\r\n <h2 class=\"section-title\" style=\"font-size:1.25rem\">Get your results by email<\/h2>\r\n <br>\r\n <div class=\"row\">\r\n <div>\r\n <label for=\"email\">Email address<\/label>\r\n <input id=\"email\" name=\"email\" type=\"text\" inputmode=\"email\" placeholder=\"you@example.com\" required \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row two\">\r\n <div>\r\n <label for=\"fullName\">Full name<\/label>\r\n <input id=\"fullName\" name=\"fullName\" type=\"text\" placeholder=\"John Smith\" \/>\r\n <\/div>\r\n <div>\r\n <label for=\"phone\">Phone<\/label>\r\n <div class=\"phone-group\">\r\n <select id=\"dialCode\" name=\"dialCode\">\r\n <option value=\"+34\">\ud83c\uddea\ud83c\uddf8 +34<\/option>\r\n <option value=\"+44\">\ud83c\uddec\ud83c\udde7 +44<\/option>\r\n <option value=\"+33\">\ud83c\uddeb\ud83c\uddf7 +33<\/option>\r\n <option value=\"+49\">\ud83c\udde9\ud83c\uddea +49<\/option>\r\n <option value=\"+39\">\ud83c\uddee\ud83c\uddf9 +39<\/option>\r\n <option value=\"+31\">\ud83c\uddf3\ud83c\uddf1 +31<\/option>\r\n <option value=\"+32\">\ud83c\udde7\ud83c\uddea +32<\/option>\r\n <option value=\"+47\">\ud83c\uddf3\ud83c\uddf4 +47<\/option>\r\n <option value=\"+46\">\ud83c\uddf8\ud83c\uddea +46<\/option>\r\n <option value=\"+45\">\ud83c\udde9\ud83c\uddf0 +45<\/option>\r\n <option value=\"+41\">\ud83c\udde8\ud83c\udded +41<\/option>\r\n <option value=\"+43\">\ud83c\udde6\ud83c\uddf9 +43<\/option>\r\n <option value=\"+351\">\ud83c\uddf5\ud83c\uddf9 +351<\/option>\r\n <option value=\"+353\">\ud83c\uddee\ud83c\uddea +353<\/option>\r\n <option value=\"+358\">\ud83c\uddeb\ud83c\uddee +358<\/option>\r\n <\/select>\r\n <input id=\"phone\" name=\"phone\" type=\"text\" placeholder=\"600 000 000\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row two\">\r\n <div>\r\n <label for=\"sellTimeline\">When do you plan to sell?<\/label>\r\n <select id=\"sellTimeline\" name=\"sellTimeline\">\r\n <option value=\"\" disabled selected>Select<\/option>\r\n <option>As soon as possible<\/option>\r\n <option>In the next few months<\/option>\r\n <option>No rush to sell<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label>Are you the property owner? (required)<\/label>\r\n <div class=\"pill-toggle\" role=\"radiogroup\" aria-label=\"Owner\">\r\n <button type=\"button\" data-owner=\"Yes\">Yes<\/button>\r\n <button type=\"button\" data-owner=\"No\">No<\/button>\r\n <\/div>\r\n <input type=\"hidden\" id=\"isOwner\" name=\"isOwner\" value=\"\" \/>\r\n <\/div>\r\n <\/div>\r\n <br>\r\n <div class=\"checkbox-row\">\r\n <div class=\"checkbox-line\">\r\n <input type=\"checkbox\" id=\"marketing\" name=\"marketing\" value=\"optin\">\r\n <label for=\"marketing\">I agree to receive updates and offers<\/label>\r\n <\/div>\r\n <div class=\"checkbox-line\">\r\n <input type=\"checkbox\" id=\"terms\" name=\"terms\" value=\"accepted\" required>\r\n <label for=\"terms\">I accept the <a href=\"#\" target=\"_blank\" rel=\"noopener\">legal terms<\/a><\/label>\r\n <\/div>\r\n <\/div>\r\n <br>\r\n <div class=\"actions\">\r\n <button id=\"submitBtn\" class=\"btn-primary\" type=\"button\">Get my results<\/button>\r\n <\/div>\r\n <\/section>\r\n \r\n <div class=\"progress\" aria-hidden=\"false\">\r\n <div class=\"progress-track\" id=\"progressTrack\">\r\n <div class=\"seg\" data-step=\"basics\"><span><\/span><\/div>\r\n <div class=\"seg\" data-step=\"rooms\"><span><\/span><\/div>\r\n <div class=\"seg\" data-step=\"features\"><span><\/span><\/div>\r\n <div class=\"seg\" data-step=\"contact\"><span><\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n \r\n <div class=\"container hidden\" id=\"thankYouPage\" aria-hidden=\"true\" data-home-url=\"\/\">\r\n <h1 id=\"tyTitle\">Thank you for trusting Costa Blanca Green<\/h1>\r\n <form aria-labelledby=\"tyTitle\">\r\n \r\n <div aria-live=\"polite\" style=\"display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);background:var(--brand-soft);border-radius:12px;margin-bottom:12px\">\r\n \r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M20 7L9 18l-5-5\" fill=\"none\" stroke=\"var(--brand)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>\r\n <div style=\"font-weight:600;color:var(--text)\">Submission received<\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <p>Your property details are currently being reviewed by our team.<\/p>\r\n <p>You will soon receive an email with the valuation and next steps.<\/p>\r\n <p>We truly appreciate your trust in <strong>Costa Blanca Green<\/strong> and look forward to helping you with your property needs.<\/p>\r\n <\/div>\r\n <hr>\r\n <div class=\"actions\">\r\n \r\n <a id=\"tyHomeBtn\" class=\"btn-primary\" href=\"\/\" aria-label=\"Return to homepage\">Return to homepage<\/a>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <script>\r\n (function(){\r\n const form = document.getElementById('valuationForm');\r\n if (!form || form.dataset.jsBound === 'true') return; \/\/ evita listeners duplicados (Elementor)\r\n form.dataset.jsBound = 'true';\r\n \r\n \/\/ Elements\r\n const bedsBaths = document.getElementById('bedsBaths');\r\n const extrasBlock = document.getElementById('extrasBlock');\r\n const conditionBlock = document.getElementById('conditionBlock');\r\n const continueBtn = document.getElementById('continueBtn');\r\n const stepBasics = document.getElementById('stepBasics');\r\n const stepContact = document.getElementById('stepContact');\r\n const progressTrack = document.getElementById('progressTrack');\r\n const submitBtn = document.getElementById('submitBtn');\r\n \r\n \/\/ New elements for final view\r\n const formContainer = document.getElementById('formContainer');\r\n const thankYouPage = document.getElementById('thankYouPage');\r\n \r\n \/\/ Required basics\r\n const requiredIds = ['area','propertyType','floorLevel','builtArea','yearBuilt'];\r\n let roomsInteracted = false;\r\n \r\n function toggle(el,on){ el.classList.toggle('hidden',!on); el.setAttribute('aria-hidden',String(!on)); }\r\n function basicsComplete(){\r\n const area = document.getElementById('area').value.trim().length >= 3;\r\n const type = document.getElementById('propertyType').value !== '';\r\n const floor = document.getElementById('floorLevel').value !== '';\r\n const built = Number(document.getElementById('builtArea').value) > 0;\r\n const year = Number(document.getElementById('yearBuilt').value) >= 1800;\r\n return area && type && floor && built && year;\r\n }\r\n \/\/ \u2705 (1) Condici\u00f3n: al menos 1 bedroom y 1 bathroom\r\n function hasMinRooms(){\r\n const b = Number(document.getElementById('bedrooms').value || 0);\r\n const ba = Number(document.getElementById('bathrooms').value || 0);\r\n return b >= 1 && ba >= 1;\r\n }\r\n function featuresReady(){\r\n return basicsComplete() && roomsInteracted && hasMinRooms();\r\n }\r\n function conditionChosen(){ return !!form.querySelector('input[name=\"condition\"]:checked'); }\r\n \r\n function updateProgress(){\r\n const steps = {\r\n basics: basicsComplete(),\r\n rooms: basicsComplete() && roomsInteracted,\r\n features: featuresReady(),\r\n contact: !stepContact.classList.contains('hidden')\r\n };\r\n [...progressTrack.children].forEach(seg=>{\r\n const key = seg.getAttribute('data-step');\r\n seg.classList.toggle('filled', !!steps[key]);\r\n });\r\n }\r\n \r\n function refreshUI(){\r\n const basics = basicsComplete();\r\n toggle(bedsBaths, basics);\r\n const showNext = featuresReady();\r\n toggle(extrasBlock, showNext);\r\n toggle(conditionBlock, showNext);\r\n continueBtn.disabled = !(basics && roomsInteracted && hasMinRooms() && conditionChosen());\r\n updateProgress();\r\n }\r\n \r\n requiredIds.forEach(id=>{\r\n const el = document.getElementById(id);\r\n el.addEventListener('input', refreshUI);\r\n el.addEventListener('change', refreshUI);\r\n });\r\n \r\n \/\/ Counters (+\/-)\r\n form.addEventListener('click', (e)=>{\r\n const btn = e.target.closest('[data-counter]');\r\n if (btn){\r\n const id = btn.getAttribute('data-counter');\r\n const action = btn.getAttribute('data-action');\r\n const input = document.getElementById(id);\r\n const min = Number(input.min || 0);\r\n const max = Number(input.max || 99);\r\n const step = Number(input.step || 1);\r\n let val = Number(input.value || 0);\r\n val += (action === 'inc' ? step : -step);\r\n input.value = Math.max(min, Math.min(max, val));\r\n roomsInteracted = true;\r\n refreshUI();\r\n return;\r\n }\r\n \r\n \/\/ Condition card selection (3) \u2192 pinta en verde\r\n const card = e.target.closest('#conditionCards .card');\r\n if (card){\r\n const input = card.querySelector('input[type=\"radio\"]');\r\n input.checked = true;\r\n form.querySelectorAll('#conditionCards .card').forEach(c=>c.classList.remove('selected'));\r\n card.classList.add('selected');\r\n refreshUI();\r\n return;\r\n }\r\n \r\n \/\/ Owner pill toggle\r\n const ownerBtn = e.target.closest('.pill-toggle button');\r\n if (ownerBtn){\r\n form.querySelectorAll('.pill-toggle button').forEach(b=>b.classList.remove('active'));\r\n ownerBtn.classList.add('active');\r\n document.getElementById('isOwner').value = ownerBtn.dataset.owner;\r\n }\r\n });\r\n \r\n \/\/ Auto N\/A floor\r\n const typeSelect = document.getElementById('propertyType');\r\n const floorSelect = document.getElementById('floorLevel');\r\n typeSelect.addEventListener('change', ()=>{\r\n const t = typeSelect.value;\r\n const independent = ['Villa \/ Chalet','Bungalow','Other'];\r\n if (independent.includes(t) && (!floorSelect.value || floorSelect.value === 'Select')){\r\n floorSelect.value = 'N\/A';\r\n }\r\n refreshUI();\r\n });\r\n \r\n \/\/ Continue \u2192 Contact\r\n continueBtn.addEventListener('click', ()=>{\r\n toggle(stepBasics,false);\r\n toggle(stepContact,true);\r\n updateProgress();\r\n window.scrollTo({ top: form.offsetTop, behavior: 'smooth' });\r\n });\r\n \r\n \/\/ Mostrar agradecimiento en la misma URL\r\n function showThankYou(){\r\n \/\/ Oculta el contenedor con t\u00edtulo + formulario\r\n formContainer.classList.add('hidden');\r\n formContainer.setAttribute('aria-hidden','true');\r\n \/\/ Muestra el bloque de agradecimiento\r\n thankYouPage.classList.remove('hidden');\r\n thankYouPage.setAttribute('aria-hidden','false');\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n \r\n \/\/ \u2705 SUBMIT \u2192 POST al Webhook de n8n en JSON\r\n submitBtn?.addEventListener('click', async ()=>{\r\n const owner = document.getElementById('isOwner').value;\r\n const email = document.getElementById('email').value.trim();\r\n const terms = document.getElementById('terms').checked;\r\n \r\n if (!owner){ alert('Please select if you are the owner (Yes\/No).'); return; }\r\n if (!email){ alert('Please enter your email.'); return; }\r\n if (!terms){ alert('Please accept the legal terms.'); return; }\r\n \r\n \/\/ Construir payload con todos los campos (incluye arrays para features)\r\n const data = new FormData(form);\r\n const payload = Object.fromEntries(data.entries());\r\n payload.features = data.getAll('features'); \/\/ m\u00faltiples checkboxes\r\n payload.phone = `${payload.dialCode || ''} ${payload.phone || ''}`.trim();\r\n payload.submittedAt = new Date().toISOString();\r\n payload.userAgent = navigator.userAgent;\r\n \r\n const url = 'https:\/\/nagicoder.app.n8n.cloud\/webhook\/da595533-0fb4-4b6a-bc85-48dbe947b9EN';\r\n \r\n \/\/ Estado de env\u00edo\r\n const originalText = submitBtn.textContent;\r\n submitBtn.disabled = true;\r\n submitBtn.textContent = 'Sending...';\r\n \r\n try {\r\n const res = await fetch(url, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json'\r\n },\r\n body: JSON.stringify(payload),\r\n mode: 'cors', \/\/ por si el endpoint lo permite\r\n keepalive: true\r\n });\r\n \r\n if (!res.ok) {\r\n const text = await res.text().catch(()=> '');\r\n throw new Error(`Request failed: ${res.status} ${res.statusText} ${text ? '\u2013 ' + text : ''}`);\r\n }\r\n \r\n \/\/ \u2705 Mostrar agradecimiento sin cambiar de URL\r\n showThankYou();\r\n \/\/ Opcional: form.reset(); \/\/ si quieres limpiar el formulario\r\n \r\n } catch (err) {\r\n console.error('Submit error \u2192', err);\r\n alert('There was an error sending your information. Please try again.');\r\n } finally {\r\n submitBtn.disabled = false;\r\n submitBtn.textContent = originalText;\r\n }\r\n });\r\n \/\/ Personaliza la URL del bot\u00f3n de inicio por JS\r\n function setThankYouHomeUrl(url){\r\n const btn = document.getElementById('tyHomeBtn');\r\n const container = document.getElementById('thankYouPage');\r\n if (btn && url) btn.setAttribute('href', url);\r\n if (container && url) container.setAttribute('data-home-url', url);\r\n }\r\n \r\n \/\/ Carga inicial leyendo el atributo data-home-url del contenedor\r\n (function initTY(){\r\n const container = document.getElementById('thankYouPage');\r\n const btn = document.getElementById('tyHomeBtn');\r\n if (container && btn){\r\n const url = container.getAttribute('data-home-url');\r\n if (url) btn.setAttribute('href', url);\r\n }\r\n })();\r\n \r\n \/\/ Init\r\n refreshUI();\r\n })();\r\n <\/script>\r\n <\/body>\r\n<\/html>\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>Property Valuation \u2013 Step 1 Your Free Property Valuation Located area Property type SelectApartment (Flat)PenthouseTownhouseVilla \/ ChaletBungalowOther Floor level SelectGround floor1st floor2nd floor3rd floor4th floor5th floor6th floor7th floor8th floor9th floor10th floorTop floorSplit-levelN\/A Built area (m\u00b2) Year built Bedrooms \u2212 + Bathrooms \u2212 + What features does it have? Furnished Terrace Elevator A\/C Heating Parking Balcony […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-712","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Your Free Costa Blanca Property Valuation - Costa Blanca Green Real Estate<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Your Free Costa Blanca Property Valuation - Costa Blanca Green Real Estate\" \/>\n<meta property=\"og:description\" content=\"Property Valuation \u2013 Step 1 Your Free Property Valuation Located area Property type SelectApartment (Flat)PenthouseTownhouseVilla \/ ChaletBungalowOther Floor level SelectGround floor1st floor2nd floor3rd floor4th floor5th floor6th floor7th floor8th floor9th floor10th floorTop floorSplit-levelN\/A Built area (m\u00b2) Year built Bedrooms \u2212 + Bathrooms \u2212 + What features does it have? Furnished Terrace Elevator A\/C Heating Parking Balcony […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/\" \/>\n<meta property=\"og:site_name\" content=\"Costa Blanca Green Real Estate\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-10T09:49:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/\",\"url\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/\",\"name\":\"Your Free Costa Blanca Property Valuation - Costa Blanca Green Real Estate\",\"isPartOf\":{\"@id\":\"https:\/\/costablancagreen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png\",\"datePublished\":\"2025-08-26T09:21:55+00:00\",\"dateModified\":\"2025-09-10T09:49:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#primaryimage\",\"url\":\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png\",\"contentUrl\":\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/costablancagreen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Your Free Costa Blanca Property Valuation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/costablancagreen.com\/#website\",\"url\":\"https:\/\/costablancagreen.com\/\",\"name\":\"Costa Blanca Green Real Estate\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/costablancagreen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/costablancagreen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/costablancagreen.com\/#organization\",\"name\":\"Costa Blanca Green Real Estate\",\"url\":\"https:\/\/costablancagreen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/costablancagreen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2022\/12\/logo.svg\",\"contentUrl\":\"https:\/\/costablancagreen.com\/wp-content\/uploads\/2022\/12\/logo.svg\",\"width\":300,\"height\":94,\"caption\":\"Costa Blanca Green Real Estate\"},\"image\":{\"@id\":\"https:\/\/costablancagreen.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Your Free Costa Blanca Property Valuation - Costa Blanca Green Real Estate","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/","og_locale":"nl_NL","og_type":"article","og_title":"Your Free Costa Blanca Property Valuation - Costa Blanca Green Real Estate","og_description":"Property Valuation \u2013 Step 1 Your Free Property Valuation Located area Property type SelectApartment (Flat)PenthouseTownhouseVilla \/ ChaletBungalowOther Floor level SelectGround floor1st floor2nd floor3rd floor4th floor5th floor6th floor7th floor8th floor9th floor10th floorTop floorSplit-levelN\/A Built area (m\u00b2) Year built Bedrooms \u2212 + Bathrooms \u2212 + What features does it have? Furnished Terrace Elevator A\/C Heating Parking Balcony […]","og_url":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/","og_site_name":"Costa Blanca Green Real Estate","article_modified_time":"2025-09-10T09:49:01+00:00","og_image":[{"url":"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"1 minuut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/","url":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/","name":"Your Free Costa Blanca Property Valuation - Costa Blanca Green Real Estate","isPartOf":{"@id":"https:\/\/costablancagreen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#primaryimage"},"image":{"@id":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#primaryimage"},"thumbnailUrl":"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png","datePublished":"2025-08-26T09:21:55+00:00","dateModified":"2025-09-10T09:49:01+00:00","breadcrumb":{"@id":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#primaryimage","url":"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png","contentUrl":"https:\/\/costablancagreen.com\/wp-content\/uploads\/2025\/08\/1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/costablancagreen.com\/your-free-costa-blanca-property-valuation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/costablancagreen.com\/"},{"@type":"ListItem","position":2,"name":"Your Free Costa Blanca Property Valuation"}]},{"@type":"WebSite","@id":"https:\/\/costablancagreen.com\/#website","url":"https:\/\/costablancagreen.com\/","name":"Costa Blanca Green Real Estate","description":"","publisher":{"@id":"https:\/\/costablancagreen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/costablancagreen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/costablancagreen.com\/#organization","name":"Costa Blanca Green Real Estate","url":"https:\/\/costablancagreen.com\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/costablancagreen.com\/#\/schema\/logo\/image\/","url":"https:\/\/costablancagreen.com\/wp-content\/uploads\/2022\/12\/logo.svg","contentUrl":"https:\/\/costablancagreen.com\/wp-content\/uploads\/2022\/12\/logo.svg","width":300,"height":94,"caption":"Costa Blanca Green Real Estate"},"image":{"@id":"https:\/\/costablancagreen.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/pages\/712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/comments?post=712"}],"version-history":[{"count":2,"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/pages\/712\/revisions"}],"predecessor-version":[{"id":720,"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/pages\/712\/revisions\/720"}],"wp:attachment":[{"href":"https:\/\/costablancagreen.com\/nl\/wp-json\/wp\/v2\/media?parent=712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}