/***
 * F5 - Content Management System
 * 
 * Copyright © 2025
 * Reload - Laboratorio Multimediale
 * (http://www.reloadlab.it - info@reloadlab.it)
 * 
 * authors: Domenico Gigante (domenico.gigante@reloadlab.it) and Alessio Attanasio (alessio.attanasio@reloadlab.it)
 ***/

@charset "utf-8";
/* CSS Document */

/* general */
html {
    font-size: var(--font-size-base); /* Base size */
}
body {
    min-height: 100vh;
    background-color: rgb(var(--color-white));
    font-family: var(--font-family-base);
    font-size: clamp(16px, 1rem, 90px);
    color: rgb(var(--color-txt));
    line-height: var(--line-height-normal);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
}
.hidden {
    display: none;
}
.bi.fw-bold:before {
    font-weight: var(--font-weight-bold)!important;
}
a {
    color: rgb(var(--color-link));
}
a:hover,
a:active {
    color: rgb(var(--color-link-hover));
}
a:visited {
    color: rgb(var(--color-link-visited));
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: 9999px;
    border: none;
    font-size: var(--text-base-md);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}
.btn .bi {
    flex-shrink: 0;
    font-size: var(--text-base-lg);
    line-height: 1;
}
.btn:focus,
button.btn:focus:not(:focus-visible) {
	outline-width: 3px;
	outline-style: solid;
    outline-offset: 2px;
}
.btn:hover:not(:disabled) {
    transform: translateY(-2px);
}
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
/* § general */

/* header */
.header {
    position: relative;
    z-index: 999;
    background-color: rgb(var(--color-header));
    color: rgb(var(--color-header-inverse));
}
.header .header-content {
    height: 5rem;
}
.header .logo-container {
    display: flex;
    align-items: center;
    height: 5.75rem;
    padding: 0 1rem;
    border: 2px solid rgb(var(--color-header));
    border-top: 0;
    border-radius: 0 0 0.4375rem 0.4375rem;
    background-color: rgb(var(--color-header-inverse));
}
.header .logo-link {
    display: inline-block;
    text-decoration: none;
}
.header .logo-link:hover,
.header .logo-link:focus {
    outline: 2px solid rgb(var(--color-focus));
    outline-offset: 2px;
}
.header .logo-link .logo {
    width: 10rem;
    height: 4.375rem;
    margin-bottom: 0;
    background: url(../img/logo.png) center no-repeat;
    background-size: contain;
}
/* § header */

/* footer */
.footer {
    padding: 1.5rem 0;
    background-color: rgba(var(--color-footer), 0.1);
    border-top: 1px solid rgba(var(--color-footer-brd), 0.3);
}
.footer .footer-content {
    font-size: var(--text-base-xs);
    color: rgb(var(--color-footer-txt));
    text-align: center;
}
/* § footer */

/* navbar */
.nav-container {
    padding: 3.75rem 0 2.8125rem 0;
    border-bottom: 1px solid rgb(var(--color-brd-white));
    background-color: rgb(var(--color-white));
    overflow: hidden;
}
.nav-container .nav-wrapper {
    position: relative;
}
.nav-container .nav-line {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 0;
    right: 0;
    height: 0.3125rem;
    background-color: rgb(var(--color-bg-extra-light));
    transform: translateY(-50%);
}
.nav-container .nav-inner {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    height: 6.875rem;
}
.nav-container .nav-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.nav-container .nav-step {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 6.25rem;
    position: relative;
    width: 6.25rem;
    height: 6.25rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgb(var(--color-bg-extra-light));
    color: rgb(var(--color-navbar));
    overflow: hidden;
    transition: all 0.3s ease;
}
.nav-container .nav-step:before {
    font-size: var(--nav-step-ico);
}
.nav-container .nav-step:after {
    position: absolute;
    content: attr(aria-label);
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
}
.nav-container .nav-step.disabled {
    background-color: rgb(var(--color-bg-extra-light));
    cursor: not-allowed;
    transform: scale(0.9);
}
.nav-container .nav-step.completed {
    border: 3px solid rgb(var(--color-navbar));
    cursor: pointer !important;
}
.nav-container .nav-step.completed:hover {
    border: 3px solid rgb(var(--color-navbar-hover));
    box-shadow: 0 4px 12px rgba(var(--color-navbar-hover), 0.5);
    background-color: rgb(var(--color-navbar-hover));
    transform: scale(1.05);
}
.nav-container .nav-step.active {
    box-shadow: 0 6px 20px rgba(var(--color-navbar), 0.5);
    background-color: rgb(var(--color-navbar));
    color: rgb(var(--color-white));
    cursor: pointer !important;
    transform: scale(1.1);
    animation: pulse-active 2s ease-in-out infinite;
}
.nav-steps .slick-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 10.625rem;
}
.nav-steps .slick-track {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    height: 6.875rem;
}
.nav-steps.slick-initialized .slick-slide {
    display: flex;
}
.nav-steps .slick-prev,
.nav-steps .slick-next {
    width: 2.5rem;
    height: 2.5rem;
    z-index: 10;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(var(--color-shadow-black), 0.15);
    background-color: rgb(var(--color-white));
}
.nav-steps .slick-prev {
    left: -1.25rem;
}
.nav-steps .slick-next {
    right: -1.25rem;
}
.nav-steps .slick-prev:before,
.nav-steps .slick-next:before {
    display: block;
    margin-bottom: -2px;
    font-size: var(--text-base-lg);
    color: rgb(var(--color-navbar));
    opacity: 1;
}
.nav-steps .slick-prev:hover,
.nav-steps .slick-next:hover {
    background-color: rgb(var(--color-bg-extra-light));
}
.nav-steps .slick-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}
/* § navbar */

/* main */
.main {
    padding-top: 2rem;
    padding-bottom: 4.5rem;
    background-color: rgba(var(--color-main), 0.05);
}
.main .main-card {
    padding: 0;
    box-shadow: 0 10px 15px -3px rgba(var(--color-shadow-black), 0.15);
    border-radius: 0.5rem;
    background-color: rgb(var(--color-bg-white));
    overflow: visible;
    transition: padding-top 0.3s ease;
}
/* § main */

/* step header */
.step-header {
    padding: 2rem 2rem 1.5rem;
    background-color: rgb(var(--color-bg-white));
    transition: all 0.3s ease;
}
.step-header.fixed {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(var(--color-shadow-black), 0.15);
    animation: slideDownSticky 0.3s ease;
}
.step-header .step-gap {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.step-header .step-circle {
    position: relative;
    flex-shrink: 0;
}
.step-header .step-circle i {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    font-size: var(--step-circle-ico);
    color: rgb(var(--color-step-header));
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.step-header .step-circle svg {
    display: block;
}
.step-header .step-circle svg circle {
    stroke: rgb(var(--color-bg-extra-light))!important;
}
.step-header .step-circle svg circle#stepCircle {
    stroke: rgb(var(--color-step-header))!important;
}
.step-header .step-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}
.step-header .step-title {
    font-size: var(--text-base-xxxl);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-step-header));
    line-height: 1;
    transition: font-size 0.3s ease;
}
.step-header.fixed .step-title {
    font-size: var(--text-base-xl);
}
.step-header .step-description {
    font-size: var(--text-base-md);
    color: rgb(var(--color-txt-light));
}
/* § step header */

