h2 {
    text-align: center;
}

h3 {
    text-align: center;
}

.stanza {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
}

.stanza .background-slideshow {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
}

.stanza.active .background-slideshow {
    display: block;
    opacity: 1;
    transition-property: opacity;
    transition-duration: .5s;
    transition-delay: 1s;
}

.stanza .background-slideshow .background {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: cover;
    background-position: center;
}

.stanza .background-slideshow .background.current {
    display: block;
}

.stanza .info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    align-items: center;
    border-radius: 8px;
    /* border: 1px solid #888; */
}

.stanza .info .button {
    display: none;
}

.stanze-box {
    gap: 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.stanze-box .stanza {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#stanza1 {
    /*  background-color: #00A; */
    /* background-image: url('../img/stanza_1.jpg');
    background-position: left; */
    background-color: #00A99D;
    transition-property: all;
    transition-duration: 1s;
    border-radius: 8px;
}

#stanza1 .info {
    margin-right: auto;
}

#stanza2 {
    /*  background-color: #A00; */
    /* background-image: url('../img/stanza_2.jpg');
    background-position: right; */
    background-color: #d32d16;
    transition-property: all;
    transition-duration: 1s;
    border-radius: 8px;
}

#stanza2 .info {
    margin-left: auto;
}

#stanza3 {
    /*  background-color: #A00; */
    /* background-image: url('../img/stanza_3.jpg');
    background-position: right; */
    background-color: #CC9200;
    transition-property: all;
    transition-duration: 1s;
    border-radius: 8px;
}

#stanza3 .info {
    margin-left: auto;
}

.page {
    min-height: 1000px;
}

.container {
    width: 100%;
}

.stanza-detail {
    display: flex;
    gap: 1em;
    margin: 0 20px;
    max-width: 1200px;
    width: 99%;
    margin: 0 auto;
    text-align: center;
}

.stanza-detail .back {
    display: none;
}

.stanza-detail .icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.stanza-detail .icons li {
    margin: 1em;
}

.stanza-detail .icons li img {
    display: block;
    margin: .5em auto;
    height: 2em;
}

.stanza-detail .button {
    margin: 1em;
}

#prenota .booking {
    width: 38vw;
}

.stanza-detail .booking {
    text-align: center;
}

.stanza-detail .booking .button {
    font-size: medium;
}

.stanza-detail .timechooser,
.stanza-detail .participant {
    display: none;
}

.stanza-detail .timechooser.visible,
.stanza-detail .participant.visible {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.stanza-detail table {
    width: 100%;
    background-color: #000;
    border: 1px solid #AAA;
    border-collapse: collapse;
}

.stanza-detail td,
.stanza-detail .timechooser th {
    border: 1px solid #AAA;
    padding: 0.5em;
}


.datetime-container {
    display: flex;
    justify-content: center;
    flex: 1;
}

.datechooser {
    width: 90%;
}

.datechooser .ui-datepicker-title {
    background-color: #000;
    border: 1px solid #AAA;
    padding: 0.5em;
    text-align: center;
}

.datechooser .ui-icon-circle-triangle-w {
    float: left;
    padding: 0.5em;
}

.datechooser .ui-icon-circle-triangle-e {
    float: right;
    padding: 0.5em;
}

/* .datechooser .ui-datepicker {
    width: 100%;   display: none;
}*/

.datechooser .ui-datepicker table {
    width: 100%;
    border-collapse: collapse;
    ;
    height: 500px;
}

.room-circles-container {
    position: absolute;
    display: flex;
    top: 0;
    bottom: 0;
    left: 5px;
    right: 0;
    justify-content: center;
    align-items: start;
    flex-direction: column;
}

.room-circle {
    margin: 3px;
    margin-left: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: transparent;
}

.room-1-circle {
    background-color: #508DFF;
}

.room-2-circle {
    background-color: #D6319C;
}

.room-3-circle {
    background-color: green;
}


.datechooser td {
    position: relative;
    background-color: #000;
    color: #FFF;
    text-align: center;
    vertical-align: middle;

}

.datechooser td.status-0,
.datechooser td.status-1 {
    background-color: #4F4F4F;
}

.datechooser td.selected {
    background-color: #9B9B9B;
}

.datechooser td.ui-datepicker-unselectable {
    background-color: #000;
    color: #888;
}

.timechooser {
    margin-bottom: 1em;
}

.page li {
    margin-bottom: 0;
}

.timechooser .slot-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    flex-direction: column;
    margin-top: 20px;
}

