/* Base styles */
body {
  background-color: #0f172a;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 
 * Estilos adicionais para campos com máscaras
 * Melhora a experiência visual durante a aplicação das máscaras
 */

/* Estilo base para campos com máscara */
input[type="text"]:placeholder-shown,
input[type="tel"]:placeholder-shown {
  font-family: 'Roboto', monospace;
}

/* Animação suave para campos de entrada */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
select,
textarea {
  transition: all 0.2s ease-in-out;
}

/* Responsive form inputs */
@media (max-width: 768px) {

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
    /* Prevents zoom on iOS */
    padding: 0.875rem 1rem;
  }
}

/* Highlight visual quando a máscara está sendo aplicada */
input.mask-active {
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3);
  border-color: #0ea5e9;
}

/* Estilo para campos com erro de validação */
input.mask-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

/* Estilo para campos válidos */
input.mask-valid {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* Animação para mask application */
@keyframes maskApply {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

input.mask-applying {
  animation: maskApply 0.3s ease-in-out;
}

/* Mobile-first responsive design utilities */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .responsive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (min-width: 641px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    gap: 2rem;
  }
}