/* step footer */
.step-footer {
    margin-top: 2rem;
    padding: 2rem;
    border-top: 1px solid rgba(var(--color-step-footer-brd), 0.3);
    background-color: rgba(var(--color-step-footer), 0.1);
}
.step-footer .navigation-alert {
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid rgb(var(--color-warning-text));
    border-radius: 8px;
    background-color: rgb(var(--color-warning));
    animation: slideInDown 0.4s ease-out;
}
.step-footer .navigation-alert .alert-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.step-footer .alert-content .alert-icon {
    flex-shrink: 0;
    font-size: var(--text-base-lg);
    color: rgb(var(--color-warning-text)); /* Marrone scuro per contrasto con giallo */
}
.step-footer .alert-content .alert-text {
    font-size: var(--text-base-sm);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-warning-text)); /* Marrone molto scuro */
}
.step-footer .navigation-alert.fade-out {
    animation: slideOutUp 0.3s ease-in forwards;
}
.step-footer .footer-buttons-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.step-footer .navigation-buttons {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.step-footer .btn-next {
    border: 2px solid rgb(var(--color-btn-primary));
    background-color: rgb(var(--color-btn-primary));
    color: rgb(var(--color-btn-primary-txt));
}
.step-footer .btn-next:focus {
    outline-color: rgb(var(--color-btn-primary-focus));
}
.step-footer .btn-next:hover:not(:disabled) {
    border-color: rgb(var(--color-btn-primary-hover));
    background-color: rgb(var(--color-btn-primary-hover));
    color: rgb(var(--color-btn-primary-txt-hover));
    transform: translateX(5px);
}
.step-footer .btn-next:active {
    border-color: rgb(var(--color-btn-primary-active));
    box-shadow: 0 4px 12px rgba(var(--color-btn-primary-active), 0.15);
    background-color: rgb(var(--color-btn-primary-active));
    color: rgb(var(--color-btn-primary-txt-active));
}
.step-footer .btn-prev {
    border: 2px solid rgb(var(--color-btn-primary-outline-txt));
    background-color: rgb(var(--color-btn-primary-outline));
    color: rgb(var(--color-btn-primary-outline-txt));
}
.step-footer .btn-prev:focus {
    outline-color: rgb(var(--color-btn-primary-outline-focus));
}
.step-footer .btn-prev:hover:not(:disabled) {
    border-color: rgb(var(--color-btn-primary-outline-hover));
    background-color: rgb(var(--color-btn-primary-outline-hover));
    color: rgb(var(--color-btn-primary-outline-txt-hover));
    transform: translateX(-5px);
}
.step-footer .btn-prev:active {
    border-color: rgb(var(--color-btn-primary-outline-active));
    box-shadow: 0 4px 12px rgba(var(--color-btn-primary-outline-active), 0.15);
    background-color: rgb(var(--color-btn-primary-outline-active));
    color: rgb(var(--color-btn-primary-outline-txt-active));
}
.step-footer .btn-clear {
    border: 2px solid rgb(var(--color-btn-thirdary));
    background-color: rgb(var(--color-btn-thirdary));
    color: rgb(var(--color-btn-thirdary-txt));
}
.step-footer .btn-clear:focus {
    outline-color: rgb(var(--color-btn-thirdary-focus));
}
.step-footer .btn-clear:hover:not(:disabled) {
    border-color: rgb(var(--color-btn-thirdary-hover));
    background-color: rgb(var(--color-btn-thirdary-hover));
    color: rgb(var(--color-btn-thirdary-txt-hover));
}
.step-footer .btn-clear:active {
    border-color: rgb(var(--color-btn-thirdary-bg-active));
    box-shadow: 0 2px 8px rgba(var(--color-btn-thirdary-active), 0.15);
    background-color: rgb(var(--color-btn-thirdary-bg-active));
    color: rgb(var(--color-btn-thirdary-txt-active));
}
/* § step footer */

/* step body */
.step-body {
    padding: 2rem;
    background-color: rgb(var(--color-bg-white));
}
/* § step body */

/* question-wrapper */
.question-wrapper {
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.question-wrapper.overflow-visible {
    overflow: visible;
}
.question-wrapper.question-answered {
    padding-left: 1rem;
    border-left: 4px solid rgb(var(--color-quest-answered));
    transition: all 0.3s ease-in-out;
}
.question-wrapper + .question-wrapper {
    margin-top: 2rem;
}
.question-wrapper[data-conditional="true"][data-visible="true"] {
    animation: fadeInSlideDown 0.4s ease-out, highlightAppear 1.5s ease-out;
}
.question-wrapper[data-conditional="true"][data-visible="false"] {
    animation: fadeOutSlideUp 0.3s ease-in;
    animation-fill-mode: forwards;
}
.question-wrapper.transitioning {
    pointer-events: none;
}
.question-wrapper[data-visible="false"] {
    display: none;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}
.question-wrapper.force-visible {
    display: block !important;
    height: auto !important;
    opacity: 1 !important;
}
.question-wrapper.force-hidden {
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
}
.question-wrapper .question-header {
    background-color: rgb(var(--color-quest-hd-bg));
    padding: 0.75rem 0.9375rem;
    color: rgb(var(--color-quest-hd-txt));
    text-align: center;
    transition: all 0.3s ease-in-out;
}
.question-wrapper.question-answered .question-header {
    background-color: rgb(var(--color-quest-answered));
    color: rgb(var(--color-quest-answered-txt));
}
.question-wrapper .question-header h1 {
    margin-bottom: 0;
    font-size: clamp(16px, 1.375rem, 22px);
    font-weight: var(--font-weight-semibold);
}
.question-wrapper .question-notes {
    margin-top: 1.5rem;
    font-size: var(--text-base-md);
    color: rgb(var(--color-txt-lighter));    
    text-align: center;
}
.question-wrapper[data-question-code="H.17"] .question-notes {
    color: rgb(var(--color-txt-light));
	margin-left: 5%;
	margin-right: 5%;
	text-align: left;
}
.question-wrapper[data-question-code="H.17"] .question-notes em {
    color: rgb(var(--color-txt-primary));    
}
.question-wrapper .question-footer {
    margin-top: 1rem;
    font-size: var(--text-base);
    color: rgb(var(--color-txt-lighter));
    text-align: center;
}
.question-wrapper.question-answered .question-footer {
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-quest-answered-footer));
}
/* § question-wrapper */

/* radio button e checkbox */
.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 2rem;
}
.options-grid .option-item {
    position: relative;
}
.options-grid .option-item input[type="radio"],
.options-grid .option-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.options-grid .option-item .option-label {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 42px;
    padding: 0.625rem 2rem 0.625rem 4.75rem;
    border: 1px solid rgb(var(--color-brd-extra-light));
    box-shadow: inset 2px 2px 4px rgba(var(--color-shadow-black), 0.15);
    background-color: rgb(var(--color-bg-extra-light));
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.options-grid .option-item .checkmark {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 50%;
    width: clamp(50px, 3.5rem, 56px);
    height: clamp(50px, 3.5rem, 56px);
    border: 1px solid rgb(var(--color-brd-extra-light));
    outline: 5px solid rgb(var(--color-bg-white));
    border-radius: 50%;
    box-shadow: inset 2px 2px 4px rgba(var(--color-shadow-black), 0.15);
    background-color: rgb(var(--color-bg-extra-light));
    transform: translateY(-50%);
    transition: all 0.3s ease;
}
.options-grid .option-item .checkmark .bi {
    color: rgb(var(--color-bg-darker));
    line-height: 0;
    transition: all 0.3s ease;
}
.options-grid .option-item .checkmark .circle-icon {
    font-size: clamp(23px, 1.625rem, 26px);
}
.options-grid .option-item .checkmark .checkmark-icon {
    font-size: clamp(52px, 3.75rem, 60px);
}
.options-grid .option-item .option-label .option-text {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-txt-light));
    line-height: 1;
    word-break: break-all;
    transition: color 0.3s ease;
}
.options-grid .option-item input:checked + .option-label {
    border-color: rgb(var(--color-option-selected));
    background-color: rgb(var(--color-option-selected));
    color: rgb(var(--color-option-selected-txt));
}
.options-grid .option-item input:checked + .option-label .checkmark {
    border: 3px solid rgb(var(--color-option-selected));
    background-color: rgb(var(--color-option-selected-inverse));
}
.options-grid .option-item input:checked + .option-label .checkmark .bi {
    color: rgb(var(--color-option-selected));
}
.options-grid .option-item input:checked + .option-label .option-text {
    color: rgb(var(--color-option-selected-txt));
}
.options-grid .option-item .option-label:hover {
    background-color: rgb(var(--color-bg-extra-light));
    transform: translateY(-2px);
}
.options-grid .option-item input[type="radio"]:checked + .option-label:hover,
.options-grid .option-item input[type="checkbox"]:checked + .option-label:hover {
    background-color: rgb(var(--color-option-selected-hover));
}
.options-grid .option-item:focus-within .option-label {
    transform: translateY(0) scaleX(0.95);
}
.options-grid .option-item:focus-within .checkmark {
    transform: translateY(-50%) translateX(-1px);
}
.options-grid .option-item input:disabled + .option-label {
    box-shadow: none;
    border-color: rgba(var(--color-brd-extra-light), 0.35);
    background-color: rgb(var(--color-bg-extra-lighter));
    color: rgba(var(--color-txt-light), 0.35);
    cursor: not-allowed;
    pointer-events: none;
}
.options-grid .option-item input:disabled + .option-label .checkmark {
    box-shadow: none;
    border-color: rgba(var(--color-brd-extra-light), 0.35);
    background-color: rgb(var(--color-bg-extra-lighter));
}
.options-grid .option-item input:disabled + .option-label .checkmark .bi {
    color: rgba(var(--color-bg-darker), 0.35);
}
.options-grid .option-item input:disabled + .option-label .option-text {
    color: rgba(var(--color-txt-light), 0.35);
}
.options-grid .option-item input:disabled + .option-label:hover {
    background-color: rgb(var(--color-bg-extra-lighter));
    transform: none;
}
.options-grid .option-item .checkbox-text-input {
    box-sizing: border-box;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 2px solid rgb(var(--color-brd-extra-light));
    border-radius: 8px;
    background-color: rgb(var(--color-bg-extra-light));
    font-size: var(--text-base-xs);
    color: rgb(var(--color-txt-light));
    transition: all 0.3s ease;
}
.options-grid .option-item .checkbox-text-input:focus {
    outline: none;
    border-color: rgb(var(--color-option-selected));
    box-shadow: 0 0 0 3px rgba(var(--color-option-selected), 0.15);
}
.options-grid .option-item .checkbox-text-input:not(:placeholder-shown) {
    border-color: rgb(var(--color-option-selected));
    background-color: var(--color-option-selected);
}
.options-grid .option-item .checkbox-text-input::placeholder {
    font-style: italic;
    color: rgb(var(--color-brd-extra-light));
}
.options-grid .option-item .checkbox-text-input:disabled {
    border-color: rgba(var(--color-brd-extra-light), 0.35);
    background-color: rgb(var(--color-bg-extra-lighter));
    color: rgba(var(--color-txt-light), 0.35);
    cursor: not-allowed;
    pointer-events: none;
}
.options-grid .option-item .checkbox-text-input[style*="display: block"],
.options-grid .option-item .checkbox-text-input[style*="display: inline-block"] {
    animation: slideDown 0.3s ease;
}
/* § radio button e checkbox */

