* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

:root {
  --firstmonthGrid: 1/1;
  --secondmonthGrid: 1/1;
  --scene-height: 100vh;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  padding-bottom: 2em;
}

/* MAPBOX STYLES  */
.mapboxgl-popup-close-button {
  margin-left: 1em;
  margin-bottom: 0.5em;
  width: 1em;
  font-size: 1.5em;
  color: #ff0000;

}
.mapboxgl-popup-content h1 {
  margin-top: 0.5em;
  margin-right: 0.5em;
  font-weight: bold;
  font-size: 1.2em;
}

/* COMMON CLASS STYLES  */
.overflow-hide {
  overflow: hidden;
}

.container {
  width: 90%;
  margin: auto;
}

.muted {
  opacity: 0.5;
}

.button,
button {
  cursor: pointer;
}

.stays .page-content {
  padding-top: 10vh;
}

input[type=text], textarea {
  -webkit-appearance: none;
}

a{
  color: inherit;
  text-decoration: none;
}
/*Valid and invalid input */
.form-validated input:invalid, .form-validated textarea:invalid {
  border:1px solid #dc3545;
}

.form-validated input:invalid ~ .validity-feedback::before, 
.form-validated textarea:invalid ~ .validity-feedback::before,
.invalid::before,
.error::before {
  content: '!';
  font-weight: 600;
  font-size: .8em;
  height: 1.1em;
  width: 1.1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: .15em solid #dc3545;
  border-radius: 50%;
  margin-right: 0.5em;
}

.form-validated:valid .invalid{
  display: none;
}

.form-validated input:invalid ~ .validity-feedback, 
.form-validated textarea:invalid ~ .validity-feedback {
  display: block;
  color: #dc3545;
}

.invalid {
  font-size: 0.85em;
  max-width: 400px;
  margin: 0 auto;
  display: block;
  color: #dc3545;
}

.form-validated input:invalid:focus, .form-validated textarea:invalid:focus {
  border:2px solid #dc3545;
  box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
}

/* VALID INPUT  */
.form-validated input:valid, .form-validated textarea:valid {
  border:1px solid #198754;
}

.form-validated input:valid ~ .validity-feedback, 
.form-validated textarea:valid ~ .validity-feedback {
  display: none;
  color: #198754;
}

.form-validated input:valid:focus, .form-validated textarea:valid:focus {
  border:2px solid #198754;
  box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);
}

.form-validated input:valid ~ .valid-feedback,
.form-validated textarea:valid ~ .valid-feedback  {
  display: block;
}

/* FLASH MESSAGE STYLING */
@keyframes flash {
  0%   {
    opacity: 0.25;
    top: .5em;
  }
  25%  {
    opacity: 1;
    top: 1em;
  }
  50%  {
    opacity: 1;
    top: 1em;
  }
  75%  {
    opacity: 1;
    top: 0.5em;
  }
  100% {
    opacity: 0;
    top: 0;
  }
}

.message {
  position: absolute;
  top: 0;
  left: 50%;
  max-width: 90%;
  min-width: 400px;
  transform: translateX(-50%);
  border-radius: 0.3em;
  padding: 1em 1.5em;
  z-index: 10;
  opacity: 0;
  font-weight: 500;
  animation-name: flash;
  animation-duration: 4s;
  animation-timing-function: ease-in;
}

.success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

.info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}

.error {
  font-size: 1em;
  margin: 1.3em 0;
  max-width: 100%;
  color: #dc3545;
}

/* NAVBAR */
.navbar {
  width: 100vw;
  position: absolute;
  z-index: 3;
}

.nav-container {
  width: 90%;
  margin: 0.5em auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home .navbar {
  color: #fff;
}
.stays .navbar {
  color: #000;
  position: fixed;
  background-color: #fff;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
}
#show .navbar {
  position: absolute;
}

.stays .logo path {
  fill: #fd705d;
}

#brand a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#hamburger {
  background: none;
  border: none;
  flex-direction: column;
  justify-content: space-around;
  height: 1em;
  cursor: pointer;
  display: none;
}

.menu {
  list-style: none;
  display: flex;
  justify-content: space-around;
  width: 300px;
  align-items: center;
}

.nav-item {
  cursor: pointer;
  font-weight: 500;
  position: relative;
}

.auth::after,
.profile::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: scaleX(0);
  height: 100%;
  padding-bottom: 0.4em;
  transition: all 0.2s ease-in-out;
  z-index: -1;
}
.home .auth::after,
.home .profile::after {
  border-bottom: 1px solid #fff;
}
.stays .auth::after,
.stays .profile::after {
  border-bottom: 1px solid #000;
}

