/* General Styles */
body, h2 {
  font-family: 'Inter', Arial, sans-serif;
  margin: 10px;
  color: #333;
}

/* Title Name */
h1 {
  color: #fcfcfc;
  margin-right: 20px;
}

/* Header Styles */
header {
  backdrop-filter: blur(5px); /* Adds blur */
  background-color: #0400ff8c;
  text-align: center;
  padding: 10px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* New styles for header content */
#headerContent {
  display: flex; 
  justify-content: space-between; /* Distributes children */
  align-items: center;  /* Vertically aligns children */
  width: 100%;  /* Sets width */
}

/* Weather Widget Styles */
#weatherWidget {
  width: 220px;
  backdrop-filter: blur(10px);
  background-color: #4480b89c;
  border-radius: 12px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 10px;
  text-align: center;
  font-weight: bold;
  margin-left: 10px;
}

/* Common Styles for Boxes */
#weatherBox, #titleBox {
  padding: 10px;
  color: #000000;
  border-radius: 5px;
  font-weight: 700;
}

#locationInfo {
  font-size: 14px;
  color: #ebebeb;
  margin-bottom: 10px;
}

/* Weather Details Styles */
#weatherDetails {
  display: flex;
  color: #ebebeb;
  justify-content: center;
}

/* Weather Icon and Temperature Value */
#weatherIcon, #temperatureValue {
  margin-right: 5px;
}

#sunInfo {
  font-size: 16px;
  margin-left: 15px;
  justify-content: center;
  font-weight: 700;
}

/* Question Section Styles */
#questions {
  backdrop-filter: blur(10px); 
  background-color: #e0fffa;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
}

#part1, #predictedWeather {
  background-color: #add2fd;
  padding: 15px;
  width: 45%;
  border-radius: 5px;
  box-sizing: border-box;
}

/* Dropdown Styles */
input {
  backdrop-filter: blur(10px); 
  width: 90%;
  padding: 3px;
  margin: 8px;
  font-size: 16px;
  border-radius: 4px;
}

h3 {
  backdrop-filter: blur(10px); 
  background-color: #e0fffa;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
}

h4{
  margin-left: 10px;
  margin-top: 0px;
  font-size: 14px;
  font-weight: 500;
}

h5 {
  margin-left: 15px;
  font-weight: 700;
  font-size: 15px;
}

h6 {
  font-size: 20px;
  backdrop-filter: blur(10px); 
  background-color: #e0fffa;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
}


/* Button Styles */
button {
  background-color: #ff2f00da;
  color: rgb(255, 255, 255);
  padding: 11px 13px;
  font-size: 14px;
  border-color: whitesmoke;
  cursor: pointer;
  margin: 20px auto;
  display: block;
  font-weight: bold;
}

.tourism-box {
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  box-shadow: 10px;
  font-weight: bold;
  border-radius: 5px;
  margin: 5px;
  display: inline-block;
}

.tourism-box.busy {
  background-color: red;
  color: white;
}

.tourism-box.moderate {
  background-color: orange;
  color: black;
}

.tourism-box.low {
  background-color: green;
  color: white;
}

.tourism-box.inactive {
  background-color: grey;
  color: white;
}

#reccomendation {
  width: 100%;
}

#placeRecommendation {
  font-family: 'Arial', sans-serif;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background-color: #e0fffa;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

#placeRecommendation h2 {
  margin: 0
}

#filterCategory {
  width: 200px;
  height: 100px;
}

.recommendation-category {
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  flex: 1;
}

.recommendation-category h6 {
  margin: 0;
  background-color: #00ff8879;
  color: black;
  border-radius: 8px 8px 0 0;
}

.recommendation-item {
  padding: 2px 10px;
  font-size: 20px;
  border-bottom: 1px solid #f1f1f1;
}

.recommendation-item:last-child {
  border-bottom: none;
}

.headerWithFilter {
  display: flex;
  align-items: center;
  width: 100%;
}

.categories-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 columns */
  gap: 20px;
  width: 100%;
}

.title-and-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Dropdown Button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: rgb(3, 110, 71);
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  margin-top: 230px;
  margin-right: 30px;
  right: 0;  /* Align to the right edge of the parent */
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
  overflow-y: auto;  /* Add scroll when content overflows */
  max-height: 300px;  /* Limit height */
}

/* Links inside the dropdown */
.dropdown-content a{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Show the dropdown content */
.show {
  display: block;
}

.checkbox-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.checkbox-item {
  display: flex;
  align-items: center;
}

.button-container {
  display: flex;
  align-items: center;
  gap: 10px;  /* Space between buttons */
}

#resetFilterButton {
  background-color: #808080;  /* Gray background */
  color: #ffffff;  /* White text */
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;  /* Smooth transition for background color */
}

/* Hover effect */
#resetFilterButton:hover {
  background-color: #696969;  /* Darker gray */
}

#resetFilterButton:disabled,
#getRecommendationButton:disabled {
  background-color: gray;
  cursor: not-allowed;
}