/* searchable select */
.searchable-select-container {
    padding: 2rem;
}
.searchable-select-container .searchable-select-wrapper {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}
.search-input-container {
    position: relative;
    width: 100%;
}
.search-input-container .search-input {
    width: 100%;
    padding: 1rem 3.125rem 1rem 3.125rem;
    border: 1px solid rgb(var(--color-brd-extra-light));
    border-radius: 9999px;
    box-shadow: inset 2px 2px 4px rgba(var(--color-txt-light), 0.15);
    outline: none;
    background-color: rgb(var(--color-bg-extra-light));
    font-size: var(--text-base-md);
    font-weight: var(--font-weight-medium);
    color: rgb(var(--color-txt-light));
    cursor: pointer;
    transition: all 0.3s ease;
}
.search-input-container .search-input:focus {
    box-shadow: none;
    border: 3px solid rgb(var(--color-searchable-input-focus));
    background-color: rgb(var(--color-bg-white));
}
.search-input-container .search-input::placeholder {
    font-style: italic;
    font-weight: var(--font-weight-normal);
    color: rgba(var(--color-txt-light), 0.35);
}
.search-input-container .search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    font-size: var(--text-base-lg);
    color: rgb(var(--color-txt-light));
    pointer-events: none;
    transform: translateY(-50%);
    transition: color 0.3s ease;
}
.search-input-container .search-input:focus ~ .search-icon {
    color: rgb(var(--color-searchable-input-focus));
}
.search-input-container .dropdown-icon {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    font-size: var(--text-base);
    color: rgb(var(--color-txt-light));
    pointer-events: none;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}
.search-input-container .search-input:focus ~ .dropdown-icon {
    color: rgb(var(--color-searchable-input-focus));
    transform: translateY(-50%) rotate(180deg);
}
.searchable-select-wrapper.disabled .search-input-container .search-input {
    border-color: rgba(var(--color-brd-extra-light), 0.35);
    box-shadow: none;
    background-color: rgb(var(--color-bg-extra-lighter));
    color: rgba(var(--color-txt-light), 0.35);
    cursor: not-allowed;
    pointer-events: none;
}
.searchable-select-wrapper.disabled .search-input-container .search-icon,
.searchable-select-wrapper.disabled .search-input-container .dropdown-icon {
    color: rgba(var(--color-txt-light), 0.35);
}
.options-dropdown {
    display: none;
    position: absolute;
    z-index: 1000;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    max-height: 320px;
    border: 2px solid rgb(var(--color-searchable-options-brd));
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(var(--color-searchable-options-brd), 0.15);
    background-color: rgb(var(--color-bg-white));
    overflow-y: auto;
    animation: dropdownSlideDown 0.3s ease;
}
.options-dropdown.show {
    display: block;
}
.searchable-select-wrapper.disabled .options-dropdown {
    display: none!important;
}
.options-dropdown:focus {
    outline: 3px solid rgb(var(--color-focus));
    outline-offset: 2px;
}
.options-dropdown::-webkit-scrollbar {
    width: 0.5rem;
    border-radius: 9999px;
}
.options-dropdown::-webkit-scrollbar-track {
    background-color: rgb(var(--color-bg-extra-light));
    border-radius: 0 0.5rem 0.5rem 0;
}
.options-dropdown::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-scrollbar-thumb));
    border-radius: 0.5rem;
}
.options-dropdown::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--color-scrollbar-thumb-hover));
}
.options-dropdown .select-option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgb(var(--color-brd-lighter));
    cursor: pointer;
    transition: all 0.2s ease;
}
.options-dropdown .select-option-item:last-child {
    border-bottom: none;
}
.options-dropdown .select-option-item:hover {
    background-color: rgba(var(--color-searchable-option-selected), 0.15);
}
.options-dropdown .select-option-item.selected {
    background-color: rgb(var(--color-searchable-option-selected));
    color: rgb(var(--color-searchable-option-selected-txt));
}
.options-dropdown .select-option-item.selected:hover {
    background-color: rgb(var(--color-searchable-option-selected-hover));
}
.options-dropdown .select-option-item .select-option-text {
    flex: 1;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
}
.options-dropdown .select-option-item .select-option-check {
    font-size: var(--text-base-xl);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.options-dropdown .select-option-item.selected .select-option-check {
    opacity: 0.8;
}
.options-dropdown .select-option-item.selected:hover .select-option-check {
    opacity: 1;
}
.options-dropdown .select-option-item.hidden {
    display: none;
}
.options-dropdown .no-results-message {
    padding: 1.25rem;
    font-style: italic;
    color: rgba(var(--color-txt-light), 0.85);
    text-align: center;
}
.selected-value-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background-color: rgb(var(--color-searchable-badge));
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-searchable-badge-txt));
    animation: badgeFadeIn 0.3s ease;
}
.selected-value-badge .clear-selection {
    cursor: pointer;
    margin-left: 0.25rem;
    font-size: var(--text-base);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.selected-value-badge .clear-selection:hover {
    opacity: 1;
}
/* § searchable select */

/* scala likert */
.likert-container {
    padding: 2rem;
}
.likert-container .likert-scale-wrapper {
    position: relative;
}
.likert-container .likert-labels-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    margin-left: 0;
    margin-right: 0;
}
.likert-container .likert-labels-container .likert-label {
    font-size: var(--text-base-md);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-txt));
}
.likert-container .likert-labels-container .likert-label.hidden {
    visibility: hidden;
}
.likert-steps-container {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    position: relative;
    min-height: 30px;
    margin-bottom: 2.5rem;
    margin-left: 0;
    margin-right: 0;
}
.likert-steps-container .likert-step-box {
    flex: 1;
    min-height: 30px;
    border: 2px solid transparent;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s;
}
.likert-steps-container .likert-step-box:nth-child(1) {
    background-color: rgba(var(--color-likert-step), 0.2);
}
.likert-steps-container .likert-step-box:nth-child(2) {
    background-color: rgba(var(--color-likert-step), 0.4);
}
.likert-steps-container .likert-step-box:nth-child(3) {
    background-color: rgba(var(--color-likert-step), 0.6);
}
.likert-steps-container .likert-step-box:nth-child(4) {
    background-color: rgba(var(--color-likert-step), 0.8);
}
.likert-steps-container .likert-step-box:nth-child(5) {
    background-color: rgba(var(--color-likert-step), 1);
}
.likert-steps-container .likert-step-box.active {
    background-color: rgba(var(--color-likert-step-active), 1);
    border-color: rgb(var(--color-likert-step-brd))!important;
    transform: scale(1.05)!important;
}
.likert-steps-container .likert-step-box:hover {
    border-color: rgba(var(--color-likert), 0.6);
}
.likert-cursor-container {
    position: relative;
    height: 3.75rem;
}
.likert-cursor-container .likert-cursor-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 9999px;
    background-color: rgb(var(--color-bg-extra-light));
}
.likert-cursor-container .likert-cursor {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 10;
    top: -1.75rem;
    min-width: 9.375rem;
    min-height: 3.125rem;
    padding: 0 0.5rem;
    border: 2px solid rgb(var(--color-likert));
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(var(--color-shadow-black), 0.2), inset 0 2px 4px rgba(var(--color-shadow-black), 0.1);
    background-color: rgb(var(--color-bg-extra-light));
    cursor: grab;
    transition: left 0.2s, box-shadow 0.2s;
}
.likert-cursor-container .likert-cursor::before {
    content: '';
    position: absolute;
    top: -0.625rem;
    left: clamp(0%, var(--arrow-position, 50%), 100%);
    width: 0;
    height: 0;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-bottom: 0.625rem solid rgb(var(--color-likert));
    filter: drop-shadow(0 -2px 4px rgba(var(--color-black), 0.1));
    transform: translateX(-50%);
    transition: left 0.2s;
}
.likert-cursor-container .likert-cursor:focus {
    z-index: 1000;
    outline: 3px solid rgb(var(--color-focus));
    outline-offset: 2px;
    opacity: 1!important;
}
.likert-cursor-container .likert-cursor:active {
    box-shadow: 0 6px 16px rgba(var(--color-shadow-black), 0.3);
    cursor: grabbing;
}
.likert-cursor-container .likert-cursor .likert-value-display {
    font-size: var(--text-base-xs);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-likert));
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}
.likert-current-selection {
    margin-top: -3.125rem;
    padding: 1.25rem;
    border-radius: 4px;
    background-color: rgb(var(--color-bg-extra-light));
    text-align: center;
}
.likert-current-selection h3 {
    margin: 0;
    font-size: var(--text-base-md);
    color: rgb(var(--color-likert-selection-hd));
}
.likert-current-selection p {
    margin: 0;
    font-size: var(--text-base-xxl);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-likert-selection-txt));
}
/* § scala likert */