.nav-item a {
  padding: 0.7em 0.7em;
  letter-spacing: 0.05em;
  font-size: 0.9em;
}

#nav-btn-link {
  text-transform: uppercase;
  border-top-right-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
  font-size: 0.8em;
}
.home #nav-btn-link {
  border: 0.15em solid #fff;
  color: #fff;
}
.stays #nav-btn-link {
  color: #000;
  border: 0.15em solid #000;
}

/* HOME PAGE SECTION */
#hero-section {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  height: 100vh;
  max-height: 700px;
  min-height: 600px;
  background: url('/images/Hero.jpg') center/cover no-repeat;
  z-index: 2;
}

.brand-quote {
  width: 80%;
  transform: translateY(-25%);
  min-width: 800px;
  z-index: 1;
  position: absolute;
  top: 55%;
}

.brand-quote h1 {
  font-size: 3.5em;
  font-weight: 600;
  color: #fff;
  text-shadow: 4px 4px 9px rgba(0, 0, 0, 0.5);
}
#hero-section h1 + p {
  margin-top: 1em;
  color: #fff;
}

#hero-section::before {
  content: '';
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
/* SEARCH FORM */
.search-form_section {
  width: 100vw;
  position: relative;
}

.stays .search-form_section {
  min-height: max-content;
  position: fixed;
  background-color: #fff;
  z-index: 5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#show .search-form_section {
  position: static;
}

#form-container {
  position: relative;
  width: 90%;
  max-width: 850px;
  margin: 0 auto;
  padding: 1em  0;
}

#search-form {
  display: flex;
  justify-content: space-between;
  background: #ffc996;
  padding: 0.2em;
  margin-top: 25%;
  position: relative;
  border-radius: 0.2em;
}

.stays #search-form {
  background: rgba(0, 0, 0, 0.02);
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.2em;
  margin: auto;
}

.date-picker {
  border-left: 1px solid #ccc;
  cursor: pointer;
}

.form-div {
  background: #fcecdd;
  padding: 0.2em 0.5em;
  display: flex;
  width: 100%;
  height: 55px;
  flex-direction: column;
  transition: all 0.2s ease-out;
  position: relative;
}

.stays .form-div {
  background: none;
}

.form-label {
  font-weight: 600;
  font-size: 0.8em;
  margin-bottom: 0.2em;
}

.date-input-value {
  opacity: 0.5;
  font-size: 0.8em;
  padding: 0.5em 0;
}

.selected-date {
  font-weight: 600;
  opacity: 1;
  font-size: 1em;
  padding: 0;
}

.form-focus {
  border: none;
  background: #fff;
  box-shadow: 0px 0px 0px 2px #FCA99E;
}

#location {
  border: none;
  outline: none;
  height: 50%;
  width: 100%;
  background: none;
  padding: 0.5em 0;
  transition: all 0.2s ease-out;
  font-size: 1em;
  font-weight: 600;
}

#location-section:focus-within {
  border: none;
  background: #fff;
  box-shadow: 0px 0px 0px 2px #FCA99E;
  z-index: 10;
}

.clear-location {
  font-weight: 500;
  position: absolute;
  top: 50%;
  right: 0.5em;
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  display: none;
  transform: translateY(-25%);
  background-color: rgba(0, 0, 0, 0.05);
}
.clear-location p {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 1.5em;
  text-align: center;
  transform: translateY(-25%);
  opacity: 0.7;
}

.clear-location.show-clear-location {
  display: block;
}

#location::placeholder {
  font-size: 0.8em;
  font-weight: 400;
}
#location::-moz-placeholder {
  font-size: 0.8em;
  font-weight: 400;
}
#location::-webkit-input-placeholder {
  font-size: 0.8em;
  font-weight: 400;
}

.search-form_submit {
  background: #ff8474;
  color: white;
  border: none;
  border-radius: 0.2em;
  padding: 0 1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  width: 10%;
  font-weight: 500;
  font-size: 0.85em;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.5em;
  z-index: 12;
}

.search-form_submit > span {
  margin-right: 0.2em;
  letter-spacing: 0.02em;
}

/* calendar */
.calendar-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  z-index: 2;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.container_absolute {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3); 
  box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3);
}

.scene {
  width: 100%;
  height: 250px;
  perspective: 100000px;
  -webkit-perspective: 100000px;
  background-color: white;
  user-select: none;
  margin: 0 auto;
  overflow: hidden;
  z-index: 10;
}

