/* Custom styling for 3×3 keypad grid */
.keypad-custom {
  padding: 1.5rem;
  background-color: #2D1B12;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
  max-width: 20rem !important;
  margin: 0 auto !important;
}

/* Style for all keypad buttons */
.keypad-custom button {
  height: 4rem !important;
  min-height: 4rem !important;
  width: 100% !important;
  aspect-ratio: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  border-radius: 0.75rem !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

/* Hover effects for regular buttons */
.keypad-custom button:hover {
  background-color: #4A3428 !important;
  border-color: #5D4136 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Active/pressed state */
.keypad-custom button:active {
  transform: translateY(0) !important;
  background-color: #2D1B12 !important;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Special hover for backspace button (last button) */
.keypad-custom button:last-child:hover {
  background-color: #A0522D !important;
  border-color: #CD853F !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Hover effects for plus/minus buttons */
button[style*="marginRight: '1rem'"]:hover,
button[style*="marginLeft: '1rem'"]:hover {
  background-color: #4A3428 !important;
  border-color: #5D4136 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

button[style*="marginRight: '1rem'"]:active,
button[style*="marginLeft: '1rem'"]:active {
  transform: translateY(0) !important;
  background-color: #2D1B12 !important;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}