/* ==========================================================================
   PERSONALIZZAZIONE MODULO DI RICERCA COMPATTO
   ========================================================================== */

/* 1. Box contenitore principale del modulo */
.modulo-ricerca-speciale {
    margin-bottom: 12px !important; 
    margin-top: 8px !important;     
    padding: 8px 12px !important;   
    background-color: #f0f4f8 !important; 
    border-radius: 6px !important;  
    border: 1px solid #d1d5db !important;
    display: block !important;
}

/* Forziamo il contenitore di Bootstrap a scomporsi del tutto */
.modulo-ricerca-speciale .input-group,
.modulo-ricerca-speciale div.input-group {
    display: flex !important;
    gap: 4px !important;            /* Questo comando inserisce un'intercapedine automatica di 10px tra gli elementi */
    flex-wrap: nowrap !important;
}

/* 2. Casella di testo (Input) */
.modulo-ricerca-speciale input.search-query, 
.modulo-ricerca-speciale input[type="search"],
.modulo-ricerca-speciale .form-control {
    font-size: 10pt !important;     
    height: 32px !important;        
    min-height: 32px !important;    
    line-height: 32px !important;   
    padding-top: 0px !important;    
    padding-bottom: 0px !important; 
    margin-bottom: 0px !important;  
    box-sizing: border-box !important;
    border: 1px solid #dee2e6 !important; 
    background-color: #ffffff !important; 
    
    /* Forza gli angoli arrotondati su tutti e 4 i lati */
    border-radius: 4px !important; 
    flex-grow: 1 !important;         /* Permette alla casella di occupare lo spazio rimanente */
}

/* 3. Casella di testo quando viene cliccata (Focus) */
.modulo-ricerca-speciale input.search-query:focus, 
.modulo-ricerca-speciale input[type="search"]:focus,
.modulo-ricerca-speciale .form-control:focus {
    border-color: #ced4da !important;  
    box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.25) !important; 
    outline: 0 !important;              
}

/* 4. Pulsante "Cerca" */
.modulo-ricerca-speciale button.btn,
.modulo-ricerca-speciale .btn-primary,
.modulo-ricerca-speciale button[type="submit"] {
    height: 32px !important;
    padding: 4px 10px !important;
    font-size: 10pt !important;
    margin-top: 0px !important;
    
    /* Forza il distacco totale a sinistra dal pulsante e arrotonda gli angoli */
    margin-left: 4px !important;   /* Spazio netto di 10 pixel a sinistra del pulsante */
    border-radius: 4px !important; 
}

/* 5. Nasconde la lente sul pulsante */
.modulo-ricerca-speciale button.btn .icon-search,
.modulo-ricerca-speciale button.btn i,
.modulo-ricerca-speciale button .icon-search,
.modulo-ricerca-speciale button.btn::before {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   POSIZIONAMENTO ICONE SOCIAL NELL'INTESTAZIONE
   ========================================================================== */

/* Se hai usato la posizione 'header' per il modulo social */
.header {
    position: relative !important; /* Rende l'header il punto di riferimento */
}

/* Identifichiamo il modulo dei social (puoi aggiungere una classe specifica nel modulo, 
   o intercettarlo se è dentro la topbar/header) */
.position-topbar, 
.header .mod-custom {
    position: absolute !important;
    right: 20px !important;       /* Spinge le icone a 20px dal bordo destro */
    top: 50% !important;          /* Le centra verticalmente nell'header */
    transform: translateY(-50%) !important; 
    z-index: 10 !important;       /* Forza il modulo a stare "sopra" l'immagine dell'intestazione */
    display: flex !important;
    gap: 15px !important;         /* Spazio tra un'icona social e l'altra */
}

/* Stile per le icone social dentro il modulo */
.position-topbar a,
.header .mod-custom a {
    transition: transform 0.2s ease !important;
}

/* Effetto zoom quando passi il mouse sopra il social (Icona attiva) */
.position-topbar a:hover,
.header .mod-custom a:hover {
    transform: scale(1.2) !important; 
    filter: brightness(1.2); /* Accende leggermente il colore al passaggio */
}