@layer components {
  .login-btn {
    @apply inline-block bg-white border border-primary text-primary font-medium rounded-full px-4 py-2 text-sm hover:bg-primary hover:text-white transition;
  }

  .login-btn-dr {
    @apply inline-block bg-white border border-[#034971] text-[#034971] font-medium rounded-full px-4 py-2 text-sm hover:bg-[#034971] hover:text-white transition;
  }

  .login-form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  }

  .login-form-label {
    @apply block text-base font-medium text-gray-900 mb-2;
  }

  .login-form-submit {
    @apply w-full py-3 px-8 border-0 rounded-full text-base text-white bg-primary hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer;
  }

  .login-form-pin-input {
    @apply w-full h-12 text-center text-2xl border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  }

  .login-form-pin-container {
    @apply flex gap-2 justify-start w-full;
  }

  .login-form-pin-code-submit {
    @apply py-3 px-8 border-0 rounded-full text-base text-white bg-primary hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer;
  }

  .login-form-pin-code-submit:disabled {
    @apply opacity-50 cursor-not-allowed bg-gray-400 hover:bg-gray-400;
  }

  .login-form-container {
    @apply w-full max-w-md mx-auto px-8;
  }

  .login-form-section {
    @apply text-left;
  }

  .login-welcome-text {
    @apply text-3xl font-semibold text-gray-900 text-center;
  }

  .login-radio-button {
    /* Additional login-specific radio button styling can go here if needed */
  }

  .login-radio-label {
    @apply ml-2 block text-sm font-medium text-gray-700;
  }

  .login-start-over-text {
    @apply text-blue-600 hover:text-blue-700 underline content-center;
  }

  .login-alert {
    @apply bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg;
  }

  .login-cancel-btn {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium rounded-full px-4 py-2 text-sm transition cursor-pointer;
  }

  .modal-close {
    @apply text-primary hover:text-primary-hover text-3xl font-bold px-2 cursor-pointer;
  }
}