/*
 * Topbar su più righe (card 869f8t17y, 29-set-2026). La classe
 * .jo-topbar-2rows la mette public/js/topbar-two-rows.js solo quando chip,
 * filtro struttura, ricerca, campanella e avatar non stanno in una riga.
 *
 *   riga 1: chip hotel + Esci ........................ campanella, avatar
 *   riga 2: filtro struttura ........................... ricerca globale
 *
 * Più stretto ancora, la ricerca scende in una terza riga (a capo naturale
 * della riga 2). Nessuna larghezza cambia, tranne il filtro struttura, che
 * su più righe si allinea al chip (stessi 420px). Il blocco di destra di
 * Filament (ricerca + campanella + avatar, div x-persist "topbar.end")
 * diventa display:contents, così i suoi figli si dividono fra le righe.
 * Selettori sul markup di Filament (filament-panels::components.topbar):
 * ricontrollare a ogni aggiornamento.
 *
 * Spaziatura: niente row-gap (il gap si aprirebbe anche attorno alla riga
 * vuota dell'a capo forzato, raddoppiando lo spazio fra riga 1 e riga 2).
 * Ogni elemento ha invece .375rem sopra e sotto, più .375rem di padding
 * della barra: fra una riga e l'altra, e sotto l'ultima, restano sempre
 * 12px, e la riga 1 resta centrata dove sta nella topbar normale.
 */
.fi-topbar.jo-topbar-2rows > nav {
    flex-wrap: wrap;
    height: auto;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.fi-topbar.jo-topbar-2rows > nav > :not(.jo-partner-topbar-label),
.fi-topbar.jo-topbar-2rows > nav > [x-persist^="topbar.end"] > * {
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
}

/* Riga 1 alta come la topbar normale (4rem con il padding): un segnaposto
   largo 0 fissa l'altezza della riga, così gli elementi restano centrati
   dove stavano. Il margine negativo annulla il gap che gli si apre accanto. */
.fi-topbar.jo-topbar-2rows > nav::before {
    content: '';
    order: 0;
    width: 0;
    height: 2.5rem;
    margin-block: 0.375rem;
    margin-inline-end: -1rem;
}

/* A capo forzato: gli elementi con order 2 vanno dalla riga 2 in giù. */
.fi-topbar.jo-topbar-2rows > nav::after {
    content: '';
    order: 1;
    flex-basis: 100%;
    height: 0;
}

.fi-topbar.jo-topbar-2rows > nav > [x-persist^="topbar.end"] {
    display: contents;
}

/* Riga 2: filtro struttura a sinistra, ricerca a destra. */
.fi-topbar.jo-topbar-2rows .jo-structure-filter,
.fi-topbar.jo-topbar-2rows .fi-global-search {
    order: 2;
}

.fi-topbar.jo-topbar-2rows .fi-global-search {
    margin-inline-start: auto;
}

/* Filtro largo quanto il chip (420px, hotel-context-chip.blade.php), con la
   freccia in fondo come nel chip. Solo dove il chip c'è: nel pannello hotel
   il filtro resta della sua misura. */
.fi-topbar.jo-topbar-2rows:has(.jo-topbar-chip) .jo-structure-filter {
    width: 420px;
}

.fi-topbar.jo-topbar-2rows:has(.jo-topbar-chip) .jo-structure-filter-btn {
    width: 100%;
    max-width: none;
}

.fi-topbar.jo-topbar-2rows:has(.jo-topbar-chip) .jo-structure-filter-label {
    flex: 1;
}

/* Riga 1: campanella e avatar restano a destra. Prima li spingeva il ms-auto
   del blocco ora sciolto: lo prende il primo figlio che non sia la ricerca. */
.fi-topbar.jo-topbar-2rows > nav > [x-persist^="topbar.end"] > .fi-global-search + *,
.fi-topbar.jo-topbar-2rows > nav > [x-persist^="topbar.end"] > :first-child:not(.fi-global-search) {
    margin-inline-start: auto;
}