/* age counter */
.age-counter-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding: 2rem;
}
.age-counter-grid .age-counter-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 90px;
}
.age-counter-grid .age-counter-box .age-counter-label {
    min-height: 24px;
    font-size: var(--text-base-md);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-txt));
    text-align: center;
}
.age-counter-grid .age-counter-box .age-counter-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding: 0.25rem;
    border: 1px solid rgb(var(--color-brd-white));
    border-radius: 9999px;
    background-color: rgb(var(--color-bg-white));
}
.age-counter-grid .age-counter-box .age-counter-controls.active {
    border-color: rgb(var(--color-age-active));
}
.age-counter-grid .age-counter-controls .age-counter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    box-shadow: inset 2px 2px 4px rgba(var(--color-shadow-black), 0.1);
    background-color: rgb(var(--color-bg-extra-light));
    color: rgba(var(--color-txt-light), 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}
.age-counter-grid .age-counter-controls .age-counter-btn:first-child {
    border-radius: 25px 0 0 25px;
}
.age-counter-grid .age-counter-controls .age-counter-btn:last-child {
    border-radius: 0 25px 25px 0;
}
.age-counter-grid .age-counter-controls .age-counter-btn:hover:not(:disabled) {
    background-color: rgb(var(--color-age-hover));
    color: rgb(var(--color-txt-inverse));
}
.age-counter-grid .age-counter-controls .age-counter-btn:active {
    transform: scale(0.95);
}
.age-counter-grid .age-counter-controls .age-counter-btn .bi {
    font-size: clamp(16px, 1.375rem, 22px);
    line-height: 1;
    pointer-events: none;
}
.age-counter-grid .age-counter-controls .age-counter-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 0 0.5rem;
    font-size: var(--text-base-md);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-txt));
    text-align: center;
    user-select: none;
}
.age-counter-grid .age-counter-controls .age-counter-display.value-changed {
    animation: valueChange 0.3s ease;
}
.age-counter-grid .age-counter-box .age-counter-controls.at-max .age-counter-increase,
.age-counter-grid .age-counter-box .age-counter-controls.at-min .age-counter-decrease,
.age-counter-grid .age-counter-controls .age-counter-btn:disabled {
    opacity: 0.3;
}
.age-counter-grid .age-counter-box .age-counter-input {
    display: none;
}
/* § age counter */

/* familiari */
.add-button-container {
    padding: 2rem;
}
.familiari-section .familiari-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.875rem;
}
.familiari-section .familiari-section-title {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    margin: 0;
    font-size: var(--text-base-xxl);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-familiari-title));
}
.familiari-section .familiari-section-title .bi {
    color: rgb(var(--color-familiari-ico));
}
.familiari-section .btn-add-familiare {
    border: 2px solid rgb(var(--color-btn-primary));
    background-color: rgb(var(--color-btn-primary));
    color: rgb(var(--color-btn-primary-txt));
}
.familiari-section .btn-add-familiare:focus {
    outline-color: rgb(var(--color-btn-primary-focus));
}
.familiari-section .btn-add-familiare:hover:not(:disabled) {
    border-color: rgb(var(--color-btn-primary-hover));
    background-color: rgb(var(--color-btn-primary-hover));
    color: rgb(var(--color-btn-primary-txt-hover));
}
.familiari-section .btn-add-familiare:active {
    border-color: rgb(var(--color-btn-primary-active));
    box-shadow: 0 4px 12px rgba(var(--color-btn-primary-active), 0.15);
    background-color: rgb(var(--color-btn-primary-active));
    color: rgb(var(--color-btn-primary-txt-active));
}
.familiari-section .familiari-lista {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
}
.familiari-lista .familiare-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.875rem;
    padding: 0.875rem 1.5625rem;
    border: 1px solid rgb(var(--color-brd-extra-light));
    box-shadow: inset 2px 2px 4px rgba(var(--color-shadow-black), 0.05);
    border-radius: 9999px;
    background-color: rgb(var(--color-bg-extra-light));
    transition: all 0.3s;
    animation: slideUp 0.3s ease-out;
}
.familiari-lista .familiare-item:hover {
    background-color: rgb(var(--color-bg-lighter));
    transform: translateY(-2px);
}
.familiari-lista .familiare-item:nth-child(1) {
    animation-delay: 0s;
}
.familiari-lista .familiare-item:nth-child(2) {
    animation-delay: 0.1s;
}
.familiari-lista .familiare-item:nth-child(3) {
    animation-delay: 0.2s;
}
.familiari-lista .familiare-item:nth-child(4) {
    animation-delay: 0.3s;
}
.familiari-lista .familiare-item:nth-child(5) {
    animation-delay: 0.4s;
}
.familiare-item .familiare-info {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.25rem 1.875rem;
}
.familiare-item .familiare-tipo,
.familiare-item .familiare-fragilita {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.familiare-item .familiare-tipo .bi {
    flex-shrink: 0;
    font-size: var(--text-base-lg);
    color: rgb(var(--color-familiari-lst-tipo));
}
.familiare-item .familiare-fragilita .bi {
    flex-shrink: 0;
    font-size: var(--text-base-lg);
    color: rgb(var(--color-familiari-lst-fragilita));
}
.familiare-item .familiare-tipo-label,
.familiare-item .familiare-fragilita-label {
    font-size: var(--text-base-md);
    font-weight: var(--font-weight-medium);
    color: rgb(var(--color-txt-light));
}
.familiare-item .familiare-actions {
    display: flex;
    gap: 0.625rem;
}
.familiare-item .familiare-actions .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    color: rgb(var(--color-btn-primary-txt));
    cursor: pointer;
    transition: all 0.3s;
}
.familiare-item .familiare-actions .btn-icon .bi {
    font-size: var(--text-base-md);
    line-height: 0;
}
.familiare-item .familiare-actions .btn-icon:focus {
	outline-width: 3px;
	outline-style: solid;
    outline-offset: 2px;
}
.familiare-item .familiare-actions .btn-icon:hover {
    transform: scale(1.1);
}
.familiare-item .familiare-actions .btn-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.familiare-item .familiare-actions .btn-icon.btn-modifica-familiare {
    background-color: rgb(var(--color-btn-primary));
}
.familiare-item .familiare-actions .btn-icon.btn-modifica-familiare:focus {
    outline-color: rgb(var(--color-btn-primary-focus));
}
.familiare-item .familiare-actions .btn-icon.btn-modifica-familiare:hover:not(:disabled) {
    background-color: rgb(var(--color-btn-primary-hover));
}
.familiare-item .familiare-actions .btn-icon.btn-modifica-familiare:active {
    border-color: rgb(var(--color-btn-primary-active));
    box-shadow: 0 4px 12px rgba(var(--color-btn-primary-active), 0.15);
    background-color: rgb(var(--color-btn-primary-active));
    color: rgb(var(--color-btn-primary-txt-active));
}
.familiare-item .familiare-actions .btn-icon.btn-elimina-familiare {
    background-color: rgb(var(--color-btn-thirdary));
}
.familiare-item .familiare-actions .btn-icon.btn-elimina-familiare:focus {
    outline-color: rgb(var(--color-btn-thirdary-focus));
}
.familiare-item .familiare-actions .btn-icon.btn-elimina-familiare:hover:not(:disabled) {
    background-color: rgb(var(--color-btn-thirdary-hover));
}
.familiare-item .familiare-actions .btn-icon.btn-elimina-familiare:active {
    border-color: rgb(var(--color-btn-thirdary-bg-active));
    box-shadow: 0 2px 8px rgba(var(--color-btn-thirdary-active), 0.15);
    background-color: rgb(var(--color-btn-thirdary-bg-active));
    color: rgb(var(--color-btn-thirdary-txt-active));
}
.familiari-section .nessun-familiare {
    line-height: 1;
    text-align: center;
}
.familiari-section .nessun-familiare-icon {
    margin-bottom: 0.75rem;
}
.familiari-section .nessun-familiare-icon .bi {
    font-size: var(--nessun-familiare-ico);
    color: rgb(var(--color-txt-extra-lighter));
}
.familiari-section .nessun-familiare-text {
    margin-bottom: 0.75rem;
    font-size: clamp(16px, 1.375rem, 22px);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-txt-light));
    line-height: 1;
}
.familiari-section .nessun-familiare-hint {
    margin-bottom: 0;
    font-size: var(--text-base);
    color: rgb(var(--color-txt-lighter));
}
/* § familiari */

