/* ============================================================
   Vola a Tokyo — global stylesheet (Ringo design system)
   Built incrementally to recreate HP.jpg.
   Section 1: global base + header (.testata / .mintec)
   ============================================================ */

/* ----------------------------- BASE ----------------------------- */
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
    color: #333;
    background: #fff;
    overflow-x: hidden;
    font-family: montserrat, sans-serif;
    font-size: 16px;
    line-height: 2;
}

html {
    overflow-x: hidden;
}

a:focus,
a:visited,
a {
    text-decoration: none;
    color: inherit;
}

img {
    border: none;
}

input:focus,
textarea,
select {
    outline: none;
}

textarea {
    resize: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    font-weight: inherit !important;
    margin: 0;
    padding: 0;
    font-size: inherit !important;
}

p {
    margin: 0;
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

/* ----------------------------- ICON FONT -----------------------------
   The original "ringo_icons" web-font is not bundled in this project.
   The class scaffolding is kept for forward-compatibility; the two
   glyphs we actually use (icon-user-o, icon-down-dir) are rebuilt
   without the font in the SUBSTITUTIONS block at the bottom.
   --------------------------------------------------------------------- */
/* @font-face {
    font-family: ringo_icons;
    src: url(../fonts/ringo_icons.eot);
    src: url(../fonts/ringo_icons.eot#iefix) format('embedded-opentype'), url(../fonts/ringo_icons.woff2) format('woff2'), url(../fonts/ringo_icons.woff) format('woff'), url(../fonts/ringo_icons.ttf) format('truetype'), url(../fonts/ringo_icons.svg#ringo_icons) format('svg');
    font-weight: 400;
    font-style: normal
} */

[class^='icon-']:before,
[class*=' icon-']:before {
    font-family: ringo_icons;
    font-style: normal;
    font-weight: 400;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: 0.2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: 0.2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-down-dir:before {
    content: '\e803';
}
.icon-up-dir:before {
    content: '\e808';
}
.icon-user-o:before {
    content: '\f2c0';
}

/* ----------------------------- PAGE WRAPPERS ----------------------------- */
section.page {
    margin-top: 85px;
}

section.page_nomargin {
    margin-top: 0;
}

.page .page_container {
    position: relative;
}

.page .page_allineamento {
    position: relative;
    max-width: 80em;
    width: 80%;
    margin: 0 auto;
}

@media screen and (max-width: 799px) {
    section.page {
        margin-top: 60px;
    }

    section.page_nomargin {
        margin-top: 0;
    }

    .page .page_allineamento {
        max-width: 90em;
        width: 90%;
        margin: 0 auto;
    }
}

/* ----------------------------- MAIN ----------------------------- */
/* content wrapper offset equal to the fixed header height so the
   first section (hero) clears it */
.main {
    position: relative;
    padding-top: 75px;
}

@media screen and (max-width: 799px) {
    .main {
        padding-top: 65px;
    }
}

/* Hero .png con taglio inferiore trasparente: il teal dietro riempie il taglio
   (stesso principio di hero-small sul fondo teal della .page-vincita) */
.hero-cut {
    background-color: #1eadbb;
}

/* ----------------------------- AREA PRIVATA (area-privata) -----------------------------
   Pagina bianca: titoli Baloo 2, testi Montserrat, accenti rossi. Il contenuto di
   #private_title / #private_body è iniettato da app.js (titoli, testi e bottoni .btn-red). */
.page-area h1,
.page-area #private_title {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    color: #000;
    line-height: 1.2;
}

.page-area h1 {
    font-size: 34px !important;
}

.page-area #private_title {
    font-size: 26px !important;
    margin-bottom: 12px;
}

/* titoli iniettati nel corpo (h1-h4) -> Baloo 2 */
.page-area #private_body h1,
.page-area #private_body h2,
.page-area #private_body h3,
.page-area #private_body h4,
.page-area #private_body2 h1,
.page-area #private_body2 h2,
.page-area #private_body2 h3,
.page-area #private_body2 h4  
{
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 700 !important;
    color: #000;
    line-height: 1.25;
}

/* testi -> Montserrat */
.page-area #private_body,
.page-area #private_body2,
.page-area #private_body p,
.page-area #private_body2 p,
.page-area #private_body li,
.page-area #private_body2 li,
.page-area #private_body span,
.page-area #private_body2 span,
.page-area #private_body div,
.page-area #private_body2 div {
    font-family: 'Montserrat', sans-serif !important;
    color: #333;
    line-height: 1.5;
}

