/*
 * Ricerca globale del topbar (Ctrl/⌘+K), vedi
 * resources/views/vendor/filament-panels/components/global-search/field.blade.php.
 *
 * - Campo più largo del default (l'input type=search nasce con la dimensione
 *   nativa di ~20 caratteri): il placeholder cita anche i gruppi di hotel.
 * - La "x" nativa del browser sugli input type=search è nascosta: al suo
 *   posto c'è il bottone .jo-gs-clear, lo stesso cerchietto del chip hotel.
 * - Il pannello risultati segue la larghezza del campo.
 *
 * Solo desktop (sm+): sotto, Filament comprime il topbar e il campo resta
 * fluido.
 */
@media (min-width: 640px) {
    .fi-global-search-field {
        width: 26rem;
    }

    .fi-global-search-results-ctn {
        max-width: 26rem;
    }
}

.fi-global-search-field input[type="search"]::-webkit-search-cancel-button,
.fi-global-search-field input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.jo-gs-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    margin-inline-end: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(228 228 231); /* zinc-200 */
    color: rgb(113 113 122);            /* zinc-500 */
    transition: background-color 0.15s, color 0.15s;
}

.jo-gs-clear:hover {
    background-color: rgb(212 212 216); /* zinc-300 */
    color: rgb(63 63 70);               /* zinc-700 */
}

.dark .jo-gs-clear {
    background-color: rgb(255 255 255 / 0.1);
    color: rgb(161 161 170);            /* zinc-400 */
}

.dark .jo-gs-clear:hover {
    background-color: rgb(255 255 255 / 0.2);
    color: rgb(228 228 231);            /* zinc-200 */
}

.jo-gs-clear svg {
    width: 0.7rem;
    height: 0.7rem;
}