/* Custom styles to complement Tailwind CSS */

/* Form input styles */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  @apply border-gray-300 rounded-md shadow-sm;
  width: 100%;
  padding: 0.5rem;
}

/* Preview card styles */
#previewCard {
  @apply bg-white;
}

#previewName {
  @apply text-xl font-bold text-gray-900;
}

#previewTitle {
  @apply text-gray-600;
}

#previewBio {
  @apply text-gray-700 leading-relaxed;
}

#previewContact {
  @apply text-gray-600;
}

/* QR code container */
#qrcode {
  width: 128px !important;
  height: 128px !important;
  margin: 1.5rem auto;
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#qrcode img {
  margin: 0 auto;
  display: block !important;
}

/* Contact info container */
#previewContact {
  @apply text-center w-full;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .grid {
    gap: 1rem;
  }

  #previewCard {
    margin-top: 2rem;
  }
}