/* KYC Onboarding Desktop Styles */

/* Import Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* QR Widget Styles */
.loading-message {
  @apply flex flex-col gap-0.5 items-center w-full;
}

.qr-container {
  @apply flex flex-col gap-0.5 items-center w-full;
}

.qr-card {
  @apply flex flex-col gap-0.5 items-center w-full;
}

/* Smooth transitions for form elements */
.kyc-desktop input,
.kyc-desktop select,
.kyc-desktop button {
  @apply transition-all duration-200;
}

/* Focus states for accessibility (WCAG) */
.kyc-desktop input:focus,
.kyc-desktop select:focus,
.kyc-desktop button:focus {
  @apply outline-none ring-2 ring-[#2881bb] ring-offset-2;
}

/* Radio button custom styles */
.kyc-desktop input[type="radio"] {
  @apply cursor-pointer accent-[#2881bb];
}

/* File input labels hover effect */
.kyc-desktop label:has(input[type="file"]):hover {
  @apply bg-gray-50;
}

/* Hidden class utility */
.hidden {
  @apply hidden;
}

/* Responsive utilities for desktop view */
@media (max-width: 640px) {
  .kyc-desktop .mobile-hidden {
    display: none;
  }
}

@media (min-width: 1024px) {
  .kyc-desktop .desktop-only {
    display: block;
  }
}