/*  *{
  box-sizing: border-box; makes the width and height of an element include its padding 
  and border, ensuring that the element fits within the specified dimensions. 
  Can simplify layout calculations & avoid sizing issues.
} */
body {
    cursor: url('images/icons8-cat-footprint-24.png'), auto;
}
li{
  list-style-type: none;
}
/**** LISTING SECTION ****/
.nav-bar{ 
    display: flex;
    padding: 8px 16px;
}
.nav-bar ul{
    width: auto;
    /* border: 1px solid black; */
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.nav-bar a{
    /* border: 1px solid black; */
    display: block;
    color: black;
    padding: 8px;
    float: left;
    text-decoration: none;
}
#website-title{
    /* border: 1px solid black; */
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: center; 
    justify-self: center;
    color: black;
    text-decoration: none;
}
#add-listing-button{
    border: 0;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    max-width: 480px;
    min-height: 40px;
    padding: 0px 20px;
    background-color: rgb(40, 115, 220);;
    color: #ffffff;
    cursor: pointer;
}
#hero-section{
    display: flex;
    height: 80vh;
    width: 100vw;
    margin: 0px 16px 64px;
}
#hero-section-left-content{
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center; 
}
#hero-section-left-content h1{
    font-size: 38px;
    justify-items: center;
}
.search-object{
    display: flex;
    align-items: center;
}
#open-filters-link{
  display: inline-block; /*so margin works*/
  margin-top: 10px;
  text-decoration: none;
  font-size: small;
}
/* #search-bar{
    margin-top: 8px;
    margin-left: auto;
    justify-content: center;
    width: 300px;
    height: 24px;
} 

Switched to Tom Select for the search bar
*/
.ts-wrapper {
  width: 300px;
  margin-top: 8px;
  margin-right: 8px;
}
#search-button{
    margin-top: 8px;
    margin-right: auto;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
#hero-section-right-content {
    flex: 1;
}
#hero-section-right-content img{
    height: 100%;
    width: auto;
}
.row{
    display: flex;
    align-items: center;
}
.single-column{
    display: flex;
    flex-direction: column;
}
#listing-container-description{
    text-align: center;    
}
.no-listings-notice {
    font-size: 1.2rem;
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    color: black;
}
.hidden {
    display: none;
}
/* .main-listing-container{
    display: flex;
    flex-direction: column;
} */
/*.listing-row-container{
    width: 70%;
    margin: 24px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 24px;
}*/
.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px;
}

@media screen and (max-width: 600px) {
  .listing-grid {
    grid-template-columns: 1fr;
  }
}

.listing{
    flex: 0 0 calc(33.3% - 16px);
    max-width: 0 0 calc(33.3% - 16px);
    box-sizing: border-box;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 2%;
    padding-left: 14px;
    padding-right: 14px;
    cursor: pointer;
}
.favorite-icon{
    border: 2px solid white;
    border-radius: 50%;
    background-color: #ffffff;
    padding: 3px;
    position: absolute;
    height: 20px;
    width: 20px;
    top: 10px;
    right: 10px;
}
.listing-text{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
.listing-text p{
    margin-top: 0;
    margin-bottom: 0;
}
.listing-text h3{
    margin-top: 5px;
    margin-bottom: 5px;
}

/**.listing-details{
}**/

.icon{
    height: 40px;
    width: 40px;
    margin-right: 10px;
}
.property-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2%;
    display: block;
}
/* .property-image{
    border-radius: 2%;
    width: 100%;
    height: auto;
    object-fit: cover;
} */
.pagination{
    text-align: center;
    justify-items: end;
    padding-top: 50px;
    padding-bottom: 100px;
}
.pagination a{
    display: inline-block;
    border: 1px solid black;
    color: black;
    text-decoration: none;
    padding: 8px 15px;
}
.pagination a.active{
    background-color: #ffd700;
}

/**** WAVE HEADER 
.wave-header{
    min-height: 100vh;
    width: 100%;
    position: relative;
}
svg{
    position: absolute;
    bottom: 0;
    left: 0;
}****/

