/** Container Front and Back */
.container {
  perspective: 1200px;

}

#card {
  border-radius: 30px !important;
}

.card {
  width: 100% !important;
  margin: 0;
  border: 0px solid var(--body-color) !important;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--card-color) !important;
}

.event-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.event-image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 10px; /* Optional: Rounded corners */
}

@media only screen and (max-width: 768px)
{
  .event-image-container img {
    max-width: 80% !important;
    height: auto;
    border-radius: 10px; /* Optional: Rounded corners */
  }
}

/** END Container Front and Back */

/** Buttons */
#login-btn {
  margin: 50px;
  max-width: fit-content;
}

.btn-blue {
  width: 80%;
}
/** END Buttons */

.price-button {
  margin: 0 10px; /* Adjust the margin as needed */
  border: 2px solid var(--btn-color); /* Add a border */
  background-color: transparent; /* Remove the filling */
  border-radius: 10px; /* Add rounded corners */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  /*color: var(--button-text-color); /* Set the text color */
  position: relative; /* Needed for positioning the decimal part */
  height: 140px; /* Set a fixed height */
}

.price-button.selected {
  border-width: 4px; /* Thicker border for selected button */
  height: 140px; /* Ensure the height remains the same */
}


.room-button {
  margin: 0 10px; /* Adjust the margin as needed */
  border: 2px solid var(--btn-color); /* Add a border */
  background-color: transparent; /* Remove the filling */
  border-radius: 10px; /* Add rounded corners */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  /*color: var(--button-text-color); /* Set the text color */
  position: relative; /* Needed for positioning the decimal part */
  height: 140px; /* Set a fixed height */
}

.room-button.selected {
  border-width: 4px; /* Thicker border for selected button */
  height: 140px; /* Set a fixed height */
}

.price-container {
  display: inline-block;
  position: relative; /* Needed for positioning the decimal part */
}

.price-integer {
  font-size: 2em; /* Make the integer part bigger */
}

.price-decimal {
  font-size: 0.75em; /* Make the decimal part smaller */
  position: absolute;
  top: 1.5em; /* Adjust the position */
  right: -1em; /* Adjust the position */
  transform: translate(50%, -50%); /* Adjust the position */
}

.price-total-integer {
  font-size: 4em; /* Make the integer part bigger */
}

.price-total-decimal {
  font-size: 1.3em; /* Make the decimal part smaller */
  position: absolute;
  top: 1.7em; /* Adjust the position */
  right: -1em; /* Adjust the position */
  transform: translate(50%, -50%); /* Adjust the position */
}

.separator {
  position: relative; /* Necessario per posizionare il pseudo-elemento */
  padding-right: 15px; /* Spazio tra la linea e il contenuto */
}

.separator::before {
  content: ""; /* Necessario per visualizzare il pseudo-elemento */
  position: absolute;
  top: -25%; /* Regola per la posizione verticale della linea */
  bottom: 10%; /* Regola per la lunghezza della linea */
  right: 0; /* Posiziona la linea a destra della colonna */
  width: 1px; /* Spessore della linea */
  background-color: #ccc; /* Colore della linea */
  height: 150%; /* Imposta l'altezza per renderla più lunga */
}

@media (max-width: 1400px) {
}

@media (max-width: 768px) {
  /* Nasconde la linea su dispositivi mobili */
  .separator::before {
    display: none;
  }
}

.line-full {
  display: inline-block;
  vertical-align: middle;
  margin: 10px 0 26px;
  border-bottom: 1px solid #cecece;
  width: 100%;
}

.line-full2 {
  display: inline-block;
  vertical-align: middle;
  margin: 10px 0 10px;
  border-bottom: 1px solid #cecece;
  width: 100%;
}

/** Inputs */
.form-control {
  background-color: #f0f6f6 !important; /* Colore di sfondo predefinito */
  border: 1px solid #d0e6e6 !important; /* Colore del bordo predefinito */
  transition: border-color 0.3s, background-color 0.3s; /* Transizioni per il colore */
  outline: none !important; /* Rimuove il contorno di focus predefinito */
}

.form-control:focus {
  border-color: #d0e6e6 !important; /* Colore del bordo al focus */
  background-color: #f0f6f6 !important; /* Colore di sfondo al focus */
  outline: none !important; /* Rimuove il contorno predefinito del browser */
}

.form-control:active {
  border-color: #d0e6e6 !important; /* Colore del bordo durante il clic */
  background-color: #f0f6f6 !important; /* Colore di sfondo durante il clic */
}

.form-control:focus {
  border-color: #d0e6e6 !important; /* Colore del bordo al focus */
  background-color: #f0f6f6 !important; /* Colore di sfondo al focus */
  box-shadow: 0 0 0 0.2rem rgba(208, 230, 230, 0.5) !important; /* Ombra con il colore del bordo */
}
/** END Inputs */

.PriceColumn {
  max-width: 200px !important;
}

