.motore-servizi-box {
box-sizing: border-box;
max-width: 400px;
width: 100%;
margin: 30px auto;
position: relative;
z-index: 100001;
-webkit-tap-highlight-color: transparent;
}
.motore-servizi-box *, .motore-servizi-box *::before, .motore-servizi-box *::after {
box-sizing: inherit;
}
.motore-servizi-inner {
display: flex;
align-items: center;
width: 100%;
border: 2px solid #1565c0;
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.motore-servizi-input {
flex: 1 1 auto;
border: none;
outline: none;
background: transparent;
font-size: 17px;
color: #111;
font-weight: 500;
padding: 0 12px 0 14px;
height: 42px;
border-radius: 8px 0 0 8px;
}
.motore-servizi-input::placeholder { color: #111; opacity: 1; } .motore-servizi-btn {
background: #1565c0;
border: none;
outline: none;
padding: 0 16px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 0 4px 4px 0;
transition: background 0.13s;
}
.motore-servizi-btn svg { display: block; }
.motore-servizi-btn:hover,
.motore-servizi-btn:focus { background: #0d47a1; } .motore-servizi-input:focus-visible,
.motore-servizi-btn:focus-visible {
outline: 2px solid #0d47a1;
outline-offset: 2px;
} .motore-servizi-suggestions {
position: absolute;
left: 0; right: 0;
top: 100% !important; width: 100%;
background: #fff;
border: 2px solid #1565c0;
border-top: none;
border-radius: 0 0 8px 8px;
z-index: 100002;
max-height: 260px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
font-size: 15px;
list-style: none;
margin: 0; padding: 0;
box-shadow: 0 8px 24px rgba(21,101,192,0.08);
display: none;
}
.motore-servizi-box.menu-open .motore-servizi-suggestions { display: block; } .motore-servizi-suggestions li {
color: #111;
padding: 14px 14px;
cursor: pointer;
background: #fff;
border-bottom: 1px solid #efefef;
font-size: 15px; line-height: 1.4;
transition: background 0.13s;
list-style: none;
margin: 0;
}
.motore-servizi-suggestions li:last-child { border-bottom: none; }
.motore-servizi-suggestions li:hover,
.motore-servizi-suggestions li[aria-selected="true"] {
background: #e3f0fa;
} .motore-servizi-suggestions .mmg-highlight {
font-weight: 700;
color: #0d47a1;
} .motore-servizi-suggestions li.mmg-muted {
color: #999;
cursor: default;
background: #fff;
} @media (max-width: 600px) {
.motore-servizi-box { max-width: 99vw; margin: 10px auto; }
.motore-servizi-inner,
.motore-servizi-input,
.motore-servizi-btn {
height: 37px;
font-size: 15px;
}
.motore-servizi-suggestions { max-height: 60vh; }
.motore-servizi-suggestions li {
padding: 10px 12px;
font-size: 16px;
line-height: 1.3;
}
} .motore-servizi-suggestions::-webkit-scrollbar { width: 10px; }
.motore-servizi-suggestions::-webkit-scrollbar-track { background: #f7f9fc; }
.motore-servizi-suggestions::-webkit-scrollbar-thumb { background: #c9d9ee; border-radius: 8px; }
.motore-servizi-suggestions::-webkit-scrollbar-thumb:hover { background: #b4c9e8; }