/*
    default.css - modulo donazioni
    Layout responsive: due colonne su desktop, una colonna sotto i 768px.
*/
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: arial, helvetica, sans-serif;
    background: #fff;
    color: #333;
}

.contenitore {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 12px;
}

/* ---------- intestazione ---------- */
#header { margin-bottom: 1em; }
.header-img img { display: block; max-width: 100%; height: auto; }
.header-txt {
    background: #e8e8e8;
    font-size: 1.3em;
    line-height: 1.3em;
    padding: .6em 1em;
}

/* ---------- fieldset ---------- */
.ui-fieldset.blocco {
    border: 1px solid black !important;
    margin: 0 0 1em 0;
    padding: .5em 1em 1em 1em;
}
.ui-fieldset-legend { background: #edeff9 !important; }
.blocco-donativo { background-color: rgba(181, 212, 219, 0.31); }
.ui-widget-content { border: 0; }

/* ---------- griglia dei campi ---------- */
.griglia {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}
.campo {
    padding: 6px 8px;
    min-width: 0;
}
.campo > label, .campo > .ui-outputlabel {
    display: block;
    font-size: 12pt;
    margin-bottom: 4px;
}
.campo-intero  { width: 100%; }
.campo-meta    { width: 50%; }
.campo-largo   { width: 70%; }
.campo-stretto { width: 30%; }

.campo .ui-inputfield,
.campo .ui-selectonemenu { width: 100% !important; }
.campo .ui-selectonemenu { min-width: 0; }
.ui-selectonemenu label.ui-selectonemenu-label { color: #817a7a; }

.ui-outputlabel .ui-outputlabel-rfi, sup { color: red; }

/* ---------- autorizzazione privacy ---------- */
.autorizza { margin-top: 8px; }
.autorizza .ui-chkbox { display: flex; align-items: flex-start; gap: .5em; }
.autorizza .ui-chkbox-label { line-height: 1.4em; }
.nascosto { display: none; }

/* ---------- beneficiario e captcha ---------- */
.beneficiario .favore { font-weight: bold; margin-bottom: 4px; }
.g-recaptcha { margin-top: 12px; }

/* ---------- pulsante ---------- */
.pulsante { text-align: center; margin-top: 6px; }
.pulsante .ui-button { min-height: 44px; padding: 0 1em; }
.ui-icon-btndona {
    background-image: url("/donazioni/faces/jakarta.faces.resource/images/conferma.png") !important;
    background-size: contain;
    width: 24px;
    height: 24px;
    margin-top: -12px !important;
}

/* ---------- smartphone ---------- */
@media (max-width: 767px) {
    .header-txt { font-size: 1.1em; }
    .campo-meta, .campo-largo { width: 100%; }
    .campo-stretto { width: 50%; }
    .ui-fieldset.blocco { padding: .5em .6em .8em .6em; }
    .pulsante .ui-button { width: 100%; }
    /* evita lo zoom automatico di iOS sui campi */
    .ui-inputfield, .ui-selectonemenu-label, .ui-selectonemenu-filter { font-size: 16px !important; }
    .ui-selectonemenu-panel { max-width: calc(100vw - 16px); }
}
@media (max-width: 400px) {
    .campo-stretto { width: 100%; }
}
/* il widget reCAPTCHA e' largo 304px: lo si riduce sugli schermi molto stretti */
@media (max-width: 359px) {
    .g-recaptcha { transform: scale(0.85); transform-origin: 0 0; }
}