/* select */
.select-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 1.875rem;
}
.select-container .select-wrapper {
    position: relative;
    width: 100%;
}
.question-select {
    width: 100%;
    padding: 1.125rem 3.125rem 1.125rem 1.25rem;
    border: 1px solid rgb(var(--color-brd-extra-light));
    border-radius: 9999px;
    box-shadow: inset 2px 2px 4px rgba(var(--color-txt-light), 0.15);
    background-color: rgb(var(--color-bg-extra-light));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 24px;
    font-size: var(--text-base-md);
    font-weight: var(--font-weight-medium);
    color: rgb(var(--color-txt-light));
    cursor: pointer;
    appearance: none;
    transition: all 0.3s ease;
}
.question-select:focus {
    outline: none;
    border: 3px solid rgb(var(--color-select-focus));
    background-color: rgb(var(--color-bg-white));
}
.question-select:hover {
    background-color: rgb(var(--color-bg-white));
}
.question-select option {
    padding: 0.625rem 0.375rem;
    font-size: var(--text-base);
}
.question-select option[value=""] {
    color: rgba(var(--color-txt-light), 0.35);
}
/* § select */

/* age input */
.age-input-container {
    padding: 2rem;
}
.age-input-field {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}
/* .age-select riusa .question-select - nessun stile aggiuntivo necessario */
.age-numeric {
    width: 100%;
    padding: 1.125rem 1.25rem;
    border: 1px solid rgb(var(--color-brd-extra-light));
    border-radius: 9999px;
    box-shadow: inset 2px 2px 4px rgba(var(--color-txt-light), 0.15);
    background-color: rgb(var(--color-bg-extra-light));
    font-size: var(--text-base-md);
    font-weight: var(--font-weight-medium);
    color: rgb(var(--color-txt-light));
    transition: all 0.3s ease;
    appearance: none;
    -moz-appearance: textfield;
}
.age-numeric:focus {
    outline: none;
    border: 3px solid rgb(var(--color-select-focus));
    background-color: rgb(var(--color-bg-white));
}
.age-numeric:hover {
    background-color: rgb(var(--color-bg-white));
}
.age-numeric::placeholder {
    font-style: italic;
    font-weight: var(--font-weight-normal);
    color: rgba(var(--color-txt-light), 0.35);
}
.age-numeric.is-invalid {
    border-color: rgb(var(--color-error));
    background-color: rgba(var(--color-error-lighter), 0.1);
}
.age-numeric::-webkit-outer-spin-button,
.age-numeric::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.age-input-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: rgb(var(--color-txt-light));
    font-size: var(--text-base);
}
/* § age input */

/* BMI */
.bmi-calculator-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 1.25rem;
}
.bmi-calculator-container .bmi-inputs-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.bmi-calculator-container .bmi-input-group {
    flex: 1;
    min-width: 200px;
}
.bmi-calculator-container .bmi-input-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-txt));
}
.bmi-calculator-container .bmi-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid rgb(var(--color-brd-extra-light));
    border-radius: 8px;
    font-size: var(--text-base-md);
    transition: all 0.3s ease;
}
.bmi-calculator-container .bmi-input:focus {
    outline: none;
    border-color: rgb(var(--color-focus));
}
.bmi-calculator-container .bmi-input::placeholder {
    font-style: italic;
    font-weight: var(--font-weight-normal);
    color: rgba(var(--color-txt-light), 0.35);
}
.bmi-calculator-container .bmi-result-wrapper {
    animation: fadeInTranslate 0.3s ease-in-out;
}
.bmi-calculator-container .bmi-result-box {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(var(--color-bmi-result), 0.15);
    border: 1px solid rgb(var(--color-bmi-result));
    color: rgb(var(--color-bmi-result));
    text-align: center;
}
.bmi-calculator-container .bmi-result-label {
    font-size: var(--text-base-lg);
    font-weight: var(--font-weight-medium);
    color: rgb(var(--color-txt-light));
}
.bmi-calculator-container .bmi-result-value {
    font-size: var(--text-base-xxl);
    font-weight: var(--font-weight-bold);
}
.bmi-calculator-container .bmi-result-category {
    display: inline-block;
    margin-left: auto;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: var(--text-base-xs);
    font-weight: var(--font-weight-semibold);
}
.bmi-calculator-container .bmi-result-category.bmi-normal {
    background-color: rgba(var(--color-success), 0.3);
    border: 2px solid rgba(var(--color-success), 0.6);
}
.bmi-calculator-container .bmi-result-category.bmi-underweight,
.bmi-calculator-container .bmi-result-category.bmi-overweight {
    background-color: rgba(var(--color-info), 0.3);
    border: 2px solid rgba(var(--color-info), 0.6);
}
.bmi-calculator-container .bmi-result-category.bmi-anorexic,
.bmi-calculator-container .bmi-result-category.bmi-obese {
    background-color: rgba(var(--color-warning), 0.3);
    border: 2px solid rgba(var(--color-warning), 0.6);
}
.bmi-calculator-container .bmi-result-category.bmi-severeanorexic,
.bmi-calculator-container .bmi-result-category.bmi-severeobese {
    background-color: rgba(var(--color-danger), 0.3);
    border: 2px solid rgba(var(--color-danger), 0.6);
}
/* § BMI */

/* contatti */
.contatti-container {
    width: 100%;
    max-width: 560px;
    margin: 1.5rem auto 0;
    padding: 1.25rem;
}
.contatti-container .contatti-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}
.contatti-container .contatti-field-group:last-child {
    margin-bottom: 0;
}
.contatti-container .contatti-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-txt));
}
.contatti-container .contatti-label .bi {
    font-size: var(--text-base-md);
    color: rgb(var(--color-txt-primary-light));
}
.contatti-container .contatti-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid rgb(var(--color-brd-extra-light));
    border-radius: 8px;
    font-size: var(--text-base-md);
    color: rgb(var(--color-txt-dark));
    background-color: rgb(var(--color-bg-white));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contatti-container .contatti-input:focus {
    outline: none;
    border-color: rgb(var(--color-focus));
    box-shadow: 0 0 0 3px rgba(var(--color-focus), 0.15);
}
.contatti-container .contatti-input::placeholder {
    font-style: italic;
    font-weight: var(--font-weight-normal);
    color: rgba(var(--color-txt-light), 0.5);
}
/* § contatti */

/* likert bar */
.likert-bars-container {
    padding: 2rem;
}
.likert-bars-container .likert-bars-instructions {
    margin-bottom: 1.25rem;
    padding: 0.9375rem 1.25rem;
    border-left: 4px solid rgb(var(--color-likert-bars));
    border-radius: 4px;
    background-color: rgb(var(--color-bg-extra-light));
    font-size: var(--text-base-sm);
    color: rgb(var(--color-txt));
}

.likert-bars-container .likert-bars-scale-legend {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5625rem;
    padding: 0 0.625rem;
    /*MOD*/
    display: none;
}
.likert-bars-container .likert-bars-scale-legend .scale-label {
    font-size: var(--text-base-sm);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-likert-bars-step));
}
.likert-bars-container .likert-bars-scale-legend .scale-label.scale-min {
    color: rgba(var(--color-likert-bars-step), 0.2);
}
.likert-bars-container .likert-bars-scale-legend .scale-label.scale-max {
    color: rgb(var(--color-likert-bars-step));
}
.likert-bars-items-container {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
}
.likert-bars-items-container .likert-bars-item {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
    padding-top: 0.9375rem;
    border-top: 1px solid rgb(var(--color-brd));
}
.likert-bars-items-container .likert-bars-item:first-child {
    padding-top: 0;
    border-top: 0;
}
.likert-bars-item .likert-bars-item-label {
    padding-left: 0.3125rem;
    font-size: var(--text-base-md);
    font-weight: var(--font-weight-medium);
    color: rgb(var(--color-txt));
}
.likert-bars-item .likert-bars-scale {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.5rem;
    height: 30px;
}
.likert-bars-scale .likert-bars-bar-wrapper {
    display: flex;
    flex: 1;
    position: relative;
    cursor: pointer;
}
.likert-bars-bar-wrapper .likert-bars-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.likert-bars-bar-wrapper .likert-bars-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    border: 3px solid transparent;
    font-size: var(--text-base-sm);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-likert-bars-txt));
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.likert-bars-bar-wrapper .likert-bars-bar[data-level="1"]{
    background-color: rgba(var(--color-likert-bars-step), 0.2); 
}
.likert-bars-bar-wrapper .likert-bars-bar[data-level="2"]{
    background-color: rgba(var(--color-likert-bars-step), 0.4); 
}
.likert-bars-bar-wrapper .likert-bars-bar[data-level="3"]{
    background-color: rgba(var(--color-likert-bars-step), 0.6); 
}
.likert-bars-bar-wrapper .likert-bars-bar[data-level="4"]{
    background-color: rgba(var(--color-likert-bars-step), 0.8); 
}
.likert-bars-bar-wrapper .likert-bars-bar[data-level="5"]{
    background-color: rgba(var(--color-likert-bars-step), 1); 
}
.likert-bars-bar-wrapper .likert-bars-bar.active {
    z-index: 2;
    color: rgb(var(--color-likert-bars-txt-inverse))!important;
    background-color: rgba(var(--color-likert-bars-step-active), 1)!important; 
    border-color: rgb(var(--color-likert-bars-step-brd))!important;
    transform: scale(1.05)!important;
    animation: bar-select 0.3s ease-out;
}
.likert-bars-bar-wrapper .likert-bars-bar.hover-preview:not(.active) {
    border-color: rgba(var(--color-likert-bars), 0.4);
}
.likert-bars-bar-wrapper .likert-bars-bar:not(.active):hover {
    border-color: rgb(var(--color-likert-bars));
    transform: scale(1.02);
}
.likert-bars-bar-wrapper .likert-bars-radio:focus + .likert-bars-bar {
    z-index: 3;
    outline: 3px solid rgb(var(--color-focus));
    outline-offset: 2px;
}
.likert-bars-bar-wrapper .likert-bars-radio:focus:not(:focus-visible) + .likert-bars-bar {
    outline: none;
}
.likert-bars-item .likert-bars-current-rating {
    padding-left: 0.3125rem;
    font-size: var(--text-base-sm);
    font-weight: var(--font-weight-medium);
    color: rgb(var(--color-txt-light));
}
/* § likert bar */

