/* ── Search Bar ─────────────────────────────────────────────── */

.search-bar {
    display: flex;
    align-items: center;
    width: 65px;
    height: 65px;
    border: 1px solid #DADADA;
    border-radius: 0px;
    overflow: hidden;
    background: #fff;
    transition:
        width 0.4s ease-in-out,
        border-color 0.2s ease;
}

.search-bar:hover {
    border-color: #918F8F;
}

.search-bar.is-open {
    width: 338px;
    /* adatta al contenitore con max-width se preferisci */
    border-color: #918F8F;
}

/* ── Pulsante icona lente ────────────────────────────────────── */

.search-bar__toggle {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #000;
    padding: 0;
}

/* ── Form (input + close) ────────────────────────────────────── */

.search-bar__form {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.15s;
    /* parte dopo che la barra ha iniziato ad aprirsi */
}

.search-bar.is-open .search-bar__form {
    opacity: 1;
    pointer-events: auto;
}

/* ── Input ────────────────────────────────────────────────────── */

.search-bar__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    color: var(--basic-black, #000);
    text-align: left;
    font-family: Poppins;
    font-size: var(--font-size-md, 16px);
    font-style: normal;
    font-weight: 300;
    line-height: var(--line-height-md, 26px);
    /* 162.5% */
    letter-spacing: 3px;
}

.search-bar__input::placeholder {
    color: #918F8F;
}

/* Rimuove la X nativa dei browser webkit */
.search-bar__input::-webkit-search-cancel-button {
    display: none;
}

/* ── Pulsante chiudi (X) ─────────────────────────────────────── */

.search-bar__close {
    flex-shrink: 0;
    width: 44px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #000;
    padding: 0;
    transition: opacity 0.2s ease;
}

.search-bar__close:hover {
    opacity: 0.5;
}

/* ── Accessibilità ────────────────────────────────────────────── */

.search-bar__toggle:focus-visible,
.search-bar__close:focus-visible {
    outline: 2px solid #000;
    outline-offset: -2px;
}

.search-bar__input:focus-visible {
    outline: none;
}