/* Stili per FORM (.cmxform) — pannello admin: aggiunta/modifica record,
   traduzioni, caricamento multiplo. Stessa palette di awv-table
   (screen.css per le custom properties). */

form.cmxform {
    max-width: 640px;
    margin: 1.5em auto;
    padding: 1.5em;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    color: #2b2b2b;
    font-size: 0.95em;
}

form.cmxform legend {
    padding: 4px 14px;
    background: var(--color-accent, #6a3fd9);
    color: #fff;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

form.cmxform fieldset {
    border: none;
    border-top: 1px solid #e4e7ec;
    margin: 0 0 1.2em;
    padding: 1em 0 0;
}
form.cmxform fieldset:first-of-type { border-top: none; padding-top: 0; }

form.cmxform label {
    display: block;
    width: auto;
    margin: 0.9em 0 0.3em;
    padding: 0;
    text-align: left;
    font-size: 0.85em;
    font-weight: 600;
    color: #555;
}
form.cmxform label:first-of-type { margin-top: 0; }

/* Asterisco per i campi obbligatori: sul required stesso, non sulla label
   (evita di dover marcare la label separatamente lato PHP). */
form.cmxform input:required,
form.cmxform select:required,
form.cmxform textarea:required {
    border-left: 3px solid var(--color-accent, #6a3fd9);
}

form.cmxform input,
form.cmxform select,
form.cmxform textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1em;
    padding: 9px 12px;
    margin: 0;
    border: 1px solid #d5d9e0;
    border-radius: 8px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
form.cmxform select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23555'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
form.cmxform textarea { min-height: 8em; resize: vertical; }

/* Il focus dei campi sta ora nel framework, css/awvComponents.css: era un
   bordo colorato PIU' un outline staccato di 1px, cioe' due tratti separati.
   Ora e' una linea sola con un alone diffuso attorno. Per personalizzarlo
   basta ridichiarare --color-focus-outline in screen.css - ma con un valore
   che superi il 3:1 su bianco. Il viola di Demo (#6a3fd9) lo supera: e' lui. */

form.cmxform input[readonly]  { background: #fafad0; }
form.cmxform input[disabled]  { background: #eee; border-color: #ccc; color: #888; }
form.cmxform input[type="file"] { border-style: dashed; padding: 14px 12px; background: #fafbfc; }
form.cmxform input[type="checkbox"],
form.cmxform input[type="radio"] {
    display: inline-block;
    width: auto;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

/* Testo informativo/nota accanto a un campo */
form.cmxform label.info,
label.info {
    display: block;
    margin: 3px 0 0;
    font-size: 0.78em;
    font-style: italic;
    color: #888;
    text-align: left;
}

/* Errori di validazione */
form.cmxform label.error,
label.error {
    display: block;
    margin: 4px 0 0;
    font-size: 0.82em;
    color: var(--color-danger, #CC0033);
    font-weight: 600;
}
form.cmxform input[aria-invalid="true"],
form.cmxform select[aria-invalid="true"],
form.cmxform textarea[aria-invalid="true"] {
    border-color: var(--color-danger, #CC0033);
}

/* Blocchi di campi mostrati/nascosti in base al tipo (gest_photo) */
form.cmxform .optional {
    margin: 1em 0;
    padding: .8em 1em;
    background: #fafbfc;
    border: 1px solid #eceef2;
    border-radius: 10px;
}

/* Pulsante di invio */
form.cmxform input[type="submit"],
form.cmxform input#button {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 10px 28px;
    border: none;
    border-radius: 999px;
    background: var(--color-accent, #6a3fd9);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
form.cmxform input[type="submit"]:hover,
form.cmxform input#button:hover { background: color-mix(in srgb, var(--color-accent, #6a3fd9) 82%, black); }
form.cmxform input[type="submit"]:focus-visible,
form.cmxform input#button:focus-visible {
    outline: 2px solid var(--color-focus-outline, #1a73e8);
    outline-offset: 2px;
}

form.cmxform img.form {
    display: block;
    max-width: 220px;
    margin: 0 0 .8em;
    border-radius: 8px;
    border: 1px solid #e4e7ec;
}
form.cmxform img.formico { width: 32px; height: 32px; }

/* Box "nota" (istruzioni sopra il form) */
.note {
    max-width: 640px;
    margin: 1.5em auto 0;
    padding: .9em 1.1em;
    background: color-mix(in srgb, var(--color-focus-outline, #1a73e8) 6%, white);
    border-left: 4px solid var(--color-focus-outline, #1a73e8);
    border-radius: 6px;
}
.note h4 { margin: 0 0 4px; font-size: 0.9em; color: color-mix(in srgb, var(--color-focus-outline, #1a73e8) 75%, black); }
.note p  { margin: 0; font-size: 0.88em; color: #444; }

p.error {
    max-width: 640px;
    margin: 1em auto;
    padding: .8em 1em;
    background: color-mix(in srgb, var(--color-danger, #CC0033) 6%, white);
    border-left: 4px solid var(--color-danger, #CC0033);
    border-radius: 6px;
    color: var(--color-danger, #CC0033);
}

/* Ricerca server-side (aWVgest::browse()): lo stile e' passato nel framework,
   css/awvComponents.css, perche' la form la emette il FW e la stilavano solo
   due progetti su undici. Il blocco che stava qui era identico a quello del
   framework a meno delle variabili di colore, e teneva la casella incollata al
   bordo sinistro perche' dichiarava margin: 0 0 1em.
   Il pulsante ora prende --awv-admin-bg, cioe' lo stesso verde dei pulsanti di
   amministrazione che gli stanno sopra, invece di --color-accent.
   Per riportarlo al verde chiaro basta rimettere qui la sola riga:
       form.awv-search input[type="submit"] { background: var(--color-accent); } */

/*RECAPTCHA*/
.g-recaptcha{margin:0 35%;}
/*PAYPAL BOTTON*/
form input.paypal{border:0px;width:auto;height:auto;}

/*jquery-ui*/
.ui-spinner { width: 90%; border-radius: 0; }

/* Codice per SMARTPHONE max 320 px  */
@media only screen and (max-width: 320px) {
    form.cmxform { padding: 1em; }
    .g-recaptcha { margin: 0; }
}

/* Codice per TABLET vert SMARTPHONE oriz 321-480 px */
@media only screen and (min-width: 321px) and (max-width: 480px) {
    .g-recaptcha { margin: 0; }
}

/* Codice per TABLET vert. 481 – 768 px */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .g-recaptcha { margin: 0 10%; }
}