/** For the scrollable room lists **/
.room-buttons-container {
  display: flex;
  overflow-x: auto; /* Enable horizontal scrolling */
  gap: 0px; /* Add some space between the buttons */
  padding: 0px 0; /* Optional: Add some padding */
  width: 100%; /* Ensure the container takes up the full width */
}

.room-buttons-container::-webkit-scrollbar {
  height: 8px; /* Height of the scrollbar */
}

.room-buttons-container::-webkit-scrollbar-thumb {
  background-color: #ccc; /* Color of the scrollbar thumb */
  border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}

.room-buttons-container::-webkit-scrollbar-track {
  background-color: #f0f0f0; /* Color of the scrollbar track */
}

/* Hide the scrollbar on mobile devices */
@media (max-width: 600px) {
  .room-buttons-container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  }

  .room-buttons-container::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
  }

    .form-select {
    width: 100%; /* Ensure the select takes the full width */
    max-width: none !important;
    text-align: center;
  }
}

/* Ensure the room buttons take up the appropriate width */
.room-button {
  flex: 0 0 auto; /* Prevent the buttons from shrinking */
  width: 100%; /* Adjust the width as needed */
}

/* Style the Add to Basket and Buy Now buttons */
#addToBasketBtn, #addToBasketBtnD, #buyNowBtn, #buyNowBtnD {
  border-radius: 20px; /* More rounded corners */
  padding: 10px 20px; /* Adjust padding as needed */
  font-size: 1em; /* Adjust font size as needed */
  width: 45%; /* Adjust width as needed */
  border: none; /* Remove border */
}

#addToBasketBtn, #addToBasketBtnD {
  background-color: var(--btn-color); /* Secondary color */
  color: black;
}

#buyNowBtn, #buyNowBtnD {
  background-color: var(--btn-color); /* Primary color */
  color: black;
}

/* Center the buttons */
.d-flex.justify-content-between.mt-3 {
  justify-content: center;
  gap: 20px; /* Add space between the buttons */
}

/* Style the event description */
.event-description {
  background-color: var(--card-color); /* Match the card background color */
  padding: 20px;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.event-description h2 {
  margin-bottom: 10px;
  font-size: 1.5em;
}

.event-description p {
  margin: 0;
  line-height: 1.6;
}


/* Hide desktop layout on mobile */
.mobile-layout {
  display: block;
}

.desktop-layout {
  display: none;
}

/* Desktop layout */
@media (min-width: 768px) {
  .mobile-layout {
    display: none;
  }

  .desktop-layout {
    display: flex;
    justify-content: space-between;
  }
  
  /*.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right:0 !important; 
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-top: var(--bs-gutter-y);
  }*/

  .card {
    /*min-width: 1100px;*/
    max-width: 100%;
  }

  .event-image-container {
    flex: 0.7;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .event-details-container {
    flex: 1;
  }

  .event-title {
    text-align: left;
  }

  .event-description {
    margin-top: 20px;
  }

  .col-md-3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #addToBasketBtn, #addToBasketBtnD, #buyNowBtn, #buyNowBtnD{
    width: 90%; /* Make the buttons wider */
  }

  #addToBasketBtn, #addToBasketBtnD {
    margin-bottom: 20px;
  }
}

.d-flex.align-items-baseline {
  display: flex;
  align-items: baseline; /* Align items to the baseline */
}

#desktop_per_month {
  margin-left: 0.5rem; /* Add some space between the price and the label */
  position: relative;
  top: -0.3rem; /* Adjust this value to move the label up */
}

#per_month {
  margin-left: 0.5rem; /* Add some space between the price and the label */
  position: relative;
  top: -0.3rem; /* Adjust this value to move the label up */
}

.event-rating {
  font-size: 22px;
  color: #ffc107; /* Gold color for stars */
  display: inline-flex;
  align-items: center;
}

.event-rating .fa-star,
.event-rating .fa-star-half-alt,
.event-rating .fa-star-o {
  margin-right: 2px;
}

.event-rating .votes {
  font-size: 16px;
  color: #666;
  margin-left: 8px;
  font-weight: 600 !important;
}

.form-select {
  min-width: 120px;
  border-radius: 5px;
  background-color: #f0f6f6 !important; /* Colore di sfondo predefinito */
  /* Don't expand by default */
  flex: 0 1 auto;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    border: 1px solid #d0e6e6 !important; /* Colore del bordo predefinito */
  transition: border-color 0.3s, background-color 0.3s; /* Transizioni per il colore */
  outline: none !important; /* Rimuove il contorno di focus predefinito */
}

.form-select:focus {
  border-color: #d0e6e6 !important; /* Colore del bordo al focus */
  background-color: #f0f6f6 !important; /* Colore di sfondo al focus */
  outline: none !important; /* Rimuove il contorno predefinito del browser */
  box-shadow: 0 0 0 0.2rem #d0e6e6 !important; /* Ombra con il colore del bordo */
}

.form-select:active {
  border-color: #d0e6e6 !important; /* Colore del bordo durante il clic */
  background-color: #f0f6f6 !important; /* Colore di sfondo durante il clic */
}