.display-calendar {
  transform: scale(1);
  -webkit-transform: scale(1);
  transition: rotate 0.1s ease-out;
  -webkit-transition: rotate 0.1s ease-out;
}

.slider {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  position: relative;
  transform: translateZ(-290px) rotateY(0deg);
  -webkit-transform: translateZ(-290px) rotateY(0deg);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}

.calendar {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.weeks-container {
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: space-evenly;
  top: 2.5em;
  z-index: 5;
}

#mobile-weeks {
  display: none;
}

.weeks {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 40%;
  justify-items: center;
  align-items: center;
  font-size: 0.8em;
  font-weight: 500;
  opacity: 0.7;
  z-index: 5;
}

.week {
  padding: 0.5em 0;
}

.months {
  position: relative;
  top: 0.8em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 100%;
}

.months h3 {
  width: 50%;
  text-align: center;
  font-weight: 500;
}

.calendar-days {
  position: relative;
  width: 100%;
  top: 3em;
  display: flex;
  justify-content: space-evenly;
}

.days {
  width: 40%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1.5em);
  grid-auto-flow: row;
  grid-row-gap: 0.5em;
  justify-items: center;
  align-items: center;
}

.day {
  justify-self: center;
  cursor: pointer;
  width: 100%;
  padding: 0.5em 0;
  text-align: center;
  font-size: 0.8em;
  font-weight: 600;
  z-index: 2;
  position: relative;
}

.unavailable {
  opacity: 0.25;
  cursor: auto;
  text-decoration: line-through;
}

.start-day::before,
.end-day::before {
  content: '';
  position: absolute;
  background-color: #fc7563;
  justify-self: center;
  left: 50%;
  top: 50%;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: -1;
  display: flex;
  align-items: center;
}

.start-day::after,
.end-day::after {
  content: '';
  position: absolute;
  background-color: #fcecdd;
  justify-self: center;
  left: 0;
  top: 0;
  width: 80%;
  height: 100%;
  z-index: -2;
  display: flex;
  align-items: center;
}
.start-day::after {
  transform: translateX(25%);
  -webkit-transform: translateX(25%);
  border-top-left-radius: 2em;
  border-bottom-left-radius: 2em;
}
.end-day::after {
  border-top-right-radius: 2em;
  border-bottom-right-radius: 2em;
}

.stay-day::after {
  content: '';
  position: absolute;
  background-color: #fcecdd;
  justify-self: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: flex;
  align-items: center;
}

.days .stay-day:last-child:after {
  content: '';
  position: absolute;
  background: linear-gradient(to left, #fff, #fcecdd, #fcecdd);
  justify-self: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: flex;
  align-items: center;
}

.days .stay-day:first-child:after {
  content: '';
  position: absolute;
  background: linear-gradient(to right, #fff, #fcecdd, #fcecdd);
  justify-self: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: flex;
  align-items: center;
}

.cal-btn_container {
  width: 100%;
  min-height: 3em;
  background: #fff;
  position: relative;
  padding-top: 0.5em;
  margin: 0 auto;
}

.cal-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.7;
  background: none;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 1.8em;
  position: absolute;
  cursor: pointer;
  transition: all 0.2s ease-out;
  z-index: 5;
}

.next-btn {
  right: 0.3em;
}
.prev-btn {
  left: 0.3em;
}
.disabled-btn {
  opacity: 0.3;
  cursor: not-allowed;
}

.span-button_container {
  z-index: 5;
  width: 100%;
  background: #fff;
  height: 2.5em;
  position: relative;  
  z-index: 5;
  font-size: 1.2em;
  margin: 0 auto;
}

.cal-clear {
  position: absolute;
  right: 1em;
  top: 0.5em;
  font-weight: 500;
  opacity: 0.5; 
}
.cal-clear.clear-dates {
  opacity: 1;
  color: #ff8474;
  cursor: pointer;
}

.close-cal {
  font-weight: 500;
  cursor: pointer;
  position: absolute;
  left: 0.5em;
  top: .5em;
  color: #ff0000;
}

.sm-cal-form {
  display: none;
  padding-bottom: 0.5em;
}

.sm-cal-value {
  font-weight: 600;
  transform: scale(0);
  transition: all 0.2s ease-out;
}
.sm-cal-value.larger {
  transform: scale(0.9);
}

.sm-form-label {
  transition: all 0.2s ease-out;
  font-weight: 600;
}
.sm-form-label.smaller {
  transform: scale(0.8);
  font-weight: 500;
}

.continue-box {
  display: none;
}

#lodge-nights {
  position: absolute;
  display: block;
  bottom: 0.5em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8em;
  font-weight: 600;
}

