#survey-min-width-warning {
    display: none;
    background: #ffcccc;
    color: #a00;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    margin: 20px 0;
}

#main-top-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 30px 0 0 0;
    background: var(--awb-color4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
#main-top-header .custom-logo {
    min-height: 130px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    width: 10%;
    margin: 20px;
}
#main-top-header>h2 {
    margin: 0 20px;
    width: calc(90% - 40px);
    text-transform: uppercase;
    font-size: 2.5em !important;
    text-align: center;
    color: #fff;
 }

.privacy-checkbox {
    margin: 20px 0;
    display: flex;
    align-items: center;
    background: #e3e3e3;
    padding: 10px;
}

.privacy-checkbox label {
    font-size: 1.2em;
    text-transform: uppercase;
}
.privacy-checkbox input {
    width: 2em;
    display: block;
    height: 2em;
    margin: 0 10px 0 0;
}

input#submission_code {
    border-radius: 4px;
    width: 140px;
    margin: 0 0 20px 0;
}


/* Survey container styling */
.survey-main-container {
    width: 100%;
    margin: 40px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
}

#modal-close { display:none; }

#modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#modal-content {
  	width:75%;
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.progress-bar-container {
    margin-top: 20px;
    width: 100%;
    height: 30px;
    background: #e0e0e0;
    border-radius: 0;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: #0d84d4;
    transition: width 0.2s ease;
}

.redirecting-message{
    font-size: 0.9em;
    color: #555;
    margin-top: 10px;
    text-align: center;
}

.progress-bar-container.thankyou-page {
    display: block;
    margin: 0;
}

/* Hide all steps by default */
.step {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Show the active step */
.step.active {
    display: block;
    opacity: 1;
}

.inner-step {
    
}

.question-row {
    border-bottom: 1px solid var(--awb-color2);
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.question-title {
    width: 24%;
    border-right: 1px solid var(--awb-color4);
    padding: 4px 20px 4px 0;
}
.question-answer-container {
    width: 74%;
    padding: 4px;
}


.question-row[data-question-type="readonly-field"][data-readonly-and-hide="yes"] {
    display: none;
}

.question-row[data-question-type="new-page"]{ 
    border-bottom: 0;
    margin: 0;
    padding: 0;
}

.question-row[data-question-type="single-choice-questions-header"] {
    margin: 0;
    padding: 0;
    border-bottom: 0;
}
.question-row[data-question-type="single-choice-question"]:not([data-last-question="yes"]) {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--awb-color4);
}

.question-row[data-question-type="single-choice-question"][data-last-question="yes"] {
    border-top: 1px solid var(--awb-color4);
    border-bottom: 1px solid var(--awb-color4);
    padding: 0;
}

.question-row[data-question-type="single-choice-question"][data-textarea-extra-row="1"] {
    display: none;
    border-top: 0;
}

.question-row[data-question-type="single-choice-question"][data-textarea-extra-row="1"] textarea {
    border-radius: 4px;
    display: block;
    width: 100%;
}

.question-row[data-question-type="single-choice-questions-header"] .question-answer-container>div.no-answer-column,
.question-row[data-question-type="single-choice-question"] .question-answer-container>div.no-answer-column {
    background: #ddd !important;
    color: #000 !important;
}

.question-row[data-question-type="single-choice-questions-header"] .question-answer-container,
.question-row[data-question-type="single-choice-question"]:not([data-textarea-extra-row="1"]) .question-answer-container {
    display: grid;
    gap: 10px;
    grid-auto-flow: column;
    align-content: space-around;
    grid-auto-columns: 1fr;
}

.question-row[data-question-type="single-choice-questions-header"] .question-answer-container>div {
    text-align: center;
    background: var(--awb-color4);
    color: #fff;
    padding: 8px 4px;
    margin: 0 0 0 0;
}

.question-row[data-question-type="single-choice-question"] .question-answer-container>div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 0;
}
.question-row[data-question-type="single-checkbox-question"] .question-answer-container input[type="checkbox"],
.question-row[data-question-type="multi-choice-question"] .question-answer-container input[type="checkbox"],
.question-row[data-question-type="single-choice-custom-question"] .question-answer-container input[type="radio"] {
    width: 1.5em;
    height: 1.5em;
}
.question-row[data-question-type="single-choice-question"] .question-answer-container>div>span, .question-row[data-question-type="single-choice-question"] .question-answer-container>div>input {
    width: 100%;
    text-align: center;
}
.question-row[data-question-type="single-choice-question"] .question-answer-container>div>input {
    margin: 0 auto;
    width: 1.5em;
    height: 1.5em;
}















/* Il box risposta (ora è una label, ma si comporta come un pulsante) */
.question-row[data-question-type="single-choice-question"] .question-answer-container .question-answer {
    display: flex;
    flex-direction: column;   /* Allinea verticalmente testo e radio (se presenti entrambi) */
    align-items: center;
    justify-content: center;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
    min-height: 50px;         /* Garantisce un'ottima area di click anche se vuoto */
}

/* Hover: feedback visivo immediato al passaggio del mouse */
.question-row[data-question-type="single-choice-question"] .question-answer-container .question-answer:hover {
    background-color: #f8f9fa;
    border-color: #b0bec5;
}

