/* App container for consistent, responsive width */
.container {
  width: min(90vw, 480px);
  margin: 0 auto;
}

/* Make the whole page centered */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  padding: 2rem;
  margin: 0;
  background-color: #9CAF88;
}

/* Form: input + Add side-by-side on small screens */
form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 16px;
}

/* Input */
input[type="text"] {
  padding: 10px;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* Base button style (Add inherits this) */
button {
  padding: 10px 16px;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  height: 42px; /* ensure equal height across buttons */
}

/* Add button (Green) */
#addButton {
  background-color: #45532b;
  color: white;
}
#addButton:hover {
  background-color: #435a34;
}

/* Row for Clear + Undo underneath */
.button-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Equal width for Clear + Undo within their row */
#clearButton,
#undoButton {
  flex: 1;
}

/* Colors for Clear and Undo */
#clearButton {
  background-color: #8B3A3A; /* red-ish */
  color: white;
}
#clearButton:hover {
  background-color: #ff4d4d;
}

#undoButton {
  background-color: #D4A017; /* yellow-ish */
  color: black;
}
#undoButton:hover {
  background-color: #ffbb33;
}

/* Grocery list styling */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  background-color: white;
  border: 1px solid #ccc;
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: 5px;
  transition: all 0.3s;
}
li.checked {
  color: white;
  font-weight: bold;
  text-decoration: line-through;
  background-color: #435a34;
}

/* --- Responsive behavior for larger screens --- */
/* On wider screens, stack all three buttons full-width in one column */
@media (min-width: 768px) {
  /* Put Add beneath the input and make it full width */
  form {
    grid-template-columns: 1fr;
  }
  #addButton {
    width: 100%;
  }

  /* Stack Clear and Undo as full-width buttons too */
  .button-row {
    flex-direction: column;
  }
  .button-row button {
    width: 100%;
  }
}