/* showcase */
#showcase-section {
  margin: 3em auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#showcase-section h4 {
  font-weight: 700;
}

#showcase-section h2 {
  font-size: 1.8em;
  font-weight: 600;
  text-align: center;
}

#showcase-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 1.5em auto;
}

.showcase-item {
  list-style: none;
  display: inline-block;
  width: 30%;
  text-align: center;
}

.showcase-item h4 {
  margin: 0.5em 0;
}

.showcase-svg svg {
  height: 2em;
  width: 2em;
}

.showcase-svg {
  background: #ffc996;
  height: 4em;
  width: 4em;
  padding: 1em;
  margin: 0 auto;
  border-radius: 50%;
}

/* gallery */
#gallery {
  margin: 3em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.gallery-img-container {
  width: 20%;
  position: relative;
  overflow: hidden;
  border-radius: 0.5em;
  text-align: center;
  margin: 1em 0;
}

.gallery-img-container img {
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-out;
}

.gallery-img-container p {
  position: absolute;
  bottom: 0.5em;
  width: 100%;
  color: #fff;
  text-shadow: 1px 1px 2px rgb(25 25 25);
  font-weight: 500;
}

/* SEARCH PAGE */
.search-page {
  display: grid;
  gap: 1em;
  grid-template-columns: 60% 40%;
  grid-template-areas: 
  "stays map";
  position: relative;
}

.search-page #map {
  height: 90%;
  width: 38%;
  position: fixed;
  right: .5em;
}

.staysList {
  padding-top: 148px;
  grid-area: stays;
  position: relative;
  min-height: 100vh;
}

.toggleMap {
  position: fixed;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  padding: .5em;
  border: none;
  color: #fff;
  background: #000;
  z-index: 1;
  border-radius: 1em;
  cursor: pointer;
  display: none;
}
#toggleMap {
  position: absolute;
  left: 100%;
  display: none;
}

.staysList .filters {
  width: 100%;
  max-width: 40rem;
  display: flex;
  justify-content: space-evenly;
  padding: 1em 0;
  z-index: 9;
}

.filters div {
  position: relative;
  width: 50%;
  min-height: 30px;
  max-width: 11rem;
  display: flex;
  box-shadow: 0px 0px 0px 1px #d3d3d3;
  border-radius: 0.5em;
}

.filters div:first-of-type {
  max-width: 12rem;
}

.filters p {
  padding:0 0.5em;
  width: 35%;
  min-width: max-content;
  height: 100%;
  display: inline-flex;
  align-items: center;
  border-bottom-left-radius: 0.5em;
  border-top-left-radius: 0.5em;
  box-shadow: 1px 0px 0px 0.01em #D3D3D3;
}

.filters label {
  cursor: pointer;
}

.filters input[type=text] {
  width: 65%;
  border-radius: 0;
  outline: none;
  padding-left: 0.2em;
  border-radius: 0.5em;
  background-color: transparent;
  cursor: pointer;
  text-transform: capitalize;
}

.filters input[type=text]:focus {
  box-shadow: 0px 0px 0px 2px #fd705d;
}

.filters .arrow-down {
  position: absolute;
  top: 50%;
  right: 0.5em;
  transform: translateY(-50%);
  font-size: 0.8em;
  cursor: pointer;
}

.sort-options,
.rating-options{
  display: none;
  list-style: none;
  position: absolute;
  top: 120%;
  left: 35%;
  width: 65%;
  z-index: 1;
  background-color: #fff;
  border-radius: .5em;
  overflow: hidden;
  box-shadow: 0px 0px 0px 1px #d3d3d3;
  height: auto;
}

.show-options {
  display: block;
}

.filters ul li{
  border-bottom: 1px solid #d3d3d3;
  cursor: pointer;
  font-size: 1.05em;
}

.filters ul li:last-of-type{
  border-bottom: 0;
}

.sort-radios,
.filter-radios{
  left: -100%;
  position: absolute;
}

.sort-radios:focus ~ label,
.filter-radios:focus ~ label {
  background-color: #d3d3d3;
}

.filters label {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding:0.3em;
}

.search-card {
  width: 100%;
  text-decoration: none;
  color: #000;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  height: 250px;
  padding: 1em .5em;
}

