/*MOBILE AND TABLET*/
@media (max-width: 921px) {
    .step-buttons-container-single{
        max-width: none !important;
    }

    .step2-functionalities-container{
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .step-buttons-container{
        flex-direction: column !important;
    }

    .next-button{
        width: 100% !important;
    }

    .prev-button{
        width: 100% !important;
    }

    .title-genre-container{
        flex-direction: column;
        gap:0 !important;
    }

    .btn-crop-control-container{
        width: 100%;
    }

    .icon-crop-control-container{
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .crop-image-btn{
        margin-top: 20px !important;
    }

    #image-controls{
        flex-direction: column;
    }


}

.progress-bar-container{
    width: 100%;
    display: flex;
    gap: 8px;
    max-height: 30px;
    margin-top: 30px; 
    column-gap: 24px;
}

.progress-step-container{
    flex:1;
    display: flex;
    flex-direction: column;
}

.progress-step-title{
height: 90%;
}

.step-not-seleted h4 {
    font-weight: 500 !important;
}

.progress-step-title h4 {
    font-size: 20px;
    font-weight: 700;
}

.progress-step-bar{
    min-height: 5px;
    background-color: var(--ast-global-color-6);
    margin-top: 8px;
    border-radius: 22px;
}

.progress-completed{
    background-color: var(--diocesi-global-color-primary-light);
}

.delete-poi{
    all:unset;
    cursor: pointer;
}

.delete-poi:hover{
    color: var(--ast-global-color-8);
    background-color: transparent;
}

.delete-poi:focus{
    color: var(--ast-global-color-8);
    background-color: transparent;
}

/* Stile del form del wizard */
#itinerario-step1-form {
    width: 100%;
    margin-top: 8px;
}

.title-genre-container{
    display: flex;
    gap: 20px;
}

.input-group, .form-group {
    display: flex;
    flex-direction: column;
    flex: 1;  
    margin-top: 24px; 
}

.sidebar-br-waypoint{
    background-color: #E4DFDF;
    height: 1px;
    margin: 5px 0;
}

#custom-poi-list-container{
    width: 100%;
    margin-top: 20px;
}

#custom-poi-list-summary-container{
    width: 100%;
    margin-top: 20px;
}

.step3-create-route-summary-title{
    margin-top: 20px;
}

.step3-create-route-summary-waypoint-list-title{
    margin-top: 20px;
}

#itinerario-step1-form label {
    font-weight: 500;
    font-size: 20px; 
    line-height: 100%;
}

#itinerario-step1-form textarea {
    width: 100%;
    padding: .5em .8em;
    margin: 10px 0;
    border: 1px solid #ddd;
    font-size: 16px;
    resize: none; 
    min-height: 181px;

}

.upload-image-label{
    margin: 10px 0;
}

.filepond--root{
    margin-top: 10px;
}

.filepond--browser.filepond--browser {
    left: 0;
    border: none !important;
}

.filepond--list{
    left: 0;
    right: 0;
}

.filepond--panel-root{
    background-color: transparent;
}

.filepond--drop-label{
    background-color: var(--ast-global-color-4);
    border: 2px dashed var(--ast-global-color-6);
    border-radius: 24px;
}

#itinerario-step1-form input, #itinerario-step1-form textarea{
    width: 100%;
    padding: 0 .8em;
    margin: 10px 0;
    border: 1px solid #333;
    font-size: 16px;
    color: #333;
    font-weight: 325;
    line-height: 24px;
    /* Aumenta l'altezza della linea per evitare che il testo venga tagliato */
    border-radius: 24px;
}

#itinerario-step1-form select {
    width: 100%;
    padding: 0 .8em;
    margin: 10px 0;
    border: 1px solid #333;
    font-size: 16px;
    color: #333;
    line-height: 24px;
    font-weight: 325;
    /* Aumenta l'altezza della linea per evitare che il testo venga tagliato */
    border-radius: 24px;
}

/* Stile specifico per la select */
#itinerario-step1-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    cursor: pointer;
    padding: 0 .8em;
    border-radius: 24px;
    /* Imposta un'altezza minima per evitare che il testo venga tagliato */
}

/* Select wrapper for icon positioning */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper .select-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #333;
    font-size: 16px;
}

