:root {

    --green: #009246;
    --green-dark: #006B29;
    --green-light: #F3F8EE;

    --yellow: #FAB900;
    --orange: #DB8F1B;

    --black: #1D1D1B;
    --text: #333333;

    --background: #F8F9F7;

    --white: #FFFFFF;

    --border: #DDDDDD;

}

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

fieldset {

    border: 0;
    padding: 0;
    min-width: 0;

}

legend {

    padding: 0;

}


/* ===========================
   ACCESSIBILITA'
=========================== */

.visually-hidden {

    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;

}


.skip-link {

    position: absolute;

    top: -60px;
    left: 10px;
    z-index: 1000;

    background: var(--green-dark);
    color: var(--white);

    padding: 12px 20px;

    border-radius: 0 0 8px 8px;

    font-weight: bold;
    text-decoration: none;

    transition: top .2s ease;

}


.skip-link:focus {

    top: 0;

}


/* Anello di focus visibile e coerente su tutti gli elementi
   interattivi, per chi naviga da tastiera. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {

    outline: 3px solid var(--orange);
    outline-offset: 2px;

}


/* asterisco automatico sui campi obbligatori */

.form-group label:has(+ input:required)::after,
.form-group label:has(+ select:required)::after,
.form-group label:has(+ textarea:required)::after {

    content: " *";
    color: var(--orange);

}


.ima-required-note {

    text-align: center;

    margin-bottom: 20px;

    font-size: 14px;
    font-style: italic;

    color: var(--text);

}
.ima-notafinale {
    text-align: center;

    margin-bottom: 20px;

    font-size: 24px;
    font-style: italic;
    font-weight: bold;

    color: var(--green-dark);
}

.ima-error-summary {

    background: #FCEBEA;

    border: 2px solid #C0392B;
    border-radius: 8px;

    color: #7A2419;

    padding: 15px 20px;

    margin-bottom: 25px;

    font-weight: bold;

}

html,
body {

    min-height: 100%;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--background);

}

body {

    display: flex;
    flex-direction: column;

}

.ima-page {

    min-height: 100vh;
    display: flex;
    flex-direction: column;

}

.ima-container {

    width: 90%;
    max-width: 1400px;
    margin: 0 auto;

}


/* ===========================
   HEADER
=========================== */

.ima-header {

    background: var(--white);
    border-bottom: 6px solid var(--green);
    padding: 15px 0;

}

.ima-header .ima-container {

    display: flex;
    justify-content: center;
    align-items: center;

}

.logo {

    display: block;
    width: 375px;
    object-fit: contain;
    max-width: 100%;

}



/* ===========================
   HEADER SOTTO
=========================== */

.ima-header-down {

    background: var(--white);
    border-top: 6px solid var(--green);
    padding: 15px 0;

}

.ima-header-down .ima-container {

    display: flex;
    justify-content: center;
    align-items: center;

}

.leucum {

    display: block;
    width: 300px;
    object-fit: contain;
    max-width: 100%;

}

/* ===========================
   MAIN
=========================== */

.ima-main {

    flex: 1;

}


/* ===========================
   SERVIZIO
=========================== */

.ima-service-label {

    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;

    font-size: 26px;
    font-weight: bold;

    color: var(--green-dark);

}

.ima-service-description {

    width: 100%;
    margin: 0 0 30px;
    padding: 24px 28px;

    background: var(--white);
    border: 2px solid var(--green);
    border-radius: 10px;

    color: var(--text);

}

.ima-service-description h2 {

    margin-bottom: 10px;

    color: var(--green-dark);
    font-size: 22px;

}

.ima-service-description p {

    font-size: 17px;
    line-height: 1.6;
    white-space: pre-line;

}


/* ===========================
   BOTTONI
=========================== */

.ima-buttons {

    display: flex;
    justify-content: space-between;
    align-items: stretch;

    gap: 20px;

    margin-top: 25px;
    margin-bottom: 40px;

}


.ima-button {

    flex: 1;

    background: var(--white);

    border: 3px solid var(--green);

    border-radius: 18px;

    min-height: 120px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 20px;

    text-align: center;

    color: var(--green-dark);

    font-size: 19px;
    font-weight: bold;

    cursor: pointer;

    transition: all .25s ease;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);

}


.ima-button-icon {

    display: block;

    font-size: 44px;
    line-height: 1;

    margin-bottom: 12px;

}


.ima-button:hover,
.ima-button.active {

    background: var(--green);

    color: var(--white);

    border-color: var(--yellow);

}


/* ===========================
   FORM
=========================== */

.hidden {

    display: none !important;

}


.ima-form-box {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 35px;
    padding-top: 20px; /* spazio sopra il contenuto */
    margin-bottom: 40px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

.ima-form-box > legend {
    width: 100%;
    text-align: center;

    color: var(--green-dark);
    font-size: 22px;
    font-weight: bold;

    margin: 0 0 25px 0;
    padding: 0;

    float: none;
}

.ima-form-box > legend.visually-hidden {

    width: 1px;

}

.ima-form-title {
    color: var(--green-dark);
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 25px;
}

.form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}


.form-group {

    display: flex;

    flex-direction: column;

}