.search-card:nth-of-type(2n) {
  background: rgb(0 0 0 / 2%);
}

.carousel_scene {
  perspective: 100000px;
  -webkit-perspective: 100000px;
}
.carousel_Btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  z-index: 1;
}
.carousel_prevBtn {
  left: 0.5em;
}
.carousel_nxtBtn {
  right: 0.5em;
}

.carousel {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  position: relative;
  display: flex;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}

.carousel-cell {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.carousel-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-div {
  overflow: hidden;
  position: relative;
}
.card-div:first-child {
  border-radius: 0.5em;
}
.card-div .description {
  margin: 0.5em 0;
}
.card-div .location {
  font-size: 0.7em;
  opacity: 0.5;
}
.card-div h2 {
  font-weight: 600;
}
.card-div img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.average-rating {
  position: absolute;
  top: 0;
  right: 0;
}

.card-div .view-button {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.show-link {
  text-decoration: none;
  color: #fff;
  background-color: #0d6efd;
  font-size: 0.8em;
  font-weight: 600;
  padding: 0.5em 1em;
  border-radius: 0.4em;
}

.paginators {
  width: 100%;
  max-width: 40rem;
  display: flex;
  justify-content: space-around;
  align-items: center;  
  margin: 2em 0;
  font-weight: 500;
}

.paginators a,
.carousel_Btn {
  font-weight: 600;
  font-size: 1.2em;
  padding: 0.5em .8em;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25); 
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
  background-color: #fff;
  cursor: pointer;
}

/* SHOW PAGE  */
.show-wrapper {
  display: grid;
  grid-template-areas: 
  "stay map"
   "stay reviews"
   "stay reviews"
   "stay reviews";
   grid-template-columns: 50% 50%;
   gap: 0.5em;
   padding: 1em;
}

.show-wrapper h2 {
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 0.5em;
}

.stay-details {
  grid-area: stay;
}

.stay-info {
  position: relative;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 0.2em;
  padding: 0.5em;
  padding-bottom: 4em; 
  margin-bottom: 1em; 
  height: max-content;
}

.container__show-image {
  height: 350px;
  width: 100%;
  overflow: hidden;
  border-radius: 0.3em;
  margin: 0.5em 0;
  box-shadow: 0px 0px 17px 5px rgba(0,0,0,0.2);
  position: relative;
}
#show img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.update-form__link {
  position: absolute;
  bottom: 0.5em;
  left: 0.5em;
  padding: 0.5em;
  border: none;
  background-color: #0dcaf0;
  color: #fff;
  font-weight: 600;
  border-radius: 0.2em;
}

.editImageBtn {
  position: absolute;
  right: .5em;
  bottom: .5em;
  color: #fff;
  background-color: #0dcaf0;
  font-size: 0.8em;
  font-weight: 600;
  padding: 0.5em 1em;
  border-radius: 0.4em;
  z-index: 1;
  box-shadow: 0px 0px 15px 2px rgb(0 0 0 / 25%);
}

.stay-delete_form {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
}

.delete-button {
  padding: 0.5em;
  border: none;
  background-color: #dc3545;
  color: #fff;
  font-weight: 600;
  border-radius: 0.2em;
}

.stay-details__location {
  font-size: 0.8em;
}

.stay-details__price {
  position: absolute;
  right: .5em;
  top: .5em;
  font-weight: 500;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 30px;
  border-radius: 0.2em;
}

.stay-details__description {
  margin: 0.5em 0;
  font-size: 1.2em;
  text-align: justify;
  word-break: break-word;
}

.book-form {
  margin: 1em auto;
  width: 100%;
  max-width: 400px;
}

.booking-info{
  position: relative;
  padding: 1px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 3em 3em;  
  gap: 1px;
  background-color: rgba(0,0,0,0.8);
  border-radius: 0.5em;
}

.form-group {
  position: relative;
}

.book-form label {
  position: absolute;
  top: 0;
  font-weight: 500;
  height: 100%;
  font-size: .8em;
  text-align: center;
}

.book-price label {
  width: 100%;
}

.lodge-label{
  background-color: #fff;
  width:calc(100% - 1px);
}
.lodge-in-label,
.lodge-in-date {
  border-top-left-radius: .5em;
}
.lodge-out-label,
.lodge-out-date  {
  border-top-right-radius: .5em;
}

.book-form input {
  -webkit-appearance: none;
  height: 100%;
  width: calc(100% - 1px);
}