/* Ensure select has enough padding on the right to not overlap with the icon */
.select-wrapper select {
    padding-right: 30px !important;
}

#itinerario-step1-form input[type="submit"] {
    margin-top: 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    padding: 12px 20px;
    font-size: 16px;
}

#itinerario-step1-form input[type="submit"]:hover {
    background-color: #45a049;
}

#response-message {
    margin-top: 15px;
    font-size: 14px;
    color: #333;
}

.icon-button {
    background-color: #333;
    /* Sfondo scuro per visibilità su sfondo bianco */
    color: #fff;
    /* Colore del testo e icone bianco */
    border: none;
    border-radius: 50%;
    /* Pulsanti circolari per zoom e rotazione */
    padding: 10px;
    font-size: 18px;
    margin: 5px;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    /* Leggera ombra */
    transition: background-color 0.3s ease;
    /* Effetto hover morbido */
}

.icon-button:hover {
    background-color: #555;
    /* Cambia colore quando si passa sopra col mouse */
}

.rect-button {
    background-color: #333;
    /* Sfondo scuro per visibilità */
    color: #fff;
    /* Colore del testo e icone bianco */
    border: none;
    border-radius: 10px;
    /* Angoli smussati */
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    /* Leggera ombra */
    transition: background-color 0.3s ease;
    /* Effetto hover morbido */
}

.rect-button:hover {
    background-color: #555;
    /* Cambia colore quando si passa sopra col mouse */
}

#image-controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.crop-image-btn{
    margin:0;
}

#crop-controls {
    display: flex;
    justify-content: center;
}

/* Immagine Itinerario */
#image-preview-container img {
    display: inline-block;
    /* Cambia da block a inline-block */
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    /* Centra l'immagine orizzontalmente */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


.step-buttons-container {
    display: flex;
    width: 100%;
    margin: 20px 0 30px 0;
    justify-content: flex-end;
    column-gap: 10px;
    columns: 2;
}

.step-buttons-container-publish {
    display: flex;
    width: 100%;
    margin: 64px 0 24px 0;
    justify-content: flex-end;
    column-gap: 10px;
    columns: 2;
}

.step-buttons-container-single {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin: 20px 0;
}



#next-step, #prev-step2, #next-step2, #prev-step3, #submit-form {
    max-width: 175px;
}

#prev-step2, #prev-step3 {
    color: #333333;
    border: 1px solid #6A6A6A;
    background-color: #fff;
}



/* Full screen buttons - Mobile And Tablet */
@media (max-width: 921px) {
    #next-step, #prev-step2, #next-step2, #prev-step3, #submit-form {
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 8px !important; 
    }
}

.progress-container {
    width: 100%;
    /* Occupa l'intera larghezza del contenitore */
    background-color: #e0e0e0;
    /* Colore di sfondo della barra */
    height: 10px;
    /* Altezza della barra */
    margin-top: 10px;
    /* Spazio dal titolo verso l'alto */
    margin-bottom: 10px;
    /* Spazio verso il basso */
    border-radius: 5px;
    /* Angoli arrotondati */
}


.progress-bar {
    width: 0%;
    /* Larghezza iniziale della barra riempita */
    height: 100%;
    /* Altezza completa rispetto al contenitore */
    background-color: #4caf50;
    /* Colore della barra riempita (verde) */
    border-radius: 5px;
    /* Angoli arrotondati */
    transition: width 0.5s ease;
    /* Transizione morbida per l'animazione */
}



/* STEP 3 */


/* Titoli principali */
#step3-container h2,
#step3-container h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: #333;
}

/* Layout per le due colonne: Dettagli e Immagine Itinerario */
#step3-summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

/* Colonna Dettagli */
#step3-summary .details-column {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Colonna Immagine */
#step3-summary .image-column {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    /* Questo centra il contenuto inline all'interno del div */
}

/* Immagine Itinerario */
#image-preview-container {
    display: flex;
    justify-content: center;
    /* Centra orizzontalmente */
    align-items: center;
    /* Centra verticalmente se il contenitore ha un'altezza definita */
}


/* Layout per le due colonne: Metrica e Grafici */
#elevation-summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

/* Colonna Metrica */
#elevation-summary .metrics-column {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Lista delle metriche */
#elevation-summary .metrics-column ul {
    list-style: none;
    padding: 0;
}