.page-area #private_body strong {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* link -> rosso Ringo */
.page-area #private_body a:not(.btn) {
    color: #e41f12;
    text-decoration: underline;
}

/* bottoni iniettati (.btn-red, di default navy) -> rosso Ringo */
.page-area .btn-red {
    background-color: #e41f12 !important;
    border: 0 !important;
    border-radius: 24px !important;
    color: #fff !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 700 !important;
}

.page-area .btn-red:hover {
    background-color: #b71712 !important;
    color: #fff !important;
}

@media screen and (max-width: 799px) {
    .page-area h1 {
        font-size: 26px !important;
    }

    .page-area #private_title {
        font-size: 22px !important;
    }
}

/* ----------------------------- PROFILO (profilo.php) -----------------------------
   Come area-privata: titolo Baloo 2, bottoni rossi Ringo. Il form (#profilo-preferenze)
   è lo screenset Gigya ProfileUpdate, uniformato da gigya-ringo.css (body.barilla). */
.page-profilo .page-title {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 800 !important;
    font-size: 34px !important;
    text-transform: uppercase;
    color: #000;
    line-height: 1.2;
}

/* bottoni tab (.btn-red di default navy) -> rosso Ringo, inline */
.page-profilo .btn-red {
    display: inline-block;
    width: auto;
    height: auto;
    background-color: #e41f12 !important;
    border: 0 !important;
    border-radius: 24px !important;
    color: #fff !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    padding: 12px 28px !important;
}

.page-profilo .btn-red:hover {
    background-color: #b71712 !important;
    color: #fff !important;
}

@media screen and (max-width: 799px) {
    .page-profilo .page-title {
        font-size: 26px !important;
    }
}

/* ----------------------------- SECTION SEPARATORS (line_down) -----------------------------
   Diagonal cut between two sections. Drop .line_down right after the block
   whose colour should "drip" down, and set .st0 to that colour.
   The SVG stretches (viewBox 0 0 100 100 + preserveAspectRatio="none"), so the
   polygon points are simple 0-100 values and adapt to any width/height.
   ------------------------------------------------------------------------------------------ */
.line_down {
    display: block;
    width: 100%;
    line-height: 0;
    margin-top: -1px;
}

.line_down svg {
    display: block;
    width: 100%;
    height: 120px;
}

.line_down .st0 {
    fill: #1eadbb;
}

@media screen and (max-width: 799px) {
    .line_down svg {
        height: 60px;
    }
}

/* ----------------------------- INTRO (Vola a Tokyo e scatta ogni istante) ----------------------------- */
.intro_inner {
    padding: 50px 0;
}

/* !important on size/weight overrides the global h-tag reset */
.intro_title {
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 40px !important;
    line-height: 1.15;
    margin-bottom: 22px;
}

.intro_text {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.6;
}

.cta_partecipa {
    display: inline-block;
    margin-top: 30px;
    padding: 20px 55px;
    background: url(../assets/home/cta_button.png) no-repeat center / contain;
    color: #e41f12 !important;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
}

.cta_partecipa.cyan {
    color: #1eadbb;
}

/* Messaggio di stato concorso mostrato al posto del bottone (su teal/rosso) */
.cta_msg {
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    margin-top: 20px;
}

.cta_msg a {
    color: #fff;
    text-decoration: underline;
}

@media screen and (max-width: 799px) {
    .intro_inner {
        padding: 30px 30px;
    }

    .cta_msg {
        font-size: 16px;
    }

    .intro_title {
        font-size: 28px !important;
    }

    .intro_text {
        font-size: 16px;
    }

    .cta_partecipa {
        font-size: 16px;
        padding: 16px 40px;
    }
}

/* ----------------------------- COME PARTECIPARE (typography) -----------------------------
   Realigns this section to the design system (Baloo 2 titles / Montserrat body) and
   fixes the inherited line-height:2 + the global h-tag reset that zeroed the titles. */
#explainers-container .title {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 800 !important;
    font-size: 34px !important;
    line-height: 1.2;
    text-transform: uppercase;
    color: #000;
}

.explainer .paragraph-big {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 1.25;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 8px;
}

