/* Regole proprie dell'app (STEP 14), caricate dopo Bootstrap: solo ritocchi per l'uso da
   telefono. Tutto il resto dell'aspetto resta affidato alle classi Bootstrap nelle view. */

/* Navbar: i pulsanti vanno a capo invece di uscire dallo schermo */
.navbar-azioni {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Carrello: una riga per Prodotto, impilata su telefono e in colonna da tablet in su */
.carrello-quantita {
    max-width: 5rem;
}

@media (max-width: 575.98px) {
    /* Meno spazio vuoto sopra e sotto il contenuto */
    .container.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Pannello dello Stand: le tre azioni principali occupano tutta la larghezza, così si
       toccano senza sbagliare durante il servizio */
    .azioni-titolo > form[data-offline-azione] {
        flex: 1 1 100%;
    }

    .azioni-titolo > form[data-offline-azione] > .btn {
        width: 100%;
        padding-top: .75rem;
        padding-bottom: .75rem;
    }
}

/* L'attributo hidden deve vincere sulle classi di layout di Bootstrap: .d-flex ha
   "display: flex !important" e teneva visibile, vuoto, il riquadro della coda offline del
   pannello (#coda-offline-badge) anche quando pannello-offline.js lo nasconde. */
[hidden] {
    display: none !important;
}

/* Scanner QR del pannello (STEP 16) */
#scanner-qr-video {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: #000;
    border-radius: .375rem;
}

/* Comanda trovata con la scansione: resta evidenziata finché non se ne scansiona un'altra */
.comanda-trovata {
    border-color: #fd7e14;
    box-shadow: 0 0 0 .25rem rgba(253, 126, 20, .45);
}

/* Pagina del Titolo: l'avviso "pronto" deve farsi notare a colpo d'occhio (STEP 18) */
.avviso-pronto {
    font-size: 1.15rem;
    font-weight: 600;
    border-width: 2px;
}