/* ============================================================
   RESET DI ISOLAMENTO — il quiz vive spesso dentro temi/page
   builder che applicano stili globali aggressivi su h1-h6,
   button, input (uppercase, colori fissi, ombre testo, ecc).
   Tutto qui dentro è scoped a .qp-quiz e usa !important sulle
   proprietà "identitarie" per garantire che il design del quiz
   non venga mai sovrascritto dal tema del sito.
   ============================================================ */

.qp-quiz, .qp-quiz * {
    text-shadow: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-sizing: border-box !important;
}

.qp-quiz {
    --qp-primary: #1f6f50;
    --qp-secondary: #111111;
    --qp-text: #222222;
    --qp-field-text: #222222;
    --qp-bg: #ffffff;
    --qp-surface: #ffffff;
    --qp-border: #e0e0e0;
    --qp-radius: 10px;
    --qp-font: inherit;

    display: block !important;
    font-size: 16px !important;
    font-family: var(--qp-font) !important;
    color: var(--qp-text) !important;
    background: var(--qp-bg) !important;
    border: 1px solid var(--qp-border) !important;
    border-radius: var(--qp-radius) !important;
    padding: 20px !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
}

.qp-quiz p, .qp-quiz div, .qp-quiz span, .qp-quiz h1, .qp-quiz h2, .qp-quiz h3,
.qp-quiz h4, .qp-quiz label, .qp-quiz a {
    font-family: inherit !important;
    box-sizing: border-box !important;
    text-align: left !important;
    background: none;
}

.qp-progress {
    width: 100% !important;
    height: 6px !important;
    background: color-mix(in srgb, var(--qp-text) 12%, transparent) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}
.qp-progress-bar {
    height: 100% !important;
    width: 0%; /* NIENTE !important qui: il JS aggiorna questo valore via stile inline man mano che si avanza */
    background: var(--qp-primary) !important;
    transition: width .3s ease !important;
}

.qp-step { animation: qp-fade .25s ease; margin: 0 !important; padding: 0 !important; }
@keyframes qp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.qp-quiz .qp-intro-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 0 0 18px !important;
    color: var(--qp-text) !important;
    font-weight: 400 !important;
}

.qp-quiz .qp-intro-logo {
    display: block !important;
    max-width: 160px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto 16px !important;
}

.qp-quiz .qp-intro-title {
    font-size: 21px !important;
    font-weight: 700 !important;
    margin: 0 0 10px !important;
    line-height: 1.35 !important;
    color: var(--qp-text) !important;
    text-align: center !important;
}

.qp-quiz .qp-question-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 14px !important;
    line-height: 1.4 !important;
    color: var(--qp-text) !important;
}

.qp-answers-list { display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 0 18px !important; padding: 0 !important; }

.qp-quiz button {
    all: unset !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    font-family: inherit !important;
    display: inline-block !important;
    text-align: center !important;
}

/* Stesso scudo del tema anche per i pulsanti fatti con un link <a> (es. i CTA
   delle sezioni di contenuto) — prima lo avevano solo i <button> veri, quindi
   il tema poteva ancora imporre il proprio stile su questi. */
/* Stesso scudo del tema anche per i pulsanti fatti con un link <a> (es. i CTA
   delle sezioni di contenuto e il CTA finale nel risultato) — prima lo avevano
   solo i <button> veri, quindi il tema poteva ancora imporre il proprio stile
   su questi. Stessa "forza" del reset dei bottoni, per non rompere lo stile
   che viene applicato subito dopo dalle classi .qp-btn, .qp-content-link, ecc. */
.qp-quiz a {
    all: unset !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    font-family: inherit !important;
    display: inline-block !important;
    text-align: center !important;
    text-decoration: none !important;
}

