.smp-sp-wrap {
--sp-rosso: #850000;
--sp-rosso-chiaro: #a81111;
--sp-rosso-scuro: #5e0000;
--sp-rosso-velo: #fdf4f4;
--sp-blu: #2f5aae;
--sp-testo: #272626;
--sp-testo-soft: #5b5a5a;
--sp-chiaro: #f4f5f7;
--sp-bordo: #e2e5ec;
--sp-raggio: 18px;
max-width: 720px;
margin: 0 auto;
padding: 0 0 32px;
font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
color: var(--sp-testo);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.smp-sp-wrap *,
.smp-sp-wrap *::before,
.smp-sp-wrap *::after {
box-sizing: border-box;
} .smp-sp-form {
background: #fff;
border-radius: var(--sp-raggio);
box-shadow:
0 1px 2px rgba(24, 12, 12, .04),
0 12px 32px -12px rgba(24, 12, 12, .18);
overflow: hidden;
} .smp-sp-hero {
position: relative;
padding: 34px 36px 30px;
background:
radial-gradient(120% 140% at 88% -20%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 55%),
linear-gradient(135deg, var(--sp-rosso) 0%, var(--sp-rosso-scuro) 100%);
color: #fff;
}
.smp-sp-hero::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, #d8a13a 0%, #f0cd7d 45%, #d8a13a 100%);
}
.smp-sp-title {
margin: 0 0 8px;
padding: 0;
font-size: 13px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: #fff;
opacity: .92;
}
.smp-sp-intro {
margin: 0 0 6px;
font-size: 19px;
line-height: 1.45;
color: #fff;
}
.smp-sp-anon {
display: inline-flex;
align-items: flex-start;
gap: 9px;
margin: 16px 0 0;
padding: 9px 15px 9px 13px;
background: rgba(255, 255, 255, .13);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
font-size: 13.5px;
line-height: 1.45;
} .smp-sp-lock {
position: relative;
flex: 0 0 auto;
width: 11px;
height: 9px;
margin-top: 5px;
border-radius: 2px;
background: #fff;
}
.smp-sp-lock::before {
content: '';
position: absolute;
left: 50%;
bottom: 100%;
width: 7px;
height: 6px;
transform: translateX(-50%);
border: 1.6px solid #fff;
border-bottom: 0;
border-radius: 4px 4px 0 0;
} .smp-sp-progress {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 36px;
border-bottom: 1px solid var(--sp-chiaro);
}
.smp-sp-progress-track {
flex: 1 1 auto;
height: 6px;
background: #eceef3;
border-radius: 999px;
overflow: hidden;
}
.smp-sp-progress-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--sp-rosso) 0%, var(--sp-rosso-chiaro) 100%);
transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.smp-sp-progress-meta {
flex: 0 0 auto;
margin: 0;
font-size: 12.5px;
font-variant-numeric: tabular-nums;
color: var(--sp-testo-soft);
white-space: nowrap;
}
.smp-sp-step-now {
font-weight: 500;
color: var(--sp-rosso);
} .smp-sp-progress,
.smp-sp-nav .smp-sp-back,
.smp-sp-nav .smp-sp-next {
display: none;
}
.smp-sp-wrap.is-js .smp-sp-progress {
display: flex;
} .smp-sp-step {
padding: 4px 0;
border-bottom: 1px solid var(--sp-chiaro);
}
.smp-sp-step:last-child {
border-bottom: 0;
}
.smp-sp-wrap.is-js .smp-sp-step {
display: none;
border-bottom: 0;
}
.smp-sp-wrap.is-js .smp-sp-step.is-active {
display: block;
animation: smp-sp-in .32s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes smp-sp-in {
from { opacity: 0; transform: translateY(10px); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.smp-sp-wrap.is-js .smp-sp-step.is-active { animation: none; }
.smp-sp-progress-fill { transition: none; }
} .smp-sp-q,
.smp-sp-privacy {
margin: 0;
padding: 30px 36px;
border: 0;
min-width: 0;
}
.smp-sp-legend {
display: block;
width: 100%;
padding: 0;
margin: 0 0 20px;
font-size: 21px;
font-weight: 500;
line-height: 1.35;
letter-spacing: -.01em;
}
.smp-sp-num {
display: block;
margin-bottom: 9px;
font-size: 12px;
font-weight: 500;
letter-spacing: .16em;
color: var(--sp-rosso);
opacity: .75;
}
.smp-sp-num::before {
content: 'DOMANDA ';
}
.smp-sp-label {
display: block;
}
.smp-sp-star {
color: var(--sp-rosso);
margin-left: 2px;
font-weight: 400;
}
.smp-sp-note {
margin: -12px 0 18px;
font-size: 14px;
color: var(--sp-testo-soft);
} .smp-sp-options {
display: flex;
flex-direction: column;
gap: 9px;
}
.smp-sp-option {
display: flex;
align-items: center;
gap: 13px;
padding: 14px 17px;
background: #fff;
border: 1.5px solid var(--sp-bordo);
border-radius: 12px;
cursor: pointer;
transition: border-color .16s ease, background-color .16s ease, transform .12s ease;
}
.smp-sp-option:hover {
border-color: #c9a0a0;
background: var(--sp-rosso-velo);
transform: translateY(-1px);
}
.smp-sp-option:has(input:checked),
.smp-sp-option.is-selected {
border-color: var(--sp-rosso);
background: var(--sp-rosso-velo);
}
.smp-sp-option:focus-within {
outline: 3px solid rgba(133, 0, 0, .18);
outline-offset: 1px;
} .smp-sp-option input {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
position: relative;
width: 22px;
height: 22px;
margin: 0;
border: 2px solid #c8cdd8;
background: #fff;
cursor: pointer;
transition: border-color .16s ease, background-color .16s ease;
}
.smp-sp-option input[type="radio"] { border-radius: 50%; }
.smp-sp-option input[type="checkbox"] { border-radius: 7px; }
.smp-sp-option input:checked {
border-color: var(--sp-rosso);
background: var(--sp-rosso);
}
.smp-sp-option input[type="radio"]:checked::after {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
background: #fff;
}
.smp-sp-option input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
.smp-sp-option-text {
flex: 1 1 auto;
font-size: 16px;
}
.smp-sp-other-input {
width: 100%;
margin-top: 2px;
padding: 13px 16px;
border: 1.5px solid var(--sp-bordo);
border-radius: 12px;
font: inherit;
color: inherit;
background: #fff;
} .smp-sp-textarea {
display: block;
width: 100%;
padding: 16px 18px;
border: 1.5px solid var(--sp-bordo);
border-radius: 14px;
font: inherit;
font-size: 16px;
line-height: 1.6;
color: inherit;
background: #fcfcfd;
resize: vertical;
min-height: 130px;
transition: border-color .16s ease, background-color .16s ease;
}
.smp-sp-textarea::placeholder {
color: #a8aab4;
}
.smp-sp-textarea:focus,
.smp-sp-other-input:focus {
outline: none;
background: #fff;
border-color: var(--sp-rosso);
box-shadow: 0 0 0 4px rgba(133, 0, 0, .1);
} .smp-sp-privacy-title {
margin: 0 0 6px;
font-size: 12px;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sp-rosso);
opacity: .75;
}
.smp-sp-privacy-check {
align-items: flex-start;
padding: 18px 20px;
background: var(--sp-chiaro);
border-color: transparent;
}
.smp-sp-privacy-check input {
margin-top: 2px;
}
.smp-sp-privacy-check .smp-sp-option-text {
font-size: 14.5px;
line-height: 1.6;
color: var(--sp-testo-soft);
} .smp-sp-alert {
margin: 0;
padding: 16px 36px;
background: var(--sp-rosso-velo);
border-bottom: 1px solid #f0dada;
color: #7a1414;
font-size: 14.5px;
}
.smp-sp-alert ul { margin: 8px 0 0; padding-left: 20px; }
.smp-sp-alert a  { color: #7a1414; }
.smp-sp-q-error .smp-sp-option,
.smp-sp-q-error .smp-sp-textarea {
border-color: #d98c8c;
}
.smp-sp-error {
margin: -10px 0 16px;
font-size: 14px;
font-weight: 500;
color: var(--sp-rosso);
} .smp-sp-nav {
display: flex;
align-items: center;
gap: 12px;
padding: 22px 36px 26px;
border-top: 1px solid var(--sp-chiaro);
background: #fcfcfd;
}
.smp-sp-wrap.is-js .smp-sp-nav .smp-sp-back[hidden],
.smp-sp-wrap.is-js .smp-sp-nav .smp-sp-next[hidden],
.smp-sp-wrap.is-js .smp-sp-nav .smp-sp-submit[hidden] {
display: none;
}
.smp-sp-wrap.is-js .smp-sp-nav .smp-sp-back,
.smp-sp-wrap.is-js .smp-sp-nav .smp-sp-next {
display: inline-flex;
}
.smp-sp-btn {
appearance: none;
font-family: inherit;
font-size: 16px;
font-weight: 500;
border-radius: 999px;
cursor: pointer;
transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .1s ease;
}
.smp-sp-btn:active { transform: translateY(1px); }
.smp-sp-back {
align-items: center;
gap: 7px;
padding: 12px 20px;
background: transparent;
border: 1.5px solid var(--sp-bordo);
color: var(--sp-testo-soft);
}
.smp-sp-back:hover {
border-color: #c2c7d2;
color: var(--sp-testo);
}
.smp-sp-next,
.smp-sp-submit {
align-items: center;
gap: 8px;
margin-left: auto;
padding: 14px 32px;
border: 0;
background: var(--sp-rosso);
color: #fff;
box-shadow: 0 6px 16px -8px rgba(133, 0, 0, .8);
}
.smp-sp-next:hover,
.smp-sp-submit:hover {
background: var(--sp-rosso-chiaro);
}
.smp-sp-btn:focus-visible {
outline: 3px solid rgba(133, 0, 0, .3);
outline-offset: 2px;
}
.smp-sp-submit[disabled] {
opacity: .65;
cursor: default;
}
.smp-sp-foot {
margin: 14px 4px 0;
font-size: 13px;
color: var(--sp-testo-soft);
text-align: center;
} .smp-sp-card {
background: #fff;
border-radius: var(--sp-raggio);
box-shadow: 0 1px 2px rgba(24, 12, 12, .04), 0 12px 32px -12px rgba(24, 12, 12, .18);
padding: 56px 36px;
text-align: center;
}
.smp-sp-thanks-mark {
position: relative;
width: 72px;
height: 72px;
margin: 0 auto 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--sp-rosso) 0%, var(--sp-rosso-scuro) 100%);
box-shadow: 0 10px 24px -10px rgba(133, 0, 0, .9);
font-size: 0;
}
.smp-sp-thanks-mark::after {
content: '';
position: absolute;
left: 27px;
top: 19px;
width: 15px;
height: 28px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.smp-sp-thanks h2 {
margin: 0 0 12px;
font-size: 27px;
font-weight: 500;
color: var(--sp-rosso);
}
.smp-sp-thanks p,
.smp-sp-closed p {
max-width: 460px;
margin: 0 auto;
font-size: 16.5px;
color: var(--sp-testo-soft);
} @media (max-width: 640px) {
.smp-sp-wrap { --sp-raggio: 14px; font-size: 15.5px; }
.smp-sp-hero { padding: 26px 20px 24px; }
.smp-sp-intro { font-size: 17px; }
.smp-sp-progress,
.smp-sp-alert { padding-left: 20px; padding-right: 20px; }
.smp-sp-q,
.smp-sp-privacy { padding: 24px 20px; }
.smp-sp-legend { font-size: 19px; }
.smp-sp-nav {
padding: 18px 20px 22px;
gap: 10px;
}
.smp-sp-next,
.smp-sp-submit { padding: 13px 24px; }
.smp-sp-card { padding: 44px 22px; }
}