#elevation-summary .metrics-column ul li {
    font-family: 'Roboto', sans-serif;
    color: #333;
    margin-bottom: 10px;
}

#elevation-summary .metrics-column ul li span {
    font-weight: bold;
}

/* Colonna Grafici */
#elevation-summary .charts-column {
    flex: 2;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Stile per i grafici */
#elevation-chart,
#slope-chart {
    max-width: 100%;
    height: 250px;
    margin-bottom: 20px;
}

/* Mappa */
#map {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Tabella POI */
#poi-summary-table-body {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#poi-summary-table-body tr {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

#poi-summary-table-body tr:hover {
    background-color: #f1f1f1;
}

#poi-summary-table-body td {
    padding: 10px;
    text-align: left;
}

/* Pulsanti mantenendo lo stile attuale */
.prev-button,
.next-button {
    width: 10%;
}

#map {
    height: 400px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}


/* Stile per lo switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-right: 10px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #4CAF50;
    /* Colore dello switch attivato */
}

input:checked+.slider:before {
    transform: translateX(26px);
}

/* Slider tondo */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Stile per il contenitore dello switch */
.switch-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.switch-container label {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #333;
}

/* Stile per entrambi i contenitori di anteprima immagine */
#image-preview-container,
#image-thumbnail-url {
    display: flex;
    justify-content: center;
    /* Centra orizzontalmente */
    align-items: center;
    /* Centra verticalmente se il contenitore ha un'altezza definita */
}

#uploaded-image-preview,
#uploaded-thumbnail-url {
    display: inline-block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#step1-container {
    align-items: center;
    flex-direction: column;
}

#step2-container {
    justify-content: center;
    flex-direction: column;
}

.step2-functionalities-container{
    display: flex;
    width: 100%;
    gap: 20px;
    margin-top: 24px;
    flex-direction: row;
}

.step2-title-search-container{
/*     display: flex; */
    flex-grow: 3;
    width: 100%;
    flex-basis: content;
}

/* .step2-title-select-container{
} */

.step2-select{
    padding: 0 .8em !important;
}

#step3-container{
    flex-direction: column;
}

.wizard-step3-container{
    width: 100%;
}

.wizard-step3-boxed-img{
    /*max-height: 400px;*/
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wizard-step3-boxed-img img{
    height: auto;
    max-width: 100%;
    width: 100%;
    border-radius: 40px;
}


.active-poi{
    background-color: black !important;
}

.primary-cta {
    width: 100%;
}


/* Styles for wizard */

.step3-icon-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-right: 35px;
}

.step3-sidebar-br-waypoint{
    background-color: #eaeaea !important;
}

.circle-waypoint-active {
    background-color: var(--diocesi-global-color-primary) !important;
    border: 0 !important; 
}

.step3-dragging-active {
    background-color: #eaeaea;
}

.step3-chevrons {
    color: #c0c0c0;
}

.form-step1-main-title {
    font-size: 39.06px !important;
    line-height: 100% !important;
    color: #333 !important;
    margin-top: 24px; 
}

.title-ins-desc-container {
    display: block;
    width: 100%;
    margin: 64px auto auto 0;
}

.title-ins-desc-container h4 {
    font-size: 31.25px;
    line-height: 100%;
    color: #333;
}


.step2-search-input {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 40px !important;
    background: #FFFFFF !important;
    border: 2px solid rgba(221, 221, 221, 0.5) !important;
    box-shadow: 0px 1px 20px 10px rgba(0, 0, 0, 0.04) !important;
    border-radius: 200px !important;
    font-family: 'Gotham' !important;
    font-style: normal !important;
    font-weight: 325 !important;
    font-size: 16px !important;
    line-height: 19px !important;
    color: #333333 !important;
    padding-left: 45px !important;
}

.step2-search-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.search-icon-step2 {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
    font-size: 24px;
}

.step2-select {
    margin-top: 44px; 
}

.waypoint-title-step2 {
    font-size: 25px !important;
    margin-bottom: 4px !important;
}


.tertiary-cta:hover {
    background: #fff !important;
}

.no-underline {
    text-decoration: none !important;
}