.qp-quiz .qp-answer-option {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 14px 16px !important;
    border: 2px solid var(--qp-border) !important;
    border-radius: calc(var(--qp-radius) * 0.7) !important;
    background: var(--qp-surface) !important;
    color: var(--qp-field-text) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    transition: border-color .15s ease, background .15s ease !important;
}
.qp-quiz .qp-answer-option:hover { border-color: var(--qp-primary) !important; }
.qp-quiz .qp-answer-option.qp-selected {
    border-color: var(--qp-primary) !important;
    background: color-mix(in srgb, var(--qp-primary) 12%, var(--qp-surface)) !important;
    font-weight: 600 !important;
}

/* Domande a risposta multipla (checkbox) */
.qp-quiz .qp-answer-option.qp-answer-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.qp-quiz .qp-checkbox-box {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--qp-border) !important;
    border-radius: 5px !important;
    position: relative !important;
    transition: background .15s ease, border-color .15s ease !important;
}
.qp-quiz .qp-answer-checkbox.qp-selected .qp-checkbox-box {
    background: var(--qp-primary) !important;
    border-color: var(--qp-primary) !important;
}
.qp-quiz .qp-answer-checkbox.qp-selected .qp-checkbox-box::after {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 2px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}
.qp-quiz .qp-checkbox-label { flex: 1 1 auto !important; }
.qp-quiz .qp-btn-primary:disabled,
.qp-quiz .qp-btn-primary[disabled] {
    opacity: .45 !important;
    cursor: not-allowed !important;
    filter: none !important;
}

.qp-nav { display: flex !important; justify-content: space-between !important; gap: 10px !important; margin: 6px 0 0 !important; }