/* Modal */
.modal-familiari-overlay {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    background-color: rgba(var(--color-black), 0.5);
}
.modal-familiari-overlay[style*="display: block"],
.modal-familiari-overlay.active {
    display: flex !important;
}
.modal-familiari {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(var(--color-shadow-black), 0.3);
    border: 2px solid rgba(var(--color-modal-brd), 0.3);
    background-color: rgb(var(--color-modal-bg));
    animation: modalFadeIn 0.3s ease-out;
}
.modal-familiari .modal-familiari-header {
    position: relative;
    margin-bottom: 1.5rem;
}
.modal-familiari .modal-familiari-title {
    margin: 0;
    padding: 0.75rem 0.9375rem;
    border-radius: 0.3125rem;
    background-color: rgb(var(--color-modal-hd-bg));
    font-size: var(--text-base-xxl);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-modal-hd-txt));
    text-align: center;
}
.modal-familiari .modal-familiari-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 10;
    top: -14px;
    right: -14px;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background-color: rgb(var(--color-modal-cls-bg));
    font-size: var(--text-base-xl);
    color: rgb(var(--color-modal-cls-txt));
    cursor: pointer;
    transition: background-color 0.3s;
}
.modal-familiari .modal-familiari-close:hover {
    background-color: rgb(var(--color-modal-cls-bg-hover));
}
.modal-familiari .modal-familiari-close .bi {
    font-size: clamp(16px, 1.375rem, 22px);
    line-height: 0;
}
.modal-familiari .modal-familiari-progress {
    position: relative;
    z-index: 1;
    margin: -1.8125rem 0 1.25rem 0;
    border-radius: 9999px;
}
.modal-familiari .modal-progress-bar {
    width: 100%;
    height: 8px;
    margin-bottom: 0.625rem;
    border-radius: 9999px;
    background-color: rgb(var(--color-bg-dark));
    overflow: hidden;
}
.modal-familiari .modal-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background-color: rgb(var(--color-progress-fill));
    transition: width 0.3s ease;
}
.modal-familiari .modal-progress-text {
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-base-xs);
    color: rgb(var(--color-progress-fill));
    text-align: center;
}
.modal-familiari .modal-familiari-body {
    min-height: 200px;
}
.modal-familiari .modal-familiari-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px dashed rgba(var(--color-modal-brd), 0.3);
}
.modal-familiari .modal-navigation-buttons {
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
    gap: 0.9375rem;
}
.modal-navigation-buttons .btn-next {
    border: 2px solid rgb(var(--color-btn-primary));
    background-color: rgb(var(--color-btn-primary));
    color: rgb(var(--color-btn-primary-txt));
}
.modal-navigation-buttons .btn-next:focus {
    outline-color: rgb(var(--color-btn-primary-focus));
}
.modal-navigation-buttons .btn-next:hover:not(:disabled) {
    border-color: rgb(var(--color-btn-primary-hover));
    background-color: rgb(var(--color-btn-primary-hover));
    color: rgb(var(--color-btn-primary-txt-hover));
    transform: translateX(5px);
}
.modal-navigation-buttons .btn-next:active {
    border-color: rgb(var(--color-btn-primary-active));
    box-shadow: 0 4px 12px rgba(var(--color-btn-primary-active), 0.15);
    background-color: rgb(var(--color-btn-primary-active));
    color: rgb(var(--color-btn-primary-txt-active));
}
.modal-navigation-buttons .btn-prev {
    border: 2px solid rgb(var(--color-btn-primary-outline-txt));
    background-color: rgb(var(--color-btn-primary-outline));
    color: rgb(var(--color-btn-primary-outline-txt));
}
.modal-navigation-buttons .btn-prev:focus {
    outline-color: rgb(var(--color-btn-primary-outline-focus));
}
.modal-navigation-buttons .btn-prev:hover:not(:disabled) {
    border-color: rgb(var(--color-btn-primary-outline-hover));
    background-color: rgb(var(--color-btn-primary-outline-hover));
    color: rgb(var(--color-btn-primary-outline-txt-hover));
    transform: translateX(-5px);
}
.modal-navigation-buttons .btn-prev:active {
    border-color: rgb(var(--color-btn-primary-outline-active));
    box-shadow: 0 4px 12px rgba(var(--color-btn-primary-outline-active), 0.15);
    background-color: rgb(var(--color-btn-primary-outline-active));
    color: rgb(var(--color-btn-primary-outline-txt-active));
}
.modal-navigation-buttons .btn-save {
    border: 2px solid rgb(var(--color-btn-secondary-txt));
    background-color: rgb(var(--color-btn-secondary));
    color: rgb(var(--color-btn-secondary-txt));
}
.modal-navigation-buttons .btn-save:focus {
    outline-color: rgb(var(--color-btn-secondary-focus));
}
.modal-navigation-buttons .btn-save:hover:not(:disabled) {
    border-color: rgb(var(--color-btn-secondary-hover));
    background-color: rgb(var(--color-btn-secondary-hover));
    color: rgb(var(--color-btn-secondary-txt-hover));
}
.modal-navigation-buttons .btn-save:active {
    border-color: rgb(var(--color-btn-secondary-active));
    box-shadow: 0 4px 12px rgba(var(--color-btn-secondary-active), 0.15);
    background-color: rgb(var(--color-btn-secondary-active));
    color: rgb(var(--color-btn-secondary-txt-active));
}
.modal-familiari .familiari-selezione-container {
    max-width: 100%;
}
.modal-familiari .familiari-selezione-intro {
    margin-bottom: 1.875rem;
    text-align: center;
}
.modal-familiari .familiari-selezione-intro {
    font-size: var(--text-base-md);
    color: rgb(var(--color-txt-light));
}
.modal-familiari .familiari-form-group {
    margin-bottom: 1.5rem;
}
.modal-familiari .familiari-label {
    display: block;
    margin-bottom: 0.5rem;
    padding-left: 1.5625rem;
    font-size: var(--text-base-lg);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-modal-intro-lbl));
}
.modal-familiari .familiari-select {
    padding: 0.75rem 3.125rem 0.75rem 1.25rem;
}
.modal-familiari .modal-familiari-body .question-header {
    padding: 0;
    background-color: transparent;
    color: rgb(var(--color-modal-quest-header));
}
.modal-familiari .modal-familiari-body .question-header h1 {
    font-size: clamp(16px, 1.375rem, 22px);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}
.modal-familiari .modal-familiari-body .question-footer {
    margin-top: 1rem;
    font-size: var(--text-base);
    color: rgb(var(--color-txt-lighter));
    text-align: center;
}
.modal-familiari .modal-familiari-body .options-grid .option-item .checkmark {
    outline: 5px solid rgb(var(--color-modal-bg));
}
.modal-familiari .modal-familiari-body .likert-container {
    padding: 2rem 0;
}
.modal-familiari::-webkit-scrollbar {
    width: 0.5rem;
    border-radius: 9999px;
}
.modal-familiari::-webkit-scrollbar-track {
    background-color: rgb(var(--color-bg-extra-light));
    border-radius: 0 0.5rem 0.5rem 0;
}
.modal-familiari::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-scrollbar-thumb));
    border-radius: 0.5rem;
}
.modal-familiari::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--color-scrollbar-thumb-hover));
}
/* § modal */