.timechooser .slot {
    flex: 1;
    text-align: center;
    max-width: 100%;
    padding: 0;
    margin: 0;
    min-height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.2);

}

.timechooser .slot:hover {
    background-color: #57C;
}


/* .timechooser .slot.status-0 {
    background-color: green;
} */

#timechooser-stanza1 .slot.status-0 {
    /*background-color: #0CCA88 !important;*/
    background-color: #eac8a6 !important;

}

#timechooser-stanza2 .slot.status-0 {
    /*background-color: #E949BB !important;*/
    background-color: #eac8a6 !important;
}

#timechooser-stanza3 .slot.status-0 {
    /*background-color: #CF9003 !important;*/
    background-color: #eac8a6 !important;
}

.timechooser .slot.selected {
    background-color: #57C;
}


.timechooser .slot.unselectable {

    background-color: #000;
    /* Rosso scuro per slot non disponibili */
    color: #888 !important;
    cursor: not-allowed;
}

.stanza-detail .price-preview {
    margin: 0 1em;
    font-size: 1em;
    font-weight: bold;
    color: #000;
    background-color: #FFF;
    padding: 0.5em;
    border-radius: 0.5em;
    border: 1px solid #AAA;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    width: 200px;
}


.stanza .button {
    margin: auto;
    margin-top: 3em;
}

ul.accordion {
    list-style: none;
}

ul.accordion li h3 {
    border: 3px solid rgba(88, 177, 146, 0.6);
    border-right-width: 0;
    border-left-width: 0;

    padding: 0.5em 0;
    margin: 1em 0 1em 0;
}

ul.accordion p {
    margin: 1em 0;
}

ul.accordion li .content {
    height: 0px;
    overflow: hidden;
    font-size: medium;

    transition: height 0.5s ease-in-out;
}

ul.accordion li.active .content {
    height: auto;
    transition: height 0.5s ease-in-out;
}

ul.accordion li .content p {
    margin: 1em;
}

.stanza.active {
    background-size: cover;

    transition-property: all;
    transition-duration: 1s;
}

/* #stanza1:hover,
#stanza1.active {
    background-image: url('../img/stanza_1.jpg');
}

#stanza2:hover,
#stanza2.active {
    background-image: url('../img/stanza_2.jpg');
}

#stanza3:hover,
#stanza3.active {
    background-image: url('../img/stanza_3.jpg');
} */

.stanza.active img {
    transition-property: all;
    transition-duration: 1s;
}

ul.accordion li h3 {
    margin: -3px 0 0 0;

    cursor: pointer;
}

ul.accordion li .content {
    height: 0;
    overflow: hidden;
    font-size: medium;

    transition: height 0.5s ease-in-out;
}

ul.accordion li.active .content {
    height: 40vh;

    transition: height 0.5s ease-in-out;
}

ul.accordion li .content p {
    margin: 1em;
}


.stanza .button {
    color: #000;
    background-color: #FFF;

    transition-property: all;
    transition-duration: 1s;
}

.stanza .info .button {
    display: block;
}

.stanza-detail .back {
    display: inline-block;
    font-size: 0.8em;
}

.stanza-detail .icons li img {
    display: inline;
    vertical-align: middle;
    margin: .5em;
}

.stanza-detail .content {
    display: none;
}

.stanza-detail .content.visible {
    display: block;
}

.close-button {
    display: inline-block;
    display: none;
    z-index: 99999;
}




@media (max-width: 600px) {
    .stanze-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2 colonne al 50% */
        gap: 10px;
    }

    .stanze-box.focus-one-room {
        display: flex !important;
    }

    .stanze-box .stanza {
        width: 100%;
    }

    /* Prima stanza a sinistra */
    #calendar-stanza1 {
        grid-column: 1;
    }

    /* Seconda stanza a destra */
    #calendar-stanza2 {
        grid-column: 2;
    }

    /* Terza stanza inizia una nuova riga, occupa metà */
    #calendar-stanza3 {
        grid-column: 1;
        /* oppure 2 se vuoi a destra */
    }
}