/* Quando il radio è invisibile (come hai chiesto) */
.question-row[data-question-type="single-choice-question"] .question-answer-container .question-answer input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* SELEZIONATO: Il trucco magico del :has() per colorare tutto il box di verde */
.question-row[data-question-type="single-choice-question"] .question-answer-container .question-answer:has(input[type="radio"]:checked) {
    background-color: #e8f5e9; /* Verde morbido riposante */
    border-color: #4caf50;     /* Bordo verde chiaro */
    color: #1b5e20;            /* Testo verde scuro */
    font-weight: bold;
}

/* Gestione dello span interno (quando c'è l'opzione show-labels) */
.question-row[data-question-type="single-choice-question"] .question-answer-container .question-answer span {
    margin-bottom: 5px;
    font-size: 0.95rem;
    text-align: center;
}

































.question-row[data-question-type="rating-scale"] .question-answer-container input[type="range"] {
    width: 100%;
}

.question-row[data-question-type="rating-scale"] .question-answer-container input.rating-value-input {
    border-radius: 4px;
    width: 100px !important;
}
.question-row[data-question-type="rating-scale"] .question-answer-container textarea.rating-textarea {
    border-radius: 4px;
}

.question-row[data-question-type="free-text-question"] .question-answer-container>textarea,
.question-row[data-question-type="free-text-question"] .question-answer-container>input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

.question-row[data-mandatory="yes"] .question-title:after {
    content: "*  Risposta obbligatoria";
    display: block;
    font-size: 0.75em;
    color: #da1717;
    text-transform: uppercase;
    font-weight: bold;
}

.question-row .other-text {
    display: none;
    width: calc(100% - 24px);
    border-radius: 4px;
    margin: 4px 0 0 30px;
}

.question-row[data-question-type="rating-scale"] .other-text {
    display: block;
    margin: 0;
}

p.question-hint {
    font-size: 0.8em !important;
    padding: 0 0 0 25px;
    margin: 0;
}

p.question-hint:before {
    content: "\f05a";
    font-family: "Font Awesome 5 Free";
    font-weight: 800;
    margin: 0 0 0 -25px;
    padding: 0 5px 0 0;
    color: #147bca;
    font-size: 1.2em;
}

/* Sfondo rosso tenue */
.errors, .field-error {
    border-left: 10px solid #cf2424 !important;
    transition: background-color 0.8s ease;
    padding: 8px 20px;
    background: #dad5d5;
}

.submission-code-thankyou-page, .print-thankyou-page {
    text-align: center;
    width: fit-content;
    margin: 20px auto 0 auto;
    font-size: 0.7em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.submission-code-thankyou-page>strong {
    letter-spacing: 0.5px;
    border: 2px solid #c41f1f;
    padding: 8px;
    margin: 0 0 0 10px;
}
.submission-code-thankyou-page>strong:after{
    content: "\f0c5";
    font-family: "Font Awesome 5 Free";
    font-weight: 800;
    margin: 0 0 0 10px;
    color: #c41f1f;
    font-size: 1.2em;
    cursor: pointer;
}

/* Buttons styling */
.survey-main-container button, .survey-main-container input[type="submit"] {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 10px 0 0;
    font-size: 14px;
    color: #fff;
    background-color: var(--awb-color4);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.3s;
    text-transform: uppercase;
}
.survey-main-container input[type="submit"]{margin: 0 0 0 20px;}

.survey-main-container button:hover, .survey-main-container input[type="submit"]:hover {
    background-color: #0056b3;
}

.survey-main-container button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.nav {
    display: flex;
    justify-content: center;
}

button.prev-button:before {
    content: "\f053";
    font-family: 'Font Awesome 5 Free';
    font-weight: 800;
    padding: 0 20px 0 0;
}

button.next-button:after {
    content: "\f054";
    font-family: 'Font Awesome 5 Free';
    font-weight: 800;
    padding: 0 0 0 20px;
}


/* Submit button */
button.submit-button {
    background-color: #28a745;
}

button.submit-button:hover {
    background-color: #218838;
}

@media only screen and (max-width: 768px) {
    #main-top-header { flex-wrap: wrap; }
    #main-top-header>h2 { width: 100%; }
    #main-top-header>h2 { font-size: 2em !important; margin: 10px;}
    #main-top-header .custom-logo {
        min-height: 100px;
        margin: 10px;
    }
    .question-title {
        width: 100%;
        border-right: 0;
    }
    .question-answer-container {
        width: 100%;
        padding: 0;
    }
    .question-row[data-question-type="single-choice-question"]:not([data-last-question="yes"]) {
        margin: 0 0 20px 0;
        padding: 10px 0 10px 0;
        border-top: 2px solid var(--awb-color4);
        border-bottom: 0;
    }

    .question-row[data-question-type="single-choice-question"] .question-answer-container .question-answer {
        padding: 2px;
        min-height: 30px;
    }

    .question-row[data-question-type="single-choice-question"] .question-answer-container .question-answer span {
        font-size: 0.85rem;
    }
}