/* privacy consent page */
.privacy-consent-page .hero-banner {
	width: 100%;
	min-height: calc(100vh - 5rem);
	padding: 3.75rem;
	background: url("../img/copertina.jpg") top center no-repeat;
	background-size: cover;
}
.privacy-consent-page .hero-banner h1 {
	margin: 0;
	font-size: 5.625rem;
	color: rgb(var(--color-primary));
	text-transform: uppercase;
}
.privacy-consent-page .hero-banner h3 {
	margin: 0;
	font-size: 2.375rem;
	color: rgb(var(--color-primary));
}
.privacy-consent-page .main {
    position: relative;
    z-index: 20;
}
.privacy-consent-page .card {
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.privacy-consent-page .card:hover {
    box-shadow: 0 16px 48px rgba(var(--color-shadow-black), 0.15) !important;
    transform: translateY(-0.25rem);
}
.privacy-consent-page .card .card-body {
    color: rgb(var(--color-txt));
}
.privacy-consent-page .card-body .privacy-shield {
    font-size: var(--error-ico);
    color: rgb(var(--color-success));
    line-height: 1;
}
.privacy-consent-page .card-body h2 {
    font-size: var(--text-base-xxl);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-privacy));
}
.privacy-consent-page .privacy-info-box {
    border: 1px solid rgb(var(--color-brd-extra-lighter));
    border-radius: 8px;
    background-color: rgb(var(--color-bg-extra-lighter));
    transition: all 0.3s ease;
}
.privacy-consent-page .privacy-info-box:hover {
    border-color: rgb(var(--color-brd-extra-light));
    box-shadow: 0 2px 8px rgba(var(--color-shadow-black), 0.075);
    background-color: rgb(var(--color-bg-extra-light));
}
.privacy-consent-page .privacy-info-box h3 {
    font-size: var(--text-base-lg);
    color: rgb(var(--color-privacy));
}
.privacy-consent-page .privacy-info-box h3 .privacy-info {
    color: rgb(var(--color-success));
}
.privacy-consent-page .privacy-info-box .btn-privacy-pdf {
    border-color: rgb(var(--color-btn-primary));
    background-color: rgb(var(--color-btn-primary));
    color: rgb(var(--color-btn-primary-txt));
}
.privacy-consent-page .privacy-info-box .btn-privacy-pdf:focus {
    outline: 3px solid rgb(var(--color-focus));
    outline-offset: 2px;
}
.privacy-consent-page .privacy-info-box .btn-privacy-pdf:hover:not(:disabled) {
    border-color: rgb(var(--color-btn-primary-hover));
    background-color: rgb(var(--color-btn-primary-hover));
    color: rgb(var(--color-btn-primary-txt-hover));
}
.privacy-consent-page .privacy-info-box .btn-privacy-pdf:active {
    border-color: rgb(var(--color-btn-primary-active));
    box-shadow: 0 4px 12px rgba(var(--color-btn-primary-active), 0.15);
    background-color: rgb(var(--color-btn-primary-active));
    color: rgb(var(--color-btn-primary-txt-active));
}
.privacy-consent-page .privacy-checkbox {
    border: 1px solid rgb(var(--color-brd-white));
    border-radius: 8px;
    background-color: rgb(var(--color-bg-white));
    transition: all 0.3s ease;
}
.privacy-consent-page .privacy-checkbox:hover {
    border-color: rgb(var(--color-brd-extra-lighter));
    box-shadow: 0 2px 8px rgba(var(--color-shadow-black), 0.075);
    background-color: rgb(var(--color-bg-extra-lighter));
}
.privacy-consent-page .form-check-input {
    width: 24px;
    height: 24px;
    margin-top: 0.125rem;
    margin-left: -2.5rem;
    border: 2px solid rgb(var(--color-privacy));
    cursor: pointer;
    transition: all 0.2s ease;
}
.privacy-consent-page .form-check-input:focus {
    outline: 3px solid rgb(var(--color-focus));
    outline-offset: 2px;
}
.privacy-consent-page .form-check-input:focus + label {
    outline: none;
}
.privacy-consent-page .form-check-input:checked {
    border-color: rgb(var(--color-privacy));
    background-color: rgb(var(--color-privacy));
}
.privacy-consent-page .form-check-input.is-invalid {
    border-color: var(--color-danger);
}
.privacy-consent-page .form-check-label {
    cursor: pointer;
    user-select: none;
}
.privacy-consent-page .form-check .form-text {
    color: rgb(var(--color-txt-light));
}
.privacy-consent-page .btn-action {
    border: 2px solid rgb(var(--color-btn-primary));
    background-color: rgb(var(--color-btn-primary));
    color: rgb(var(--color-btn-primary-txt));
}
.privacy-consent-page .btn-action:focus {
    outline-color: rgb(var(--color-btn-primary-focus));
}
.privacy-consent-page .btn-action:hover:not(:disabled) {
    border-color: rgb(var(--color-btn-primary-hover));
    background-color: rgb(var(--color-btn-primary-hover));
    color: rgb(var(--color-btn-primary-txt-hover));
    transform: translateX(5px);
}
.privacy-consent-page .btn-action:active {
    border-color: rgb(var(--color-btn-primary-active));
    box-shadow: 0 4px 12px rgba(var(--color-btn-primary-active), 0.15);
    background-color: rgb(var(--color-btn-primary-active));
    color: rgb(var(--color-btn-primary-txt-active));
}
.privacy-consent-page .privacy-notes {
    padding: 1rem;
    border-radius: 8px;
    border-top: 3px solid rgb(var(--color-brd-extra-light));
    background-color: rgb(var(--color-bg-extra-light));
    font-size: var(--text-base-sm);
    color: rgb(var(--color-txt-light));
}
.privacy-consent-page .privacy-notes .bi {
    color: rgb(var(--color-success));
}
.privacy-consent-page #consentMessage {
    border-radius: 8px;
    animation: slideDownPrivacy 0.3s ease;
}
.privacy-consent-page .spinner-border-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}
/*@media (orientation: portrait) {
    
.privacy-consent-page .hero-banner {
    min-height: 60vh;
}
.privacy-consent-page .hero-banner:before {
    width: 68vw;
    flex: 0 0 68vw;
}
.privacy-consent-page .hero-banner h3 {
    color: rgb(var(--color-hero-h1));
}
.privacy-consent-page .card {
    margin-top: 0;
}
}
@media (orientation: landscape) {
    
.privacy-consent-page .hero-banner {
    height: 100vw;
}
.privacy-consent-page .hero-banner:before {
    width: 68vh;
    flex: 0 0 68vh;
}
.privacy-consent-page .card {
    margin-top: -5rem;
}
}*/
/* § privacy consent page */