.lodge-date_str {
  width: calc(100% - 1px);
  height: 100%;
  text-align: center;
  padding-top: 1.2em;
  cursor: pointer;
  position: absolute;
  background: transparent;
}

.book-form .book-price {
  grid-column: 1/3;
  background-color: #fff;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em;
  width: calc(100% - 1px);
  text-align: center;
}

.totalPrice-label {
  font-size: .8em;
  font-weight: 500;
}

.totalPrice {
  font-weight: 600;
}

.book-btn {
  width: 100%;
  border: none;
  background-color: #ff8474;
  font-weight: 500;
  color: #fff;
  margin-top: 0.2em;
  border-radius: .5em;
  height: 3em;
}

.show-wrapper #map {
  grid-area: map;
  min-height: 400px;
}

.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right, .mapboxgl-ctrl-top-left, .mapboxgl-ctrl-top-right {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* REVIEWs  */

.reviews-container {
  grid-area: reviews;
  margin-bottom: 1em;
  position: relative;
}

.reviews-container input[type=radio] {
  opacity: 0;
}

#reviews{ 
  margin-bottom: 1em;
}

.review {
  border-radius: 0.2em;
  border:1px solid rgba(0, 0, 0, 0.05);
  padding: 1em 0.5em;
  margin: 1em  0;
  position: relative;
}

.reviewer {
  font-weight: 500;
  margin: 0.5em;
  font-size: 1.1em;
}

.rating {
  position: relative;
  margin: 0.5em 0;
  color: transparent;
  user-select: none;
  background-clip: text;
  -webkit-background-clip: text;
}

.rating_stars {
  font-size: 1.5em;
  width: fit-content;
  height: 1.5em;
  position: absolute;
  left: 0;
  top: -60%;
  padding: 0;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.review:nth-child(1) {
  margin-top: 0;
}

.comment span {
  font-weight: 500;
  color: #fd705d;
}

.review-delete {
  padding: 0.1em 0.5em;
  font-size: 0.7em;
  border: 1px solid #bb2d3b;
  color: #bb2d3b;
  border-radius: 0.2em;
  position: absolute;
  top: 1em;
  right: 0.5em;
  background: none;
}

.reviews-modal {
  min-height: 450px;
  height: 70vh;
  margin-bottom: 1em;
  position: fixed;
  width: 90vw;
  max-width: 800px;
  border-radius: 1em;
  padding: 3em 1em 1.5em;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  display: none;
  z-index: 5;
  border: 1px solid #d3d3d3;
}

.modal-cover {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 5;
}

.reviews-modal h2 {
  width: 100%;
  padding-bottom: 1em;
}

.modal-review {
  overflow-y: scroll;
  height: calc(100% - 2em);
  width: 100%;
  padding-right: 0.5em;
}

.modal-review::-webkit-scrollbar {
  width: .8em;
} 
.modal-review::-webkit-scrollbar-track {
  background: linear-gradient(90deg, rgba(196, 196, 196, 0) 46.67%, #000000 51.35%, rgba(196, 196, 196, 0) 57.08%);
} 
.modal-review::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

.show-reviews input {
  position: absolute;
  opacity: 0;
}

#show-radio:checked ~ .reviews-modal {
    display: block;
}

#show-radio:checked ~ .modal-cover {
  display: block;
}

.show-reviews {
  cursor: pointer;
  padding: 0.5em;
  border-radius: 0.3em;
  border: 2px solid #000;
  display: inline-block;
  margin-bottom: 1em;
}

.hide-reviews {
  position: absolute;
  top: 0.5em;
  left: 1em;
  cursor: pointer;
  font-size: 1.2em;
}
/* review form  */
.review-form_container {
  padding: 1em 0.5em; 
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 0.2em;
  user-select: none;
}

.review-form label {
  margin-bottom: 0.5em;
  display: inline-block;
  font-size: 1.05em;
  font-weight: 500;
}

.slider-input {
  background-clip: text;
  -webkit-background-clip: text;
}

#star-range {
  width: fit-content;
  font-size: 2.5em;
  color: transparent;
  background: #afb8c1;
  cursor: pointer;
  background-clip: text;
  -webkit-background-clip: text;
}

.review-form_input {
  width: 100%;
  border: 1px solid #ccc;
}

.review-form textarea {
  border-radius: 0.3em;
  padding: 0.5em;
}

.review-form textarea:focus {
  background-color: #fff;
  box-shadow: 0px 0px 0px 2px #000;
  outline: none;
  border-radius: 0.3em;
  box-sizing: border-box;
}

