body {
    background-color: #fff
}

#reservation {
    height: 100vh;
    overflow-x: hidden
}

#reservation #reservation-right {
    height: 100%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
}

.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease-in-out;
    opacity: 0;
  }

  #background-layer-1 {
    z-index: 1;
  }

  #background-layer-2 {
    z-index: 2;
  }

#reservation #reservation-left {
    padding: 4rem 4rem
}

#reservation #reservation-left .reservation-title {
    font-size: 4rem;
    margin-bottom: 1rem
}

#reservation #reservation-left .reservation-subtitle {
    color: #a8aebb;
    font-size: 1.7rem;
    line-height: 2.5rem
}

#reservation #reservation-left .reservation-logo {
    margin-bottom: 3rem
}

#reservation #reservation-left .reservation-logo img {
    height: 4.5rem;
}

@media (max-width: 767px) {
    #reservation #reservation-left .reservation-logo img {
        height: 3.5rem;
    }
}

@media screen and (max-width: 767px) {
    #reservation #reservation-left {
        padding:5rem
    }
}

@media screen and (max-width: 576px) {
    #reservation #reservation-left {
        padding:5rem 3rem
    }
}



/* Container styles */
#loading-container {
    position: relative;
    height: auto; /* Adjust to fit content */
}

/* Initial state for the indicator and form */
#indicator, #form_end {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* Ensure both elements are absolutely positioned to overlap */
#indicator, #form_end {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Show indicator during HTMX request */
.htmx-request #indicator {
    opacity: 1;
}

/* Hide form during HTMX request */
.htmx-request #form_end {
    opacity: 0;
    pointer-events: none;
}

/* Initial state for the form (visible when no request is in progress) */
#form_end {
    opacity: 1;
}