@keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.5);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}
@keyframes error-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.input-pulse {
    animation: pulse 1s ease-out;
}
.input-error-pulse {
    animation: error-pulse 1s ease-out;
}

.q_text{
    color: var(--qx-info);
}
.nav-logo{
    height: 30px;
}
/* Bandiere delle valute (12/10/2026). Le bandiere sono emoji (coppie di
   «regional indicator»): Windows non ha un font che le disegni e Chrome
   mostra le due lettere (CH, EU). Questo font contiene SOLO le bandiere
   (unicode-range) e va davanti al font normale: su Windows disegna le
   bandiere, per tutto il resto resta il font di sistema. Nessuna
   estensione del browser serve più. Font: Twemoji Country Flags, da
   country-flag-emoji-polyfill (MIT), glifi Twemoji (CC-BY 4.0). */
@font-face {
    font-family: "Twemoji Country Flags";
    src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
                   U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
    font-display: swap;
}
body, .select2-container, .select2-dropdown {
    font-family: "Twemoji Country Flags", system-ui, -apple-system, "Segoe UI",
                 Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial,
                 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                 "Noto Color Emoji";
}

/* Select2 dentro un input-group (es. nazionalità, stato di residenza):
   si comporta come un .form-control, prende lo spazio accanto all'etichetta
   invece di andare a capo. */
.input-group > .select2-container--bootstrap-5 {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}
.input-group > .select2-container--bootstrap-5 .select2-selection {
    height: 100%;
    min-height: calc(1.5em + .75rem + 2px);
}

/* Menu a tendina (14/10/2026): un albero leggibile a colpo d'occhio.
   Titolo di sezione con icona, elenchi a filo con la loro icona, voci
   «Nuovo…» rientrate con il «+» verde. */
.qx-menu {
    min-width: 17rem;
    padding: .4rem 0;
}
.qx-menu .qx-menu-header {
    --qx-menu-color: var(--qx-primary);  /* ogni sezione passa il suo (change_site/menu.py) */
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem .35rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--qx-menu-color);
}
.qx-menu .qx-menu-header .bi {
    font-size: 1.1rem;
}
.qx-menu .qx-menu-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 1rem .4rem 1.1rem;
}
.qx-menu .qx-menu-item .bi {
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
    opacity: .8;
}
.qx-menu .qx-menu-new {
    padding-left: 2.1rem;
    font-size: .92em;
    opacity: .9;
}
.qx-menu .qx-menu-new .bi {
    color: var(--qx-success);
    opacity: 1;
}
.qx-menu .qx-menu-item.active {
    background-color: var(--qx-primary);
}
.qx-menu .qx-menu-item.active .bi {
    color: inherit;
    opacity: 1;
}
.qx-menu .dropdown-divider {
    margin: .35rem 0;
}