/* Keypad styles - Large touch targets for kids */

.keypad {
  display: grid;
  grid-template-columns: repeat(3, var(--keypad-button-size));
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.keypad-btn {
  width: var(--keypad-button-size);
  height: var(--keypad-button-size);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xl);
  font-weight: 700;
  font-family: var(--font-family);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Number buttons */
.keypad-btn.number {
  background: linear-gradient(145deg, var(--color-primary-light), var(--color-primary));
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}

.keypad-btn.number:hover,
.keypad-btn.number:focus {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.keypad-btn.number:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Zero button - spans 1 column */
.keypad-btn.zero {
  grid-column: 2;
}

/* Backspace button */
.keypad-btn.backspace {
  background: linear-gradient(145deg, #ffccbc, #ff8a65);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.keypad-btn.backspace:hover,
.keypad-btn.backspace:focus {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.keypad-btn.backspace:active {
  transform: scale(0.95);
}

/* Submit button */
.keypad-btn.submit {
  background: linear-gradient(145deg, #81d4fa, #29b6f6);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-lg);
}

.keypad-btn.submit:hover,
.keypad-btn.submit:focus {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.keypad-btn.submit:active {
  transform: scale(0.95);
}

.keypad-btn.submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Pressed state visual feedback */
.keypad-btn.pressed {
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Landscape adjustments */
@media (min-width: 768px) {
  :root {
    --keypad-button-size: 80px;
  }

  .keypad {
    gap: var(--spacing-md);
  }
}

/* Large screens */
@media (min-width: 1024px) {
  :root {
    --keypad-button-size: 90px;
  }

  .keypad-btn {
    font-size: var(--font-size-xxl);
  }
}

/* Touch feedback for mobile */
@media (hover: none) {
  .keypad-btn:active {
    transform: scale(0.92);
  }
}