<style>
/* ===== FORM RESPONSIVENESS - SLOW FOOD ===== */

/* Container principale */
.confiFormsFormBorder {
    max-width: 100% !important;
    margin: 20px 0 !important;
}

.confiFormsFormContent {
    padding: 20px !important;
}

.confiFormsFormTitle {
    padding: 10px !important;
}

.confiFormsFormFooter {
    padding: 15px 20px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Panelli (CONFERMA e UTILIZZO DEI DATI) */
.panel {
    margin: 15px 0 !important;
}

.panel .panelHeader {
    background-color: #357d42 !important;
    color: white !important;
    padding: 12px !important;
    font-weight: bold;
}

.panel .panelContent {
    padding: 15px !important;
}

/* Campi di testo */
.large-field,
input[class*="cf_text"],
input[type="text"].cf_text,
input[type="email"].cf_text,
input[type="tel"].cf_text {
    padding: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s !important;
}

input[class*="cf_text"]:focus,
input[type="text"].cf_text:focus,
input[type="email"].cf_text:focus,
input[type="tel"].cf_text:focus {
    outline: none !important;
    border-color: #e42312 !important;
    box-shadow: 0 0 5px rgba(228, 35, 18, 0.3) !important;
}

/* Paragrafi con campi */
.confiFormsFormContent > p {
    margin: 15px 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.confiFormsFormContent > p > span {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 250px;
}

.confiFormsFormContent > p > span > input[type="text"],
.confiFormsFormContent > p > span > input[type="email"],
.confiFormsFormContent > p > span > input[type="tel"] {
    width: 100% !important;
}

/* Checkbox privacy */
.cf_single_chck,
input[type="checkbox"].cf_single_chck {
    width: 18px !important;
    height: 18px !important;
    margin: 0 8px 0 0 !important;
    cursor: pointer !important;
    accent-color: #e42312 !important;
    flex-shrink: 0;
    margin-top: 2px !important;
}

/* Etichette */
.confiFormsFormContent label {
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Pulsante Invia */
.save-cf-btn,
.aui-button.save-cf-btn {
    background-color: #e42312 !important;
    color: white !important;
    padding: 14px 20px !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    flex: 0 1 auto;
}

.save-cf-btn:hover,
.aui-button.save-cf-btn:hover {
    background-color: #c41c0e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(228, 35, 18, 0.3) !important;
}

.save-cf-btn:active,
.aui-button.save-cf-btn:active {
    transform: translateY(0) !important;
}

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {
    .confiFormsFormContent {
        padding: 15px !important;
    }

    .panel .panelHeader {
        padding: 10px !important;
        font-size: 14px !important;
    }

    .panel .panelContent {
        padding: 12px !important;
    }

    .confiFormsFormContent > p {
        flex-direction: column;
        margin: 12px 0 !important;
    }

    .confiFormsFormContent > p > span {
        min-width: 100% !important;
        width: 100% !important;
    }

    .large-field,
    input[class*="cf_text"],
    input[type="text"].cf_text,
    input[type="email"].cf_text,
    input[type="tel"].cf_text {
        font-size: 16px !important;
        padding: 14px !important;
    }

    .confiFormsFormFooter {
        padding: 12px 15px !important;
        gap: 8px;
    }

    .save-cf-btn,
    .aui-button.save-cf-btn {
        padding: 16px 15px !important;
        font-size: 15px !important;
        width: 100% !important;
    }

    /* Checkbox su mobile */
    .confiFormsFormContent > p:has(input[type="checkbox"]) {
        flex-direction: row;
        align-items: flex-start;
    }

    input[type="checkbox"].cf_single_chck {
        margin-top: 3px !important;
    }
}

/* ===== TABLET ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .large-field,
    input[class*="cf_text"],
    input[type="text"].cf_text,
    input[type="email"].cf_text,
    input[type="tel"].cf_text {
        min-width: 280px !important;
    }
}

/* ===== DESKTOP ===== */
@media (min-width: 1025px) {
    .large-field,
    input[class*="cf_text"],
    input[type="text"].cf_text,
    input[type="email"].cf_text,
    input[type="tel"].cf_text {
        max-width: 380px !important;
    }
}

/* ===== FIX - Nascond il messaggio desktop su mobile ===== */
@media (max-width: 600px) {
    /* Nascondi il messaggio "Se navighi da smartphone..." */
    .columnLayout > .cell.normal > .innerCell > p:contains("Se navighi da smartphone") {
        display: none !important;
    }
}
</style>

* Campo obbligatorio