/* =============================================================================
   Stoli Search Dock — pillola di ricerca nell'header — v4.11.0-stoli
   Larghezza della pillola e spostamento delle icone con la stessa curva e durata;
   le icone si muovono con transform (fluido), la pillola cresce in width.
   ============================================================================= */

:root {
    --stoli-dock-ease: cubic-bezier(.22, .8, .24, 1);
    --stoli-dock-dur: .42s;
}

ul.second-nav-menu li.has-stoli-dock {
    position: relative;
    z-index: 3;
}
ul.second-nav-menu > li {
    transition: transform var(--stoli-dock-dur) var(--stoli-dock-ease), opacity .22s ease;
}

/* La pillola: chiusa è grande quanto la lente e invisibile, aperta cresce verso sinistra. */
.stoli-dock {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 30px;
    height: 40px;
    margin: -20px 0 0;
    padding: 0 6px 0 12px;
    overflow: hidden;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: width var(--stoli-dock-dur) var(--stoli-dock-ease), opacity .2s ease, visibility 0s linear .42s;
}
/* custom.js del tema aggiunge .table a tutti i form: Bootstrap limiterebbe la pillola
   a max-width 100% del li (50px) e le darebbe un margine sotto. */
form.stoli-dock.table {
    max-width: none !important;
    margin: -20px 0 0 !important;
}
/* light.css colora di #f1f1f1 ogni form e di bianco/grigio ogni input (con !important):
   qui serve la pillola scura e trasparente sulla barra nera. */
html body.theme-style-light form.stoli-dock {
    background: rgba(255, 255, 255, .08) !important;
}
html body.theme-style-light li.is-cover form.stoli-dock {
    background: rgba(20, 20, 20, .92) !important;
}
html body.theme-style-light .stoli-dock input.stoli-dock__input[type="search"] {
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
li.is-docked .stoli-dock {
    opacity: 1;
    visibility: visible;
    transition: width var(--stoli-dock-dur) var(--stoli-dock-ease), opacity .2s ease, visibility 0s;
}
/* La lente originale sparisce mentre la pillola è aperta (la sua lente prende il posto). */
li.has-stoli-dock > a {
    transition: opacity .2s ease;
}
li.is-docked > a {
    opacity: 0;
    pointer-events: none;
}

.stoli-dock__lens {
    flex: 0 0 auto;
    opacity: .85;
}
body .stoli-dock .stoli-dock__input,
body .stoli-dock .stoli-dock__input:focus {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    margin: 0;
    padding: 0;
    font-family: "Lora", serif !important;
    font-size: 16px !important;          /* niente zoom automatico su iPhone */
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.stoli-dock__input::placeholder {
    color: rgba(255, 255, 255, .62);
    opacity: 1;
}
.stoli-dock__input::-webkit-search-cancel-button {
    display: none;
}
/* L'anello di focus sta sulla pillola intera, non sul campo. */
.stoli-dock:focus-within {
    border-color: rgba(255, 255, 255, .6);
    box-shadow: 0 0 0 3px rgba(185, 160, 125, .35);
}
body .stoli-dock .stoli-dock__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, .8);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}
body .stoli-dock .stoli-dock__close:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

/* Telefono: la pillola copre la barra, menu, logo e icone sfumano. */
li.is-cover .stoli-dock {
    right: 10px;
    z-index: 5;
    background: rgba(20, 20, 20, .92);
}
.stoli-dock-faded {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity .2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .stoli-dock,
    li.is-docked .stoli-dock,
    ul.second-nav-menu > li {
        transition: none;
    }
}