/* ============================================================================
   Barra di ricerca unificata - stile condiviso per TUTTI i blocchi VB di ricerca
   (ecommerce, blog, events, courses, forum, qna, guestpost, services,
    customersDirectory, wishlist + custom acatania/ticketwow).

   Caricato dai singoli shortcode via \Plugins\search->getAssets('css/searchBar.css')
   cosi' vale SIA nel Visual Builder SIA sul sito.

   SCOPE: .ms-search-form .ms-checkout-form-content > .ms-row:first-child
   - i pannelli "filters" (rentalcars/realestate) NON hanno .ms-checkout-form-content
     -> esclusi in automatico;
   - l'overlay .ms-advanced-search-block ha un look proprio -> escluso a mano;
   - la 2a riga (es. checkbox "solo titolo" del blog) e' fuori da :first-child
     -> non toccata.

   Solo CSS, nessuna modifica al markup. Il COLORE del bottone resta quello
   scelto nel pannello "Design" del blocco (non lo tocchiamo).
   ============================================================================ */

/* ---- Contenitore: i segmenti diventano un'unica barra arrotondata ---------- */
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child {
    margin: 0;
    flex-wrap: nowrap;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e2e6ee;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child:focus-within {
    border-color: var(--ms-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-color-primary) 18%, transparent);
}

/* ---- Segmenti (colonne): niente gutter, hairline divider tra i campi -------- */
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child > .ms-form-col {
    padding: 0;
    margin: 0;
    max-width: none;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column; /* permette [etichetta sopra / campo sotto] dove serve */
}
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child > .ms-form-col + .ms-form-col {
    border-left: 1px solid #e2e6ee;
}

/* I figli "campo" riempiono l'altezza del segmento (resta a filo anche con label) */
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child > .ms-form-col > .ms-search-input,
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child > .ms-form-col > .select2-container,
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child > .ms-form-col > .ms-button-container {
    flex: 1 1 auto;
}

/* Etichette opzionali (es. acatania): caption compatta dentro al segmento */
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child > .ms-form-col > label {
    margin: 0;
    padding: 8px 16px 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #98a2b3;
}

/* ---- Campi: input testuali + select2, borderless e integrati --------------- */
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child .ms-search-input,
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child .select2-container .select2-selection {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    min-height: 52px !important;
    width: 100% !important;
}
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child .ms-search-input {
    height: 100% !important;
    padding: 0 16px !important;
}
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child .ms-search-input::placeholder {
    color: #98a2b3;
    opacity: 1;
}

/* select2: il box selezione riempie e centra verticalmente il valore */
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child .select2-container .select2-selection {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
}
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child .select2-selection__rendered {
    padding: 0 !important;
    line-height: normal !important;
    color: var(--ms-color-dark);
}
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
}

/* ---- Bottone "Cerca": nessun divider prima, riempie il segmento, a filo ----- */
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child > .ms-form-col:has(.ms-button-container) {
    flex: 0 0 auto !important; /* si stringe al contenuto invece del 25% colonna */
    width: auto !important;
    max-width: none !important;
    border-left: 0 !important;
}
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child .ms-button-container {
    display: block !important; /* annulla il grid (+ il justify-self:flex-start globale) */
    height: 100%;
    width: auto;
}
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child .ms-btn {
    display: flex; /* riempie il contenitore + centra il testo */
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 52px;
    width: auto;
    border-radius: 0 !important;
    padding: 0 28px !important;
    font-weight: 600;
    white-space: nowrap;
}

/* ---- Righe successive (es. checkbox del blog): solo un po' d'aria ----------- */
.ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child ~ .ms-row {
    margin-top: 12px;
}

/* ---- Blocco STRETTO: le barre MULTI-campo (3+) si impilano in verticale ------
   Container query sulla larghezza reale del blocco (non del viewport): cosi'
   reagisce anche quando la barra e' messa in una colonna stretta su desktop.
   Le barre a 2 segmenti (campo + bottone) restano sempre in linea. */
.ms-search-form:not(.ms-advanced-search-block) {
    container-type: inline-size;
}

@container (max-width: 520px) {
    .ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child:has(> .ms-form-col:nth-child(3)) {
        flex-direction: column;
    }
    /* ogni campo a tutta larghezza, altezza naturale */
    .ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child:has(> .ms-form-col:nth-child(3)) > .ms-form-col {
        flex: 0 0 auto;
        width: 100% !important;
        max-width: none !important;
        border-left: 0 !important;
    }
    /* i divisori diventano orizzontali */
    .ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child:has(> .ms-form-col:nth-child(3)) > .ms-form-col + .ms-form-col {
        border-top: 1px solid #e2e6ee;
    }
    /* il bottone "Cerca" a tutta larghezza in fondo */
    .ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child:has(> .ms-form-col:nth-child(3)) .ms-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .ms-search-form:not(.ms-advanced-search-block) .ms-checkout-form-content > .ms-row:first-child .ms-btn {
        padding: 0 18px !important;
    }
}