.review-form_button,.no-btn {
  border: none;
  background-color: #2a8f60;
  width: 100%;
  margin-top: 0.5em;
  padding: 0.5em 0.5em;
  border-radius: 0.25em;
  font-weight: 600;
  cursor: pointer;
  color: #fff;  
}

/* USER PAGE  */
.profile-page {
  width: 100%;
  min-height: 100vh;
  padding: 1em;
}

.profile-card {
  width: 600px;
  margin:0 auto;
  max-width: 95%;
  position: relative;
}

header {
  width: max-content;
  margin: auto;
}

header,
.profile-info {
  font-size: 1.5em;
}

.profile-info {
  margin-bottom: 2em;
}

.profile-info h2 {
  margin-bottom: 0.8em;
}

svg.bi.bi-envelope-fill,
svg.bi.bi-person-circle {
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.2em;
}

.expandbutton input[type=checkbox] {
  position: absolute;
  left: -500%;
}

.expandbutton label {
  width: 100%;
  cursor: pointer;
  padding: 0.5em 1em;
  font-size: 1.2em;
  box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 15%);
  border-radius: 0.5em;
  display: block;
  position: relative;
  margin: 1em 0;
}

.expandbutton label::after {
  content: '◀';
  position: absolute;
  right: 1em;
}

.mylist {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

.expandbutton input[type=checkbox]:checked ~ label ~ .mylist {
  max-height: 800px;
}

.expandbutton input[type=checkbox]:checked ~ label::after {
  content: '▼';
}

.user-stays {
  max-height: 300px;
  overflow-y: scroll;
}

ul.user-stay,ul.user-booking {
  width: 98%;
  display: flex;
  align-items: center;
  list-style: none;
  text-align: left;
  margin: 1em 0;
  padding: 0.5em;
  border-radius: 0.2em;
  border: 1px solid rgb(0 0 0 / 15%);
  position: relative;
}

ul.user-stay {
  justify-content: space-between;
}

.user-stay .name,
.booking-stay,
.booking-lodge {
  font-size: .9em;
  font-weight: 500;
  width: 40%;
  margin-right: 0.5em;
}

.user-stay .name span,
.booking-stay span {
  font-size: 0.8em;
  opacity: 0.7;
  width: 35%;
}

.user-stay_link {
  text-decoration: none;
  color: #fff;
  background-color: #0d6efd;
  font-size: 0.8em;
  font-weight: 600;
  padding: 0.5em 1em;
  border-radius: 0.4em;
  height: fit-content;
}

button#cancel-btn {
  position: absolute;
  right: 0.5em;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
  color: #dc3545;
  font-size: 2.2em;
  background-color: transparent;
}

button#actDelete-btn {
  margin: 1em 0;
  padding: 0.5em 1em;
}

.confirm-action {
  padding: 0.5em;
  width: 100%;
  border: 1px solid rgb(0 0 0 / 15%);
  border-radius: .5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: #fff;
  box-shadow: 0px 0px 45px 1000px rgb(0 0 0 / 15%);
}

.no-btn {
  margin-left: 1em;
  padding: 0.5em 1em;
}

/* NEW FORM PAGE  */
.listing-form__container {
  width: 100%;
  text-align: center;
  padding: 2em 0;
}

.listing-form__container h1 {
  font-size: 1.5em;
  font-weight: 600;
  margin: 0.5em 0;
}

.listing-form {
  width: 80%;
  max-width: 500px;
  margin-left: 50%;
  margin-bottom: 1.5em;
  transform: translateX(-50%);
  text-align: left;
}