/* .circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500 !important;
    font-size: 25px !important;
    background-color: var(--diocesi-global-color-primary) !important;
    color: var(--diocesi-global-color-white) !important;
    border: 0 !important;
}
 */
.white-text-wizard-step3 {
    color: var(--diocesi-global-color-white) !important;
    font-weight: 500 !important;
    font-size: 25px !important;
    line-height: 30px !important;
    text-align: center !important;
    padding-top: 16px !important;
}


.waypoint-buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    height: 100%;
}


.waypoint-drag-poi-container i {
    font-size: 21.67px !important;
}


.waypoint-delete-poi-container i {
    font-size: 21.67px !important;
}


.step3-title {
    font-size: 25px !important;
    line-height: 1em !important;
    font-weight: 700 !important;
    color: var(--diocesi-global-color-gray) !important;
}    

.step3-subtitle {
    font-size: 20px !important;
    line-height: 1em;
    font-weight: 400;
    color: var(--diocesi-global-color-gray);
}


.waypoint-info-container  {
    gap: 16px !important;
}

.wizard-container h3 {
    font-size: 38.06px;
    font-weight: 700;
}


.step3-readmore-container button{
    text-align: left !important;
}

.step-accessibility{
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-page-variant-list-entry-title-step3{
    font-size: 25px !important;
}


.step3-map-title{
    background-color: var(--diocesi-global-color-primary) !important;
}

.required,
.required-asterisk{
    color: var(--diocesi-global-color-primary) !important;
}

/* MOBILE */
@media (max-width: 544px) {
    .waypoint-thumbnail {
        width: 138px !important;
        height: 138px !important;
    }

    .waypoints-container {
        justify-content: space-between !important;
        margin-left: 0px !important; 
    }

    .waypoint-info-container {
        width: 40% !important;
    }

    .waypoint-thumbnail-container {
        flex: initial !important;
    }


    .wizard-waypoint-variant-container {
        gap: 0px !important;
        justify-content: space-between !important; 
    }

    .white-text-wizard-step3 {
        font-size: 20px !important;
        color: #333333 !important;
        font-weight: 500 !important;
        margin-bottom: 0 !important; 
    }

    .waypoint-title-step2, .detail-page-variant-list-entry-title-step3 {
        font-size: 20px !important;
    }

    .single-poi-map-title {
        justify-content: flex-start !important;
    }

    .wizard-container h3 {
        margin-top: 24px;
        font-size: 31.25px;
    }

    .title-ins-desc-container h4 {
        font-size: 25px;
    }

}


.diocesi-home-routes-list-entry-step3 {
    position: relative;
    background-color: var(--global-color-white);
    width: 100%;
    height: 100% !important;
    border-radius: var(--global-border-radius);
    border: 1px solid rgba(221, 221, 221, 0.5);
    box-shadow: 0px 1px 10px 5px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: 23px !important;
    margin-bottom: 22px;
    flex-direction: row;
    align-content: flex-end;
    justify-content: space-between;
}


.waypoint-buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.waypoint-buttons-container-step3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    height: 100%;
    margin-right: 8px;
}

.waypoint-drag-poi-container {
    min-height: 190px !important;
    margin-top:8px; 
}


/* MOBILE */
@media (max-width: 544px) {
    .waypoint-thumbnail {
        width: 138px !important;
        height: 138px !important;
    }

    .waypoints-container {
        justify-content: space-between !important;
        margin-left: 0px !important; 
    }

    .waypoint-info-container {
        width: 40% !important;
    }

    .waypoint-thumbnail-container {
        flex: initial !important;
    }


    .wizard-waypoint-variant-container {
        gap: 0px !important;
        justify-content: space-between !important; 
    }

    .white-text-wizard-step3 {
        font-size: 20px !important;
        color: #333333 !important;
        font-weight: 500 !important;
        margin-bottom: 0 !important; 
    }

    .waypoint-title-step2, .detail-page-variant-list-entry-title-step3 {
        font-size: 20px !important;
    }

    .wizard-container h3 {
        margin-top: 24px;
        font-size: 31.25px;
    }

    .title-ins-desc-container h4 {
        font-size: 25px;
    }

    .wizard-waypoint-variant-container {
        gap: 0px !important;
        justify-content: space-between !important;
    }
    
}