.service-recipient-selector {

    align-items: center;
    max-width: 600px;
    margin: 0 auto 35px;

}

.service-recipient-selector label {

    text-align: center;
    font-size: 20px;

}

.form-group.service-recipient-selector select {

    font-size: 18px;

}


.form-group.full {

    grid-column: 1 / -1;

}


/* campo full ma dimensione normale centrata */

.centered-field {

    grid-column: 1 / -1;

    width: 50%;

    margin: 0 auto;

}


/* cellulari */

.cellulare-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}


.form-group label {

    margin-bottom: 6px;

    font-weight: bold;

    color: var(--green-dark);

}


.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid var(--border);

    border-radius: 8px;

    font-size: 16px;

    background: var(--white);

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    outline: none;

    border-color: var(--green);

}


/* riabilita un anello di focus ben visibile per chi naviga
   da tastiera (l'outline resta rimosso solo al click col mouse) */

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {

    outline: 3px solid var(--orange);
    outline-offset: 2px;

}


.form-group textarea {

    resize: vertical;

    min-height: 120px;

}


/* ===========================
   READONLY
=========================== */

.form-group input[readonly],
.form-group textarea[readonly] {

    background-color: #eeeeee;

    color: #666666;

    cursor: not-allowed;

}


/* ===========================
   TRATTE
=========================== */

.tratta-container {

    width: 100%;

    margin-top: 25px;

}


.section-title {

    margin: 25px 0 10px;

    color: var(--green-dark);

    font-size: 22px;

}

#captcha-container {

    margin-top: 30px;
    display: flex;
    justify-content: center;

}

/* ===========================
   FOOTER
=========================== */

.ima-footer {

    background: var(--black);

    color: var(--white);

}


.footer-content {

    text-align: center;

    padding: 35px 0;

}


.footer-info h2 {

    font-size: 24px;

    margin-bottom: 20px;

}


.footer-info p {

    margin: 8px 0;

    line-height: 1.6;

}


.footer-info a,
.footer-bottom a {

    color: var(--yellow);

    text-decoration: none;

    font-weight: bold;

}


.footer-info a:hover,
.footer-bottom a:hover {

    color: var(--white);

    text-decoration: underline;

}


.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, .15);

    text-align: center;

    padding: 20px;

    font-size: 14px;

}

/* ===========================
   CONSENSO PRIVACY
=========================== */

.ima-privacy-consent {

    grid-column: 1 / -1;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    max-width: 700px;

    margin: 25px auto 20px;

    padding: 18px 22px;

    background: var(--green-light);

    border-radius: 10px;

}


.ima-privacy-consent input[type="checkbox"] {

    width: 20px;
    height: 20px;

    flex-shrink: 0;

    margin-top: 3px;

    accent-color: var(--green);

}


.ima-privacy-consent label {

    color: var(--green-dark);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;

}


.ima-privacy-consent a {

    color: var(--green-dark);

    font-weight: bold;

}


.ima-required-mark {

    color: var(--orange);

    font-weight: bold;

}


/* ===========================
   BOTTONE INVIO
=========================== */

.form-submit-container {

    display: flex;

    justify-content: center;

    margin-top: 30px;

    margin-bottom: 30px;

}


.ima-submit-button {

    background: var(--green);

    color: var(--white);

    border: none;

    border-radius: 12px;

    padding: 15px 60px;

    font-size: 18px;

    font-weight: bold;

    cursor: pointer;

    transition: all .25s ease;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .15);

}


.ima-submit-button:hover {

    background: var(--green-dark);

    transform: translateY(-2px);

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:992px) {

    .ima-buttons {

        flex-wrap: wrap;

    }


    .ima-button {

        min-width: calc(50% - 10px);

    }

}


@media(max-width:768px) {

    .logo {

        width: 200px;

        height: 200px;

    }


    .ima-service-label {

        font-size: 22px;

    }


    .ima-buttons {

        flex-direction: column;

    }


    .ima-button {

        min-width: 100%;
        min-height: 90px;
        font-size: 17px;
        padding: 15px 20px;

    }


    .ima-button-icon {

        font-size: 34px;
        margin-bottom: 8px;

    }


    .ima-form-box {

        padding: 20px;

    }


    .form-grid {

        grid-template-columns: 1fr;

    }


    .form-group.full {

        grid-column: auto;

    }


    .centered-field {

        width: 100%;

    }


    .cellulare-container {

        grid-template-columns: 1fr;

    }


    .form-submit-container {

        margin-top: 20px;
        margin-bottom: 10px;

    }


    .ima-submit-button {

        width: 100%;
        padding: 16px 20px;

    }

}


@media(max-width:480px) {

    .ima-container {

        width: 94%;

    }


    .ima-header {

        padding: 10px 0;

    }


    .logo {

        width: 140px;

        height: 140px;

    }


    .ima-service-label {

        font-size: 19px;
        margin-top: 15px;

    }


    .ima-form-box {

        padding: 15px;
        border-radius: 10px;

    }


    .ima-form-box>legend {

        font-size: 20px;
        margin-bottom: 20px;

    }


    .section-title {

        font-size: 18px;

    }

}