{"id":14283,"date":"2026-08-20T16:51:07","date_gmt":"2026-08-20T16:51:07","guid":{"rendered":"https:\/\/one-host.us\/?page_id=14283"},"modified":"2026-08-20T19:24:05","modified_gmt":"2026-08-20T19:24:05","slug":"elementor-14283","status":"publish","type":"page","link":"https:\/\/one-host.us\/index.php\/elementor-14283\/","title":{"rendered":"Elementor #14283"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14283\" class=\"elementor elementor-14283\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6730592 e-flex e-con-boxed e-con e-parent\" data-id=\"6730592\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26af8ff elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"26af8ff\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SOLAR OFFER WIZARD - Paste into a WordPress Custom HTML widget -->\r\n<div id=\"oh-solar-wizard\">\r\n  <div class=\"oh-card\">\r\n    <div class=\"oh-progress\" aria-label=\"Progresi\">\r\n      <div class=\"oh-progress-fill\"><\/div>\r\n      <div class=\"oh-progress-steps\">\r\n        <span class=\"oh-step-dot active\">1<\/span>\r\n        <span class=\"oh-step-dot\">2<\/span>\r\n        <span class=\"oh-step-dot\">3<\/span>\r\n        <span class=\"oh-step-dot\">4<\/span>\r\n        <span class=\"oh-step-dot\">5<\/span>\r\n        <span class=\"oh-step-dot\">6<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <form id=\"ohSolarForm\">\r\n      <!-- STEP 1 -->\r\n      <section class=\"oh-form-step active\">\r\n        <div class=\"oh-badge\">Hapi 1 nga 6<\/div>\r\n        <h3>Sa shpenzoni p\u00ebr energji elektrike n\u00eb muaj?<\/h3>\r\n        <p>Na ndihmoni t\u00eb vler\u00ebsojm\u00eb m\u00eb mir\u00eb nevojat tuaja p\u00ebr energji solare.<\/p>\r\n\r\n        <label class=\"oh-field\">\r\n          <span>Shpenzimi mujor<\/span>\r\n          <div class=\"oh-input-wrap\">\r\n            <input type=\"number\" name=\"sum_monthly\" min=\"1\" placeholder=\"p.sh. 120\" required>\r\n            <b>\u20ac<\/b>\r\n          <\/div>\r\n        <\/label>\r\n\r\n        <div class=\"oh-actions one\">\r\n          <button type=\"button\" class=\"oh-next\">Vazhdo <span>\u2192<\/span><\/button>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- STEP 2 -->\r\n      <section class=\"oh-form-step\">\r\n        <div class=\"oh-badge\">Hapi 2 nga 6<\/div>\r\n        <h3>Le t\u00eb gjejm\u00eb opsionet solare n\u00eb zon\u00ebn tuaj.<\/h3>\r\n        <p>Shkruani qytetin ose fshatin p\u00ebr t\u00eb p\u00ebrshtatur vler\u00ebsimin me lokacionin tuaj.<\/p>\r\n\r\n        <label class=\"oh-field\">\r\n          <span>Qyteti \/ Fshati<\/span>\r\n          <input type=\"text\" name=\"city_village\" placeholder=\"p.sh. Prishtin\u00eb, Ferizaj...\" required>\r\n        <\/label>\r\n\r\n        <div class=\"oh-actions\">\r\n          <button type=\"button\" class=\"oh-prev secondary\">\u2190 Mbrapa<\/button>\r\n          <button type=\"button\" class=\"oh-next\">Vazhdo \u2192<\/button>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- STEP 3 -->\r\n      <section class=\"oh-form-step\">\r\n        <div class=\"oh-badge\">Hapi 3 nga 6<\/div>\r\n        <h3>Na tregoni pak p\u00ebr \u00e7atin\u00eb tuaj.<\/h3>\r\n        <p>Zgjidhni llojin q\u00eb i ngjan m\u00eb shum\u00eb \u00e7atis\u00eb s\u00eb objektit tuaj.<\/p>\r\n\r\n        <div class=\"oh-choice-grid roof-grid\">\r\n          <label class=\"oh-choice\">\r\n            <input type=\"radio\" name=\"roof_type\" value=\"Cross-Gabled\" required>\r\n            <span class=\"oh-icon\">\r\n              <svg viewBox=\"0 0 90 64\" aria-hidden=\"true\"><path d=\"M8 34 35 13l18 13 12-9 18 15v24H8Z\"\/><path d=\"m8 34 27 8 18-16 30 6\"\/><path d=\"M35 13v29\"\/><\/svg>\r\n            <\/span>\r\n            <strong>Cross-Gabled<\/strong>\r\n          <\/label>\r\n\r\n          <label class=\"oh-choice\">\r\n            <input type=\"radio\" name=\"roof_type\" value=\"Cross-Hipped\">\r\n            <span class=\"oh-icon\">\r\n              <svg viewBox=\"0 0 90 64\" aria-hidden=\"true\"><path d=\"M7 31 31 14h28l24 17-17 8-20-6-22 8Z\"\/><path d=\"M24 41v15M66 39v17M24 56h42\"\/><\/svg>\r\n            <\/span>\r\n            <strong>Cross-Hipped<\/strong>\r\n          <\/label>\r\n\r\n          <label class=\"oh-choice\">\r\n            <input type=\"radio\" name=\"roof_type\" value=\"Flat\">\r\n            <span class=\"oh-icon\">\r\n              <svg viewBox=\"0 0 90 64\" aria-hidden=\"true\"><path d=\"m9 20 50-4 22 10-50 6Z\"\/><path d=\"M9 20v26l22 11 50-8V26\"\/><path d=\"M31 32v25\"\/><\/svg>\r\n            <\/span>\r\n            <strong>E rrafsh\u00ebt<\/strong>\r\n          <\/label>\r\n\r\n          <label class=\"oh-choice\">\r\n            <input type=\"radio\" name=\"roof_type\" value=\"Gable\">\r\n            <span class=\"oh-icon\">\r\n              <svg viewBox=\"0 0 90 64\" aria-hidden=\"true\"><path d=\"M9 31 29 11l40-4 13 22-53 6Z\"\/><path d=\"M9 31v22l20 8 52-8 1-24\"\/><path d=\"M29 35v26\"\/><\/svg>\r\n            <\/span>\r\n            <strong>Gable<\/strong>\r\n          <\/label>\r\n\r\n          <label class=\"oh-choice\">\r\n            <input type=\"radio\" name=\"roof_type\" value=\"Shingle\">\r\n            <span class=\"oh-icon\">\r\n              <svg viewBox=\"0 0 90 64\" aria-hidden=\"true\"><path d=\"M10 31 29 10l41-4 12 23-53 7Z\"\/><path d=\"M10 31v22l19 8 52-8 1-24\"\/><path d=\"M25 17h46M22 23h53M19 29h59\"\/><\/svg>\r\n            <\/span>\r\n            <strong>Shingle<\/strong>\r\n          <\/label>\r\n\r\n          <label class=\"oh-choice\">\r\n            <input type=\"radio\" name=\"roof_type\" value=\"Tile\">\r\n            <span class=\"oh-icon\">\r\n              <svg viewBox=\"0 0 90 64\" aria-hidden=\"true\"><path d=\"M10 31 29 10l41-4 12 23-53 7Z\"\/><path d=\"M10 31v22l19 8 52-8 1-24\"\/><path d=\"M27 12 37 34M39 10l9 22M51 9l9 22M63 8l8 21\"\/><\/svg>\r\n            <\/span>\r\n            <strong>Tjegulla<\/strong>\r\n          <\/label>\r\n\r\n          <label class=\"oh-choice\">\r\n            <input type=\"radio\" name=\"roof_type\" value=\"Nuk jam i sigurt\">\r\n            <span class=\"oh-icon text-icon\">?<\/span>\r\n            <strong>Nuk jam i sigurt<\/strong>\r\n          <\/label>\r\n        <\/div>\r\n\r\n        <div class=\"oh-actions\">\r\n          <button type=\"button\" class=\"oh-prev secondary\">\u2190 Mbrapa<\/button>\r\n          <button type=\"button\" class=\"oh-next\">Vazhdo \u2192<\/button>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- STEP 4 -->\r\n      <section class=\"oh-form-step\">\r\n        <div class=\"oh-badge\">Hapi 4 nga 6<\/div>\r\n        <h3>Ku mund ta d\u00ebrgojm\u00eb vler\u00ebsimin tuaj solar?<\/h3>\r\n        <p>Vendosni emailin ku d\u00ebshironi t\u00eb pranoni ofert\u00ebn dhe vler\u00ebsimin.<\/p>\r\n\r\n        <label class=\"oh-field\">\r\n          <span>Email<\/span>\r\n          <input type=\"email\" name=\"email\" placeholder=\"emri@email.com\" required>\r\n        <\/label>\r\n\r\n        <div class=\"oh-actions\">\r\n          <button type=\"button\" class=\"oh-prev secondary\">\u2190 Mbrapa<\/button>\r\n          <button type=\"button\" class=\"oh-next\">Vazhdo \u2192<\/button>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- STEP 5 -->\r\n      <section class=\"oh-form-step\">\r\n        <div class=\"oh-badge\">Hapi 5 nga 6<\/div>\r\n        <h3>Sa hije ka zakonisht mbi \u00e7atin\u00eb tuaj?<\/h3>\r\n        <p>Hij\u00ebzimi ndikon drejtp\u00ebrdrejt n\u00eb prodhimin e energjis\u00eb nga panelet solare.<\/p>\r\n\r\n        <div class=\"oh-choice-grid shade-grid\">\r\n          <label class=\"oh-choice\">\r\n            <input type=\"radio\" name=\"shade\" value=\"Pa hije\" required>\r\n            <span class=\"oh-icon sun\">\u2600<\/span>\r\n            <strong>Pa hije<\/strong>\r\n            <small>Ekspozim shum\u00eb i mir\u00eb<\/small>\r\n          <\/label>\r\n          <label class=\"oh-choice\">\r\n            <input type=\"radio\" name=\"shade\" value=\"Hije e pjesshme\">\r\n            <span class=\"oh-icon sun\">\u25d0<\/span>\r\n            <strong>Hije e pjesshme<\/strong>\r\n            <small>Disa or\u00eb gjat\u00eb dit\u00ebs<\/small>\r\n          <\/label>\r\n          <label class=\"oh-choice\">\r\n            <input type=\"radio\" name=\"shade\" value=\"Hije e plot\u00eb\">\r\n            <span class=\"oh-icon sun\">\u2601<\/span>\r\n            <strong>Hije e plot\u00eb<\/strong>\r\n            <small>Pjesa m\u00eb e madhe e dit\u00ebs<\/small>\r\n          <\/label>\r\n        <\/div>\r\n\r\n        <div class=\"oh-actions\">\r\n          <button type=\"button\" class=\"oh-prev secondary\">\u2190 Mbrapa<\/button>\r\n          <button type=\"button\" class=\"oh-next\">Vazhdo \u2192<\/button>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- STEP 6 -->\r\n      <section class=\"oh-form-step\">\r\n        <div class=\"oh-badge\">Hapi 6 nga 6<\/div>\r\n        <div class=\"oh-success-icon\">\u2713<\/div>\r\n        <h3>Urime! Vler\u00ebsimi juaj solar \u00ebsht\u00eb gati.<\/h3>\r\n        <p>Plot\u00ebsoni t\u00eb dh\u00ebnat e fundit dhe k\u00ebrkesa juaj do t\u00eb jet\u00eb gati p\u00ebr d\u00ebrgim.<\/p>\r\n\r\n        <div class=\"oh-two-cols\">\r\n          <label class=\"oh-field\">\r\n            <span>Emri<\/span>\r\n            <input type=\"text\" name=\"name\" placeholder=\"Emri\" required>\r\n          <\/label>\r\n          <label class=\"oh-field\">\r\n            <span>Mbiemri<\/span>\r\n            <input type=\"text\" name=\"surname\" placeholder=\"Mbiemri\" required>\r\n          <\/label>\r\n        <\/div>\r\n\r\n        <label class=\"oh-field\">\r\n          <span>Numri i telefonit<\/span>\r\n          <input type=\"tel\" name=\"phone\" placeholder=\"+383 4X XXX XXX\" required>\r\n        <\/label>\r\n\r\n        <div class=\"oh-summary\" id=\"ohSummary\"><\/div>\r\n\r\n        <div class=\"oh-actions\">\r\n          <button type=\"button\" class=\"oh-prev secondary\">\u2190 Mbrapa<\/button>\r\n          <button type=\"submit\" class=\"oh-submit\">D\u00ebrgo k\u00ebrkes\u00ebn<\/button>\r\n        <\/div>\r\n\r\n        <div class=\"oh-message\" id=\"ohMessage\" role=\"status\"><\/div>\r\n      <\/section>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n#oh-solar-wizard,\r\n#oh-solar-wizard * { box-sizing: border-box; }\r\n\r\n#oh-solar-wizard {\r\n  --green:#35b782;\r\n  --green-dark:#168b61;\r\n  --green-soft:#edf9f4;\r\n  --text:#17231f;\r\n  --muted:#6b7772;\r\n  --border:#dfe9e5;\r\n  width:100%;\r\n  max-width:920px;\r\n  margin:20px auto;\r\n  font-family:Inter,Arial,sans-serif;\r\n  color:var(--text);\r\n}\r\n\r\n#oh-solar-wizard .oh-card {\r\n  background:#fff;\r\n  border:1px solid #edf2f0;\r\n  border-radius:26px;\r\n  padding:34px;\r\n  box-shadow:0 18px 60px rgba(18,55,42,.10);\r\n}\r\n\r\n#oh-solar-wizard .oh-progress {\r\n  position:relative;\r\n  margin:0 0 40px;\r\n  height:44px;\r\n}\r\n\r\n#oh-solar-wizard .oh-progress:before,\r\n#oh-solar-wizard .oh-progress-fill {\r\n  content:\"\";\r\n  position:absolute;\r\n  left:20px;\r\n  right:20px;\r\n  top:20px;\r\n  height:4px;\r\n  border-radius:10px;\r\n}\r\n\r\n#oh-solar-wizard .oh-progress:before { background:#e7efec; }\r\n\r\n#oh-solar-wizard .oh-progress-fill {\r\n  right:auto;\r\n  width:0;\r\n  background:var(--green);\r\n  transition:.35s ease;\r\n}\r\n\r\n#oh-solar-wizard .oh-progress-steps {\r\n  position:relative;\r\n  z-index:2;\r\n  display:flex;\r\n  justify-content:space-between;\r\n}\r\n\r\n#oh-solar-wizard .oh-step-dot {\r\n  width:42px;\r\n  height:42px;\r\n  border-radius:50%;\r\n  display:grid;\r\n  place-items:center;\r\n  background:#fff;\r\n  border:3px solid #e0eae6;\r\n  color:#91a19b;\r\n  font-weight:800;\r\n  transition:.25s ease;\r\n}\r\n\r\n#oh-solar-wizard .oh-step-dot.active,\r\n#oh-solar-wizard .oh-step-dot.done {\r\n  border-color:var(--green);\r\n  background:var(--green);\r\n  color:#fff;\r\n}\r\n\r\n#oh-solar-wizard .oh-form-step { display:none; animation:ohFade .25s ease; }\r\n#oh-solar-wizard .oh-form-step.active { display:block; }\r\n\r\n@keyframes ohFade {\r\n  from { opacity:0; transform:translateY(7px); }\r\n  to { opacity:1; transform:none; }\r\n}\r\n\r\n#oh-solar-wizard .oh-badge {\r\n  display:inline-flex;\r\n  background:var(--green-soft);\r\n  color:var(--green-dark);\r\n  border-radius:999px;\r\n  padding:7px 12px;\r\n  font-size:13px;\r\n  font-weight:800;\r\n  margin-bottom:14px;\r\n}\r\n\r\n#oh-solar-wizard h3 {\r\n  font-size:30px;\r\n  line-height:1.18;\r\n  margin:0 0 10px;\r\n  letter-spacing:-.6px;\r\n}\r\n\r\n#oh-solar-wizard p {\r\n  color:var(--muted);\r\n  font-size:16px;\r\n  line-height:1.6;\r\n  margin:0 0 28px;\r\n}\r\n\r\n#oh-solar-wizard .oh-field {\r\n  display:block;\r\n  margin-bottom:18px;\r\n}\r\n\r\n#oh-solar-wizard .oh-field > span {\r\n  display:block;\r\n  font-size:14px;\r\n  font-weight:750;\r\n  margin-bottom:8px;\r\n}\r\n\r\n#oh-solar-wizard input[type=\"text\"],\r\n#oh-solar-wizard input[type=\"number\"],\r\n#oh-solar-wizard input[type=\"email\"],\r\n#oh-solar-wizard input[type=\"tel\"] {\r\n  width:100%;\r\n  height:56px;\r\n  border:1.5px solid var(--border);\r\n  border-radius:14px;\r\n  padding:0 16px;\r\n  font-size:16px;\r\n  background:#fff;\r\n  color:var(--text);\r\n  outline:none;\r\n  transition:.2s ease;\r\n}\r\n\r\n#oh-solar-wizard input:focus {\r\n  border-color:var(--green);\r\n  box-shadow:0 0 0 4px rgba(53,183,130,.11);\r\n}\r\n\r\n#oh-solar-wizard .oh-input-wrap {\r\n  position:relative;\r\n}\r\n\r\n#oh-solar-wizard .oh-input-wrap input {\r\n  padding-right:55px;\r\n}\r\n\r\n#oh-solar-wizard .oh-input-wrap b {\r\n  position:absolute;\r\n  right:17px;\r\n  top:50%;\r\n  transform:translateY(-50%);\r\n  color:var(--green-dark);\r\n  font-size:18px;\r\n}\r\n\r\n#oh-solar-wizard .oh-choice-grid {\r\n  display:grid;\r\n  gap:14px;\r\n  margin:10px 0 28px;\r\n}\r\n\r\n#oh-solar-wizard .roof-grid {\r\n  grid-template-columns:repeat(4,minmax(0,1fr));\r\n}\r\n\r\n#oh-solar-wizard .shade-grid {\r\n  grid-template-columns:repeat(3,minmax(0,1fr));\r\n}\r\n\r\n#oh-solar-wizard .oh-choice {\r\n  min-height:152px;\r\n  border:1.5px solid var(--border);\r\n  border-radius:18px;\r\n  background:#fff;\r\n  padding:18px 12px;\r\n  display:flex;\r\n  flex-direction:column;\r\n  align-items:center;\r\n  justify-content:center;\r\n  text-align:center;\r\n  cursor:pointer;\r\n  transition:.2s ease;\r\n  position:relative;\r\n}\r\n\r\n#oh-solar-wizard .oh-choice:hover {\r\n  border-color:#a7dcca;\r\n  transform:translateY(-2px);\r\n  box-shadow:0 10px 26px rgba(22,139,97,.08);\r\n}\r\n\r\n#oh-solar-wizard .oh-choice:has(input:checked) {\r\n  border-color:var(--green);\r\n  background:var(--green-soft);\r\n  box-shadow:0 0 0 3px rgba(53,183,130,.08);\r\n}\r\n\r\n#oh-solar-wizard .oh-choice input {\r\n  position:absolute;\r\n  opacity:0;\r\n  pointer-events:none;\r\n}\r\n\r\n#oh-solar-wizard .oh-icon {\r\n  width:82px;\r\n  height:66px;\r\n  display:grid;\r\n  place-items:center;\r\n  margin-bottom:9px;\r\n  color:var(--green);\r\n  font-size:44px;\r\n  font-weight:800;\r\n}\r\n\r\n#oh-solar-wizard .oh-icon svg {\r\n  width:82px;\r\n  height:62px;\r\n  fill:#f8fffc;\r\n  stroke:var(--green);\r\n  stroke-width:2;\r\n  stroke-linejoin:round;\r\n  stroke-linecap:round;\r\n}\r\n\r\n#oh-solar-wizard .text-icon {\r\n  width:62px;\r\n  height:62px;\r\n  border-radius:50%;\r\n  background:var(--green-soft);\r\n}\r\n\r\n#oh-solar-wizard .oh-choice strong {\r\n  font-size:14px;\r\n  line-height:1.3;\r\n}\r\n\r\n#oh-solar-wizard .oh-choice small {\r\n  color:var(--muted);\r\n  margin-top:5px;\r\n  line-height:1.35;\r\n}\r\n\r\n#oh-solar-wizard .oh-actions {\r\n  display:flex;\r\n  gap:12px;\r\n  justify-content:space-between;\r\n  margin-top:26px;\r\n}\r\n\r\n#oh-solar-wizard .oh-actions.one {\r\n  justify-content:flex-end;\r\n}\r\n\r\n#oh-solar-wizard button {\r\n  min-height:52px;\r\n  border:0;\r\n  border-radius:14px;\r\n  padding:0 24px;\r\n  font-size:15px;\r\n  font-weight:800;\r\n  cursor:pointer;\r\n  transition:.2s ease;\r\n}\r\n\r\n#oh-solar-wizard .oh-next,\r\n#oh-solar-wizard .oh-submit {\r\n  background:var(--green);\r\n  color:#fff;\r\n  margin-left:auto;\r\n}\r\n\r\n#oh-solar-wizard .oh-next:hover,\r\n#oh-solar-wizard .oh-submit:hover {\r\n  background:var(--green-dark);\r\n  transform:translateY(-1px);\r\n}\r\n\r\n#oh-solar-wizard .secondary {\r\n  background:#f3f7f5;\r\n  color:#30423b;\r\n}\r\n\r\n#oh-solar-wizard .secondary:hover {\r\n  background:#e9f0ed;\r\n}\r\n\r\n#oh-solar-wizard .oh-two-cols {\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:14px;\r\n}\r\n\r\n#oh-solar-wizard .oh-success-icon {\r\n  width:62px;\r\n  height:62px;\r\n  border-radius:50%;\r\n  display:grid;\r\n  place-items:center;\r\n  color:#fff;\r\n  background:var(--green);\r\n  font-size:32px;\r\n  font-weight:900;\r\n  margin-bottom:18px;\r\n}\r\n\r\n#oh-solar-wizard .oh-summary {\r\n  background:#f8fbfa;\r\n  border:1px solid var(--border);\r\n  border-radius:16px;\r\n  padding:16px;\r\n  margin:18px 0 4px;\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:10px 18px;\r\n}\r\n\r\n#oh-solar-wizard .oh-summary div {\r\n  font-size:14px;\r\n  color:var(--muted);\r\n}\r\n\r\n#oh-solar-wizard .oh-summary b {\r\n  color:var(--text);\r\n}\r\n\r\n#oh-solar-wizard .oh-message {\r\n  display:none;\r\n  margin-top:16px;\r\n  border-radius:14px;\r\n  padding:14px 16px;\r\n  font-weight:700;\r\n}\r\n\r\n#oh-solar-wizard .oh-message.success {\r\n  display:block;\r\n  background:#eaf8f2;\r\n  color:#11714e;\r\n}\r\n\r\n#oh-solar-wizard .oh-message.error {\r\n  display:block;\r\n  background:#fff0f0;\r\n  color:#b53030;\r\n}\r\n\r\n#oh-solar-wizard .oh-invalid {\r\n  border-color:#dc5353 !important;\r\n  box-shadow:0 0 0 4px rgba(220,83,83,.08) !important;\r\n}\r\n\r\n@media (max-width:767px) {\r\n  #oh-solar-wizard { margin:10px auto; }\r\n  #oh-solar-wizard .oh-card { padding:22px 16px; border-radius:20px; }\r\n  #oh-solar-wizard h3 { font-size:24px; }\r\n  #oh-solar-wizard p { font-size:14px; }\r\n  #oh-solar-wizard .roof-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }\r\n  #oh-solar-wizard .shade-grid { grid-template-columns:1fr; }\r\n  #oh-solar-wizard .oh-two-cols { grid-template-columns:1fr; gap:0; }\r\n  #oh-solar-wizard .oh-choice { min-height:138px; }\r\n  #oh-solar-wizard .oh-step-dot { width:34px; height:34px; font-size:13px; }\r\n  #oh-solar-wizard .oh-progress:before,\r\n  #oh-solar-wizard .oh-progress-fill { top:15px; left:16px; right:16px; }\r\n  #oh-solar-wizard .oh-progress { height:36px; margin-bottom:30px; }\r\n  #oh-solar-wizard .oh-actions { gap:8px; }\r\n  #oh-solar-wizard button { padding:0 16px; min-height:50px; }\r\n}\r\n\r\n@media (max-width:430px) {\r\n  #oh-solar-wizard .roof-grid { grid-template-columns:1fr 1fr; }\r\n  #oh-solar-wizard .oh-choice { padding:14px 8px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const root = document.getElementById('oh-solar-wizard');\r\n  if (!root) return;\r\n\r\n  const form = root.querySelector('#ohSolarForm');\r\n  const steps = [...root.querySelectorAll('.oh-form-step')];\r\n  const dots = [...root.querySelectorAll('.oh-step-dot')];\r\n  const fill = root.querySelector('.oh-progress-fill');\r\n  const summary = root.querySelector('#ohSummary');\r\n  const message = root.querySelector('#ohMessage');\r\n  let current = 0;\r\n\r\n  function updateProgress(){\r\n    steps.forEach((step, i) => step.classList.toggle('active', i === current));\r\n    dots.forEach((dot, i) => {\r\n      dot.classList.toggle('active', i === current);\r\n      dot.classList.toggle('done', i < current);\r\n    });\r\n    fill.style.width = ((current) \/ (steps.length - 1) * 100) + '%';\r\n    if(current === 5) buildSummary();\r\n  }\r\n\r\n  function validateStep(index){\r\n    const step = steps[index];\r\n    const required = [...step.querySelectorAll('[required]')];\r\n    let ok = true;\r\n\r\n    required.forEach(el => {\r\n      el.classList.remove('oh-invalid');\r\n\r\n      if(el.type === 'radio'){\r\n        const group = step.querySelectorAll('input[name=\"' + el.name + '\"]');\r\n        const checked = [...group].some(r => r.checked);\r\n        if(!checked) ok = false;\r\n      } else if(!el.value.trim() || !el.checkValidity()){\r\n        el.classList.add('oh-invalid');\r\n        ok = false;\r\n      }\r\n    });\r\n\r\n    if(!ok){\r\n      const firstInvalid = step.querySelector('.oh-invalid');\r\n      if(firstInvalid) firstInvalid.focus();\r\n    }\r\n    return ok;\r\n  }\r\n\r\n  function field(name){\r\n    const el = form.elements[name];\r\n    if(!el) return '';\r\n    if(el instanceof RadioNodeList) return el.value || '';\r\n    return el.value || '';\r\n  }\r\n\r\n  function buildSummary(){\r\n    summary.innerHTML = `\r\n      <div><b>Shpenzimi:<\/b> ${escapeHtml(field('sum_monthly'))} \u20ac \/ muaj<\/div>\r\n      <div><b>Lokacioni:<\/b> ${escapeHtml(field('city_village'))}<\/div>\r\n      <div><b>\u00c7atia:<\/b> ${escapeHtml(field('roof_type'))}<\/div>\r\n      <div><b>Hij\u00ebzimi:<\/b> ${escapeHtml(field('shade'))}<\/div>\r\n      <div><b>Email:<\/b> ${escapeHtml(field('email'))}<\/div>\r\n    `;\r\n  }\r\n\r\n  function escapeHtml(str){\r\n    return String(str || '').replace(\/[&<>\"']\/g, s => ({\r\n      '&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#039;'\r\n    })[s]);\r\n  }\r\n\r\n  root.addEventListener('click', function(e){\r\n    const next = e.target.closest('.oh-next');\r\n    const prev = e.target.closest('.oh-prev');\r\n\r\n    if(next){\r\n      if(!validateStep(current)) return;\r\n      if(current < steps.length - 1){\r\n        current++;\r\n        updateProgress();\r\n        root.scrollIntoView({behavior:'smooth', block:'center'});\r\n      }\r\n    }\r\n\r\n    if(prev){\r\n      if(current > 0){\r\n        current--;\r\n        updateProgress();\r\n        root.scrollIntoView({behavior:'smooth', block:'center'});\r\n      }\r\n    }\r\n  });\r\n\r\n  form.addEventListener('input', e => e.target.classList.remove('oh-invalid'));\r\n\r\n  form.addEventListener('submit', function(e){\r\n    e.preventDefault();\r\n    if(!validateStep(current)) return;\r\n\r\n    \/*\r\n      K\u00cbTU LIDHET D\u00cbRGIMI REAL I FORM\u00cbS.\r\n      P\u00ebr momentin forma ruan t\u00eb dh\u00ebnat vet\u00ebm n\u00eb browser dhe shfaq sukses.\r\n\r\n      Mund ta lidh\u00ebsh me:\r\n      1) WordPress REST\/API endpoint\r\n      2) Contact Form 7 \/ WPForms\r\n      3) FormSubmit \/ Formspree\r\n      4) endpoint-in t\u00ebnd PHP\/Node\r\n    *\/\r\n\r\n    const data = Object.fromEntries(new FormData(form).entries());\r\n    console.log('Solar offer form:', data);\r\n\r\n    message.className = 'oh-message success';\r\n    message.textContent = 'Faleminderit! K\u00ebrkesa u plot\u00ebsua me sukses.';\r\n  });\r\n\r\n  updateProgress();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>1 2 3 4 5 6 Hapi 1 nga 6 Sa shpenzoni p\u00ebr energji elektrike n\u00eb muaj? Na ndihmoni t\u00eb vler\u00ebsojm\u00eb m\u00eb mir\u00eb nevojat tuaja p\u00ebr energji solare. Shpenzimi mujor \u20ac Vazhdo \u2192 Hapi 2 nga 6 Le t\u00eb gjejm\u00eb opsionet solare n\u00eb zon\u00ebn tuaj. Shkruani qytetin ose fshatin p\u00ebr t\u00eb p\u00ebrshtatur vler\u00ebsimin me lokacionin [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-14283","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/one-host.us\/index.php\/wp-json\/wp\/v2\/pages\/14283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/one-host.us\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/one-host.us\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/one-host.us\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/one-host.us\/index.php\/wp-json\/wp\/v2\/comments?post=14283"}],"version-history":[{"count":3,"href":"https:\/\/one-host.us\/index.php\/wp-json\/wp\/v2\/pages\/14283\/revisions"}],"predecessor-version":[{"id":14287,"href":"https:\/\/one-host.us\/index.php\/wp-json\/wp\/v2\/pages\/14283\/revisions\/14287"}],"wp:attachment":[{"href":"https:\/\/one-host.us\/index.php\/wp-json\/wp\/v2\/media?parent=14283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}