.calculator-container {
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: 50px auto;
  border: 1px solid #ccc;
  padding: 10px; /* Added padding to the container */
  border-radius: 0.25rem; /* Slightly rounded corners for the container */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  @media (max-width: 600px) {
    width: 90%;
    margin: 20px auto;

    .buttons-grid button {
      height: 50px;
      font-size: 1.1em;
    }
  }

  @media (max-width: 400px) {
    width: 95%;
    margin: 10px auto;

    .buttons-grid button {
      height: 45px;
      font-size: 1em;
    }
  }
}

.display-area {
  padding: 10px;
  background-color: var(--clr-global-app-background); /* Use Clarity background variable */
  border-bottom: 1px solid var(--clr-global-borders); /* Use Clarity border variable */
}

.display-area input {
  width: 100%;
  height: 40px;
  font-size: 1.8em; /* Increased font size */
  padding: 5px 10px; /* Added padding */
  text-align: right;
  border: 1px solid var(--clr-global-borders); /* Added subtle border */
  background-color: var(--clr-global-input-background); /* Use Clarity input background */
  overflow-x: auto; /* Enable horizontal scrolling for overflow */
  white-space: nowrap; /* Prevent text wrapping */
  border-radius: var(--clr-global-border-radius); /* Use Clarity border-radius */
}

.buttons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--clr-global-borders); /* Use Clarity border color for gaps */
}

.buttons-grid button {
  height: 60px;
  font-size: 1.2em;
  /* Removed border-radius: 0; to allow Clarity default styling */
  transition: background-color 0.2s ease; /* Smooth transition for hover */

  &:hover {
    filter: brightness(90%); /* Slightly darken on hover */
  }
}

.zero-button {
  grid-column: span 2;
}

.equals-button {
  grid-row: span 2;
}
