/* Add styles here */

  
/* Import Google Sans font */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap');

/* Apply Google Sans font to all elements */
body {
  font-family: 'Google Sans', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  text-align: center; 
  width: 90%; 
  max-width: 800px;
  padding: 20px; 
}

.input-container {
  display: flex;
  flex-direction: column;
  align-items: center; 
  width: fit-content; /* Prevents the container from stretching full width */
}

#ideaInput {
  width: 100%; 
  height: 150px; 
  font-size: 1.8em; 
  font-family: 'Google Sans', sans-serif; 
  padding: 20px 25px; /* 20px top/bottom, 25px left/right */
  padding-right: 25px; /* Increased by 50px */
  background: linear-gradient(to bottom, rgba(0, 123, 255, 0.2), rgba(0, 86, 179, 0.2), rgba(255, 192, 203, 0.2));
  color: black; 
  border: none; 
  border-radius: 15px 50px 30px; /* Slightly rounded, random shape */
  text-align: center; /* Center align the text inside the box */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  overflow-wrap: break-word; /* Allow long words to break and wrap */
}

/* Remove any focus styles */
#ideaInput:focus {
  outline: none;
}

#submitButton {
  background-color: black;
  color: #fff; 
  padding: 12px 20px;
  border: none;
  border-radius: 25px; /* Rounded corners */
  cursor: pointer;
  transition: background-color 0.3s ease; 
  position: relative; /* Position relative to its parent */
  bottom: 0px; /* Ensure it sticks to the bottom */
  right: 0px;
  margin-top: 20px; /* Increased margin for more vertical space */
}

/* Pulse animation for loading state */
#submitButton.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1); 
  }
  50% {
    transform: scale(1.05); 
  }
  100% {
    transform: scale(1); 
  }
}

#submitButton:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

/* Basic styles for the results container */
#resultsContainer {
  display: none; /* Hide by default */ 
  padding: 20px; /* Add padding */
  margin: 30px auto 0px; /* For horizontal centering */
  width: fit-content;
  border-radius: 8px; /* Add a subtle border */
  text-align: left; /* Left align all content within resultsContainer */
}

#resultsContainer h2,
#resultsContainer h3,
#resultsContainer h4,
#resultsContainer h5 {
  color: #333; /* Darker title color */
  margin-bottom: 10px;
}

#resultsContainer p,
#resultsContainer ul,
#resultsContainer li {
  color: #666; /* Slightly lighter text color */
  line-height: 1.6; /* Improved line spacing */
}

#resultsContainer ul {
  padding-left: 20px; /* Add some left padding to lists */
  list-style-type: disc; /* Use disc bullet points */
}

#resultsContainer li {
  margin-bottom: 8px; /* Add spacing between list items */
}

/* Style for the idea name */
#resultsContainer h2 {
  font-size: 1.8em;
  margin-bottom: 15px; 
}

/* Style for the Effectiveness Score */
#resultsContainer h3 {
  font-size: 1.4em;
  margin-bottom: 15px;
}

/* Styles for the league table */
#leagueTable {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Match the box shadow of resultsContainer */
  width: 100%;
  margin-bottom: 20px; /* Add margin-bottom to the leagueTable */
} 

#leagueTable table {
  width: 100%; /* Make sure the table takes full width */
}

#leagueTable th, #leagueTable td {
  text-align: left; /* Left align text in all cells */
  padding: 10px; /* Add padding for spacing */
}

#leagueTable th {  
  background-color: #f0f0f0; /* Light gray background for header */
}

#leagueTable th:nth-child(1), /* Rank column */
#leagueTable td:nth-child(1) {
  width: 5%; /* Adjust as needed */
}

#leagueTable th:nth-child(3), /* Score column */
#leagueTable td:nth-child(3) {
  width: 10%; /* Adjust as needed */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .container {
    padding: 10px; 
  }

  #ideaInput {
    font-size: 1.2em; 
    height: 120px; 
  }

  #submitButton {
    font-size: 0.9em; 
    padding: 10px 15px; 
  }

  #resultsContainer,
  #leagueTable {
    width: 100%; /* Maintain 100% width on smaller screens by default */
  }

  #resultsContainer {
    width: 90%; /* Adjust width for smaller screens */
  }

  #resultsContainer h2 { 
    font-size: 1.5em; 
  }

  #resultsContainer h3,
  #resultsContainer h4,
  #resultsContainer h5 {
    font-size: 1.2em; 
  }
}

/* Background blur class */
.background-blur {
  backdrop-filter: blur(5px); /* Adjust blur intensity as needed */
  -webkit-backdrop-filter: blur(5px); /* For Safari support */
}

/* Apply blur to leagueTable and resultsContainer */
#leagueTable, #resultsContainer {
  background-color: rgba(255, 255, 255, 0.8); /* Add a semi-transparent background */
  /* Center the table horizontally */
  display: table; /* Or inline-table if needed */
  margin: 0 auto; /* Auto left and right margins for centering */
}

#leagueTableContainer h2 { 
  text-align: center; 
  margin-bottom: 10px; 
}

#leagueTableContainer { 
  width: 100%; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

/* Style for the spacer div */
#spacer {
  height: 20px;
}

/* Hyperlink styles */
a {
  color: #4285F4; /* Google Blue */
  text-decoration: none; /* Remove underline */
}