.listing-form__group {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.listing-form__group label {
  width: 100%;
  margin-bottom: 0.5em;
  overflow: hidden;
}

.listing-form_input{
  width: 100%;
  height: 2.5em;
  padding: 0.5em 1em;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0.3em;
}

.listing-form__group .textarea {
   height: auto;
}

.listing-form_input:focus{
  background-color: #fff;
  box-shadow: 0px 0px 0px 1px #000;
  outline: none;
  border-radius: 0.3em;
  border: 1px solid #000;
  box-sizing: border-box;
}

.listing-form__group #price {
  width: 90%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dollar-sign {
  width: 10%;
  background-color: #ccc;
  height: 2.5em;
  border-top-left-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
}

#price-label {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  }

.listing-form__btn {
  border: none;
  background-color: #ff8474;
  padding: 0.5em 0.5em;
  border-radius: 0.25em;
  font-weight: 600;
  cursor: pointer;
  color: #fff;  
}

.listing-form__back-link{
  border-bottom: 2px solid #0d6efd;
  color: #0d6efd;
}
/* DRAG AND DROP IMAGE PAGE  */
.editImages {
  width: 90%;
  max-width: 600px;
  margin: 1em auto;
  position: relative;
}

.editImages h1 {
  font-size: 1.5em;
}

.editImages h1+p {
  font-size: .8em;
  opacity: .5;
  margin-bottom: 1em;
}

.imageList {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

.imageList .imageContainer{
  position: relative;
  margin: .5em;
  height: 150px;
  overflow: hidden;
  border-radius: 0.5em;
  width: 150px;
  max-width: 50%;
}

.imageList .imageContainer img{
   max-width: 100%;
   height: auto;
   min-height: 150px;
}

.imageContainer input[type="checkbox"] {
  position: absolute;
  top: .5em;
  right: .5em;
  width: 1.2em;
  height: 1.2em;
  z-index: 3;
}

.imageContainer input[type="checkbox"]:checked ~ img
 {
  opacity: .5;
}

.post-form input[type="file"]{
  display: none;
}

.dropbox {
    border: 2px dotted #ff8474;
    border-radius: .5em;
    width:  100%;
    min-height: 150px;
    max-width: 100%;
    overflow-x: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    margin: .2em auto 1em;
}
.dragEnter {
  box-shadow: 0 0 0 0.25rem rgb(255 132 116/25%);
  border: 2px solid #ff8474;
}

.dropboxImg {
    width: 150px;
    height: 150px;
    margin: 0.5em;
}

#fileElem {
  display: none;
}

.updatePhoto-btn {
  margin: 1em 0;
}

.editImages .listing-form__back-link {
  position: absolute;
  top: 0.5em;
  right: .5em;
}

/* ERROR PAGE */
.error-page {
  width: 100%;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.error-info {
  text-align: center;
}

.error-info h1 {
  font-size: 7em;
  font-weight: 600;
}

.error-info h2 {
  font-weight: 600;
  font-size: 1.5em;
}

.error-page_link {
  display: inline-block;
  margin: 0.5em;
  padding: 0.2em 0.5em;
}

#home-link {
  text-decoration: underline;
  color: #0d6efd;
  font-size: 1.2em;
   font-weight: 500;
}
#support-link {
   border-radius: 0.2em;
   background-color: 	#F9F7F5;
   border: 1px solid #d3d3d3;
}

/* footer */
footer {
  width: 100vw;
  position: absolute;
  left: 0;
  bottom: 0;
  margin-top: auto;
  background: #eeeeee;
  padding: 0.5em 2em;
}

#footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bi {
  transform: translateY(20%);
}

.bi-heart {
  color: #fc7563;
}
.bi-github {
  color: #000;
}
.bi-twitter {
  color: rgb(29 161 242);
}

/* HOVER MEDIA QUERIES */
@media (hover: hover) {
  .auth:hover.auth::after,
  .profile:hover.profile::after {
    transform: scaleX(1);
  }

  .home #nav-btn-link:hover{
    background: #fff;
    color: #666;
  }

  .stays #nav-btn-link:hover {
    background: #000;
    color: #fff;
  }

  .search-form_submit:hover {
    background: #fc7563;
  }

  .cal-btn:hover {
    color: #ff8474;
    opacity: 1;
  }
  .disabled-btn:hover {
    color: #000;
    opacity: 0.3;
    cursor: not-allowed;
  }
  .gallery-img-container:hover > img {
    transform: scale(1.2);
  }

  .new-form__btn:hover {
    background-color: #fc7563;
  }

  .listing-form__btn:hover {
    background-color: #fc7563;
  }

  .show-link:hover,
  .user-stay_link:hover {
    background-color: #0b5ed7;
  }

  .listing-form__back-link:hover {
    color: #0a58ca;
  }

  #support-link:hover {
    background-color: 	#ececec;
  }

  #home-link:hover {
    color: #0a58ca;
  }

  .review-form_button:hover,
  .no-btn:hover {
    background-color: #198754;
  }

  .update-form__link:hover {
    background-color: #31d2f2;
  }
  
.delete-button:hover {
  background-color: #bb2d3b;
}

.review-delete:hover {
  background-color: #bb2d3b;
  color: #fff;
}

.paginators a:hover,
.carousel_Btn:hover {
  box-shadow: 0px 0px 0px 1px #d3d3d3;
}
.paginators .disabled-btn:hover {
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

.filters label:hover{
  background-color: #d3d3d3;
}

}