/* report page */
.report-page .report-header {
    padding: 0.875rem 2rem;
    text-align: center;
}
.report-page .report-header .report-title {
    margin-bottom: 0.625rem;
    font-size: var(--text-base-xxxl);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-report));
}
.report-page .report-header .report-subtitle {
    width: 100%;
    max-width: 992px;
    margin: 1rem auto;
    font-size: var(--text-base-lg);
    color: rgb(var(--color-txt-light));
    line-height: var(--line-height-tight);
    text-align: left;
}
.report-page .report-footer {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.875rem 2rem;
}
.report-page .btn-action {
    border: 2px solid rgb(var(--color-btn-primary));
    background-color: rgb(var(--color-btn-primary));
    color: rgb(var(--color-btn-primary-txt));
}
.report-page .btn-action:focus {
    outline-color: rgb(var(--color-btn-primary-focus));
}
.report-page .btn-action:hover:not(:disabled) {
    border-color: rgb(var(--color-btn-primary-hover));
    background-color: rgb(var(--color-btn-primary-hover));
    color: rgb(var(--color-btn-primary-txt-hover));
}
.report-page .btn-action:active {
    border-color: rgb(var(--color-btn-primary-active));
    box-shadow: 0 4px 12px rgba(var(--color-btn-primary-active), 0.15);
    background-color: rgb(var(--color-btn-primary-active));
    color: rgb(var(--color-btn-primary-txt-active));
}
.report-page .btn-voucher {
    border: 2px solid rgb(var(--color-btn-secondary));
    background-color: rgb(var(--color-btn-secondary));
    color: rgb(var(--color-btn-secondary-txt));
}
.report-page .btn-voucher:focus {
    outline-color: rgb(var(--color-btn-secondary-focus));
}
.report-page .btn-voucher:hover:not(:disabled) {
    border-color: rgb(var(--color-btn-secondary-hover));
    background-color: rgb(var(--color-btn-secondary-hover));
    color: rgb(var(--color-btn-secondary-txt-hover));
}
.report-page .btn-voucher:active {
    border-color: rgb(var(--color-btn-secondary-active));
    box-shadow: 0 4px 12px rgba(var(--color-btn-secondary-active), 0.15);
    background-color: rgb(var(--color-btn-secondary-active));
    color: rgb(var(--color-btn-secondary-txt-active));
}
.report-page .btn-exit {
    border: 2px solid rgb(var(--color-bg-light));
    background-color: rgb(var(--color-bg-light));
    color: rgb(var(--color-txt));
}
.report-page .btn-exit:focus {
    outline-color: rgb(var(--color-bg-light));
}
.report-page .btn-exit:hover:not(:disabled) {
    border-color: rgb(var(--color-bg-darker));
    background-color: rgb(var(--color-bg-darker));
    color: rgb(var(--color-txt-inverse));
    transform: translateX(5px);
}
.report-page .btn-exit:active {
    border-color: rgb(var(--color-bg-dark));
    box-shadow: 0 4px 12px rgba(var(--color-bg-dark), 0.15);
    background-color: rgb(var(--color-bg-dark));
    color: rgb(var(--color-txt-inverse));
}
.report-page .gauge-globale-box {
    margin-bottom: 2.5rem;
    padding: 2.5rem;
    border: 3px solid rgb(var(--color-report-brd));
    border-radius: 16px;
    background-color: rgb(var(--color-white));
    box-shadow: 0 4px 16px rgba(var(--color-shadow-black), 0.2);
    text-align: center;
}
.report-page .gauge-globale-box .gauge-globale-title {
    margin-bottom: 1.5625rem;
    font-size: var(--text-base-xxl);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-report));
    line-height: 1;
    text-transform: uppercase;
}
.report-page .gauge-globale-box .gauge-globale-score {
    margin-top: 1.5625rem;
    text-align: center;
}
.report-page .gauge-globale-score .score-value {
    display: block;
    margin-bottom: 0.625rem;
    font-size: var(--text-base-xxxl);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-report));
    line-height: 1;
}
.report-page .gauge-globale-score .score-evaluation {
    display: block;
    font-size: var(--text-base-xxl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}
.report-page .gauge-wrapper {
    width: 100%;
    max-width: 400px;
    margin: 1.25rem auto;
}
.report-page .gauge-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 62.5%;
}
.report-page .gauge-wrapper .gauge-canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%!important;
    height: 100%!important;
    display: block;
}
.report-page .areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28.125rem, 1fr));
    gap: 1.875rem;
    margin-bottom: 2.5rem;
}
.report-page .areas-grid .area-card {
    padding: 1.875rem;
    border-radius: 12px;
    background-color: rgb(var(--color-white));
    box-shadow: 0 2px 8px rgba(var(--color-black), 0.06);
    transition: all 0.3s ease;
}
.report-page .area-card:hover {
    box-shadow: 0 4px 16px rgba(var(--color-shadow-black), 0.1);
    transform: translateY(-0.25rem);
}
.report-page .area-card .area-title {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid rgb(var(--color-report-brd));
    font-size: var(--text-base-xl);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-report));
    text-align: center;
}
.report-page .area-card .area-score {
    margin: 1.25rem 0;
    text-align: center;
}
.report-page .area-score .score-value {
    display: block;
    margin-bottom: 0.3125rem;
    font-size: var(--text-base-xxl);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-report));
    line-height: 1;
}
.report-page .area-score .score-evaluation {
    display: block;
    font-size: var(--text-base-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}
.report-page .description-box {
    margin-top: 1.5625rem;
    padding: 1.25rem;
    border-left: 5px solid transparent;
    border-radius: 8px;
    background-color: rgb(var(--color-bg-extra-lighter));
    font-size: var(--text-base);
    transition: all 0.3s ease;
}
.report-page .description-box:hover {
    background-color: rgb(var(--color-bg-extra-light));
}
.report-page .description-box.risk-basso {
    border-left-color: rgb(var(--color-gauge-basso)); /* Giallo - Basso rischio / Buono */
}
.report-page .description-box.risk-medio {
    border-left-color: rgb(var(--color-gauge-medio)); /* Verde oliva - Medio rischio */
}
.report-page .description-box.risk-alto {
    border-left-color: rgb(var(--color-gauge-alto)); /* Blu scuro - Alto rischio / Critico */
}
.report-page .description-box .description-title {
    display: block;
    margin-bottom: 0.75rem;
    font-size: var(--text-base-md);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-report));
    line-height: var(--line-height-tight);
}
.report-page .description-box .description-text {
    margin: 0;
    color: rgb(var(--color-txt-light));
    line-height: var(--line-height-tight);
}
.report-page .description-box .description-text a {
    font-weight: var(--font-weight-semibold);
}
.report-page .pdf-loading-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-black), 0.7);
    color: rgb(var(--color-white));
}
.report-page .pdf-loading-overlay .spinner-border {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.25rem;
}
.report-page .pdf-loading-overlay .loading-text {
    font-size: var(--text-base-lg);
    font-weight: var(--font-weight-medium);
}
/* § report page */

/* error page */
.error-page .card {
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: slideUpError 0.5s ease-out;
}
.error-page .card:hover {
    box-shadow: 0 16px 48px rgba(var(--color-shadow-black), 0.175) !important;
    transform: translateY(-0.25rem);
}
.error-page .card .card-body {
    color: rgb(var(--color-txt));
}
.error-page .error-icon-container .error-icon {
    font-size: var(--error-ico);
    color: rgb(var(--color-error-page-ico));
    line-height: 1;
    animation: errorPulse 2s ease-in-out infinite;
}
.error-page .error-icon-container[data-error-type="session"] .error-icon {
    color: rgb(var(--color-warning-dark));
}
.error-page .error-icon-container[data-error-type="404"] .error-icon {
    color: rgb(var(--color-info-lighter));
}
.error-page .error-icon-container[data-error-type="403"] .error-icon {
    color: rgb(var(--color-danger-light));
}
.error-page .error-icon-container[data-error-type="500"] .error-icon {
    color: rgb(var(--color-warning-darker));
}
.error-page .error-title {
    font-size: var(--text-base-xxl);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-error-page));
}
.error-page .error-message {
    margin-bottom: 0;
    font-size: var(--text-base-lg);
    font-weight: var(--font-weight-medium);
    color: rgb(var(--color-txt));
}
.error-page .error-description {
    margin-bottom: 0;
    font-size: var(--text-base-md);
    color: rgb(var(--color-txt-light));
}
.error-page .suggestions-box {
    border: 1px solid rgb(var(--color-brd-white));
    border-left: 4px solid rgb(var(--color-success-lighter));
    border-radius: 8px;
    background-color: rgb(var(--color-bg-white));
    transition: all 0.3s ease;
}
.error-page .suggestions-box:hover {
    border-color: rgb(var(--color-brd-extra-lighter));
    border-left-color: rgb(var(--color-success));
    box-shadow: 0 2px 8px rgba(var(--color-shadow-black), 0.075);
    background-color: rgb(var(--color-bg-extra-lighter));
}
.error-page .suggestions-box .suggestions-title {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    font-size: var(--text-base-lg);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-error-page));
}
.error-page .suggestions-box .suggestions-title .bi {
    color: rgb(var(--color-success));
}
.error-page .suggestions-box .suggestions-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
.error-page .suggestions-box .suggestions-list li {
    display: flex;
    align-items: start;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgb(var(--color-brd-extra-lighter));
    color: rgb(var(--color-txt));
}
.error-page .suggestions-box .suggestions-list li:last-child {
    border-bottom: none;
}
.error-page .suggestions-box .suggestions-list li:before {
    margin-right: 0.75rem;
    flex-shrink: 0;
    content: "✓";
    font-size: var(--text-base-md);
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-success));
}
.error-page .btn-action {
    border: 2px solid rgb(var(--color-btn-primary));
    background-color: rgb(var(--color-btn-primary));
    color: rgb(var(--color-btn-primary-txt));
}
.error-page .btn-action:focus {
    outline-color: rgb(var(--color-btn-primary-focus));
}
.error-page .btn-action:hover:not(:disabled) {
    border-color: rgb(var(--color-btn-primary-hover));
    background-color: rgb(var(--color-btn-primary-hover));
    color: rgb(var(--color-btn-primary-txt-hover));
    transform: translateX(-5px);
}
.error-page .btn-action:active {
    border-color: rgb(var(--color-btn-primary-active));
    box-shadow: 0 4px 12px rgba(var(--color-btn-primary-active), 0.15);
    background-color: rgb(var(--color-btn-primary-active));
    color: rgb(var(--color-btn-primary-txt-active));
}
.error-page .support-section {
    padding: 1rem;
    border-radius: 8px;
    border-top: 3px solid rgb(var(--color-brd-extra-light));
    background-color: rgb(var(--color-bg-extra-light));
}
.error-page .support-section .support-title {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--text-base-lg);
    font-weight: var(--font-weight-semibold);
    color: rgb(var(--color-error-page));
}
.error-page .support-section .support-title .bi {
    color: rgb(var(--color-error-page-ico));
}
.error-page .support-section .support-contacts {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.error-page .support-section .support-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-base);
    color: var(--color-txt);
}
.error-page .support-section .support-item .bi {
    color: rgb(var(--color-error-page));
}
.error-page .support-section .support-link {
    font-weight: var(--font-weight-medium);
    color: rgb(var(--color-txt));
    transition: color 0.3s ease;
}
.error-page .support-section .support-link:hover {
    color: rgb(var(--color-error-page-ico));
}
.error-page .support-section .support-text {
    font-weight: var(--font-weight-medium);
    color: rgb(var(--color-txt));
}
/* § error page */