{% extends "global/Page.html" %}
{{ block title }}
<p class="d-none">La sua opinione</p>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
{{ endblock }}

{% block content %}

<style>
    .otree-body { max-width: 800px; }
input[type="radio"].form-check-input {
    vertical-align: middle;
    margin-right: 0.5em;
    border: 2px solid #2563eb;
    transform: scale(1.15) translateY(-1px);
    transform-origin: left center;
}
input[type="radio"].form-check-input:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

/* ========== CHECKBOXES (per la pagina Privacy, se vuoi) ========== */
input[type="checkbox"].form-check-input {
    vertical-align: middle;
    margin-right: 0.5em;
    border: 2px solid #2563eb;
    cursor: pointer;
    transform: scale(1.15) translateY(-1px);
    transform-origin: left center;
}
input[type="checkbox"].form-check-input:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

/* Focus del menu a tendina (Demografia) in blu */
select.form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.35);
}

/* ========== LABEL ========== */
.form-check { margin-bottom: 0.75rem; }
.form-check-input:checked + label,
.form-check-input:checked ~ label { font-weight: 500; }
.form-check-label { cursor: pointer; }

/* Hover leggero */
.form-check-input:hover {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}
</style>

<div class="container">
    <div class="card bg-light mb-4">
        <div class="card-body">
            <p class = "fs-5"> Per favore indichi se è d'accordo o in disaccordo con le seguenti affermazioni:</p>
                <hr>{{ if show_titolo }}{{ formfield 'opinione_titolo' }} <hr>{{ endif }}
                {{ if show_danno }}{{ formfield 'opinione_danno' }}<hr>{{ endif }}
                {{ if show_segnalazione }}{{ formfield 'opinione_segnalazione' }}<hr>{{ endif }}
        </div>
    </div>
</div>

{{ include C.next_progress }}
{% endblock %}