/**** RESOURCES SECTION ****/
.two-column-container{
    display: flex;
}
#resources-title-div{
    display: flex;
    flex: 10%;
    padding: 8px;
}
.handout-container{
    display: flex;
    flex: 50%;
    padding: 16px;
}
.handout-link-section{
    display: flex;
    border: 1px solid black;
    margin: 16px;
}
.title{
    display: flex;
    margin: 10px auto;
    padding-top: 24px;
    padding-bottom: 50px;
    align-items: center; 
    justify-content: center; 
}
#resources-title{
    writing-mode: vertical-lr;
    text-orientation: sideways;
    padding-left: 16px;
    font-size: 10vw;
}
/**** LOGIN PAGE ****/
.centered-text{
    text-align: center;
    margin: 0px auto;
}
.single-item-container{
    display: flex;
    margin: 0px auto;
}
#login-submit-button{
    height: auto;
    width: 300px;
    margin: 42px 16px 16px;
    padding: 8px 0px 8px;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    color: black;
    background-color: white;
    border: 1px solid rgb(109, 109, 109);
    cursor: pointer;
}
#facebook-login-button{
    height: auto;
    width: 300px;
    font-size: 16px;
    padding: 8px 0px 8px;
    text-align: center;
    border-radius: 2px;
    text-decoration: none;
    color: white;
    background-color: rgb(53, 39, 243);
    border: 1px solid rgb(53, 39, 243);
    cursor: pointer;
}
/** login form **/
#login-heading{
    margin-bottom: 20px;
    color: rgb(41, 40, 40)
}
#login-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 40px 60px;
    margin: 10vh auto;
    width: fit-content;
    font-size: 16px;
    background-color: rgb(239, 244, 247);
}

#login-form input {
    margin: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    width: 300px;
    height: 30px;
    font-size: 14px;
}
/**register form**/
#register-heading{
    margin-bottom: 20px;
    color: rgb(41, 40, 40)
}
/* #register-heading{
    margin-top: 50px;
    margin-bottom: 30px;
} */
#register-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 40px 60px;
    margin: 10vh auto;
    width: fit-content;
    font-size: 16px;
    background-color: rgb(239, 244, 247);
}
#register-form input {
    margin: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    width: 300px;
    height: 30px;
    font-size: 14px;
}
#register-submit-button{
    height: auto;
    width: 300px;
    margin: 42px 16px 16px;
    padding: 8px 0px 8px;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    color: black;
    background-color: white;
    border: 1px solid rgb(109, 109, 109);
    cursor: pointer;
}
/* #register-form{
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(96, 162, 255);
    padding: 100px;
    margin: 10px auto;
    width: 25%;
    height: 100px;
    background-color: rgb(96, 162, 255);
} */

/**switching**/
#register-body{
    display: none;
}
#login-body{
    display: block;
}
#register-link{
    color:blue;
    text-decoration-line: underline;
    cursor: pointer;
}
#login-link{
    color:blue;
    text-decoration-line: underline;
    cursor: pointer;
}

/**** LISTING FORM PAGE ****/
.add-a-listing-page-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgb(239, 244, 247);
}
#add-a-listing-title{
    text-align: center;
}
.listing-form-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 25px 100px 8px;
    margin: 0 auto;
    width: auto;
    height: fit-content;
    font-size: 16px;
    background-color: white;
}

.form-group{
    display: flex;
    margin: 16px auto;
    justify-content: right;
    align-items: center;
    width: 400px;
}
.input-field{
    margin-left: 8px;
    width: 200px;
}

 #listing-submit-button-row{
    display: flex;
 }
 #submit-listing-button{
    height: auto;
    width: 300px;
    margin: 16px auto;
    padding: 8px 0px 8px;
    justify-self: center;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    color: black;
    background-color: white;
    border: 1px solid rgb(109, 109, 109);
    cursor: pointer;
}
@media (max-width: 600px) {
  .listing-form-container {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .form-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 12px 0;
  }

  .checkbox-group{
    flex-direction: row;
  }

  .form-group label {
    margin-bottom: 6px;
    text-align: left;
  }

  .input-field {
    width: 100%;
    margin-left: 0;
  }

  #submit-listing-button {
    width: 100%;
  }
}

/** Listing Details Page **/

#listing-display-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* REMOVE or override the next line: */
    /* align-items: center; */
    align-items: stretch; /* Or remove the line entirely */
    margin: 0px auto;
    padding: 32px;
}

#listing-details-page-location{
    margin: 0px;
}

#listing-display-container p {
    margin: 8px 0;
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;  /* Ensure they stretch the full width of the container */
    box-sizing: border-box;
}
#listing-details-page-two-columns{
    display: flex;
}

#listing-details-page-address-title{
    margin: 16px auto;
}

