/* Brand palette from the site's original filter: cream #FFF8F2, tan #88684A, black, Aboreto */ /* width:80% + centred to line up exactly with the archive-posts cards container below it */ .htt-ecofilter{--htt-cream:#FFF8F2;--htt-tan:#88684A;--htt-ink:#000;width:80%;max-width:100%;margin:0 auto 20px;padding:8px 12px;background:var(--htt-cream);border-radius:8px;box-sizing:border-box;font-family:inherit} .htt-ef-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px} /* Map button — distinct deep-green so it stands apart from the tan filter chips; aligned in the same bar */ .htt-ecofilter .htt-ef-mapbtn{display:inline-flex;align-items:center;border:none;background:#2f4a34;color:#fff;font-family:"Times New Roman",Times,serif;font-size:18px;text-transform:lowercase;letter-spacing:.02em;padding:7px 15px;border-radius:10px;cursor:pointer;transition:background .15s} .htt-ecofilter .htt-ef-mapbtn:hover{background:#3f6446} .htt-ecofilter .htt-ef-mapbtn.is-open{background:#1f3323} .htt-ef-dd{position:relative} .htt-ecofilter .htt-ef-toggle{display:inline-flex;align-items:center;gap:7px;border:none!important;background:rgba(136,104,74,.48);color:#fff!important;font-size:18px;font-family:"Times New Roman",Times,serif;font-weight:500;text-transform:lowercase;letter-spacing:.02em;padding:7px 14px;border-radius:10px!important;cursor:pointer;transition:background .15s,color .15s} .htt-ecofilter .htt-ef-toggle:hover{background:var(--htt-tan);color:#fff!important} .htt-ecofilter .htt-ef-dd.is-open .htt-ef-toggle{background:var(--htt-tan);color:#fff!important} .htt-ecofilter .htt-ef-dd.has-sel .htt-ef-toggle{background:var(--htt-tan);color:#fff!important} .htt-ef-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:6px;background:#fff;color:var(--htt-tan);font-size:11px;font-weight:700} .htt-ef-caret{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid currentColor;transition:transform .15s} .htt-ef-dd.is-open .htt-ef-caret{transform:rotate(180deg)} .htt-ef-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:50;min-width:230px;max-height:340px;overflow:auto;background:var(--htt-cream);border:none;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:7px} .htt-ef-opt{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;font-size:16px;font-family:"Times New Roman",Times,serif;font-weight:500;text-transform:lowercase;color:var(--htt-ink);cursor:pointer;white-space:nowrap} .htt-ef-opt:hover{background:rgba(136,104,74,.15)} .htt-ef-opt input{width:16px;height:16px;accent-color:var(--htt-tan);cursor:pointer;margin:0;flex:0 0 auto} .htt-ef-clear{border:0;background:none;color:var(--htt-tan);font-size:13px;font-family:inherit;cursor:pointer;text-decoration:underline;padding:4px 6px} .htt-ef-clear:hover{color:var(--htt-ink)} .htt-ef-count{font-size:13px;color:#5a5045} .htt-ef-empty{margin:12px 0 0;font-size:14px;color:var(--htt-tan);text-align:center} /* Tablet: keep the bar centred and wrapping cleanly; keep the text LARGE */ @media (max-width:1024px){ .htt-ecofilter{padding:14px 16px} .htt-ef-bar{gap:10px} .htt-ef-toggle{font-size:18px;padding:8px 15px} .htt-ef-opt{font-size:16px} .htt-ef-panel{min-width:220px} } /* Mobile: compact wrapping row of small chips (NOT full-width stacked), panels drop as overlays */ @media (max-width:767px){ .htt-ecofilter{width:94%;padding:7px 9px} .htt-ef-bar{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px} .htt-ef-dd{width:auto} .htt-ef-toggle{width:auto;font-size:14px;padding:6px 11px;gap:5px} .htt-ef-mapbtn{width:auto;font-size:14px;padding:6px 12px;order:0} .htt-ef-opt{font-size:15px;padding:8px 10px} .htt-ef-panel{position:absolute;left:0;min-width:180px;max-width:78vw;max-height:52vh;box-shadow:0 10px 30px rgba(0,0,0,.2)} .htt-ef-clear,.htt-ef-count{align-self:center} } /* Very small screens: keep chips readable but tight */ @media (max-width:400px){ .htt-ef-toggle,.htt-ef-mapbtn{font-size:13px;padding:6px 9px} } .elementor-post.htt-ef-hide{display:none!important} /* Currency toggle (£/$/€) — small segmented control in the filter bar */ .htt-ecofilter .htt-ef-cur{display:inline-flex;align-items:center;gap:0;background:rgba(136,104,74,.14);border-radius:10px;padding:3px;margin-left:2px} .htt-ecofilter .htt-ef-curbtn{border:none;background:transparent;color:var(--htt-tan);font-family:"Times New Roman",Times,serif;font-size:17px;line-height:1;width:30px;height:30px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s} .htt-ecofilter .htt-ef-curbtn:hover{background:rgba(136,104,74,.2)} .htt-ecofilter .htt-ef-curbtn[aria-pressed="true"]{background:var(--htt-tan);color:#fff} @media (max-width:767px){.htt-ecofilter .htt-ef-curbtn{width:27px;height:27px;font-size:15px}} (function(){ function init(){ var box=document.getElementById('httEcoFilter'); if(!box||box.dataset.ready)return; box.dataset.ready='1'; var clearBtn=document.getElementById('httEfClear'); var countEl=document.getElementById('httEfCount'); var emptyEl=document.getElementById('httEfEmpty'); function cards(){ return [].slice.call(document.querySelectorAll('.elementor-posts-container article.elementor-post')); } // Wire the "view map" button in the filter bar to the map container (rendered separately on the page). (function wireMap(){ var mapBtn=document.getElementById('httFilterMapBtn'); if(!mapBtn)return; var mapEl=document.getElementById('httStaysMap'); if(!mapEl){ mapBtn.remove(); return; } // no map on this page -> drop the button mapBtn.hidden=false; mapBtn.addEventListener('click',function(){ var open=!mapEl.hidden; if(open){ mapEl.hidden=true; mapBtn.classList.remove('is-open'); mapBtn.textContent='view map'; } else { mapEl.hidden=false; mapBtn.classList.add('is-open'); mapBtn.textContent='hide map'; if(window.httLoadStaysMap)window.httLoadStaysMap(); } }); })(); // Build the Country dropdown dynamically from the countries present on THIS archive. // Region pages span many countries (show it); country/city pages have one (stays hidden). (function buildCountry(){ var ddC=box.querySelector('.htt-ef-dd-country'); if(!ddC)return; var panel=ddC.querySelector('.htt-ef-panel'); var seen={}; // slug -> label cards().forEach(function(a){ a.classList.forEach(function(cl){ if(cl.indexOf('stay-country-')===0){ var slug=cl.slice('stay-country-'.length); if(!seen[slug]) seen[slug]=slug.replace(/-/g,' ').replace(/\b\w/g,function(m){return m.toUpperCase();}); } }); }); var slugs=Object.keys(seen).sort(function(x,y){return seen[x].localeCompare(seen[y]);}); if(slugs.length no country filter slugs.forEach(function(slug){ var lab=document.createElement('label'); lab.className='htt-ef-opt'; lab.innerHTML=''+seen[slug]+''; panel.appendChild(lab); }); ddC.hidden=false; })(); var dds=[].slice.call(box.querySelectorAll('.htt-ef-dd')); var boxes=[].slice.call(box.querySelectorAll('.htt-ef-opt input')); function selected(){ return boxes.filter(function(b){return b.checked;}).map(function(b){return b.dataset.cls;}); } function apply(){ // Per dropdown: OR the ticked options (a stay matches if it has ANY selected in that group). // Across dropdowns: AND (must satisfy every group that has a selection). var groups=dds.map(function(dd){ return [].slice.call(dd.querySelectorAll('.htt-ef-opt input')).filter(function(b){return b.checked;}).map(function(b){return b.dataset.cls;}); }).filter(function(g){return g.length;}); var sel=selected(); var all=cards(); var shown=0; all.forEach(function(a){ var ok=groups.every(function(g){ return g.some(function(cls){return a.classList.contains(cls);}); }); if(ok){a.classList.remove('htt-ef-hide');shown++;}else{a.classList.add('htt-ef-hide');} }); // per-dropdown badge + active state dds.forEach(function(dd){ var n=[].slice.call(dd.querySelectorAll('.htt-ef-opt input')).filter(function(b){return b.checked;}).length; var badge=dd.querySelector('.htt-ef-badge'); badge.textContent=n; badge.hidden=n===0; dd.classList.toggle('has-sel',n>0); }); clearBtn.hidden=sel.length===0; if(sel.length===0){countEl.hidden=true;emptyEl.hidden=true;} else{countEl.hidden=false;countEl.textContent='Showing '+shown+' of '+all.length+' stays';emptyEl.hidden=shown!==0;} var pag=document.querySelector('.elementor-pagination, .e-load-more-anchor'); if(pag) pag.style.display=sel.length?'none':''; // tell the map to re-fit to the matching pins (zooms into the selected country/feature) if(window.httMapApplyFilter) window.httMapApplyFilter(groups); } // open/close dropdowns dds.forEach(function(dd){ var tog=dd.querySelector('.htt-ef-toggle'); var panel=dd.querySelector('.htt-ef-panel'); tog.addEventListener('click',function(e){ e.stopPropagation(); var open=dd.classList.contains('is-open'); dds.forEach(function(o){o.classList.remove('is-open');o.querySelector('.htt-ef-panel').hidden=true;o.querySelector('.htt-ef-toggle').setAttribute('aria-expanded','false');}); if(!open){dd.classList.add('is-open');panel.hidden=false;tog.setAttribute('aria-expanded','true');} }); panel.addEventListener('click',function(e){e.stopPropagation();}); }); document.addEventListener('click',function(){dds.forEach(function(o){o.classList.remove('is-open');o.querySelector('.htt-ef-panel').hidden=true;o.querySelector('.htt-ef-toggle').setAttribute('aria-expanded','false');});}); document.addEventListener('keydown',function(e){if(e.key==='Escape')dds.forEach(function(o){o.classList.remove('is-open');o.querySelector('.htt-ef-panel').hidden=true;});}); boxes.forEach(function(b){b.addEventListener('change',apply);}); clearBtn.addEventListener('click',function(){boxes.forEach(function(b){b.checked=false;});apply();}); // relevance-hide: drop options with 0 matching cards in THIS archive var present={}; cards().forEach(function(a){a.classList.forEach(function(cl){present[cl]=1;});}); boxes.forEach(function(b){ if(!present[b.dataset.cls]) b.closest('.htt-ef-opt').style.display='none'; }); // hide a dropdown whose every option is gone dds.forEach(function(dd){ var vis=[].slice.call(dd.querySelectorAll('.htt-ef-opt')).some(function(o){return o.style.display!=='none';}); if(!vis) dd.style.display='none'; }); var anyDD=dds.some(function(dd){return dd.style.display!=='none';}); if(!anyDD) box.style.display='none'; // ---- Currency symbol toggle (£/$/€): display only, persisted per browser ---- (function currency(){ var wrap=box.querySelector('.htt-ef-cur'); if(!wrap)return; var btns=[].slice.call(wrap.querySelectorAll('.htt-ef-curbtn')); function paint(sym){ box.querySelectorAll('.htt-cur').forEach(function(el){ var n=parseInt(el.getAttribute('data-n'),10)||1; el.textContent=new Array(n+1).join(sym); }); btns.forEach(function(b){b.setAttribute('aria-pressed', b.dataset.cur===sym ? 'true':'false');}); } var saved='£'; try{ saved=localStorage.getItem('httCurrency')||'£'; }catch(e){} paint(saved); btns.forEach(function(b){ b.addEventListener('click',function(e){ e.stopPropagation(); var s=b.dataset.cur; paint(s); try{ localStorage.setItem('httCurrency',s); }catch(e){} });}); })(); } if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',init); else init(); })();