/* =========================================================
   COLORI
========================================================= */

:root {
    --blue-dark: #0f4c81;
    --blue: #2f80ed;
    --blue-button: #0969c3;
    --blue-button-hover: #07569f;
    --orange: #f5a623;
    --text-dark: #243b53;
    --text-medium: #4a4a4a;
    --page-bg: #edf5fb;
    --card-bg: rgba(255, 255, 255, .94);
    --shadow-card: 0 12px 30px rgba(15, 54, 92, .14);
}


/* =========================================================
   PAGINA
========================================================= */

.assistenza-section {
    padding: 24px;
}

.assistenza-hero {
    position: relative;
    width: 100%;
    min-height: 1180px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 30px;
    background: var(--page-bg);
    box-shadow: 0 18px 45px rgba(15, 54, 92, .14);
}


    /* =========================================================
   IMMAGINE DI SFONDO
   Contain evita qualsiasi taglio sopra e sotto
========================================================= */

    .assistenza-hero .hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: right center;
        background: var(--page-bg);
        opacity: 1;
        transform: none;
        -webkit-mask-image: none;
        mask-image: none;
    }


    /* =========================================================
   OVERLAY
========================================================= */

    .assistenza-hero .hero-overlay {
        position: relative;
        z-index: 1;
        width: 100%;
        min-height: 1180px;
        padding: 55px;
        background: rgba(244, 249, 255, .08);
    }

        .assistenza-hero .hero-overlay > .row {
            min-height: 1070px;
            align-items: flex-start;
            padding-top: 30px;
        }


    /* =========================================================
   BLOCCO TESTO
========================================================= */

    .assistenza-hero .hero-left-clean {
        width: 100%;
        max-width: 800px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none;

    }

    .assistenza-hero .hero-badge {
        display: inline-flex;
        align-items: center;
        margin-bottom: 22px;
        padding: 9px 18px;
        border: 1px solid rgba(15, 76, 129, .18);
        border-radius: 999px;
        background: rgba(255, 255, 255, .85);
        color: var(--blue-dark);
        font-size: .86rem;
        font-weight: 700;
        letter-spacing: .75px;
        text-transform: uppercase;
    }

    .assistenza-hero .hero-title {
        margin: 0 0 20px;
        color: var(--blue-dark);
        font-size: clamp(2.8rem, 4vw, 4.3rem);
        font-weight: 800;
        line-height: 1.06;
    }

    .assistenza-hero .hero-description {
        max-width: 700px;
        margin: 0;
        color: #334e68;
        font-size: 1.18rem;
        line-height: 1.75;
    }

        .assistenza-hero .hero-description strong {
            color: var(--blue-dark);
        }


    /* =========================================================
   INFO BOX BLU
========================================================= */

    .assistenza-hero .hero-left-clean .hero-info-box {
        display: flex !important;
        align-items: center !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 700px !important;
        margin-top: 32px !important;
        padding: 28px 34px !important;
        border: 0 !important;
        border-left: 5px solid var(--blue) !important;
        border-radius: 22px !important;
        background: var(--card-bg) !important;
        box-shadow: var(--shadow-card) !important;
        box-sizing: border-box;
    }

    .assistenza-hero .hero-left-clean .hero-info-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: var(--blue) !important;
        color: #fff !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        box-shadow: 0 8px 18px rgba(47, 128, 237, .35) !important;
    }



    .assistenza-hero .hero-left-clean .hero-info-text {
        flex: 1;
        color: var(--text-medium) !important;
        font-size: 1.15rem !important;
        line-height: 1.8 !important;
    }


    /* =========================================================
   WARNING BOX ARANCIONE
========================================================= */

    .assistenza-hero
    .hero-left-clean
    .hero-message-box.hero-warning-box {
        display: flex !important;
        align-items: center !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 700px !important;
        margin-top: 22px !important;
        padding: 28px 34px !important;
        border: 0 !important;
        border-left: 5px solid var(--orange) !important;
        border-radius: 22px !important;
        background: var(--card-bg) !important;
        box-shadow: var(--shadow-card) !important;
        box-sizing: border-box;
        transition: transform .2s ease, box-shadow .2s ease;
    }

        .assistenza-hero
        .hero-left-clean
        .hero-message-box.hero-warning-box:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 36px rgba(15, 54, 92, .18) !important;
        }

    .assistenza-hero
    .hero-left-clean
    .hero-message-icon.hero-warning-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: var(--orange) !important;
        color: #fff !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        box-shadow: 0 8px 18px rgba(245, 166, 35, .35) !important;
    }

    .assistenza-hero
    .hero-left-clean
    .hero-message-text {
        flex: 1;
        color: var(--text-medium) !important;
        font-size: 1.10rem !important;
        line-height: 1.8 !important;
    }

        .assistenza-hero
        .hero-left-clean
        .hero-message-text a {
            display: inline-block;
            margin-top: 5px;
            color: var(--blue-button) !important;
            font-weight: 700;
            text-decoration: none;
        }

            .assistenza-hero
            .hero-left-clean
            .hero-message-text a:hover {
                text-decoration: underline;
            }


    /* =========================================================
   COLONNA INTERNA DEL RESET
========================================================= */

    .assistenza-hero .hero-left-clean > .col-lg-9 {
        width: 100%;
        max-width: 760px;
        flex: 0 0 100%;
        padding-right: 0;
        padding-left: 0;
    }


    /* =========================================================
   BOX RESET
========================================================= */

    .assistenza-hero .reset-box {
        width: 100%;
        max-width: 760px;
        margin: 0;
        padding: 50px;
        border: 1px solid rgba(255, 255, 255, .68);
        border-radius: 28px;
        background: rgba(255, 255, 255, .78);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 22px 55px rgba(15, 54, 92, .16);
    }

        .assistenza-hero .reset-box label {
            display: block;
            margin-bottom: 12px;
            color: #294c68;
            font-size: 1.08rem;
            font-weight: 700;
        }

        .assistenza-hero .reset-box .form-control {
            width: 100%;
            height: 68px;
            padding: 12px 22px;
            border: 1px solid #cfdae6;
            border-radius: 16px;
            background: rgba(255, 255, 255, .96);
            color: var(--text-dark);
            font-size: 1.12rem;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, .03);
            transition: border-color .2s ease, box-shadow .2s ease;
        }

            .assistenza-hero .reset-box .form-control:focus {
                border-color: var(--blue);
                outline: none;
                box-shadow: 0 0 0 4px rgba(47, 128, 237, .13);
            }

            .assistenza-hero .reset-box .form-control::placeholder {
                color: #8292a3;
            }


        /* =========================================================
   PULSANTE RESET
========================================================= */

        .assistenza-hero .reset-box .mt-4 {
            margin-top: 27px !important;
        }

    .assistenza-hero .btn-reset-custom {
        width: 100%;
        min-height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 22px;
        border: 0;
        border-radius: 16px;
        background: var(--blue-button);
        color: #fff;
        font-size: 1.12rem;
        font-weight: 700;
        box-shadow: 0 10px 25px rgba(9, 105, 195, .27);
        transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
    }

        .assistenza-hero .btn-reset-custom:hover,
        .assistenza-hero .btn-reset-custom:focus {
            background: var(--blue-button-hover);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 14px 30px rgba(9, 105, 195, .34);
        }

        .assistenza-hero .btn-reset-custom:active {
            transform: translateY(0);
        }


    /* =========================================================
   ALERT E VALIDATORI
========================================================= */

    .assistenza-hero .reset-box .alert {
        margin-bottom: 28px;
        border: 0;
        border-radius: 16px;
    }

    .assistenza-hero .invalid-feedback {
        display: block;
        margin-top: 7px;
        color: #b42318;
        font-size: .9rem;
    }


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .assistenza-section {
        padding: 16px;
    }

    .assistenza-hero,
    .assistenza-hero .hero-overlay {
        min-height: auto;
    }

        .assistenza-hero .hero-overlay {
            padding: 36px 24px;
        }

            .assistenza-hero .hero-overlay > .row {
                min-height: auto;
            }

        .assistenza-hero .hero-left-clean {
            max-width: none;
        }

        .assistenza-hero .hero-bg {
            object-fit: contain;
            object-position: center top;
            opacity: .32;
        }

        .assistenza-hero .reset-box {
            max-width: 700px;
        }
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 575px) {

    .assistenza-section {
        padding: 10px;
    }

    .assistenza-hero {
        border-radius: 22px;
    }

        .assistenza-hero .hero-overlay {
            padding: 28px 18px;
        }

        .assistenza-hero .hero-title {
            font-size: 2.5rem;
        }

        .assistenza-hero .hero-description {
            font-size: 1.03rem;
        }

        .assistenza-hero .hero-left-clean .hero-info-box,
        .assistenza-hero
        .hero-left-clean
        .hero-message-box.hero-warning-box {
            align-items: flex-start !important;
            gap: 16px !important;
            padding: 20px !important;
        }

        .assistenza-hero .hero-left-clean .hero-info-icon,
        .assistenza-hero
        .hero-left-clean
        .hero-message-icon.hero-warning-icon {
            width: 46px !important;
            height: 46px !important;
            min-width: 46px !important;
            font-size: 21px !important;
        }

        .assistenza-hero .hero-left-clean .hero-info-text,
        .assistenza-hero .hero-left-clean .hero-message-text {
            font-size: .98rem !important;
        }

        .assistenza-hero .reset-box {
            padding: 28px 22px;
            border-radius: 22px;
        }

            .assistenza-hero .reset-box .form-control {
                height: 60px;
                font-size: 1rem;
            }

        .assistenza-hero .btn-reset-custom {
            min-height: 58px;
            font-size: 1rem;
        }
}


