/* Reset CSS */
/*==============================================
G E N E R A L I  ---------- --------------------
==============================================*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

:root {
    --main-color: #db0906;          /* var(--main-color) */
    --secondary-color: #2f4858;
  }

* {
    font-family: "Roboto Flex", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*==============================================
inizio I N D E X . H T M L  --------------------
==============================================*/

body {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    color: #333;
    line-height: 1.6;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#main-content {
    flex-basis: 94vh;
    margin: 0;
    padding-top: 24px;
    /* display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center; */
}
h1 { /* titolo h1 inizio pagina */
    font-size: 32px;
    color: var(--main-color);
    padding-bottom: 10px;
    line-height: 32px;
}

p.sottotitolo { /* sottotitolo pagina */
    padding-bottom: 20px;
    font-size: 16px;
}
form, h1, p.sottotitolo {
    max-width: 600px;
    margin: auto;
}
form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end; /* muove il button to dx */
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: auto;
}
fieldset {
    flex-basis: 100%;
    border: none;
    margin-bottom: 20px;
}
legend {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--secondary-color);
    font-weight: 700;
    border-bottom: 1px solid #efefef;
    padding-bottom: 12px;
}
p.domanda {
    font-size: 22px;
    color: var(--secondary-color);
    margin-bottom: 12px;
}
div {
    margin-bottom: 10px;
}
label {
    font-size: 16px;
    color: #555;
}
input[type="radio"] {
    margin-right: 10px;
}
textarea, input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
input[type="checkbox"], input[type="radio"] {
    width: auto; /* fix per il generico input width 100% */
}
input[type="checkbox"] {
    margin-right: 8px;
}
button.btn-submit {
    background: var(--main-color);
    text-transform: uppercase;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}
button.btn-submit:hover {
    background: #ee7d7b;
}
#footer{
    -ms-flex-preferred-size: 6vh;
    flex-basis: 6vh;
    background-color: #efefef;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#logo-innovaresoft-footer {
    max-width: 200px;
    /* height: max-content; */
    padding: 10px 0;
}

/*==============================================
fine I N D E X . H T M L  --------------------
==============================================*/

/*==============================================
inizio T H A N K  Y O U . P H P ----------------
==============================================*/

body.body-thank-you-page #main-content {
    background: #fff;
    max-width: 670px;
    margin: auto;
    padding-left: 35px;
    padding-right: 35px;
}
body.body-thank-you-page h1 {
    margin-bottom: 20px;
    text-align: left;
}

/*==============================================
fine T H A N K  Y O U . P H P ------------------
==============================================*/

/*==============================================
inizio M O B I L E  ----------------------------
==============================================*/

@media only screen and (max-width: 800px) {
    #main-content {
        padding: 20px 12px;
    }
    #main-content form, h1, p.sottotitolo {
        margin: 0 !important;
    }
    h1 {
        font-size: 22px;
    }
    p.domanda {
        font-size: 20px;
        line-height: 26px;
    }
    legend {
        font-size: 16px;
    }
    label, textarea, input, button.btn-submit {
        font-size: 16px;
    }
}