@media (max-width: 1000px) {
    .page {
        height: 100%;
        min-height: 0;
    }

    .room-circle {
        margin: 2px;
        margin-left: 5px;
        width: 6px;
        height: 6px;
    }

    .datetime-container {
        display: flex;
        justify-content: center;
        flex: 1;
    }

    .datechooser {
        height: 100%;
        width: 100%;
    }

    .datechooser .ui-datepicker table {
        width: 100%;
        border-collapse: collapse;
        height: 100%;
    }



    .stanze-box .stanza {
        width: 100%;
        margin-bottom: 1em;
    }

    .stanza {
        height: 30%;
        width: 100%;
    }

    .stanza img {
        height: 55px !important;
        margin: 10px !important
            /* margin: 30px; */
    }

    .stanza.active img {
        transition-property: all;
        transition-duration: 1s;
    }
}

/*mod new calendar*/
.datechooser {
    width: 100%;
    margin: 0;
    padding: 0;
}

.arrow {
    width: 12px;
    height: 12px;
    filter: invert(1);
}

.modern-calendar {
    height: auto;
    background-color: #000;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 25px;
    border-radius: 8px;
}

#selected-date-label {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.5em;
    margin-top: 1em;
}

.days-container {
    flex: 1;
    overflow: hidden;
    height: 100%;
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 120px;
}

.days-wrapper {
    display: flex;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.day-slot {
    flex: 1 0 0;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: 70px;
    background-color: #000;

    color: #888 !important;
    /* border: 1px solid #888; */
    padding: 8px;
    text-align: center;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    margin: 3px;
    color: #888 !important;
}

.day-slot.available {
    background-color: #eac8a6 !important;
}

.day-slot.selected {
    background-color: #fbf5de !important;
}

.day-name {
    font-size: 12px;
    margin-bottom: 5px;
}

.day-number {
    font-size: 20px;
    font-weight: bold;
}

.day-slot.available .day-number,
.day-slot.available .day-name,
.day-slot.available .day-month {
    color: #000 !important;
}



.day-month {
    font-size: 11px;
    margin-top: 2px;
}

.room-circles-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 4px;
    margin-top: 0;
    width: 100%;
}

.room-circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid #AAA;
    transition: transform 0.2s ease;
}

.room-1-circle {
    background-color: #508DFF;
}

.room-2-circle {
    background-color: #D6319C;
}

.room-3-circle {
    background-color: green;
}

.nav-button {
    width: 40px;
    height: 40px;
    background: #000;
    color: #FFF;
    border: 1px solid #AAA;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.nav-button.prev {
    left: -20px;
}

.nav-button.next {
    right: -20px;
}

.nav-button:hover {
    background-color: #333;
}

@media (max-width: 768px) {
    .modern-calendar {
        padding: 10px;
    }

    .current-month {
        font-size: 16px;
        min-width: 150px;
    }


    .day-name {
        font-size: 12px;
    }

    .day-number {
        font-size: 20px;
    }

    .nav-button {
        width: 30px;
        height: 30px;
    }

    .nav-button.prev {
        left: -15px;
    }

    .nav-button.next {
        right: -15px;
    }
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.calendar-header button {
    background: none;
    border-radius: 8px;
    padding: 0.5em 1em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.calendar-header button:hover {
    background-color: #333;
}

.current-month {
    font-size: 20px;
    color: #FFF;
    font-weight: bold;
    text-align: center;
    min-width: 200px;
}

.calendar-loader {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10;
    align-items: center;
    justify-content: center;
}

.spinner {
    border: 4px solid #fff;
    border-top: 4px solid #888;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.days-slider {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1em;
    margin: 0;
}

.days-slider::-webkit-scrollbar {
    height: 8px;
}

.days-slider::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}

.days-slider::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

.days-slider::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.calendar-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: calc((100% - 6.5em) / 7);
    height: 120px;
    padding: 1em;
    border: 1px solid #AAA;
    cursor: pointer;
    transition: all 0.3s ease;
    scroll-snap-align: start;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
    flex-shrink: 0;
}

.calendar-day:hover {
    background-color: #333;
    transform: translateY(-2px);
}


.calendar-day.today {
    border-color: #57C;
}

