/*
    style.css - Pay2Print
    Pagine larghe al massimo 600px, a tutta larghezza sugli smartphone.
*/
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 16px;
    background: #f4f5f9;
    font-family: arial, helvetica, sans-serif;
}

.pagina {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.ui-panel-titlebar {
    background: darkblue;
    color: white;
    font-weight: 700;
    font-size: 14pt;
}

.label {
    display: block;
    font-weight: bold;
    color: darkblue;
    margin-bottom: 4px;
}

.campo { margin: 12px 0; }
.campo .ui-inputfield,
.campo .ui-password,
.campo .ui-password input,
.campo .ui-selectonemenu { width: 100% !important; }

.spiegazione { margin-top: 0; }

.separatore {
    text-align: center;
    margin: 18px 0 6px 0;
    border-top: 1px solid #ccc;
    line-height: 0;
}
.separatore span {
    background: #fff;
    padding: 0 10px;
    color: darkblue;
    font-style: italic;
}

.pulsanti { margin-top: 18px; text-align: center; }
.pulsanti .ui-button { min-height: 44px; padding: 0 1em; }
.pulsanti.due { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.pulsanti.due .ui-button { flex: 1 1 200px; }

.intestazione { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nome { color: blue; }
.credito { color: red; white-space: nowrap; }
.esci { color: darkblue; }
.nota { font-size: 0.9em; color: #555; margin-bottom: 0; }

@media (max-width: 600px) {
    body { padding: 8px; }
    .pulsanti .ui-button { width: 100%; }
    /* evita lo zoom automatico di iOS sui campi */
    .ui-inputfield, .ui-selectonemenu-label { font-size: 16px !important; }
}