.explainer .paragraph {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

.explainer .paragraph strong {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

@media screen and (max-width: 799px) {
    #explainers-container .title {
        font-size: 26px !important;
    }

    .explainer .paragraph-big {
        font-size: 18px !important;
    }

    .explainer .paragraph {
        font-size: 15px;
    }
}

/* ----------------------------- I PRODOTTI CHE PARTECIPANO ----------------------------- */
.line_down--red .st0 {
    fill: #e41f12;
}

.line_down--red svg {
    height: 150px;
}

.prodotti {
    background: #e41f12;
    margin-top: -1px;
    padding: 20px 0 50px;
}

.prodotti_title {
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800 !important;
    text-transform: uppercase;
    text-align: center;
    font-size: 34px !important;
    line-height: 1.2;
    margin: 0 0 40px;
}

.prodotti_img {
    display: block;
    width: 100%;
    height: auto;
}

/* NOVITÀ card — white SVG shape, image left / text right */
.novita_inner {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: 45px auto 15px;
    aspect-ratio: 880 / 322;
    background: url(../assets/home/novita_bg.svg) no-repeat center / 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3%;
    padding: 3% 6% 4% 5%;
}

.novita_img {
    flex: 0 0 56%;
    display: flex;
    align-items: center;
}

.novita_img img {
    display: block;
    width: 100%;
    height: auto;
}

.novita_text {
    flex: 0 0 34%;
    color: #000;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.35;
}

.prodotti_cta {
    margin-top: 45px;
}

.prodotti_tel {
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 22px;
    text-align: center;
    margin-top: 45px;
}

.prodotti_tel a {
    color: #fff;
    text-decoration: underline;
}

.prodotti_list {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    max-width: 1000px;
    margin: 30px auto 0;
    text-align: center;
}

@media screen and (max-width: 799px) {
    .line_down--red svg {
        height: 70px;
    }

    .prodotti_title {
        font-size: 24px !important;
    }

    .prodotti_tel {
        font-size: 18px;
    }

    .prodotti_list {
        font-size: 12px;
    }

    .novita_inner {
        aspect-ratio: auto;
        flex-direction: column;
        text-align: center;
        /* background: #fff; */
        /* border-radius: 12px; */
        gap: 16px;
        padding: 24px 20px;
        margin: 30px auto;
    }

    .novita_img,
    .novita_text {
        flex: 0 0 auto;
    }

    .novita_img {
        width: 78%;
        margin: 0 auto;
    }

    .novita_text {
        font-size: 20px;
    }
}

/* ----------------------------- FINALE (biscotti + testo legale) ----------------------------- */
.finale {
    background: #fff;
    padding: 10px 0 30px;
    text-align: center;
}

.finale_cookie {
    margin-bottom: 18px;
}

.finale_cookie img {
    display: inline-block;
    width: 350px;
    height: auto;
}

.finale_text {
    color: #8a8a8a;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    line-height: 1.7;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}

.finale_text a {
    color: #8a8a8a;
    text-decoration: underline;
}

/* ----------------------------- FOOTER ----------------------------- */
footer {
    background: #fff;
    border-top: 2px solid #e41f12;
    color: #e41f12;
    font-family: 'Baloo 2', sans-serif;
}

.footer_container {
    max-width: 80em;
    width: 80%;
    margin: 0 auto;
    padding: 22px 0;
}

.footer_allineamento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.footer_logo {
    flex: 0 0 auto;
}

.footer_logo img {
    display: block;
    width: 110px;
    height: auto;
}

.footer_drop {
    flex: 1 1 auto;
    text-align: center;
}

.footer_legals {
    color: #e41f12;
    font-size: 13px;
    margin-bottom: 8px;
}

.footer_links .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer_links .menu li {
    display: inline-block;
    margin: 2px 10px;
    font-size: 14px;
    color: #e41f12;
    cursor: pointer;
}

.footer_links .menu li a {
    color: #e41f12;
}

.footer_links .menu li a:hover,
.footer_links .menu li.ot-sdk-show-settings:hover {
    color: #18acc3;
}

.footer_socials {
    flex: 0 0 auto;
}

.footer_socials ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 12px;
}

.footer_socials li a {
    width: 38px;
    height: 38px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.footer_socials .social_tiktok {
    background-image: url(../assets/home/tiktok.png);
}

.footer_socials .social_instagram {
    background-image: url(../assets/home/insta.png);
}

.footer_socials .social_youtube {
    background-image: url(../assets/home/youtube.png);
}

@media screen and (max-width: 799px) {
    .footer_container {
        width: 90%;
    }

    .footer_allineamento {
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }

    .footer_socials ul {
        justify-content: center;
    }
}

/* ----------------------------- PAGINA OCR (partecipa-step1) -----------------------------
   Font/size allineati al design (Baloo 2 titoli, Montserrat testi); !important dove serve
   per battere il reset globale degli h*. Scoped su .page-ocr. */
.page-ocr .ocr_step {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.2;
    color: #000;
    margin-bottom: 12px;
}

.page-ocr h1.paragraph-big {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    line-height: 1.3;
    color: #000;
}

.page-ocr .paragraph,
.page-ocr .paragraph-small,
.page-ocr .paragraph-smaller {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    color: #333;
}

.page-ocr .paragraph {
    font-size: 16px;
}

.page-ocr .paragraph-small {
    font-size: 15px;
}

.page-ocr .paragraph-smaller {
    font-size: 13px;
}

.page-ocr .paragraph strong,
.page-ocr .paragraph-small strong,
.page-ocr .paragraph-smaller strong {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.page-ocr .upload-label {
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

.page-ocr .upload-sublabel {
    font-family: 'Montserrat', sans-serif !important;
}

/* Bottoni "Carica": bianchi, testo rosso, senza border-radius */
.page-ocr .carica-text-btn {
    background-color: #fff;
    color: #e41f12;
    border-radius: 0;
    font-family: 'Baloo 2', sans-serif;
}

/* PROSEGUI: bottone CTA_button (reset border nativo del <button>) + un po' più grande */
.page-ocr #upload-scontrino-btn {
    border: 0;
    cursor: pointer;
    font-size: 24px;
    padding: 26px 74px;
}

/* variante bianca del taglio diagonale (rosso/teal -> bianco) */
.line_down--white .st0 {
    fill: #fff;
}

/* --- OCR step2 (partecipa-step-successivo) --- */
.page-ocr h2.paragraph-big {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    line-height: 1.3;
    color: #000;
}

.page-ocr h3.paragraph {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 1.25;
}

/* etichette campi rilevati (Data/Ora/Numero/Importo) sul bianco -> scure */
.page-ocr .ocr-field-container .label {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    color: #1b3775;
}

/* box "check" dei dati rilevati -> teal */
.page-ocr .partecipa-form .ocr-field-container .status.ok {
    background: #1eadbb;
}

/* sezione questionario: teal full-bleed, testi bianchi */
.questionario {
    position: relative;
    background: #1eadbb;
}

.questionario h3,
.questionario .paragraph,
.questionario .paragraph-smaller,
.questionario p,
.questionario .form-check-label,
.questionario .form-check-label a {
    color: #fff !important;
}

/* bottone "Scopri se hai vinto": stesso CTA_button, testo teal */
.cta_scopri {
    color: #1eadbb;
}

.page-ocr button.cta_partecipa {
    border: 0;
    cursor: pointer;
}

/* bordo teal per input e select */
.page-ocr input,
.page-ocr select,
.page-ocr .form-control,
.page-ocr .custom-select,
.page-ocr .custom-select-container,
.page-ocr .select2-container--default .select2-selection--single {
    border-color: #1eadbb !important;
}

/* --- COMPILAZIONE DATI (richiedi-tel): sezioni rosse full-bleed, testo bianco --- */
.page-ocr .sez_rossa {
    background: #e41f12;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* prima sezione rossa: offset per header fisso, hero attaccato sotto */
.page-ocr .sez_rossa--top {
    padding-top: 75px;
}

.page-ocr .sez_rossa .product-packs {
    margin-top: 0 !important;
}

/* testi bianchi sul rosso */
.page-ocr .sez_rossa .ocr_step,
.page-ocr .sez_rossa h1,
.page-ocr .sez_rossa h2,
.page-ocr .sez_rossa h3,
.page-ocr .sez_rossa .paragraph,
.page-ocr .sez_rossa .paragraph-big,
.page-ocr .sez_rossa .paragraph-small,
.page-ocr .sez_rossa .paragraph-smaller,
.page-ocr .sez_rossa p,
.page-ocr .sez_rossa label,
.page-ocr .sez_rossa .upload-label,
.page-ocr .sez_rossa .upload-sublabel,
.page-ocr .sez_rossa .form-check-label,
.page-ocr .sez_rossa .form-check-label a {
    color: #fff !important;
}

/* input/select bianchi sul rosso (escluse checkbox/radio: non azzerare la spunta) */
.page-ocr .sez_rossa input:not([type='checkbox']):not([type='radio']),
.page-ocr .sez_rossa select,
.page-ocr .sez_rossa .form-control,
.page-ocr .sez_rossa .select2-container--default .select2-selection--single {
    background: #fff !important;
    border-color: #fff !important;
    color: #333 !important;
}

/* CTA "Scopri se hai vinto": grande, allineata alle altre pagine */
.page-ocr .sez_rossa .cta_partecipa {
    border: 0;
    cursor: pointer;
    font-size: 24px;
    padding: 26px 74px;
}

@media screen and (max-width: 799px) {
    .page-ocr .ocr_step {
        font-size: 22px !important;
    }

    .page-ocr h1.paragraph-big {
        font-size: 22px !important;
    }

    .page-ocr .paragraph {
        font-size: 15px;
    }

    .page-ocr .upload-label {
        font-size: 18px !important;
    }
}

/* ----------------------------- PAGINA VINCITA (richiedi-premio) -----------------------------
   Tutto su teal: l'hero-small.png (fondo trasparente) su bg teal crea il taglio rosso->teal;
   testi bianchi, form bianco, CTA rossa, diagonale teal->bianco in fondo. */
.page-vincita {
    background: #1eadbb;
    padding-top: 75px;
}

/* l'hero-small.png ha già il taglio trasparente -> tolgo il margine per attaccarlo all'header */
.page-vincita .product-packs {
    margin-top: 0 !important;
}

/* titoli bianchi (Baloo 2) */
.page-vincita .title {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 800 !important;
    font-size: 36px !important;
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff !important;
}

.page-vincita h3.paragraph {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    text-transform: uppercase;
    color: #fff !important;
}

.page-vincita h3.paragraph strong {
    font-family: 'Baloo 2', sans-serif !important;
}

/* testi bianchi (Montserrat) */
.page-vincita .paragraph,
.page-vincita p:not(.errorClass),
.page-vincita .info-text,
.page-vincita label {
    font-family: 'Montserrat', sans-serif;
    color: #fff !important;
}

.page-vincita .paragraph {
    font-size: 16px;
    line-height: 1.5;
}

.page-vincita .paragraph strong {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* sottotitolo premio (dinamico) + "completa con i tuoi dati" */
.page-vincita .prize-subtitle,
.page-vincita .prize-complete {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800 !important;
    text-transform: uppercase;
    color: #fff !important;
}

.page-vincita .prize-subtitle {
    font-size: 20px;
    line-height: 1.25;
    margin-top: 4px;
}

.page-vincita .prize-subtitle strong {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
}

.page-vincita .prize-complete {
    font-size: 18px;
    margin-top: 24px;
}

/* sottotitolo (h2.paragraph) su pagine teal, es. convalida telefonica */
.page-vincita h2.paragraph,
.page-vincita h2.paragraph strong {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 22px !important;
    line-height: 1.25;
    color: #fff !important;
}

/* testo piccolo (note, label checkbox) su teal */
.page-vincita .paragraph-smaller {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #fff !important;
}

.page-vincita .paragraph-smaller strong {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.page-vincita .paragraph-smaller a {
    color: #fff;
    text-decoration: underline;
}

.page-vincita p a,
.page-vincita .info-text a {
    color: #fff;
    text-decoration: underline;
}

/* input/select bianchi, testo scuro, senza bordo (escluse checkbox/radio) */
.page-vincita .form-control,
.page-vincita input:not([type='checkbox']):not([type='radio']),
.page-vincita select,
.page-vincita .select2-container--default .select2-selection--single {
    background: #fff !important;
    border: none !important;
    color: #333 !important;
    border-radius: 0 !important;
}

/* checkbox: quadratino bianco con bordo, spunta bianca su rosso quando attiva */
.page-vincita .form-check-input {
    background-color: #fff !important;
    border: 2px solid #e41f12 !important;
    border-radius: 0 !important;
}

.page-vincita .form-check-input:checked {
    background-color: #e41f12 !important;
    border-color: #e41f12 !important;
}

/* --- compilazione dati 2 (telefono-step2): titolo claim + label campi sopra input --- */
.page-vincita .claim-title {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    font-size: 28px;
    line-height: 1.25;
    margin-bottom: 8px;
}

.page-vincita .passaggio-label {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    color: #fff;
}

.page-vincita .field-label {
    display: block;
    text-align: left;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    margin-bottom: 6px;
}

@media screen and (max-width: 799px) {
    .page-vincita .claim-title {
        font-size: 22px;
    }
}

.page-vincita .form-control::placeholder,
.page-vincita input::placeholder {
    color: #9a9a9a;
}

/* CTA -> CTA_button (rosso), grande come le altre pagine (button o <a>) */
.page-vincita .cta_partecipa {
    border: 0;
    cursor: pointer;
    font-size: 24px;
    padding: 26px 74px;
    color: #e41f12;
}

/* seconda chance (partial iniettato in step2) */
.secondchance_img {
    max-width: 520px;
    margin: 10px auto 24px;
}

.secondchance_img img {
    display: block;
    width: 100%;
    height: auto;
}

.page-vincita .secondchance_note {
    font-size: 13px;
}

@media screen and (max-width: 799px) {
    .page-vincita .title {
        font-size: 30px !important;
    }
}

/* ============================================================
   HEADER — .testata
   ============================================================ */
@media screen and (min-width: 801px) {
    .testata {
        position: fixed;
        width: 100%;
        background: #fff;
        border-bottom: 2px solid #e41f12;
        z-index: 30;
        height: 75px;
    }

    .testata .testata_allineamento {
        position: relative;
        max-width: 80em;
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .testata .testata_allineamento .testata_logo {
        flex: 0 0 10%;
        margin-right: 40px;
    }

    .testata .testata_allineamento .testata_logo img {
        width: 100%;
        height: auto;
        display: block;
    }
}

@media screen and (max-width: 799px) {
    .testata {
        position: fixed;
        width: 100%;
        background: #fff;
        border-bottom: 2px solid #e41f12;
        z-index: 30;
        height: 65px;
        top: 0;
    }

    .testata .testata_allineamento {
        position: relative;
        max-width: 95em;
        width: 95%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .testata .testata_allineamento .testata_logo {
        flex: 1 0 30%;
        margin-right: 10px;
        height: 60px;
    }

    .testata .testata_allineamento .testata_logo img {
        width: auto;
        height: 100%;
    }

    .testata .testata_allineamento .testata_hamburger {
        position: relative;
        padding: 15px 0;
        display: flex;
        justify-content: flex-end;
    }

    .testata
        .testata_allineamento
        .testata_hamburger
        .testata_hamburger_container {
        position: relative;
        flex: 0 0 25px;
        width: 25px;
        height: 25px;
    }

    .testata
        .testata_allineamento
        .testata_hamburger
        .testata_hamburger_container
        .testata_hamburger_container_bar {
        position: absolute;
        width: 100%;
        background: #e41f12;
        height: 0.15em;
        left: 0;
        transform-origin: center;
        transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .testata
        .testata_allineamento
        .testata_hamburger
        .testata_hamburger_container
        .testata_hamburger_container_bar:nth-child(1) {
        top: 15%;
    }

    .testata
        .testata_allineamento
        .testata_hamburger
        .testata_hamburger_container
        .testata_hamburger_container_bar:nth-child(2) {
        top: 50%;
        opacity: 1;
    }

    .testata
        .testata_allineamento
        .testata_hamburger
        .testata_hamburger_container
        .testata_hamburger_container_bar:nth-child(3) {
        top: 85%;
    }

    .testata.open
        .testata_allineamento
        .testata_hamburger
        .testata_hamburger_container
        .testata_hamburger_container_bar:nth-child(1) {
        top: 50%;
        transform: rotate(45deg);
    }

    .testata.open
        .testata_allineamento
        .testata_hamburger
        .testata_hamburger_container
        .testata_hamburger_container_bar:nth-child(2) {
        opacity: 0;
    }

    .testata.open
        .testata_allineamento
        .testata_hamburger
        .testata_hamburger_container
        .testata_hamburger_container_bar:nth-child(3) {
        top: 50%;
        transform: rotate(-45deg);
    }

    .testata.open .testata_allineamento .testata_menulist {
        max-height: 100vh;
        padding: 1em 0;
    }
}

@media screen and (min-width: 801px) {
    .testata .testata_allineamento .testata_menulist {
        font-weight: 400;
        font-style: normal;
        font-family: 'Baloo 2', sans-serif;
        color: #e41f12;
        flex: 1 0 70%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .testata .testata_allineamento .testata_menulist div > ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .testata .testata_allineamento .testata_menulist div > ul > li {
        position: relative;
        display: inline-block;
        font-size: 16px;
        line-height: 2;
        margin: 0 0 0 1em;
        text-transform: uppercase;
    }

    .testata .testata_allineamento .testata_menulist div > ul > li a {
        color: #e41f12;
    }

    .testata .testata_allineamento .testata_menulist div > ul > li a:hover {
        color: #18acc3;
    }

    .testata .testata_allineamento .testata_login {
        font-weight: 400;
        font-style: normal;
        color: #e41f12;
        flex: 1 0 20%;
        white-space: nowrap;
        text-align: right;
    }

    .testata .testata_allineamento .testata_login > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 1.1em;
    }

    .testata .testata_allineamento .testata_login > ul > li {
        position: relative;
        display: inline-block;
        margin-right: 3px;
        font-size: 16px;
        line-height: 2.5em;
    }

    .testata .testata_allineamento .testata_login > ul > li:nth-last-child(1) {
        margin-right: 0;
    }

    .testata .testata_allineamento .testata_login ul li .gigya_userdetails {
        font-style: normal;
        font-family: 'Baloo 2', sans-serif;
        font-weight: 400;
    }

    .testata .testata_allineamento .testata_login.loginbuttons ul {
        display: none;
    }

    .testata .testata_allineamento .testata_login ul > li > ul {
        position: absolute;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 0.25rem;
        margin: 0;
        padding: 0;
        list-style: none;
        left: 0;
        min-width: 130px;
        color: #333;
        text-align: left;
        display: none;
    }

    .testata .testata_allineamento .testata_login ul > li:hover > ul {
        display: block;
    }

    .testata .testata_allineamento .testata_login ul > li > ul > li {
        list-style: none;
        white-space: nowrap;
        padding: 5px 25px;
        font-family: 'Baloo 2', sans-serif;
        font-weight: 400;
    }

    .testata .testata_allineamento .testata_login ul > li > ul > li:hover {
        background-color: #f5f5f5;
    }
}

@media screen and (min-width: 800px) {
    .testata .testata_allineamento .testata_hamburger {
        display: none;
    }

    .testata .testata_allineamento .testata_menulist {
        display: flex;
        justify-content: flex-start;
        padding: 1em 0;
    }

    .testata .testata_allineamento .testata_menulist .loginbuttons {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .testata .testata_allineamento .testata_menulist .loginbuttons ul {
        margin-left: 20px;
    }

    .testata .testata_allineamento .testata_menulist .loginbuttons .socials {
        display: block;
        list-style: none;
        margin: 0 0 0 25px;
        padding: 0;
    }

    .testata .testata_allineamento .testata_menulist .loginbuttons .socials li {
        display: inline-block;
        margin-left: 0.5em;
        vertical-align: middle;
    }

    .testata
        .testata_allineamento
        .testata_menulist
        .loginbuttons
        .socials
        li
        a {
        width: 2em;
        height: 2em;
        display: block;
    }
}

@media screen and (max-width: 799px) {
    .testata .testata_allineamento .testata_menulist {
        font-weight: 400;
        font-style: normal;
        font-family: 'Baloo 2', sans-serif;
        color: #e41f12;
        flex: 1 1 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        position: absolute;
        top: 67px;
        background: #fff;
        width: 100%;
        border-bottom: 2px solid #e41f12;
        border-left: 2px solid #e41f12;
        border-right: 2px solid #e41f12;
        transform: translateY(-200%);
        transition: all 0.2s ease;
    }

    .testata.open .testata_allineamento .testata_menulist {
        transform: translateY(0);
    }

    .testata .testata_allineamento .testata_menulist div > ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .testata .testata_allineamento .testata_menulist div > ul > li {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        line-height: 2em;
        margin: 0;
        text-transform: uppercase;
    }

    .testata .testata_allineamento .testata_menulist div > ul > li > a {
        color: #e41f12;
    }

    .testata .testata_allineamento .testata_menulist > div {
        width: 100%;
    }

    .testata .testata_allineamento .testata_login {
        font-weight: 400;
        font-style: normal;
        color: #e41f12;
        flex: 1 1 100%;
        white-space: nowrap;
        text-align: center;
        justify-content: center;
        align-items: center;
        padding-top: 10px;
        border-top: 1px solid #ccc;
    }

    .testata .testata_allineamento .testata_login > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 1.1em;
        width: 100%;
    }

    .testata .testata_allineamento .testata_login > ul > li {
        position: relative;
        display: inline-flex;
        flex-direction: row;
        margin-right: 0;
        font-size: 16px;
        line-height: 1.5em;
    }

    .testata .testata_allineamento .testata_login ul li .gigya_userdetails {
        font-weight: 400;
        font-style: normal;
        font-family: 'Baloo 2', sans-serif;
    }

    .testata .testata_allineamento .testata_login.loginbuttons > ul {
        display: none;
    }

    .testata .testata_allineamento .testata_login ul > li > ul {
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
        min-width: 130px;
        color: #333;
        text-align: left;
        display: flex;
        flex-direction: column;
    }

    .testata .testata_allineamento .testata_login ul > li > ul > li {
        list-style: none;
        white-space: nowrap;
        padding: 5px 25px;
        font-family: 'Baloo 2', sans-serif;
        font-weight: 400;
    }

    .testata .testata_allineamento .testata_menulist .loginbuttons ul {
        margin-left: 0;
    }

    .testata .testata_allineamento .testata_menulist .loginbuttons .socials {
        display: block;
        list-style: none;
        margin: 25px 0 0;
        padding: 0;
        width: 100%;
    }

    .testata .testata_allineamento .testata_menulist .loginbuttons .socials li {
        display: inline-block;
        margin-left: 0.5em;
        vertical-align: middle;
    }

    .testata
        .testata_allineamento
        .testata_menulist
        .loginbuttons
        .socials
        li
        a {
        width: 2em;
        height: 2em;
        display: block;
    }
}

/* ----------------------------- MINTEC (sub-nav bar) -----------------------------
   In the original this row relied on Bootstrap's grid/utilities; styled here so
   it stands on its own under the fixed header.
   ------------------------------------------------------------------------------ */
.mintec {
    position: fixed;
    top: 85px;
    width: 100%;
    z-index: 29;
    background: #e41f12;
}

.mintec .container {
    max-width: 80em;
    width: 80%;
    margin: 0 auto;
}

.mintec ul {
    list-style: none;
    margin: 0;
    padding: 0.35em 0;
    text-align: center;
}

.mintec ul li {
    display: inline-block;
    margin: 0 1.2em;
}

.mintec ul li a {
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.03em;
}

.mintec ul li a:hover {
    color: #ffe2df;
}

@media screen and (max-width: 799px) {
    .mintec {
        top: 65px;
    }

    .mintec .container {
        width: 95%;
    }

    .mintec ul li {
        margin: 0 0.6em;
    }

    .mintec ul li a {
        font-size: 12px;
    }
}

/* ============================================================
   SUBSTITUTIONS — missing original assets mapped to existing ones
   (ringo_icons font glyphs, cta_login/register PNGs, social PNGs)
   ============================================================ */

/* user glyph (logged-in menu) — original ringo_icons not bundled */
.testata .icon-user-o:before {
    content: '';
    width: 1em;
    height: 1em;
    margin: 0 0.3em 0 0;
    vertical-align: -0.15em;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23e41f12'><path d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/></svg>")
        center/contain no-repeat;
}

/* dropdown caret — CSS triangle instead of the icon font */
.testata .icon-down-dir:before {
    content: '';
    width: 0;
    height: 0;
    margin: 0 0.2em;
    vertical-align: middle;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.35em solid currentColor;
}

/* LOGIN / REGISTRATI buttons — cta_login.png / cta_register.png backgrounds */
.testata .testata_allineamento .testata_login > ul > li .btn--login {
    color: #e41f12;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    font-family: 'Baloo 2', sans-serif;
    text-transform: uppercase;
    background: url(../assets/home/cta_login.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 16px 40px 10px;
}

.testata .testata_allineamento .testata_login ul li .btn--register {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    font-family: 'Baloo 2', sans-serif;
    text-transform: uppercase;
    background: url(../assets/home/cta_register.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 16px 40px 10px;
}

/* socials — insta.png / tiktok.png / youtube.png */
.testata
    .testata_allineamento
    .testata_menulist
    .loginbuttons
    .socials
    li
    .social_instagram {
    background: transparent url(../assets/home/insta.png) no-repeat 50%;
    background-size: contain;
}

.testata
    .testata_allineamento
    .testata_menulist
    .loginbuttons
    .socials
    li
    .social_tiktok {
    background: transparent url(../assets/home/tiktok.png) no-repeat 50%;
    background-size: contain;
}

.testata
    .testata_allineamento
    .testata_menulist
    .loginbuttons
    .socials
    li
    .social_youtube {
    background: transparent url(../assets/home/youtube.png) no-repeat 50%;
    background-size: contain;
}