/* ===============================
   FORM STYLE WRAPPER
================================= */

.hb-form-style-default .hb-form-wrapper .hb-step{
    width: 100%;
    display: flex;
}

.hb-form-style-boxed .hb-form-wrapper .hb-step {
    width: 100%;
    padding: 30px;
    border-radius: 16px;
    background: #f9fafc;
    box-shadow: 0 6px 22px rgba(0,0,0,0.06);
    display: flex;
}

.hb-form-style-flat .hb-form-wrapper .hb-step{
    width: 100%;
    padding: 10px;
    display: flex;
}

.hb-form-style-modern .hb-form-wrapper .hb-step{
    width: 100%;
    padding: 10px;
    border-radius: 50px 0px 50px 0px;
    background: #f3f5fa;
    box-shadow: 0 6px 22px rgba(0,0,0,0.02);
    display: flex;
}

/* ===============================
   STEP WRAPPER
================================= */
/* Il contenitore degli step */
.hb-steps-container {
    position: relative;
    transition: height 0.4s ease;
}

.hb-step {
    position: relative;
    width: 100%;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.hb-step.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.hb-step.hidden {
    opacity: 0;
    transform: translateX(-30px);
    pointer-events: none;
}


.hb-step-content{
    padding: 20px;
}

@keyframes hbFade {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===============================
   BLANK TEMPLATE
================================= */

.hb-template-blank .hb-step-layout.blank {
    display: block;
}

/* ===============================
   IMAGE LEFT / RIGHT
================================= */

.hb-step-layout.image-left,
.hb-step-layout.image-right {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}

/* IMMAGINE */
.hb-step-image {
    width: 40%;
    height: -webkit-fill-available;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.hb-form-style-modern .hb-step-image {
    width: 40%;
    height: -webkit-fill-available;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50px 0px 50px 0px;
}


.hb-form-style-boxed .hb-step-image{
    border-radius: 12px 0px 0px 12px;
}

.image-left {
    float: left; 
    margin-right: 10px; 
    margin-bottom: 0px; 
}


/* CONTENUTI */
.hb-step-content {
    flex: 1;
}

/* IMAGE RIGHT inversione */
.hb-step-layout.image-right .hb-step-image {
    order: 2;
}

.hb-step-layout.image-right .hb-step-content {
    order: 1;
}



/* ===============================
   BACKGROUND IMAGE TEMPLATE
================================= */

.hb-template-bg_image .hb-step {
    position: relative;
    color: #fff;
}

.hb-template-bg_image .hb-step::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    border-radius: 12px;
    z-index: 1;
}

.hb-template-bg_image .hb-step-layout.bg-image {
    position: relative;
    z-index: 2;
}

/* ===============================
   COLOR BACKGROUND TEMPLATE
================================= */

.hb-template-color_bg .hb-step {
    border-radius: 12px;
    color: #fff;
}

/* ===============================
   STEP HEADER
================================= */

.hb-step-header h3 {
    margin-bottom: 25px;
}

.hb-step-header p {
    margin-bottom: 25px;
}

/* ===============================
   GRID DEI CAMPI
================================= */

.hb-step-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom:20px;
    margin-top:40px;
}

.hb-col-12 { width: 100%; }
.hb-col-6  { width: calc(50% - 10px); }
.hb-col-4  { width: calc(33.33% - 10px); }
.hb-col-3  { width: calc(25% - 10px); }
.hb-col-2  { width: calc(16.66% - 10px); }
.hb-col-1  { width: calc(8.33% - 10px); }

/* ===============================
   NAVIGATION BUTTONS
================================= */

.hb-nav {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.hb-nav:has(> button:nth-child(1)):not(:has(> button:nth-child(2))) {
    justify-content: flex-end;
}

.hb-nav button {
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.hb-prev { background: #e0e0e0; }
.hb-prev:hover { background:#cccaca; }
.hb-next { background: #007bff; color: #fff; }


.hb-nav button:hover { opacity: 0.9; }
.hb-nav button:active { transform: scale(0.97); }

.hb-form-style-modern .hb-nav button{
    border-radius: 25px 0px;
}

/* ===============================
   RESPONSIVE
================================= */

@media (max-width: 480px) {

    .hb-step-layout.image-left,
    .hb-step-layout.image-right {
        flex-direction: column;
    }

    .hb-step-image {
        width: 100%;
        min-height: 200px;
    }

    .hb-nav {
        flex-direction: column;
        gap: 10px;
    }

    .hb-nav button {
        width: 100%;
    }

    .hb-col-12,.hb-col-6,.hb-col-4,.hb-col-3,.hb-col-2,.hb-col-1 { width: 100%!important; }
    .hb-step-fields {
        gap: 5px;
    }

    .hb-step-image {
        width: 100%;
        height: -webkit-fill-available;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .hb-form-style-modern .hb-step-image {
        width: 100%;
        height: -webkit-fill-available;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50px 0px 50px 0px;
    }
    .image-left {
        margin-right: 0px;
        margin-bottom: 0px;
    }

}

/* ===============================
   FIELDS
================================= */


/* Rimuove il blu/celestino */
.hb-field input:-webkit-autofill,
.hb-field input:-webkit-autofill:hover,
.hb-field input:-webkit-autofill:focus,
.hb-field textarea:-webkit-autofill,
.hb-field textarea:-webkit-autofill:hover,
.hb-field textarea:-webkit-autofill:focus,
.hb-field select:-webkit-autofill,
.hb-field select:-webkit-autofill:hover,
.hb-field select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent !important;
    color: inherit !important;
}


.hb-field {
    margin-bottom: 12px;
}

.hb-field label {
    color: #333;
    font-size: 14px;
}

.hb-field input,
.hb-field textarea,
.hb-field select {
    width: 100%;
    font-size: 14px;
}


/* Checkbox and radios */
input.check + label span.checked{opacity:0; visibility: hidden;}
input.check:checked + label span.checked{opacity:1; visibility: visible;}
/* Switcher options */
input.switcher+ label span.uncheck{ position: relative; width: 70px; height: 30px; }
input.switcher+ label span.checked{ position: absolute; width:100%; height: 100%; border-radius: inherit; }
input.switcher+ label span.switcher{ position: absolute; width: 20px; height: 20px; z-index: 5; -webkit-transform:translateX(-100%);transform:translateX(-100%); }
input.switcher:checked+ label span.switcher{ -webkit-transform:translateX(100%);transform:translateX(100%); }
/* Quantities */
.quantity input.numbers::-webkit-inner-spin-button, .quantity input.numbers::-webkit-outer-spin-button{-webkit-appearance:none;}

select{-webkit-appearance: none;-moz-appearance: none;appearance: none; background-position: right 22px center !important; background-repeat: no-repeat !important; background-image: url(images/down-arrow-black.svg); background-size: auto !important;}


.hb-required {
    color: red;
    margin-left: 3px;
}

.hb-error input ,
.hb-error select,
.hb-error textarea{
    border-color: red;
}

.hb-radio, .hb-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.hb-rating {
    display: flex;
    gap: 5px;
}

.hb-star {
    font-size: 24px;
    cursor: pointer;
    color: #ccc;
}

.hb-star.active {
    color: gold;
}

.hb-nps {
    display: flex;
    gap: 5px;
}

.hb-nps-btn {
    padding: 6px 10px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}

.hb-form-message {
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 15px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Stato visibile */
.hb-form-message.show {
    opacity: 1;
    transform: translateY(0);
}

/* Successo */
.hb-form-message.hb-success {
    background: #e6f9ec;
    color: #1a7f37;
    border: 1px solid #1a7f37;
}

/* Errore */
.hb-form-message.hb-error {
    background: #fdecea;
    color: #b71c1c;
    border: 1px solid #b71c1c;
}