/* 🌸 Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 🌷 Fullscreen Background */
body {
  font-family: "Comfortaa", cursive;
  background: #ffb997;
  color: #5e4b56;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow-y: auto;
  padding: 20px;
}

/* 🌺 Main Container */
.container {
  width: 90%;
  max-width: 600px;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
}

/* 🔥 Hide All Sections Initially */
#quiz-container,
#result-container,
#thank-you-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#start-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 🌸 Start & Thank You Illustration */
#start-illustration {
  max-width: 70%;
  margin-bottom: 15px;
}

/* 🎀 Title Styling */
h1 {
  font-size: 26px;
  margin-bottom: 10px;
}

p {
  font-size: 16px;
  margin-bottom: 20px;
}

/* 🌸 Question Image Styling */
#question-image {
  max-width: 90%;
  height: auto;
  margin-bottom: 20px; /* Increased space between image and question */
}

/* 🌸 General Button Styling */
button {
  font-family: "Comfortaa", cursive;
  width: 100%;
  max-width: 400px;
  padding: 14px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

/* 🔥 Main Buttons (Start, Get Flowers, Restart) */
#start-btn,
#get-flowers-btn,
#restart-btn {
  background-color: #8b3f63;
  color: white;
}

#start-btn:hover,
#get-flowers-btn:hover,
#restart-btn:hover {
  background-color: #6b2445;
  transform: scale(1.05);
}

/* 🌸 Choice Buttons */
.choice-btn {
  background-color: #fdf6f9;
  color: #8b3f63;
  border: 2px solid #8b3f63;
  margin: 15px 0; /* Increased spacing */
  padding: 14px;
  width: 100%;
  max-width: 350px;
  border-radius: 12px;
  text-align: center;
  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.choice-btn:hover {
  background-color: #8b3f63;
  color: #fdf6f9;
  transform: scale(1.05);
}

/* 🌷 Result Image */
#flower-image {
  width: 80%; /* Increased from 60% */
  max-width: 250px; /* Increased from 170px */
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 25px;
}

/* 🌸 Result Form Container */
#flower-form {
  background: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  width: 95%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 15px;
}

/* 🌼 Form Input Fields */
#flower-form input {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border-radius: 10px;
  border: 2px solid #8b3f63;
  text-align: left;
  background: #f9f9f9;
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out;
}

#flower-form input:focus {
  border-color: #6b2445;
  outline: none;
  background: white;
}

/* 💌 Get Flowers Button */
#get-flowers-btn {
  width: 100%;
  max-width: 350px;
  padding: 14px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
  text-align: center;
}

#get-flowers-btn:hover {
  background-color: #6b2445;
  transform: scale(1.05);
}

/* 🔄 Restart Button */
#restart-btn {
  width: 100%;
  max-width: 350px;
  padding: 14px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
  text-align: center;
}

#restart-btn:hover {
  background-color: #6b2445;
  transform: scale(1.05);
}

/* 🌼 Style the Textarea */
#flower-form textarea {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border-radius: 10px;
  border: 2px solid #8b3f63;
  text-align: left;
  background: #f9f9f9;
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out;
  resize: none; /* Prevent resizing */
  font-family: "Comfortaa", cursive;
  min-height: 60px; /* Match input height */
}

/* 🌸 Textarea Focus Effect */
#flower-form textarea:focus {
  border-color: #6b2445;
  outline: none;
  background: white;
}

/* 📱 Mobile Responsiveness */
@media (max-width: 480px) {
  h1 {
    font-size: 22px;
  }

  p {
    font-size: 14px;
  }

  #start-illustration {
    max-width: 80%;
  }

  button {
    font-size: 16px;
    padding: 12px;
  }

  #question-image {
    max-width: 95%;
    margin-bottom: 25px; /* More spacing for mobile */
  }

  .choice-btn {
    max-width: 300px;
    font-size: 14px;
    padding: 12px;
  }

  #flower-image {
    margin: 25px;
    max-width: 200px; /* increased for mobile*/
  }

  #flower-form {
    padding: 18px;
    max-width: 360px;
  }

  #flower-form input {
    font-size: 14px;
    padding: 10px;
  }

  #get-flowers-btn,
  #restart-btn {
    max-width: 300px;
    padding: 12px;
  }
}