.qp-quiz .qp-btn {
    padding: 12px 22px !important;
    border-radius: calc(var(--qp-radius) * 0.7) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: normal !important;
}
.qp-quiz .qp-btn-primary { background: var(--qp-primary) !important; color: #fff !important; }
.qp-quiz .qp-btn-primary:hover { filter: brightness(0.92); color: #fff !important; }
.qp-quiz .qp-btn-back { background: transparent !important; color: var(--qp-text) !important; border: 2px solid var(--qp-border) !important; }
.qp-quiz .qp-start-btn { width: 100% !important; }

.qp-quiz .qp-contact-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 16px !important;
    line-height: 1.4 !important;
    color: var(--qp-text) !important;
}

.qp-field { margin: 0 0 14px !important; }
.qp-field label { display: block !important; margin: 0 0 6px !important; font-weight: 600 !important; font-size: 14px !important; color: var(--qp-text) !important; }
.qp-required { color: #c0392b !important; }

.qp-quiz input, .qp-quiz textarea {
    all: unset !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    padding: 11px 14px !important;
    border: 2px solid var(--qp-border) !important;
    border-radius: calc(var(--qp-radius) * 0.6) !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: var(--qp-field-text) !important;
    background: var(--qp-surface) !important;
}
.qp-quiz input:focus, .qp-quiz textarea:focus { outline: none !important; border-color: var(--qp-primary) !important; }
.qp-quiz textarea { min-height: 90px !important; resize: vertical !important; }

/* Sezioni di contenuto — stesso spazio interno del box risultato, mai a filo margine */
.qp-content-block {
    margin: 0 0 4px !important;
    padding: 22px 20px !important;
    border-radius: calc(var(--qp-radius) * 0.7) !important;
}
.qp-content-inner { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.qp-content-image {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: calc(var(--qp-radius) * 0.6);
    display: block !important;
}
.qp-quiz .qp-content-title { font-size: 19px !important; margin: 0 0 8px !important; line-height: 1.35 !important; font-weight: 700 !important; color: inherit !important; }
.qp-content-body { margin: 0 !important; line-height: 1.65 !important; font-size: 15px !important; opacity: .92 !important; white-space: pre-line !important; font-weight: 400 !important; color: inherit !important; }
.qp-content-nav { margin-top: 20px !important; }
.qp-content-nav .qp-btn-back { border-color: currentColor !important; color: inherit !important; opacity: .85; }
.qp-content-nav .qp-btn-back:hover { opacity: 1; }
.qp-content-nav .qp-btn-back.qp-content-back-colored {
    border-color: var(--qp-back-color) !important;
    color: var(--qp-back-color) !important;
    opacity: 1;
}
.qp-content-nav .qp-btn-back.qp-content-back-text-colored { color: var(--qp-back-text-color) !important; }
.qp-quiz .qp-content-continue.qp-content-btn-colored { background: var(--qp-content-btn-color) !important; }
.qp-quiz .qp-content-continue.qp-content-btn-colored.qp-content-btn-text-colored { color: var(--qp-content-btn-text) !important; }
.qp-quiz .qp-content-link { border-color: currentColor !important; }
.qp-quiz .qp-content-link.qp-content-link-filled {
    background: var(--qp-link-color) !important;
    border-color: var(--qp-link-color) !important;
    color: #fff !important;
}
.qp-quiz .qp-content-link.qp-content-link-filled.qp-content-link-text-colored { color: var(--qp-link-text-color) !important; }

.qp-loading { text-align: center !important; font-size: 14px !important; opacity: .7 !important; }

.qp-error-msg { color: #c0392b !important; font-size: 13px !important; margin: 0 0 10px !important; }

/* Risultato */
.qp-result-box {
    text-align: center !important;
    padding: 24px 18px !important;
    border-radius: calc(var(--qp-radius) * 0.7) !important;
    background: color-mix(in srgb, var(--qp-text) 5%, transparent) !important;
    margin: 0 0 16px !important;
}
.qp-quiz .qp-result-title { font-size: 20px !important; margin: 0 0 8px !important; font-weight: 700 !important; text-align: center !important; color: var(--qp-text) !important; }
.qp-quiz .qp-result-price { font-size: 32px !important; font-weight: 800 !important; color: var(--qp-primary) !important; text-align: center !important; }
.qp-result-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
}
.qp-quiz .qp-result-badge {
    display: inline-block !important;
    background: var(--qp-secondary) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    line-height: 1.4 !important;
}
.qp-quiz .qp-result-addon, .qp-quiz .qp-result-total { font-size: 14px !important; margin-top: 6px !important; opacity: .85 !important; text-align: center !important; }
.qp-quiz .qp-result-total { font-weight: 700 !important; opacity: 1 !important; margin-top: 10px !important; font-size: 16px !important; }
.qp-quiz .qp-result-message { margin: 14px 0 6px !important; line-height: 1.6 !important; font-weight: 400 !important; text-align: center !important; }
.qp-quiz .qp-result-cta { margin-top: 14px !important; display: block !important; width: fit-content !important; }
.qp-quiz .qp-result-cta.qp-align-left { margin-left: 0 !important; margin-right: auto !important; }
.qp-quiz .qp-result-cta.qp-align-center { margin-left: auto !important; margin-right: auto !important; }
.qp-quiz .qp-result-cta.qp-align-right { margin-left: auto !important; margin-right: 0 !important; }

@media (min-width: 700px) {
    .qp-content-image-left .qp-content-inner,
    .qp-content-image-right .qp-content-inner {
        flex-direction: row !important;
        align-items: center !important;
    }
    .qp-content-image-right .qp-content-inner { flex-direction: row-reverse !important; }
    .qp-content-image-left .qp-content-image,
    .qp-content-image-right .qp-content-image {
        width: 40% !important;
        max-height: none !important;
        height: 100% !important;
        align-self: stretch !important;
    }
    .qp-content-image-left .qp-content-text,
    .qp-content-image-right .qp-content-text { flex: 1 !important; }
}

@media (min-width: 600px) {
    .qp-quiz { padding: 32px !important; }
    .qp-content-block { padding: 30px 32px !important; }
}

@media (min-width: 900px) {
    .qp-quiz { padding: 40px !important; }
    .qp-content-block { padding: 36px 40px !important; }
    .qp-question-title { font-size: 20px !important; }
    .qp-quiz .qp-answer-option { font-size: 16px !important; }
}