/* ============================================================
   Modalità beta — riquadro ambientale in cima a tutto, sopra la
   barra utility. Sempre visibile quando attivo. Stile volutamente
   distinto dal banner alert: striscia ambra con badge in evidenza,
   per segnalare "questo sito è in beta" senza confondersi con un
   avviso commerciale.
   ============================================================ */

.mz-beta-mode {
    background-color: #1d2433;
    color: #fff;
    font-family: var(--ff-ui);
    border-bottom: 2px solid var(--brand, #f5a623);
}

.mz-beta-mode__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-2) var(--s-3);
    text-align: center;
}

.mz-beta-mode__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 2px var(--s-2);
    border-radius: var(--radius-pill, 999px);
    background-color: var(--brand, #f5a623);
    color: #1d2433;
    font-size: var(--t-xs, 0.75rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    flex: 0 0 auto;
}

.mz-beta-mode__icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: currentColor;
}

.mz-beta-mode__text {
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
    color: rgba(255, 255, 255, 0.92);
}

.mz-beta-mode__text > :first-child { margin-top: 0; }
.mz-beta-mode__text > :last-child { margin-bottom: 0; }

.mz-beta-mode__text a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.mz-beta-mode__text strong { font-weight: 700; }
.mz-beta-mode__text em { font-style: italic; }

/* Pulsante CTA opzionale, in linea col badge e il testo. */
.mz-beta-mode__button {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill, 999px);
    background-color: var(--brand, #f5a623);
    color: #1d2433;
    font-family: var(--ff-ui);
    font-size: var(--t-xs, 0.75rem);
    font-weight: 800;
    letter-spacing: var(--tr-tight);
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--brand, #f5a623);
    flex: 0 0 auto;
    transition: background-color var(--d-1) var(--ease), border-color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}

.mz-beta-mode__button:hover,
.mz-beta-mode__button:focus-visible {
    background-color: #fff;
    border-color: #fff;
    color: #1d2433;
    transform: translateY(-1px);
}

.mz-beta-mode__button-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: currentColor;
    transition: transform var(--d-1) var(--ease);
}

.mz-beta-mode__button:hover .mz-beta-mode__button-icon,
.mz-beta-mode__button:focus-visible .mz-beta-mode__button-icon {
    transform: translateX(2px);
}

@media (max-width: 640px) {
    .mz-beta-mode__inner {
        gap: var(--s-1) var(--s-2);
        padding: var(--s-2);
    }
    .mz-beta-mode__text {
        font-size: var(--t-xs, 0.75rem);
        line-height: var(--lh-xs, 1.3);
    }
}