#listing-display-container h3 {
  background-color: #f2f2f2; 
  width: 100%;
  padding: 10px 16px;
  margin: 20px 0 10px;
  font-size: 1.2em;
  font-weight: bold;
  box-sizing: border-box;
}
#listing-details-page-basic-details-section{
    flex: 1;
    align-self: center;
    text-align: center;
}
#listing-details-page-price{
    font-size: 1.5em;
}
#bed-bath-footage-rack{
    display: flex;
}


#listing-display-container img{
    align-self: center;
    height: 60vh;
    width: auto;
}

.slider {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  overflow: hidden;
}

.slider-images-container {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.slider-images-container img {
  max-width: 100%;
  max-height: 100%;
  display: none;
  object-fit: contain;
}

.slider-images-container img.active {
  display: block;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  padding: 10px 16px;
  font-size: 24px;
  cursor: pointer;
  z-index: 1;
  border-radius: 50%;
}

.slider-btn.prev {
  left: 50px;
}

.slider-btn.next {
  right: 50px;
}

.slider-btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.slider-wrapper {
  position: relative;
  display: inline-block;
}

.slider-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  overflow: hidden;
}

.slider-dots {
  display: flex;
  justify-content: center;
  /* margin-top: 12px; */
  gap: 8px;
}

.slider-dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: background-color 0.3s;
}

.slider-dot.active {
  background-color: #555;
}

#listing-details-page-subsections{
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
}

#delete-listing-button{
    margin: 16px;
    padding: 8px;
    border-radius: 5%;
}

#map {
    align-self: center;
    margin: 32px;
    height: 350px; /*doesn't show up unless it has specific pixel values (not % or vh or auto etc)*/
    width: 500px;
}

@media (max-width: 768px) {
  #listing-details-page-two-columns {
    flex-direction: column;
    align-items: center; 
  }

  #listing-details-page-basic-details-section {
    text-align: left;
    width: 100%;
    padding: 0 16px;
  }

  .slider {
    width: 100%;
    max-width: 100%;
  }

  .slider-images-container {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .slider-btn.prev {
    left: 20px;
  }

  .slider-btn.next {
    right: 20px;
  }

  .slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/**Account page**/
#user-info-container{
    text-align: center;
}
#user-info-container h3{
    margin: 0px;
}
#user-items-container{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
#user-items-container h4{
    margin: 0px;
    padding-left: 38px;
}
#user-image{
    margin-top: 16px;
    object-fit: cover;
    height: 100px;
    width: 100px;
    border-radius: 50%;
}
/*set dynamically in setAccountPage - for user's active listings*/
.user-listings-list{
    margin: 0px;
    padding: 0px;
}
.user-listings-container{
    padding: 0px;
    display: flex;
    align-items: center;
    margin: 0px;
}
.user-listings-container p{
   padding-right: 16px;
   text-decoration: none;
}
.user-listings-container a{
    text-decoration: underline;
    padding-right: 16px;
    cursor: pointer;
 }

/**BETA TESTING HOMEPAGE OVERLAY**/
  dialog {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    padding: 20px + 10px;
    position: relative;
  }
  dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
  }
  /* Close button */
  #close-dialog {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
  }
  #dialog-image {
    max-width: 10%;
    max-height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  /*MailChimp form*/
  #mc_embed_signup{
    max-width: 100%;
    padding: 10px;
  }
 
  /** Mobile (and tablet) responsive **/
  

  /* @media (max-width: 1440px){

  } */
  /* @media (max-width: 1024px){
    
  } */
  @media (max-width: 600px){
    /* 1) Adjust navbar and site name probably should go beneath it
        [I guess change "Doghouse" from being a list element in the navbar ul to
        being a separate element underneath the navbar]

       2) View one listing card at a time
       3) Maybe make dog picture smaller and maybe put just beneath the
          site title 
       4) Maybe make main text smaller?   
       5) In Resources section, each section can be stacked one on top
         of the other (Handouts, Templates then Guides)
       6) In general for images, try setting max width to 100% and height to auto 
       and also try to use relative units like percentages, em and rem (or can
       even use calc function and things like vw and vh)
       7) Using things like flexbox
       8) Adjust things like line height and spacing based on the viewport
       9) As the screen gets smaller, you can consider reducing margin and padding
    */  
  }

  /*About Us Page*/
  #about-us-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
  }
  .about-us-heading{
    margin-bottom: 10px;
    text-align: center;
  }
  .about-us-text{
    text-align: left;
    font-size: 16px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  #buy-me-a-coffee-button-section{
    margin-top: 40px;
  }