/* Basic reset and responsive styling */
body,
h1,
h2,
form,
input,
button,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'monospace';
}

body {
  background-color: #f3f3f3;
  /* Light grey background for a subtle look */
  color: #333;
  /* Dark grey color for text for better readability */
}

header {
  background-color: #ff9800;
  /* Warm orange for a vibrant header */
  color: #fff;
  text-align: center;
  padding: 1rem 0;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

#typeFilter{
  margin-left: 1rem;
}

footer {
  background-color: #3f51b5;
  /* Deep blue color for footer */
  color: #fff;
  padding: 1rem;
  text-align: center;
}

footer form {
  max-width: 600px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
}

footer input,
footer textarea {
  margin-bottom: 1rem;
  padding: 0.5rem;
  border-radius: 5px;
}

footer button {
  padding: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  background-color: #f44336;
  /* Bright red for the submit button */
  color: white;
  border: none;
}



.tag-label {
  /* Example styles */
  display: block;
  margin-left: 5px;
  cursor: pointer;
  color: #333;
  /* Example color */
  font-size: 12px;
  /* Example font size */
}


.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  background-size: cover;
  background-position: center;
  min-height: 100px;
  /* Adjust based on your design preference */
}


select {
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 5px;
  background-color: white;
}

select:focus {
  border-color: #007bff;
  /* Highlight color when focused */

}

#searchField,
#searchQuery {
  margin: 5px;
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ddd;
  /* Light border */
  border-radius: 5px;
  /* Rounded corners */
  outline: none;
  /* Removes the outline */
}

#searchField:focus,
#searchQuery:focus {
  border-color: #007bff;
  /* Highlight color when focused */
}

#searchField {
  cursor: pointer;
}

/* Optional: Responsive adjustments */
@media (max-width: 600px) {
  .search-container {
    flex-direction: column;
    padding: 10px;
    /* Adjust padding for the search container */
  }
}

#searchQuery::placeholder {
  color: #aaa;
  /* Lighter text color for the placeholder */
  opacity: 1;
  /* Fully opaque */
}

#searchField,
#searchQuery {
  transition: border-color 0.3s ease-in-out;
}

#places-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 1rem;
  padding-top: 0.5rem;
  justify-content: center;
  /* Center grid items horizontally */

}

.card {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
  /* Adjust height as necessary, or remove for auto-height based on content */
  padding: 1rem;
  /* Padding inside cards */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for depth */
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}


/* Optional: Add styles for the expanded state and transition effects */
.card-content {
  transition: transform 0.3s ease;
}

.card:hover .card-content {
  transform: translateY(-5px);
}

.tag-container {
  display: flex;
  /* Use flex layout for the tags container */
  flex-wrap: wrap;
  /* Allow tags to wrap to the next line */
  gap: 5px;
  /* Add a little space between tags */
  align-items: center;
  /* Align tags vertically */
  margin-top: 5px;
  /* Add some space above the tags */
}

.tag-chip {
  background-color: #007bff;
  /* Configurable chip background color */
  color: white;
  /* Text color */
  border-radius: 25px;
  /* Rounded corners for chip */
  padding: 5px 10px;
  /* Top/bottom and left/right padding */
  font-size: 0.8em;
  /* Smaller font size */
  cursor: default;
  /* Default cursor to indicate non-interactive */
  user-select: none;
  /* Prevent text selection */
}

/* Hover effect for tags */
.tag-chip:hover {
  background-color: #0056b3;
  /* Darker background on hover */
  color: #fff;
}

.always-visible h3,
.always-visible .location {
  margin: 10px 0;
}

.expandable-content {
  display: none;
  /* Hidden by default, shown on click */
}

/* Responsive design: On larger screens, you might choose to display all content by default */
@media (min-width: 768px) {
  .expandable-content {
    display: block;
    /* Show the expandable content on larger screens by default */
  }

  .expand-collapse-indicator {
    display: none;
  }
}

/* Style for when the card is expanded to indicate active state */
.card.expanded .expandable-content {
  display: block;
}


.expand-collapse-indicator {
  text-align: center;
  margin-top: 10px;
  cursor: pointer;
}

/* If using FontAwesome icons, you might want to add specific styles */
.expand-collapse-indicator i {
  color: #007bff;
  /* Example color */
}


.contact-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  padding: 20px 20px;
  /* Increase padding for larger content */
  background-color: #72b99c;
  color: white;
  border: none;
  border-radius: 50%;
  /* Keeps the circular shape */
  cursor: pointer;
  display: inline-flex;
  /* Allows the button to grow with its content */
  justify-content: center;
  align-items: center;
  font-size: 16px;
  /* Adjust based on your content */
  white-space: nowrap;
  /* Prevents the text from wrapping */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}


@media (max-width: 480px) {

  .intro-section {
    padding: 15px;
    /* Provide more padding */
    text-align: center;
  }

  .intro-section h2 {
    font-size: 1.5rem;
    /* Adjust heading size for better visibility */
  }

  .intro-section p {
    font-size: 1rem;
    /* Increase paragraph font size for readability */
    margin: 10px auto;
    /* Ensure sufficient spacing */
  }

  .search-container {
    margin-top: 20px;
    /* Ensure there's space between the intro section and search container */
  }

  .contact-button {
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 16px;
    /* Adjust if you're using text/icon inside the button */
  }


}

.intro-section {
  background: 'IMG20220211132700.jpg' no-repeat center center/cover;
  color: white;
  /* Adjust based on your image's color scheme */
  padding: 20px;
  /* Add padding for spacing */
  text-align: center;
  /* Center the text */
}

.intro-section h2 {
  margin: 0 0 10px 0;
  /* Adjust spacing as needed */
  font-size: 2rem;
  /* Larger font size for the heading */
}

.intro-section p {
  margin: 0 auto;
  /* Center the paragraph */
  width: 80%;
  /* Limit the width of the text for readability */
  font-size: 0.75rem;
  /* Adjust the font size as needed */
}

.intro-section {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://i.ibb.co/n1MS0sd/sunset-cafe.jpg') no-repeat center center/cover;
}