.day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.room-circles {
    display: flex;
    gap: 0.3em;
    margin-top: 1em;
}

.calendar-day:hover .room-circle {
    transform: scale(1.2);
}

/* Stili per le stanze */
.stanze-colonna {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    margin-top: 0;
    border-top: 1px solid #AAA;
}

.stanza {
    display: none;
    position: relative;
    transition: all 0.3s ease;
}

.stanza.visible {
    display: block;
    width: 100%;
}

.stanza.active {
    grid-column: span 3;
    border-color: #FFF;
    max-width: 500px;
    margin: 0 auto;
}

.stanza .info {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stanza img {
    height: 70px;
    margin: 16px;
}

.close-button {

    cursor: pointer;
    opacity: 0;
    margin-top: 0 !important
}

.close-button.visible {
    opacity: 1;
}



/* Stili per gli slot orari */
.timechooser {
    margin-bottom: 1em;
    width: 100%;
}

.slot-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.slot {
    width: 100%;
    padding: 1em;
    text-align: center;
    background-color: #1a472a;
    /* Verde scuro per slot disponibili */
    cursor: pointer;
    transition: all 0.3s ease;
    color: #FFF;
    font-size: 16px;
    display: block;
}

.slot a {
    color: #000;
    text-decoration: none;
    display: block;
    width: 100%;
}

.slot.unselectable {
    background-color: #5c0808;
    /* Rosso scuro per slot non disponibili */
    color: #999;
    cursor: not-allowed;
}


.slot.selected {
    background-color: #3d8b54;
    /* Verde più brillante per selezione */
    border-color: #FFF;
}

/* Stile per la scrollbar degli orari */
.slot-list::-webkit-scrollbar {
    width: 8px;
}

.slot-list::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}

.slot-list::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

.slot-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Stili per i partecipanti */
.participant {
    padding: 1.5em;
    margin-top: 1em;
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.2);
    /*border: 1px solid #888;*/
}

.participant label {
    font-size: 1.2em;
    font-weight: bolder;
    color: #FFF;
    margin-bottom: 0.5em;
    display: block;
}

.participant table {
    width: 100%;
    margin-bottom: 2em;
    border-collapse: collapse;
}

.participant th,
.participant td {
    padding: 1em;
    text-align: center;
    border: 1px solid #AAA;
}

.participant select {
    padding: 0.5em;
    margin: 0 1em;
    background-color: #333;
    color: #FFF;
    border: 1px solid #AAA;
    font-size: 1em;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid #AAA;
    width: 55px;
    margin: 0 auto;
    text-align: center;
}

.button.confirm {
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1em;
    background-color: #57C;
    color: #fff;
    border: none;
    padding: 0.5em 1em;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1em;
}


/* Stili per dispositivi mobili */
@media (max-width: 480px) {
    .participant table {
        font-size: 0.9em;
    }
}

.stanza-detail {
    display: block;
    width: 99%;
    gap: 1em;
}

.datetime-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 1em;
}

.no-slots {
    color: #bbb;
    text-align: center;
    padding: 1em;
    border-radius: 6px;
    margin: 0.5em 0;
    font-size: 16px;
}

.select-day-prompt-class {
    text-align: center;
    padding: 1em;
    font-size: 1.2em;
    font-weight: bold;
    color: #FFF;
    border-radius: 6px;
    margin-bottom: 0.5em;
    display: block;
}

/* Stili per il loader dei prezzi */
.price-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    min-height: 50px;
}

.price-loader .spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #1a472a;
    /* Verde scuro come gli slot disponibili */
    border-radius: 50%;
    border-top-color: rgb(88, 177, 146);
    /* Verde del sito usato nei bottoni */
    animation: price-spin 1s ease-in-out infinite;
    -webkit-animation: price-spin 1s ease-in-out infinite;
}

@keyframes price-spin {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes price-spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

.selected-time-label {
    text-align: center;
    font-size: 1.1em;
    /* Leggermente più piccolo del date label */
    color: #FFF;
    /* Verde del sito */
    margin-bottom: 1em;
    display: none;
    /* Nascosto di default */
}

.price-per-person {
    border-radius: 8px;
    width: 200px;
}

.timechooser .slot {
    /*border: 1px solid #888;*/
}