Widget HTML Testato su Elementor Pro + Astra Theme --> #riciclo-search-wrap { margin-bottom: 18px; } #riciclo-search { width: 100%; box-sizing: border-box; padding: 10px 16px 10px 40px; font-size: 15px; border: 1.5px solid #ccc; border-radius: 30px; outline: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23999' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 14px center; transition: border-color .2s; } #riciclo-search:focus { border-color: #888; } #riciclo-no-results { display: none; padding: 14px 0; color: #888; font-size: 14px; } .ric-item { border: 1px solid #e2ddd8; border-radius: 8px; margin-bottom: 6px; overflow: hidden; transition: box-shadow .15s; } .ric-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); } .ric-trigger { width: 100%; text-align: left; background: #f8f5f0; border: none; padding: 13px 16px; font-size: 15px; font-weight: 600; color: #2c2620; cursor: pointer; display: flex; justify-content: space-between; align-items: center; letter-spacing: .01em; } .ric-trigger .ric-arrow { font-size: 11px; color: #999; transition: transform .2s; flex-shrink: 0; margin-left: 8px; } .ric-trigger[aria-expanded="true"] .ric-arrow { transform: rotate(180deg); } .ric-panel { display: none; padding: 0 4px 4px; background: #fff; } .ric-panel.open { display: block; } .ric-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ric-table thead tr { background: #ede8e0; } .ric-table thead th { padding: 7px 12px; text-align: left; font-weight: 600; font-size: 12px; color: #5a4e44; text-transform: uppercase; letter-spacing: .04em; } .ric-table tbody td { padding: 8px 12px; border-bottom: 1px solid #f2efea; color: #2c2620; vertical-align: middle; text-transform: uppercase; font-size: 12.5px; letter-spacing: .02em; } .ric-table tbody tr:last-child td { border-bottom: none; } .ric-mat { color: #7a6e64; font-size: 12.5px; text-transform: uppercase; letter-spacing: .02em; } .ric-code { display: inline-block; margin-top: 3px; font-family: 'Courier New', monospace; font-size: 10.5px; color: #b0a89f; letter-spacing: .04em; } .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; } .b-plastica { background: #FFF3B0; color: #7A6000; } .b-carta { background: #D6EAF8; color: #1A5276; } .b-indiff { background: #E8E8E8; color: #555555; } .b-allum { background: #E4E4E4; color: #3a3a3a; } .ric-note { font-size: 12px; color: #999; margin-top: 12px; margin-bottom: 2px; line-height: 1.6; border-top: 1px solid #e8e4df; padding-top: 10px; } function ricToggle(btn) { var panel = btn.nextElementSibling; var open = panel.classList.contains('open'); panel.classList.toggle('open', !open); btn.setAttribute('aria-expanded', !open); } (function() { var input = document.getElementById('riciclo-search'); var items = document.querySelectorAll('.ric-item'); var noRes = document.getElementById('riciclo-no-results'); // Regex costruita via charCode (ASCII-safe): evita che WordPress corrompa // i caratteri Unicode combinanti letterali (\u0300-\u036f) in entità HTML, // il che manderebbe in errore di sintassi l'intero script. var combiningMarks = new RegExp('[' + String.fromCharCode(768) + '-' + String.fromCharCode(879) + ']', 'g'); input.addEventListener('input', function() { var q = this.value.trim().toLowerCase() .normalize('NFD').replace(combiningMarks, ''); var visible = 0; items.forEach(function(item) { var name = (item.getAttribute('data-name') || '') .normalize('NFD').replace(combiningMarks, ''); var match = !q || name.indexOf(q) !== -1; item.style.display = match ? '' : 'none'; if (match) { visible++; if (q && visible === 1) { var panel = item.querySelector('.ric-panel'); var btn = item.querySelector('.ric-trigger'); panel.classList.add('open'); btn.setAttribute('aria-expanded', 'true'); } } else { var panel = item.querySelector('.ric-panel'); var btn = item.querySelector('.ric-trigger'); panel.classList.remove('open'); btn.setAttribute('aria-expanded', 'false'); } }); noRes.style.display = (q && visible === 0) ? 'block' : 'none'; }); })();