/* =========================================================
   OVERRIDE DEFINITIVO INFOBOX E WARNINGBOX
========================================================= */

div.hero-info-box {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 700px !important;
    margin-top: 32px !important;
    padding: 28px 34px !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, .94) !important;
    border: 0 !important;
    border-left: 5px solid #2f80ed !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 30px rgba(15, 54, 92, .14) !important;
}

    div.hero-info-box > div.hero-info-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #2f80ed !important;
        color: #ffffff !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        box-shadow: 0 8px 18px rgba(47, 128, 237, .35) !important;
    }

    div.hero-info-box > div.hero-info-text {
        display: block !important;
        flex: 1 1 auto !important;
        color: #4a4a4a !important;
        font-size: 1.15rem !important;
        line-height: 1.8 !important;
    }


/* WARNING ARANCIONE */

div.hero-message-box.hero-warning-box {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 700px !important;
    margin-top: 22px !important;
    padding: 28px 34px !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, .94) !important;
    border: 0 !important;
    border-left: 5px solid #f5a623 !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 30px rgba(15, 54, 92, .14) !important;
}

    div.hero-message-box.hero-warning-box >
    div.hero-message-icon.hero-warning-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #f5a623 !important;
        color: #ffffff !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        box-shadow: 0 8px 18px rgba(245, 166, 35, .35) !important;
    }

    div.hero-message-box.hero-warning-box >
    div.hero-message-text {
        display: block !important;
        flex: 1 1 auto !important;
        color: #4a4a4a !important;
        font-size: 1.10rem !important;
        line-height: 1.8 !important;
    }

    div.hero-message-box.hero-warning-box
    div.hero-message-text a {
        display: inline-block !important;
        margin-top: 5px !important;
        color: #0969c3 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

        div.hero-message-box.hero-warning-box
        div.hero-message-text a:hover {
            text-decoration: underline !important;
        }


.assistenza-hero {
    position: relative;
    width: 100%;
    min-height: 1180px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 30px;
    background: #edf5fb;
    box-shadow: 0 18px 45px rgba(15, 54, 92, .14);
}

    /* Riempitivo sfocato che copre tutto il contenitore */
    .assistenza-hero::before {
        content: "";
        position: absolute;
        inset: -30px;
        z-index: 0;
        background-image: url("../Img/assistenza-servizi-online.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(24px);
        opacity: .38;
        transform: scale(1.08);
    }

    /* Immagine originale, completa e non deformata */
    .assistenza-hero .hero-bg {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: right center;
        background: transparent;
        opacity: 1;
        transform: none;
    }

    /* Contenuto della pagina */
    .assistenza-hero .hero-overlay {
        position: relative;
        z-index: 2;
        width: 100%;
        min-height: 1180px;
        padding: 55px;
        background: linear-gradient( to right, rgba(237, 245, 251, .44) 0%, rgba(237, 245, 251, .18) 24%, rgba(237, 245, 251, .04) 65%, transparent 100% );
    }

    /* Allineamento verticale delle due colonne */
    .assistenza-hero .hero-row {
        align-items: flex-start;
    }

    /* Spostamento verso l'alto della parte sinistra */
    .assistenza-hero .hero-content {
        transform: translateY(-70px);
    }

    /* Spostamento verso l'alto della parte destra */
    .assistenza-hero .reset-box {
        transform: translateY(-70px);
    }

.grecaptcha-badge {
    display: none !important;
}



/* Etichetta sopra il campo */
.reset-form-group .reset-label {
    position: static !important;
    display: block !important;
    transform: none !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    color: #294c68;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Contenitore input */
.reset-input-wrapper {
    position: relative;
    width: 100%;
}

/* Nessuno spazio riservato all’icona */
.reset-input {
    padding-left: 18px !important;
}

/* Nasconde definitivamente l’eventuale icona */
.reset-input-icon {
    display: none !important;
}